+活动

liuyg

2021-11-03 ad22bccdb0bd1cee5d038b56f4d23a560c368e27

 src/views/wel/home.vue

@@ -13,7 +13,12 @@
              </div>
              <div id="on_three_yjy">
                <div>
                  <div v-for="(item, index) in leftUp.slice(0, 3)" :key="index">
                  <div
                    v-for="(item, index) in leftUp.slice(0, 3)"
                    :key="index"
                    class="openUp"
                    @click="openUp(item)"
                  >
                    <div>
                      <img :src="item.img" alt="" /><span>{{
                        item.value
@@ -23,7 +28,12 @@
                  </div>
                </div>
                <div>
                  <div v-for="(item, index) in leftUp.slice(3, 6)" :key="index">
                  <div
                    v-for="(item, index) in leftUp.slice(3, 6)"
                    :key="index"
                    class="openUp"
                    @click="openUp(item)"
                  >
                    <div>
                      <img :src="item.img" alt="" /><span>{{
                        item.value
@@ -46,12 +56,12 @@
                      v-for="(o, i) in rainArr"
                      :key="i"
                      :class="['rain rain-' + (i += 1)]"
                      @click="rainFun(i, o)"
                      @click="rainFun(o.id, o.num)"
                    >
                      {{ o }}<text>g</text>
                      {{ o.num }}<text>g</text>
                    </div>
                  </div>

                  <!-- {{ during }} -->
                  <div>
                    <img
                      :src="'/img/tree-' + stages + '.png'"
@@ -86,6 +96,15 @@
        </el-row>
      </div>
    </el-card>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisibleOpenUp"
      width="80%"
      :modal-append-to-body="false"
      top="2vh"
    >
      <openUp :id="openUpId"></openUp>
    </el-dialog>
  </el-row>
</template>

@@ -93,15 +112,26 @@
import * as echarts from "echarts";

import geojson from "@/geojson/nanchang.json";
import { getList, getSevenDaty, getLeftUp, getMapData } from "@/api/home/home";

import {
  getList,
  getSevenDaty,
  getLeftUp,
  getMapData,
  getRain,
  getAnergy,
  getAddtree,
} from "@/api/home/home";
import openUp from "./openUp.vue";
export default {
  data() {
    return {
      rainArr: [28, 63, 5, 902, 650, 99, 102, 104, 106, 108, 222, 555],
      stages: 1,
      treemove: false,
      during: 100, // 阶段阈值 1、小树[100以下](during > votes ) ，2、中树[100及以上 并且小于1000](during <= votes && oldest > votes)
      during: 1, // 阶段阈值 1、小树[100以下](during > votes ) ，2、中树[100及以上 并且小于1000](during <= votes && oldest > votes)
      fristD: 100, //中树阶层
      secondD: 1500, //大树阶层
      groundtime: 0, //生长延时时间
      plussNum: 1, // 加值数量（默认1）

      pluss: false, // 水滴值+1动画开关
@@ -113,7 +143,13 @@

      leftUp: [],
      OurNumLeftUp: "",

      dialogVisibleOpenUp: false, //打开弹窗--群防群控队伍
      openUpId: "",
    };
  },
  components: {
    openUp,
  },
  created() {},
  mounted() {
@@ -125,8 +161,41 @@
    // this.createMapJson();
    this.getLeftUp(); // 左上角数据
    this.getMapDataMethod(); // 左上角数据

    this.getNowRain();
    this.getNowAnergy();
  },
  watch: {
    during() {
      // setTimeout(() => {
      this.plussNum = 1;
      this.pluss = false;
      this.wateroff = true;
      this.watercss = false;
      this.treemove = false;

      // 小树阶段
      if (this.during > this.fristD) {
        this.stages = 1;
      }
      // 中树阶段
      if (this.during < this.secondD && this.during >= this.fristD) {
        this.stages = 2;
      }
      // 大树阶段
      if (this.during >= this.secondD) {
        this.stages = 3;
      }
      // }, this.groundtime);
    },
  },
  methods: {
    //打开弹窗--群防群控队伍
    openUp(val) {
      // console.log(val);
      this.openUpId = val.id;
      this.dialogVisibleOpenUp = true;
    },
    getMapDataMethod() {
      getMapData().then((res) => {
        this.createMapJson(res.data.data);
@@ -152,13 +221,27 @@
              : item.region == "警务辅助队伍"
              ? "/img/jfd.png"
              : "";
          let id =
            item.region == "治保会队伍"
              ? "1424615693403414529"
              : item.region == "内保干部队伍"
              ? "1424615773594312705"
              : item.region == "治安巡防队伍"
              ? "1424615835435130881"
              : item.region == "信息员队伍"
              ? "1424615909959524354"
              : item.region == "保安员队伍"
              ? "1424615972718895106"
              : item.region == "警务辅助队伍"
              ? "1424616047083905026"
              : "";
          this.leftUp.push({
            name: item.region,
            img: img,
            value: item.num,
            id: id,
          });
        });
        console.log(d);
      });
    },
    getDataSevenDaty() {
@@ -172,7 +255,7 @@
        }

        // console.log(d, t);
        console.log(nyt);
        // console.log(nyt);
        that.onTwoEcharts(d, nyt, t);
      });
    },
@@ -331,7 +414,7 @@
          data.push(d[k].num);
          datax.push(d[k].region);
        }
        console.log(res, 243423);
        // console.log(res, 243423);

        var option = {
          tooltip: {
@@ -507,7 +590,7 @@
    },

    createMapJson(data2) {
      console.log(data2);
      // console.log(data2);
      var ds = {
        东湖区: {},
        西湖区: {},
@@ -540,7 +623,7 @@
          }
        }
      }
      console.log(ds);
      // console.log(ds);
      var myChart = echarts.init(document.getElementById("draw_yjy"));

      //geoCoordMap把所有可能出现的城市加到数组里面
@@ -930,7 +1013,35 @@
        myChart.setOption(optionXyMap01);
      });
    },

    //获取当前漂浮雨量
    getNowRain() {
      this.rainArr = [];
      let d = {
        type: 1,
        identification: 1,
      };
      getRain(d).then((res) => {
        const data = res.data.data.records;
        for (let k in data) {
          this.rainArr.push({
            id: +data[k].id,
            identification: +data[k].identification,
            num: +data[k].num,
          });
        }
      });
    },
    //获取当前树能量
    getNowAnergy() {
      let d = {
          identification: 1,
        },
        that = this;
      getAnergy(d).then((res) => {
        // console.log(res.data, 2);
        that.during = res.data.data;
      });
    },
    // 设置树的大小，恢复动画
    setTree(time = 4000) {
      setTimeout(() => {
@@ -941,15 +1052,15 @@
        this.treemove = false;

        // 小树阶段
        if (this.during > 200) {
        if (this.during > this.fristD) {
          this.stages = 1;
        }
        // 中树阶段
        if (this.during <= 1500 && this.during > 200) {
        if (this.during <= this.secondD && this.during > this.fristD) {
          this.stages = 2;
        }
        // 大树阶段
        if (this.during > 1500) {
        if (this.during > this.secondD) {
          this.stages = 3;
        }
      }, time);
@@ -957,16 +1068,32 @@

    // 收取雨滴的动画
    rainFun(i, o) {
      this.plussNum = o;
      // this.plussNum = o;

      this.during += this.plussNum;
      // this.during += this.plussNum;

      this.pluss = true;
      this.treemove = true;
      setTimeout(() => {
        this.rainArr.splice((i -= 1), 1);
      }, 1000);
      this.setTree(2000);
      // this.pluss = true;
      // this.treemove = true;
      // setTimeout(() => {
      //   this.rainArr.splice((i -= 1), 1);
      // }, 1000);
      // this.setTree(2000);
      let d = {
          id: i, // id
          identification: 1, //用户
          num: o, // 值
        },
        that = this;
      getAddtree(d).then((res) => {
        that.pluss = true;
        that.treemove = true;
        setTimeout(() => {
          that.getNowRain();
          that.getNowAnergy();
        }, 1000);
        // that.groundtime = 3000;
        // that.setTree(2000);
      });
    },

    // 点击树的动画
@@ -1380,4 +1507,9 @@
  display: inline;
  padding-left: 2px;
}

//群防群控队伍  鼠标放上去成手势
.openUp {
  cursor: pointer;
}
</style>