You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1298 lines
28 KiB
1298 lines
28 KiB
import echarts from 'echarts'; |
|
import { |
|
colorRgbA |
|
} from "../../../utils/util"; //16进制转换成rgba |
|
import { |
|
object |
|
} from 'prop-types'; |
|
|
|
export function getSecunrityLine(linedata) { |
|
const xList = [] |
|
const yList = [] |
|
let maxNum = 0 |
|
if (linedata.length > 0) { |
|
for (let i = 0; i < linedata.length; i++) { |
|
const l = linedata[i] |
|
if (l.rq) { |
|
xList.push(l.rq.split('-')[2]) |
|
} else { |
|
xList.push('--') |
|
} |
|
yList.push(l.num) |
|
if (l.num > maxNum) { |
|
maxNum = l.num |
|
} |
|
} |
|
maxNum += 1 |
|
} |
|
const options = { |
|
tooltip: { |
|
show: true, |
|
trigger: 'axis', |
|
}, |
|
grid: { |
|
show: true, |
|
left: '50px', |
|
bottom: '20px', |
|
top: '20px', |
|
right: '20px', |
|
borderColor: '#103255', |
|
borderWidth: 0.5 |
|
}, |
|
xAxis: { |
|
type: 'category', |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#96bfb9', |
|
}, |
|
}, |
|
|
|
axisTick: { |
|
show: false, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
textStyle: { |
|
color: '#96bfb9', |
|
}, |
|
fontSize: 12, |
|
interval: 1, |
|
}, |
|
// boundaryGap: [20, 20], |
|
data: xList |
|
}, |
|
yAxis: { |
|
type: 'value', |
|
show: true, |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#96bfb9', |
|
}, |
|
}, |
|
axisTick: { |
|
show: false, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
max: maxNum |
|
}, |
|
|
|
series: [{ |
|
name: '任务数', |
|
type: 'line', |
|
data: yList, |
|
symbol: 'none', |
|
itemStyle: { |
|
normal: { |
|
lineStyle: { |
|
color: '#f17f36', |
|
}, |
|
}, |
|
}, |
|
areaStyle: { |
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ |
|
offset: 0, |
|
color: colorRgbA("#f17f36", 0) |
|
}, { |
|
offset: 1, |
|
color: colorRgbA("#f17f36", 1) |
|
}]) |
|
}, |
|
},], |
|
}; |
|
return options; |
|
} |
|
|
|
|
|
export function getPostBar(policeBarList) { |
|
const colorList = ['#0cb9fe', '#1aa1fb', '#23dcc0', '#eb913d'] |
|
const xList = [] |
|
const yList = { |
|
'yList0': [], |
|
'yList1': [], |
|
'yList2': [], |
|
'yList3': [] |
|
} |
|
|
|
const seriesList = [] |
|
const legendList = ['投放警力', '民警', '辅警', '岗位'] |
|
|
|
if (policeBarList.length > 0) { |
|
for (let i = 0; i < policeBarList.length; i++) { |
|
const p = policeBarList[i]; |
|
yList.yList0.push(p.position_sum) |
|
yList.yList1.push(p.mj_sum) |
|
yList.yList2.push(p.fj_sum) |
|
yList.yList3.push(p.position_sum) |
|
xList.push(p.deptshortname) |
|
} |
|
} |
|
|
|
for (let i = 0; i < legendList.length; i++) { |
|
seriesList.push({ |
|
name: legendList[i], //这个是Bar图 |
|
type: "bar", |
|
itemStyle: { |
|
color: new echarts.graphic.LinearGradient( |
|
0, 1, 0, 0, |
|
[{ |
|
offset: 0, |
|
color: colorRgbA(colorList[i], 0.1) |
|
}, |
|
{ |
|
offset: 1, |
|
color: colorRgbA(colorList[i], 1) |
|
} |
|
] |
|
) |
|
}, |
|
data: yList[`yList${i}`], |
|
label: { |
|
show: true, |
|
position: 'inside', |
|
rotate: 90, |
|
textStyle: { |
|
color: '#ffffff' |
|
} |
|
} |
|
}) |
|
} |
|
|
|
const options = { |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'shadow', |
|
}, |
|
// confine: true |
|
}, |
|
grid: { |
|
show: true, |
|
left: '3%', |
|
right: '4%', |
|
bottom: '3%', |
|
top: '20%', |
|
containLabel: true, |
|
borderColor: '#103255', |
|
borderWidth: 0.5 |
|
}, |
|
legend: { |
|
show: true, |
|
data: legendList, |
|
textStyle: { |
|
color: '#94c9f3' |
|
}, |
|
right: 0 |
|
}, |
|
xAxis: [{ |
|
type: 'category', |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#0098e1', |
|
}, |
|
}, |
|
|
|
axisTick: { |
|
show: false, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
show: true, |
|
textStyle: { |
|
color: '#ffffff' |
|
} |
|
}, |
|
data: xList |
|
|
|
},], |
|
yAxis: [{ |
|
type: 'value', |
|
show: true, |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#0098e1', |
|
}, |
|
}, |
|
axisTick: { |
|
show: false, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
show: true, |
|
textStyle: { |
|
color: '#ffffff' |
|
} |
|
}, |
|
}], |
|
series: seriesList |
|
}; |
|
return options |
|
} |
|
|
|
|
|
export function getPostBar1() { |
|
const colorList = ['#4995ca', '#2a5d9a', '#62c2be', '#c19471'] |
|
const xList = [] |
|
const yList = [] |
|
const yListM = [] |
|
const seriesList = [] |
|
const legendList = ['投放警力', '民警', '辅警', '岗位'] |
|
|
|
const createSvg = (shadowColor, shadowBlur) => ` |
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" |
|
x="0px" y="0px" |
|
viewBox="0 0 32 128" |
|
xml:space="preserve" |
|
> |
|
<style> |
|
.st2 { |
|
fill: transparent; |
|
stroke: ${shadowColor}; |
|
stroke-width: ${shadowBlur}px; |
|
filter: url(#chart-inset-shadow); |
|
} |
|
</style> |
|
<defs> |
|
<filter id="chart-inset-shadow" width="200%" height="200%" x="-50%" y="-50%"> |
|
<feGaussianBlur in="SourceGraphic" result="gass" stdDeviation="${shadowBlur * 0.75}" /> |
|
<feMerge> |
|
<feMergeNode in="gass" /> |
|
</feMerge> |
|
</filter> |
|
</defs> |
|
<path class="st2" d="M0 0 L32 0 L32 128 L0 128 Z" /> |
|
</svg> |
|
`; |
|
|
|
const svgString = createSvg('#156dff', 8); |
|
const svg = new Blob([svgString], { |
|
type: "image/svg+xml;charset=utf-8" |
|
}); |
|
|
|
const DOMURL = window.URL || window.webkitURL || window; |
|
const insetShadowUrl = DOMURL.createObjectURL(svg); |
|
|
|
for (let i = 0; i < 4; i++) { |
|
yList.push(i * 10 + 10) |
|
yListM.push((i * 10 + 10) + 1) |
|
} |
|
|
|
for (let i = 0; i < legendList.length; i++) { |
|
xList.push('大队' + (i + 1)) |
|
seriesList.push({ |
|
data: yList, |
|
type: 'pictorialBar', |
|
symbol: 'image://' + insetShadowUrl, |
|
barWidth: 50, |
|
}, { |
|
data: yList, |
|
type: 'bar', |
|
barWidth: 50, |
|
itemStyle: { |
|
color: 'transparent', |
|
borderWidth: 3, |
|
borderColor: new echarts.graphic.LinearGradient( |
|
0, 0, 0, 1, |
|
[{ |
|
offset: 0, |
|
color: '#156dff' |
|
}, |
|
{ |
|
offset: 1, |
|
color: '#00eaeb' |
|
}, |
|
] |
|
), |
|
shadowColor: 'blue', |
|
shadowBlur: 12, |
|
shadowOffsetX: 0, |
|
shadowOffsetY: 0, |
|
}, |
|
}) |
|
} |
|
|
|
|
|
|
|
|
|
const options = { |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'shadow', |
|
}, |
|
// confine: true |
|
}, |
|
grid: { |
|
show: true, |
|
left: '3%', |
|
right: '4%', |
|
bottom: '3%', |
|
top: '20%', |
|
containLabel: true, |
|
borderColor: '#103255', |
|
borderWidth: 0.5 |
|
}, |
|
legend: { |
|
show: true, |
|
data: legendList, |
|
textStyle: { |
|
color: '#94c9f3' |
|
}, |
|
right: 0 |
|
}, |
|
xAxis: [{ |
|
type: 'category', |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#0098e1', |
|
}, |
|
}, |
|
|
|
axisTick: { |
|
show: false, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
show: true, |
|
textStyle: { |
|
color: '#ffffff' |
|
} |
|
}, |
|
data: xList |
|
|
|
},], |
|
yAxis: [{ |
|
type: 'value', |
|
show: true, |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#0098e1', |
|
}, |
|
}, |
|
axisTick: { |
|
show: false, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
show: true, |
|
textStyle: { |
|
color: '#ffffff' |
|
} |
|
}, |
|
}], |
|
series: seriesList |
|
}; |
|
return options |
|
} |
|
|
|
export function getEquipChart1(perfectList, totalPerfectnessRatio, selectedEquip) { |
|
const color = ['#20a8f6', '#ca7d3f', '#16f6e9', '#e5c862', '#f7b070', '#61e2aa']; |
|
let chartData = []; |
|
for (let i = 0; i < perfectList.length; i++) { |
|
const p = perfectList[i]; |
|
chartData.push({ |
|
name: p.devicetypename, |
|
value: p.count, |
|
unit: '个', |
|
allcount: p.allcount || 0, |
|
devicetype: p.devicetype |
|
}) |
|
} |
|
let arrName = []; |
|
let arrValue = []; |
|
let sum = 0; |
|
let pieSeries = [], |
|
lineYAxis = []; |
|
|
|
// 数据处理 |
|
chartData.forEach((v, i) => { |
|
arrName.push(v.name); |
|
arrValue.push(v.value); |
|
sum = sum + v.value; |
|
}) |
|
|
|
// 图表option整理 |
|
chartData.forEach((v, i) => { |
|
pieSeries.push({ |
|
name: '设备完好率', |
|
type: 'pie', |
|
clockWise: true, |
|
hoverAnimation: false, |
|
radius: [83 - i * 16 + '%', 75 - i * 16 + '%'], |
|
center: ["50%", "50%"], |
|
label: { |
|
show: false |
|
}, |
|
data: [{ |
|
value: v.value, |
|
name: v.name |
|
}, { |
|
value: v.allcount - v.value, |
|
name: '', |
|
itemStyle: { |
|
color: "rgba(0,0,0,0)" |
|
} |
|
}] |
|
}); |
|
pieSeries.push({ |
|
name: '', |
|
type: 'pie', |
|
silent: true, |
|
z: 1, |
|
clockWise: true, //顺时加载 |
|
hoverAnimation: false, //鼠标移入变大 |
|
radius: [83 - i * 16 + '%', 75 - i * 16 + '%'], |
|
center: ["50%", "50%"], |
|
label: { |
|
show: false |
|
}, |
|
data: [{ |
|
value: 10, |
|
itemStyle: { |
|
color: "rgba(16, 42, 89, 1)" |
|
} |
|
}] |
|
}); |
|
v.percent = v.allcount === 0 ? '0%' : (v.value / v.allcount * 100).toFixed(1) + "%"; |
|
lineYAxis.push({ |
|
value: i, |
|
textStyle: { |
|
rich: { |
|
circle: { |
|
color: color[i], |
|
padding: [0, 5] |
|
} |
|
} |
|
} |
|
}); |
|
}) |
|
const option = { |
|
// title: { |
|
// text: `{c|完好率 }{a|${totalPerfectnessRatio}}{b|%}`, |
|
// top: "0", |
|
// left: "40%", |
|
// textStyle: { |
|
// rich: { |
|
// t: { |
|
// border: '2px solid #04fbf8' |
|
// }, |
|
// a: { |
|
// fontFamily: 'dsDigital', |
|
// fontSize: 30, |
|
// lineHeight: 30, |
|
// color: '#04fbf8' |
|
// }, |
|
// b: { |
|
// verticalAlign: 'bottom', |
|
// color: '#ffffff', |
|
// lineHeight: 24, |
|
// }, |
|
// c: { |
|
// lineHeight: 20, |
|
// verticalAlign: 'bottom', |
|
// color: '#ffffff' |
|
// } |
|
// } |
|
// } |
|
// }, |
|
tooltip: { |
|
show: true, |
|
formatter: (params) => { |
|
const device = perfectList[parseInt(params.seriesIndex / 2)] |
|
return `${device.devicetypename} | ${(device.allcount == 0 ? '0%' : device.count / device.allcount * 100).toFixed(1)}% ${device.count}/${device.allcount}` |
|
}, |
|
position: [10, 10] |
|
}, |
|
color: color, |
|
grid: { |
|
top: '30%', |
|
bottom: '10%', |
|
left: "38%", |
|
containLabel: false |
|
}, |
|
yAxis: [{ |
|
type: 'category', |
|
inverse: true, |
|
axisLine: { |
|
show: false |
|
}, |
|
axisTick: { |
|
show: false |
|
}, |
|
axisLabel: { |
|
formatter: function (params) { |
|
let item = chartData[params]; |
|
let text = '{circle|●}{name|' + item.name + '}{percent|' + item.percent + '}{value|' + item.value + '}' |
|
return text |
|
}, |
|
interval: 0, |
|
inside: true, |
|
textStyle: { |
|
color: (value, index) => { |
|
const selected = perfectList.findIndex(x => x.devicetype === selectedEquip) |
|
return index === selected ? '#00deff' : color[index]; |
|
}, |
|
fontSize: 14, |
|
rich: { |
|
name: { |
|
fontSize: 14, |
|
width: 70, |
|
color: '#ffffff' |
|
}, |
|
bd: { |
|
padding: [0, 5], |
|
fontSize: 14, |
|
}, |
|
percent: { |
|
fontSize: 14, |
|
width: 65 |
|
}, |
|
value: { |
|
fontSize: 14, |
|
fontWeight: 500, |
|
width: 40 |
|
}, |
|
} |
|
}, |
|
show: false |
|
}, |
|
data: lineYAxis |
|
}], |
|
xAxis: [{ |
|
show: false |
|
}], |
|
series: pieSeries |
|
}; |
|
return option |
|
} |
|
|
|
export function getEquipChart(perfectList, totalPerfectnessRatio) { |
|
const colorArr = ['#01c7ea', '#48affe', '#38fff8', '#3a75ff', '#f7b070', '#61e2aa'] |
|
|
|
const seriesData = [] |
|
|
|
for (let i = 0; i < perfectList.length; i++) { |
|
const p = perfectList[i]; |
|
seriesData.push({ |
|
name: p.devicetypename, |
|
value: p.count, |
|
itemStyle: { |
|
color: colorArr[i % 6] |
|
} |
|
}) |
|
} |
|
|
|
seriesData.sort(function (a, b) { |
|
return b.value - a.value; |
|
}) |
|
|
|
|
|
const options = { |
|
title: { |
|
text: `{a|${totalPerfectnessRatio}}{b|%}\n{c|完好率}`, |
|
top: "middle", |
|
left: "center", |
|
textStyle: { |
|
rich: { |
|
a: { |
|
fontFamily: 'dsDigital', |
|
fontSize: 30, |
|
lineHeight: 30, |
|
color: '#ffffff' |
|
}, |
|
b: { |
|
verticalAlign: 'bottom', |
|
color: '#ffffff', |
|
lineHeight: 24, |
|
}, |
|
c: { |
|
lineHeight: 20, |
|
verticalAlign: 'bottom', |
|
color: '#ffffff' |
|
} |
|
} |
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|
}, |
|
|
|
series: [{ |
|
name: '设备完好率', |
|
type: 'pie', |
|
radius: ['40%', '80%'], |
|
center: ['50%', '50%'], |
|
data: seriesData, |
|
roseType: 'radius', |
|
startAngle: 180, |
|
label: { |
|
formatter: '{b} {c} {d}%', |
|
fontSize: 16, |
|
alignTo: "edge" |
|
}, |
|
labelLine: { |
|
lineStyle: {}, |
|
smooth: 0.2, |
|
length: 5, |
|
length2: 10 |
|
}, |
|
}] |
|
}; |
|
return options |
|
} |
|
|
|
export function getEpqipLine(areaFlag, onLineList) { |
|
const xList = [] |
|
const legenddata = [] |
|
const yList = [] |
|
const colorArr = ['#21a9f7', '#176edf', '#cb7d3f', '#16f7e9', '#f7b070', '#61e2aa']; |
|
|
|
let date = new Date() |
|
|
|
const hours = date.getHours() |
|
|
|
for (let i = 0; i <= parseInt(hours); i++) { |
|
xList.push(i.toString()) |
|
} |
|
|
|
let max = 100 |
|
if (onLineList.length > 0) { |
|
for (let j = 0; j < onLineList.length; j++) { |
|
if (onLineList[j] === null || onLineList[j] === 'null' || !onLineList[j] || onLineList[j].length === 0) { |
|
continue |
|
} |
|
if (onLineList[j].length > 0) { |
|
legenddata.push(onLineList[j][0].equipname) |
|
} |
|
const data = [] |
|
for (let j = 0; j < 24; j++) { |
|
const e = onLineList.find(t => t.computtime == j.toString()); |
|
if (e) { |
|
data.push(areaFlag === '1' ? parseFloat(e.onlineratio2) * 100 : parseFloat(e.onlineratio1) * 100) |
|
} else { |
|
data.push(0) |
|
} |
|
} |
|
yList.push({ |
|
name: onLineList[j][0].equipname, |
|
type: 'line', |
|
data: data, |
|
symbol: 'none', |
|
itemStyle: { |
|
normal: { |
|
lineStyle: { |
|
color: colorArr[j], |
|
}, |
|
}, |
|
}, |
|
}) |
|
} |
|
|
|
} |
|
|
|
const options = { |
|
title: { |
|
text: '设备完好率', |
|
left: 50, |
|
top: 0, |
|
textStyle: { |
|
color: '#ffffff', |
|
fontWeight: 'normal' |
|
} |
|
}, |
|
tooltip: { |
|
show: true, |
|
trigger: 'axis', |
|
}, |
|
grid: { |
|
show: true, |
|
left: '50px', |
|
bottom: '20px', |
|
top: '35px', |
|
right: '20px', |
|
borderColor: '#103255', |
|
borderWidth: 0.5 |
|
}, |
|
legend: { |
|
data: legenddata, |
|
right: 0, |
|
textStyle: { |
|
color: "#ffffff" |
|
} |
|
}, |
|
xAxis: { |
|
type: 'category', |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#0098e1', |
|
}, |
|
}, |
|
|
|
axisTick: { |
|
show: false, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
textStyle: { |
|
color: '#FFFFFF', |
|
}, |
|
fontSize: 12, |
|
interval: 1, |
|
}, |
|
// boundaryGap: [20, 20], |
|
data: xList |
|
}, |
|
yAxis: { |
|
type: 'value', |
|
show: true, |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#0098e1', |
|
}, |
|
}, |
|
axisTick: { |
|
show: false, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
textStyle: { |
|
color: '#FFFFFF', |
|
}, |
|
}, |
|
max: max |
|
}, |
|
|
|
series: yList, |
|
}; |
|
return options; |
|
} |
|
|
|
|
|
export function getEpqipLineByMonth(areaFlag, onLineList) { |
|
const xList = [] |
|
const legenddata = [] |
|
const yList = [] |
|
const colorArr = ['#20a8f6', '#ca7d3f', '#16f6e9', '#e5c862', '#f7b070', '#61e2aa']; |
|
|
|
let max = 100 |
|
if (onLineList.length > 0) { |
|
for (let j = 0; j < onLineList.length; j++) { |
|
if (onLineList[j] === null || onLineList[j] === 'null' || !onLineList[j] || onLineList[j].length === 0) { |
|
continue |
|
} |
|
if (onLineList[j].length > 0) { |
|
legenddata.push(onLineList[j][0].equipname || '其他') |
|
} |
|
const data = [] |
|
for (let k = 0; k < onLineList[j].length; k++) { |
|
const e = onLineList[j][k]; |
|
if (xList.length < onLineList[j].length) { |
|
xList.push(e.times.slice(5, 10)) |
|
} |
|
data.push(areaFlag === '1' ? (e.onlineratio2 * 100).toFixed(0) : (e.onlineratio1 * 100).toFixed(0)) |
|
} |
|
yList.push({ |
|
name: onLineList[j][0].equipname || '其他', |
|
type: 'line', |
|
data: data, |
|
symbol: 'none', |
|
itemStyle: { |
|
normal: { |
|
lineStyle: { |
|
color: colorArr[j], |
|
}, |
|
}, |
|
}, |
|
// areaStyle: { |
|
// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ |
|
// offset: 0, |
|
// color: colorRgbA(colorArr[j], 0) |
|
// }, { |
|
// offset: 1, |
|
// color: colorRgbA(colorArr[j], 0.5) |
|
// }]) |
|
// }, |
|
}) |
|
} |
|
|
|
} |
|
|
|
const options = { |
|
color: colorArr, |
|
// title: { |
|
// text: '{a|设备完好率}', |
|
// left: 0, |
|
// top: 0, |
|
// textStyle: { |
|
// color: '#ffffff', |
|
// fontWeight: 'normal', |
|
// rich: { |
|
// a: { |
|
// border: '1px solid #18aff6' |
|
// } |
|
// } |
|
// } |
|
// }, |
|
tooltip: { |
|
show: true, |
|
trigger: 'axis', |
|
}, |
|
grid: { |
|
show: true, |
|
left: '35px', |
|
bottom: '30px', |
|
top: '40px', |
|
right: '20px', |
|
borderColor: '#103255', |
|
borderWidth: 0.5 |
|
}, |
|
legend: { |
|
data: legenddata, |
|
right: 20, |
|
top: 0, |
|
textStyle: { |
|
color: "#ffffff" |
|
} |
|
}, |
|
xAxis: { |
|
type: 'category', |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#0098e1', |
|
}, |
|
}, |
|
|
|
axisTick: { |
|
show: false, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
textStyle: { |
|
color: '#96bfb9', |
|
}, |
|
fontSize: 12, |
|
interval: 2, //强制文字产生间隔 |
|
rotate: 20, //文字逆时针旋转45° |
|
}, |
|
data: xList |
|
}, |
|
yAxis: { |
|
type: 'value', |
|
show: true, |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#0098e1', |
|
}, |
|
}, |
|
axisTick: { |
|
show: false, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
textStyle: { |
|
color: '#96bfb9', |
|
}, |
|
}, |
|
max: max |
|
}, |
|
|
|
series: yList, |
|
}; |
|
return options; |
|
} |
|
|
|
|
|
export function getPostBar2(policeBarList, deptName) { |
|
const colorList = ['#0cb9fe', '#f17f36', '#1aa1fb', '#eb913d'] |
|
const xList = [] |
|
const yList = { |
|
'yList0': [], |
|
'yList1': [], |
|
'yList2': [], |
|
'yList3': [] |
|
} |
|
|
|
const seriesList = [] |
|
const legendList = ['在线民警', '异常民警', '在线辅警', '异常辅警'] |
|
|
|
if (policeBarList.length > 0) { |
|
for (let i = 0; i < policeBarList.length; i++) { |
|
const p = policeBarList[i]; |
|
const jhmj = p.find(x => x.plan === 'jh' && x.policetype === '1') |
|
const zgmj = p.find(x => x.plan === 'zg' && x.policetype === '1') |
|
const jhfj = p.find(x => x.plan === 'jh' && x.policetype === '2') |
|
const zgfj = p.find(x => x.plan === 'zg' && x.policetype === '2') |
|
|
|
const jhmjnum = jhmj && jhmj.num || 0 |
|
const zgmjnum = zgmj && zgmj.num || 0 |
|
const jhfjnum = jhfj && jhfj.num || 0 |
|
const zgfjnum = zgfj && zgfj.num || 0 |
|
|
|
|
|
yList.yList0.push(jhmjnum - zgmjnum) |
|
yList.yList1.push(zgmjnum) |
|
yList.yList2.push(jhfjnum - zgfjnum) |
|
yList.yList3.push(zgfjnum) |
|
xList.push(p[0].deptshortname) |
|
} |
|
} |
|
|
|
for (let i = 0; i < legendList.length; i++) { |
|
seriesList.push({ |
|
name: legendList[i], //这个是Bar图 |
|
type: "bar", |
|
stack: i < 2 ? "民警" : "辅警", |
|
barWidth: 20, //柱图宽度 |
|
barCategoryGap:'15%', |
|
itemStyle: { |
|
color: colorList[i] |
|
}, |
|
data: yList[`yList${i}`], |
|
label: { |
|
show: true, |
|
position: 'inside', |
|
rotate: 90, |
|
textStyle: { |
|
color: '#ffffff' |
|
} |
|
} |
|
}) |
|
} |
|
|
|
const options = { |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'none', |
|
}, |
|
// confine: true |
|
}, |
|
grid: { |
|
show: true, |
|
left: '3%', |
|
right: '2%', |
|
bottom: '5%', |
|
top: '20%', |
|
containLabel: true, |
|
borderColor: '#103255', |
|
borderWidth: 0.5 |
|
}, |
|
legend: { |
|
show: true, |
|
data: legendList, |
|
textStyle: { |
|
color: '#94c9f3' |
|
}, |
|
right: '2%' |
|
}, |
|
xAxis: [{ |
|
type: 'category', |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#0098e1', |
|
}, |
|
}, |
|
|
|
axisTick: { |
|
show: false, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
show: true, |
|
textStyle: { |
|
color: '#ffffff' |
|
}, |
|
formatter: (value) => { |
|
let text = '' |
|
if (value === deptName) { |
|
text = `{bg|${value}}` |
|
} else { |
|
text = `{nobg|${value}}` |
|
} |
|
return text |
|
}, |
|
rich: { |
|
bg: { |
|
backgroundColor: '#1aa4fd', |
|
padding: 5 |
|
}, |
|
nobg: { |
|
padding: 5 |
|
} |
|
|
|
} |
|
}, |
|
data: xList |
|
|
|
},], |
|
yAxis: [{ |
|
type: 'value', |
|
show: true, |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#0098e1', |
|
}, |
|
}, |
|
axisTick: { |
|
show: false, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
show: true, |
|
textStyle: { |
|
color: '#96bfb9' |
|
} |
|
}, |
|
}], |
|
series: seriesList |
|
}; |
|
return options |
|
} |
|
|
|
|
|
export function getPostBar3(policeBarList, deptName, duty) { |
|
// const colorList = ['#0cb8ff', '#f28925', '#40e29b', '#e7ce58'] |
|
const colorList = ['#0cb8ff', '#40e29b'] |
|
|
|
const xList = [] |
|
const yList = { |
|
'yList0': [], |
|
'yList1': [], |
|
'yList2': [], |
|
'yList3': [] |
|
} |
|
|
|
const seriesList = [] |
|
// const legendList = ['在线民警', '异常民警', '在线辅警', '异常辅警'] |
|
const legendList = duty === '0' ? ['在线民警', '在线辅警'] : ['排班民警', '排班辅警'] |
|
|
|
let max = 0 |
|
let exitList = []; |
|
for(let i = 0; i < policeBarList.length;i++){ |
|
let item = policeBarList[i]; |
|
if(item[0].depid == window.TQDPCODE1){ |
|
exitList.unshift(item); |
|
} |
|
if(item[0].depid == window.TQDPCODE2){ |
|
exitList.unshift(item); |
|
} |
|
|
|
} |
|
// console.log('exitList====',exitList); |
|
policeBarList = policeBarList.slice(0, policeBarList.length > 7 ? 7 : policeBarList.length) |
|
if(exitList.length == 1){ |
|
policeBarList.push(exitList[0]); |
|
}else if(exitList.length == 2){ |
|
policeBarList.push(exitList[0]); |
|
policeBarList.push(exitList[1]); |
|
} |
|
// console.log('====policeBarList=111111==',policeBarList); |
|
if (policeBarList.length > 0) { |
|
for (let i = 0; i < policeBarList.length; i++) { |
|
const p = policeBarList[i]; |
|
const jhmj = p.find(x => x.plan === 'jh' && x.policetype === '1') |
|
const zgmj = p.find(x => x.plan === 'zg' && x.policetype === '1') |
|
const jhfj = p.find(x => x.plan === 'jh' && x.policetype === '2') |
|
const zgfj = p.find(x => x.plan === 'zg' && x.policetype === '2') |
|
|
|
const jhmjnum = jhmj && jhmj.num || 0 |
|
const zgmjnum = zgmj && zgmj.num || 0 |
|
const jhfjnum = jhfj && jhfj.num || 0 |
|
const zgfjnum = zgfj && zgfj.num || 0 |
|
|
|
// yList.yList0.push(zgmjnum) |
|
// yList.yList1.push(jhmjnum - zgmjnum) |
|
// yList.yList2.push(zgfjnum) |
|
// yList.yList3.push(jhfjnum - zgfjnum) |
|
|
|
if (duty === '0') { |
|
yList.yList0.push(zgmjnum) |
|
yList.yList1.push(zgfjnum) |
|
} else { |
|
yList.yList0.push(jhmjnum) |
|
yList.yList1.push(jhfjnum) |
|
} |
|
|
|
|
|
|
|
if (zgmjnum + zgfjnum > max) { |
|
max = zgmjnum + zgfjnum |
|
} |
|
|
|
if (jhmjnum + jhmjnum > max) { |
|
max = jhmjnum + jhmjnum |
|
} |
|
|
|
|
|
xList.push(p[0].deptshortname) |
|
} |
|
} |
|
|
|
max += 2 |
|
for (let i = 0; i < legendList.length; i++) { |
|
seriesList.push({ |
|
name: legendList[i], //这个是Bar图 |
|
type: "bar", |
|
stack: '警力', |
|
barWidth: 18, //柱图宽度 |
|
itemStyle: { |
|
color: colorList[i], |
|
borderWidth: 2, |
|
borderColor: `rgba(13, 26, 56, 0.8)` |
|
}, |
|
data: yList[`yList${i}`], |
|
label: { |
|
show: i === 1, |
|
position: 'top', |
|
// rotate: 90, |
|
textStyle: { |
|
color: '#ffffff' |
|
}, |
|
distance: 0, |
|
formatter: (params) => { |
|
const { dataIndex } = params |
|
return yList.yList0[dataIndex] + yList.yList1[dataIndex] |
|
} |
|
}, |
|
select: { |
|
barCategoryGap:'5%' |
|
}, |
|
}) |
|
} |
|
|
|
const options = { |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'none', |
|
}, |
|
// confine: true |
|
}, |
|
grid: { |
|
show: true, |
|
left: '1%', |
|
right: '0%', |
|
bottom: '5%', |
|
top: '20%', |
|
containLabel: true, |
|
borderColor: '#103255', |
|
borderWidth: 0.5 |
|
}, |
|
legend: { |
|
show: true, |
|
data: legendList, |
|
textStyle: { |
|
color: '#94c9f3' |
|
}, |
|
right: '2%' |
|
}, |
|
xAxis: [{ |
|
type: 'category', |
|
interval: 0, |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#0098e1', |
|
}, |
|
}, |
|
|
|
axisTick: { |
|
show: false, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
show: true, |
|
interval: 0, |
|
// rotate:10, |
|
textStyle: { |
|
color: '#ffffff' |
|
}, |
|
// formatter: (value) => { |
|
// let text = '' |
|
// if (value === deptName) { |
|
// text = `{bg|${value}}` |
|
// } else { |
|
// text = `{nobg|${value}}` |
|
// } |
|
// return text |
|
// }, |
|
// rich: { |
|
// bg: { |
|
// backgroundColor: '#1aa4fd', |
|
// padding: 3 |
|
// }, |
|
// nobg: { |
|
// padding: 3 |
|
// } |
|
|
|
// } |
|
}, |
|
data: xList |
|
|
|
},], |
|
yAxis: [{ |
|
type: 'value', |
|
show: true, |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#0098e1', |
|
}, |
|
}, |
|
axisTick: { |
|
show: false, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
show: true, |
|
textStyle: { |
|
color: '#96bfb9' |
|
} |
|
}, |
|
max |
|
}], |
|
series: seriesList |
|
}; |
|
return options |
|
} |
|
|
|
|