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/wel/home.vue | 2866 ++++++++++++++++++++++++++++++-----------------------------
1 files changed, 1,451 insertions(+), 1,415 deletions(-)
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>
--
Gitblit v1.9.3