|
|
@@ -147,7 +147,7 @@ let pieGaData = (
|
|
|
//网点业务总览
|
|
|
let dotData = (
|
|
|
title = '网点业务库总览',
|
|
|
-
|
|
|
+
|
|
|
data = [
|
|
|
{ value: 666, name: '巡查上报' },
|
|
|
{ value: 193, name: '自行处置' },
|
|
|
@@ -156,15 +156,14 @@ let dotData = (
|
|
|
{ value: 100, name: '视频抓拍' }
|
|
|
]
|
|
|
) => {
|
|
|
-
|
|
|
var color = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red']
|
|
|
let option = {
|
|
|
color: color,
|
|
|
title: {
|
|
|
- text: title,
|
|
|
-
|
|
|
- left: 'left'
|
|
|
- },
|
|
|
+ text: title,
|
|
|
+
|
|
|
+ left: 'left'
|
|
|
+ },
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
@@ -181,13 +180,13 @@ let dotData = (
|
|
|
'\n' +
|
|
|
params.data['value'] +
|
|
|
'</span>'
|
|
|
- );
|
|
|
+ )
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
orient: 'vertical',
|
|
|
- icon: "circle",
|
|
|
- left: '8%',
|
|
|
+ icon: 'circle',
|
|
|
+ left: '2%',
|
|
|
top: '32%',
|
|
|
itemWidth: 14,
|
|
|
itemGap: 20,
|
|
|
@@ -206,14 +205,14 @@ let dotData = (
|
|
|
}
|
|
|
},
|
|
|
formatter: function (name) {
|
|
|
- var target, unit;
|
|
|
+ var target, unit
|
|
|
for (var i = 0, l = data.length; i < l; i++) {
|
|
|
if (data[i].name == name) {
|
|
|
- target = data[i].value;
|
|
|
- unit = data[i].unit;
|
|
|
+ target = data[i].value
|
|
|
+ unit = data[i].unit
|
|
|
}
|
|
|
}
|
|
|
- return `{a| ${name}}{b|${target}}`;
|
|
|
+ return `{a| ${name}}{b|${target}}`
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
@@ -240,32 +239,129 @@ let dotData = (
|
|
|
labelLine: {
|
|
|
show: false
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
data: data
|
|
|
}
|
|
|
]
|
|
|
- };
|
|
|
+ }
|
|
|
return option
|
|
|
}
|
|
|
//保安情况
|
|
|
let securityData = (
|
|
|
title = '保安配备情况',
|
|
|
-
|
|
|
+
|
|
|
data = [
|
|
|
{ value: 666, name: '已配备' },
|
|
|
- { value: 193, name: '未配备' },
|
|
|
-
|
|
|
+ { value: 193, name: '未配备' }
|
|
|
]
|
|
|
) => {
|
|
|
-
|
|
|
var color = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red']
|
|
|
let option = {
|
|
|
color: color,
|
|
|
title: {
|
|
|
- text: title,
|
|
|
-
|
|
|
- left: 'left'
|
|
|
+ text: title,
|
|
|
+
|
|
|
+ left: 'left'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
+ color: '#fff',
|
|
|
+ formatter: function (params) {
|
|
|
+ return (
|
|
|
+ params.name +
|
|
|
+ '<br/>' +
|
|
|
+ params.marker +
|
|
|
+ '<span style="color:' +
|
|
|
+ params.color +
|
|
|
+ '">' +
|
|
|
+ params.data['name'] +
|
|
|
+ '\n' +
|
|
|
+ params.data['value'] +
|
|
|
+ '</span>'
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ icon: 'circle',
|
|
|
+ left: '2%',
|
|
|
+ top: '32%',
|
|
|
+ itemWidth: 14,
|
|
|
+ itemGap: 20,
|
|
|
+ textStyle: {
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ color: '#1f1f1f',
|
|
|
+ fontSize: 16,
|
|
|
+ padding: [0, 10, 0, 0]
|
|
|
+ },
|
|
|
+ b: {
|
|
|
+ color: '#1f1f1f',
|
|
|
+ fontSize: 16,
|
|
|
+ padding: [0, 10, 0, 10]
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
+ formatter: function (name) {
|
|
|
+ var target, unit
|
|
|
+ for (var i = 0, l = data.length; i < l; i++) {
|
|
|
+ if (data[i].name == name) {
|
|
|
+ target = data[i].value
|
|
|
+ unit = data[i].unit
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return `{a| ${name}}{b|${target}}`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['20%', '65%'],
|
|
|
+ center: ['75%', '50%'],
|
|
|
+ avoidLabelOverlap: true,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: 'inside',
|
|
|
+ formatter: '{d}%',
|
|
|
+ textStyle: {
|
|
|
+ align: 'center',
|
|
|
+ baseline: 'middle',
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: '100',
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+
|
|
|
+ data: data
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ return option
|
|
|
+}
|
|
|
+//离行式自助银行
|
|
|
+let LHSData = (
|
|
|
+ title = '',
|
|
|
+
|
|
|
+ data = [
|
|
|
+ { value: 666, name: '已配备' },
|
|
|
+ { value: 193, name: '未配备' }
|
|
|
+ ]
|
|
|
+) => {
|
|
|
+ var color = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red']
|
|
|
+ let option = {
|
|
|
+ color: color,
|
|
|
+ title: {
|
|
|
+ text: title,
|
|
|
+
|
|
|
+ left: 'left'
|
|
|
+ },
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
@@ -282,13 +378,13 @@ let securityData = (
|
|
|
'\n' +
|
|
|
params.data['value'] +
|
|
|
'</span>'
|
|
|
- );
|
|
|
+ )
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
orient: 'vertical',
|
|
|
- icon: "circle",
|
|
|
- left: '8%',
|
|
|
+ icon: 'circle',
|
|
|
+ left: '2%',
|
|
|
top: '32%',
|
|
|
itemWidth: 14,
|
|
|
itemGap: 20,
|
|
|
@@ -307,14 +403,14 @@ let securityData = (
|
|
|
}
|
|
|
},
|
|
|
formatter: function (name) {
|
|
|
- var target, unit;
|
|
|
+ var target, unit
|
|
|
for (var i = 0, l = data.length; i < l; i++) {
|
|
|
if (data[i].name == name) {
|
|
|
- target = data[i].value;
|
|
|
- unit = data[i].unit;
|
|
|
+ target = data[i].value
|
|
|
+ unit = data[i].unit
|
|
|
}
|
|
|
}
|
|
|
- return `{a| ${name}}{b|${target}}`;
|
|
|
+ return `{a| ${name}}{b|${target}}`
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
@@ -341,12 +437,205 @@ let securityData = (
|
|
|
labelLine: {
|
|
|
show: false
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
data: data
|
|
|
}
|
|
|
]
|
|
|
- };
|
|
|
+ }
|
|
|
+ return option
|
|
|
+}
|
|
|
+//在行式自助银行
|
|
|
+let ZHSData = (
|
|
|
+ title = '在行式自助银行',
|
|
|
+
|
|
|
+ data = [
|
|
|
+ { value: 666, name: '穿墙式设备' },
|
|
|
+ { value: 193, name: '大堂式设备' }
|
|
|
+ ]
|
|
|
+) => {
|
|
|
+ let color = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red']
|
|
|
+ const handleData = {}
|
|
|
+ let sum = 0
|
|
|
+ // 求和
|
|
|
+ data.map(item => {
|
|
|
+ sum += item.value
|
|
|
+ })
|
|
|
+ // 数据处理
|
|
|
+ data.map(item => {
|
|
|
+ handleData[item.name] = item
|
|
|
+ handleData[item.name].percentage = ((item.value / sum) * 100).toFixed(1) + '%'
|
|
|
+ })
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: title,
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ icon: 'circle',
|
|
|
+ right: '3%',
|
|
|
+ left: 'center',
|
|
|
+ bottom: '10%',
|
|
|
+ itemWidth: 10,
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: 'none'
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ color: '#606266',
|
|
|
+ fontSize: 14
|
|
|
+ },
|
|
|
+ percentage: {
|
|
|
+ color: '#606266',
|
|
|
+ fontSize: 16,
|
|
|
+ padding: [0, 0, 0, 30],
|
|
|
+ align: 'right'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ color: ['#4D88FE', '#50CCCB', '#FFBF3C'],
|
|
|
+ radius: '130%',
|
|
|
+ left: 'center',
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ position: 'inside', // 在内部显示，outseide 是在外部显示
|
|
|
+ show: true,
|
|
|
+ formatter: '{c}'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: data,
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: '#fff'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
return option
|
|
|
}
|
|
|
-
|
|
|
-export { securityPrecautions,dotData,securityData, pieGaData }
|
|
|
+//日常履职完成率
|
|
|
+let resumption = () => {
|
|
|
+ var getzszy = ['每日履职', '报警测试', 'UPS维护', '夜间值守', '离行巡检'] //数据点名称
|
|
|
+ var getzswcl = [101, 100, 100, 98.65, 98.3] //招生完成率
|
|
|
+ var getzswcl2 = [101, 100, 100, 98.65, 98.3] //招生完成率
|
|
|
+ var getzswclzd = [] //招生完成率100%
|
|
|
+ for (let i = 0; i < getzswcl.length; i++) {
|
|
|
+ if (getzswcl[i] > 100) {
|
|
|
+ getzswcl[i] = 100
|
|
|
+ }
|
|
|
+ getzswclzd.push(100)
|
|
|
+ }
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ grid: {
|
|
|
+
|
|
|
+ right: '15%',
|
|
|
+ bottom: '3%',
|
|
|
+ left:'20%',
|
|
|
+ top: '3%'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'none'
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ return getzszy[params[0].dataIndex] + '<br>招生完成率: ' + getzswcl2[params[0].dataIndex] + '%'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ show: false,
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ inverse: true,
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#666666',
|
|
|
+ fontSize: '13'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: getzszy
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ inverse: true,
|
|
|
+ axisTick: 'none',
|
|
|
+ axisLine: 'none',
|
|
|
+ show: true,
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#333333',
|
|
|
+ fontSize: '13'
|
|
|
+ },
|
|
|
+ formatter: '{value}%'
|
|
|
+ },
|
|
|
+ data: getzswcl2
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '值',
|
|
|
+ type: 'bar',
|
|
|
+ zlevel: 1,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: 5,
|
|
|
+ color: '#4E7BFE'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ barWidth: 10,
|
|
|
+ data: getzswcl
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '背景',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 10,
|
|
|
+ barGap: '-100%',
|
|
|
+ data: getzswclzd,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgba(103,150,253,0.3)',
|
|
|
+ barBorderRadius: 5
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ return option
|
|
|
+}
|
|
|
+
|
|
|
+export { securityPrecautions, resumption, dotData, securityData, ZHSData, LHSData, pieGaData }
|
coys