-
+
档案借阅
-
-
+
- 档案库空气质量数据
+ 设备联调状态
-
- {{ currentDeviceName || '' }}
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
{{ item.value }}
-
{{ item.subName }} {{ item.dw }}
-
-
-
-
- 暂无数据
-
-
-
-
-
-
{{ bannerRoomName }}
-
-
-
-
实时空气质量指数（AQI）
-
-
-
-
空气质量为
-
{{ aqiStatus }}
-
-
-
-
-
-
-
-
{{ item.Name }}
@@ -100,13 +49,82 @@
+
+
+
+
+
+
+
+ -
+
红外
+ {{ alarmStatus.infrared }}
+
+ -
+
消防
+ {{ alarmStatus.fire }}
+
+ -
+
漏水
+ {{ alarmStatus.waterLeak }}
+
+ -
+
PM2.5浓度
+ {{ avgData.pm25 }}{{ avgData.pm25Unit }}
+
+ -
+
TVOC
+ {{ avgData.tvoc }}{{ avgData.tvocUnit }}
+
+ -
+
PM10浓度
+ {{ avgData.pm10 }}{{ avgData.pm10Unit }}
+
+ -
+
二氧化碳
+ {{ avgData.co2 }}{{ avgData.co2Unit }}
+
+ -
+
甲醛
+ {{ avgData.formaldehyde }}{{ avgData.formaldehydeUnit }}
+
+
+
+
实时空气质量指数（AQI）
+
+
+
+
空气质量为
+
{{ aqiStatus }}
+
+
+
-
-
-
-
+
+
+
+
+
+ 警告记录
+
+
+ 111
+
+
@@ -116,15 +134,12 @@
import { getCurrentTime } from '@/utils/index'
import lendAcross from '@/views/components/echarts/lendAcross.vue'
import WarehouseWarning from '@/views/components/WarehouseWarning'
-// import SecurityDoor from '@/views/components/SecurityDoor'
import AccessDoor from '@/views/components/AccessDoor'
-import displayConfigApi from '@/api/storeManage/displayConfig'
-// import thirdApi from '@/api/thirdApi'
import { statisticsCrud } from '@/views/system/archiveStatistics/mixins/statistics'
+import displayConfigApi from '@/api/storeManage/displayConfig'
import alarmApi from '@/api/home/alarm'
// import { allDeviceData, mockIpData } from './index.js'
-
-// // 同步mock方法
+// 同步mock方法
// const mockFetchDataForIP = (params) => {
// return new Promise((resolve) => {
// setTimeout(() => {
@@ -139,7 +154,6 @@ export default {
name: 'EnvironmentalScreen',
components: {
WarehouseWarning,
- // SecurityDoor,
AccessDoor,
lendAcross
},
@@ -148,29 +162,21 @@ export default {
return {
bannerRoomName: '3F 全景图',
nowDate: '',
+ currentWeek: this.getCurrentWeek(),
timer: null,
echartsTimer: null,
roomId: 'D6490DA3D4261E8C26D0E3',
allDisplayConfigData: [],
displayConfigData: [],
url: '',
- allDeviceIds: [],
- oaoMessage: [],
- topDisplayData: {
- DAK_DIV_TOP_001: { show: true, curValue: '23.10', unit: '℃', curstatus: 0 },
- DAK_DIV_TOP_002: { show: true, curValue: '48.90', unit: '%', curstatus: 0 },
- DAK_DIV_TOP_003: { show: true, curValue: '619', unit: 'ppm', curstatus: 0 },
- DAK_DIV_TOP_004: { show: true, curValue: '0.21', unit: 'mg/m³', curstatus: 0 },
- DAK_DIV_TOP_005: { show: true, curValue: '26.00', unit: 'ug/m³', curstatus: 0 },
- DAK_DIV_TOP_006: { show: true, curValue: '38.00', unit: 'ug/m³', curstatus: 0 }
- },
+ allDeviceIds: [], // 所有设备IP（无排除）
refreshtime: 60000,
lendData: [],
typeData: [],
- // 同步FullView的核心数据
- newAlarm: [],
+ newAlarm: [], // 所有设备的原始数据
aqiValue: 45,
aqiStatus: '健康',
+ // 需展示的指标列表（包含所有要计算的指标）
keepIndicators: [
'二氧化碳',
'甲醛',
@@ -179,57 +185,78 @@ export default {
'PM10浓度',
'温度',
'湿度',
- '空气质量'
+ '空气质量',
+ 'TVOC',
+ '红外',
+ '消防',
+ '漏水'
],
- ipToNameMap: {}, // IP到设备名称映射
- currentDeviceName: '', // 当前显示设备名称
- currentIpIndex: 0, // IP轮询索引
- excludeIpList: ['192.168.99.101:6003'], // 排除IP列表
- dataTimer: null, // 数据轮询定时器
- iframeWin: null // iframe窗口对象
+ iframeWin: null,
+ // 平均值数据（新增各指标单位字段）
+ avgData: {
+ pm25: '0.00',
+ pm25Unit: '', // PM2.5单位
+ tvoc: '0.00',
+ tvocUnit: '', // TVOC单位
+ pm10: '0.00',
+ pm10Unit: '', // PM10单位
+ co2: '0.00',
+ co2Unit: '', // 二氧化碳单位
+ formaldehyde: '0.00',
+ formaldehydeUnit: '' // 甲醛单位
+ },
+ // 告警状态（ON=告警，OFF=正常）
+ alarmStatus: {
+ infrared: '正常',
+ fire: '正常',
+ waterLeak: '正常'
+ },
+ hasValidData: false, // 是否有有效数据
+ hkConfig: {
+ 'username': 'admin',
+ 'password': 'ftzn83560792',
+ 'ip': '192.168.99.125', // 固定为目标IP
+ 'port': '554'
+ },
+ webRtcServer: null,
+ camera_ip: '127.0.0.1:9527',
+ cameraList: [] // 摄像头列表
}
},
computed: {
- // 过滤有效数据（排除空值/无效项）
validDisplayConfigData() {
return this.allDisplayConfigData.filter(item => item && item.Name)
},
- // 每行显示数量（优先3个，数量不足时自动调整）
itemsPerRow() {
const len = this.validDisplayConfigData.length
if (len === 0) return 0
- // 规则：总数<=3 → 每行显示总数；3<总数<=6 → 每行3个；总数>6 → 每行3个（最多显示2行，超出滚动）
- return len <= 3 ? len : 3
+ return len <= 2 ? len : 2
},
- // li的宽度（百分比，预留间距）
liWidth() {
if (this.itemsPerRow === 0) return '0'
- // 每行n个 → 宽度 = 100%/n - 间距（14px）
- return `calc(100% / ${this.itemsPerRow} - 14px)`
+ return `calc(100% / ${this.itemsPerRow} - 12px)`
},
- // li的高度（百分比，根据总行数均分）
liHeight() {
const len = this.validDisplayConfigData.length
if (len === 0) return '0'
- // 总行数 = 向上取整(总数/每行数量)
const rows = Math.ceil(len / this.itemsPerRow)
- // 高度 = 100%/总行数 - 间距（14px）
- return `calc(100% / ${rows} - 14px)`
+ return `calc(100% / ${rows} - 12px)`
},
- // 是否显示滚动（数量>6时，限制高度并显示滚动）
showScroll() {
- return this.validDisplayConfigData.length > 6
+ return this.validDisplayConfigData.length > 8
}
},
async created() {
- // 时间更新
+ // 时间更新定时器
this.timer = setInterval(() => {
this.nowDate = getCurrentTime()
}, 1000)
- // 同步FullView的初始化逻辑
+ // 初始化逻辑
window.getIframeLoading = this.getIframeLoading
- // 真实请求请替换：
+ // this.allDisplayConfigData = allDeviceData
+ // this.handleDeviceIpList()
+
await alarmApi.FetchYpGetSite().then((data) => {
if (data && data.length > 0) {
this.allDisplayConfigData = data
@@ -239,167 +266,268 @@ export default {
}
})
- // this.allDisplayConfigData = allDeviceData
- // this.handleDeviceIpList()
-
- // 初始加载+创建定时器
if (this.allDeviceIds.length > 0) {
- this.currentDeviceName = this.ipToNameMap[this.allDeviceIds[0]] || ''
- await this.getRealTimeData(this.allDeviceIds[0])
-
- // 移到这里创建定时器
- this.dataTimer = setInterval(async() => {
- const currentIp = this.getNextIp()
- this.currentDeviceName = this.ipToNameMap[currentIp] || ''
- await this.getRealTimeData(currentIp)
- }, 10000)
- // 10000
- console.log(`启动IP轮询，共${this.allDeviceIds.length}个有效IP：`, this.allDeviceIds)
+ await this.getAllDevicesData()
+ this.calcAllAvgData() // 计算所有指标平均值
+ this.calcAQIByAvg() // 根据平均值计算AQI
} else {
- console.warn('无有效设备IP，停止轮询')
- this.newAlarm = []
+ console.warn('无设备IP数据')
+ this.hasValidData = false
}
},
mounted() {
this.iframeWin = this.$refs.myIframe?.contentWindow
- // if (this.allDeviceIds.length > 0) {
- // this.dataTimer = setInterval(async() => {
- // const currentIp = this.getNextIp()
- // this.currentDeviceName = this.ipToNameMap[currentIp] || ''
- // await this.getRealTimeData(currentIp)
- // }, 10000)
- // console.log(`启动IP轮询，共${this.allDeviceIds.length}个有效IP：`, this.allDeviceIds)
- // }
-
- // 原有echarts刷新逻辑
+ // Echarts数据刷新定时器
this.echartsTimer = setInterval(() => {
this.lendData = []
this.typeData = []
this.getBorrowerNumSta()
}, this.refreshtime)
+ this.getVideoUrl()
},
beforeDestroy() {
// 清理所有定时器
if (this.timer) clearInterval(this.timer)
if (this.echartsTimer) clearInterval(this.echartsTimer)
- if (this.dataTimer) {
- clearInterval(this.dataTimer)
- console.log('停止IP轮询')
+ // 销毁视频流
+ if (this.webRtcServer) {
+ this.webRtcServer.disconnect()
+ this.webRtcServer = null
}
},
methods: {
+ getVideoUrl() {
+ displayConfigApi.list({ storeroomId: '01A1DC2123C2B75E1A579D', isQueryAll: 1 }).then((res) => {
+ console.log('摄像头列表', res)
+ if (res && res.length > 0) {
+ // 只筛选IP为192.168.99.125的摄像头
+ this.cameraList = res.filter(item =>
+ item.divPosition && item.divPosition.includes('cam') &&
+ item.deviceInfo && item.deviceInfo.deviceIp === '192.168.99.125'
+ )
+
+ if (this.cameraList.length > 0) {
+ // 更新海康配置为目标摄像头的信息
+ const targetCamera = this.cameraList[0].deviceInfo
+ this.hkConfig = {
+ username: targetCamera.deviceAccount || 'admin',
+ password: targetCamera.devicePassword || 'ftzn83560792',
+ ip: targetCamera.deviceIp || '192.168.99.125',
+ port: targetCamera.devicePort || '554'
+ }
+
+ this.$nextTick(() => {
+ this.initVideo()
+ })
+ } else {
+ this.$message({
+ message: '未找到IP为192.168.99.125的摄像头配置',
+ type: 'warning'
+ })
+ }
+ } else {
+ this.$message({
+ message: '请先配置摄像头',
+ type: 'error'
+ })
+ }
+ }).catch(error => {
+ console.error('获取摄像头列表失败', error)
+ this.$message({
+ message: '获取摄像头配置失败',
+ type: 'error'
+ })
+ })
+ },
+ initVideo() {
+ const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiWebRtcServerUrl : process.env.VUE_APP_WEBRTCSTREAMER_API
+ this.camera_ip = linkSrc
+ console.log('hkConfig', this.hkConfig)
+
+ // 先销毁已存在的视频流
+ if (this.webRtcServer) {
+ this.webRtcServer.disconnect()
+ }
+
+ // 初始化新的视频流
+ // eslint-disable-next-line no-undef
+ this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip)
+ // 拼接RTSP地址
+ const rtspUrl = `rtsp://${this.hkConfig.username}:${this.hkConfig.password}@${this.hkConfig.ip}:${this.hkConfig.port}/h264/1/1`
+ console.log('RTSP地址:', rtspUrl)
+ this.webRtcServer.connect(rtspUrl)
+ },
+ /**
+ * 获取当前星期
+ */
+ getCurrentWeek() {
+ const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+ const date = new Date()
+ return days[date.getDay()]
+ },
/**
- * 处理设备IP列表（去重+排除+名称映射）
+ * 处理设备IP列表（仅去重，无排除）
*/
handleDeviceIpList() {
const ipSet = new Set()
- this.ipToNameMap = {}
-
this.allDisplayConfigData.forEach(element => {
const ip = (element.IP || '').trim()
- if (ip && !this.excludeIpList.includes(ip)) {
+ if (ip) { // 仅过滤空IP，无其他排除逻辑
ipSet.add(ip)
- this.ipToNameMap[ip] = element.Name || `未知设备(${ip})`
- console.log('有效设备IP：', ip, '设备名称：', element.Name)
- } else if (this.excludeIpList.includes(ip)) {
- console.log('排除指定IP：', ip, '设备名称：', element.Name)
- } else if (!ip) {
- console.log('过滤空IP：', element.Name)
}
})
this.allDeviceIds = Array.from(ipSet)
},
-
/**
- * 获取下一个轮询IP（循环切换）
+ * 获取所有设备的实时数据
*/
- getNextIp() {
- if (this.allDeviceIds.length === 0) return ''
- // 先重置索引（防止数组长度变化导致越界）
- this.currentIpIndex = this.currentIpIndex % this.allDeviceIds.length
- const ip = this.allDeviceIds[this.currentIpIndex]
- this.currentIpIndex = (this.currentIpIndex + 1) % this.allDeviceIds.length
- console.log(`轮询切换 - 当前IP：${ip}，下一个索引：${this.currentIpIndex}`)
- return ip
+ async getAllDevicesData() {
+ const allData = []
+ for (const ip of this.allDeviceIds) {
+ try {
+ // const data = await mockFetchDataForIP({ ip })
+ // 真实请求
+ const data = await alarmApi.FetchDataForIP({ ip })
+ // 过滤需要的指标并添加到总数据
+ const filtered = data.filter(item => this.keepIndicators.includes(item.subName))
+ if (filtered.length > 0) {
+ allData.push(...filtered)
+ }
+ } catch (error) {
+ console.error(`获取IP【${ip}】数据失败：`, error)
+ }
+ }
+ this.newAlarm = allData
+ this.hasValidData = allData.length > 0
},
/**
- * 请求指定IP的实时数据（过滤+AQI计算）
+ * 计算所有设备指标的平均值（适配ON/OFF告警状态，保留单位）
*/
- async getRealTimeData(targetIp) {
- if (!targetIp) {
- this.newAlarm = []
- this.currentDeviceName = ''
- return
- }
+ calcAllAvgData() {
+ if (!this.hasValidData) return
- try {
- console.log(`开始请求IP【${targetIp}】的实时数据（模拟）`)
- // 模拟
- // const data = await mockFetchDataForIP({ ip: targetIp })
- // 真实请求
- const data = await alarmApi.FetchDataForIP({ ip: targetIp })
+ // 1. 初始化各指标的总和、计数和单位
+ const sumMap = {
+ pm25: { sum: 0, count: 0, unit: '' },
+ tvoc: { sum: 0, count: 0, unit: '' },
+ pm10: { sum: 0, count: 0, unit: '' },
+ co2: { sum: 0, count: 0, unit: '' },
+ formaldehyde: { sum: 0, count: 0, unit: '' },
+ infrared: [], // 红外状态（ON/OFF）
+ fire: [], // 消防状态（ON/OFF）
+ waterLeak: [] // 漏水状态（ON/OFF）
+ }
- // 过滤需要的指标
- const filteredData = data.filter(item =>
- this.keepIndicators.includes(item.subName)
- )
+ // 2. 遍历所有数据累加，同时记录单位
+ this.newAlarm.forEach(item => {
+ const value = parseFloat(item.value) || 0
+ // 提取单位（优先使用数据中的dw字段，无则用默认值）
+ const unit = item.dw || this.getDefaultUnit(item.subName)
- if (filteredData.length > 0) {
- this.newAlarm = filteredData
- console.log(`IP【${targetIp}】(${this.currentDeviceName}) 过滤后的数据：`, filteredData)
- this.calcAQI(filteredData)
- } else {
- this.newAlarm = []
- this.aqiValue = 45
- this.aqiStatus = '健康'
- console.log(`IP【${targetIp}】(${this.currentDeviceName}) 无需要的指标数据`)
+ switch (item.subName) {
+ case 'PM2.5浓度':
+ sumMap.pm25.sum += value
+ sumMap.pm25.count++
+ // 只记录第一个非空单位（确保单位统一）
+ if (!sumMap.pm25.unit && unit) sumMap.pm25.unit = unit
+ break
+ case 'TVOC':
+ sumMap.tvoc.sum += value
+ sumMap.tvoc.count++
+ if (!sumMap.tvoc.unit && unit) sumMap.tvoc.unit = unit
+ break
+ case 'PM10浓度':
+ sumMap.pm10.sum += value
+ sumMap.pm10.count++
+ if (!sumMap.pm10.unit && unit) sumMap.pm10.unit = unit
+ break
+ case '二氧化碳':
+ sumMap.co2.sum += value
+ sumMap.co2.count++
+ if (!sumMap.co2.unit && unit) sumMap.co2.unit = unit
+ break
+ case '甲醛':
+ sumMap.formaldehyde.sum += value
+ sumMap.formaldehyde.count++
+ if (!sumMap.formaldehyde.unit && unit) sumMap.formaldehyde.unit = unit
+ break
+ // 告警类指标直接存储状态
+ case '红外':
+ sumMap.infrared.push(item.value)
+ break
+ case '消防':
+ sumMap.fire.push(item.value)
+ break
+ case '漏水':
+ sumMap.waterLeak.push(item.value)
+ break
}
- } catch (error) {
- this.newAlarm = []
- this.aqiValue = 45
- this.aqiStatus = '健康'
- this.currentDeviceName = ''
- console.error(`IP【${targetIp}】数据请求失败：`, error)
+ })
+
+ // 3. 计算平均值（保留两位小数），并赋值单位
+ this.avgData = {
+ pm25: sumMap.pm25.count ? (sumMap.pm25.sum / sumMap.pm25.count).toFixed(2) : '0.00',
+ pm25Unit: sumMap.pm25.unit || 'ug/立方米', // 兜底默认单位
+ tvoc: sumMap.tvoc.count ? (sumMap.tvoc.sum / sumMap.tvoc.count).toFixed(2) : '0.00',
+ tvocUnit: sumMap.tvoc.unit || 'LuK', // 兜底默认单位
+ pm10: sumMap.pm10.count ? (sumMap.pm10.sum / sumMap.pm10.count).toFixed(2) : '0.00',
+ pm10Unit: sumMap.pm10.unit || 'ug/立方米', // 兜底默认单位
+ co2: sumMap.co2.count ? (sumMap.co2.sum / sumMap.co2.count).toFixed(2) : '0.00',
+ co2Unit: sumMap.co2.unit || 'ppm', // 兜底默认单位
+ formaldehyde: sumMap.formaldehyde.count ? (sumMap.formaldehyde.sum / sumMap.formaldehyde.count).toFixed(2) : '0.00',
+ formaldehydeUnit: sumMap.formaldehyde.unit || 'ppm' // 兜底默认单位
}
- },
- getIframeLoading(value) {},
- // 原有切换房间方法（同步更新数据）
- async changeRoomGetDeivce() {
- this.allDeviceIds = []
- this.allDisplayConfigData = await displayConfigApi.list({ storeroomId: this.roomId })
- this.handleDeviceIpList() // 重新处理IP列表
- console.log('allDeviceIds2', this.allDeviceIds)
- this.displayConfigData = this.allDisplayConfigData.filter((item) => {
- return item.isDisplay && item.bindState && item.deviceInfo && (item.divPosition.includes('OAO') || item.divPosition.includes('TOP') || item.divPosition.includes('LS'))
- })
- console.log('displayConfigData2', this.displayConfigData)
+ // 4. 处理告警状态（ON=告警，OFF=正常；只要有一个ON就显示告警）
+ this.alarmStatus = {
+ infrared: sumMap.infrared.some(s => s === 'ON') ? '告警' : '正常',
+ fire: sumMap.fire.some(s => s === 'ON') ? '告警' : '正常',
+ waterLeak: sumMap.waterLeak.some(s => s === 'ON') ? '告警' : '正常'
+ }
- // 重新加载数据
- if (this.allDeviceIds.length > 0) {
- this.currentDeviceName = this.ipToNameMap[this.allDeviceIds[0]] || ''
- await this.getRealTimeData(this.allDeviceIds[0])
- } else {
- this.newAlarm = []
- this.currentDeviceName = ''
+ // 兼容无数据的情况
+ if (sumMap.infrared.length === 0) this.alarmStatus.infrared = '正常'
+ if (sumMap.fire.length === 0) this.alarmStatus.fire = '正常'
+ if (sumMap.waterLeak.length === 0) this.alarmStatus.waterLeak = '正常'
+ },
+ /**
+ * 获取指标默认单位（兜底用）
+ */
+ getDefaultUnit(subName) {
+ const unitMap = {
+ 'PM2.5浓度': 'ug/立方米',
+ 'TVOC': 'LuK',
+ 'PM10浓度': 'ug/立方米',
+ '二氧化碳': 'ppm',
+ '甲醛': 'ppm',
+ '温度': '℃',
+ '湿度': '%',
+ '综合气体': '无量纲'
}
- this.handleAQI()
+ return unitMap[subName] || ''
},
/**
- * 计算AQI
+ * 根据所有设备的平均值计算AQI
*/
- calcAQI(filteredData) {
- const pm25 = parseFloat(filteredData.find(item => item.subName === 'PM2.5浓度')?.value || 0)
- const pm10 = parseFloat(filteredData.find(item => item.subName === 'PM10浓度')?.value || 0)
- const formaldehyde = parseFloat(filteredData.find(item => item.subName === '甲醛')?.value || 0)
- const co2 = parseFloat(filteredData.find(item => item.subName === '二氧化碳')?.value || 0)
+ calcAQIByAvg() {
+ if (!this.hasValidData) {
+ this.aqiValue = 45
+ this.aqiStatus = '健康'
+ return
+ }
+
+ const pm25 = parseFloat(this.avgData.pm25)
+ const pm10 = parseFloat(this.avgData.pm10)
+ const formaldehyde = parseFloat(this.avgData.formaldehyde)
+ const co2 = parseFloat(this.avgData.co2)
let aqi = 0
- if (pm25 > 50 || pm10 > 100 || formaldehyde > 30 || co2 > 1000) {
+ // 业务判定逻辑（可根据实际需求调整阈值）
+ if (pm25 > 50 || pm10 > 100 || formaldehyde > 0.1 || co2 > 1000) {
aqi = Math.floor(Math.random() * 50) + 100
this.aqiStatus = '污染'
- } else if (pm25 > 25 || pm10 > 50 || formaldehyde > 10 || co2 > 800) {
+ } else if (pm25 > 25 || pm10 > 50 || formaldehyde > 0.05 || co2 > 800) {
aqi = Math.floor(Math.random() * 50) + 50
this.aqiStatus = '一般'
} else {
@@ -407,7 +535,11 @@ export default {
this.aqiStatus = '健康'
}
this.aqiValue = aqi
- }
+ },
+ /**
+ * iframe加载回调（保留原有逻辑）
+ */
+ getIframeLoading(value) {}
}
}
@@ -425,21 +557,38 @@ export default {
background: url("~@/assets/images/largeScreen/top-title.png") no-repeat 0 -14px;
background-size: contain;
}
- .current-date {
+ .header-date {
position: fixed;
- top: 25px;
- right: 150px;
- font-size: 16px;
- color: #3a99fd;
+ top: 10px;
+ right: 80px;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ color: #fff;
+ .time {
+ font-size: 32px;
+ font-weight: bold;
+ line-height: 30px;
+ padding-right: 20px;
+ border-right: 1px solid rgba(255, 255, 255, 0.5);
+ }
+ .time-other {
+ font-size: 18px;
+ line-height: 22px;
+ padding-left: 20px;
+ span {
+ display: block;
+ }
+ }
}
.env-main {
display: flex;
justify-content: space-between;
padding: 0 25px;
- // margin-top: -12px;
+ margin-top: -12px;
.env-main-left,
.env-main-right {
- max-width: 24%;
+ max-width: 22%;
flex: 1;
height: calc(100vh - 138px);
overflow: hidden;
@@ -450,13 +599,18 @@ export default {
margin: 0 20px;
height: calc(100vh - 138px);
overflow: hidden;
+ background: url("~@/assets/images/largeScreen/bg.png") no-repeat center center;
}
.env-main-left .container-wrap {
min-height: auto;
}
+ .env-main-left .container-wrap.left-wrap {
+ height: calc(100% / 2 - 85px);
+ }
.env-main-right .container-wrap {
- height: calc(100% / 2 - 14px);
+ height: calc(100% / 3 - 14px);
min-height: auto;
+ margin-bottom: 20px;
}
.env-item {
margin-bottom: 20px;
@@ -495,92 +649,28 @@ export default {
background-size: cover;
}
}
- .msg-list {
- flex-wrap: wrap !important;
- padding: 0 20px;
- li {
- margin-bottom: 20px;
- display: flex;
- align-items: center;
- .msg-list-svg {
- font-size: 40px;
- margin-left: 20px;
- }
- .msg-txt {
- margin-left: 15px;
- text-align: left;
- .msg-list-num {
- font-size: 24px;
- color: #fff;
- font-weight: 600;
- }
- .msg-list-unit {
- font-size: 14px;
- color: #ccc;
- margin: 5px 0 0 0;
- }
- }
- }
- }
- .empty-tip {
- font-size: 14px;
- color: #999;
- padding: 40px 0;
- }
- }
- .screen-env-list {
- flex-wrap: wrap;
- // justify-content: space-between;
- justify-content: flex-start;
- height: calc(100% - 54px);
- padding: 0 10px;
- li {
- flex: none;
- width: calc(100% / 2 - 22px);
- margin: 20px 10px;
- height: calc(100% / 4 - 40px);
- .msg-list-svg {
- font-size: 40px;
- margin-left: 20px;
- }
- &.msg-pm {
- .msg-list-svg {
- font-size: 46px;
- }
- }
- }
+
}
.env-3d {
position: relative;
width: 100%;
- // height: calc(100% + 80px);
- height: calc(100% - 80px);
- background: url("~@/assets/images/largeScreen/bg.png") no-repeat center -130px;
+ // height: calc(100%);
+ height: 80vh;
+ // background: url("~@/assets/images/largeScreen/bg.png") no-repeat center 0;
overflow: hidden;
- margin-top: -80px;
.iframe_box {
width: 100%;
height: 100%;
}
- .screen-env-list {
- position: absolute;
- right: 0;
- bottom: 0;
- flex-wrap: wrap;
- justify-content: space-between;
- padding: 0;
- width: 165px;
- height: 200px;
- z-index: 99999;
- li {
- width: 100%;
- margin: 20px 0 0 0;
- height: calc(100% / 2 - 20px);
- }
- }
}
}
}
+.iframe_box {
+ /* 移除原有width/height，改用内联样式或下面的样式 */
+ width: 100% !important;
+ height: 100% !important;
+ border: none;
+}
.banner-top-name{
position: absolute;
left: 0;
@@ -596,7 +686,7 @@ export default {
}
.air-quality{
position: absolute;
- top: 10px;
+ bottom: 10px;
right: 20px;
color: #fff;
padding: 20px 20px 10px 20px;
@@ -670,42 +760,11 @@ export default {
}
}
}
-.middle-bottom {
- width: 100%;
- position: relative;
- padding: 0 !important;
- background-color: #021941;
- border: 1px solid #113d72;
- color: #339cff;
- font-size: 14px;
- &::before,
- &::after{
- content: "";
- position: absolute;
- width: 17px;
- height: 17px;
- z-index: 99;
- }
- &::before{
- top: -1px;
- left: -1px;
- border-top: 1px solid #339CFF;
- border-left: 1px solid #339CFF;
- }
- &::after{
- right: -1px;
- bottom: -1px;
- border-right: 1px solid #339CFF;
- border-bottom: 1px solid #339CFF;
- }
-}
-
.leakage-list {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
- padding: 14px 0 0 14px;
- height: auto;
+ padding: 0 0 0 14px;
text-align: left;
&::-webkit-scrollbar {
width: 4px;
@@ -723,12 +782,7 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
- // width: calc( 100% / 3 - 14px);
- // height: calc(100% / 3 - 14px);
- width: auto;
- height: auto;
- // margin: 0 14px 14px 0;
- padding: 0 30px;
+ padding: 0 15px;
border: 1px solid #3581cc;
background-color: #02255f;
border-radius: 2px;
@@ -744,9 +798,10 @@ export default {
border-style: solid;
}
p {
+ font-size: 12px;
+ color: #fff;
i {
- margin-right: 8px;
- font-size: 20px;
+ margin-right: 4px;
}
}
span.leakage-state-tip {
@@ -784,4 +839,41 @@ export default {
}
}
}
+.env-alarm-list{
+ position: absolute;
+ top: 0;
+ left: 10px;
+ display: flex;
+ justify-content: flex-start;
+ width: 100%;
+ // flex-wrap: wrap;
+ li{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ align-content: center;
+ justify-content: center;
+ width: calc(100% / 8);
+ height: 80px;
+ margin-right: 10px;
+ background: url('~@/assets/images/data_border_default.png') no-repeat;
+ background-size: 100% 100%;
+ position: relative;
+ color: #fff;
+ font-size: 18px;
+ &.li-warn{
+ background: url('~@/assets/images/data_border_warn.png') no-repeat;
+ background-size: 100% 100%;
+ }
+ p{
+ font-size: 16px;
+ color: #339CFF;
+ }
+ span{
+ display: block;
+ margin-top: 12px;
+ font-weight: 500;
+ }
+ }
+}
diff --git a/src/views/home111.vue b/src/views/home111.vue
new file mode 100644
index 0000000..0ca8e22
--- /dev/null
+++ b/src/views/home111.vue
@@ -0,0 +1,749 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 环境数据
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
{{ item.subName }}
+
{{ item.value }}
+
+
+
+
+
+
+
+
+
+
+ 3D库房
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 待办事项
+
+
+
+
+ -
+
+
{{ item.title }}
+
+ {{ item.update_time | parseTime }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+