From ad22bccdb0bd1cee5d038b56f4d23a560c368e27 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 03 Nov 2021 20:21:20 +0800
Subject: [PATCH] +活动
---
src/views/wel/home.vue | 182 +++++++++++++++++++++++++++++++++++++++------
1 files changed, 157 insertions(+), 25 deletions(-)
diff --git a/src/views/wel/home.vue b/src/views/wel/home.vue
index eff8227..3c059ab 100644
--- a/src/views/wel/home.vue
+++ b/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>
--
Gitblit v1.9.3