地址替换

zengh

2022-05-16 63ad2c3598400370dd7da5534659fd7e768a0a4a

 src/views/wel/home.vue

@@ -8,12 +8,17 @@
              <div>
                <div>
                  群防群控队伍
                  <div class="title-1">({{ OURnum }})</div>
                  <div class="title-1">({{ OurNumLeftUp }})</div>
                </div>
              </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 } 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动画开关
@@ -112,13 +142,14 @@
      echarts1: "",

      leftUp: [],
      OurNumLeftUp: "",

      dialogVisibleOpenUp: false, //打开弹窗--群防群控队伍
      openUpId: "",
    };
  },

  computed: {
    OURnum() {
      return 146;
    },
  components: {
    openUp,
  },
  created() {},
  mounted() {
@@ -127,15 +158,55 @@
    // this.onTwoEcharts();
    this.createechart1(); //建立图表1
    this.onSixEcharts(); //图表1数据
    this.createMapJson();
    // 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);
      });
    },
    getLeftUp() {
      this.leftUp = [];
      (this.leftUp = []), (this.OurNumLeftUp = 0);
      getLeftUp().then((res) => {
        var d = res.data.data;
        d.forEach((item, index, arr) => {
          this.OurNumLeftUp += item.num;
          let img =
            item.region == "治保会队伍"
              ? "/img/wyh.png"
@@ -150,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(this.leftUp);
      });
    },
    getDataSevenDaty() {
@@ -164,11 +249,17 @@
      getSevenDaty().then((res) => {
        var d = res.data.data.alarmData;
        var t = res.data.data.times;
        var nyt = [];
        for (var k in t) {
          nyt.push(t[k].slice(5));
        }

        // console.log(d, t);
        that.onTwoEcharts(d, t);
        // console.log(nyt);
        that.onTwoEcharts(d, nyt, t);
      });
    },
    onTwoEcharts(d, t) {
    onTwoEcharts(d, t, yt) {
      var myChart = echarts.init(document.getElementById("on_two_yjy"));
      var data1 = d;
      // var data1 = [18, 30, 22, 20, 15, 33, 28];
@@ -187,6 +278,20 @@
          axisPointer: {
            type: "shadow",
          },
          formatter: (p) => {
            // console.log(p[0]);
            for (var k in yt) {
              if (yt[k].slice(5) == p[0].name) {
                var txtCon =
                  "<div style='text-align:left;' >" +
                  yt[k] +
                  "<br />任务数：" +
                  p[0].data +
                  "</div>";
              }
            }
            return txtCon;
          },
        },
        grid: {
          borderWidth: 0,
@@ -200,7 +305,7 @@
        },

        legend: {
          data: ["近7天下发任务数", "注册率"],
          data: ["近7天下发任务数"],
          align: "right",
          right: 10,
          textStyle: {
@@ -259,7 +364,7 @@
        ],
        series: [
          {
            name: "近7天下发任务数",
            name: "任务数",
            type: "bar",
            // "stack": "总量",
            barMaxWidth: 35,
@@ -320,6 +425,7 @@
          },
          legend: {
            data: ["注册量", "在线率"],
            // data: ["注册量"],
            align: "right",
            right: 10,
            textStyle: {
@@ -398,6 +504,7 @@
                },
              },
            },
            // ,
            {
              type: "value",
              name: "",
@@ -432,8 +539,8 @@
            {
              name: "注册量",
              type: "bar",
              data: [44, 46, 48, 56, 50, 66, 52, 43, 45],
              // data: data,
              // data: [44, 46, 48, 56, 50, 66, 52, 43, 45],
              data: data,
              barWidth: 6, //柱子宽度
              barGap: 0.4, //柱子之间间距
              itemStyle: {
@@ -452,6 +559,7 @@
                },
              },
            },
            // ,
            {
              name: "在线率",
              type: "line",
@@ -481,7 +589,41 @@
      });
    },

    createMapJson() {
    createMapJson(data2) {
      // console.log(data2);
      var ds = {
        东湖区: {},
        西湖区: {},
        青云谱区: {},
        青山湖区: {},
        新建区: {},
        红谷滩区: {},
        南昌县: {},
        安义县: {},
        进贤县: {},
      };
      var d2 = {
        东湖区: "",
        西湖区: "",
        青云谱区: "",
        青山湖区: "",
        新建区: "",
        红谷滩区: "",
        南昌县: "",
        安义县: "",
        进贤县: "",
      };
      for (var k in data2) {
        for (var n in ds) {
          if (data2[k].region == n) {
            ds[n] = {
              ...data2[k],
            };
            d2[n] = data2[k].num;
          }
        }
      }
      // console.log(ds);
      var myChart = echarts.init(document.getElementById("draw_yjy"));

      //geoCoordMap把所有可能出现的城市加到数组里面
@@ -498,17 +640,6 @@
      };

      //2014年数据
      var d2 = {
        东湖区: 44,
        西湖区: 46,
        青云谱区: 48,
        青山湖区: 56,
        新建区: 50,
        红谷滩区: 66,
        南昌县: 52,
        安义县: 43,
        进贤县: 45,
      };

      var colors = [
        [
@@ -686,8 +817,20 @@
                  let txtCon =
                    "<div style='text-align:left;' >" +
                    p.name +
                    ":<br />用户数：" +
                    "<br />用户数：" +
                    d2[p.name] +
                    "<br />治保会队伍：" +
                    ds[p.name].zbh +
                    "<br />内保干部队伍：" +
                    ds[p.name].nbgb +
                    "<br />治安巡防队伍：" +
                    ds[p.name].zaxf +
                    "<br />信息员队伍：" +
                    ds[p.name].xxy +
                    "<br />保安员队伍：" +
                    ds[p.name].bay +
                    "<br />警务辅助队伍：" +
                    ds[p.name].jwfz +
                    "</div>";
                  return txtCon;
                },
@@ -828,7 +971,7 @@
                    .slice(0, 20)
                ),
                symbolSize: function (val) {
                  return val[2] / 10;
                  return 10;
                },
                showEffectOn: "render",
                rippleEffect: {
@@ -870,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(() => {
@@ -881,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);
@@ -897,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);
      });
    },

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

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