|
|
@@ -1,96 +1,38 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
<div
|
|
|
- class="chart-template map-template"
|
|
|
- style="display: flex; flex-direction: row"
|
|
|
+ class="chart-template"
|
|
|
>
|
|
|
- <div>机构统计</div>
|
|
|
- <!-- <div>
|
|
|
- <div>
|
|
|
- <span>营业网点</span>
|
|
|
- <span>
|
|
|
- <span>总数:</span>
|
|
|
- <span>3020</span>
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <span>达标数:</span>
|
|
|
- <span>500</span>
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <span>自有产权数:</span>
|
|
|
- <span>1500</span>
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <span>区域外网数:</span>
|
|
|
- <span>80</span>
|
|
|
- </span>
|
|
|
+ <p>机构统计</p>
|
|
|
+ <div>
|
|
|
+ <div class="content">
|
|
|
+ <span> 行社 56 </span>
|
|
|
+ <span> 营业网点 2968 </span>
|
|
|
+ <span> 离行 1202 </span>
|
|
|
+ <span> 监控中心 100 </span>
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <span>自助设备</span>
|
|
|
- <span>
|
|
|
- <span>总数:</span>
|
|
|
- <span>4000</span>
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <span>在行式穿墙机具:</span>
|
|
|
- <span>2000</span>
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <span>在行式堂式机具:</span>
|
|
|
- <span>1500</span>
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <span>离行式穿墙机具:</span>
|
|
|
- <span>2000</span>
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <span>离行式堂式机具:</span>
|
|
|
- <span>1500</span>
|
|
|
- </span>
|
|
|
+ <div class="content">
|
|
|
+ <span> 达标数 3000 </span>
|
|
|
+ <span> GA38-2021 2000 </span>
|
|
|
+ <span> GA38-2015 1000 </span>
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <span>自助银行</span>
|
|
|
- <span>
|
|
|
- <span>总数:</span>
|
|
|
- <span>4000</span>
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <span>在行式自助银行:</span>
|
|
|
- <span>2000</span>
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <span>离行式自助银行:</span>
|
|
|
- <span>1500</span>
|
|
|
- </span>
|
|
|
+ <div class="content">
|
|
|
+ <span> 业务库 2101 </span>
|
|
|
+ <span> 一类库 300 </span>
|
|
|
+ <span> 二类库 457 </span>
|
|
|
+ <span> 三类库 400 </span>
|
|
|
+ <span> 四类库 557 </span>
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <span>业务库</span>
|
|
|
- <span>
|
|
|
- <span>总数:</span>
|
|
|
- <span>3020</span>
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <span>一类库:</span>
|
|
|
- <span>2000</span>
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <span>二类库:</span>
|
|
|
- <span>1500</span>
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <span>三类库:80</span>
|
|
|
- <span>80</span>
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <span>四类库</span>
|
|
|
- <span>80</span>
|
|
|
- </span>
|
|
|
+ <div class="content">
|
|
|
+ <span> 自助银行 4000 </span>
|
|
|
+ <span> 离行式自助银行 2100 </span>
|
|
|
+ <span> 在行式自助银行 1900 </span>
|
|
|
</div>
|
|
|
- </div> -->
|
|
|
- <div id="org_Chart"></div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- <div id="commAlarmEvent_Chart"></div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
import "./../../board.scss";
|
|
|
import * as echarts from "echarts";
|
|
|
@@ -100,16 +42,40 @@ import {
|
|
|
getNextPeriod,
|
|
|
getPeriodText,
|
|
|
} from "../../utils.js";
|
|
|
-
|
|
|
+const types = [
|
|
|
+ {
|
|
|
+ text: "今天",
|
|
|
+ value: "0",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "近7天",
|
|
|
+ value: "1",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "近30天",
|
|
|
+ value: "2",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "近90天",
|
|
|
+ value: "3",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "本年",
|
|
|
+ value: "4",
|
|
|
+ },
|
|
|
+];
|
|
|
export default {
|
|
|
props: ["orgId"],
|
|
|
data() {
|
|
|
return {
|
|
|
data: {
|
|
|
- all: [],
|
|
|
- completed: [],
|
|
|
- name: [],
|
|
|
+ safetyCheck: {},
|
|
|
+ edu: {},
|
|
|
+ drill: {},
|
|
|
+ monitor: {},
|
|
|
+ visit: {},
|
|
|
},
|
|
|
+ activeName: types[0].value,
|
|
|
};
|
|
|
},
|
|
|
|
|
|
@@ -121,23 +87,17 @@ export default {
|
|
|
orgId: {
|
|
|
deep: true,
|
|
|
handler(val) {
|
|
|
- // this.resetTimer();
|
|
|
+ this.resetTimer();
|
|
|
this.getData();
|
|
|
},
|
|
|
- },
|
|
|
- data: {
|
|
|
- deep: true,
|
|
|
- handler() {
|
|
|
- this.initMap();
|
|
|
- },
|
|
|
- },
|
|
|
+ },
|
|
|
},
|
|
|
|
|
|
created() {
|
|
|
- // this.types = types;
|
|
|
+ this.types = types;
|
|
|
this.maxDisplay = 16;
|
|
|
- // this.refreshTime = 1 * 10 * 1000;
|
|
|
- // this.isMouseOver = false;
|
|
|
+ this.refreshTime = 1 * 10 * 1000;
|
|
|
+ this.isMouseOver = false;
|
|
|
},
|
|
|
|
|
|
async mounted() {
|
|
|
@@ -162,337 +122,65 @@ export default {
|
|
|
this.isMouseOver = false;
|
|
|
},
|
|
|
async getData() {
|
|
|
- // let bs = parseInt(this.activeName) + 1;
|
|
|
+ let bs = parseInt(this.activeName) + 1;
|
|
|
this.data = {
|
|
|
- all: 500,
|
|
|
- unconfirm: 112, //未确认
|
|
|
- auditing: 20, //异议审批中
|
|
|
- unreform: 50, //待整改
|
|
|
- notQuestion: 4,
|
|
|
- reformed: 500 - 112 - 20 - 50 - 4,
|
|
|
+ safetyCheck: {
|
|
|
+ all: 18 * bs,
|
|
|
+ completed: 16 * bs,
|
|
|
+ },
|
|
|
+ edu: { all: 2 * bs, completed: 1 * bs },
|
|
|
+ drill: { all: 3 * bs, completed: 2 * bs },
|
|
|
+ monitor: { all: 66 * bs, completed: 65 * bs },
|
|
|
+ visit: {
|
|
|
+ times: 5 * bs,
|
|
|
+ personCount: 6 * bs,
|
|
|
+ accompanyCount: 2 * bs,
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
|
|
|
windowResize() {
|
|
|
this.myChart && this.myChart.resize();
|
|
|
},
|
|
|
- initMap() {
|
|
|
- this.myChart && this.myChart.dispose();
|
|
|
-
|
|
|
- // 基于准备好的dom,初始化echarts实例
|
|
|
- this.myChart = echarts.init(document.getElementById("org_Chart"));
|
|
|
-
|
|
|
- let t = this;
|
|
|
- // 指定图表的配置项和数据
|
|
|
- var option = {
|
|
|
- backgroundColor: "rgba(0,0,0,0)",
|
|
|
- // color: ["#C0FBB5", "#46557B"],
|
|
|
- legend: {
|
|
|
- show: false,
|
|
|
- icon: "circle",
|
|
|
- // data: ["达标数", "自有产权数","区域外网数"],
|
|
|
- textStyle: {
|
|
|
- color: "#fff",
|
|
|
- // fontSize:18
|
|
|
- },
|
|
|
- left: "center",
|
|
|
- top: "5%",
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: "item",
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "营业网点",
|
|
|
- type: "pie",
|
|
|
- radius: ["65%", "85%"],
|
|
|
- center: [`12.5%`, "50%"],
|
|
|
- data: [
|
|
|
- {
|
|
|
- name: "达标数",
|
|
|
- value: 2000,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "自有产权数",
|
|
|
- value: 1500,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "区域外网数",
|
|
|
- value: 80,
|
|
|
- },
|
|
|
- ],
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: "center",
|
|
|
- color: "#fff",
|
|
|
- fontSize: 14,
|
|
|
- formatter: function (value) {
|
|
|
- return "3020\n" + "\n营业网点";
|
|
|
- },
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- show: true,
|
|
|
- trigger: "item",
|
|
|
- backgroundColor: "#b8bdc0",
|
|
|
- textStyle: {
|
|
|
- color: "#000",
|
|
|
- },
|
|
|
- confine:true,
|
|
|
- formatter: function (value) {
|
|
|
- let html=`<div style="z-index:999;">
|
|
|
- <div>营业网点</div>
|
|
|
- <div>总数:3020</div>
|
|
|
- <div>达标数:2000</div>
|
|
|
- <div>自有产权数:1500</div>
|
|
|
- <div>区域外网数:80</div>
|
|
|
- </div>`
|
|
|
- return html;
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- // alignTo: 'none',
|
|
|
- // bleedMargin: 5,
|
|
|
-
|
|
|
- // left: 0,
|
|
|
- // right: 0,
|
|
|
- // top: 0,
|
|
|
- // bottom: 0,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "业务库",
|
|
|
- type: "pie",
|
|
|
- radius: ["65%", "85%"],
|
|
|
- center: [`37.5%`, "50%"],
|
|
|
- data: [
|
|
|
- {
|
|
|
- name: "一类库",
|
|
|
- value: 2000,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "二类库",
|
|
|
- value: 1500,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "三类库",
|
|
|
- value: 80,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "四类库",
|
|
|
- value: 80,
|
|
|
- },
|
|
|
- ],
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: "center",
|
|
|
- color: "#fff",
|
|
|
- fontSize: 14,
|
|
|
- formatter: function (value) {
|
|
|
- return "2000\n" + "\n业务库";
|
|
|
- },
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- show: true,
|
|
|
- trigger: "item",
|
|
|
- backgroundColor: "#b8bdc0",
|
|
|
- textStyle: {
|
|
|
- color: "#000",
|
|
|
- },
|
|
|
- confine: true,
|
|
|
- formatter: function (value) {
|
|
|
- let html = `<div style="z-index:999;">
|
|
|
- <div>业务库</div>
|
|
|
- <div>总数:3020</div>
|
|
|
- <div>一类库:2000</div>
|
|
|
- <div>二类库:1500</div>
|
|
|
- <div>三类库:80</div>
|
|
|
- <div>四类库:80</div>
|
|
|
- </div>`;
|
|
|
- return html;
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- // alignTo: 'none',
|
|
|
- // bleedMargin: 5,
|
|
|
-
|
|
|
- // left: 0,
|
|
|
- // right: 0,
|
|
|
- // top: 0,
|
|
|
- // bottom: 0,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "自助银行",
|
|
|
- type: "pie",
|
|
|
- radius: ["62%", "85%"],
|
|
|
- center: [`62.5%`, "50%"],
|
|
|
- data: [
|
|
|
- {
|
|
|
- name: "在行式自助银行",
|
|
|
- value: 2000,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "离行式自助银行",
|
|
|
- value: 1500,
|
|
|
- },
|
|
|
- ],
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: "center",
|
|
|
- color: "#fff",
|
|
|
- fontSize: 14,
|
|
|
- formatter: function (value) {
|
|
|
- return "4000\n" + "\n自助银行";
|
|
|
- },
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- show: true,
|
|
|
- trigger: "item",
|
|
|
- backgroundColor: "#b8bdc0",
|
|
|
- textStyle: {
|
|
|
- color: "#000",
|
|
|
- },
|
|
|
- confine: true,
|
|
|
- formatter: function (value) {
|
|
|
- let html = `<div style="z-index:999;">
|
|
|
- <div>自助银行</div>
|
|
|
- <div>总数:4000</div>
|
|
|
- <div>在行式自助银行:2000</div>
|
|
|
- <div>离行式自助银行:1500</div>
|
|
|
- </div>`;
|
|
|
- return html;
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: "自助设备",
|
|
|
- type: "pie",
|
|
|
- radius: ["62%", "85%"],
|
|
|
- center: [`87.5%`, "50%"],
|
|
|
- data: [
|
|
|
- {
|
|
|
- name: "在行式穿墙机具",
|
|
|
- value: 2000,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "在行式堂式机具",
|
|
|
- value: 1500,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "离行式穿墙机具",
|
|
|
- value: 2000,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "离行式堂式机具",
|
|
|
- value: 1500,
|
|
|
- },
|
|
|
- ],
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: "center",
|
|
|
- color: "#fff",
|
|
|
- fontSize: 14,
|
|
|
- formatter: function (value) {
|
|
|
- return "10000\n" + "\n自助设备";
|
|
|
- },
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- show: true,
|
|
|
- trigger: "item",
|
|
|
- backgroundColor: "#b8bdc0",
|
|
|
- textStyle: {
|
|
|
- color: "#000",
|
|
|
- },
|
|
|
- confine: true,
|
|
|
- formatter: function (value) {
|
|
|
- let html = `<div style="z-index:999;">
|
|
|
- <div>自助设备</div>
|
|
|
- <div>总数:4000</div>
|
|
|
- <div>在行式穿墙机具:2000</div>
|
|
|
- <div>在行式堂式机具:1500</div>
|
|
|
- <div>离行式穿墙机具:2000</div>
|
|
|
- <div>离行式堂式机具:1500</div>
|
|
|
- </div>`;
|
|
|
- return html;
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- if (option && typeof option === "object") {
|
|
|
- this.myChart.setOption(option);
|
|
|
- }
|
|
|
- },
|
|
|
|
|
|
resetTimer() {
|
|
|
- // this.timer && clearInterval(this.timer);
|
|
|
- // this.timer = setInterval(() => {
|
|
|
- // if (this.isMouseOver) {
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // this.activeName = getNextPeriod(this.types, this.activeName);
|
|
|
- // this.getData();
|
|
|
- // }, this.refreshTime);
|
|
|
+ this.timer && clearInterval(this.timer);
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ if (this.isMouseOver) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.activeName = getNextPeriod(this.types, this.activeName);
|
|
|
+ this.getData();
|
|
|
+ }, this.refreshTime);
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.map-template {
|
|
|
- & > div {
|
|
|
- margin: 0px;
|
|
|
- padding: 0px;
|
|
|
- }
|
|
|
|
|
|
- & > div:first-child {
|
|
|
- // display: none;
|
|
|
- width: 30px;
|
|
|
- height: 100%;
|
|
|
+<style lang="scss" scope>
|
|
|
+.content {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-left: 5px;
|
|
|
+ margin-right: 5px;
|
|
|
+ border: solid 1px #b8bdc088;
|
|
|
+
|
|
|
+ & > span {
|
|
|
+ margin-right: 10px;
|
|
|
+ padding-top: 5px;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ height: 30px;
|
|
|
color: rgb(245, 245, 245);
|
|
|
- background-color: #b8bdc088;
|
|
|
- text-align: center;
|
|
|
font-size: 14px;
|
|
|
- writing-mode: vertical-lr;
|
|
|
- padding-left: 5px;
|
|
|
- padding-right: 5px;
|
|
|
}
|
|
|
|
|
|
- // & > div:nth-child(2) {
|
|
|
- // height: 100%;
|
|
|
- // width: calc(100% - 30px);
|
|
|
- // font-size: 14px;
|
|
|
- // line-height: 23px;
|
|
|
- // display: flex;
|
|
|
- // flex-direction: row;
|
|
|
-
|
|
|
- // & > div {
|
|
|
- // border: solid 1px #b8bdc088;
|
|
|
- // background-color: #b8bdc055;
|
|
|
- // display: flex;
|
|
|
- // flex-direction: column;
|
|
|
- // width:calc(25% - 20px);
|
|
|
- // margin: 10px;
|
|
|
-
|
|
|
-
|
|
|
- // & > span:first-child {
|
|
|
- // background-color: #b8bdc088;
|
|
|
- // text-align: center;
|
|
|
- // }
|
|
|
- // & > span:not(:nth-child(1)) {
|
|
|
- // & > span {
|
|
|
- // display: inline-block;
|
|
|
- // }
|
|
|
- // & > span:first-child {
|
|
|
- // width: calc(100% - 60px);
|
|
|
- // text-align: right;
|
|
|
- // }
|
|
|
- // & > span:last-child {
|
|
|
- // width: 60px;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- & > div:last-child {
|
|
|
- height: 100%;
|
|
|
- width: calc(100% - 30px);
|
|
|
+ & > span:first-child {
|
|
|
+ width: 100px;
|
|
|
+ background-color: #b8bdc088;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
</style>
|