867 lines
27 KiB
JavaScript
867 lines
27 KiB
JavaScript
|
import { layuiObj,boroughGradeArr } from "./index.js";
|
|||
|
|
var inschool_echart = null;
|
|||
|
|
var outschool_echart = null;
|
|||
|
|
var postschool_echart=null;
|
|||
|
|
var roomschool_echart=null;
|
|||
|
|
var carschool_echart=null;
|
|||
|
|
var alarmschool_echart=null;
|
|||
|
|
var systemgradechart=null;
|
|||
|
|
|
|||
|
|
//告警
|
|||
|
|
function drawSystemGradeChart(){
|
|||
|
|
var option= {
|
|||
|
|
color: ['#e7b755', '#a16afe'],
|
|||
|
|
grid: { // 图表位置
|
|||
|
|
top: '40px',
|
|||
|
|
left: '50px',
|
|||
|
|
right: '25px',
|
|||
|
|
bottom: '60px'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['预警', '告警'],
|
|||
|
|
icon: 'circle',
|
|||
|
|
top: '10px',
|
|||
|
|
right: '20px',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff', // 文字颜色
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
},
|
|||
|
|
itemWidth: 12,
|
|||
|
|
itemHeight: 12
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
boundaryGap: false, // 不留白，从原点开始
|
|||
|
|
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
|
|||
|
|
axisLine: { // 坐标轴
|
|||
|
|
lineStyle: { // 坐标轴样式
|
|||
|
|
color: '#4d76b2',
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff', //更改坐标轴文字颜色
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: { // 网格线
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisTick: { // 刻度
|
|||
|
|
show: false // 控制刻度的显示与隐藏
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
interval: 100 /5, // 强制设置坐标轴分割间隔
|
|||
|
|
splitNumber: 5, // 坐标轴的分割段数
|
|||
|
|
max: 100,
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff', //更改坐标轴文字颜色
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: { // 坐标轴
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: { // 坐标轴样式
|
|||
|
|
color: '#ebebf7'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: { // 网格线
|
|||
|
|
show: true, // 显示隐藏 true false
|
|||
|
|
lineStyle: { // 坐标轴样式
|
|||
|
|
color: '#4d76b2'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: { // 刻度
|
|||
|
|
show: false // 控制刻度的显示与隐藏
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
name: '预警',
|
|||
|
|
data: [75, 78, 89, 66, 78, 85, 83, 84, 86, 89, 91, 90, 95, 98, 87, 74, 87, 77, 85, 79, 87, 82, 86, 74, 75, 76, 70, 80, 85, 80, 74],
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
symbol: 'none' // 点点样式
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '告警',
|
|||
|
|
data: [10, 8, 3, 4, 11, 16, 7, 7, 8, 9, 6, 2, 15, 7, 12, 15, 4, 3, 0, 0, 0, 12, 3, 8, 6, 0, 2, 10, 10, 11, 4],
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
symbol: 'none' // 点点样式
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
systemgradechart=echarts.init(document.getElementById('systemgradechart'));
|
|||
|
|
//使用制定的配置项和数据显示图表
|
|||
|
|
systemgradechart.setOption(option);
|
|||
|
|
}
|
|||
|
|
//校内
|
|||
|
|
function drawInschoolChart(data,schoolInfo){
|
|||
|
|
var option={
|
|||
|
|
color: ['#02b4fe', '#e7b554', '#6877f8', '#77a871', '#ee6666', '#73c0de',],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
top: '7%',
|
|||
|
|
right: '40px',
|
|||
|
|
icon: 'circle',
|
|||
|
|
width: '260px',
|
|||
|
|
orient: 'vertical', // 排列方式 horizontal（水平） vertical（垂直）
|
|||
|
|
itemHeight: 10, // 控制小圆点的大小
|
|||
|
|
itemWidth: 12,
|
|||
|
|
itemGap: 20,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff', // 文字颜色
|
|||
|
|
lineHeight: 16,
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
},
|
|||
|
|
formatter: (name) => {
|
|||
|
|
let total = 0 // 总数，用来计算百分比
|
|||
|
|
let number = 0 // 数字
|
|||
|
|
let pec = 0 // 百分比
|
|||
|
|
for (let i = 0; i < data.length; i++) {
|
|||
|
|
total += data[i].value
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < data.length; i++) {
|
|||
|
|
if (data[i].name == name) {
|
|||
|
|
number = data[i].value
|
|||
|
|
pec = (number / total * 100).toFixed(2)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return [
|
|||
|
|
`${name}`,
|
|||
|
|
`${number} (${pec})%`,
|
|||
|
|
].join("\n");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
title: { // 用title显示环中间固定的文字
|
|||
|
|
text: `170`, // \n 换行
|
|||
|
|
subtext: '校园数量', // 子标题
|
|||
|
|
top: '30%',
|
|||
|
|
left: '24%',
|
|||
|
|
textAlign: 'center', // 字体居中对齐
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 30,
|
|||
|
|
lineHeight: 20,
|
|||
|
|
fontWeight: 'normal',
|
|||
|
|
},
|
|||
|
|
subtextStyle: { // 子标题样式
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 14,
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['60%', '80%'],
|
|||
|
|
center: ['25%', '45%'], // 环形图中心点
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data: data
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
inschool_echart=echarts.init(document.getElementById('inschool_echart'));
|
|||
|
|
//使用制定的配置项和数据显示图表
|
|||
|
|
inschool_echart.setOption(option);
|
|||
|
|
updateInschoolInfo(schoolInfo)
|
|||
|
|
}
|
|||
|
|
//校内数据更新轮播
|
|||
|
|
function updateInschoolInfo(schoolInfo){
|
|||
|
|
var sealzone_number=0;
|
|||
|
|
var collision_number=0;
|
|||
|
|
var alarmpush_number=0;
|
|||
|
|
var ipclinked_number=0;
|
|||
|
|
var schoolbox_number=0;
|
|||
|
|
var kitchensystem_number=0;
|
|||
|
|
for(let i=0;i<schoolInfo.length;i++){
|
|||
|
|
if(schoolInfo[i]["sealzone"]==0){
|
|||
|
|
console.log(schoolInfo[i])
|
|||
|
|
}
|
|||
|
|
schoolInfo[i]["sealzone"]>0?sealzone_number++:sealzone_number;
|
|||
|
|
schoolInfo[i]["collision"]>0?collision_number++:collision_number;
|
|||
|
|
schoolInfo[i]["alarmpush"]>0?alarmpush_number++:alarmpush_number;
|
|||
|
|
schoolInfo[i]["ipclinked"]>0?ipclinked_number++:ipclinked_number;
|
|||
|
|
schoolInfo[i]["schoolbox"]>0?schoolbox_number++:schoolbox_number;
|
|||
|
|
schoolInfo[i]["kitchensystem"]>0?kitchensystem_number++:kitchensystem_number;
|
|||
|
|
}
|
|||
|
|
$(".sealzone_number").html(sealzone_number);
|
|||
|
|
$(".collision_number").html(collision_number);
|
|||
|
|
$(".alarmpush_number").html(alarmpush_number);
|
|||
|
|
$(".ipclinked_number").html(ipclinked_number);
|
|||
|
|
$(".schoolbox_number").html(schoolbox_number);
|
|||
|
|
$(".kitchensystem_number").html(kitchensystem_number);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//校外
|
|||
|
|
function drawOutSchoolChart(){
|
|||
|
|
var data=[
|
|||
|
|
{ value: 54, name: '省部重点人员预警' },
|
|||
|
|
{ value: 100, name: '涉校黑名单预警' },
|
|||
|
|
{ value: 300, name: '异常行为预警' },
|
|||
|
|
{ value: 200, name: '电子围栏预警' },
|
|||
|
|
];
|
|||
|
|
var option={
|
|||
|
|
color: ['#02b4fe', '#e7b554', '#6877f8', '#77a871', '#ee6666', '#73c0de',],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
top: '7%',
|
|||
|
|
right: '40px',
|
|||
|
|
icon: 'circle',
|
|||
|
|
width: '260px',
|
|||
|
|
orient: 'vertical', // 排列方式 horizontal（水平） vertical（垂直）
|
|||
|
|
itemHeight: 10, // 控制小圆点的大小
|
|||
|
|
itemWidth: 12,
|
|||
|
|
itemGap: 20,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff', // 文字颜色
|
|||
|
|
lineHeight: 16,
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
},
|
|||
|
|
formatter: (name) => {
|
|||
|
|
let total = 0 // 总数，用来计算百分比
|
|||
|
|
let number = 0 // 数字
|
|||
|
|
let pec = 0 // 百分比
|
|||
|
|
for (let i = 0; i < data.length; i++) {
|
|||
|
|
total += data[i].value
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < data.length; i++) {
|
|||
|
|
if (data[i].name == name) {
|
|||
|
|
number = data[i].value
|
|||
|
|
pec = (number / total * 100).toFixed(2)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return [
|
|||
|
|
`${name}`,
|
|||
|
|
`${number} (${pec})%`,
|
|||
|
|
].join("\n");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
title: { // 用title显示环中间固定的文字
|
|||
|
|
text: `654`, // \n 换行
|
|||
|
|
subtext: '校园周边预警', // 子标题
|
|||
|
|
top: '30%',
|
|||
|
|
left: '24%',
|
|||
|
|
textAlign: 'center', // 字体居中对齐
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 30,
|
|||
|
|
lineHeight: 20,
|
|||
|
|
fontWeight: 'normal',
|
|||
|
|
},
|
|||
|
|
subtextStyle: { // 子标题样式
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 14,
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['60%', '80%'],
|
|||
|
|
center: ['25%', '45%'], // 环形图中心点
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data: data
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
outschool_echart=echarts.init(document.getElementById('schoolTypeProp'));
|
|||
|
|
//使用制定的配置项和数据显示图表
|
|||
|
|
outschool_echart.setOption(option);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//校岗
|
|||
|
|
function drawPostSchoolChart(data,schoolInfo){
|
|||
|
|
var total=0;
|
|||
|
|
for(var i=0;i<data.length;i++){
|
|||
|
|
total+=data[i]["value"];
|
|||
|
|
}
|
|||
|
|
var option={
|
|||
|
|
color: ['#02b4fe', '#e7b554', '#6877f8', '#77a871', '#ee6666', '#73c0de',],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
top: '7%',
|
|||
|
|
right: '40px',
|
|||
|
|
icon: 'circle',
|
|||
|
|
width: '260px',
|
|||
|
|
orient: 'vertical', // 排列方式 horizontal（水平） vertical（垂直）
|
|||
|
|
itemHeight: 10, // 控制小圆点的大小
|
|||
|
|
itemWidth: 12,
|
|||
|
|
itemGap: 20,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff', // 文字颜色
|
|||
|
|
lineHeight: 16,
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
},
|
|||
|
|
formatter: (name) => {
|
|||
|
|
let total = 0 // 总数，用来计算百分比
|
|||
|
|
let number = 0 // 数字
|
|||
|
|
let pec = 0 // 百分比
|
|||
|
|
for (let i = 0; i < data.length; i++) {
|
|||
|
|
total += data[i].value
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < data.length; i++) {
|
|||
|
|
if (data[i].name == name) {
|
|||
|
|
number = data[i].value
|
|||
|
|
pec = (number / total * 100).toFixed(2)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return [
|
|||
|
|
`${name}`,
|
|||
|
|
`${number} (${pec})%`,
|
|||
|
|
].join("\n");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
title: { // 用title显示环中间固定的文字
|
|||
|
|
text:total, // \n 换行
|
|||
|
|
subtext: '校岗人员', // 子标题
|
|||
|
|
top: '30%',
|
|||
|
|
left: '24%',
|
|||
|
|
textAlign: 'center', // 字体居中对齐
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 30,
|
|||
|
|
lineHeight: 20,
|
|||
|
|
fontWeight: 'normal',
|
|||
|
|
},
|
|||
|
|
subtextStyle: { // 子标题样式
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 14,
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['60%', '80%'],
|
|||
|
|
center: ['25%', '45%'], // 环形图中心点
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data: data
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
postschool_echart=echarts.init(document.getElementById('postschool_echart'));
|
|||
|
|
//使用制定的配置项和数据显示图表
|
|||
|
|
postschool_echart.setOption(option);
|
|||
|
|
updatePostSchoolInfo(schoolInfo);
|
|||
|
|
}
|
|||
|
|
//校岗数据更新轮播
|
|||
|
|
function updatePostSchoolInfo(schoolInfo){
|
|||
|
|
var police_percent_number=0;
|
|||
|
|
var guarder_percent_number=0;
|
|||
|
|
var staff_percent_number=0;
|
|||
|
|
var protector_percent_number=0;
|
|||
|
|
for(var i=0;i<schoolInfo.length;i++){
|
|||
|
|
police_percent_number+=schoolInfo[i]["police_percent"];//警
|
|||
|
|
guarder_percent_number+=schoolInfo[i]["guarder_percent"];//保安
|
|||
|
|
staff_percent_number+=schoolInfo[i]["staff_percent"];//行政值班
|
|||
|
|
protector_percent_number+=schoolInfo[i]["protector_percent"];
|
|||
|
|
}
|
|||
|
|
$(".police_percent_number").html(police_percent_number);
|
|||
|
|
$(".guarder_percent_number").html(guarder_percent_number);
|
|||
|
|
$(".staff_percent_number").html(staff_percent_number);
|
|||
|
|
$(".protector_percent_number").html(protector_percent_number);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//校餐
|
|||
|
|
function drawRoomSchoolChart(){
|
|||
|
|
var data=[
|
|||
|
|
{ value: 50, name: '未戴口罩' },
|
|||
|
|
{ value: 30, name: '未戴帽子' },
|
|||
|
|
{ value: 8, name: '陌生人闯入' },
|
|||
|
|
];
|
|||
|
|
var option={
|
|||
|
|
color: ['#02b4fe', '#e7b554', '#6877f8', '#77a871', '#ee6666', '#73c0de',],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
top: '12%',
|
|||
|
|
right: '40px',
|
|||
|
|
icon: 'circle',
|
|||
|
|
width: '260px',
|
|||
|
|
orient: 'vertical', // 排列方式 horizontal（水平） vertical（垂直）
|
|||
|
|
itemHeight: 10, // 控制小圆点的大小
|
|||
|
|
itemWidth: 12,
|
|||
|
|
itemGap: 20,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff', // 文字颜色
|
|||
|
|
lineHeight: 16,
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
},
|
|||
|
|
formatter: (name) => {
|
|||
|
|
let total = 0 // 总数，用来计算百分比
|
|||
|
|
let number = 0 // 数字
|
|||
|
|
let pec = 0 // 百分比
|
|||
|
|
for (let i = 0; i < data.length; i++) {
|
|||
|
|
total += data[i].value
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < data.length; i++) {
|
|||
|
|
if (data[i].name == name) {
|
|||
|
|
number = data[i].value
|
|||
|
|
pec = (number / total * 100).toFixed(2)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return [
|
|||
|
|
`${name}`,
|
|||
|
|
`${number} (${pec})%`,
|
|||
|
|
].join("\n");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
title: { // 用title显示环中间固定的文字
|
|||
|
|
text: `88`, // \n 换行
|
|||
|
|
subtext: '预警总数', // 子标题
|
|||
|
|
top: '30%',
|
|||
|
|
left: '24%',
|
|||
|
|
textAlign: 'center', // 字体居中对齐
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 30,
|
|||
|
|
lineHeight: 20,
|
|||
|
|
fontWeight: 'normal',
|
|||
|
|
},
|
|||
|
|
subtextStyle: { // 子标题样式
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 14,
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['60%', '80%'],
|
|||
|
|
center: ['25%', '45%'], // 环形图中心点
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data: data
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
roomschool_echart=echarts.init(document.getElementById('roomschool_echart'));
|
|||
|
|
//使用制定的配置项和数据显示图表
|
|||
|
|
roomschool_echart.setOption(option);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//校车
|
|||
|
|
function drawCarSchoolChart(data,schoolInfo){
|
|||
|
|
var option={
|
|||
|
|
color: ['#02b4fe', '#e7b554', '#6877f8', '#77a871', '#ee6666', '#73c0de',],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
top: '12%',
|
|||
|
|
right: '40px',
|
|||
|
|
icon: 'circle',
|
|||
|
|
width: '260px',
|
|||
|
|
orient: 'vertical', // 排列方式 horizontal（水平） vertical（垂直）
|
|||
|
|
itemHeight: 10, // 控制小圆点的大小
|
|||
|
|
itemWidth: 12,
|
|||
|
|
itemGap: 20,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff', // 文字颜色
|
|||
|
|
lineHeight: 16,
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
},
|
|||
|
|
formatter: (name) => {
|
|||
|
|
let total = 0 // 总数，用来计算百分比
|
|||
|
|
let number = 0 // 数字
|
|||
|
|
let pec = 0 // 百分比
|
|||
|
|
for (let i = 0; i < data.length; i++) {
|
|||
|
|
total += data[i].value
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < data.length; i++) {
|
|||
|
|
if (data[i].name == name) {
|
|||
|
|
number = data[i].value
|
|||
|
|
pec = (number / total * 100).toFixed(2)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return [
|
|||
|
|
`${name}`,
|
|||
|
|
`${number} (${pec})%`,
|
|||
|
|
].join("\n");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
title: { // 用title显示环中间固定的文字
|
|||
|
|
text: `88`, // \n 换行
|
|||
|
|
subtext: '预警总数', // 子标题
|
|||
|
|
top: '30%',
|
|||
|
|
left: '24%',
|
|||
|
|
textAlign: 'center', // 字体居中对齐
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 30,
|
|||
|
|
lineHeight: 20,
|
|||
|
|
fontWeight: 'normal',
|
|||
|
|
},
|
|||
|
|
subtextStyle: { // 子标题样式
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 14,
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['60%', '80%'],
|
|||
|
|
center: ['25%', '45%'], // 环形图中心点
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data: data
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
carschool_echart=echarts.init(document.getElementById('carschool_echart'));
|
|||
|
|
//使用制定的配置项和数据显示图表
|
|||
|
|
carschool_echart.setOption(option);
|
|||
|
|
updateCarSchoolInfo(schoolInfo)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
function updateCarSchoolInfo(schoolInfo){
|
|||
|
|
var schoolbus_number=0;
|
|||
|
|
var busdrivers_number=0;
|
|||
|
|
var busteachers_number=0;
|
|||
|
|
for(var i=0;i<schoolInfo.length;i++){
|
|||
|
|
schoolbus_number+=schoolInfo[i]["schoolbus"];//校车总数
|
|||
|
|
busdrivers_number+=schoolInfo[i]["busdrivers"];//校车司机数
|
|||
|
|
busteachers_number+=schoolInfo[i]["busteachers"];//随车教职工数
|
|||
|
|
}
|
|||
|
|
$(".schoolbus_number").html(schoolbus_number);
|
|||
|
|
$(".busdrivers_number").html(busdrivers_number);
|
|||
|
|
$(".busteachers_number").html(busteachers_number);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
//告警
|
|||
|
|
function drawAlarmSchoolChart(){
|
|||
|
|
var data=[
|
|||
|
|
{ value: 50, name: '一键报警' },
|
|||
|
|
{ value: 10, name: '人员报警' },
|
|||
|
|
{ value: 3, name: '隐患排除' },
|
|||
|
|
{ value: 2, name: '演练' },
|
|||
|
|
];
|
|||
|
|
var option={
|
|||
|
|
color: ['#02b4fe', '#e7b554', '#6877f8', '#77a871', '#ee6666', '#73c0de',],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
top: '12%',
|
|||
|
|
right: '40px',
|
|||
|
|
icon: 'circle',
|
|||
|
|
width: '260px',
|
|||
|
|
orient: 'vertical', // 排列方式 horizontal（水平） vertical（垂直）
|
|||
|
|
itemHeight: 10, // 控制小圆点的大小
|
|||
|
|
itemWidth: 12,
|
|||
|
|
itemGap: 20,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff', // 文字颜色
|
|||
|
|
lineHeight: 16,
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
},
|
|||
|
|
formatter: (name) => {
|
|||
|
|
let total = 0 // 总数，用来计算百分比
|
|||
|
|
let number = 0 // 数字
|
|||
|
|
let pec = 0 // 百分比
|
|||
|
|
for (let i = 0; i < data.length; i++) {
|
|||
|
|
total += data[i].value
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < data.length; i++) {
|
|||
|
|
if (data[i].name == name) {
|
|||
|
|
number = data[i].value
|
|||
|
|
pec = (number / total * 100).toFixed(2)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return [
|
|||
|
|
`${name}`,
|
|||
|
|
`${number} (${pec})%`,
|
|||
|
|
].join("\n");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
title: { // 用title显示环中间固定的文字
|
|||
|
|
text: `65`, // \n 换行
|
|||
|
|
subtext: '告警总数', // 子标题
|
|||
|
|
top: '30%',
|
|||
|
|
left: '24%',
|
|||
|
|
textAlign: 'center', // 字体居中对齐
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 30,
|
|||
|
|
lineHeight: 20,
|
|||
|
|
fontWeight: 'normal',
|
|||
|
|
},
|
|||
|
|
subtextStyle: { // 子标题样式
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 14,
|
|||
|
|
fontFamily: 'myRegular'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['60%', '80%'],
|
|||
|
|
center: ['25%', '45%'], // 环形图中心点
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data: data
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
alarmschool_echart=echarts.init(document.getElementById('alarmschool_echart'));
|
|||
|
|
//使用制定的配置项和数据显示图表
|
|||
|
|
alarmschool_echart.setOption(option);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initCarschool(){
|
|||
|
|
drawOutSchoolChart();
|
|||
|
|
drawRoomSchoolChart();
|
|||
|
|
drawAlarmSchoolChart();
|
|||
|
|
drawSystemGradeChart();
|
|||
|
|
|
|||
|
|
|
|||
|
|
brigadeSchoolChart();
|
|||
|
|
brigadePostSchoolChart();
|
|||
|
|
brigadeCarSchoolChart();
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function brigadeSchoolChart(){
|
|||
|
|
var inschoolData=[
|
|||
|
|
{ value: 0, name:'中学'},
|
|||
|
|
{ value: 0, name:'小学'},
|
|||
|
|
{ value: 0, name:'幼儿园'},
|
|||
|
|
];
|
|||
|
|
var schoolInfoArr=[];
|
|||
|
|
boroughGradeArr.forEach(item=>{
|
|||
|
|
var schoolInfo=item.schoolInfo;
|
|||
|
|
for(var i=0;i<schoolInfo.length;i++){
|
|||
|
|
var type=schoolInfo[i]["type"];
|
|||
|
|
for(var j=0;j<inschoolData.length;j++){
|
|||
|
|
if(type==inschoolData[j]["name"]){
|
|||
|
|
inschoolData[j]["value"]++;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
schoolInfoArr.push(schoolInfo[i]);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
drawInschoolChart(inschoolData,schoolInfoArr);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function boroughSchoolChart(borough){
|
|||
|
|
var inschoolData=[
|
|||
|
|
{ value: 0, name: '中学' },
|
|||
|
|
{ value: 0, name: '小学' },
|
|||
|
|
{ value: 0, name: '幼儿园' },
|
|||
|
|
];
|
|||
|
|
var schoolInfoArr=[];
|
|||
|
|
boroughGradeArr.forEach(item=>{
|
|||
|
|
if(borough==item.borough){
|
|||
|
|
var schoolInfo=item.schoolInfo;
|
|||
|
|
for(var i=0;i<schoolInfo.length;i++){
|
|||
|
|
var type=schoolInfo[i]["type"];
|
|||
|
|
for(var j=0;j<inschoolData.length;j++){
|
|||
|
|
if(type==inschoolData[j]["name"]){
|
|||
|
|
inschoolData[j]["value"]++;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
schoolInfoArr.push(schoolInfo[i]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
drawInschoolChart(inschoolData,schoolInfoArr);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function brigadePostSchoolChart(){
|
|||
|
|
var inschoolData=[
|
|||
|
|
{ value: 0, name: '护校警力'},
|
|||
|
|
{ value: 0, name: '专职保安'},
|
|||
|
|
{ value: 0, name: '行政值班' },
|
|||
|
|
{ value: 200, name: '校内志愿者'},
|
|||
|
|
];
|
|||
|
|
var schoolInfoArr=[];
|
|||
|
|
boroughGradeArr.forEach(item=>{
|
|||
|
|
var schoolInfo=item.schoolInfo;
|
|||
|
|
for(var i=0;i<schoolInfo.length;i++){
|
|||
|
|
var policesshould=schoolInfo[i]["policesshould"];
|
|||
|
|
var guardershould=schoolInfo[i]["guardershould"];
|
|||
|
|
var staffshould=schoolInfo[i]["staffshould"];
|
|||
|
|
inschoolData[0]["value"]+=policesshould;
|
|||
|
|
inschoolData[1]["value"]+=guardershould;
|
|||
|
|
inschoolData[2]["value"]+=staffshould;
|
|||
|
|
schoolInfoArr.push(schoolInfo[i]);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
drawPostSchoolChart(inschoolData,schoolInfoArr);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function boroughPostSchoolChart(borough){
|
|||
|
|
var inschoolData=[
|
|||
|
|
{ value: 0, name: '护校警力'},
|
|||
|
|
{ value: 0, name: '专职保安'},
|
|||
|
|
{ value: 0, name: '行政值班' },
|
|||
|
|
{ value: 2, name: '校内志愿者',title:'schoolvolunteer' },
|
|||
|
|
];
|
|||
|
|
var schoolInfoArr=[];
|
|||
|
|
boroughGradeArr.forEach(item=>{
|
|||
|
|
if(borough==item.borough){
|
|||
|
|
var schoolInfo=item.schoolInfo;
|
|||
|
|
for(var i=0;i<schoolInfo.length;i++){
|
|||
|
|
var policesshould=schoolInfo[i]["policesshould"];
|
|||
|
|
var guardershould=schoolInfo[i]["guardershould"];
|
|||
|
|
var staffshould=schoolInfo[i]["staffshould"];
|
|||
|
|
inschoolData[0]["value"]+=policesshould;
|
|||
|
|
inschoolData[1]["value"]+=guardershould;
|
|||
|
|
inschoolData[2]["value"]+=staffshould;
|
|||
|
|
schoolInfoArr.push(schoolInfo[i]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
drawPostSchoolChart(inschoolData,schoolInfoArr);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function brigadeCarSchoolChart(){
|
|||
|
|
var inschoolData=[
|
|||
|
|
{ value: 50, name: '超速' },
|
|||
|
|
{ value: 30, name: '越界' },
|
|||
|
|
{ value: 8, name: '疲劳驾驶' },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
var schoolInfoArr=[];
|
|||
|
|
boroughGradeArr.forEach(item=>{
|
|||
|
|
var schoolInfo=item.schoolInfo;
|
|||
|
|
for(var i=0;i<schoolInfo.length;i++){
|
|||
|
|
schoolInfoArr.push(schoolInfo[i]);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
drawCarSchoolChart(inschoolData,schoolInfoArr);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function boroughCarSchoolChart(borough){
|
|||
|
|
var inschoolData=[
|
|||
|
|
{ value: 50, name: '超速' },
|
|||
|
|
{ value: 30, name: '越界' },
|
|||
|
|
{ value: 8, name: '疲劳驾驶' },
|
|||
|
|
];
|
|||
|
|
var schoolInfoArr=[];
|
|||
|
|
boroughGradeArr.forEach(item=>{
|
|||
|
|
if(borough==item.borough){
|
|||
|
|
var schoolInfo=item.schoolInfo;
|
|||
|
|
for(var i=0;i<schoolInfo.length;i++){
|
|||
|
|
schoolInfoArr.push(schoolInfo[i]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
drawCarSchoolChart(inschoolData,schoolInfoArr);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$(".mainContentR_t_box>ul>li").on('click',function(){
|
|||
|
|
var index=$(this).attr("index");
|
|||
|
|
updateReload(index)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
function updateReload(index){
|
|||
|
|
updateBackground(index);
|
|||
|
|
if(layuiObj["ins"].timer){
|
|||
|
|
clearInterval(layuiObj["ins"].timer);
|
|||
|
|
}
|
|||
|
|
reload(index);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function reload(index){
|
|||
|
|
$("#carousel .layui-this").removeClass();
|
|||
|
|
var options=layuiObj["ins"].config;
|
|||
|
|
options["index"]=parseInt(index);
|
|||
|
|
options["anim"]='default';
|
|||
|
|
layuiObj["ins"].reload(options);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateBackground(index){
|
|||
|
|
resizeChart();
|
|||
|
|
var index=parseInt(index)+1;
|
|||
|
|
$(".mainContentR_t_box>ul>li").removeClass();
|
|||
|
|
$(".mainContentR_t_box>ul>li>img").remove();
|
|||
|
|
$(".mainContentR_t_box>ul>li:nth-child("+index+")").addClass("bg").addClass("selectColor")
|
|||
|
|
$(".mainContentR_t_box>ul>li:nth-child("+index+")").append("<img src='./pages/index/image/pointer.png'>");
|
|||
|
|
updateMainContentR_t_title(index);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateMainContentR_t_title(index){
|
|||
|
|
var text="---"
|
|||
|
|
switch(index){
|
|||
|
|
case 1:
|
|||
|
|
text+="校内";
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
text+="校外";
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
text+="校岗";
|
|||
|
|
break;
|
|||
|
|
case 4:
|
|||
|
|
text+="校餐";
|
|||
|
|
break;
|
|||
|
|
case 5:
|
|||
|
|
text+="校车";
|
|||
|
|
break;
|
|||
|
|
case 6:
|
|||
|
|
text+="告警";
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
$(".mainContentR_t_title").html(text);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function resizeChart(){
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
if(inschool_echart!=null) inschool_echart.resize();
|
|||
|
|
if(outschool_echart!=null) outschool_echart.resize();
|
|||
|
|
if(postschool_echart!=null) postschool_echart.resize();
|
|||
|
|
if(roomschool_echart!=null) roomschool_echart.resize();
|
|||
|
|
if(carschool_echart!=null) carschool_echart.resize();
|
|||
|
|
if(alarmschool_echart!=null) alarmschool_echart.resize();
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//多图时自适应
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
if(systemgradechart!=null){
|
|||
|
|
systemgradechart.resize();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
export {
|
|||
|
|
initCarschool,
|
|||
|
|
updateBackground,
|
|||
|
|
boroughSchoolChart,
|
|||
|
|
brigadeSchoolChart,
|
|||
|
|
brigadePostSchoolChart,
|
|||
|
|
boroughPostSchoolChart,
|
|||
|
|
brigadeCarSchoolChart,
|
|||
|
|
boroughCarSchoolChart
|
|||
|
|
}
|