From 273c9401106930d437fae33ae0228d6a5b4decf0 Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Wed, 14 Sep 2022 08:53:03 +0800
Subject: [PATCH] 积分修改
---
src/views/team/team.vue | 331 +++++
vue.config.js | 15
src/views/wel/home.vue | 2866 ++++++++++++++++++++++----------------------
src/api/home/team.js | 37
public/img/jp.png | 0
src/views/system/user.vue | 38
src/api/team/team.js | 50
src/views/wel/openUp.vue | 486 +++----
8 files changed, 2,127 insertions(+), 1,696 deletions(-)
diff --git a/public/img/jp.png b/public/img/jp.png
new file mode 100644
index 0000000..17d0044
--- /dev/null
+++ b/public/img/jp.png
Binary files differ
diff --git a/src/api/home/team.js b/src/api/home/team.js
new file mode 100644
index 0000000..3640074
--- /dev/null
+++ b/src/api/home/team.js
@@ -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,
+ }
+ })
+}
\ No newline at end of file
diff --git a/src/api/team/team.js b/src/api/team/team.js
new file mode 100644
index 0000000..0602f7b
--- /dev/null
+++ b/src/api/team/team.js
@@ -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
+ }
+ })
+}
+
diff --git a/src/views/system/user.vue b/src/views/system/user.vue
index ff7f45c..8484b98 100644
--- a/src/views/system/user.vue
+++ b/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"
}
]
diff --git a/src/views/team/team.vue b/src/views/team/team.vue
new file mode 100644
index 0000000..6596374
--- /dev/null
+++ b/src/views/team/team.vue
@@ -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>
diff --git a/src/views/wel/home.vue b/src/views/wel/home.vue
index 3076168..4f91333 100644
--- a/src/views/wel/home.vue
+++ b/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>
diff --git a/src/views/wel/openUp.vue b/src/views/wel/openUp.vue
index ba9bda0..59f84aa 100644
--- a/src/views/wel/openUp.vue
+++ b/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>
diff --git a/vue.config.js b/vue.config.js
index 2d6346c..83d7aeb 100644
--- a/vue.config.js
+++ b/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': '/'
--
Gitblit v1.9.3