Browse Source

大屏设备管理修改

master
xuhuajiao 12 hours ago
parent
commit
89123fae54
  1. 10
      src/api/storeManage/deviceManage/device.js
  2. 66
      src/views/environmentalScreen/index.vue
  3. 47
      src/views/environmentalScreen/module/catePie.vue
  4. 37
      src/views/storeManage/deviceManage/module/deviceDetail.vue
  5. 2
      src/views/system/archiveStatistics/mixins/statistics.js

10
src/api/storeManage/deviceManage/device.js

@ -163,4 +163,12 @@ export function FetchPingIP(params) {
})
}
export default { add, edit, del, getSupplier, getDeviceType, getDeviceById, getDesecabinetById, getRotarycabinetById, getDeviceList, FetchIsOnline, FetchInBorrowByQuCol, unbind, FetchCallExternalOpenCol, FetchCallExternalResetCol, FetchCallExternalVent, FetchCallExternalStopMove, FetchPingIP }
// 接口判断手持机状态
export function FetchRFIDReadStatus(params) {
return request({
url: 'api/device/getRFIDReadStatus' + '?' + qs.stringify(params, { indices: false }),
method: 'get'
})
}
export default { add, edit, del, getSupplier, getDeviceType, getDeviceById, getDesecabinetById, getRotarycabinetById, getDeviceList, FetchIsOnline, FetchInBorrowByQuCol, unbind, FetchCallExternalOpenCol, FetchCallExternalResetCol, FetchCallExternalVent, FetchCallExternalStopMove, FetchPingIP, FetchRFIDReadStatus }

66
src/views/environmentalScreen/index.vue

@ -121,10 +121,9 @@
<iframe id="myIframe" ref="myIframe" name="iframeMap" class="iframe_box" src="/web3D/index.html" frameborder="0" scrolling="no" style=" margin: 0 auto; display: block;" />
</div>
<!-- 重构告警列表 - 分为两行 -->
<div v-if="hasValidData" class="env-alarm-container">
<!-- 第一行温湿度 -->
<ul class="env-alarm-list env-alarm-list-first">
<div class="env-alarm-container">
<!-- 温湿度 -->
<ul v-if="hasValidData" class="env-alarm-list env-alarm-list-first">
<li>
<svg-icon icon-class="temperature" class-name="msg-list-svg" />
<div>
@ -332,7 +331,7 @@
<svg-icon icon-class="alerm" class-name="warehouse-svg" />当日告警统计
</h3>
<div class="chart-wrapper" style="height: calc(100% - 40px);">
<catePie :cate-data="alarmChartData" />
<catePie :cate-data="alarmChartData" :refreshtime="refreshtime" />
</div>
</div>
</div>
@ -498,9 +497,9 @@ export default {
}, 1000)
this.getDevice()
this.getTodayHikAlarmLog()
this.alarmRefreshTimer = setInterval(() => {
this.getTodayHikAlarmLog()
}, 300000)
// this.alarmRefreshTimer = setInterval(() => {
// this.getTodayHikAlarmLog()
// }, 100000)
//
window.getIframeLoading = this.getIframeLoading
// this.allDisplayConfigData = allDeviceData
@ -530,7 +529,9 @@ export default {
this.echartsTimer = setInterval(() => {
this.lendData = []
this.typeData = []
this.alarmChartData = []
this.getBorrowerNumSta()
this.getTodayHikAlarmLog()
}, this.refreshtime)
this.getVideoUrl()
},
@ -543,14 +544,13 @@ export default {
this.webRtcServer.disconnect()
this.webRtcServer = null
}
if (this.alarmRefreshTimer) clearInterval(this.alarmRefreshTimer)
// if (this.alarmRefreshTimer) clearInterval(this.alarmRefreshTimer)
},
methods: {
//
getTodayHikAlarmLog() {
getTodayHikAlarmLog().then(data => {
console.log('今日海康告警日志', data)
this.alarmStatisticsRaw = data || []
this.alarmStatisticsRaw = this.transformAlarmData(data || {})
this.formatAlarmChartData()
}).catch(error => {
console.error('获取告警统计数据失败:', error)
@ -558,33 +558,49 @@ export default {
this.alarmChartData = []
})
},
//
transformAlarmData(alarmObj) {
const fieldMap = [
{ key: 'accessAlarm', name: '门禁告警' },
{ key: 'firefightingAlarm', name: '消防告警' },
{ key: 'equipmentAlarm', name: '设备告警' },
{ key: 'environmentAlarm', name: '环境告警' }
]
return fieldMap.map(item => ({
alarmValue: item.name,
num: alarmObj[item.key] || 0
}))
},
formatAlarmChartData() {
if (!this.alarmStatisticsRaw.length) {
const allZero = this.alarmStatisticsRaw.every(item => item.num === 0)
if (allZero) {
this.alarmChartData = [{ name: '无告警', value: 1, itemStyle: { color: '#666666' }}]
return
}
//
const colorList = ['#F65164', '#339CFF', '#FFB800', '#1CADAB', '#9B6BCC', '#FF7D00']
const alarmColorMap = {
'设备断线': '#F65164',
'红外线报警': '#339CFF',
'消防报警': '#FFB800',
'漏水报警': '#1CADAB',
'PM2.5超标': '#9B6BCC',
'甲醛超标': '#FF7D00'
'门禁告警': '#F65164',
'消防告警': '#FFB800',
'设备告警': '#339CFF',
'环境告警': '#1CADAB'
}
//
const colorList = ['#F65164', '#339CFF', '#FFB800', '#1CADAB', '#9B6BCC', '#FF7D00']
this.alarmChartData = this.alarmStatisticsRaw.map((item, index) => {
const alarmName = item.alarmValue || '未知告警'
// 使使
const color = alarmColorMap[alarmName] || colorList[index % colorList.length] || '#666666'
return {
name: alarmName,
value: item.num || 0,
value: item.num || 0, // 0
itemStyle: {
color: color
}
},
// 0
...(item.num === 0 ? { itemStyle: { color: color, opacity: 0.5 }} : {})
}
})
},
@ -1533,7 +1549,7 @@ export default {
.card-panel-text {
line-height: 30px;
color: rgba(0, 0, 0, 0.45);
font-size: 24px;
font-size: 22px;
margin-bottom: 11px;
& span {
-webkit-background-clip: text;

47
src/views/environmentalScreen/module/catePie.vue

@ -22,6 +22,10 @@ export default {
height: {
type: String,
default: '100%'
},
refreshtime: {
type: Number,
default: null //
}
},
data() {
@ -41,7 +45,8 @@ export default {
}
},
mounted() {
this.initChart()
// this.initChart()
this.refreshEchart()
},
beforeDestroy() {
if (this.chart) {
@ -50,6 +55,15 @@ export default {
}
},
methods: {
refreshEchart() {
if (this.refreshtime) {
this.timer = setInterval(() => {
this.initChart()
}, this.refreshtime)
} else {
this.initChart()
}
},
initChart() {
if (this.chart) return
const chartDom = this.$refs.chartRef
@ -67,11 +81,18 @@ export default {
? this.cateData
: [{ name: '无告警数据', value: 1, itemStyle: { color: '#666666' }}]
// 00
const processedData = chartData.map(item => ({
...item,
value: item.value === 0 ? 0 : item.value
}))
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'item',
textStyle: { fontSize: 12 },
// Tooltip ++
formatter: '{b}: {c} 次 ({d}%)'
},
legend: {
@ -102,13 +123,22 @@ export default {
labelLine: {
show: true,
length: 10,
length2: 20
length2: 20,
// 0线
lineStyle: (params) => ({
color: params.data.value < 0.1 ? 'rgba(255,255,255,0.3)' : '#ffffff'
})
},
label: {
show: true,
fontSize: 11,
formatter: '{d}%',
color: '#ffffff' //
color: '#ffffff',
// {d}%
formatter: function(params) {
// 0
const value = params.value < 0.1 ? 0 : params.value
return `${value}`
}
},
emphasis: {
label: {
@ -122,7 +152,7 @@ export default {
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: chartData, // 使
data: processedData, // 使0
animationDuration: 1000,
animationEasing: 'cubicOut'
}
@ -149,4 +179,11 @@ export default {
border: 1px solid #339cff !important;
border-radius: 4px !important;
}
// 0
:deep(.ec-label) {
&[style*="0 次"] {
fill: rgba(255,255,255,0.5) !important;
}
}
</style>

37
src/views/storeManage/deviceManage/module/deviceDetail.vue

@ -462,23 +462,44 @@ export default {
},
[CRUD.HOOK.afterRefresh](crud) {
console.log('crud.data', crud.data)
const RFID_DEVICE_TYPE_ID = 'E2767FEACA9CE0E3B16B89'
crud.data.forEach(element => {
console.log('element', element)
if (element.deviceIp) {
this.getDeviceState(element)
// ID
if (element.deviceTypeId?.id === RFID_DEVICE_TYPE_ID) {
this.getRFIDReadStatus(element)
} else {
element.deviceState = 0
if (element.deviceIp) {
this.getDeviceState(element)
} else {
element.deviceState = 0
}
}
})
},
getDeviceState(element) {
crudDevice.FetchPingIP({ ip: element.deviceIp }).then((data) => {
element.deviceState = data === true ? 1 : 0
}).catch((error) => {
console.error(error)
})
crudDevice.FetchPingIP({ ip: element.deviceIp })
.then((data) => {
element.deviceState = data === true ? 1 : 0
})
.catch((error) => {
console.error('获取设备IP状态失败:', error)
element.deviceState = 0
})
},
getRFIDReadStatus(element) {
crudDevice.FetchRFIDReadStatus({ id: element.deviceTypeId.id })
.then((data) => {
element.deviceState = data === 0 ? 1 : 0
})
.catch((error) => {
console.error('获取RFID设备状态失败:', error)
element.deviceState = 0
})
},
//
[CRUD.HOOK.afterValidateCU](crud) {
if (crud.status.edit === 1) {

2
src/views/system/archiveStatistics/mixins/statistics.js

@ -117,7 +117,7 @@ export const statisticsCrud = {
}
}
// 按sequence排序
this.arrSortByKey(borrowerArr, 'sequence', false)
this.arrSortByKey(borrowerArr, 'sequence', true)
// 清空原有数据(避免多次调用累加)
this.lendData = []
borrowerArr.forEach(item => {

Loading…
Cancel
Save