|
|
|
@ -39,7 +39,7 @@ |
|
|
|
><span style="color: rgba(0, 0, 0, 1); font-size: 16px; font-weight: 700">{{ |
|
|
|
item.title |
|
|
|
}}</span> |
|
|
|
<span style="margin-left: 6px; font-size: 13px"> 今日处理 / 总数</span> |
|
|
|
<span style="margin-left: 6px; font-size: 12px"> 今日处理 / 总数</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -50,7 +50,7 @@ |
|
|
|
<div class="box-center-item-top"> |
|
|
|
<img style="display: flex; position: absolute; top: 5px" :src="priority" /> |
|
|
|
<div class="box-center-item-top-title"> |
|
|
|
<span style="font-size: 18px">优先级</span> |
|
|
|
<span style="font-size: 20px">优先级</span> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
@ -72,7 +72,7 @@ |
|
|
|
<div class="box-center-item-top"> |
|
|
|
<img style="display: flex; position: absolute; top: 5px" :src="priority" /> |
|
|
|
<div class="box-center-item-top-title"> |
|
|
|
<span style="font-size: 18px">处理进度</span> |
|
|
|
<span style="font-size: 20px">处理进度</span> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
@ -96,7 +96,7 @@ |
|
|
|
<div class="box-bottom-top"> |
|
|
|
<img style="display: flex; position: absolute; top: 5px" :src="priority" /> |
|
|
|
<div class="box-bottom-top-title"> |
|
|
|
<span style="font-size: 18px">处理进度</span> |
|
|
|
<span style="font-size: 20px">处理进度</span> |
|
|
|
</div> |
|
|
|
<div class="box-bottom-top-unit"> ( 近30天 ) </div> |
|
|
|
</div> |
|
|
|
@ -150,12 +150,21 @@ |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
if (res.msg === 'success') { |
|
|
|
res.data.forEach((item: any) => { |
|
|
|
// 从小 到 大 日期排序 |
|
|
|
const data = res.data.sort((a: any, b: any) => { |
|
|
|
// 将 dayData 转换为日期对象 |
|
|
|
const dateA: any = new Date(a.createTime); |
|
|
|
const dateB: any = new Date(b.createTime); |
|
|
|
// 返回比较结果，升序排列 |
|
|
|
return dateA - dateB; |
|
|
|
}); |
|
|
|
data.forEach((item: any) => { |
|
|
|
energyAlarm.push(item.alarmEnergyConsumptionNum); |
|
|
|
wgAlarm.push(item.alarmGatewayNum); |
|
|
|
equipmentAlarm.push(item.alarmEquipmentNum); |
|
|
|
total.push(0); |
|
|
|
dayData.push(item.createTime); |
|
|
|
item.createTime = item.createTime.substring(5, 10); |
|
|
|
dayData.push(item.createTime.replace('-', '/')); |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
@ -217,11 +226,13 @@ |
|
|
|
left: 'right', // 将图例居中显示 |
|
|
|
textStyle: { |
|
|
|
color: 'rgb(89, 89, 89)', |
|
|
|
fontSize: '14', |
|
|
|
fontSize: 14, |
|
|
|
fontWeight: 'normal', |
|
|
|
}, // 注意这里的颜色值要用引号括起来 |
|
|
|
data: ['设备告警', '网关告警', '能源告警'], |
|
|
|
itemGap: 30, // 这里可以调整图例项之间的间距，单位为像素 |
|
|
|
itemWidth: 16, //图例宽度 |
|
|
|
itemHeight: 16, //图例高度 |
|
|
|
}, |
|
|
|
], |
|
|
|
calculable: true, |
|
|
|
@ -240,7 +251,7 @@ |
|
|
|
data: dayData, |
|
|
|
axisLabel: { |
|
|
|
show: true, // 显示所有刻度值 |
|
|
|
interval: 1, // 显示所有刻度，不跳过 |
|
|
|
// interval: 1, // 显示所有刻度，不跳过 |
|
|
|
// rotate: 45, // 可选：如果标签过长，可以旋转标签以避免重叠 |
|
|
|
}, |
|
|
|
}, |
|
|
|
@ -248,9 +259,14 @@ |
|
|
|
yAxis: [ |
|
|
|
{ |
|
|
|
type: 'value', |
|
|
|
shwo: false, |
|
|
|
show: true, |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#dae7ff', // 设置分隔线颜色 |
|
|
|
width: 1, // 设置分隔线宽度 |
|
|
|
type: 'dashed', // 设置分隔线类型，可选 'solid'、'dashed' 或 'dotted' |
|
|
|
}, |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: false, |
|
|
|
@ -262,7 +278,7 @@ |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
show: false, // 不显示刻度值 |
|
|
|
show: true, // 不显示刻度值 |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
@ -409,7 +425,7 @@ |
|
|
|
// icon: 'circle', |
|
|
|
itemWidth: 16, |
|
|
|
itemHeight: 16, |
|
|
|
itemGap: 16, |
|
|
|
itemGap: 30, |
|
|
|
textStyle: { |
|
|
|
fontSize: 14, |
|
|
|
}, |
|
|
|
@ -432,7 +448,8 @@ |
|
|
|
fontWeight: 'bold', |
|
|
|
}, |
|
|
|
formatter: function (parms: any) { |
|
|
|
return '[ ' + parms.data.name + ' ] : ' + parms.data.value; |
|
|
|
// return '[ ' + parms.data.name + ' ] : ' + parms.data.value; |
|
|
|
return parms.data.name + ' : ' + parms.data.value; |
|
|
|
}, |
|
|
|
}, |
|
|
|
// emphasis: { |
|
|
|
@ -521,7 +538,7 @@ |
|
|
|
orient: 'vertical', |
|
|
|
itemWidth: 16, |
|
|
|
itemHeight: 16, |
|
|
|
itemGap: 16, |
|
|
|
itemGap: 30, |
|
|
|
textStyle: { |
|
|
|
fontSize: 14, |
|
|
|
}, |
|
|
|
@ -544,7 +561,8 @@ |
|
|
|
fontWeight: 'bold', |
|
|
|
}, |
|
|
|
formatter: function (parms: any) { |
|
|
|
return '[ ' + parms.data.name + ' ] : ' + parms.data.value; |
|
|
|
// return '[ ' + parms.data.name + ' ] : ' + parms.data.value; |
|
|
|
return parms.data.name + ' : ' + parms.data.value; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
@ -616,7 +634,7 @@ |
|
|
|
// border: 1px solid red; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 12px; |
|
|
|
gap: 20px; |
|
|
|
background-color: #f0f1f4; |
|
|
|
box-sizing: border-box; |
|
|
|
.box-top { |
|
|
|
@ -625,11 +643,11 @@ |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
gap: 12px; |
|
|
|
gap: 20px; |
|
|
|
.box-top-item { |
|
|
|
height: 100%; |
|
|
|
flex: 1; |
|
|
|
gap: 12px; |
|
|
|
gap: 20px; |
|
|
|
background-color: white; |
|
|
|
border-radius: 4px; |
|
|
|
.item-box { |
|
|
|
@ -657,10 +675,10 @@ |
|
|
|
} |
|
|
|
.iem-box-left-number { |
|
|
|
color: #000000; |
|
|
|
font-weight: 700; |
|
|
|
font-weight: 400; |
|
|
|
font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif; |
|
|
|
font-style: normal; |
|
|
|
font-size: 30px; |
|
|
|
font-size: 40px; |
|
|
|
} |
|
|
|
} |
|
|
|
.item-box-right { |
|
|
|
@ -674,7 +692,7 @@ |
|
|
|
flex: 4; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
gap: 12px; |
|
|
|
gap: 20px; |
|
|
|
.box-center-item { |
|
|
|
flex: 1; |
|
|
|
height: 100%; |
|
|
|
|
zhaohy
3 months ago