From d40f7acd9f1bef59c63dd45323bbe38a3d489b2e Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Mon, 19 Jul 2021 19:48:54 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/jfptweb-publicSecurity
---
src/views/wel/home.vue | 392 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 215 insertions(+), 177 deletions(-)
diff --git a/src/views/wel/home.vue b/src/views/wel/home.vue
index 9b3bc8d..f08d14d 100644
--- a/src/views/wel/home.vue
+++ b/src/views/wel/home.vue
@@ -6,35 +6,38 @@
<div>
<div>
<div>
- <div>群防群控队伍</div>
+ <div>
+ 群防群控队伍
+ <div class="title-1">({{ OURnum }})</div>
+ </div>
</div>
<div id="on_three_yjy">
<div>
<div>
- <div><img src="/img/wyh.png" alt="" /><span>10</span></div>
- <span> 治安保卫委员会 </span>
+ <div><img src="/img/wyh.png" alt="" /><span>20</span></div>
+ <span> 治保会队伍 </span>
</div>
<div>
- <div><img src="/img/zabw.png" alt="" /><span>44</span></div>
- <span> 治安保卫队伍 </span>
+ <div><img src="/img/zabw.png" alt="" /><span>15</span></div>
+ <span> 内保干部队伍 </span>
</div>
<div>
- <div><img src="/img/xf.png" alt="" /><span>42</span></div>
+ <div><img src="/img/xf.png" alt="" /><span>30</span></div>
<span> 治安巡防队伍 </span>
</div>
</div>
<div>
<div>
- <div><img src="/img/xxy.png" alt="" /><span>36</span></div>
+ <div><img src="/img/xxy.png" alt="" /><span>26</span></div>
<span> 信息员队伍 </span>
</div>
<div>
- <div><img src="/img/badw.png" alt="" /><span>52</span></div>
- <span> 保安队伍 </span>
+ <div><img src="/img/badw.png" alt="" /><span>30</span></div>
+ <span> 保安员队伍 </span>
</div>
<div>
<div><img src="/img/ldz.png" alt="" /><span>25</span></div>
- <span> 楼栋长 </span>
+ <span> 警务辅助队伍</span>
</div>
</div>
</div>
@@ -42,7 +45,7 @@
<div>
<div>
- <div>生长树</div>
+ <div>能量树</div>
</div>
<div id="on_four_yjy">
<div class="tree">
@@ -98,6 +101,7 @@
import * as echarts from "echarts";
import geojson from "@/geojson/nanchang.json";
+import { getList } from "@/api/home/home";
export default {
data() {
@@ -110,15 +114,24 @@
pluss: false, // 水滴值+1动画开关
movetree: true, // 树动画开关
+ ranksNum: [],
+
+ option1: "",
+ echarts1: "",
};
},
- computed: {},
+ computed: {
+ OURnum() {
+ return 146;
+ },
+ },
created() {},
mounted() {
// eslint-disable-next-line no-undef
this.onTwoEcharts();
- this.onSixEcharts();
+ this.createechart1(); //建立图表1
+ this.onSixEcharts(); //图表1数据
this.createMapJson();
},
methods: {
@@ -142,7 +155,7 @@
grid: {
borderWidth: 0,
top: "10%",
- left: "8%",
+ left: "10%",
bottom: "10%",
right: "8%",
textStyle: {
@@ -244,172 +257,192 @@
myChart.setOption(option, true);
},
-
- onSixEcharts() {
+ createechart1() {
var myChart = echarts.init(document.getElementById("on_six_yjy"));
+ this.echarts1 = myChart;
+ },
+ onSixEcharts() {
+ this.echarts1.clear();
//改折线图
- var option = {
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "shadow",
- },
- },
- legend: {
- data: ["在线率", "注册量"],
- align: "right",
- right: 10,
- textStyle: {
- color: "#fff",
- },
- itemWidth: 10,
- itemHeight: 10,
- itemGap: 35,
- },
- grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
- },
- xAxis: [
- {
- type: "category",
- data: [
- "东湖区",
- "西湖区",
- "青云谱区",
- "青山湖区",
- "新建区",
- "红谷滩区",
- "南昌县",
- "安义县",
- "进贤县",
- ],
- 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: "注册量",
- // min: 0,
- // max: 250,
- // interval: 50,
- axisLabel: {
- formatter: "{value}",
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: false,
- lineStyle: {
- color: "#00c7ff",
- width: 1,
- type: "solid",
- },
- },
- // max: 100,
- // min: 0,
- splitLine: {
- lineStyle: {
- color: "#063374",
- },
- },
- },
- {
- type: "value",
- name: "在线率",
- axisLabel: {
- formatter: "{value} %",
- },
- 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, 52, 55, 45, 56, 38, 66],
- 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,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "#c4e300",
- },
- {
- offset: 1,
- color: "#728400",
- },
- ]),
- opacity: 1,
- },
- },
- },
- ],
- };
+ 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);
- myChart.setOption(option);
+ var option = {
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ legend: {
+ 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, 52, 55, 45, 56, 38, 66],
+ 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);
+ });
},
createMapJson() {
@@ -1246,4 +1279,9 @@
.move-3 {
animation: move-3 1s;
}
+
+.title-1 {
+ display: inline;
+ padding-left: 20px;
+}
</style>
--
Gitblit v1.9.3