积分修改

zengh

2022-09-14 273c9401106930d437fae33ae0228d6a5b4decf0

积分修改

 public/img/jp.png

 src/api/home/team.js

New file
@@ -0,0 +1,37 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-09-06 11:01:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-06 12:01:38
 * @FilePath: \qfqk-web\src\api\home\team.js
 * @Description: 
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
 */
import request from '@/router/axios'

export const getTeamList = () => {
    return request({
        url: '/api/team/page?current=1&size=9999',
        method: 'get'
    })
}

export const getTeamTree = () => {
    return request({
        url: '/api/jurisdiction/lazy-team',
        method: 'get'
    })
}

export const getTeamDetail = (current, size, params) => {
    return request({
        url: '/api/team/page',
        method: 'get',
        params: {
            ...params,
            current,
            size,
        }
    })
}

 src/api/team/team.js

New file
@@ -0,0 +1,50 @@
import request from '@/router/axios';

export const getList = (current, size, params) => {
  return request({
    url: '/api/team/page',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

export const remove = (ids) => {
  return request({
    url: '/api/team/remove',
    method: 'post',
    params: {
      ids,
    }
  })
}

export const add = (row) => {
  return request({
    url: '/api/team/submit',
    method: 'post',
    data: row
  })
}

export const update = (row) => {
  return request({
    url: '/api/team/submit',
    method: 'post',
    data: row
  })
}

export const getNotice = (id) => {
  return request({
    url: '/api/team/detail',
    method: 'get',
    params: {
      id
    }
  })
}


 src/views/system/user.vue

@@ -362,6 +362,22 @@
              display: false,
            },
            {
              label: "所属队伍",
              prop: "team",
              overHidden: true,
              parent: false,
              type: "tree",
              searchLabelWidth: 90,
              searchSpan: 4,
              dicUrl: "/api/jurisdiction/lazy-team",
              props: {
                label: "title",
                value: "id"
              },
              checkStrictly: true,
              display: false,
            },
            {
              label: "所属角色",
              prop: "roleName",
              slot: true,
@@ -517,7 +533,27 @@
                  rules: [
                    {
                      required: false,
                      message: "请选择所属辖区",
                      message: "请选择所属工作单位",
                      trigger: "click"
                    }
                  ]
                },
                {
                  label: "所属队伍",
                  prop: "team",
                  overHidden: true,
                  parent: false,
                  type: "tree",
                  dicUrl: "/api/jurisdiction/lazy-team",
                  props: {
                    label: "title",
                    value: "id"
                  },
                  checkStrictly: true,
                  rules: [
                    {
                      required: false,
                      message: "请选择所属所属队伍",
                      trigger: "click"
                    }
                  ]

 src/views/team/team.vue

New file
@@ -0,0 +1,331 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               ref="crud"
               @row-del="rowDel"
               v-model="form"
               :permission="permissionList"
               @row-update="rowUpdate"
               @row-save="rowSave"
               :before-open="beforeOpen"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.team_delete"
          @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="{row}"
                slot="category">
        <el-tag>{{row.categoryName}}</el-tag>
      </template>

      <template slot-scope="{ row }" slot="name">
        <div style="display: flex; align-items: center;">
          <el-image v-if="row.isBrand == 1" style="width: 36px; vertical-align:middle;" src="/img/jp.png"></el-image>{{row.name}}
        </div>
      </template>

    </avue-crud>
  </basic-container>
</template>

<script>
  import {getList, remove, update, add, getNotice} from "@/api/team/team";
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          height: 'auto',
          calcHeight: 54,
          labelWidth: "100",
          dialogWidth: 950,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          excelBtn: true,
          dialogClickModal: false,
          column: [
            {
              label: "队伍名称",
              prop: "name",
              search: true,
              slot: true,
              rules: [{
                required: true,
                message: "请输入队伍名称",
                trigger: "blur"
              }]
            },
            {
              label: "所属派出所",
              sortable:true,
              prop: "police",
              searchLabelWidth: 100,
              search: true,
              searchSpan: 4,
              overHidden: true,
              parent: false,
              type: "tree",
              dicUrl: "/api/jurisdiction/lazy-tree",
              props: {
                label: "title",
                value: "id",
              },
              checkStrictly: true,
              rules: [
                {
                  required: true,
                  message: "请选择所属派出所",
                  trigger: "click",
                },
              ],
            },
            {
              label: "队标",
              prop: "url",
              // align:'center',
              width: 80,
              type: "upload",
              listType: "picture-img",
              action: "/api/blade-resource/oss/endpoint/put-file",
              propsHttp: {
                res: "data",
                url: "link",
              },
              // hide: true,
              span: 24,
            },
            {
              label: "队伍人数",
              prop: "number",
              type: "number",
              rules: [{
                required: true,
                message: "请输入队伍人数",
                trigger: "blur"
              }]
            },
            {
              label: "队伍口号",
              prop: "slogan",
            },
            {
              label: "品牌队伍",
              prop: "isBrand",
              type: "select",
              value: "0",
              rules: [
                {
                  required: true,
                  message: "请选择是否品牌队伍",
                  trigger: "blur",
                },
              ],
              dicData: [
                {
                  label: "是",
                  value: "1",
                },
                {
                  label: "否",
                  value: "0",
                },
              ],
            },
            {
              label: "创建人",
              prop: "realName",
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
            },
            {
              label: "创建时间",
              prop: "createTime",
              type: "date",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd",
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
            },
          ]
        },
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.team_add, false),
          viewBtn: this.vaildData(this.permission.team_view, false),
          delBtn: this.vaildData(this.permission.team_delete, false),
          editBtn: this.vaildData(this.permission.team_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      rowSave(row, done, loading) {
        add(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getNotice(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        const {releaseTimeRange} = this.query;
        let values = {
          ...params,
        };
        if (releaseTimeRange) {
          values = {
            ...params,
            releaseTime_datege: releaseTimeRange[0],
            releaseTime_datelt: releaseTimeRange[1],
            ...this.query
          };
          values.releaseTimeRange = null;
        }
        this.loading = true;
        getList(page.currentPage, page.pageSize, values).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
</script>

<style>
</style>

 src/views/wel/home.vue

@@ -1,1517 +1,1553 @@
<template>
  <el-row>
    <el-card class="yjy-home-card">
      <div class="content-box">
        <el-row>
          <div>
            <div>
              <div>
                <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"
                    class="openUp"
                    @click="openUp(item)"
                  >
    <el-row>
        <el-card class="yjy-home-card">
            <div class="content-box">
                <el-row>
                    <div>
                      <img :src="item.img" alt="" /><span>{{
                        item.value
                      }}</span>
                        <!-- 左上 -->
                        <div id="on_three_yjy">
                            <div>
                                <div class="title-or-return">
                                    <div>市局品牌队 / 行业</div>
                                </div>
                            </div>

                            <div class="left-up-content">
                                <div class="left-btn">
                                    <div @click="directionBtnClick('left', 'up')">
                                        <i class="el-icon-arrow-left"></i>
                                    </div>
                                </div>

                                <div ref="LeftUpContent" class="content">
                                    <div ref="LeftUpContentTop" style="left: 0">
                                        <div
                                            v-for="(item, index) in leftUpData.slice(0, Math.ceil(leftUpData.length / 2))"
                                            :key="index"
                                            class="openUp"
                                            @click="openUp(item, 'up')"
                                        >
                                            <div>
                                                <img src="/img/badw.png" alt />
                                                <span>{{item.number}}人</span>
                                            </div>
                                            <span>{{ item.name }}</span>
                                        </div>
                                    </div>
                                    <div ref="LeftUpContentBot" style="left: 0">
                                        <div
                                            v-for="(item, index) in leftUpData.slice(Math.ceil(leftUpData.length / 2), leftUpData.length)"
                                            :key="index"
                                            class="openUp"
                                            @click="openUp(item, 'up')"
                                        >
                                            <div>
                                                <img src="/img/badw.png" alt />
                                                <span>{{item.number}}人</span>
                                            </div>
                                            <span>{{ item.name }}</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="right-btn">
                                    <div @click="directionBtnClick('right', 'up')">
                                        <i class="el-icon-arrow-right"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 左下 -->
                        <div id="on_four_yjy">
                            <div>
                                <div class="title-or-return">
                                    <div>{{ leftDownParams.title }} {{leftDownParams.childrenData && leftDownParams.childrenData.length > 0 ? '(' + leftDownParams.teamNum + leftDownParams.teamUnit + ')' : ''}}/ 辖区</div>

                                    <div
                                        v-show="returnBtnShow"
                                        class="return-btn"
                                        @click="returnBtnClick('down')"
                                    >返回</div>
                                </div>
                            </div>

                            <div class="left-up-content">
                                <div class="left-btn">
                                    <div @click="directionBtnClick('left', 'down')">
                                        <i class="el-icon-arrow-left"></i>
                                    </div>
                                </div>

                                <div ref="LeftDownContent" class="content">
                                    <div ref="LeftDownContentTop" style="left: 0">
                                        <div
                                            v-for="(item, index) in leftDownData.slice(0, Math.ceil(leftDownData.length / 2))"
                                            :key="index"
                                            class="openUp"
                                            @click="openUp(item, 'down')"
                                        >
                                            <div>
                                                <img src="/img/badw.png" alt />
                                                <span>{{item.children && item.children.length > 0 ? item.children.length + '支' : '待建'}}</span>
                                            </div>
                                            <span :title="item.title">{{ item.title }}</span>
                                        </div>
                                    </div>
                                    <div ref="LeftDownContentBot" style="left: 0">
                                        <div
                                            v-for="(item, index) in leftDownData.slice(Math.ceil(leftDownData.length / 2), leftDownData.length)"
                                            :key="index"
                                            class="openUp"
                                            @click="openUp(item, 'down')"
                                        >
                                            <div>
                                                <img src="/img/badw.png" alt />
                                                <span>{{item.children && item.children.length > 0 ? item.children.length + '支' : '待建'}}</span>
                                            </div>
                                            <span :title="item.title">{{ item.title }}</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="right-btn">
                                    <div @click="directionBtnClick('right', 'down')">
                                        <i class="el-icon-arrow-right"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <span> {{ item.name }} </span>
                  </div>
                </div>
                <div>
                  <div
                    v-for="(item, index) in leftUp.slice(3, 6)"
                    :key="index"
                    class="openUp"
                    @click="openUp(item)"
                  >
                    <div id="draw_yjy" style="position: relative"></div>
                    <div>
                      <img :src="item.img" alt="" /><span>{{
                        item.value
                      }}</span>
                    </div>
                    <span> {{ item.name }} </span>
                  </div>
                </div>
              </div>
            </div>
                        <div>
                            <div>
                                <div>平台用户分析</div>
                            </div>
                            <div id="on_six_yjy"></div>
                        </div>

            <div>
              <div>
                <div>能量树</div>
              </div>
              <div id="on_four_yjy">
                <div class="tree">
                  <div>
                    <div
                      v-for="(o, i) in rainArr"
                      :key="i"
                      :class="['rain rain-' + (i += 1)]"
                      @click="rainFun(o.id, o.num)"
                    >
                      {{ o.num }}<text>g</text>
                        <div>
                            <div>
                                <div>近7天下发任务</div>
                            </div>
                            <div id="on_two_yjy"></div>
                        </div>
                    </div>
                  </div>
                  <!-- {{ during }} -->
                  <div>
                    <img
                      :src="'/img/tree-' + stages + '.png'"
                      :class="[
                        'tree-' + stages,
                        treemove ? 'move-' + stages : '',
                      ]"
                      hover-class="none"
                      @click="treeAdd"
                    />
                  </div>
                </div>
              </div>
                </el-row>
            </div>
          </div>
          <div id="draw_yjy" style="position: relative"></div>
          <div>
            <div>
              <div>
                <div>平台用户分析</div>
              </div>
              <div id="on_six_yjy"></div>
            </div>

            <div>
              <div>
                <div>近7天下发任务</div>
              </div>
              <div id="on_two_yjy"></div>
            </div>
          </div>
        </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>
        </el-card>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisibleOpenUp"
            width="64%"
            :modal-append-to-body="false"
            class="team-details"
        >
            <openUp :id="openUpId"></openUp>
        </el-dialog>
    </el-row>
</template>

<script>
import * as echarts from "echarts";
let leftUpData = {
    name: "市局品牌队",
    data: [
        {
            name: "天盾义警队",
            teamNum: '4',
            teamUnit: '支',
            peopleNum: 12,
            peopleUnit: '人',
            img: '/img/badw.png'
        },
        {
            name: "市保义警队",
            teamNum: '4',
            teamUnit: '支',
            peopleNum: 16,
            peopleUnit: '人',
            img: '/img/badw.png'
        },
        {
            name: "赛夫义警队",
            teamNum: '4',
            teamUnit: '支',
            peopleNum: 20,
            peopleUnit: '人',
            img: '/img/badw.png'
        },
        {
            name: "顺丰义警队",
            teamNum: '4',
            teamUnit: '支',
            peopleNum: 24,
            peopleUnit: '人',
            img: '/img/badw.png'
        },
        {
            name: "安泰义警队",
            teamNum: '4',
            teamUnit: '支',
            peopleNum: 28,
            peopleUnit: '人',
            img: '/img/badw.png'
        }
    ]
}

import geojson from "@/geojson/nanchang.json";
let leftDownData = {
    name: "分县局品牌队",
    data: [
        {
            name: "东湖分局",
            teamNum: '3',
            teamUnit: '支',
            peopleNum: 12,
            peopleUnit: '人',
            img: '/img/badw.png',
            childrenData: [
                {
                    name: "上营坊义警",
                    teamNum: '4',
                    teamUnit: '支',
                    peopleNum: 50,
                    peopleUnit: '人',
                    img: '/img/badw.png'
                },
                {
                    name: "“警苑春天银发”义警队",
                    teamNum: '4',
                    teamUnit: '支',
                    peopleNum: 51,
                    peopleUnit: '人',
                    img: '/img/badw.png'
                },
                {
                    name: "“南大一附医院”义警队",
                    teamNum: '4',
                    teamUnit: '支',
                    peopleNum: 10,
                    peopleUnit: '人',
                    img: '/img/badw.png'
                }
            ]
        },
        {
            name: "西湖分局",
            teamNum: '3',
            teamUnit: '支',
            peopleNum: 16,
            peopleUnit: '人',
            img: '/img/badw.png',
            childrenData: [
                {
                    name: "船山路",
                    teamNum: '4',
                    teamUnit: '支',
                    peopleNum: 50,
                    peopleUnit: '人',
                    img: '/img/badw.png'
                },
                {
                    name: "万寿宫义警",
                    teamNum: '4',
                    teamUnit: '支',
                    peopleNum: 100,
                    peopleUnit: '人',
                    img: '/img/badw.png'
                },
                {
                    name: "火车站义警",
                    teamNum: '4',
                    teamUnit: '支',
                    peopleNum: 50,
                    peopleUnit: '人',
                    img: '/img/badw.png'
                }
            ]
        },
        {
            name: "青山湖分局",
            teamNum: '4',
            teamUnit: '支',
            peopleNum: 20,
            peopleUnit: '人',
            img: '/img/badw.png',
            childrenData: [
                {
                    name: "梦时代义警",
                    teamNum: '4',
                    teamUnit: '支',
                    peopleNum: 50,
                    peopleUnit: '人',
                    img: '/img/badw.png'
                },
                {
                    name: "顺外村义警",
                    teamNum: '4',
                    teamUnit: '支',
                    peopleNum: 100,
                    peopleUnit: '人',
                    img: '/img/badw.png'
                },
                {
                    name: "八方义警",
                    teamNum: '4',
                    teamUnit: '支',
                    peopleNum: 50,
                    peopleUnit: '人',
                    img: '/img/badw.png'
                },
                {
                    name: "老娘舅义警",
                    teamNum: '4',
                    teamUnit: '支',
                    peopleNum: 50,
                    peopleUnit: '人',
                    img: '/img/badw.png'
                }
            ]
        },
        {
            name: "红谷滩分局",
            teamNum: '3',
            teamUnit: '支',
            peopleNum: 24,
            peopleUnit: '人',
            img: '/img/badw.png',
            childrenData: [
                {
                    name: "凤凰家园义警",
                    teamNum: '4',
                    teamUnit: '支',
                    peopleNum: 50,
                    peopleUnit: '人',
                    img: '/img/badw.png'
                },
                {
                    name: "南航附小义警",
                    teamNum: '4',
                    teamUnit: '支',
                    peopleNum: 50,
                    peopleUnit: '人',
                    img: '/img/badw.png'
                },
                {
                    name: "红古义警",
                    teamNum: '4',
                    teamUnit: '支',
                    peopleNum: 50,
                    peopleUnit: '人',
                    img: '/img/badw.png'
                }
            ]
        },
        {
            name: "高新分局",
            teamNum: '4',
            teamUnit: '支',
            peopleNum: 28,
            peopleUnit: '人',
            img: '/img/badw.png',
            childrenData: [
                {
                    name: "护鸟义警",
                    teamNum: '4',
                    teamUnit: '支',
                    peopleNum: 20,
                    peopleUnit: '人',
                    img: '/img/badw.png'
                }
            ]
        },
        {
            name: "进贤县分局",
            teamNum: '1',
            teamUnit: '支',
            peopleNum: 32,
            peopleUnit: '人',
            img: '/img/badw.png',
            childrenData: [
                {
                    name: "高新园义警",
                    teamNum: '4',
                    teamUnit: '支',
                    peopleNum: 50,
                    peopleUnit: '人',
                    img: '/img/badw.png'
                }
            ]
        },
        {
            name: "安义县分局",
            teamNum: '1',
            teamUnit: '支',
            peopleNum: 36,
            peopleUnit: '人',
            img: '/img/badw.png',
            childrenData: [
                {
                    name: "古村义警",
                    teamNum: '4',
                    teamUnit: '支',
                    peopleNum: 30,
                    peopleUnit: '人',
                    img: '/img/badw.png'
                }
            ]
        },
        {
            name: "青云谱分局",
            teamNum: '0',
            teamUnit: '支',
            peopleNum: 40,
            peopleUnit: '人',
            img: '/img/badw.png'
        },
        {
            name: "新建分局",
            teamNum: '0',
            teamUnit: '支',
            peopleNum: 44,
            peopleUnit: '人',
            img: '/img/badw.png'
        },
        {
            name: "湾里分局待建",
            teamNum: '0',
            teamUnit: '支',
            peopleNum: 48,
            peopleUnit: '人',
            img: '/img/badw.png'
        },
        {
            name: "南昌县分局待建",
            teamNum: '0',
            teamUnit: '支',
            peopleNum: 52,
            peopleUnit: '人',
            img: '/img/badw.png'
        },
        {
            name: "经开分局待建",
            teamNum: '0',
            teamUnit: '支',
            peopleNum: 56,
            peopleUnit: '人',
            img: '/img/badw.png'
        }
    ]
}

import axios from 'axios'
import * as echarts from "echarts"

import geojson from "@/geojson/nanchang.json"
import {
  getList,
  getSevenDaty,
  getLeftUp,
  getMapData,
  getRain,
  getAnergy,
  getAddtree,
} from "@/api/home/home";
import openUp from "./openUp.vue";
    getLeftUp,
    getMapData,
} from "@/api/home/home"
import {
    getTeamList,
    getTeamTree
} from "@/api/home/team"

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: 1, // 阶段阈值 1、小树[100以下](during > votes ) ，2、中树[100及以上 并且小于1000](during <= votes && oldest > votes)
      fristD: 100, //中树阶层
      secondD: 1500, //大树阶层
      groundtime: 0, //生长延时时间
      plussNum: 1, // 加值数量（默认1）
    data () {
        return {
            option1: "",
            echarts1: "",

      pluss: false, // 水滴值+1动画开关
      movetree: true, // 树动画开关
      ranksNum: [],
            leftUp: [],

      option1: "",
      echarts1: "",
            returnBtnShow: false, // 返回按钮是否显示

      leftUp: [],
      OurNumLeftUp: "",
            // 左上数据
            leftUpData: [],

      dialogVisibleOpenUp: false, //打开弹窗--群防群控队伍
      openUpId: "",
    };
  },
  components: {
    openUp,
  },
  created() {},
  mounted() {
    // eslint-disable-next-line no-undef
    this.getDataSevenDaty(); //获取7天下发数量
    // this.onTwoEcharts();
    this.createechart1(); //建立图表1
    this.onSixEcharts(); //图表1数据
    // this.createMapJson();
    this.getLeftUp(); // 左上角数据
    this.getMapDataMethod(); // 左上角数据
            leftDownParams: {},
            leftDownData: [],

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

      // 小树阶段
      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.OurNumLeftUp = 0);
      getLeftUp().then((res) => {
        var d = res.data.data;
        d.forEach((item, index, arr) => {
          if (item.region == "治保会队伍" || item.region == "内保干部队伍" || item.region == "平安志愿者" || item.region == "信息员队伍" || item.region == "保安员队伍" || item.region == "警务辅助队伍"){
          this.OurNumLeftUp += item.num;
          let img =
            item.region == "治保会队伍"
              ? "/img/wyh.png"
              : item.region == "内保干部队伍"
              ? "/img/zabw.png"
              : item.region == "平安志愿者"
              ? "/img/xf.png"
              : item.region == "信息员队伍"
              ? "/img/xxy.png"
              : item.region == "保安员队伍"
              ? "/img/badw.png"
              : item.region == "警务辅助队伍"
              ? "/img/jfd.png"
              : "";
          let id =
            item.region == "治保会队伍"
              ? "1495714130024673282"
              : item.region == "内保干部队伍"
              ? "1495714221926068225"
              : item.region == "平安志愿者"
              ? "1416225906918195201"
              : item.region == "信息员队伍"
              ? "1495714309071122434"
              : item.region == "保安员队伍"
              ? "1495714343888039937"
              : item.region == "警务辅助队伍"
              ? "1495714378025480193"
              : "";
          this.leftUp.push({
            name: item.region,
            img: img,
            value: item.num,
            id: id,
          });
          }
        });
      });
    },
    getDataSevenDaty() {
      var that = this;
      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));
            dialogVisibleOpenUp: false, //打开弹窗--群防群控队伍
            openUpId: "",



        }

        // console.log(d, t);
        // console.log(nyt);
        that.onTwoEcharts(d, nyt, 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];
      var xData = t;
      // var xData = (function () {
      //   var data = [];
      //   var d = 20;
      //   for (var i = d - 6; i <= d; i++) {
      //     data.push(i + "号");
      //   }
      //   return data;
      // })();
      var option = {
        tooltip: {
          trigger: "axis",
          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>";
              }
    components: {
        openUp,
    },
    created () {
        const that = this
        axios.all([getTeamTree(), getTeamList()]).then(function (res) {

            leftDownData = {
                title: "分县局品牌队",
                data: res[0].data.data[0].children
            }
            return txtCon;
          },
        },
        grid: {
          borderWidth: 0,
          top: "10%",
          left: "10%",
          bottom: "10%",
          right: "8%",
          textStyle: {
            color: "#fff",
          },
        },

        legend: {
          data: ["近7天下发任务数"],
          align: "right",
          right: 10,
          textStyle: {
            color: "#fff",
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 35,
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#063374",
                width: 1,
                type: "solid",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#00c7ff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value}",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#00c7ff",
                width: 1,
                type: "solid",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#063374",
              },
            },
          },
        ],
        series: [
          {
            name: "任务数",
            type: "bar",
            // "stack": "总量",
            barMaxWidth: 35,
            barGap: "10%",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#FF7E1A", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#D80000", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: data1,
          },
        ],
      };
            that.leftDownParams = leftDownData

      myChart.setOption(option, true);
            that.leftDownData = res[0].data.data[0].children

            res[1].data.data.records.forEach(item => {
                item.img = '/img/badw.png'
                if (item.isBrand == 1) {
                    that.leftUpData.push(item)
                }
            })
        })
    },
    createechart1() {
      var myChart = echarts.init(document.getElementById("on_six_yjy"));
      this.echarts1 = myChart;
    mounted () {
        // eslint-disable-next-line no-undef
        this.createTaskEcharts()
        this.createUserEcharts() //建立图表1
        // this.createMapJson();
        // this.getLeftUp() // 左上角数据
        this.getMapDataMethod() // 左上角数据
    },
    onSixEcharts() {
      this.echarts1.clear();
      //改折线图
      var that = this;
      getList().then((res) => {
        var data = [];
        var datax = [];
        var d = res.data.data;
        for (var k in d) {
          data.push(d[k].num);
          datax.push(d[k].region);
        }
        // console.log(res, 243423);
    methods: {
        //打开弹窗--群防群控队伍
        openUp (params, type) {
            if (type == 'up') {
                if (params.childrenData && params.childrenData.length > 0) {
                    this.leftUpData = params.childrenData
                    this.returnBtnShow = true
                } else {
                    this.openUpId = params.id
                    this.dialogVisibleOpenUp = true
                }
            } else {
                if (this.returnBtnShow == true) {
                    console.log(params)

        var option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            data: ["注册量", "在线率"],
            // data: ["注册量"],
            align: "right",
            right: 10,
            textStyle: {
              color: "#fff",
            },
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 35,
          },
          grid: {
            left: "3%",
            right: "2%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: datax,
              // [
              //   "东湖区",
              //   "西湖区",
              //   "青云谱区",
              //   "青山湖区",
              //   "新建区",
              //   "红谷滩区",
              //   "南昌县",
              //   "安义县",
              //   "进贤县",
              // ],
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#063374",
                  width: 1,
                  type: "solid",
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#00c7ff",
                },
                rotate: 45,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "",
              axisLabel: {
                formatter: "{value}",
              },
              position: "left",
              axisTick: {
                show: false,
              },
              minInterval: 1,
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#00c7ff",
                  width: 1,
                  type: "solid",
                },
              },
              // max: 3,
              // min: 0,
              splitLine: {
                lineStyle: {
                  color: "#063374",
                },
              },
            },
            // ,
            {
              type: "value",
              name: "",
              // min: 0,
              // max: 250,
              // interval: 50,
              axisLabel: {
                formatter: "{value} %",
              },
              position: "right",
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#00c7ff",
                  width: 1,
                  type: "solid",
                },
              },
              max: 100,
              min: 0,
              splitLine: {
                lineStyle: {
                  color: "#063374",
                },
              },
            },
          ],
          series: [
            {
              name: "注册量",
              type: "bar",
              // data: [44, 46, 48, 56, 50, 66, 52, 43, 45],
              data: data,
              barWidth: 6, //柱子宽度
              barGap: 0.4, //柱子之间间距
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#008cff",
                    },
                    {
                      offset: 1,
                      color: "#005193",
                    },
                  ]),
                  opacity: 1,
                },
              },
            },
            // ,
            {
              name: "在线率",
              type: "line",
              data: [50, 54, 58, 55, 65, 72, 44, 55, 58],
              // barWidth: 6,
              // barGap: 0.4,
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#c4e300",
                    },
                    {
                      offset: 1,
                      color: "#728400",
                    },
                  ]),
                  opacity: 1,
                },
              },
            },
          ],
        };
        that.echarts1.setOption(option);
      });
    },
                    this.openUpId = params.id
                    this.dialogVisibleOpenUp = true
                } else {
                    if (params.children && params.children.length > 0) {
                        this.leftDownParams = params
                        this.leftDownData = params.children
                        this.returnBtnShow = true
                    } else {
                        this.openUpId = params.id
                        this.dialogVisibleOpenUp = true
                    }
                }

    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把所有可能出现的城市加到数组里面
      var geoCoordMap = {
        东湖区: [115.889675, 28.682988],
        西湖区: [115.91065, 28.662901],
        青云谱区: [115.907292, 28.635724],
        青山湖区: [115.949044, 28.689292],
        新建区: [115.820806, 28.690788],
        红谷滩区: [115.8580521, 28.69819928],
        南昌县: [115.942465, 28.543781],
        安义县: [115.553109, 28.841334],
        进贤县: [116.267671, 28.365681],
      };

      //2014年数据

      var colors = [
        [
          "#1DE9B6",
          "#F46E36",
          "#04B9FF",
          "#5DBD32",
          "#FFC809",
          "#FB95D5",
          "#BDA29A",
          "#6E7074",
          "#546570",
          "#C4CCD3",
        ],
        [
          "#37A2DA",
          "#67E0E3",
          "#32C5E9",
          "#9FE6B8",
          "#FFDB5C",
          "#FF9F7F",
          "#FB7293",
          "#E062AE",
          "#E690D1",
          "#E7BCF3",
          "#9D96F5",
          "#8378EA",
          "#8378EA",
        ],
        [
          "#DD6B66",
          "#759AA0",
          "#E69D87",
          "#8DC1A9",
          "#EA7E53",
          "#EEDD78",
          "#73A373",
          "#73B9BC",
          "#7289AB",
          "#91CA8C",
          "#F49F42",
        ],
      ];
      var colorIndex = 0;

      // eslint-disable-next-line no-undef
      $(function () {
        var year = ["2013"];
        var mapData = [[]];

        /*柱子Y名称*/
        var categoryData = [];
        var barData = [];

        for (var key in geoCoordMap) {
          mapData[0].push({
            year: "2014",
            name: key,
            value: d2[key],
          });
        }

        for (var i = 0; i < mapData.length; i++) {
          mapData[i].sort(function sortNumber(a, b) {
            return a.value - b.value;
          });
          barData.push([]);
          categoryData.push([]);
          for (var j = 0; j < mapData[i].length; j++) {
            barData[i].push(mapData[i][j].value);
            categoryData[i].push(mapData[i][j].name);
          }
        }

        echarts.registerMap("china", geojson);
        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
              });
            }
          }
          return res;
        };
        },
        /**
         * @description: 左上返回按钮事件
         * @return {*}
         */
        returnBtnClick (type) {
            if (type == 'up') {
                this.leftUpData = leftUpData.data
                this.returnBtnShow = false
            } else {
                this.leftDownParams = leftDownData
                this.leftDownData = leftDownData.data
                this.returnBtnShow = false
            }

        var optionXyMap01 = {
          timeline: {
            data: year,
            axisType: "category",
            autoPlay: true,
            playInterval: 3000,
            left: "10%",
            right: "10%",
            bottom: "3%",
            width: "80%",
            show: false,
            label: {
              normal: {
                textStyle: {
                  color: "#ddd",
                },
              },
              emphasis: {
                textStyle: {
                  color: "#fff",
                },
              },
            },
            symbolSize: 10,
            lineStyle: {
              color: "#555",
            },
            checkpointStyle: {
              borderColor: "#777",
              borderWidth: 2,
            },
            controlStyle: {
              showNextBtn: true,
              showPrevBtn: true,
              normal: {
                color: "#666",
                borderColor: "#666",
              },
              emphasis: {
                color: "#aaa",
                borderColor: "#aaa",
              },
            },
          },
          baseOption: {
            animation: true,
            animationDuration: 1000,
            animationDurationUpdate: 1000,
            animationEasing: "cubicInOut",
            animationEasingUpdate: "cubicInOut",
            grid: {
              right: "4%",
              top: "38%",
              bottom: "38%",
              width: "18%",
            },
            tooltip: {
              trigger: "axis", // hover触发器
              // backgroundColor: 'rgba(0,0,0,.7)',
              // textStyle: {
              //     color: '#fff'
              // },
              borderWidth: 0,
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                shadowStyle: {
                  color: "rgba(150,150,150,0.1)", //hover颜色
                },
              },
            },
            geo: {
              show: true,
              map: "china",
              roam: true,
              zoom: 12,
              center: [116.2, 28.705],
              tooltip: {
                trigger: "item",
                backgroundColor: "rgba(0,0,0,.7)",
                textStyle: {
                  color: "#fff",
                },
                borderWidth: 0,
                formatter: (p) => {
                  let txtCon =
                    "<div style='text-align:left;' >" +
                    p.name +
                    "<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;
                },
              },
              label: {
                emphasis: {
                  color: "#fff",
                },
              },
              itemStyle: {
                normal: {
                  borderColor: "rgba(147, 235, 248, 1)",
                  borderWidth: 1,
                  areaColor: {
                    type: "radial",
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                      },
                    ],
                    globalCoord: false, // 缺省为 false
                  },
                  shadowColor: "rgba(128, 217, 248, 1)",
                  // shadowColor: 'rgba(255, 255, 255, 1)',
                  shadowOffsetX: -2,
                  shadowOffsetY: 2,
                  shadowBlur: 10,
                },
                emphasis: {
                  areaColor: "#389BB7",
                  borderWidth: 0,
                },
              },
            },
          },
          options: [],
        };
        },

        for (var n = 0; n < year.length; n++) {
          optionXyMap01.options.push({
            xAxis: {
              type: "value",
              scale: true,
              position: "top",
              min: 0,
              boundaryGap: false,
              splitLine: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                margin: 2,
                textStyle: {
                  color: "#aaa",
                },
              },
            },
            yAxis: {
              type: "category",
              //  name: 'TOP 20',
              nameGap: 16,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#ddd",
                },
              },
              axisTick: {
                show: false,
                lineStyle: {
                  color: "#ddd",
                },
              },
              axisLabel: {
                interval: 0,
                textStyle: {
                  color: "#ddd",
                },
              },
              data: categoryData[n],
            },
        getMapDataMethod () {
            getMapData().then((res) => {
                console.log(res, 22342342)
                this.createMapJson(res.data.data)
            })
        },

            series: [
              //地图
              {
                type: "map",
                map: "china",
                geoIndex: 0,
                aspectScale: 0.75, //长宽比
                showLegendSymbol: false, // 存在legend时显示
                label: {
                  normal: {
        getLeftUp () {
            (this.leftUp = []), (this.OurNumLeftUp = 0)
            getLeftUp().then((res) => {
                var d = res.data.data
                d.forEach((item, index, arr) => {
                    if (item.region == "治保会队伍" || item.region == "内保干部队伍" || item.region == "平安志愿者" || item.region == "信息员队伍" || item.region == "保安员队伍" || item.region == "警务辅助队伍") {
                        this.OurNumLeftUp += item.num
                        let img =
                            item.region == "治保会队伍"
                                ? "/img/wyh.png"
                                : item.region == "内保干部队伍"
                                    ? "/img/zabw.png"
                                    : item.region == "平安志愿者"
                                        ? "/img/xf.png"
                                        : item.region == "信息员队伍"
                                            ? "/img/xxy.png"
                                            : item.region == "保安员队伍"
                                                ? "/img/badw.png"
                                                : item.region == "警务辅助队伍"
                                                    ? "/img/jfd.png"
                                                    : ""
                        let id =
                            item.region == "治保会队伍"
                                ? "1495714130024673282"
                                : item.region == "内保干部队伍"
                                    ? "1495714221926068225"
                                    : item.region == "平安志愿者"
                                        ? "1416225906918195201"
                                        : item.region == "信息员队伍"
                                            ? "1495714309071122434"
                                            : item.region == "保安员队伍"
                                                ? "1495714343888039937"
                                                : item.region == "警务辅助队伍"
                                                    ? "1495714378025480193"
                                                    : ""
                        this.leftUp.push({
                            name: item.region,
                            img: img,
                            value: item.num,
                            id: id,
                        })
                    }
                })
            })
        },

        /**
         * @description: 用户数量
         * @return {*}
         */
        createUserEcharts () {
            var myChart = echarts.init(document.getElementById("on_six_yjy"))

            var currentData = [
                { name: '1号', value: 22, itemStyle: { color: this.attackSourcesColor()[0] } },
                { name: '2号', value: 21, itemStyle: { color: this.attackSourcesColor()[1] } },
                { name: '3号', value: 20, itemStyle: { color: this.attackSourcesColor()[2] } },
                { name: '4号', value: 19, itemStyle: { color: this.attackSourcesColor()[3] } },
                { name: '5号', value: 18, itemStyle: { color: this.attackSourcesColor()[3] } },
                { name: '6号', value: 17, itemStyle: { color: this.attackSourcesColor()[3] } },
                { name: '7号', value: 16, itemStyle: { color: this.attackSourcesColor()[3] } },
                { name: '8号', value: 15, itemStyle: { color: this.attackSourcesColor()[3] } }
            ]

            var yData = []
            var bgData = [] //背景按最大值

            currentData.forEach((item, index) => {
                bgData.push({ value: currentData[0].value })
                yData[index] = { value: index + 1 }
            })

            myChart.setOption(this.initOptions(yData, currentData, bgData), true)
        },

        /**
         * @description: 任务数量
         * @return {*}
         */
        createTaskEcharts () {
            var myChart = echarts.init(document.getElementById("on_two_yjy"))

            var currentData = [
                { name: '1号', value: 22, itemStyle: { color: this.attackSourcesColor()[0] } },
                { name: '2号', value: 21, itemStyle: { color: this.attackSourcesColor()[1] } },
                { name: '3号', value: 20, itemStyle: { color: this.attackSourcesColor()[2] } },
                { name: '4号', value: 19, itemStyle: { color: this.attackSourcesColor()[3] } },
                { name: '5号', value: 18, itemStyle: { color: this.attackSourcesColor()[3] } },
                { name: '6号', value: 17, itemStyle: { color: this.attackSourcesColor()[3] } },
                { name: '7号', value: 16, itemStyle: { color: this.attackSourcesColor()[3] } },
                { name: '8号', value: 15, itemStyle: { color: this.attackSourcesColor()[3] } }
            ]

            var yData = []
            var bgData = [] //背景按最大值

            currentData.forEach((item, index) => {
                bgData.push({ value: currentData[0].value })
                yData[index] = { value: index + 1 }
            })

            myChart.setOption(this.initOptions(yData, currentData, bgData), true)
        },

        attackSourcesColor () {
            return [
                new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: '#EB3B5A' },
                    { offset: 1, color: '#FE9C5A' }
                ]),
                new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: '#FA8231' },
                    { offset: 1, color: '#FFD14C' }
                ]),
                new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: '#F7B731' },
                    { offset: 1, color: '#FFEE96' }
                ]),
                new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: '#395CFE' },
                    { offset: 1, color: '#2EC7CF' }
                ])
            ]
        },

        initOptions (yData, currentData, bgData) {
            return {
                tooltip: {
                    show: false,
                  },
                  emphasis: {
                    show: false,
                    backgroundColor: 'rgba(3,169,244, 0.5)', //背景颜色（此时为默认色）
                    textStyle: {
                      color: "#fff",
                        fontSize: 16
                    }
                },
                color: ['#F7B731'],
                grid: {
                    left: '4%',
                    right: '4%',
                    bottom: '2%',
                    top: '2%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    max: 22,
                    min: 0,
                    splitLine: {
                        show: false
                    },
                  },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                  normal: {
                    areaColor: "#031525",
                    borderColor: "#FFFFFF",
                  },
                  emphasis: {
                    areaColor: "#2B91B7",
                  },
                },
                animation: false,
                data: mapData,
              },
              //地图中闪烁的点
              {
                //  name: 'Top 5',
                type: "effectScatter",
                coordinateSystem: "geo",
                data: convertData(
                  mapData[n]
                    .sort(function (a, b) {
                      return b.value - a.value;
                yAxis: [
                    {
                        type: 'category',
                        inverse: true,
                        axisTick: 'none',
                        axisLine: 'none',
                        show: true,
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: '10'
                            }
                        },
                        data: yData
                    }
                ],
                series: [
                    {
                        zlevel: 1,
                        type: 'bar',
                        barWidth: '15px',
                        animationDuration: 1500,
                        data: currentData,
                        align: 'center',
                        itemStyle: {
                            normal: {
                                barBorderRadius: 10
                            }
                        },
                        label: {
                            show: true,
                            fontSize: 10,
                            color: '#fff',
                            textBorderWidth: 2,
                            padding: [2, 0, 0, 0],
                            formatter (params) {
                                return params.data.name
                            }
                        }
                    },
                    {
                        name: '任务数量',
                        type: 'bar',
                        barWidth: 15,
                        barGap: '-100%',
                        margin: '20',
                        data: bgData,
                        textStyle: {
                            //图例文字的样式
                            fontSize: 10,
                            color: '#fff'
                        },
                        itemStyle: {
                            normal: {
                                color: '#05325F',
                                //width:"100%",
                                fontSize: 10,
                                barBorderRadius: 30
                            }
                        }
                    }
                ]
            }
        },

        createMapJson (data2) {
            // console.log(data2);
            var ds = {
                东湖区: {},
                西湖区: {},
                青云谱区: {},
                青山湖区: {},
                新建区: {},
                红谷滩区: {},
                南昌县: {},
                安义县: {},
                进贤县: {},
            }
            var d2 = {
                东湖区: 0,
                西湖区: 0,
                青云谱区: 0,
                青山湖区: 0,
                新建区: 0,
                红谷滩区: 0,
                南昌县: 0,
                安义县: 0,
                进贤县: 100,
            }
            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把所有可能出现的城市加到数组里面
            var geoCoordMap = {
                东湖区: [115.889675, 28.682988],
                西湖区: [115.91065, 28.662901],
                青云谱区: [115.907292, 28.635724],
                青山湖区: [115.949044, 28.689292],
                新建区: [115.820806, 28.690788],
                红谷滩区: [115.8580521, 28.69819928],
                南昌县: [115.942465, 28.543781],
                安义县: [115.553109, 28.841334],
                进贤县: [116.267671, 28.365681],
            }

            //2014年数据

            var colors = [
                [
                    "#1DE9B6",
                    "#F46E36",
                    "#04B9FF",
                    "#5DBD32",
                    "#FFC809",
                    "#FB95D5",
                    "#BDA29A",
                    "#6E7074",
                    "#546570",
                    "#C4CCD3",
                ],
                [
                    "#37A2DA",
                    "#67E0E3",
                    "#32C5E9",
                    "#9FE6B8",
                    "#FFDB5C",
                    "#FF9F7F",
                    "#FB7293",
                    "#E062AE",
                    "#E690D1",
                    "#E7BCF3",
                    "#9D96F5",
                    "#8378EA",
                    "#8378EA",
                ],
                [
                    "#DD6B66",
                    "#759AA0",
                    "#E69D87",
                    "#8DC1A9",
                    "#EA7E53",
                    "#EEDD78",
                    "#73A373",
                    "#73B9BC",
                    "#7289AB",
                    "#91CA8C",
                    "#F49F42",
                ],
            ]
            var colorIndex = 0

            // eslint-disable-next-line no-undef
            $(function () {
                var year = ["2013"]
                var mapData = [[]]

                /*柱子Y名称*/
                var categoryData = []
                var barData = []

                for (var key in geoCoordMap) {
                    mapData[0].push({
                        year: "2014",
                        name: key,
                        value: d2[key],
                    })
                    .slice(0, 20)
                ),
                symbolSize: function (val) {
                  return 10;
                },
                showEffectOn: "render",
                rippleEffect: {
                  brushType: "stroke",
                },
                hoverAnimation: true,
                label: {
                  normal: {
                    formatter: "{b}",
                    position: "right",
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: colors[colorIndex][n],
                    shadowBlur: 10,
                    shadowColor: colors[colorIndex][n],
                  },
                },
                zlevel: 1,
              },
              //柱状图
              {
                zlevel: 1.5,
                type: "bar",
                symbol: "none",
                itemStyle: {
                  normal: {
                    color: colors[colorIndex][n],
                  },
                },
                data: barData[n],
              },
            ],
          });
        }
                }

        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,
                console.log(mapData, geoCoordMap, 78979)

                for (var i = 0; i < mapData.length; i++) {
                    mapData[i].sort(function sortNumber (a, b) {
                        return a.value - b.value
                    })
                    barData.push([])
                    categoryData.push([])
                    for (var j = 0; j < mapData[i].length; j++) {
                        barData[i].push(mapData[i][j].value)
                        categoryData[i].push(mapData[i][j].name)
                    }
                }

                echarts.registerMap("china", geojson)
                var convertData = function (data) {
                    var res = []
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name]
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value),
                            })
                        }
                    }
                    return res
                }

                var optionXyMap01 = {
                    timeline: {
                        data: year,
                        axisType: "category",
                        autoPlay: true,
                        playInterval: 3000,
                        left: "10%",
                        right: "10%",
                        bottom: "3%",
                        width: "80%",
                        show: false,
                        label: {
                            normal: {
                                textStyle: {
                                    color: "#ddd",
                                },
                            },
                            emphasis: {
                                textStyle: {
                                    color: "#fff",
                                },
                            },
                        },
                        symbolSize: 10,
                        lineStyle: {
                            color: "#555",
                        },
                        checkpointStyle: {
                            borderColor: "#777",
                            borderWidth: 2,
                        },
                        controlStyle: {
                            showNextBtn: true,
                            showPrevBtn: true,
                            normal: {
                                color: "#666",
                                borderColor: "#666",
                            },
                            emphasis: {
                                color: "#aaa",
                                borderColor: "#aaa",
                            },
                        },
                    },
                    baseOption: {
                        animation: true,
                        animationDuration: 1000,
                        animationDurationUpdate: 1000,
                        animationEasing: "cubicInOut",
                        animationEasingUpdate: "cubicInOut",
                        grid: {
                            right: "4%",
                            top: "38%",
                            bottom: "38%",
                            width: "18%",
                        },
                        tooltip: {
                            trigger: "axis", // hover触发器
                            // backgroundColor: 'rgba(0,0,0,.7)',
                            // textStyle: {
                            //     color: '#fff'
                            // },
                            borderWidth: 0,
                            axisPointer: {
                                // 坐标轴指示器，坐标轴触发有效
                                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                                shadowStyle: {
                                    color: "rgba(150,150,150,0.1)", //hover颜色
                                },
                            },
                        },
                        geo: {
                            show: true,
                            map: "china",
                            roam: true,
                            zoom: 12,
                            center: [116.2, 28.705],
                            tooltip: {
                                trigger: "item",
                                backgroundColor: "rgba(0,0,0,.7)",
                                textStyle: {
                                    color: "#fff",
                                },
                                borderWidth: 0,
                                formatter: (p) => {
                                    let txtCon =
                                        `<div style='text-align:left;' >
                                            ${p.name}
                                            <br />
                                            用户数量：${d2[p.name]}
                                             <br />
                                            背审通过：${d2[p.name]}
                                             <br />
                                            背审异常：${d2[p.name]}
                                        </div>`
                                    return txtCon
                                },
                            },
                            label: {
                                emphasis: {
                                    show: false
                                },
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: "rgba(147, 235, 248, 1)",
                                    borderWidth: 1,
                                    areaColor: {
                                        type: "radial",
                                        x: 0.5,
                                        y: 0.5,
                                        r: 0.8,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                                            },
                                        ],
                                        globalCoord: false, // 缺省为 false
                                    },
                                    shadowColor: "rgba(128, 217, 248, 1)",
                                    // shadowColor: 'rgba(255, 255, 255, 1)',
                                    shadowOffsetX: -2,
                                    shadowOffsetY: 2,
                                    shadowBlur: 10,
                                },
                                emphasis: {
                                    areaColor: "#389BB7",
                                    borderWidth: 0,
                                },
                            },
                        },
                    },
                    options: [],
                }

                for (var n = 0; n < year.length; n++) {
                    optionXyMap01.options.push({
                        xAxis: {
                            type: "value",
                            scale: true,
                            position: "top",
                            min: 0,
                            boundaryGap: false,
                            splitLine: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                margin: 2,
                                textStyle: {
                                    color: "#aaa",
                                },
                            },
                        },
                        yAxis: {
                            type: "category",
                            //  name: 'TOP 20',
                            nameGap: 16,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ddd",
                                },
                            },
                            axisTick: {
                                show: false,
                                lineStyle: {
                                    color: "#ddd",
                                },
                            },
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    color: "#ddd",
                                },
                            },
                            data: categoryData[n],
                        },
                        series: [
                            //地图
                            {
                                //文字和标志
                                name: "light",
                                type: "scatter",
                                coordinateSystem: "geo",
                                data: convertData(mapData[n]),
                                symbolSize: function (val) {
                                    return val[2] / 10
                                },
                                label: {
                                    normal: {
                                        offset: [10, 0],
                                        formatter: "{b}",
                                        position: "right",
                                        show: true,
                                    },
                                    emphasis: {
                                        show: true,
                                    },
                                },
                                itemStyle: {
                                    normal: {
                                        color: colors[colorIndex][n],
                                    },
                                },
                            },
                            //地图中闪烁的点
                            {
                                //  name: 'Top 5',
                                type: "effectScatter",
                                coordinateSystem: "geo",
                                data: convertData(
                                    mapData[n]
                                        .sort(function (a, b) {
                                            return b.value - a.value
                                        })
                                        .slice(0, 20)
                                ),
                                symbolSize: function (val) {
                                    console.log(val, 123123)
                                    return val[2] + 2
                                },
                                showEffectOn: "render",
                                rippleEffect: {
                                    brushType: "stroke",
                                },
                                hoverAnimation: true,
                                label: {
                                    normal: {
                                        formatter: "{b}",
                                        position: "right",
                                        show: false,
                                    },
                                },
                                itemStyle: {
                                    normal: {
                                        color: colors[colorIndex][n],
                                        shadowBlur: 10,
                                        shadowColor: colors[colorIndex][n],
                                    },
                                },
                                zlevel: 1,
                            },
                            //柱状图
                            {
                                zlevel: 1.5,
                                type: "bar",
                                symbol: "none",
                                itemStyle: {
                                    normal: {
                                        color: colors[colorIndex][n],
                                    },
                                },
                                data: barData[n],
                            },
                        ],
                    })
                }

                myChart.setOption(optionXyMap01)
            })
        },
        that = this;
      getAnergy(d).then((res) => {
        // console.log(res.data, 2);
        that.during = res.data.data;
      });
    },
    // 设置树的大小，恢复动画
    setTree(time = 4000) {
      setTimeout(() => {
        this.plussNum = 1;
        this.pluss = false;
        this.wateroff = true;
        this.watercss = false;
        this.treemove = false;

        // 小树阶段
        if (this.during > this.fristD) {
          this.stages = 1;
        /**
         * @description: 左右移动的事件
         * @param {*} type 移动方向
         * @return {*}
         */
        directionBtnClick (type, domeType) {
            let topDom, botDom, currentBox, currentBoxLeft
            if (domeType == 'up') {
                topDom = this.$refs.LeftUpContentTop
                botDom = this.$refs.LeftUpContentBot
                currentBox = parseInt(topDom.clientWidth)
                currentBoxLeft = parseInt(topDom.style.left)
            } else {
                topDom = this.$refs.LeftDownContentTop
                botDom = this.$refs.LeftDownContentBot
                currentBox = parseInt(topDom.clientWidth)
                currentBoxLeft = parseInt(topDom.style.left)
            }

            if (type == 'left') {
                if (currentBoxLeft == 0) return

                topDom.style.left = currentBoxLeft + 106 + 'px'
                botDom.style.left = currentBoxLeft + 106 + 'px'
            } else {
                if (Math.abs(currentBoxLeft) >= currentBox - 106) return

                topDom.style.left = currentBoxLeft - 106 + 'px'
                botDom.style.left = currentBoxLeft - 106 + 'px'
            }
        }
        // 中树阶段
        if (this.during <= this.secondD && this.during > this.fristD) {
          this.stages = 2;
        }
        // 大树阶段
        if (this.during > this.secondD) {
          this.stages = 3;
        }
      }, time);
    },

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

      // this.during += this.plussNum;

      // 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);
      });
    },

    // 点击树的动画
    treeAdd() {
      if (this.movetree) {
        this.treemove = true;
        this.movetree = false;
        setTimeout(() => {
          this.movetree = true;
          this.treemove = false;
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.yjy-home-card {
  position: relative;
  height: 100%;
  color: rgb(184, 156, 158);
  background: url(/img/bg/bgh.png) no-repeat;
  background-size: 100% 100%;
  .content-box {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;

    .el-row {
      height: 100%;
      display: flex;
      & > div {
        margin: 0;
        padding: 4px 0;
        flex: 6;
      }

      & > div:first-child {
        flex: 3;
        display: flex;
        flex-direction: column;

        & > div {
          margin: 4px;
          padding: 4px;
          margin-right: 0;
          padding-right: 0;
          flex: 1;

          background: url(/img/bg/searchTrace.png) no-repeat;
          background-size: 100% 100%;

          & > div:first-child {
            height: 20%;

            & > div {
              height: 100%;
              line-height: 3.6;
              color: #fff;
              font-size: 18px;
              text-align: left;
              text-indent: 2em;
            }
          }

          & > div:last-child {
            height: 78%;
          }
        }

        & > div:last-child {
          margin-top: 20px;
        }
      }

      & > div:last-child {
        flex: 3;
        display: flex;
        flex-direction: column;
        & > div {
          margin: 4px;
          padding: 4px;
          margin-left: 0;
          padding-left: 0;
          flex: 1;

          background: url(/img/bg/searchTrace.png) no-repeat;
          background-size: 100% 100%;

          & > div:first-child {
            height: 20%;

            & > div {
              height: 100%;
              line-height: 3.6;
              color: #fff;
              font-size: 18px;
              text-align: left;
              text-indent: 2em;
            }
          }

          & > div:last-child {
            height: 78%;
          }
        }

        & > div:last-child {
          margin-top: 20px;
        }
      }
    }
  }
}

#on_three_yjy {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  & > div {
    height: calc(40% - 4px);
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    & > div {
      width: 30%;
      & > div {
        height: calc(100% - 40px);
        border-top: 2px solid #97eaf3;
        border-bottom: 2px solid #97eaf3;
        border-radius: 8px;
        border-right: 1px solid #357da6;
        border-left: 1px solid #357da6;

        padding: 4px 2px;
        position: relative;

        & > img {
          position: absolute;
          top: auto;
          left: 0;
          right: 0;
          bottom: 36px;

          margin: auto;

          height: 40px;
        }

        & > span {
          position: absolute;
          width: 100%;
          bottom: 0px;
          display: block;
          height: 36px;
          line-height: 36px;
          font-size: 24px;
          color: #fbe78a;
          text-align: center;
          font-weight: 700;
        }
      }

      & > span {
        display: block;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        color: #97eaf3;
        text-align: center;
      }
    }
  }
}

.tree {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;

  & > div {
    width: 100%;
  }

  & > div:first-child {
    display: flex;
    flex: 3;
    flex-wrap: wrap;
    justify-content: center;
  }
  & > div:last-child {
    position: relative;
    display: flex;
    flex: 8;
  }
    height: 100%;
    color: rgb(184, 156, 158);
    background: url(/img/bg/bgh.png) no-repeat;
    background-size: 100% 100%;
    .content-box {
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;

        .el-row {
            height: 100%;
            display: flex;
            & > div {
                margin: 0;
                padding: 4px 0;
                flex: 6;
            }

            & > div:first-child {
                flex: 3;
                display: flex;
                flex-direction: column;

                & > div {
                    margin: 4px;
                    padding: 4px;
                    margin-right: 0;
                    padding-right: 0;
                    flex: 1;

                    background: url(/img/bg/searchTrace.png) no-repeat;
                    background-size: 100% 100%;

                    & > div:first-child {
                        height: 20%;

                        & > div {
                            height: 100%;
                            line-height: 3.6;
                            color: #fff;
                            font-size: 18px;
                            text-align: left;
                            text-indent: 2em;
                        }
                    }

                    & > div:last-child {
                        height: 78%;
                    }
                }

                & > div:last-child {
                    margin-top: 20px;
                }
            }

            & > div:last-child {
                flex: 3;
                display: flex;
                flex-direction: column;
                & > div {
                    margin: 4px;
                    padding: 4px;
                    margin-left: 0;
                    padding-left: 0;
                    flex: 1;

                    background: url(/img/bg/searchTrace.png) no-repeat;
                    background-size: 100% 100%;

                    & > div:first-child {
                        height: 20%;

                        & > div {
                            height: 100%;
                            line-height: 3.6;
                            color: #fff;
                            font-size: 18px;
                            text-align: left;
                            text-indent: 2em;
                        }
                    }

                    & > div:last-child {
                        height: 78%;
                    }
                }

                & > div:last-child {
                    margin-top: 20px;
                }
            }
        }
    }
}

.tree .rain {
  position: relative;
  top: 0px;
  margin: 6px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: rgb(5, 102, 21);
  background: repeating-radial-gradient(#0fff00, #53c72d);
  box-shadow: 0 0 10px 0px #b8ffc4;
  border-radius: 50%;
  animation: rain 4s infinite;
  z-index: 1;
}
#on_three_yjy,
#on_four_yjy {
    .left-up-content {
        display: flex;
        justify-content: space-around;

.tree .rain text {
  font-size: 12px;
}
        .left-btn,
        .right-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;

.tree .rain-1 {
  top: 4px;
}
            & > div {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 30px;
                background: rgba(255, 255, 255, 0.2);
                border-radius: 50%;

.tree .rain-2 {
  top: 12px;
}
                i {
                    color: #fff;
                    cursor: pointer;
                }
            }
        }

.tree .rain-3 {
  top: -4px;
}
        .content {
            width: 318px;
            position: relative;
            overflow: hidden;

.tree .rain-4 {
  top: -4px;
}
            & > div {
                position: absolute;
                height: calc(40% - 4px);
                display: flex;
                flex-wrap: nowrap;

.tree .rain-5 {
  top: -2px;
}
                & > div {
                    width: 94px;
                    margin: 0 6px;
                    & > div {
                        height: calc(100% - 40px);
                        border-top: 2px solid #97eaf3;
                        border-bottom: 2px solid #97eaf3;
                        border-radius: 8px;
                        border-right: 1px solid #357da6;
                        border-left: 1px solid #357da6;

.tree .rain-6 {
  top: 0px;
}
                        padding: 4px 2px;
                        position: relative;

.tree .rain-7 {
  top: 2px;
}
                        & > img {
                            position: absolute;
                            top: auto;
                            left: 0;
                            right: 0;
                            bottom: 36px;

.tree .rain-8 {
  top: 4px;
}
                            margin: auto;

.tree .rain-9 {
  top: 6px;
}
                            height: 40px;
                        }

.tree .rain-10 {
  top: 0px;
}
                        & > span {
                            position: absolute;
                            width: 100%;
                            bottom: 0px;
                            display: block;
                            height: 36px;
                            line-height: 36px;
                            font-size: 18px;
                            color: #fbe78a;
                            text-align: center;
                            font-weight: 700;
                        }
                    }

.tree .rain-11 {
  top: 6px;
}
                    & > span {
                        display: block;
                        height: 36px;
                        line-height: 36px;
                        font-size: 14px;
                        color: #97eaf3;
                        text-align: center;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }

.tree .rain-12 {
  top: -4px;
}
            & > div:first-child {
                top: calc((20% - 8px) / 2);
            }

.tree .rain-13 {
  top: 0px;
}

.tree .rain-14 {
  top: 6px;
}

.tree .rain-15 {
  top: 4px;
}

.tree .rain-16 {
  top: -2px;
}

.tree .rain-17 {
  top: -4px;
}

.tree .rain:nth-child(1) {
  animation-delay: 0.8s;
  margin-top: 10px;
}

.tree .rain:nth-child(2) {
  animation-delay: 0.5s;
  margin-top: -10px;
}

.tree .rain:nth-child(4) {
  animation-delay: 0.1s;
  margin-top: -5px;
}

.tree img {
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  bottom: 4px;
  margin: auto;
  z-index: 0;
}

.tree .tree-1 {
  height: 76%;
}

.tree .tree-2 {
  height: 88%;
}

.tree .tree-3 {
  height: 100%;
            & > div:last-child {
                bottom: calc((20% - 8px) / 2);
            }
        }
    }
}

@keyframes move-1 {
  0% {
    height: 76%;
  }
    0% {
        height: 76%;
    }

  25% {
    height: 77%;
  }
    25% {
        height: 77%;
    }

  50% {
    height: 78%;
  }
    50% {
        height: 78%;
    }

  75% {
    height: 79%;
  }
    75% {
        height: 79%;
    }

  100% {
    height: 80%;
  }
    100% {
        height: 80%;
    }
}

.move-1 {
  animation: move-1 1s;
    animation: move-1 1s;
}

@keyframes move-2 {
  0% {
    height: 88%;
  }
    0% {
        height: 88%;
    }

  25% {
    height: 89%;
  }
    25% {
        height: 89%;
    }

  50% {
    height: 90%;
  }
    50% {
        height: 90%;
    }

  75% {
    height: 92%;
  }
    75% {
        height: 92%;
    }

  100% {
    height: 93%;
  }
    100% {
        height: 93%;
    }
}

.move-2 {
  animation: move-2 1s;
    animation: move-2 1s;
}

@keyframes move-3 {
  0% {
    height: 100%;
  }
    0% {
        height: 100%;
    }

  25% {
    height: 101%;
  }
    25% {
        height: 101%;
    }

  50% {
    height: 102%;
  }
    50% {
        height: 102%;
    }

  75% {
    height: 103%;
  }
    75% {
        height: 103%;
    }

  100% {
    height: 104%;
  }
    100% {
        height: 104%;
    }
}

.move-3 {
  animation: move-3 1s;
    animation: move-3 1s;
}

.title-1 {
  display: inline;
  padding-left: 2px;
.title-or-return {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .return-btn {
        margin-right: 2em;
        cursor: pointer;
    }
}

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

.team-details {
    ::v-deep .el-dialog {
        margin-top: 0 !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>

 src/views/wel/openUp.vue

@@ -1,284 +1,236 @@
<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
    </avue-crud>
  </basic-container>
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            :page.sync="page"
            :permission="permissionList"
            ref="crud"
            v-model="form"
            @search-change="searchChange"
            @search-reset="searchReset"
            @selection-change="selectionChange"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
            @on-load="onLoad"
        ></avue-crud>
    </basic-container>
</template>

<script>
import { getOpenup } from "@/api/home/home";
import { mapGetters } from "vuex";
import { mapGetters } from "vuex"
import { getTeamDetail } from "@/api/home/team"

export default {
  props: ["id"],
  watch: {
    id() {
      this.searchReset();
    props: ["id"],
    watch: {
        id () {
            this.searchReset()
        },
    },
  },
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        height: "525px",
        calcHeight: 54,
        tip: false,
        searchShow: true,
        searchMenuSpan: 4,
        border: true,
        index: true,
        viewBtn: true,
        menu: false,
        selection: true,
        headerAlign: "center",
        align: "center",
        dialogClickModal: false,
        column: [
          //   {
          //     label: "账号",
          //     search: true,
          //     searchSpan: 4,
          //     display: false,
          //     disabled: true,
          //     prop: "account",
          //   },
          {
            label: "姓名",
            display: false,
            searchSpan: 4,
            searchLabelWidth: 55,
            search: true,
            disabled: true,
            prop: "realName",
          },
          {
            label: "性别",
            display: false,
            searchSpan: 4,
            // search: true,
            disabled: true,
            prop: "sex",
            type: "select",
            dicData: [
              {
                label: "男",
                value: 1,
              },
              {
                label: "女",
                value: 2,
              },
            ],
          },
          {
            label: "身份证",
            disabled: true,
            display: false,
            searchLabelWidth: 70,
            search: true,
            prop: "cardid",
          },
          {
            label: "手机号码",
            disabled: true,
            display: false,
            prop: "phone",
          },
          {
            label: "辖区",
            prop: "jurisdiction",
            type: "tree",
            dicUrl: "/api/jurisdiction/lazy-tree",
            props: {
              label: "title",
              value: "value"
    data () {
        return {
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
          },
          // {
          //   label: "部门",
          //   prop: "deptName",
          //   // type: "tree",
          //   // dicUrl: "/api/blade-system/dept/selectInfo",
          //   // props: {
          //   //   label: "title",
          //   //   value: "value"
          //   // },
          // },
        ],
      },
      data: [],
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.zc_add, false),
        viewBtn: this.vaildData(this.permission.zc_view, true),
        delBtn: this.vaildData(this.permission.zc_delete, false),
        editBtn: this.vaildData(this.permission.zc_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  methods: {
    handleEdit(row, index) {
      this.$refs.crud.rowEdit(row, index);
    },
    rowSave(row, done, loading) {
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
            selectionList: [],
            option: {
                height: 'auto',
                calcHeight: 54,
                labelWidth: "100",
                dialogWidth: 950,
                tip: false,
                border: true,
                index: true,
                viewBtn: true,

                header: false,
                addBtn: false,
                excelBtn: false,

                selection: true,
                dialogClickModal: false,
                column: [
                    {
                        label: "队伍名称",
                        prop: "name",
                        rules: [{
                            required: true,
                            message: "请输入队伍名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "所属派出所",
                        prop: "police",
                        overHidden: true,
                        parent: false,
                        type: "tree",
                        dicUrl: "/api/jurisdiction/lazy-tree",
                        props: {
                            label: "title",
                            value: "id",
                        },
                        checkStrictly: true,
                        rules: [
                            {
                                required: true,
                                message: "请选择所属派出所",
                                trigger: "click",
                            },
                        ],
                    },
                    {
                        label: "队标",
                        prop: "url",
                        // align:'center',
                        width: 80,
                        type: "upload",
                        listType: "picture-img",
                        action: "/api/blade-resource/oss/endpoint/put-file",
                        propsHttp: {
                            res: "data",
                            url: "link",
                        },
                        // hide: true,
                        span: 24,
                    },
                    {
                        label: "队伍人数",
                        prop: "number",
                        type: "number",
                        rules: [{
                            required: true,
                            message: "请输入队伍人数",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "队伍口号",
                        prop: "slogan",
                    },
                    {
                        label: "品牌队伍",
                        prop: "isBrand",
                        type: "select",
                        value: "0",
                        rules: [
                            {
                                required: true,
                                message: "请选择是否品牌队伍",
                                trigger: "blur",
                            },
                        ],
                        dicData: [
                            {
                                label: "是",
                                value: "1",
                            },
                            {
                                label: "否",
                                value: "0",
                            },
                        ],
                    },
                    {
                        label: "创建人",
                        prop: "realName",
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                    },
                    {
                        label: "创建时间",
                        prop: "createTime",
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                    },
                ]
            },
            data: []
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    computed: {
        ...mapGetters(["permission"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.zc_add, false),
                viewBtn: this.vaildData(this.permission.zc_view, true),
                delBtn: this.vaildData(this.permission.zc_delete, false),
                editBtn: this.vaildData(this.permission.zc_edit, false),
            }
        },
        (error) => {
          loading();
          console.log(error);
        ids () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
        }
      );
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    mounted () {

    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then((res) => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      params["roleId"] = this.id;
      getOpenup(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
  },
    methods: {
        searchReset () {
            this.query = {}
            this.onLoad(this.page)
        },
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
        selectionChange (list) {
            this.selectionList = list
        },
        selectionClear () {
            this.selectionList = []
            this.$refs.crud.toggleSelection()
        },

        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad (page, params = {}) {
            this.loading = true
            params["police"] = this.id
            getTeamDetail(
                page.currentPage,
                page.pageSize,
                Object.assign(params, this.query)
            ).then((res) => {
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()

                this.$nextTick(() => {
                    this.$refs.crud.doLayout()
                    this.$refs.crud.refreshTable()
                })
            })
        }
    }
};
</script>


 vue.config.js

@@ -37,19 +37,8 @@
    proxy: {
      '/api': {
        //本地服务接口地址
        // target: 'http://s16s652780.51mypc.cn/api/',
        // target: 'http://192.168.0.114:82/',
        // target: 'http://192.168.0.108:83/',//曾
        //target: 'http://localhost:82/',
        //target: 'http://61.131.136.25:2082/api/',
        // target: 'http://192.168.0.107:85/',//唐
        //target: 'http://localhost:83/',
        target: 'http://61.131.136.25:2082/api/',
        //target: 'http://localhost:83/',
        //target: 'https://web.byisf.com/api/',
        //远程演示服务地址,可用于直接启动项目
        //target: 'https://saber.bladex.vip/api',

        target: 'http://106.225.193.35:83/api/',
        //target: 'http://localhost:8383/',
        ws: true,
        pathRewrite: {
          '^/api': '/'