积分修改

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

@@ -4,74 +4,115 @@
      <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 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 leftUp.slice(0, 3)"
                                            v-for="(item, index) in leftUpData.slice(0, Math.ceil(leftUpData.length / 2))"
                    :key="index"
                    class="openUp"
                    @click="openUp(item)"
                                            @click="openUp(item, 'up')"
                  >
                    <div>
                      <img :src="item.img" alt="" /><span>{{
                        item.value
                      }}</span>
                                                <img src="/img/badw.png" alt />
                                                <span>{{item.number}}人</span>
                    </div>
                    <span> {{ item.name }} </span>
                  </div>
                </div>
                <div>
                                    <div ref="LeftUpContentBot" style="left: 0">
                  <div
                    v-for="(item, index) in leftUp.slice(3, 6)"
                                            v-for="(item, index) in leftUpData.slice(Math.ceil(leftUpData.length / 2), leftUpData.length)"
                    :key="index"
                    class="openUp"
                    @click="openUp(item)"
                                            @click="openUp(item, 'up')"
                  >
                    <div>
                      <img :src="item.img" alt="" /><span>{{
                        item.value
                      }}</span>
                                                <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>
              <div>
                <div>能量树</div>
              </div>
                        <!-- 左下 -->
              <div id="on_four_yjy">
                <div class="tree">
                  <div>
                                <div class="title-or-return">
                                    <div>{{ leftDownParams.title }} {{leftDownParams.childrenData && leftDownParams.childrenData.length > 0 ? '(' + leftDownParams.teamNum + leftDownParams.teamUnit + ')' : ''}}/ 辖区</div>

                    <div
                      v-for="(o, i) in rainArr"
                      :key="i"
                      :class="['rain rain-' + (i += 1)]"
                      @click="rainFun(o.id, o.num)"
                                        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')"
                    >
                      {{ o.num }}<text>g</text>
                    </div>
                  </div>
                  <!-- {{ during }} -->
                  <div>
                    <img
                      :src="'/img/tree-' + stages + '.png'"
                      :class="[
                        'tree-' + stages,
                        treemove ? 'move-' + stages : '',
                      ]"
                      hover-class="none"
                      @click="treeAdd"
                    />
                                                <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>
@@ -99,9 +140,9 @@
    <el-dialog
      title="提示"
      :visible.sync="dialogVisibleOpenUp"
      width="80%"
            width="64%"
      :modal-append-to-body="false"
      top="2vh"
            class="team-details"
    >
      <openUp :id="openUpId"></openUp>
    </el-dialog>
@@ -109,105 +150,427 @@
</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";
} 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）

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

      option1: "",
      echarts1: "",

      leftUp: [],

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

            // 左上数据
            leftUpData: [],

            leftDownParams: {},
            leftDownData: [],

      OurNumLeftUp: "",

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



        }
  },
  components: {
    openUp,
  },
  created() {},
    created () {
        const that = this
        axios.all([getTeamTree(), getTeamList()]).then(function (res) {

            leftDownData = {
                title: "分县局品牌队",
                data: res[0].data.data[0].children
            }

            that.leftDownParams = leftDownData

            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)
                }
            })
        })
    },
  mounted() {
    // eslint-disable-next-line no-undef
    this.getDataSevenDaty(); //获取7天下发数量
    // this.onTwoEcharts();
    this.createechart1(); //建立图表1
    this.onSixEcharts(); //图表1数据
        this.createTaskEcharts()
        this.createUserEcharts() //建立图表1
    // this.createMapJson();
    this.getLeftUp(); // 左上角数据
    this.getMapDataMethod(); // 左上角数据

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

      // 小树阶段
      if (this.during > this.fristD) {
        this.stages = 1;
      }
      // 中树阶段
      if (this.during < this.secondD && this.during >= this.fristD) {
        this.stages = 2;
      }
      // 大树阶段
      if (this.during >= this.secondD) {
        this.stages = 3;
      }
      // }, this.groundtime);
    },
        // this.getLeftUp() // 左上角数据
        this.getMapDataMethod() // 左上角数据
  },
  methods: {
    //打开弹窗--群防群控队伍
    openUp(val) {
      // console.log(val);
      this.openUpId = val.id;
      this.dialogVisibleOpenUp = true;
        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)

                    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
                    }
                }

            }
    },
        /**
         * @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
            }

        },

    getMapDataMethod() {
      getMapData().then((res) => {
        this.createMapJson(res.data.data);
      });
                console.log(res, 22342342)
                this.createMapJson(res.data.data)
            })
    },

    getLeftUp() {
      (this.leftUp = []), (this.OurNumLeftUp = 0);
            (this.leftUp = []), (this.OurNumLeftUp = 0)
      getLeftUp().then((res) => {
        var d = res.data.data;
                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;
                        this.OurNumLeftUp += item.num
          let img =
            item.region == "治保会队伍"
              ? "/img/wyh.png"
@@ -221,7 +584,7 @@
              ? "/img/badw.png"
              : item.region == "警务辅助队伍"
              ? "/img/jfd.png"
              : "";
                                                    : ""
          let id =
            item.region == "治保会队伍"
              ? "1495714130024673282"
@@ -235,360 +598,194 @@
              ? "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));
        }

        // console.log(d, t);
        // console.log(nyt);
        that.onTwoEcharts(d, nyt, t);
      });
        /**
         * @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)
    },
    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 = {

        /**
         * @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: {
          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>";
                    show: false,
                    backgroundColor: 'rgba(3,169,244, 0.5)', //背景颜色（此时为默认色）
                    textStyle: {
                        fontSize: 16
              }
            }
            return txtCon;
          },
        },
                color: ['#F7B731'],
        grid: {
          borderWidth: 0,
          top: "10%",
          left: "10%",
          bottom: "10%",
          right: "8%",
          textStyle: {
            color: "#fff",
                    left: '4%',
                    right: '4%',
                    bottom: '2%',
                    top: '2%',
                    containLabel: true
          },
        },

        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,
          },
        ],
      };

      myChart.setOption(option, true);
    },
    createechart1() {
      var myChart = echarts.init(document.getElementById("on_six_yjy"));
      this.echarts1 = myChart;
    },
    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);

        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,
                xAxis: {
                    type: 'value',
                    max: 22,
              min: 0,
              splitLine: {
                lineStyle: {
                  color: "#063374",
                        show: false
                },
                    axisLabel: {
                        show: false
              },
                    axisTick: {
                        show: false
            },
                    axisLine: {
                        show: false
                    }
                },
                yAxis: [
                    {
                        type: 'category',
                        inverse: true,
                        axisTick: 'none',
                        axisLine: 'none',
                        show: true,
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: '10'
                            }
                        },
                        data: yData
                    }
          ],
          series: [
            {
              name: "注册量",
              type: "bar",
              // data: [44, 46, 48, 56, 50, 66, 52, 43, 45],
              data: data,
              barWidth: 6, //柱子宽度
              barGap: 0.4, //柱子之间间距
                        zlevel: 1,
                        type: 'bar',
                        barWidth: '15px',
                        animationDuration: 1500,
                        data: currentData,
                        align: 'center',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#008cff",
                                barBorderRadius: 10
                            }
                        },
                        label: {
                            show: true,
                            fontSize: 10,
                            color: '#fff',
                            textBorderWidth: 2,
                            padding: [2, 0, 0, 0],
                            formatter (params) {
                                return params.data.name
                            }
                        }
                    },
                    {
                      offset: 1,
                      color: "#005193",
                        name: '任务数量',
                        type: 'bar',
                        barWidth: 15,
                        barGap: '-100%',
                        margin: '20',
                        data: bgData,
                        textStyle: {
                            //图例文字的样式
                            fontSize: 10,
                            color: '#fff'
                    },
                  ]),
                  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);
      });
                                color: '#05325F',
                                //width:"100%",
                                fontSize: 10,
                                barBorderRadius: 30
                            }
                        }
                    }
                ]
            }
    },

    createMapJson(data2) {
@@ -603,30 +800,30 @@
        南昌县: {},
        安义县: {},
        进贤县: {},
      };
            }
      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;
                        }
                        d2[n] = data2[k].num
          }
        }
      }
      // console.log(ds);
      var myChart = echarts.init(document.getElementById("draw_yjy"));
            var myChart = echarts.init(document.getElementById("draw_yjy"))

      //geoCoordMap把所有可能出现的城市加到数组里面
      var geoCoordMap = {
@@ -639,7 +836,7 @@
        南昌县: [115.942465, 28.543781],
        安义县: [115.553109, 28.841334],
        进贤县: [116.267671, 28.365681],
      };
            }

      //2014年数据

@@ -684,52 +881,54 @@
          "#91CA8C",
          "#F49F42",
        ],
      ];
      var colorIndex = 0;
            ]
            var colorIndex = 0

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

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

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

                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([]);
                        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);
                        barData[i].push(mapData[i][j].value)
                        categoryData[i].push(mapData[i][j].name)
          }
        }

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

        var optionXyMap01 = {
          timeline: {
@@ -817,29 +1016,21 @@
                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;
                                        `<div style='text-align:left;' >
                                            ${p.name}
                                            <br />
                                            用户数量：${d2[p.name]}
                                             <br />
                                            背审通过：${d2[p.name]}
                                             <br />
                                            背审异常：${d2[p.name]}
                                        </div>`
                                    return txtCon
                },
              },
              label: {
                emphasis: {
                  color: "#fff",
                                    show: false
                },
              },
              itemStyle: {
@@ -877,7 +1068,7 @@
            },
          },
          options: [],
        };
                }

        for (var n = 0; n < year.length; n++) {
          optionXyMap01.options.push({
@@ -927,38 +1118,33 @@
              },
              data: categoryData[n],
            },

            series: [
              //地图
              {
                type: "map",
                map: "china",
                geoIndex: 0,
                aspectScale: 0.75, //长宽比
                showLegendSymbol: false, // 存在legend时显示
                                //文字和标志
                                name: "light",
                                type: "scatter",
                                coordinateSystem: "geo",
                                data: convertData(mapData[n]),
                                symbolSize: function (val) {
                                    return val[2] / 10
                                },
                label: {
                  normal: {
                    show: false,
                                        offset: [10, 0],
                                        formatter: "{b}",
                                        position: "right",
                                        show: true,
                  },
                  emphasis: {
                    show: false,
                    textStyle: {
                      color: "#fff",
                                        show: true,
                    },
                  },
                },
                roam: true,
                itemStyle: {
                  normal: {
                    areaColor: "#031525",
                    borderColor: "#FFFFFF",
                  },
                  emphasis: {
                    areaColor: "#2B91B7",
                                        color: colors[colorIndex][n],
                  },
                },
                animation: false,
                data: mapData,
              },
              //地图中闪烁的点
              {
@@ -968,12 +1154,13 @@
                data: convertData(
                  mapData[n]
                    .sort(function (a, b) {
                      return b.value - a.value;
                                            return b.value - a.value
                    })
                    .slice(0, 20)
                ),
                symbolSize: function (val) {
                  return 10;
                                    console.log(val, 123123)
                                    return val[2] + 2
                },
                showEffectOn: "render",
                rippleEffect: {
@@ -1009,106 +1196,44 @@
                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,
        },
        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;
        }
        // 中树阶段
        if (this.during <= this.secondD && this.during > this.fristD) {
          this.stages = 2;
        }
        // 大树阶段
        if (this.during > this.secondD) {
          this.stages = 3;
        }
      }, time);
                myChart.setOption(optionXyMap01)
            })
    },

    // 收取雨滴的动画
    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);
        /**
         * @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'
            }
        }
  },
};
</script>
@@ -1217,17 +1342,49 @@
  }
}

#on_three_yjy {
#on_three_yjy,
#on_four_yjy {
    .left-up-content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;

        .left-btn,
        .right-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;

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

                i {
                    color: #fff;
                    cursor: pointer;
                }
            }
        }

        .content {
            width: 318px;
            position: relative;
            overflow: hidden;

            & > div {
                position: absolute;
    height: calc(40% - 4px);
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
                flex-wrap: nowrap;

    & > div {
      width: 30%;
                    width: 94px;
                    margin: 0 6px;
      & > div {
        height: calc(100% - 40px);
        border-top: 2px solid #97eaf3;
@@ -1258,7 +1415,7 @@
          display: block;
          height: 36px;
          line-height: 36px;
          font-size: 24px;
                            font-size: 18px;
          color: #fbe78a;
          text-align: center;
          font-weight: 700;
@@ -1272,159 +1429,22 @@
        font-size: 14px;
        color: #97eaf3;
        text-align: center;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
      }
    }
  }
}

.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;
                top: calc((20% - 8px) / 2);
  }

  & > div:last-child {
    position: relative;
    display: flex;
    flex: 8;
                bottom: calc((20% - 8px) / 2);
  }
}

.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;
}

.tree .rain text {
  font-size: 12px;
}

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

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

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

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

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

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

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

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

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

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

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

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

.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%;
}

@keyframes move-1 {
@@ -1505,13 +1525,29 @@
  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;
}

.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

@@ -6,12 +6,8 @@
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
            v-model="form"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
@@ -19,20 +15,19 @@
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
    </avue-crud>
        ></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();
            this.searchReset()
    },
  },
  data() {
@@ -43,98 +38,128 @@
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
                total: 0
      },
      selectionList: [],
      option: {
        height: "525px",
                height: 'auto',
        calcHeight: 54,
                labelWidth: "100",
                dialogWidth: 950,
        tip: false,
        searchShow: true,
        searchMenuSpan: 4,
        border: true,
        index: true,
        viewBtn: true,
        menu: false,

                header: false,
                addBtn: false,
                excelBtn: 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: "队伍名称",
                        prop: "name",
                        rules: [{
                            required: true,
                            message: "请输入队伍名称",
                            trigger: "blur"
                        }]
          },
          {
            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",
                        label: "所属派出所",
                        prop: "police",
                        overHidden: true,
                        parent: false,
            type: "tree",
            dicUrl: "/api/jurisdiction/lazy-tree",
            props: {
              label: "title",
              value: "value"
                            value: "id",
            },
                        checkStrictly: true,
                        rules: [
                            {
                                required: true,
                                message: "请选择所属派出所",
                                trigger: "click",
          },
          // {
          //   label: "部门",
          //   prop: "deptName",
          //   // type: "tree",
          //   // dicUrl: "/api/blade-system/dept/selectInfo",
          //   // props: {
          //   //   label: "title",
          //   //   value: "value"
          //   // },
          // },
        ],
      },
      data: [],
    };
                    {
                        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"]),
@@ -144,141 +169,68 @@
        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(",");
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
        }
    },
    mounted () {

  },
  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);
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          console.log(error);
        }
      );
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    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);
            this.query = {}
            this.onLoad(this.page)
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
    },
    selectionChange(list) {
      this.selectionList = list;
            this.selectionList = list
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
            this.selectionList = []
            this.$refs.crud.toggleSelection()
    },

    currentChange(currentPage) {
      this.page.currentPage = currentPage;
            this.page.currentPage = currentPage
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
            this.page.pageSize = pageSize
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
            this.onLoad(this.page, this.query)
    },
    onLoad(page, params = {}) {
      this.loading = true;
      params["roleId"] = this.id;
      getOpenup(
            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();
      });
    },
  },
                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': '/'