Compare commits
11 Commits
screen-dev
...
28176ce052
| Author | SHA1 | Date | |
|---|---|---|---|
| 28176ce052 | |||
| fdcf82e343 | |||
| e4c6f1f798 | |||
| f4a42c168f | |||
| 371a2d8be0 | |||
| c403922639 | |||
| 2a3d2fcf63 | |||
| 25bb28f77a | |||
| 3d5d8918d7 | |||
| fe14089562 | |||
| b68f2608f3 |
@ -10,7 +10,7 @@ import ThemePicker from "@/components/ThemePicker"
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "App",
|
name: "App",
|
||||||
components: { ThemePicker }
|
components: { ThemePicker },
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@ -7,7 +7,6 @@ export function getDzjkHomeView(siteId) {
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//站点首页 冲放曲线
|
//站点首页 冲放曲线
|
||||||
export function getSevenChargeData({siteId,startDate,endDate}) {
|
export function getSevenChargeData({siteId,startDate,endDate}) {
|
||||||
return request({
|
return request({
|
||||||
@ -15,7 +14,6 @@ export function getSevenChargeData({siteId, startDate, endDate}) {
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取站点包含的设备种类 用来判断单站监控设备监控的菜单栏展示
|
// 获取站点包含的设备种类 用来判断单站监控设备监控的菜单栏展示
|
||||||
export function getSiteAllDeviceCategory(siteId) {
|
export function getSiteAllDeviceCategory(siteId) {
|
||||||
return request({
|
return request({
|
||||||
@ -23,15 +21,6 @@ export function getSiteAllDeviceCategory(siteId) {
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//EMS
|
|
||||||
export function getEmsDataList(siteId) {
|
|
||||||
return request({
|
|
||||||
url: `/ems/siteMonitor/getEmsDataList?siteId=${siteId}`,
|
|
||||||
method: 'get',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
//获取pcs、实时运行头部的设备信息
|
//获取pcs、实时运行头部的设备信息
|
||||||
export function getRunningHeadInfo(siteId) {
|
export function getRunningHeadInfo(siteId) {
|
||||||
return request({
|
return request({
|
||||||
@ -39,7 +28,6 @@ export function getRunningHeadInfo(siteId) {
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取pcs列表
|
//获取pcs列表
|
||||||
export function getPcsDetailInfo(siteId) {
|
export function getPcsDetailInfo(siteId) {
|
||||||
return request({
|
return request({
|
||||||
@ -71,7 +59,6 @@ export function getStackNameList(siteId) {
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取单体电池 电池簇列表数据
|
//获取单体电池 电池簇列表数据
|
||||||
export function getClusterNameList({stackDeviceId,siteId}) {
|
export function getClusterNameList({stackDeviceId,siteId}) {
|
||||||
return request({
|
return request({
|
||||||
@ -79,7 +66,6 @@ export function getClusterNameList({stackDeviceId, siteId}) {
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//单体电池表格数据
|
//单体电池表格数据
|
||||||
export function getClusterDataInfoList({siteId, stackDeviceId, clusterDeviceId,batteryId, pageSize, pageNum}) {
|
export function getClusterDataInfoList({siteId, stackDeviceId, clusterDeviceId,batteryId, pageSize, pageNum}) {
|
||||||
return request({
|
return request({
|
||||||
@ -87,7 +73,6 @@ export function getClusterDataInfoList({siteId, stackDeviceId, clusterDeviceId,
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 单体电池图表
|
// 单体电池图表
|
||||||
//http://localhost:8089/ems/siteMonitor/getSingleBatteryData?clusterDeviceId=BMSC01&siteId=021_FXX_01&deviceId=001&startDate=2025-07-11&endDate=2025-07-18
|
//http://localhost:8089/ems/siteMonitor/getSingleBatteryData?clusterDeviceId=BMSC01&siteId=021_FXX_01&deviceId=001&startDate=2025-07-11&endDate=2025-07-18
|
||||||
export function getSingleBatteryData({siteId,deviceId,clusterDeviceId,startDate,endDate}) {
|
export function getSingleBatteryData({siteId,deviceId,clusterDeviceId,startDate,endDate}) {
|
||||||
@ -105,23 +90,6 @@ export function getCoolingDataList(siteId) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取动环数据
|
|
||||||
export function getDhDataList(siteId) {
|
|
||||||
return request({
|
|
||||||
url: `/ems/siteMonitor/getDhDataList?siteId=${siteId}`,
|
|
||||||
method: 'get'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
//获取消防数据
|
|
||||||
export function getXfDataList(siteId) {
|
|
||||||
return request({
|
|
||||||
url: `/ems/siteMonitor/getXfDataList?siteId=${siteId}`,
|
|
||||||
method: 'get'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//获取电表数据
|
//获取电表数据
|
||||||
export function getAmmeterDataList(siteId) {
|
export function getAmmeterDataList(siteId) {
|
||||||
return request({
|
return request({
|
||||||
@ -131,16 +99,7 @@ export function getAmmeterDataList(siteId) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 故障告警
|
// 故障告警
|
||||||
export function getAlarmDetailList({
|
export function getAlarmDetailList({status,siteId, deviceId, alarmLevel, alarmStartTime, alarmEndTime,pageSize,pageNum}) {
|
||||||
status,
|
|
||||||
siteId,
|
|
||||||
deviceId,
|
|
||||||
alarmLevel,
|
|
||||||
alarmStartTime,
|
|
||||||
alarmEndTime,
|
|
||||||
pageSize,
|
|
||||||
pageNum
|
|
||||||
}) {
|
|
||||||
return request({
|
return request({
|
||||||
url: `/ems/siteAlarm/getAlarmDetailList?siteId=${siteId}&status=${status}&deviceId=${deviceId}&alarmLevel=${alarmLevel}&alarmStartTime=${alarmStartTime}&alarmEndTime=${alarmEndTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
|
url: `/ems/siteAlarm/getAlarmDetailList?siteId=${siteId}&status=${status}&deviceId=${deviceId}&alarmLevel=${alarmLevel}&alarmStartTime=${alarmStartTime}&alarmEndTime=${alarmEndTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
|
||||||
method: 'get'
|
method: 'get'
|
||||||
@ -155,7 +114,6 @@ export function createTicketNo(data) {
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 概率统计
|
// 概率统计
|
||||||
//获取概率统计 电量指标接口
|
//获取概率统计 电量指标接口
|
||||||
export function getElectricData({siteId,startDate,endDate}) {
|
export function getElectricData({siteId,startDate,endDate}) {
|
||||||
@ -164,7 +122,6 @@ export function getElectricData({siteId, startDate, endDate}) {
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取pcs列表
|
//获取pcs列表
|
||||||
export function getPcsNameList(siteId) {
|
export function getPcsNameList(siteId) {
|
||||||
return request({
|
return request({
|
||||||
@ -172,7 +129,6 @@ export function getPcsNameList(siteId) {
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//pcs曲线
|
//pcs曲线
|
||||||
export function getPCSData({siteId,startTime,endTime,dataType}) {
|
export function getPCSData({siteId,startTime,endTime,dataType}) {
|
||||||
return request({
|
return request({
|
||||||
@ -180,7 +136,6 @@ export function getPCSData({siteId, startTime, endTime, dataType}) {
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//电池堆曲线
|
//电池堆曲线
|
||||||
export function getStackData({siteId,startTime,endTime,dataType}) {
|
export function getStackData({siteId,startTime,endTime,dataType}) {
|
||||||
return request({
|
return request({
|
||||||
@ -188,7 +143,6 @@ export function getStackData({siteId, startTime, endTime, dataType}) {
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//电池温度
|
//电池温度
|
||||||
export function getClusterData({siteId,stackId,clusterId,dateTime,pageNum,pageSize}) {
|
export function getClusterData({siteId,stackId,clusterId,dateTime,pageNum,pageSize}) {
|
||||||
return request({
|
return request({
|
||||||
@ -200,37 +154,33 @@ export function getClusterData({siteId, stackId, clusterId, dateTime, pageNum, p
|
|||||||
|
|
||||||
// 实时运行
|
// 实时运行
|
||||||
//储能
|
//储能
|
||||||
export function storagePower(siteId, startTime, endTime) {
|
export function storagePower(siteId) {
|
||||||
return request({
|
return request({
|
||||||
url: `/ems/siteMonitor/runningGraph/storagePower?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}`,
|
url: `/ems/siteMonitor/runningGraph/storagePower?siteId=${siteId}`,
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//poc温度
|
//poc温度
|
||||||
export function pcsMaxTemp(siteId, startTime, endTime) {
|
export function pcsMaxTemp(siteId) {
|
||||||
return request({
|
return request({
|
||||||
url: `/ems/siteMonitor/runningGraph/pcsMaxTemp?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}`,
|
url: `/ems/siteMonitor/runningGraph/pcsMaxTemp?siteId=${siteId}`,
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 电池平均soc
|
// 电池平均soc
|
||||||
export function batteryAveSoc(siteId, startTime, endTime) {
|
export function batteryAveSoc(siteId) {
|
||||||
return request({
|
return request({
|
||||||
url: `/ems/siteMonitor/runningGraph/batteryAveSoc?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}`,
|
url: `/ems/siteMonitor/runningGraph/batteryAveSoc?siteId=${siteId}`,
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 电池平均温度
|
// 电池平均温度
|
||||||
export function batteryAveTemp(siteId, startTime, endTime) {
|
export function batteryAveTemp(siteId) {
|
||||||
return request({
|
return request({
|
||||||
url: `/ems/siteMonitor/runningGraph/batteryAveTemp?siteId=${siteId}&startDate=${startTime}&endDate=${endTime}`,
|
url: `/ems/siteMonitor/runningGraph/batteryAveTemp?siteId=${siteId}`,
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 功率曲线
|
// 功率曲线
|
||||||
export function getPowerData({siteId,startDate,endDate}) {
|
export function getPowerData({siteId,startDate,endDate}) {
|
||||||
return request({
|
return request({
|
||||||
@ -246,7 +196,6 @@ export function getLoadNameList(siteId) {
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 电表报表
|
// 电表报表
|
||||||
export function getAmmeterData({siteId,startTime,endTime, pageSize, pageNum}) {
|
export function getAmmeterData({siteId,startTime,endTime, pageSize, pageNum}) {
|
||||||
return request({
|
return request({
|
||||||
@ -255,14 +204,6 @@ export function getAmmeterData({siteId, startTime, endTime, pageSize, pageNum})
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 电价报表
|
|
||||||
export function getAmmeterRevenueData(data) {
|
|
||||||
return request({
|
|
||||||
url: `/ems/statsReport/getAmmeterRevenueData`,
|
|
||||||
method: 'get',
|
|
||||||
params: data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
//策略列表
|
//策略列表
|
||||||
export function strategyRunningList(siteId) {
|
export function strategyRunningList(siteId) {
|
||||||
@ -271,7 +212,6 @@ export function strategyRunningList(siteId) {
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//停止策略
|
//停止策略
|
||||||
export function stopStrategyRunning(id) {
|
export function stopStrategyRunning(id) {
|
||||||
return request({
|
return request({
|
||||||
@ -279,7 +219,6 @@ export function stopStrategyRunning(id) {
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取所有主策略
|
// 获取所有主策略
|
||||||
export function getMainStrategyList() {
|
export function getMainStrategyList() {
|
||||||
return request({
|
return request({
|
||||||
@ -287,7 +226,6 @@ export function getMainStrategyList() {
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取所有辅助策略
|
//获取所有辅助策略
|
||||||
export function getAuxStrategyList() {
|
export function getAuxStrategyList() {
|
||||||
return request({
|
return request({
|
||||||
@ -295,7 +233,6 @@ export function getAuxStrategyList() {
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//配置策略
|
//配置策略
|
||||||
export function configStrategy(data) {
|
export function configStrategy(data) {
|
||||||
return request({
|
return request({
|
||||||
@ -313,7 +250,6 @@ export function getTempNameList({siteId, strategyId}) {
|
|||||||
method: 'get',
|
method: 'get',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取模板详情
|
//获取模板详情
|
||||||
///strategy/temp/list?templateId=1
|
///strategy/temp/list?templateId=1
|
||||||
export function getStrategyTempDetail(templateId) {
|
export function getStrategyTempDetail(templateId) {
|
||||||
@ -322,7 +258,6 @@ export function getStrategyTempDetail(templateId) {
|
|||||||
method: 'get',
|
method: 'get',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//新增模板
|
//新增模板
|
||||||
export function addStrategyTemp(data) {
|
export function addStrategyTemp(data) {
|
||||||
return request({
|
return request({
|
||||||
@ -331,7 +266,6 @@ export function addStrategyTemp(data) {
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function editStrategyTemp(data) {
|
export function editStrategyTemp(data) {
|
||||||
return request({
|
return request({
|
||||||
url: `/strategy/temp`,
|
url: `/strategy/temp`,
|
||||||
@ -339,7 +273,6 @@ export function editStrategyTemp(data) {
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//http://localhost:8089/strategy/temp/{id}
|
//http://localhost:8089/strategy/temp/{id}
|
||||||
export function deleteStrategyTemp(id) {
|
export function deleteStrategyTemp(id) {
|
||||||
return request({
|
return request({
|
||||||
@ -355,7 +288,6 @@ export function timeConfigList({siteId, strategyId}) {
|
|||||||
method: 'get',
|
method: 'get',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//保存时间配置
|
//保存时间配置
|
||||||
// http://localhost:8089/strategy/timeConfig
|
// http://localhost:8089/strategy/timeConfig
|
||||||
export function setTimeConfigList(data) {
|
export function setTimeConfigList(data) {
|
||||||
@ -365,7 +297,6 @@ export function setTimeConfigList(data) {
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 策略曲线图
|
// 策略曲线图
|
||||||
//http://localhost:8089/strategy/curve/curveList?strategyId=1&siteId=021_FXX_01
|
//http://localhost:8089/strategy/curve/curveList?strategyId=1&siteId=021_FXX_01
|
||||||
export function curveList({siteId,strategyId}) {
|
export function curveList({siteId,strategyId}) {
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import request from '@/utils/request'
|
import request from '@/utils/request'
|
||||||
|
|
||||||
// 站点列表
|
// 站点列表
|
||||||
export function getSiteInfoList({siteName,startTime, endTime,pageSize,pageNum}) {
|
export function getSiteInfoList({siteName,startTime, endTime,pageSize,pageNum}) {
|
||||||
return request({
|
return request({
|
||||||
@ -9,11 +8,10 @@ export function getSiteInfoList({siteName, startTime, endTime, pageSize, pageNum
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 设备列表
|
// 设备列表
|
||||||
export function getDeviceInfoList(data) {
|
export function getDeviceInfoList({siteId,pageSize,pageNum}) {
|
||||||
return request({
|
return request({
|
||||||
url: `/ems/siteConfig/getDeviceInfoList`,
|
url: `/ems/siteConfig/getDeviceInfoList?siteId=${siteId}&pageSize=${pageSize}&pageNum=${pageNum}`,
|
||||||
method: 'get',
|
method: 'get'
|
||||||
params: data
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -41,7 +39,6 @@ export function addDevice(data) {
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 编辑设备
|
// 编辑设备
|
||||||
export function updateDevice(data) {
|
export function updateDevice(data) {
|
||||||
return request({
|
return request({
|
||||||
@ -50,7 +47,6 @@ export function updateDevice(data) {
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 删除设备
|
// 删除设备
|
||||||
export function deleteService(id) {
|
export function deleteService(id) {
|
||||||
return request({
|
return request({
|
||||||
@ -58,16 +54,6 @@ export function deleteService(id) {
|
|||||||
method: 'delete',
|
method: 'delete',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//pcs开、关机
|
|
||||||
export function updateDeviceStatus(data) {
|
|
||||||
return request({
|
|
||||||
url: `/ems/siteConfig/updateDeviceStatus`,
|
|
||||||
method: 'post',
|
|
||||||
data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取上级设备id列表
|
// 获取上级设备id列表
|
||||||
export function getParentDeviceId({siteId,deviceCategory}) {
|
export function getParentDeviceId({siteId,deviceCategory}) {
|
||||||
return request({
|
return request({
|
||||||
@ -75,7 +61,6 @@ export function getParentDeviceId({siteId, deviceCategory}) {
|
|||||||
method: 'get',
|
method: 'get',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取所有设备
|
//获取所有设备
|
||||||
export function getDeviceList(siteId) {
|
export function getDeviceList(siteId) {
|
||||||
return request({
|
return request({
|
||||||
@ -85,11 +70,10 @@ export function getDeviceList(siteId) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
//获取设备点位table
|
//获取设备点位table
|
||||||
export function getDevicePointList(data) {
|
export function getDevicePointList({siteId,deviceId,deviceCategory,parentId,pageNum,pageSize,dataPointName='',sortMethod,sortData,dataPoint,lower,upper,ipAddress,ipPort}) {
|
||||||
return request({
|
return request({
|
||||||
url: `/ems/siteConfig/getDevicePointList`,
|
url: `/ems/siteConfig/getDevicePointList?siteId=${siteId}&deviceId=${deviceId}&pageNum=${pageNum}&pageSize=${pageSize}&deviceCategory=${deviceCategory}&dataPointName=${dataPointName}&parentId=${parentId}&dataPoint=${dataPoint}&lower=${lower}&upper=${upper}&pageNum=${pageNum}&sortMethod=${sortMethod}&sortData=${sortData}&ipAddress=${ipAddress}&ipPort=${ipPort}`,
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: data
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -153,7 +137,6 @@ export function exportPointList(data) {
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 点位导入
|
// 点位导入
|
||||||
export function importPointList(data) {
|
export function importPointList(data) {
|
||||||
return request({
|
return request({
|
||||||
@ -164,6 +147,7 @@ export function importPointList(data) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//mqtt
|
//mqtt
|
||||||
export function getMqttList({pageSize,pageNum,mqttTopic,topicName,siteId}) {
|
export function getMqttList({pageSize,pageNum,mqttTopic,topicName,siteId}) {
|
||||||
return request({
|
return request({
|
||||||
@ -171,14 +155,12 @@ export function getMqttList({pageSize, pageNum, mqttTopic, topicName, siteId}) {
|
|||||||
method: 'get',
|
method: 'get',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getMqttDetail(id) {
|
export function getMqttDetail(id) {
|
||||||
return request({
|
return request({
|
||||||
url: `/ems/mqttConfig/${id}`,
|
url: `/ems/mqttConfig/${id}`,
|
||||||
method: 'get',
|
method: 'get',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function addMqtt(data) {
|
export function addMqtt(data) {
|
||||||
return request({
|
return request({
|
||||||
url: `/ems/mqttConfig`,
|
url: `/ems/mqttConfig`,
|
||||||
@ -186,7 +168,6 @@ export function addMqtt(data) {
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function editMqtt(data) {
|
export function editMqtt(data) {
|
||||||
return request({
|
return request({
|
||||||
url: `/ems/mqttConfig`,
|
url: `/ems/mqttConfig`,
|
||||||
@ -194,7 +175,6 @@ export function editMqtt(data) {
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function deleteMqtt(id) {
|
export function deleteMqtt(id) {
|
||||||
return request({
|
return request({
|
||||||
url: `/ems/mqttConfig/${id}`,
|
url: `/ems/mqttConfig/${id}`,
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 11 MiB |
@ -5,17 +5,15 @@
|
|||||||
//右侧内容区域
|
//右侧内容区域
|
||||||
//父元素
|
//父元素
|
||||||
.ems-dashboard-editor-container{
|
.ems-dashboard-editor-container{
|
||||||
background-color: #F1F5FC;
|
background-color: #FFFFFF;//#F1F5FC
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
//除去顶部信息(如搜索栏、站点基本信息等)外的 白色背景内容区域
|
//除去顶部信息(如搜索栏、站点基本信息等)外的 白色背景内容区域
|
||||||
.ems-content-container{
|
.ems-content-container{
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
//需要设置内padding的白色背景区域
|
//需要设置内padding的白色背景区域
|
||||||
.ems-content-container-padding{
|
.ems-content-container-padding{
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
@ -29,49 +27,42 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
background: #F1F5FB ;
|
background: #F1F5FB ;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.card-title{
|
.card-title{
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color:#333333;
|
color:#333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-button--text{
|
.el-button--text{
|
||||||
color: #666666;
|
color: #666666;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.common-card-container-body-no-padding{
|
.common-card-container-body-no-padding{
|
||||||
.el-card__body{
|
.el-card__body{
|
||||||
padding:0;
|
padding:0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.common-card-container-no-title-bg {
|
.common-card-container-no-title-bg {
|
||||||
.el-card__header{
|
.el-card__header{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//单站监控 设备监控card公共样式
|
//单站监控 设备监控card公共样式
|
||||||
.sbjk-card-container{
|
.sbjk-card-container{
|
||||||
.el-card__header {
|
.el-card__header {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
padding: 5px 14px;
|
padding: 10px 14px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 5px 5px 0 0;
|
border-radius: 5px 5px 0 0;
|
||||||
|
|
||||||
.large-title{
|
.large-title{
|
||||||
font-size: 18px;
|
font-size: 20px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
padding: 0 50px 0 11px;
|
padding: 0 50px 0 11px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
@ -79,57 +70,33 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-button--text{
|
.el-button--text{
|
||||||
color: #666666;
|
color: #666666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alarm{
|
.alarm{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 25px;
|
right: 25px;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
|
|
||||||
.alarm-icon {
|
|
||||||
font-size: 22px;
|
|
||||||
color: #fff;
|
|
||||||
display: block;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
//红色背景颜色标题
|
//红色背景颜色标题
|
||||||
&.warning-card-container{
|
&.warning-card-container{
|
||||||
.el-card__header {
|
.el-card__header {
|
||||||
background-color: #b64040; //#fc6b69;
|
background-color: #fc6b69;
|
||||||
}
|
|
||||||
|
|
||||||
.work-status {
|
|
||||||
color: #b64040 !important;;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//绿色背景颜色标题
|
//绿色背景颜色标题
|
||||||
&.running-card-container {
|
&.running-card-container {
|
||||||
.el-card__header {
|
.el-card__header {
|
||||||
background-color: #40b6a5; //#05aea3;
|
background-color: #05aea3;
|
||||||
}
|
|
||||||
|
|
||||||
.work-status {
|
|
||||||
color: #40b6a5 !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//灰色背景颜色标题
|
//灰色背景颜色标题
|
||||||
&.timing-card-container {
|
&.timing-card-container {
|
||||||
.el-card__header {
|
.el-card__header {
|
||||||
background-color: #666666;
|
background-color: #666666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.work-status {
|
|
||||||
color: #666666 !important;;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -138,13 +105,11 @@
|
|||||||
&.common-card-container .el-card__header {
|
&.common-card-container .el-card__header {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
|
|
||||||
.time-range-header {
|
.time-range-header {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
}
|
}
|
||||||
@ -153,23 +118,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//描述样式 PCS、BMS总览、BMS电池簇页面公共样式
|
//描述样式 PCS、BMS总览、BMS电池簇页面公共样式
|
||||||
.descriptions-main{
|
.descriptions-main{
|
||||||
padding:24px;
|
padding:24px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&.descriptions-main-bg-color{
|
&.descriptions-main-bg-color{
|
||||||
background-color:#f1f5fc ;
|
background-color:#f1f5fc ;
|
||||||
|
|
||||||
.el-descriptions__body{
|
.el-descriptions__body{
|
||||||
background-color:#f1f5fc ;
|
background-color:#f1f5fc ;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-descriptions-item__cell[colspan='1']{
|
.el-descriptions-item__cell[colspan='1']{
|
||||||
width:25%
|
width:25%
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-descriptions__body .el-descriptions__table{
|
.el-descriptions__body .el-descriptions__table{
|
||||||
.descriptions-direction{
|
.descriptions-direction{
|
||||||
line-height: 19px;
|
line-height: 19px;
|
||||||
@ -177,76 +141,35 @@
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.descriptions-label{
|
.descriptions-label{
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
color: #666666;
|
color: #666666;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.danger{
|
.danger{
|
||||||
color:#FC6B69;
|
color:#FC6B69;
|
||||||
}
|
}
|
||||||
|
|
||||||
.save{
|
.save{
|
||||||
color:#09ADA3;
|
color:#09ADA3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.keep{
|
.keep{
|
||||||
color:#3C81FF;
|
color:#3C81FF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//电表、液冷公共样式
|
|
||||||
.device-info-row {
|
|
||||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
border-left: 1px solid #eee;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
|
|
||||||
.device-info-col {
|
|
||||||
padding: 10px 0;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #666666;
|
|
||||||
line-height: 14px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
border-right: 1px solid #eee;
|
|
||||||
|
|
||||||
.left {
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
display: block;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 18px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//公共表格样式
|
//公共表格样式
|
||||||
.el-table {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.common-table.el-table{
|
.common-table.el-table{
|
||||||
color:#333333;
|
color:#333333;
|
||||||
|
|
||||||
.el-table__header-wrapper th, .el-table__fixed-header-wrapper th {
|
.el-table__header-wrapper th, .el-table__fixed-header-wrapper th {
|
||||||
background: #f1f5fc;
|
background: #f1f5fc;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
|
||||||
.table-head {
|
.table-head {
|
||||||
color: #515a6e;
|
color: #515a6e;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.warning-status{
|
.warning-status{
|
||||||
color:#FC6B69;
|
color:#FC6B69;
|
||||||
|
|
||||||
&.circle::before {
|
&.circle::before {
|
||||||
content: "";
|
content: "";
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -262,35 +185,29 @@
|
|||||||
//二、三级菜单栏样式
|
//二、三级菜单栏样式
|
||||||
.ems-second-menu{
|
.ems-second-menu{
|
||||||
width:fit-content;
|
width:fit-content;
|
||||||
|
|
||||||
.el-menu-item{
|
.el-menu-item{
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
padding:0;
|
padding:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.el-menu--horizontal > .el-menu-item.is-active,&.el-menu--horizontal > .el-menu-item{
|
&.el-menu--horizontal > .el-menu-item.is-active,&.el-menu--horizontal > .el-menu-item{
|
||||||
border-bottom:none!important;
|
border-bottom:none!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-menu-item.is-active{
|
.el-menu-item.is-active{
|
||||||
background: #0366c1!important;
|
background: #0366c1!important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ems-third-menu-container{
|
.ems-third-menu-container{
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: 140px;
|
padding-left: 160px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
|
|
||||||
.ems-third-menu{
|
.ems-third-menu{
|
||||||
border-right: none;
|
border-right: none;
|
||||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top:20px;
|
||||||
left: 0;
|
left:20px;
|
||||||
|
|
||||||
.el-menu-item{
|
.el-menu-item{
|
||||||
line-height: 45px;
|
line-height: 45px;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
@ -298,12 +215,10 @@
|
|||||||
width: 125px;
|
width: 125px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-menu-item:hover{
|
.el-menu-item:hover{
|
||||||
background: #67b1ff!important;
|
background: #67b1ff!important;
|
||||||
color:#ffffff!important;
|
color:#ffffff!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-menu-item.is-active{
|
.el-menu-item.is-active{
|
||||||
background: #409eff!important;
|
background: #409eff!important;
|
||||||
}
|
}
|
||||||
@ -312,6 +227,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//按钮栏 选中样式
|
//按钮栏 选中样式
|
||||||
.ems-btns-group{
|
.ems-btns-group{
|
||||||
.activeBtn{
|
.activeBtn{
|
||||||
@ -326,7 +242,6 @@
|
|||||||
.select-container.el-form--inline .el-form-item{
|
.select-container.el-form--inline .el-form-item{
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
//红色背景颜色按钮
|
//红色背景颜色按钮
|
||||||
.alarm-btn,.alarm-btn:hover, .alarm-btn:focus{
|
.alarm-btn,.alarm-btn:hover, .alarm-btn:focus{
|
||||||
background-color: #FC6B69;
|
background-color: #FC6B69;
|
||||||
|
|||||||
@ -1,49 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-dialog :fullscreen="true" :append-to-body="true" :visible.sync="show" :show-close="false" top="0"
|
|
||||||
custom-class="big-data-dialog">
|
|
||||||
<img src="@/assets/images/ems/bigData.png" alt="">
|
|
||||||
<div class="close-btn" @click="show=false">
|
|
||||||
<i class="el-icon-close"></i>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.close-btn {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 10px;
|
|
||||||
font-size: 23px;
|
|
||||||
line-height: 20px;
|
|
||||||
color: rgba(176, 228, 255, 0.7);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
|
||||||
display: block;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style lang="scss">
|
|
||||||
.big-data-dialog {
|
|
||||||
.el-dialog__header {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog__body {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -2,7 +2,6 @@
|
|||||||
<div class="time-range">
|
<div class="time-range">
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
v-model="dateRange"
|
v-model="dateRange"
|
||||||
:class="miniTimePicker ? 'mini-date-picker' : ''"
|
|
||||||
type="daterange"
|
type="daterange"
|
||||||
range-separator="至"
|
range-separator="至"
|
||||||
start-placeholder="开始时间"
|
start-placeholder="开始时间"
|
||||||
@ -11,47 +10,16 @@
|
|||||||
:picker-options="pickerOptions"
|
:picker-options="pickerOptions"
|
||||||
end-placeholder="结束时间">
|
end-placeholder="结束时间">
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
<template v-if="!showIcon">
|
|
||||||
<el-button size="mini" style="margin-left: 10px;" :loading="loading" @click="reset">重置</el-button>
|
<el-button size="mini" style="margin-left: 10px;" :loading="loading" @click="reset">重置</el-button>
|
||||||
<el-button type="primary" size="mini" :loading="loading" @click="search">搜索</el-button>
|
<el-button type="primary" size="mini" :loading="loading" @click="search">搜索</el-button>
|
||||||
<el-button type="primary" size="mini" :loading="loading" @click="timeLine('before')">上一时段</el-button>
|
<el-button type="primary" size="mini" :loading="loading" @click="timeLine('before')">上一时段</el-button>
|
||||||
<el-button type="primary" size="mini" :loading="loading" @click="timeLine('next')" :disabled="disabledNextBtn">
|
<el-button type="primary" size="mini" :loading="loading" @click="timeLine('next')" :disabled="disabledNextBtn">下一时段</el-button>
|
||||||
下一时段
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<el-button class="btn-icon" icon="el-icon-refresh-right" circle size="mini" style="margin-left: 8px;"
|
|
||||||
:loading="loading"
|
|
||||||
@click="reset"></el-button>
|
|
||||||
<el-button class="btn-icon" type="primary" size="mini" icon="el-icon-search" circle :loading="loading"
|
|
||||||
@click="search"></el-button>
|
|
||||||
<el-button class="btn-icon" type="primary" size="mini" icon="el-icon-d-arrow-left" circle :loading="loading"
|
|
||||||
@click="timeLine('before')"></el-button>
|
|
||||||
<el-button class="btn-icon" type="primary" size="mini" icon="el-icon-d-arrow-right" circle :loading="loading"
|
|
||||||
@click="timeLine('next')"
|
|
||||||
:disabled="disabledNextBtn"></el-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {formatDate} from '@/filters/ems'
|
import {formatDate} from '@/filters/ems'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
|
||||||
showIcon: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
miniTimePicker: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed:{
|
computed:{
|
||||||
disabledNextBtn(){
|
disabledNextBtn(){
|
||||||
return new Date(this.dateRange[1]) >= new Date(this.defaultDateRange[1])
|
return new Date(this.dateRange[1]) >= new Date(this.defaultDateRange[1])
|
||||||
@ -95,8 +63,7 @@ export default {
|
|||||||
},
|
},
|
||||||
timeLine(type){
|
timeLine(type){
|
||||||
if(!this.dateRange || !this.dateRange[0] || !this.dateRange[1]) return
|
if(!this.dateRange || !this.dateRange[0] || !this.dateRange[1]) return
|
||||||
const nowStartTimes = new Date(this.dateRange[0]).getTime(), nowEndTimes = new Date(this.dateRange[1]).getTime(),
|
const nowStartTimes = new Date(this.dateRange[0]).getTime(),nowEndTimes = new Date(this.dateRange[1]).getTime(),maxTime = new Date(this.defaultDateRange[1]).getTime()
|
||||||
maxTime = new Date(this.defaultDateRange[1]).getTime()
|
|
||||||
const nowDis = nowEndTimes - nowStartTimes//用户当前选择时间差 可能=0
|
const nowDis = nowEndTimes - nowStartTimes//用户当前选择时间差 可能=0
|
||||||
//baseTime,maxTime 毫秒数
|
//baseTime,maxTime 毫秒数
|
||||||
const baseDis = 24 * 60 * 60 * 1000
|
const baseDis = 24 * 60 * 60 * 1000
|
||||||
@ -115,35 +82,19 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.time-range{
|
.time-range{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
::v-deep {
|
::v-deep {
|
||||||
|
|
||||||
.el-range-editor--medium .el-range__icon, .el-range-editor--medium .el-range__close-icon{
|
.el-range-editor--medium .el-range__icon, .el-range-editor--medium .el-range__close-icon{
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-range-editor--medium.el-input__inner{
|
.el-range-editor--medium.el-input__inner{
|
||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-range-editor--medium .el-range-separator{
|
.el-range-editor--medium .el-range-separator{
|
||||||
line-height: 22px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-button--mini{
|
.el-button--mini{
|
||||||
padding:3px 10px;
|
padding:3px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 展示icon的小组件
|
|
||||||
.btn-icon.el-button--mini {
|
|
||||||
padding: 3px 8px;
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
//小宽度时间选择框
|
|
||||||
.mini-date-picker {
|
|
||||||
width: 250px !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -32,13 +32,13 @@ export default {
|
|||||||
attr:'installCapacity'
|
attr:'installCapacity'
|
||||||
|
|
||||||
},{
|
},{
|
||||||
title:'总充电量(KWh)',
|
title:'总充电量(MWh)',
|
||||||
num:'',
|
num:'',
|
||||||
color:'#A696FF',
|
color:'#A696FF',
|
||||||
attr:'totalChargedCap'
|
attr:'totalChargedCap'
|
||||||
|
|
||||||
},{
|
},{
|
||||||
title:'总放电量(KWh)',
|
title:'总放电量(MWh)',
|
||||||
num:'',
|
num:'',
|
||||||
color:'#A696FF',
|
color:'#A696FF',
|
||||||
attr:'totalDischargedCap'
|
attr:'totalDischargedCap'
|
||||||
|
|||||||
@ -1,17 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
|
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||||
@toggleClick="toggleSideBar"/>
|
|
||||||
|
|
||||||
<breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" />
|
<breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" />
|
||||||
<top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" />
|
<top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" />
|
||||||
|
|
||||||
<div class="right-menu">
|
<div class="right-menu">
|
||||||
<template v-if="device!=='mobile'">
|
<template v-if="device!=='mobile'">
|
||||||
<div class="big-data-container">
|
|
||||||
<i class="el-icon-s-marketing big-data-icon" @click.stop="showBigDataImg"></i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<search id="header-search" class="right-menu-item" />
|
<search id="header-search" class="right-menu-item" />
|
||||||
|
|
||||||
|
|
||||||
@ -37,6 +32,7 @@
|
|||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
|
|
||||||
<div class="right-menu-item hover-effect setting" @click="setLayout" v-if="setting">
|
<div class="right-menu-item hover-effect setting" @click="setLayout" v-if="setting">
|
||||||
<svg-icon icon-class="more-up" />
|
<svg-icon icon-class="more-up" />
|
||||||
</div>
|
</div>
|
||||||
@ -82,12 +78,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
showBigDataImg() {
|
|
||||||
const routeUrl = this.$router.resolve({
|
|
||||||
path: '/screen'
|
|
||||||
})
|
|
||||||
window.open(routeUrl.href, '_blank')
|
|
||||||
},
|
|
||||||
toggleSideBar() {
|
toggleSideBar() {
|
||||||
this.$store.dispatch('app/toggleSideBar')
|
this.$store.dispatch('app/toggleSideBar')
|
||||||
},
|
},
|
||||||
@ -103,8 +93,7 @@ export default {
|
|||||||
this.$store.dispatch('LogOut').then(() => {
|
this.$store.dispatch('LogOut').then(() => {
|
||||||
location.href = '/index'
|
location.href = '/index'
|
||||||
})
|
})
|
||||||
}).catch(() => {
|
}).catch(() => {})
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -150,17 +139,6 @@ export default {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
|
|
||||||
.big-data-container {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 8px;
|
|
||||||
height: 100%;
|
|
||||||
font-size: 24px;
|
|
||||||
color: #5a5e66;
|
|
||||||
vertical-align: text-bottom;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,16 +6,16 @@ const getQuerySiteId= {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
'$route.query':{
|
'$store.state.ems.zdList':{
|
||||||
handler (newQuery,oldQuery) {
|
handler (newQuery,oldQuery) {
|
||||||
|
if(!newQuery || newQuery.length === 0){return}
|
||||||
// 参数变化处理
|
// 参数变化处理
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
const {siteId} =newQuery
|
const {siteId} =newQuery[0]
|
||||||
if(siteId){
|
|
||||||
this.siteId = siteId
|
this.siteId = siteId
|
||||||
siteId && this.init(newQuery.siteId)
|
siteId && this.init(newQuery.siteId)
|
||||||
console.log('mixin=>getQuerySiteId=>页面参数siteId发生了变化,this.siteId=',this.siteId)
|
console.log('watch站点列表返回数据newQuery=',newQuery)
|
||||||
}
|
console.log('设置页面siteId,this.siteId=',this.siteId)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
|
|||||||
@ -31,6 +31,7 @@ router.beforeEach((to, from, next) => {
|
|||||||
// 判断当前用户是否已拉取完user_info信息
|
// 判断当前用户是否已拉取完user_info信息
|
||||||
store.dispatch('GetInfo').then(() => {
|
store.dispatch('GetInfo').then(() => {
|
||||||
isRelogin.show = false
|
isRelogin.show = false
|
||||||
|
store.dispatch('getZdList')
|
||||||
store.dispatch('GenerateRoutes').then(accessRoutes => {
|
store.dispatch('GenerateRoutes').then(accessRoutes => {
|
||||||
// 根据roles权限生成可访问的路由表
|
// 根据roles权限生成可访问的路由表
|
||||||
router.addRoutes(accessRoutes) // 动态添加可访问路由表
|
router.addRoutes(accessRoutes) // 动态添加可访问路由表
|
||||||
|
|||||||
@ -7,166 +7,79 @@ export const dzjk = [
|
|||||||
path: '/dzjk',
|
path: '/dzjk',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
redirect: '/dzjk/home',
|
redirect: '/dzjk/home',
|
||||||
meta: {title: '单站监控', icon: 'dashboard',},
|
meta: { title: '单站监控', icon: 'server',},
|
||||||
alwaysShow: false,
|
alwaysShow: false,
|
||||||
name:'Dzjk',
|
name:'Dzjk',
|
||||||
hidden: true,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: '',
|
|
||||||
component: () => import('@/views/ems/dzjk/index'),
|
|
||||||
name: 'Dzjk',
|
|
||||||
redirect: '/dzjk/home',
|
|
||||||
hidden: true,
|
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '/dzjk/home',
|
path: '/dzjk/home',
|
||||||
component: () => import('@/views/ems/dzjk/home/index.vue'),
|
component: () => import('@/views/ems/dzjk/home/index.vue'),
|
||||||
name: 'DzjkHome',
|
name: 'DzjkHome',
|
||||||
meta: {
|
meta: { title: '站点首页',breadcrumb: false,activeMenu: '/dzjk/home',activeSecondMenuName:'DzjkHome' }
|
||||||
title: '站点首页',
|
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkHome'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/dzjk/zxlt',
|
path: '/dzjk/zxlt',
|
||||||
component: () => import('@/views/ems/dzjk/zxlt/index.vue'),
|
component: () => import('@/views/ems/dzjk/zxlt/index.vue'),
|
||||||
name: 'DzjkZxlt',
|
name: 'DzjkZxlt',
|
||||||
meta: {
|
meta: { title: '主线路图',breadcrumb: false,activeMenu: '/dzjk/zxlt',activeSecondMenuName:'DzjkZxlt' }
|
||||||
title: '主线路图',
|
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkZxlt'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/dzjk/sbjk',
|
path: '/dzjk/sbjk',
|
||||||
component: () => import('@/views/ems/dzjk/sbjk/index.vue'),
|
component: () => import('@/views/ems/dzjk/sbjk/index.vue'),
|
||||||
name: 'DzjkSbjk',
|
name: 'DzjkSbjk',
|
||||||
meta: {title: '设备监控', breadcrumb: false, activeMenu: '/dzjk'},
|
alwaysShow: false,
|
||||||
|
meta: { title: '设备监控',breadcrumb: false,activeMenu: '/dzjk/sbjk'},
|
||||||
|
hidden: false,
|
||||||
redirect: '/dzjk/sbjk/ssyx',
|
redirect: '/dzjk/sbjk/ssyx',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'ssyx',
|
path: 'ssyx',
|
||||||
component: () => import('@/views/ems/dzjk/sbjk/ssyx/index.vue'),
|
component: () => import('@/views/ems/dzjk/sbjk/ssyx/index.vue'),
|
||||||
name: 'DzjkSbjkSsyx',
|
name: 'DzjkSbjkSsyx',
|
||||||
meta: {
|
hidden: true,
|
||||||
title: '实时运行',
|
meta: { title: '实时运行',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk',deviceCategory:'SSYX'},
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkSbjk',
|
|
||||||
deviceCategory: 'SSYX'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'ems',
|
|
||||||
component: () => import('@/views/ems/dzjk/sbjk/ems/index.vue'),
|
|
||||||
name: 'DzjkSbjkEms',
|
|
||||||
meta: {
|
|
||||||
title: 'EMS',
|
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkSbjk',
|
|
||||||
deviceCategory: 'EMS'
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'pcs',
|
path: 'pcs',
|
||||||
component: () => import('@/views/ems/dzjk/sbjk/pcs/index.vue'),
|
component: () => import('@/views/ems/dzjk/sbjk/pcs/index.vue'),
|
||||||
name: 'DzjkSbjkPcs',
|
name: 'DzjkSbjkPcs',
|
||||||
meta: {
|
hidden: true,
|
||||||
title: 'PCS',
|
meta: { title: 'PCS',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk',deviceCategory:'PCS'},
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkSbjk',
|
|
||||||
deviceCategory: 'PCS'
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'bmszl',
|
path: 'bmszl',
|
||||||
component: () => import('@/views/ems/dzjk/sbjk/bmszl/index.vue'),
|
component: () => import('@/views/ems/dzjk/sbjk/bmszl/index.vue'),
|
||||||
name: 'DzjkSbjkBmszl',
|
name: 'DzjkSbjkBmszl',
|
||||||
meta: {
|
hidden: true,
|
||||||
title: 'BMS总览',
|
meta: { title: 'BMS总览',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk', deviceCategory:'STACK'},
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkSbjk',
|
|
||||||
deviceCategory: 'STACK'
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'bmsdcc',
|
path: 'bmsdcc',
|
||||||
component: () => import('@/views/ems/dzjk/sbjk/bmsdcc/index.vue'),
|
component: () => import('@/views/ems/dzjk/sbjk/bmsdcc/index.vue'),
|
||||||
name: 'DzjkSbjkBmsdcc',
|
name: 'DzjkSbjkBmsdcc',
|
||||||
meta: {
|
hidden: true,
|
||||||
title: 'BMS电池簇',
|
meta: { title: 'BMS电池簇',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk',deviceCategory:'CLUSTER'},
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkSbjk',
|
|
||||||
deviceCategory: 'CLUSTER'
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'dtdc',
|
path: 'dtdc',
|
||||||
component: () => import('@/views/ems/dzjk/sbjk/dtdc/index.vue'),
|
component: () => import('@/views/ems/dzjk/sbjk/dtdc/index.vue'),
|
||||||
name: 'DzjkSbjkDtdc',
|
name: 'DzjkSbjkDtdc',
|
||||||
meta: {
|
hidden: true,
|
||||||
title: 'BMS单体电池',
|
meta: { title: '单体电池',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk',deviceCategory:'BATTERY'},
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkSbjk',
|
|
||||||
deviceCategory: 'BATTERY'
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'db',
|
path: 'db',
|
||||||
component: () => import('@/views/ems/dzjk/sbjk/db/index.vue'),
|
component: () => import('@/views/ems/dzjk/sbjk/db/index.vue'),
|
||||||
name: 'DzjkSbjkDb',
|
name: 'DzjkSbjkDb',
|
||||||
meta: {
|
hidden: true,
|
||||||
title: '电表',
|
meta: { title: '电表',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk',deviceCategory:'AMMETER'},
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkSbjk',
|
|
||||||
deviceCategory: 'AMMETER'
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'yl',
|
path: 'yl',
|
||||||
component: () => import('@/views/ems/dzjk/sbjk/yl/index.vue'),
|
component: () => import('@/views/ems/dzjk/sbjk/yl/index.vue'),
|
||||||
name: 'DzjkSbjkYl',
|
name: 'DzjkSbjkYl',
|
||||||
meta: {
|
hidden: true,
|
||||||
title: '冷却',
|
meta: { title: '液冷',breadcrumb: false,activeMenu: '/dzjk/sbjk',activeSecondMenuName:'DzjkSbjk',deviceCategory:'COOLING'},
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkSbjk',
|
|
||||||
deviceCategory: 'COOLING'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'dh',
|
|
||||||
component: () => import('@/views/ems/dzjk/sbjk/dh/index.vue'),
|
|
||||||
name: 'DzjkSbjkDh',
|
|
||||||
meta: {
|
|
||||||
title: '动环',
|
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkSbjk',
|
|
||||||
deviceCategory: 'DH'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'xf',
|
|
||||||
component: () => import('@/views/ems/dzjk/sbjk/xf/index.vue'),
|
|
||||||
name: 'DzjkSbjkXf',
|
|
||||||
meta: {
|
|
||||||
title: '消防',
|
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkSbjk',
|
|
||||||
deviceCategory: 'XF'
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@ -174,128 +87,66 @@ export const dzjk = [
|
|||||||
path: '/dzjk/gzgj',
|
path: '/dzjk/gzgj',
|
||||||
component: () => import('@/views/ems/dzjk/gzgj/index.vue'),
|
component: () => import('@/views/ems/dzjk/gzgj/index.vue'),
|
||||||
name: 'DzjkGzgj',
|
name: 'DzjkGzgj',
|
||||||
meta: {
|
meta: { title: '故障告警',breadcrumb: false,activeMenu: '/dzjk/gzgj',activeSecondMenuName:'DzjkGzgj' }
|
||||||
title: '故障告警',
|
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkGzgj'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/dzjk/tjbb',
|
path: '/dzjk/tjbb',
|
||||||
component: () => import('@/views/ems/dzjk/tjbb/index.vue'),
|
component: () => import('@/views/ems/dzjk/tjbb/index.vue'),
|
||||||
name: 'DzjkTjbb',
|
name: 'DzjkTjbb',
|
||||||
meta: {title: '统计报表', breadcrumb: false, activeMenu: '/dzjk'},
|
alwaysShow: false,
|
||||||
|
meta: {title: '统计报表', breadcrumb: false, activeMenu: '/dzjk/tjbb'},
|
||||||
|
hidden: false,
|
||||||
redirect: '/dzjk/tjbb/gltj',
|
redirect: '/dzjk/tjbb/gltj',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'gltj',
|
path: 'gltj',
|
||||||
component: () => import('@/views/ems/dzjk/tjbb/gltj/index.vue'),
|
component: () => import('@/views/ems/dzjk/tjbb/gltj/index.vue'),
|
||||||
name: 'DzjkTjbbGltj',
|
name: 'DzjkTjbbGltj',
|
||||||
meta: {
|
hidden: true,
|
||||||
title: '运行统计',
|
meta: { title: '概率统计',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'},
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkTjbb'
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'glqx',
|
path: 'glqx',
|
||||||
component: () => import('@/views/ems/dzjk/tjbb/glqx/index.vue'),
|
component: () => import('@/views/ems/dzjk/tjbb/glqx/index.vue'),
|
||||||
name: 'DzjkTjbbGlqx',
|
name: 'DzjkTjbbGlqx',
|
||||||
meta: {
|
hidden: true,
|
||||||
title: '功率曲线',
|
meta: { title: '功率曲线',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'},
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkTjbb'
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'pcsqx',
|
path: 'pcsqx',
|
||||||
component: () => import('@/views/ems/dzjk/tjbb/pcsqx/index.vue'),
|
component: () => import('@/views/ems/dzjk/tjbb/pcsqx/index.vue'),
|
||||||
name: 'DzjkTjbbPcsqx',
|
name: 'DzjkTjbbPcsqx',
|
||||||
meta: {
|
hidden: true,
|
||||||
title: 'PCS曲线',
|
meta: { title: 'PCS曲线',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'},
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkTjbb'
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'dcdqx',
|
path: 'dcdqx',
|
||||||
component: () => import('@/views/ems/dzjk/tjbb/dcdqx/index.vue'),
|
component: () => import('@/views/ems/dzjk/tjbb/dcdqx/index.vue'),
|
||||||
name: 'DzjkTjbbDcdqx',
|
name: 'DzjkTjbbDcdqx',
|
||||||
meta: {
|
hidden: true,
|
||||||
title: '电池堆曲线',
|
meta: { title: '电池堆曲线',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'},
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkTjbb'
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'dcwd',
|
path: 'dcwd',
|
||||||
component: () => import('@/views/ems/dzjk/tjbb/dcwd/index.vue'),
|
component: () => import('@/views/ems/dzjk/tjbb/dcwd/index.vue'),
|
||||||
name: 'DzjkTjbbDcwd',
|
name: 'DzjkTjbbDcwd',
|
||||||
meta: {
|
hidden: true,
|
||||||
title: '电池温度',
|
meta: { title: '电池温度',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'},
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkTjbb'
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'dbbb',
|
path: 'dbbb',
|
||||||
component: () => import('@/views/ems/dzjk/tjbb/dbbb/index.vue'),
|
component: () => import('@/views/ems/dzjk/tjbb/dbbb/index.vue'),
|
||||||
name: 'DzjkTjbbDbbb',
|
name: 'DzjkTjbbDbbb',
|
||||||
meta: {
|
hidden: true,
|
||||||
title: '电表报表',
|
meta: { title: '电表报表',breadcrumb: false,activeMenu: '/dzjk/tjbb',activeSecondMenuName:'DzjkTjbb'},
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkTjbb'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'sybb',
|
|
||||||
component: () => import('@/views/ems/dzjk/tjbb/sybb/index.vue'),
|
|
||||||
name: 'DzjkTjbbSybb',
|
|
||||||
meta: {
|
|
||||||
title: '收益报表',
|
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkTjbb'
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/dzjk/clpz',
|
path: '/dzjk/clpz',
|
||||||
component: () => import('@/views/ems/dzjk/clpz/index.vue'),
|
|
||||||
name: 'DzjkClpz',
|
|
||||||
meta: {title: '策略配置', breadcrumb: false, activeMenu: '/dzjk'},
|
|
||||||
redirect: '/dzjk/clpz/clyx',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'clyx',
|
|
||||||
component: () => import('@/views/ems/dzjk/clpz/clyx/index.vue'),
|
component: () => import('@/views/ems/dzjk/clpz/clyx/index.vue'),
|
||||||
name: 'DzjkClpzClyx',
|
name: 'DzjkClpz',
|
||||||
meta: {
|
meta: {title: '策略配置', breadcrumb: false, activeMenu: '/dzjk/clpz'},
|
||||||
title: '策略运行',
|
|
||||||
breadcrumb: false,
|
|
||||||
activeMenu: '/dzjk',
|
|
||||||
activeSecondMenuName: 'DzjkClpz'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// path: 'xftg',
|
|
||||||
// component: () => import('@/views/ems/dzjk/clpz/xftg/index.vue'),
|
|
||||||
// hidden:true,
|
|
||||||
// breadcrumb: false,
|
|
||||||
// name: 'DzjkClpzXftg',
|
|
||||||
// meta: { title: '削峰填谷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkClpz'},
|
|
||||||
// }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -52,11 +52,6 @@ export const constantRoutes = [
|
|||||||
component: () => import('@/views/register'),
|
component: () => import('@/views/register'),
|
||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/screen',
|
|
||||||
component: () => import('@/views/screen/index'),
|
|
||||||
hidden: true
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/404',
|
path: '/404',
|
||||||
component: () => import('@/views/error/404'),
|
component: () => import('@/views/error/404'),
|
||||||
|
|||||||
@ -1,22 +1,12 @@
|
|||||||
|
import {getAllSites} from '@/api/ems/zddt'
|
||||||
import {getAlarmDetailList,getSiteAllDeviceCategory} from'@/api/ems/dzjk'
|
import {getAlarmDetailList,getSiteAllDeviceCategory} from'@/api/ems/dzjk'
|
||||||
|
|
||||||
const ems = {
|
const ems = {
|
||||||
state: {
|
state: {
|
||||||
dzjkAlarmLighting:false,//单站监控 告警统计红点标志
|
dzjkAlarmLighting:false,//单站监控 告警统计红点标志
|
||||||
zdList:[],
|
zdList:[],
|
||||||
zdDeviceCategoryOptions:{},//站点各个站点包含的设备种类 {021_DDS_01:["BATTERY","CLUSTER","STACK", "DH", "AMMETER", "PCS", "XF"],021_DDS_02:[]...}
|
zdDeviceCategoryOptions:{},//站点各个站点包含的设备种类 {021_DDS_01:["BATTERY","CLUSTER","STACK", "DH", "AMMETER", "PCS", "XF"],021_DDS_02:[]...}
|
||||||
CLUSTERWorkStatusOptions: {'0': '静置', '1': '充电', '2': '放电', '3': '待机', '5': '运行', '9': "故障"},//电池簇工作状态
|
workStatusOptions:{'0':'正常','1':'异常','2':'停止'},//工作状态
|
||||||
PCSWorkStatusOptions: {'0': '运行', '1': '停机', '2': '故障', '3': '待机', '4': '充电', '5': '放电'},//PCS工作状态
|
deviceStatusOptions:{'0':'离线','1':'待机','2':'运行','3':'故障','4':'停机'},//设备状态
|
||||||
STACKWorkStatusOptions: {
|
|
||||||
"0": "静置",
|
|
||||||
"1": "充电",
|
|
||||||
"2": "放电",
|
|
||||||
"3": "浮充",
|
|
||||||
'4': '待机',
|
|
||||||
'5': '运行',
|
|
||||||
'9': "故障"
|
|
||||||
},//STACKBMS总览工作状态
|
|
||||||
deviceStatusOptions: {'0': '离线', '1': '在线'},//设备状态
|
|
||||||
gridStatusOptions:{'0':'并网','1':'未并网'},//并网状态
|
gridStatusOptions:{'0':'并网','1':'未并网'},//并网状态
|
||||||
controlModeOptions:{'0':'远程','1':'本地'},//控制模式
|
controlModeOptions:{'0':'远程','1':'本地'},//控制模式
|
||||||
warnOptions:{0:'正常', 1:'中断', 2:'不在线',3:'异常'},//告警状态
|
warnOptions:{0:'正常', 1:'中断', 2:'不在线',3:'异常'},//告警状态
|
||||||
@ -27,7 +17,8 @@ const ems = {
|
|||||||
deviceTypeOptions:{'TCP':'TCP','RTU':'RTU'},//设备类型
|
deviceTypeOptions:{'TCP':'TCP','RTU':'RTU'},//设备类型
|
||||||
ticketStatusOptions:{1:'待处理', 2:'处理中', 3:'已处理'},//工单处理状态
|
ticketStatusOptions:{1:'待处理', 2:'处理中', 3:'已处理'},//工单处理状态
|
||||||
strategyStatusOptions:{'0':'未启用', '1':'已运行', '2':'已暂停', '3':'禁用', '4':'删除'},//策略状态
|
strategyStatusOptions:{'0':'未启用', '1':'已运行', '2':'已暂停', '3':'禁用', '4':'删除'},//策略状态
|
||||||
chargeStatusOptions: {'1': '充电', '2': '待机', '3': '放电'},//冲放状态
|
chargeStatusOptions:{'1':'充电','2':'待机'},//冲放状态
|
||||||
|
deviceCategoryOptions:{'PCS':'PCS','STACK':'电池堆','CLUSTER':'电池簇','COOLING':'液冷','BATTERY':'单体电池','AMMETER':'电表'},//设备类别
|
||||||
comparisonOperatorOptions:{'>':'>','<':'<','=':'=','>=':'>=','<=':'<='},
|
comparisonOperatorOptions:{'>':'>','<':'<','=':'=','>=':'>=','<=':'<='},
|
||||||
relationWithPoint:{'||':'||','&&':'&&'}
|
relationWithPoint:{'||':'||','&&':'&&'}
|
||||||
},
|
},
|
||||||
@ -43,18 +34,17 @@ const ems = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
|
getZdList({commit,state}){
|
||||||
|
if(state.zdList.length === 0){
|
||||||
|
getAllSites().then(response => {
|
||||||
|
commit('SET_ZD_LIST', response?.data || [])
|
||||||
|
console.log('store action getZdList 获取站点数据',state.zdList)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
//查询站点的所有待处理0的告警 存在展示红点标志
|
//查询站点的所有待处理0的告警 存在展示红点标志
|
||||||
getSiteAlarmNum({state,commit},siteId){
|
getSiteAlarmNum({state,commit},siteId){
|
||||||
getAlarmDetailList({
|
getAlarmDetailList({status:0,siteId,pageSize:10,pageNum:1,deviceId:'',alarmLevel:'',alarmStartTime:'',alarmEndTime:''}).then(response=>{
|
||||||
status: 0,
|
|
||||||
siteId,
|
|
||||||
pageSize: 10,
|
|
||||||
pageNum: 1,
|
|
||||||
deviceId: '',
|
|
||||||
alarmLevel: '',
|
|
||||||
alarmStartTime: '',
|
|
||||||
alarmEndTime: ''
|
|
||||||
}).then(response => {
|
|
||||||
commit('SET_DZJK_ALARM_LIGHTING',!!response?.total || false)
|
commit('SET_DZJK_ALARM_LIGHTING',!!response?.total || false)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|||||||
@ -34,11 +34,12 @@ const permission = {
|
|||||||
return new Promise(resolve => {
|
return new Promise(resolve => {
|
||||||
// 向后端请求路由数据
|
// 向后端请求路由数据
|
||||||
getRouters().then(res => {
|
getRouters().then(res => {
|
||||||
let hasDzjk = false
|
let sysDzjk = -1
|
||||||
if(res?.data){
|
if(res?.data){
|
||||||
res.data.forEach(i=>{
|
sysDzjk = res.data.findIndex(i=>{
|
||||||
i.children && i.children.find(j=>j.path.indexOf('dzjk')>-1) && (hasDzjk=true)
|
return i.children && i.children.find(j=>j.path.indexOf('dzjk')>-1)
|
||||||
})
|
})
|
||||||
|
if(sysDzjk>-1) res.data.splice(sysDzjk,1)
|
||||||
}
|
}
|
||||||
const sdata = JSON.parse(JSON.stringify(res.data))
|
const sdata = JSON.parse(JSON.stringify(res.data))
|
||||||
const rdata = JSON.parse(JSON.stringify(res.data))
|
const rdata = JSON.parse(JSON.stringify(res.data))
|
||||||
@ -47,7 +48,7 @@ const permission = {
|
|||||||
const asyncRoutes = filterDynamicRoutes(dynamicRoutes)
|
const asyncRoutes = filterDynamicRoutes(dynamicRoutes)
|
||||||
rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
|
rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
|
||||||
router.addRoutes(asyncRoutes)
|
router.addRoutes(asyncRoutes)
|
||||||
if(!hasDzjk){
|
if(sysDzjk === -1){
|
||||||
const index = constantRoutes.findIndex(i=>i.path.indexOf('dzjk')>-1)
|
const index = constantRoutes.findIndex(i=>i.path.indexOf('dzjk')>-1)
|
||||||
constantRoutes.splice(index,1)
|
constantRoutes.splice(index,1)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-loading="loading">
|
<div v-loading="loading" class="ems-dashboard-editor-container ems-content-container-padding">
|
||||||
<template v-if="!showTemp">
|
<template v-if="!showTemp">
|
||||||
<el-button v-if="!showTemp" type="primary" plain @click="settingStrategy" style="margin-bottom: 20px;">新增策略</el-button>
|
<el-button v-if="!showTemp" type="primary" plain @click="settingStrategy" style="margin-bottom: 20px;">新增策略</el-button>
|
||||||
<cl-container v-for="(item,index) in list" :key="index+'clContainer'" :info="item" :hide-setting-btn="showTemp" class="contain" @update="init" @showSetting="settingStrategy(item)">
|
<cl-container v-for="(item,index) in list" :key="index+'clContainer'" :info="item" :hide-setting-btn="showTemp" class="contain" @update="init" @showSetting="settingStrategy(item)">
|
||||||
|
|||||||
@ -1,53 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="ems-dashboard-editor-container ems-third-menu-container">
|
|
||||||
<el-menu
|
|
||||||
class="ems-third-menu"
|
|
||||||
:default-active="$route.name"
|
|
||||||
background-color="#ffffff"
|
|
||||||
text-color="#666666"
|
|
||||||
active-text-color="#ffffff"
|
|
||||||
>
|
|
||||||
<el-menu-item :index="item.name" v-for="(item,index) in childrenRoute" :key="index+'clpzChildrenRoute'">
|
|
||||||
<router-link style="height: 100%;width: 100%;display: block;" :to="{path:item.path,query:$route.query}">
|
|
||||||
{{item.meta.title}}
|
|
||||||
</router-link>
|
|
||||||
</el-menu-item>
|
|
||||||
</el-menu>
|
|
||||||
|
|
||||||
<div class="ems-content-container ems-content-container-padding clpz-ems-content-container">
|
|
||||||
<keep-alive>
|
|
||||||
<router-view></router-view>
|
|
||||||
</keep-alive>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { dzjk } from '@/router/ems'
|
|
||||||
const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DzjkClpz').children.filter(item=>!item?.hidden)//获取到统计报表下面的字路由
|
|
||||||
console.log('设备监控子路由',childrenRoute)
|
|
||||||
export default {
|
|
||||||
name:'DzjkClpz',
|
|
||||||
data(){
|
|
||||||
return {
|
|
||||||
childrenRoute,
|
|
||||||
activeMenu:''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log('当前统计报表页面路由',this.$route)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.clpz-ems-content-container{
|
|
||||||
margin-top:0;
|
|
||||||
padding-top:0;
|
|
||||||
padding-right: 0;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,6 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog :visible.sync="dialogTableVisible" class="ems-dialog add-template-dialog"
|
<el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" :title="mode === 'add'?'新增模板':`编辑模板` ">
|
||||||
:title="mode === 'add'?'新增模板':`编辑模板` ">
|
|
||||||
<el-form ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="100px">
|
<el-form ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="100px">
|
||||||
<el-form-item label="模板名称" prop="templateName">
|
<el-form-item label="模板名称" prop="templateName">
|
||||||
<el-input v-model="formData.templateName" placeholder="请输入" clearable :style="{width: '100%'}">
|
<el-input v-model="formData.templateName" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||||
@ -22,52 +21,36 @@
|
|||||||
<!-- 新增时间段表单-->
|
<!-- 新增时间段表单-->
|
||||||
<el-collapse-transition>
|
<el-collapse-transition>
|
||||||
<el-card v-show="showAddTime" shadow="always" class="common-card-container" style="margin-top:25px;">
|
<el-card v-show="showAddTime" shadow="always" class="common-card-container" style="margin-top:25px;">
|
||||||
<el-form class="add-time-form transition-box" ref="addTimeForm" :model="formInline" :rules="formInlineRule"
|
<el-form class="add-time-form transition-box" ref="addTimeForm" :model="formInline" :rules="formInlineRule" label-width="100px" style="margin-top:25px">
|
||||||
label-width="100px" style="margin-top:25px">
|
<el-form-item label="开始时间" prop="startTime">
|
||||||
<!-- <el-form-item label="开始时间" prop="startTime">-->
|
<el-time-select
|
||||||
<!-- <el-time-select-->
|
placeholder="开始时间"
|
||||||
<!-- placeholder="开始时间"-->
|
v-model="formInline.startTime"
|
||||||
<!-- v-model="formInline.startTime"-->
|
:picker-options="{
|
||||||
<!-- :picker-options="{-->
|
start: '00:00',
|
||||||
<!-- start: '00:00',-->
|
step: '01:00',
|
||||||
<!-- step: '00:01',-->
|
end: '23:00',
|
||||||
<!-- end: '23:00',-->
|
}">
|
||||||
<!-- }">-->
|
</el-time-select>
|
||||||
<!-- </el-time-select>-->
|
</el-form-item>
|
||||||
<!-- </el-form-item>-->
|
<el-form-item label="结束时间" prop="endTime">
|
||||||
<!-- <el-form-item label="结束时间" prop="endTime">-->
|
<el-time-select
|
||||||
<!-- <el-time-select-->
|
placeholder="结束时间"
|
||||||
<!-- placeholder="结束时间"-->
|
v-model="formInline.endTime"
|
||||||
<!-- v-model="formInline.endTime"-->
|
:picker-options="{
|
||||||
<!-- :picker-options="{-->
|
start: '00:00',
|
||||||
<!-- start: '00:00',-->
|
step: '01:00',
|
||||||
<!-- step: '00:01',-->
|
end: '23:00',
|
||||||
<!-- end: '23:00',-->
|
minTime: formInline.startTime
|
||||||
<!-- minTime: formInline.startTime-->
|
}">
|
||||||
<!-- }">-->
|
</el-time-select>
|
||||||
<!-- </el-time-select>-->
|
|
||||||
<!-- </el-form-item>-->
|
|
||||||
<el-form-item label="时间范围" prop="timeRange">
|
|
||||||
<el-time-picker
|
|
||||||
is-range
|
|
||||||
v-model="formInline.timeRange"
|
|
||||||
range-separator="至"
|
|
||||||
start-placeholder="开始时间"
|
|
||||||
end-placeholder="结束时间"
|
|
||||||
placeholder="选择时间范围"
|
|
||||||
format="HH:mm"
|
|
||||||
value-format="HH:mm"
|
|
||||||
:style="{width: '100%'}">
|
|
||||||
</el-time-picker>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="冲放功率" prop="chargeDischargePower">
|
<el-form-item label="冲放功率" prop="chargeDischargePower">
|
||||||
<el-input v-model="formInline.chargeDischargePower" placeholder="请输入"
|
<el-input v-model="formInline.chargeDischargePower" placeholder="请输入"></el-input>
|
||||||
:style="{width: '100%'}"></el-input>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="充电状态" prop="chargeStatus">
|
<el-form-item label="充电状态" prop="chargeStatus">
|
||||||
<el-select v-model="formInline.chargeStatus" placeholder="请选择" :style="{width: '100%'}">
|
<el-select v-model="formInline.chargeStatus" placeholder="请选择">
|
||||||
<el-option v-for="(value,key) in chargeStatusOptions" :key="key+'chargeStatusOptions'" :label="value"
|
<el-option v-for="(value,key) in chargeStatusOptions" :key="key+'chargeStatusOptions'" :label="value" :value="key"></el-option>
|
||||||
:value="key"></el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
@ -81,6 +64,7 @@
|
|||||||
:data="tableData"
|
:data="tableData"
|
||||||
border
|
border
|
||||||
style="width: 100%;margin-top:25px">
|
style="width: 100%;margin-top:25px">
|
||||||
|
<!-- todo 如果要在span-method中使用column.property 在表格中必须定义prop="xxx"属性-->
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="startTime"
|
prop="startTime"
|
||||||
label="开始时间">
|
label="开始时间">
|
||||||
@ -123,18 +107,13 @@
|
|||||||
<script>
|
<script>
|
||||||
import {mapState} from 'vuex'
|
import {mapState} from 'vuex'
|
||||||
import {addStrategyTemp,editStrategyTemp,getStrategyTempDetail} from '@/api/ems/dzjk'
|
import {addStrategyTemp,editStrategyTemp,getStrategyTempDetail} from '@/api/ems/dzjk'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
inject:['$home'],
|
inject:['$home'],
|
||||||
data() {
|
data() {
|
||||||
const now = new Date()
|
|
||||||
const year = now.getFullYear(), month = now.getMonth(), day = now.getDate()
|
|
||||||
const range = [new Date(year, month, day, 0), new Date(year, month, day, 23)]
|
|
||||||
return {
|
return {
|
||||||
mode:'',
|
mode:'',
|
||||||
editTempId:'',
|
editTempId:'',
|
||||||
dialogTableVisible:false,
|
dialogTableVisible:false,
|
||||||
secondRange: range,
|
|
||||||
formData: {
|
formData: {
|
||||||
templateName: '',
|
templateName: '',
|
||||||
sdcLimit: false,
|
sdcLimit: false,
|
||||||
@ -158,14 +137,17 @@ export default {
|
|||||||
},
|
},
|
||||||
showAddTime: false,
|
showAddTime: false,
|
||||||
formInline:{
|
formInline:{
|
||||||
timeRange: range,
|
startTime:'',endTime:'',chargeDischargePower:'',chargeStatus:''
|
||||||
chargeDischargePower: '',
|
|
||||||
chargeStatus: ''
|
|
||||||
},
|
},
|
||||||
formInlineRule:{
|
formInlineRule:{
|
||||||
timeRange: [{
|
startTime: [{
|
||||||
required: true,
|
required: true,
|
||||||
message: '请选择时间范围',
|
message: '请选择开始时间',
|
||||||
|
trigger: 'change'
|
||||||
|
}],
|
||||||
|
endTime: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择结束时间',
|
||||||
trigger: 'change'
|
trigger: 'change'
|
||||||
}],
|
}],
|
||||||
chargeDischargePower: [{
|
chargeDischargePower: [{
|
||||||
@ -173,7 +155,7 @@ export default {
|
|||||||
message: '请输入冲放功率',
|
message: '请输入冲放功率',
|
||||||
trigger: 'blur'
|
trigger: 'blur'
|
||||||
},
|
},
|
||||||
{pattern: /^-?\d*\.?\d*$/, message: '请输入合法数字或小数'}
|
{ pattern: /^(0|[1-9]\d*)(\.\d+)?$/, message: '请输入合法数字或小数' }
|
||||||
],
|
],
|
||||||
chargeStatus:[{
|
chargeStatus:[{
|
||||||
required: true,
|
required: true,
|
||||||
@ -190,6 +172,20 @@ export default {
|
|||||||
chargeStatusOptions: state => state?.ems?.chargeStatusOptions || {},
|
chargeStatusOptions: state => state?.ems?.chargeStatusOptions || {},
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
"formInline.startTime":{
|
||||||
|
handler(newVal){
|
||||||
|
if(newVal && this.formInline.endTime){
|
||||||
|
const endTime = parseInt((this.formInline.endTime).split(':')[0] || 0)
|
||||||
|
const startTime =parseInt(newVal.split(':')[0])
|
||||||
|
if(endTime<=startTime){
|
||||||
|
this.formInline.endTime = `${startTime+1 <=9 ? '0'+(startTime+1) : startTime+1}:00`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep:true
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
changeSiteId(){
|
changeSiteId(){
|
||||||
this.dialogTableVisible=false
|
this.dialogTableVisible=false
|
||||||
@ -202,8 +198,8 @@ export default {
|
|||||||
sdcUp: '',
|
sdcUp: '',
|
||||||
}
|
}
|
||||||
this.formInline={
|
this.formInline={
|
||||||
timeRange: this.secondRange, chargeDischargePower: '', chargeStatus: ''
|
startTime:'',endTime:'',chargeDischargePower:'',chargeStatus:''
|
||||||
}//startTime: '', endTime: '',
|
}
|
||||||
this.showAddTime = false
|
this.showAddTime = false
|
||||||
this.tableData=[]
|
this.tableData=[]
|
||||||
},
|
},
|
||||||
@ -242,18 +238,14 @@ export default {
|
|||||||
cancelAddTime(){
|
cancelAddTime(){
|
||||||
this.$refs.addTimeForm.resetFields()
|
this.$refs.addTimeForm.resetFields()
|
||||||
this.showAddTime=false
|
this.showAddTime=false
|
||||||
this.formInline = {timeRange: this.secondRange, chargeDischargePower: '', chargeStatus: ''}//startTime: '', endTime: '',
|
this.formInline = {startTime:'',endTime:'',chargeDischargePower:'',chargeStatus:''}
|
||||||
},
|
},
|
||||||
saveTime(){
|
saveTime(){
|
||||||
//表单校验,校验成功,添加到tableData里
|
//表单校验,校验成功,添加到tableData里
|
||||||
this.$refs.addTimeForm.validate(valid => {
|
this.$refs.addTimeForm.validate(valid => {
|
||||||
if (!valid) return
|
if (!valid) return
|
||||||
const {timeRange: [startTime, endTime], chargeDischargePower, chargeStatus} = this.formInline
|
this.tableData.push(JSON.parse(JSON.stringify(this.formInline)));
|
||||||
|
this.$nextTick(() => {this.cancelAddTime()})
|
||||||
this.tableData.push({startTime, endTime, chargeDischargePower, chargeStatus})
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.cancelAddTime()
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
deleteRow(index){
|
deleteRow(index){
|
||||||
@ -262,20 +254,33 @@ export default {
|
|||||||
saveDialog() {
|
saveDialog() {
|
||||||
this.$refs.addTempForm.validate(valid => {
|
this.$refs.addTempForm.validate(valid => {
|
||||||
if (!valid) return
|
if (!valid) return
|
||||||
|
//校验时间选择范围是否冲突
|
||||||
|
let status = true
|
||||||
|
this.tableData.forEach((outer,outerIndex)=>{
|
||||||
|
const {startTime, endTime}=outer
|
||||||
|
const outerStart = parseInt(startTime),outerEnd = parseInt(endTime)
|
||||||
|
if(outerStart>outerEnd){
|
||||||
|
status = false
|
||||||
|
}else{
|
||||||
|
this.tableData.forEach((inner,innerIndex)=>{
|
||||||
|
if(innerIndex !== outerIndex){
|
||||||
|
const {startTime:innerStartTime, endTime:innerEndTime}=inner
|
||||||
|
const innerStart = parseInt(innerStartTime),innerEnd = parseInt(innerEndTime)
|
||||||
|
if((innerStart<outerStart && innerEnd>outerEnd) || !((innerStart<outerStart && innerEnd<=outerStart) || (innerStart>=outerEnd && innerEnd>outerEnd))){
|
||||||
|
status=false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if(!status){
|
||||||
|
return this.$message.error('时间选择范围冲突');
|
||||||
|
}
|
||||||
const {templateName,sdcLimit,sdcDown,sdcUp} = this.formData
|
const {templateName,sdcLimit,sdcDown,sdcUp} = this.formData
|
||||||
const {siteId,updateStrategyId} =this.$home
|
const {siteId,updateStrategyId} =this.$home
|
||||||
const {tableData} = this
|
const {tableData} = this
|
||||||
if(this.mode==='edit'){
|
if(this.mode==='edit'){
|
||||||
editStrategyTemp({
|
editStrategyTemp({siteId,strategyId:updateStrategyId,templateId:this.editTempId,templateName,sdcLimit,sdcDown,sdcUp,timeConfigList:tableData}).then(response=>{
|
||||||
siteId,
|
|
||||||
strategyId: updateStrategyId,
|
|
||||||
templateId: this.editTempId,
|
|
||||||
templateName,
|
|
||||||
sdcLimit,
|
|
||||||
sdcDown,
|
|
||||||
sdcUp,
|
|
||||||
timeConfigList: tableData
|
|
||||||
}).then(response => {
|
|
||||||
if(response?.code === 200){
|
if(response?.code === 200){
|
||||||
this.closeDialog()
|
this.closeDialog()
|
||||||
this.$emit('update')
|
this.$emit('update')
|
||||||
@ -283,15 +288,7 @@ export default {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}else{
|
}else{
|
||||||
addStrategyTemp({
|
addStrategyTemp({siteId,strategyId:updateStrategyId,templateName,sdcLimit,sdcDown,sdcUp,timeConfigList:tableData}).then(response=>{
|
||||||
siteId,
|
|
||||||
strategyId: updateStrategyId,
|
|
||||||
templateName,
|
|
||||||
sdcLimit,
|
|
||||||
sdcDown,
|
|
||||||
sdcUp,
|
|
||||||
timeConfigList: tableData
|
|
||||||
}).then(response => {
|
|
||||||
if(response?.code === 200){
|
if(response?.code === 200){
|
||||||
this.closeDialog()
|
this.closeDialog()
|
||||||
this.$emit('update')
|
this.$emit('update')
|
||||||
@ -317,9 +314,3 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
.add-template-dialog {
|
|
||||||
max-height: 90vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -2,7 +2,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- <cl-container :hideSettingBtn="true">-->
|
<!-- <cl-container :hideSettingBtn="true">-->
|
||||||
<!-- <template v-slot:default>-->
|
<!-- <template v-slot:default>-->
|
||||||
<div>
|
<div class="ems-dashboard-editor-container ems-content-container-padding">
|
||||||
<temp-table ref="tempTable" @updateTimeSetting="updateTimeSetting"/>
|
<temp-table ref="tempTable" @updateTimeSetting="updateTimeSetting"/>
|
||||||
<time-setting ref="timeSetting"/>
|
<time-setting ref="timeSetting"/>
|
||||||
<temp-power-chart ref="tomePowerChart"/>
|
<temp-power-chart ref="tomePowerChart"/>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<el-card v-loading="loading" gshadow="always" class="common-card-container common-card-container-no-title-bg">
|
<div v-loading="loading" class="ems-dashboard-editor-container ems-content-container-padding">
|
||||||
<!-- 搜索栏-->
|
<!-- 搜索栏-->
|
||||||
<el-form :inline="true" class="select-container">
|
<el-form :inline="true" class="select-container">
|
||||||
<el-form-item label="设备清单">
|
<el-form-item label="设备清单">
|
||||||
@ -108,7 +108,7 @@
|
|||||||
>
|
>
|
||||||
</el-pagination>
|
</el-pagination>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,8 +1,9 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
|
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
|
||||||
<div slot="header" class="time-range-header">
|
<div slot="header" class="time-range-header">
|
||||||
<span class="card-title">当日功率曲线</span>
|
<span class="card-title">当日功率曲线</span>
|
||||||
<date-range-select ref="dateRangeSelect" :showIcon="true" :mini-time-picker="true" @updateDate="updateDate"/>
|
<date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 310px" id="activeChart"></div>
|
<div style="height: 310px" id="activeChart"></div>
|
||||||
</el-card>
|
</el-card>
|
||||||
@ -107,13 +108,7 @@ export default {
|
|||||||
dataset:{source},
|
dataset:{source},
|
||||||
series: source[0].slice(1).map((item,index)=>{
|
series: source[0].slice(1).map((item,index)=>{
|
||||||
return {
|
return {
|
||||||
type: 'line',//index === 5 ? 'bar' : 'line',
|
type: 'line',
|
||||||
showSymbol: false,
|
|
||||||
symbolSize: 2,
|
|
||||||
smooth: true,
|
|
||||||
areaStyle: {
|
|
||||||
opacity: 0.5,
|
|
||||||
},
|
|
||||||
yAxisIndex:index<=4 ? 0 : 1
|
yAxisIndex:index<=4 ? 0 : 1
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,8 +1,9 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
|
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
|
||||||
<div slot="header" class="time-range-header">
|
<div slot="header" class="time-range-header">
|
||||||
<span class="card-title">一周充放曲线</span>
|
<span class="card-title">一周充放曲线</span>
|
||||||
<date-range-select ref="dateRangeSelect" :showIcon="true" :mini-time-picker="true" @updateDate="updateDate"/>
|
<date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 310px" id="weekChart"></div>
|
<div style="height: 310px" id="weekChart"></div>
|
||||||
</el-card>
|
</el-card>
|
||||||
@ -13,7 +14,6 @@ import * as echarts from 'echarts'
|
|||||||
import resize from '@/mixins/ems/resize'
|
import resize from '@/mixins/ems/resize'
|
||||||
import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
|
import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
|
||||||
import {getSevenChargeData} from '@/api/ems/dzjk'
|
import {getSevenChargeData} from '@/api/ems/dzjk'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
components: {DateRangeSelect},
|
components: {DateRangeSelect},
|
||||||
@ -45,6 +45,7 @@ export default {
|
|||||||
getWeekKData(){
|
getWeekKData(){
|
||||||
this.showLoading()
|
this.showLoading()
|
||||||
const {siteId,timeRange}=this
|
const {siteId,timeRange}=this
|
||||||
|
this.hideLoading()
|
||||||
getSevenChargeData({siteId,startDate:timeRange[0],endDate:timeRange[1]}).then(response => {
|
getSevenChargeData({siteId,startDate:timeRange[0],endDate:timeRange[1]}).then(response => {
|
||||||
this.setOption(response?.data || [])
|
this.setOption(response?.data || [])
|
||||||
}).finally(()=>this.hideLoading())
|
}).finally(()=>this.hideLoading())
|
||||||
|
|||||||
@ -1,101 +1,69 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-loading="loading">
|
<div
|
||||||
|
class="ems-dashboard-editor-container ems-content-container-padding"
|
||||||
|
v-loading="loading"
|
||||||
|
>
|
||||||
<el-row style="background: #fff" class="row-container" :gutter="15">
|
<el-row style="background: #fff" class="row-container" :gutter="15">
|
||||||
<el-col :xs="24" :sm="24" :lg="5">
|
<el-col v-if="tableData.length > 0" :xs="24" :sm="24" :lg="24">
|
||||||
<!-- 站点信息-->
|
<alarm-table :tableData="tableData" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="24" :sm="24" :lg="6">
|
||||||
<el-card
|
<el-card
|
||||||
shadow="always"
|
shadow="always"
|
||||||
class="common-card-container common-card-container-body-no-padding"
|
class="common-card-container common-card-container-body-no-padding"
|
||||||
>
|
>
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
<span class="card-title">站点信息</span>
|
<span class="card-title">站点信息</span>
|
||||||
<div class="alarm-msg" v-if="tableData.length > 0" @click="toAlarm">
|
|
||||||
<i class="el-icon-message-solid"></i> 设备告警
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="box-sizing: border-box; height: 218px; padding: 20px 15px"
|
style="box-sizing: border-box; height: 250px; padding: 20px 15px"
|
||||||
>
|
>
|
||||||
<!-- 地址、运行时间-->
|
<el-descriptions class="home-normal-info" :column="1">
|
||||||
<div class="site-info site-info-address">
|
<el-descriptions-item
|
||||||
<div class="title">
|
size="mini"
|
||||||
<i class="el-icon-location"></i>
|
v-for="(item, index) in singleZdInfo"
|
||||||
</div>
|
:key="index + 'singleZdInfo'"
|
||||||
<div class="value">{{ info.siteAddress }}</div>
|
:label="item.title"
|
||||||
</div>
|
>{{ info[item.attr] | formatNumber }}</el-descriptions-item
|
||||||
<div class="site-info">
|
|
||||||
<div class="title">
|
|
||||||
<i class="el-icon-date"></i>
|
|
||||||
</div>
|
|
||||||
<div class="value">{{ info.runningTime || '-' }}</div>
|
|
||||||
</div>
|
|
||||||
<!-- 装机功率、容量 -->
|
|
||||||
<el-row :gutter="10" style="margin-top:20px;">
|
|
||||||
<el-col
|
|
||||||
:span="12"
|
|
||||||
class="sjgl-col power-col"
|
|
||||||
>
|
>
|
||||||
<div class="sjgl-wrapper">
|
</el-descriptions>
|
||||||
<div class="sjgl-title">装机功率(MW)</div>
|
|
||||||
<div class="sjgl-value">
|
|
||||||
{{ info.installPower | formatNumber }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col
|
|
||||||
:span="12"
|
|
||||||
class="sjgl-col power-col"
|
|
||||||
>
|
|
||||||
<div class="sjgl-wrapper">
|
|
||||||
<div class="sjgl-title">装机容量(MW)</div>
|
|
||||||
<div class="sjgl-value">
|
|
||||||
{{ info.installCapacity | formatNumber }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<!-- 总累计运行数据-->
|
<el-col :xs="24" :sm="24" :lg="8">
|
||||||
<el-col :xs="24" :sm="24" :lg="19">
|
|
||||||
<el-card
|
<el-card
|
||||||
shadow="always"
|
shadow="always"
|
||||||
class="common-card-container common-card-container-body-no-padding"
|
class="common-card-container common-card-container-body-no-padding"
|
||||||
>
|
>
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
<span class="card-title">总累计运行数据</span>
|
<span class="card-title">总累计运行数据</span>
|
||||||
<div class="total-count">
|
|
||||||
<span class="title">总收入</span>
|
|
||||||
<span class="value">{{ runningInfo.totalRevenue | formatNumber }}</span>
|
|
||||||
<span class="unit">元</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="box-sizing: border-box; height: 218px; padding: 20px 15px"
|
style="box-sizing: border-box; height: 250px; padding: 20px 15px"
|
||||||
>
|
>
|
||||||
<el-row :gutter="10">
|
<el-row :gutter="20">
|
||||||
<el-col
|
<el-col
|
||||||
:span="6"
|
:span="12"
|
||||||
v-for="(item, index) in sjglData"
|
v-for="(item, index) in sjglData"
|
||||||
:key="index + 'sjglData'"
|
:key="index + 'sjglData'"
|
||||||
class="sjgl-col"
|
class="sjgl-data"
|
||||||
>
|
>
|
||||||
<div class="sjgl-wrapper">
|
|
||||||
<div class="sjgl-title">{{ item.title }}</div>
|
<div class="sjgl-title">{{ item.title }}</div>
|
||||||
<div class="sjgl-value" :style="{color:item.color}">
|
<div class="sjgl-value">
|
||||||
{{ runningInfo[item.attr] | formatNumber }}
|
{{ runningInfo[item.attr] | formatNumber }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="24" :sm="24" :lg="12">
|
<el-col :xs="24" :sm="24" :lg="10">
|
||||||
|
<cl-info :info="runningInfo.strategyTempInfo" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="24" :sm="24" :lg="24">
|
||||||
<week-chart ref="weekChart" />
|
<week-chart ref="weekChart" />
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="24" :sm="24" :lg="12">
|
<el-col :xs="24" :sm="24" :lg="24">
|
||||||
<active-chart ref="activeChart" />
|
<active-chart ref="activeChart" />
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -111,7 +79,6 @@ import AlarmTable from "./AlarmTable.vue";
|
|||||||
import ClInfo from "./ClInfo.vue";
|
import ClInfo from "./ClInfo.vue";
|
||||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "DzjkSbjkHome",
|
name: "DzjkSbjkHome",
|
||||||
components: { WeekChart, ActiveChart, AlarmTable, ClInfo },
|
components: { WeekChart, ActiveChart, AlarmTable, ClInfo },
|
||||||
@ -119,46 +86,48 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
|
singleZdInfo: [
|
||||||
|
{
|
||||||
|
title: "电站位置",
|
||||||
|
attr: "siteAddress",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "投运时间",
|
||||||
|
attr: "runningTime",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "装机功率(MW)",
|
||||||
|
attr: "installPower",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "装机容量(MW)",
|
||||||
|
attr: "installCapacity",
|
||||||
|
},
|
||||||
|
],
|
||||||
sjglData: [
|
sjglData: [
|
||||||
{
|
{
|
||||||
title: "今日充电量(kWh)",
|
title: "今日充电量(kWh)",
|
||||||
attr: "dayChargedCap",
|
attr: "dayChargedCap",
|
||||||
color: '#4472c4'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "今日放电量(kWh)",
|
title: "今日放电量(kWh)",
|
||||||
attr: "dayDisChargedCap",
|
attr: "dayDisChargedCap",
|
||||||
color: '#70ad47'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "总充电量(kWh)",
|
title: "总充电量(kWh)",
|
||||||
attr: "totalChargedCap",
|
attr: "totalChargedCap",
|
||||||
color: '#4472c4'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "今日实时收入(元)",
|
|
||||||
attr: "dayRevenue",
|
|
||||||
color: '#f67438'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "昨日充电量(kWh)",
|
|
||||||
attr: "yesterdayChargedCap",
|
|
||||||
color: '#4472c4'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "昨日放电量(kWh)",
|
|
||||||
attr: "yesterdayDisChargedCap",
|
|
||||||
color: '#70ad47'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "总放电量(kWh)",
|
title: "总放电量(kWh)",
|
||||||
attr: "totalDischargedCap",
|
attr: "totalDischargedCap",
|
||||||
color: '#70ad47'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "昨日实时收入(元)",
|
title: "总收入(元)",
|
||||||
attr: "yesterdayRevenue",
|
attr: "totalRevenue",
|
||||||
color: '#f67438'
|
},
|
||||||
|
{
|
||||||
|
title: "当日实时收入(元)",
|
||||||
|
attr: "dayRevenue",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
info: {}, //基本信息
|
info: {}, //基本信息
|
||||||
@ -167,13 +136,14 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
tableData() {
|
tableData() {
|
||||||
|
console.log(
|
||||||
|
"this.runningInfo?.siteMonitorHomeAlarmVo ",
|
||||||
|
this.runningInfo?.siteMonitorHomeAlarmVo
|
||||||
|
);
|
||||||
return this.runningInfo?.siteMonitorHomeAlarmVo || [];
|
return this.runningInfo?.siteMonitorHomeAlarmVo || [];
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toAlarm() {
|
|
||||||
this.$router.push({path: "/dzjk/gzgj", query: this.$route.query});
|
|
||||||
},
|
|
||||||
getBaseInfo() {
|
getBaseInfo() {
|
||||||
return getSingleSiteBaseInfo(this.siteId).then((response) => {
|
return getSingleSiteBaseInfo(this.siteId).then((response) => {
|
||||||
this.info = response?.data || {};
|
this.info = response?.data || {};
|
||||||
@ -203,73 +173,6 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
//设备告警
|
|
||||||
.alarm-msg {
|
|
||||||
background: #ff4949;
|
|
||||||
padding: 2px 5px;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: bolder;
|
|
||||||
border-radius: 3px;
|
|
||||||
line-height: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #fff;
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
//基本信息-地址 运行️时间
|
|
||||||
.site-info {
|
|
||||||
display: flex;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 20px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&.site-info-address {
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: #1791ff;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 20px;
|
|
||||||
margin-right: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
color: #000;
|
|
||||||
font-size: 12px;
|
|
||||||
max-height: 40px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//总收入
|
|
||||||
.total-count {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bolder;
|
|
||||||
color: #333;
|
|
||||||
line-height: 14px;
|
|
||||||
|
|
||||||
.unit {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: bolder;
|
|
||||||
color: #ed2f1d;
|
|
||||||
font-style: italic;
|
|
||||||
padding: 0 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-container {
|
.row-container {
|
||||||
& > .el-col {
|
& > .el-col {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
@ -277,47 +180,25 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
//数据概览
|
//数据概览
|
||||||
.sjgl-col {
|
.sjgl-data {
|
||||||
.sjgl-wrapper {
|
text-align: center;
|
||||||
text-align: left;
|
&:nth-child(1),
|
||||||
padding: 15px 20px;
|
|
||||||
background-color: #f2f7fb;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.power-col {
|
|
||||||
.sjgl-wrapper {
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
.sjgl-value {
|
|
||||||
color: #c44444;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(4),
|
|
||||||
&:nth-child(2),
|
&:nth-child(2),
|
||||||
&:nth-child(3),
|
&:nth-child(3),
|
||||||
&:nth-child(4) {
|
&:nth-child(4) {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sjgl-title {
|
.sjgl-title {
|
||||||
color: #717171;
|
color: #666666;
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sjgl-value {
|
.sjgl-value {
|
||||||
color: rgba(51, 51, 51, 1);
|
color: rgba(51, 51, 51, 1);
|
||||||
font-size: 22px;
|
font-size: 26px;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
font-weight: bolder;
|
font-weight: 500;
|
||||||
font-style: italic;
|
|
||||||
margin-top: 14px;
|
margin-top: 14px;
|
||||||
width: 100%;
|
word-wrap: break-word;
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -325,12 +206,10 @@ export default {
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.home-normal-info {
|
.home-normal-info {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
||||||
.el-descriptions-item__container {
|
.el-descriptions-item__container {
|
||||||
.el-descriptions-item__label {
|
.el-descriptions-item__label {
|
||||||
color: #666666;
|
color: #666666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-descriptions-item__content {
|
.el-descriptions-item__content {
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -68,7 +68,6 @@ export default {
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.dzjk-ems-content-container{
|
.dzjk-ems-content-container{
|
||||||
margin-top:0;
|
margin-top:0;
|
||||||
min-height: 60vh;
|
|
||||||
}
|
}
|
||||||
.lighting{
|
.lighting{
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@ -39,7 +39,6 @@ import resize from "@/mixins/ems/resize";
|
|||||||
import DateTimeSelect from "@/views/ems/search/DateTimeSelect.vue";
|
import DateTimeSelect from "@/views/ems/search/DateTimeSelect.vue";
|
||||||
import { getPointValueList } from "@/api/ems/search";
|
import { getPointValueList } from "@/api/ems/search";
|
||||||
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
|
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { DateRangeSelect, DateTimeSelect },
|
components: { DateRangeSelect, DateTimeSelect },
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
@ -164,21 +163,8 @@ export default {
|
|||||||
if (!this.chart) return;
|
if (!this.chart) return;
|
||||||
this.chart.clear();
|
this.chart.clear();
|
||||||
console.log("返回的数据", data);
|
console.log("返回的数据", data);
|
||||||
if (!data || data.length <= 0) {
|
|
||||||
this.$message.warning("暂无数据");
|
|
||||||
}
|
|
||||||
console.log('展示的图表类型chartType', data[0].chartType)
|
|
||||||
|
|
||||||
if (data[0].chartType === 2) {
|
|
||||||
// 箱型图
|
|
||||||
this.setBoxOption(data)
|
|
||||||
} else {
|
|
||||||
//折线图
|
|
||||||
this.setLineOption(data)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setLineOption(data) {
|
|
||||||
let dataset = [];
|
let dataset = [];
|
||||||
|
if (data.length > 0) {
|
||||||
data.forEach((item, index) => {
|
data.forEach((item, index) => {
|
||||||
item.deviceList.forEach((inner) => {
|
item.deviceList.forEach((inner) => {
|
||||||
dataset.push({
|
dataset.push({
|
||||||
@ -240,7 +226,10 @@ export default {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
console.log("折线图图表数据", dataset);
|
} else {
|
||||||
|
this.$message.warning("暂无数据");
|
||||||
|
}
|
||||||
|
console.log("图表数据", dataset);
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
legend: {
|
legend: {
|
||||||
// left: 'center',
|
// left: 'center',
|
||||||
@ -252,12 +241,9 @@ export default {
|
|||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'cross',
|
// 坐标轴指示器,坐标轴触发有效
|
||||||
|
type: "cross", // 默认为直线,可选为:'line' | 'shadow'
|
||||||
},
|
},
|
||||||
// axisPointer: {
|
|
||||||
// // 坐标轴指示器,坐标轴触发有效
|
|
||||||
// type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
|
|
||||||
// },
|
|
||||||
},
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#333333",
|
color: "#333333",
|
||||||
@ -280,122 +266,6 @@ export default {
|
|||||||
series: dataset,
|
series: dataset,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
setBoxOption(data) {
|
|
||||||
let dataset = [];
|
|
||||||
data.forEach((item, index) => {
|
|
||||||
item.deviceList.forEach((inner) => {
|
|
||||||
dataset.push({
|
|
||||||
name: `${
|
|
||||||
this.isDtdc
|
|
||||||
? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}${inner.deviceId}`
|
|
||||||
: `${inner.deviceId}`
|
|
||||||
}`,
|
|
||||||
type: "boxplot",
|
|
||||||
// markPoint: {
|
|
||||||
// symbolSize: 30,
|
|
||||||
// emphasis: {
|
|
||||||
// disabled: false//打开 鼠标高亮
|
|
||||||
// },
|
|
||||||
// data: [//最大值、最小值
|
|
||||||
// {
|
|
||||||
// // type: 'max',
|
|
||||||
// name: `最大值`,
|
|
||||||
// coord: [inner.maxDate, inner.maxValue],
|
|
||||||
// relativeTo: 'coordinate',
|
|
||||||
// label: {
|
|
||||||
// position: "top",
|
|
||||||
// formatter: item.dataType === 2 ? ([
|
|
||||||
// `最大值:${inner.maxValue}`,
|
|
||||||
// // `平均值:${inner.avgValue}`,
|
|
||||||
// `差值:${inner.diffValue}`,
|
|
||||||
// ]).join('\n') : ([
|
|
||||||
// `最大值:${inner.maxValue}`,
|
|
||||||
// // `平均值:${inner.avgValue}`,
|
|
||||||
// ]).join('\n'),
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// // type: 'min',
|
|
||||||
// name: `最小值`,
|
|
||||||
// coord: [inner.minDate, inner.minValue],
|
|
||||||
// relativeTo: 'coordinate',
|
|
||||||
// label: {
|
|
||||||
// position: "top",
|
|
||||||
// formatter: item.dataType === 2 ? ([
|
|
||||||
// `最小值:${inner.minValue}`,
|
|
||||||
// // `平均值:${inner.avgValue}`,
|
|
||||||
// `差值:${inner.diffValue}`,
|
|
||||||
// ]).join('\n') : ([
|
|
||||||
// `最小值:${inner.minValue}`,
|
|
||||||
// // `平均值:${inner.avgValue}`,
|
|
||||||
// ]).join('\n'),
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
xdata: [],
|
|
||||||
data: [],
|
|
||||||
});
|
|
||||||
const length = dataset.length;
|
|
||||||
inner.pointValueList.forEach((value) => {
|
|
||||||
const {valueDate, min, q1, median, q3, max} = value
|
|
||||||
// const mid = (max - min) / 2, minLine = min + Math.abs(median / 2),
|
|
||||||
// maxLine = max - Math.abs(median / 2)
|
|
||||||
dataset[length - 1].xdata.push(valueDate);
|
|
||||||
dataset[length - 1].data.push([min, q1, median, q3, max]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
console.log("箱型图图表数据", dataset);
|
|
||||||
this.chart.setOption({
|
|
||||||
legend: {
|
|
||||||
// left: 'center',
|
|
||||||
// top: '10',
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
formatter: function (params) {
|
|
||||||
let data = params.data;
|
|
||||||
let result = params.marker + params.name + ' ' + params.seriesName + '<br/>';
|
|
||||||
result += '最小值: ' + data[1] + '<br/>';
|
|
||||||
result += '平均值: ' + data[3] + '<br/>';
|
|
||||||
result += '最大值: ' + data[5];
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
// trigger: "axis",
|
|
||||||
// axisPointer: {
|
|
||||||
// type: 'cross',
|
|
||||||
// },
|
|
||||||
// axisPointer: {
|
|
||||||
// // 坐标轴指示器,坐标轴触发有效
|
|
||||||
// type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
textStyle: {
|
|
||||||
color: "#333333",
|
|
||||||
},
|
|
||||||
xAxis: {type: "category", data: dataset?.[0]?.xdata || []},
|
|
||||||
yAxis: {
|
|
||||||
type: "value",
|
|
||||||
},
|
|
||||||
dataZoom: [
|
|
||||||
{
|
|
||||||
type: "inside",
|
|
||||||
start: 0,
|
|
||||||
end: 100,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
start: 0,
|
|
||||||
end: 100,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: dataset,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
updateDate(val) {
|
updateDate(val) {
|
||||||
this.dataRange = val || [];
|
this.dataRange = val || [];
|
||||||
this.getDate();
|
this.getDate();
|
||||||
|
|||||||
@ -1,51 +1,25 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-loading="loading">
|
<div v-loading="loading">
|
||||||
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmsdccContainer'" style="margin-bottom:25px;">
|
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmsdccContainer'" style="margin-bottom:25px;">
|
||||||
<el-card shadow="always"
|
<el-card shadow="always" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
||||||
class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
:class="{
|
||||||
:class="handleCardClass(baseInfo)">
|
'warning-card-container':baseInfo.workStatus && baseInfo.workStatus !== '0',
|
||||||
|
'running-card-container':baseInfo.workStatus === '0'
|
||||||
|
}">
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
<span
|
<span class="large-title">{{index+1}}#{{baseInfo.parentDeviceName?`${baseInfo.parentDeviceName} —> ` : ''}}{{baseInfo.deviceName}}</span>
|
||||||
class="large-title">{{
|
|
||||||
baseInfo.parentDeviceName ? `${baseInfo.parentDeviceName} -> ` : ''
|
|
||||||
}}{{ baseInfo.deviceName }}</span>
|
|
||||||
<div class="info">
|
|
||||||
<div>数据更新时间:{{ baseInfo.dataUpdateTime || '-' }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="alarm">
|
|
||||||
<el-button type="primary" round size="small" style="margin-right:20px;"
|
|
||||||
@click="pointDetail(baseInfo,'point')">详细
|
|
||||||
</el-button>
|
|
||||||
<el-badge :hidden="!baseInfo.alarmNum" :value="baseInfo.alarmNum || 0" class="item">
|
|
||||||
<i
|
|
||||||
class="el-icon-message-solid alarm-icon"
|
|
||||||
@click="pointDetail(baseInfo,'alarmPoint')"
|
|
||||||
></i>
|
|
||||||
</el-badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="descriptions-main">
|
<div class="descriptions-main">
|
||||||
<el-descriptions direction="vertical" :column="3" :colon="false">
|
<el-descriptions direction="vertical" :column="3" :colon="false">
|
||||||
<el-descriptions-item
|
<el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" >{{$store.state.ems.workStatusOptions[baseInfo.workStatus]}}</el-descriptions-item>
|
||||||
contentClassName="descriptions-direction work-status"
|
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="与PCS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item>
|
||||||
:span="1" label="工作状态">
|
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="与EMS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus]}}</el-descriptions-item>
|
||||||
{{ CLUSTERWorkStatusOptions[baseInfo.workStatus] }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item contentClassName="descriptions-direction"
|
|
||||||
:span="1" label="与PCS通信">
|
|
||||||
{{ $store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus] }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item contentClassName="descriptions-direction"
|
|
||||||
:span="1" label="与EMS通信">
|
|
||||||
{{ $store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus] }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
</el-descriptions>
|
||||||
</div>
|
</div>
|
||||||
<div class="descriptions-main descriptions-main-bg-color">
|
<div class="descriptions-main descriptions-main-bg-color">
|
||||||
<el-descriptions direction="vertical" :column="3" :colon="false">
|
<el-descriptions direction="vertical" :column="3" :colon="false">
|
||||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"
|
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">
|
||||||
v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1"
|
|
||||||
:label="item.label">
|
|
||||||
<span class="pointer" @click="showChart(item.pointName || '',baseInfo.deviceId)">
|
<span class="pointer" @click="showChart(item.pointName || '',baseInfo.deviceId)">
|
||||||
{{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span>
|
{{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span>
|
||||||
</span>
|
</span>
|
||||||
@ -56,9 +30,7 @@
|
|||||||
<div class="process-line-bg">
|
<div class="process-line-bg">
|
||||||
<div class="process-line" :style="{height:baseInfo.currentSoc+'%'}"></div>
|
<div class="process-line" :style="{height:baseInfo.currentSoc+'%'}"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="process pointer" @click="showChart( '当前SOC',baseInfo.deviceId)">当前SOC :
|
<div class="process pointer" @click="showChart( '当前SOC',baseInfo.deviceId)">当前SOC : {{baseInfo.currentSoc}}%</div>
|
||||||
{{ baseInfo.currentSoc }}%
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-table
|
<el-table
|
||||||
@ -78,20 +50,14 @@
|
|||||||
label="单体平均值"
|
label="单体平均值"
|
||||||
>
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span class="pointer"
|
<span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],baseInfo.deviceId)">{{scope.row.avgData}}</span>
|
||||||
@click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],baseInfo.deviceId)">{{
|
|
||||||
scope.row.avgData
|
|
||||||
}}</span>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="minData"
|
prop="minData"
|
||||||
label="单体最小值">
|
label="单体最小值">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span class="pointer"
|
<span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],baseInfo.deviceId)">{{scope.row.minData}}</span>
|
||||||
@click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],baseInfo.deviceId)">{{
|
|
||||||
scope.row.minData
|
|
||||||
}}</span>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
@ -102,10 +68,7 @@
|
|||||||
prop="maxData"
|
prop="maxData"
|
||||||
label="单体最大值">
|
label="单体最大值">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span class="pointer "
|
<span class="pointer " @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],baseInfo.deviceId)">{{scope.row.maxData}}</span>
|
||||||
@click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],baseInfo.deviceId)">{{
|
|
||||||
scope.row.maxData
|
|
||||||
}}</span>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
@ -117,28 +80,19 @@
|
|||||||
</div>
|
</div>
|
||||||
<el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
|
<el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
|
||||||
<point-chart ref="pointChart" :site-id="siteId"/>
|
<point-chart ref="pointChart" :site-id="siteId"/>
|
||||||
<point-table ref="pointTable"/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import pointChart from "./../PointChart.vue";
|
import pointChart from "./../PointChart.vue";
|
||||||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
|
||||||
import {getBMSBatteryCluster} from '@/api/ems/dzjk'
|
import {getBMSBatteryCluster} from '@/api/ems/dzjk'
|
||||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||||
import {mapState} from "vuex";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name:'DzjkSbjkBmsdcc',
|
name:'DzjkSbjkBmsdcc',
|
||||||
mixins:[getQuerySiteId,intervalUpdate],
|
mixins:[getQuerySiteId,intervalUpdate],
|
||||||
components: {PointTable, pointChart},
|
components:{pointChart},
|
||||||
computed: {
|
|
||||||
...mapState({
|
|
||||||
CLUSTERWorkStatusOptions: state => state?.ems?.CLUSTERWorkStatusOptions || {},
|
|
||||||
})
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading:false,
|
loading:false,
|
||||||
@ -173,15 +127,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
handleCardClass(item) {
|
|
||||||
const {workStatus = ''} = item
|
|
||||||
return !(Object.keys(this.CLUSTERWorkStatusOptions).includes(item.workStatus)) ? "timing-card-container" : workStatus === '9' ? 'warning-card-container' : 'running-card-container'
|
|
||||||
},
|
|
||||||
// 查看设备电位表格
|
|
||||||
pointDetail(row, dataType) {
|
|
||||||
const {siteId, deviceId} = row
|
|
||||||
this.$refs.pointTable.showTable({siteId, deviceId, deviceCategory: 'CLUSTER'}, dataType)
|
|
||||||
},
|
|
||||||
showChart(pointName,deviceId){
|
showChart(pointName,deviceId){
|
||||||
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'CLUSTER',deviceId})
|
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'CLUSTER',deviceId})
|
||||||
},
|
},
|
||||||
@ -189,9 +134,7 @@ export default {
|
|||||||
this.loading = true
|
this.loading = true
|
||||||
getBMSBatteryCluster(this.siteId).then(response => {
|
getBMSBatteryCluster(this.siteId).then(response => {
|
||||||
this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
|
this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
|
||||||
}).finally(() => {
|
}).finally(() => {this.loading = false})
|
||||||
this.loading = false
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
init(){
|
init(){
|
||||||
this.updateData()
|
this.updateData()
|
||||||
@ -207,12 +150,10 @@ export default {
|
|||||||
.descriptions-main{
|
.descriptions-main{
|
||||||
padding:24px 300px 24px 24px;
|
padding:24px 300px 24px 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.descriptions-main-bottom{
|
.descriptions-main-bottom{
|
||||||
padding:14px 300px 14px 24px;
|
padding:14px 300px 14px 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 进度条样式
|
// 进度条样式
|
||||||
.process-container{
|
.process-container{
|
||||||
width:100px;
|
width:100px;
|
||||||
@ -220,7 +161,6 @@ export default {
|
|||||||
right:70px;
|
right:70px;
|
||||||
top:50%;
|
top:50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
|
|
||||||
.process-line-bg{
|
.process-line-bg{
|
||||||
position: relative;
|
position: relative;
|
||||||
width:100%;
|
width:100%;
|
||||||
@ -228,7 +168,6 @@ export default {
|
|||||||
background-color:#fff2cb ;
|
background-color:#fff2cb ;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5);
|
box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5);
|
||||||
|
|
||||||
.process-line{
|
.process-line{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -240,7 +179,6 @@ export default {
|
|||||||
box-shadow: 0 0 10px #ffbf14, 0 0 0 rgba(255, 191, 20, 0.5);
|
box-shadow: 0 0 10px #ffbf14, 0 0 0 rgba(255, 191, 20, 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.process{
|
.process{
|
||||||
margin-top:15px;
|
margin-top:15px;
|
||||||
color:#666666;
|
color:#666666;
|
||||||
|
|||||||
@ -1,49 +1,25 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-loading="loading">
|
<div v-loading="loading">
|
||||||
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmszlContainer'" style="margin-bottom:25px;">
|
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmszlContainer'" style="margin-bottom:25px;">
|
||||||
<el-card
|
<el-card :class="{
|
||||||
:class="handleCardClass(baseInfo)"
|
'warning-card-container':baseInfo.workStatus && baseInfo.workStatus !== '0',
|
||||||
class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
'running-card-container':baseInfo.workStatus === '0'
|
||||||
|
}" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
||||||
shadow="always">
|
shadow="always">
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
<span class="large-title">{{ baseInfo.deviceName }}</span>
|
<span class="large-title">{{index+1}}#{{baseInfo.deviceName}}</span>
|
||||||
<div class="info">
|
|
||||||
<div>数据更新时间:{{ baseInfo.dataUpdateTime || '-' }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="alarm">
|
|
||||||
<el-button type="primary" round size="small" style="margin-right:20px;"
|
|
||||||
@click="pointDetail(baseInfo,'point')">详细
|
|
||||||
</el-button>
|
|
||||||
<el-badge :hidden="!baseInfo.alarmNum" :value="baseInfo.alarmNum || 0" class="item">
|
|
||||||
<i
|
|
||||||
class="el-icon-message-solid alarm-icon"
|
|
||||||
@click="pointDetail(baseInfo,'alarmPoint')"
|
|
||||||
></i>
|
|
||||||
</el-badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="descriptions-main">
|
<div class="descriptions-main">
|
||||||
<el-descriptions :colon="false" :column="3" direction="vertical">
|
<el-descriptions :colon="false" :column="3" direction="vertical">
|
||||||
<el-descriptions-item
|
<el-descriptions-item :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" labelClassName="descriptions-label" >{{$store.state.ems.workStatusOptions[baseInfo.workStatus]}}</el-descriptions-item>
|
||||||
contentClassName="descriptions-direction work-status"
|
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与PCS通信" labelClassName="descriptions-label">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item>
|
||||||
label="工作状态" labelClassName="descriptions-label">
|
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与EMS通信" labelClassName="descriptions-label">{{$store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus]}}</el-descriptions-item>
|
||||||
{{ STACKWorkStatusOptions[baseInfo.workStatus] }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与PCS通信"
|
|
||||||
labelClassName="descriptions-label">
|
|
||||||
{{ $store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus] }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与EMS通信"
|
|
||||||
labelClassName="descriptions-label">
|
|
||||||
{{ $store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus] }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
</el-descriptions>
|
||||||
</div>
|
</div>
|
||||||
<div class="descriptions-main descriptions-main-bg-color">
|
<div class="descriptions-main descriptions-main-bg-color">
|
||||||
<el-descriptions :colon="false" :column="3" direction="vertical">
|
<el-descriptions :colon="false" :column="3" direction="vertical">
|
||||||
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label"
|
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label" :span="1" contentClassName="descriptions-direction" labelClassName="descriptions-label">
|
||||||
:span="1" contentClassName="descriptions-direction"
|
|
||||||
labelClassName="descriptions-label">
|
|
||||||
<span class="pointer" @click="showChart(item.pointName || '',baseInfo.deviceId)">
|
<span class="pointer" @click="showChart(item.pointName || '',baseInfo.deviceId)">
|
||||||
{{baseInfo[item.attr] | formatNumber}}<span v-if="item.unit" v-html="item.unit"></span>
|
{{baseInfo[item.attr] | formatNumber}}<span v-if="item.unit" v-html="item.unit"></span>
|
||||||
</span>
|
</span>
|
||||||
@ -54,9 +30,7 @@
|
|||||||
<div class="process-line-bg">
|
<div class="process-line-bg">
|
||||||
<div :style="{height:baseInfo.stackSoc+'%'}" class="process-line"></div>
|
<div :style="{height:baseInfo.stackSoc+'%'}" class="process-line"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="process pointer" @click="showChart('当前SOC',baseInfo.deviceId)">当前SOC :
|
<div class="process pointer" @click="showChart('当前SOC',baseInfo.deviceId)">当前SOC : {{baseInfo.stackSoc}}%</div>
|
||||||
{{ baseInfo.stackSoc }}%
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-table
|
<el-table
|
||||||
@ -73,32 +47,26 @@
|
|||||||
label="簇电压"
|
label="簇电压"
|
||||||
>
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span class="pointer"
|
<span class="pointer" @click="showChart('簇电压',scope.row.clusterId,'CLUSTER')">{{scope.row.clusterVoltage}} V</span>
|
||||||
@click="showChart('簇电压',scope.row.clusterId,'CLUSTER')">{{ scope.row.clusterVoltage }} V</span>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
label="簇电流">
|
label="簇电流">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span class="pointer"
|
<span class="pointer" @click="showChart('簇电流',scope.row.clusterId,'CLUSTER')">{{scope.row.clusterCurrent}} A</span>
|
||||||
@click="showChart('簇电流',scope.row.clusterId,'CLUSTER')">{{ scope.row.clusterCurrent }} A</span>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
label="簇SOC">
|
label="簇SOC">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span class="pointer"
|
<span class="pointer" @click="showChart('当前SOC',scope.row.clusterId,'CLUSTER')">{{scope.row.currentSoc}} %</span>
|
||||||
@click="showChart('当前SOC',scope.row.clusterId,'CLUSTER')">{{ scope.row.currentSoc }} %</span>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
label="单体最高电压"
|
label="单体最高电压"
|
||||||
prop="maxVoltage">
|
prop="maxVoltage">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span class="pointer"
|
<span class="pointer" @click="showChart('最高单体电压',scope.row.clusterId,'CLUSTER')">{{scope.row.maxCellVoltage}} V</span>
|
||||||
@click="showChart('最高单体电压',scope.row.clusterId,'CLUSTER')">{{
|
|
||||||
scope.row.maxCellVoltage
|
|
||||||
}} V</span>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
@ -109,10 +77,7 @@
|
|||||||
label="单体最低电压"
|
label="单体最低电压"
|
||||||
prop="minVoltage">
|
prop="minVoltage">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span class="pointer"
|
<span class="pointer" @click="showChart('最低单体电压',scope.row.clusterId,'CLUSTER')">{{scope.row.minCellVoltage}} V</span>
|
||||||
@click="showChart('最低单体电压',scope.row.clusterId,'CLUSTER')">{{
|
|
||||||
scope.row.minCellVoltage
|
|
||||||
}} V</span>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
@ -122,10 +87,7 @@
|
|||||||
<el-table-column
|
<el-table-column
|
||||||
label="单体最高温度">
|
label="单体最高温度">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span class="pointer"
|
<span class="pointer" @click="showChart('最高单体温度',scope.row.clusterId,'CLUSTER')">{{scope.row.maxCellTemp}} ℃</span>
|
||||||
@click="showChart('最高单体温度',scope.row.clusterId,'CLUSTER')">{{
|
|
||||||
scope.row.maxCellTemp
|
|
||||||
}} ℃</span>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
@ -136,10 +98,7 @@
|
|||||||
label="单体最低温度"
|
label="单体最低温度"
|
||||||
prop="minTemperature">
|
prop="minTemperature">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span class="pointer"
|
<span class="pointer" @click="showChart('最低单体温度',scope.row.clusterId,'CLUSTER')">{{scope.row.minCellTemp}} ℃</span>
|
||||||
@click="showChart('最低单体温度',scope.row.clusterId,'CLUSTER')">{{
|
|
||||||
scope.row.minCellTemp
|
|
||||||
}} ℃</span>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
@ -152,7 +111,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
|
<el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
|
||||||
<point-chart ref="pointChart" :site-id="siteId"/>
|
<point-chart ref="pointChart" :site-id="siteId"/>
|
||||||
<point-table ref="pointTable"/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -161,18 +119,10 @@ import {getBMSOverView} from '@/api/ems/dzjk'
|
|||||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||||
import pointChart from "./../PointChart.vue";
|
import pointChart from "./../PointChart.vue";
|
||||||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
|
||||||
import {mapState} from "vuex";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name:'DzjkSbjkBmszl',
|
name:'DzjkSbjkBmszl',
|
||||||
components: {pointChart, PointTable},
|
components: {pointChart,},
|
||||||
mixins:[getQuerySiteId,intervalUpdate],
|
mixins:[getQuerySiteId,intervalUpdate],
|
||||||
computed: {
|
|
||||||
...mapState({
|
|
||||||
STACKWorkStatusOptions: state => state?.ems?.STACKWorkStatusOptions || {},
|
|
||||||
})
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading:false,
|
loading:false,
|
||||||
@ -191,16 +141,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
handleCardClass(item) {
|
|
||||||
const {workStatus = ''} = item
|
|
||||||
return !Object.keys(this.STACKWorkStatusOptions).find(i => i === workStatus) ? "timing-card-container" : workStatus === '9' ? 'warning-card-container' : 'running-card-container'
|
|
||||||
},
|
|
||||||
|
|
||||||
// 查看设备电位表格
|
|
||||||
pointDetail(row, dataType) {
|
|
||||||
const {siteId, deviceId} = row
|
|
||||||
this.$refs.pointTable.showTable({siteId, deviceId, deviceCategory: 'STACK'}, dataType)
|
|
||||||
},
|
|
||||||
showChart(pointName,deviceId,deviceCategory = 'STACK'){
|
showChart(pointName,deviceId,deviceCategory = 'STACK'){
|
||||||
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory,deviceId})
|
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory,deviceId})
|
||||||
},
|
},
|
||||||
@ -208,9 +148,7 @@ export default {
|
|||||||
this.loading = true
|
this.loading = true
|
||||||
getBMSOverView(this.siteId).then(response => {
|
getBMSOverView(this.siteId).then(response => {
|
||||||
this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
|
this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
|
||||||
}).finally(() => {
|
}).finally(() => {this.loading = false})
|
||||||
this.loading = false
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
init(){
|
init(){
|
||||||
this.updateData()
|
this.updateData()
|
||||||
@ -232,7 +170,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 进度条样式
|
// 进度条样式
|
||||||
.process-container{
|
.process-container{
|
||||||
width:100px;
|
width:100px;
|
||||||
@ -240,7 +177,6 @@ export default {
|
|||||||
right:70px;
|
right:70px;
|
||||||
top:50%;
|
top:50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
|
|
||||||
.process-line-bg{
|
.process-line-bg{
|
||||||
position: relative;
|
position: relative;
|
||||||
width:100%;
|
width:100%;
|
||||||
@ -248,7 +184,6 @@ export default {
|
|||||||
background-color:#fff2cb ;
|
background-color:#fff2cb ;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5);
|
box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5);
|
||||||
|
|
||||||
.process-line{
|
.process-line{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -260,7 +195,6 @@ export default {
|
|||||||
box-shadow: 0 0 10px rgb(252 108 108), 0 0 0 rgba(252, 108, 108, 0.5);
|
box-shadow: 0 0 10px rgb(252 108 108), 0 0 0 rgba(252, 108, 108, 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.process{
|
.process{
|
||||||
margin-top:15px;
|
margin-top:15px;
|
||||||
color:#666666;
|
color:#666666;
|
||||||
|
|||||||
@ -6,47 +6,33 @@
|
|||||||
shadow="always"
|
shadow="always"
|
||||||
class="sbjk-card-container list"
|
class="sbjk-card-container list"
|
||||||
:class="{
|
:class="{
|
||||||
'timing-card-container':!['0','2'].includes(item.emsCommunicationStatus),
|
'warning-card-container':item.emsCommunicationStatus && item.emsCommunicationStatus !== '0',
|
||||||
'warning-card-container':item.emsCommunicationStatus === '2',
|
|
||||||
'running-card-container':item.emsCommunicationStatus === '0'
|
'running-card-container':item.emsCommunicationStatus === '0'
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
<span class="large-title">{{ item.deviceName }}</span>
|
<span class="large-title">{{index+1}}#{{ item.deviceName }}</span>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<div>
|
<div>
|
||||||
{{
|
{{
|
||||||
communicationStatusOptions[item.emsCommunicationStatus] || '-'
|
$store.state.ems.communicationStatusOptions[
|
||||||
|
item.emsCommunicationStatus
|
||||||
|
]
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
<div>数据更新时间:{{ item.dataUpdateTime || '-' }}</div>
|
<div>数据更新时间:{{ item.dataUpdateTime }}</div>
|
||||||
</div>
|
|
||||||
<div class="alarm">
|
|
||||||
<el-button type="primary" round size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">
|
|
||||||
详细
|
|
||||||
</el-button>
|
|
||||||
<el-badge :hidden="!item.alarmNum" :value="item.alarmNum || 0" class="item">
|
|
||||||
<i
|
|
||||||
class="el-icon-message-solid alarm-icon"
|
|
||||||
@click="pointDetail(item,'alarmPoint')"
|
|
||||||
></i>
|
|
||||||
</el-badge>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-row class="device-info-row">
|
<el-row>
|
||||||
<el-col v-for="(tempDataItem,tempDataIndex) in (deviceIdTypeMsg[item.deviceId] || otherTypeMsg)"
|
<el-col v-for="(tempDataItem,tempDataIndex) in deviceIdTypeMsg[item.deviceId]" :key="tempDataIndex+'dbTempData'" :span="8">
|
||||||
:key="tempDataIndex+'dbTempData'"
|
|
||||||
:span="8" class="device-info-col">
|
|
||||||
<span class="pointer" @click="showChart(tempDataItem.pointName,item.deviceId)">
|
<span class="pointer" @click="showChart(tempDataItem.pointName,item.deviceId)">
|
||||||
<span class="left">{{ tempDataItem.name }}</span> <span class="right">{{ item[tempDataItem.attr] || '-' }}<span
|
{{tempDataItem.name}}:{{item[tempDataItem.attr]}}<span v-html="tempDataItem.unit"></span>
|
||||||
v-html="tempDataItem.unit"></span></span>
|
|
||||||
</span>
|
</span>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-empty v-show="list.length<=0" :image-size="200"></el-empty>
|
<el-empty v-show="list.length<=0" :image-size="200"></el-empty>
|
||||||
<point-chart ref="pointChart" :site-id="siteId"/>
|
<point-chart ref="pointChart" :site-id="siteId"/>
|
||||||
<point-table ref="pointTable"/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -55,19 +41,10 @@ import pointChart from "./../PointChart.vue";
|
|||||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||||
import { getAmmeterDataList } from "@/api/ems/dzjk";
|
import { getAmmeterDataList } from "@/api/ems/dzjk";
|
||||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
|
||||||
import {mapState} from "vuex";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "DzjkSbjkDb",
|
name: "DzjkSbjkDb",
|
||||||
mixins: [getQuerySiteId,intervalUpdate],
|
mixins: [getQuerySiteId,intervalUpdate],
|
||||||
components: {PointTable, pointChart},
|
components:{pointChart},
|
||||||
computed: {
|
|
||||||
|
|
||||||
...mapState({
|
|
||||||
communicationStatusOptions: state => state?.ems?.communicationStatusOptions || {},
|
|
||||||
})
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
@ -77,133 +54,92 @@ export default {
|
|||||||
{
|
{
|
||||||
name:'正向有功电能',
|
name:'正向有功电能',
|
||||||
attr:'forwardActive',
|
attr:'forwardActive',
|
||||||
pointName: '正向有功电能',
|
pointName:'正向有功电能'
|
||||||
unit: 'kWh'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'反向有功电能',
|
name:'反向有功电能',
|
||||||
attr:'reverseActive',
|
attr:'reverseActive',
|
||||||
pointName: '反向有功电能',
|
pointName:'反向有功电能'
|
||||||
unit: 'kWh'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'正向无功电能',
|
name:'正向无功电能',
|
||||||
attr:'forwardReactive',
|
attr:'forwardReactive',
|
||||||
pointName: '正向无功电能',
|
pointName:'正向无功电能'
|
||||||
unit: 'kvarh'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'反向无功电能',
|
name:'反向无功电能',
|
||||||
attr:'reverseReactive',
|
attr:'reverseReactive',
|
||||||
pointName: '反向无功电能',
|
pointName:'反向无功电能'
|
||||||
unit: 'kvarh'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'有功功率',
|
name:'有功功率',
|
||||||
attr:'activePower',
|
attr:'activePower',
|
||||||
pointName: '总有功功率',
|
pointName:'总有功功率'
|
||||||
unit: 'kW'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'无功功率',
|
name:'无功功率',
|
||||||
attr:'reactivePower',
|
attr:'reactivePower',
|
||||||
pointName: '总无功功率',
|
pointName:'总无功功率'
|
||||||
unit: 'kvar'
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'METE':[
|
'METE':[
|
||||||
{
|
{
|
||||||
name:'正向有功电能',
|
name:'正向有功电能',
|
||||||
attr:'forwardActive',
|
attr:'forwardActive',
|
||||||
pointName: '正向有功电能',
|
pointName:'正向有功电能'
|
||||||
unit: 'kWh'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'反向有功电能',
|
name:'反向有功电能',
|
||||||
attr:'reverseActive',
|
attr:'reverseActive',
|
||||||
pointName: '反向有功电能',
|
pointName:'反向有功电能'
|
||||||
unit: 'kWh'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'正向无功电能',
|
name:'正向无功电能',
|
||||||
attr:'forwardReactive',
|
attr:'forwardReactive',
|
||||||
pointName: '正向无功电能',
|
pointName:'正向无功电能'
|
||||||
unit: 'kvarh'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'反向无功电能',
|
name:'反向无功电能',
|
||||||
attr:'reverseReactive',
|
attr:'reverseReactive',
|
||||||
pointName: '反向无功电能',
|
pointName:'反向无功电能'
|
||||||
unit: 'kvarh'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'有功功率',
|
name:'有功功率',
|
||||||
attr:'activePower',
|
attr:'activePower',
|
||||||
pointName: '总有功功率',
|
pointName:'总有功功率'
|
||||||
unit: 'kW'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'无功功率',
|
name:'无功功率',
|
||||||
attr:'reactivePower',
|
attr:'reactivePower',
|
||||||
pointName: '总无功功率',
|
pointName:'总无功功率'
|
||||||
unit: 'kvar'
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'METEGF':[
|
'METEGF':[
|
||||||
{
|
{
|
||||||
name:'有功电能',
|
name:'有功电能',
|
||||||
attr:'activeEnergy',
|
attr:'activeEnergy',
|
||||||
pointName: '有功电能',
|
pointName:'有功电能'
|
||||||
unit: 'kWh'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'无功电能',
|
name:'无功电能',
|
||||||
attr:'reactiveEnergy',
|
attr:'reactiveEnergy',
|
||||||
pointName: '无功电能',
|
pointName:'无功电能'
|
||||||
unit: 'kvarh'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'有功功率',
|
name:'有功功率',
|
||||||
attr:'activePower',
|
attr:'activePower',
|
||||||
pointName: '总有功功率',
|
pointName:'总有功功率'
|
||||||
unit: 'kW'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'无功功率',
|
name:'无功功率',
|
||||||
attr:'reactivePower',
|
attr:'reactivePower',
|
||||||
pointName: '总无功功率',
|
pointName:'总无功功率'
|
||||||
unit: 'kvar'
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
}
|
||||||
otherTypeMsg: [
|
|
||||||
{
|
|
||||||
name: '正向有功电能',
|
|
||||||
attr: 'forwardActive',
|
|
||||||
pointName: '正向有功电能',
|
|
||||||
unit: 'kWh'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '反向有功电能',
|
|
||||||
attr: 'reverseActive',
|
|
||||||
pointName: '反向有功电能',
|
|
||||||
unit: 'kWh'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '有功功率',
|
|
||||||
attr: 'activePower',
|
|
||||||
pointName: '总有功功率',
|
|
||||||
unit: 'kW'
|
|
||||||
},
|
|
||||||
]
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 查看设备电位表格
|
|
||||||
pointDetail(row, dataType) {
|
|
||||||
const {deviceId} = row
|
|
||||||
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'AMMETER'}, dataType)
|
|
||||||
},
|
|
||||||
showChart(pointName,deviceId){
|
showChart(pointName,deviceId){
|
||||||
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'AMMETER',deviceId})
|
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'AMMETER',deviceId})
|
||||||
},
|
},
|
||||||
@ -222,8 +158,7 @@ export default {
|
|||||||
this.updateInterval(this.updateData)
|
this.updateInterval(this.updateData)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {},
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -232,6 +167,24 @@ export default {
|
|||||||
&.list:not(:last-child){
|
&.list:not(:last-child){
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
}
|
}
|
||||||
|
.el-row{
|
||||||
|
background-color: #ffffff;
|
||||||
|
border:1px solid #eeeeee;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 16px;
|
||||||
|
color: #333333;
|
||||||
|
.el-col{
|
||||||
|
padding:12px 0;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.el-col{
|
||||||
|
border-bottom: 1px solid #eeeeee;
|
||||||
|
}
|
||||||
|
.el-col:not(:nth-child(3n)){
|
||||||
|
border-right: 1px solid #eeeeee;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,120 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-loading="loading">
|
|
||||||
<el-card
|
|
||||||
v-for="(item,index) in list"
|
|
||||||
:key="index+'ylLise'"
|
|
||||||
class="sbjk-card-container running-card-container"
|
|
||||||
shadow="always">
|
|
||||||
<div slot="header">
|
|
||||||
<span class="large-title">{{ item.deviceName }}</span>
|
|
||||||
<div class="info">
|
|
||||||
<div>数据更新时间:{{ item.dataUpdateTime || '-' }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="alarm">
|
|
||||||
<el-button type="primary" round size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">
|
|
||||||
详细
|
|
||||||
</el-button>
|
|
||||||
<el-badge :hidden="!item.alarmNum" :value="item.alarmNum || 0" class="item">
|
|
||||||
<i
|
|
||||||
class="el-icon-message-solid alarm-icon"
|
|
||||||
@click="pointDetail(item,'alarmPoint')"
|
|
||||||
></i>
|
|
||||||
</el-badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-row class="device-info-row">
|
|
||||||
<el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'hdTempData'" :span="12"
|
|
||||||
class="device-info-col">
|
|
||||||
<span class="pointer" @click="showChart(tempDataItem.title,item.deviceId)">
|
|
||||||
<span class="left">{{ tempDataItem.title }}</span> <span
|
|
||||||
class="right">{{ item[tempDataItem.attr] || '-' }}<span
|
|
||||||
v-html="tempDataItem.unit"></span></span>
|
|
||||||
</span>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-card>
|
|
||||||
<el-empty v-show="list.length<=0" :image-size="200"></el-empty>
|
|
||||||
<point-chart ref="pointChart" :site-id="siteId"/>
|
|
||||||
<point-table ref="pointTable"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
|
||||||
import {getDhDataList} from '@/api/ems/dzjk'
|
|
||||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
|
||||||
import pointChart from "./../PointChart.vue";
|
|
||||||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DzjkSbjkDh',
|
|
||||||
mixins: [getQuerySiteId, intervalUpdate],
|
|
||||||
components: {pointChart, PointTable},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
loading: false,
|
|
||||||
list: [],
|
|
||||||
tempData: [
|
|
||||||
{title: '湿度', attr: 'humidity', unit: ''},
|
|
||||||
{title: '温度', attr: 'temperature', unit: '℃'},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 查看设备电位表格
|
|
||||||
pointDetail(row, dataType) {
|
|
||||||
const {deviceId} = row
|
|
||||||
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'DH'}, dataType)
|
|
||||||
},
|
|
||||||
showChart(pointName, deviceId) {
|
|
||||||
pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'DH', deviceId})
|
|
||||||
},
|
|
||||||
updateData() {
|
|
||||||
this.loading = true
|
|
||||||
getDhDataList(this.siteId).then(response => {
|
|
||||||
this.list = JSON.parse(JSON.stringify(response?.data || []));
|
|
||||||
}).finally(() => {
|
|
||||||
this.loading = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
init() {
|
|
||||||
this.updateData()
|
|
||||||
this.updateInterval(this.updateData)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.sbjk-card-container {
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-row {
|
|
||||||
background-color: #ffffff;
|
|
||||||
border: 1px solid #eeeeee;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 16px;
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
.el-col {
|
|
||||||
padding: 12px 0;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-col {
|
|
||||||
border-bottom: 1px solid #eeeeee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-col:not(:nth-child(3n)) {
|
|
||||||
border-right: 1px solid #eeeeee;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -52,16 +52,13 @@
|
|||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="操作" width="160">
|
<!-- <el-table-column label="曲线图">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-button @click="$emit('pointDetail',scope.row,'point')" type="text" size="small">
|
<el-button @click="chartDetail(scope.row)" type="text" size="small">
|
||||||
详细
|
展示
|
||||||
</el-button>
|
|
||||||
<el-button @click="$emit('pointDetail',scope.row,'alarmPoint')" type="text" size="small">
|
|
||||||
报警点位详细
|
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column> -->
|
||||||
</el-table>
|
</el-table>
|
||||||
<!-- <el-pagination
|
<!-- <el-pagination
|
||||||
v-show="tableData.length > 0"
|
v-show="tableData.length > 0"
|
||||||
@ -118,6 +115,7 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
//查看表格行图表
|
//查看表格行图表
|
||||||
chartDetail(row, dataType = "") {
|
chartDetail(row, dataType = "") {
|
||||||
|
const { clusterDeviceId, deviceId } = row;
|
||||||
this.$emit("chart", { ...row, dataType });
|
this.$emit("chart", { ...row, dataType });
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@ -88,7 +88,6 @@
|
|||||||
:totalSize="totalSize"
|
:totalSize="totalSize"
|
||||||
:pointIdList="pointIdList"
|
:pointIdList="pointIdList"
|
||||||
@chart="chartDetail"
|
@chart="chartDetail"
|
||||||
@pointDetail="pointDetail"
|
|
||||||
></component>
|
></component>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
v-show="tableData.length > 0"
|
v-show="tableData.length > 0"
|
||||||
@ -105,7 +104,6 @@
|
|||||||
</el-pagination>
|
</el-pagination>
|
||||||
<chart-detail ref="chartDetail" />
|
<chart-detail ref="chartDetail" />
|
||||||
<point-chart ref="pointChart" :site-id="siteId" />
|
<point-chart ref="pointChart" :site-id="siteId" />
|
||||||
<point-table ref="pointTable"/>
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -121,12 +119,10 @@ import ChartDetail from "./ChartDetail.vue";
|
|||||||
import Table from "./Table.vue";
|
import Table from "./Table.vue";
|
||||||
import List from "./List.vue";
|
import List from "./List.vue";
|
||||||
import pointChart from "./../PointChart.vue";
|
import pointChart from "./../PointChart.vue";
|
||||||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
|
||||||
export default {
|
export default {
|
||||||
name: "DzjkSbjkDtdc",
|
name: "DzjkSbjkDtdc",
|
||||||
mixins: [getQuerySiteId],
|
mixins: [getQuerySiteId],
|
||||||
components: {
|
components: {
|
||||||
PointTable,
|
|
||||||
BarChart,
|
BarChart,
|
||||||
ChartDetail,
|
ChartDetail,
|
||||||
DtdcTable: Table,
|
DtdcTable: Table,
|
||||||
@ -169,11 +165,6 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 查看设备电位表格
|
|
||||||
pointDetail(row,dataType){
|
|
||||||
const {deviceId,clusterDeviceId} = row
|
|
||||||
this.$refs.pointTable.showTable({siteId:this.siteId,deviceId,deviceCategory:'BATTERY',parentId:clusterDeviceId},dataType)
|
|
||||||
},
|
|
||||||
changeMenu(menu) {
|
changeMenu(menu) {
|
||||||
const { activeBtn } = this;
|
const { activeBtn } = this;
|
||||||
activeBtn !== menu && (this.activeBtn = menu);
|
activeBtn !== menu && (this.activeBtn = menu);
|
||||||
|
|||||||
@ -1,133 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-loading="loading" class="ems">
|
|
||||||
<el-card
|
|
||||||
v-for="(item,index) in list"
|
|
||||||
:key="index+'emsList'"
|
|
||||||
class="sbjk-card-container list running-card-container"
|
|
||||||
shadow="always"
|
|
||||||
>
|
|
||||||
<div slot="header">
|
|
||||||
<span class="large-title">{{ item.deviceName }}</span>
|
|
||||||
<div class="info">
|
|
||||||
<div>
|
|
||||||
EMS控制模式: {{
|
|
||||||
item.emsStatus === 0 ? '自动' : '手动'
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
<div>数据更新时间:{{ item.dataUpdateTime }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="alarm">
|
|
||||||
<el-button size="small" round style="margin-right:20px;" type="primary" @click="pointDetail(item,'point')">详细
|
|
||||||
</el-button>
|
|
||||||
<el-badge :hidden="!item.alarmNum" :value="item.alarmNum || 0" class="item">
|
|
||||||
<i
|
|
||||||
class="el-icon-message-solid alarm-icon"
|
|
||||||
@click="pointDetail(item,'alarmPoint')"
|
|
||||||
></i>
|
|
||||||
</el-badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-row class="device-info-row">
|
|
||||||
<el-col v-for="(tempDataItem,tempDataIndex) in bmsDataList" :key="tempDataIndex+'bmsTempData'"
|
|
||||||
:span="6" class="device-info-col">
|
|
||||||
<span class="pointer" @click="showChart(tempDataItem.name,item.deviceId)">
|
|
||||||
<span class="left">{{ tempDataItem.name }}</span> <span class="right">{{ item[tempDataItem.attr] }}<span
|
|
||||||
v-html="tempDataItem.unit"></span></span>
|
|
||||||
</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col v-for="(tempDataItem,tempDataIndex) in pcsDataList" :key="tempDataIndex+'pcsTempData'"
|
|
||||||
:span="6" class="device-info-col">
|
|
||||||
<span class="pointer" @click="showChart(tempDataItem.name,item.deviceId)">
|
|
||||||
<span class="left">{{ tempDataItem.name }}</span> <span class="right">{{ item[tempDataItem.attr] }}<span
|
|
||||||
v-html="tempDataItem.unit"></span></span>
|
|
||||||
</span>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<el-empty v-show="list.length <= 0" :image-size="200"></el-empty>
|
|
||||||
<point-chart ref="pointChart" :site-id="siteId"/>
|
|
||||||
<point-table ref="pointTable"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import pointChart from "./../PointChart.vue";
|
|
||||||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
|
||||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
|
||||||
import {getEmsDataList} from "@/api/ems/dzjk";
|
|
||||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "DzjkSbjkEms",
|
|
||||||
components: {pointChart, PointTable},
|
|
||||||
mixins: [getQuerySiteId, intervalUpdate],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
loading: false,
|
|
||||||
list: [],
|
|
||||||
bmsDataList: [{
|
|
||||||
name: 'BMS1SOC',
|
|
||||||
attr: 'bms1Soc'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'BMS2SOC',
|
|
||||||
attr: 'bms2Soc'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'BMS3SOC',
|
|
||||||
attr: 'bms3Soc'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'BMS4SOC',
|
|
||||||
attr: 'bms4Soc'
|
|
||||||
}],
|
|
||||||
pcsDataList: [{
|
|
||||||
name: 'PCS-1有功功率',
|
|
||||||
attr: 'pcs1Yggl'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'PCS-2有功功率',
|
|
||||||
attr: 'pcs2Yggl'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'PCS-3有功功率',
|
|
||||||
attr: 'pcs3Yggl'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'PCS-4有功功率',
|
|
||||||
attr: 'pcs4Yggl'
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 查看设备电位表格
|
|
||||||
pointDetail(row, dataType) {
|
|
||||||
const {deviceId} = row
|
|
||||||
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'EMS'}, dataType)
|
|
||||||
},
|
|
||||||
showChart(pointName, deviceId) {
|
|
||||||
pointName &&
|
|
||||||
this.$refs.pointChart.showChart({pointName, deviceCategory: 'EMS', deviceId});
|
|
||||||
},
|
|
||||||
getData() {
|
|
||||||
this.loading = true;
|
|
||||||
getEmsDataList(this.siteId)
|
|
||||||
.then((response) => {
|
|
||||||
const data = response?.data || {};
|
|
||||||
this.list = JSON.parse(JSON.stringify(data));
|
|
||||||
})
|
|
||||||
.finally(() => (this.loading = false));
|
|
||||||
},
|
|
||||||
updateData() {
|
|
||||||
this.getData();
|
|
||||||
},
|
|
||||||
init() {
|
|
||||||
this.updateData();
|
|
||||||
this.updateInterval(this.updateData);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
@ -19,14 +19,13 @@
|
|||||||
</keep-alive>
|
</keep-alive>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||||
import { dzjk } from '@/router/ems'
|
import { dzjk } from '@/router/ems'
|
||||||
import {mapState} from "vuex";
|
import {mapState} from "vuex";
|
||||||
const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DzjkSbjk').children//获取到单站监控-设备监控下面的字路由
|
const childrenRoute = ((dzjk[0]?.children || []).find(item=> item.name==='DzjkSbjk').children) || []//获取到单站监控-设备监控下面的字路由
|
||||||
export default {
|
export default {
|
||||||
name:'DzjkSbjk',
|
name:'DzjkSbjk',
|
||||||
mixins:[getQuerySiteId],
|
mixins:[getQuerySiteId],
|
||||||
@ -65,6 +64,10 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.sbjk-ems-dashboard-editor-container {
|
||||||
|
display: flex;
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
.sbjk-ems-content-container {
|
.sbjk-ems-content-container {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
@ -72,4 +75,3 @@ export default {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@ -8,13 +8,17 @@
|
|||||||
style="margin-bottom: 25px"
|
style="margin-bottom: 25px"
|
||||||
>
|
>
|
||||||
<el-card
|
<el-card
|
||||||
:class="handleCardClass(pcsItem)"
|
:class="{
|
||||||
|
'warning-card-container': pcsItem.workStatus === '1',
|
||||||
|
'timing-card-container': pcsItem.workStatus === '2',
|
||||||
|
'running-card-container': !['1', '2'].includes(pcsItem.workStatus),
|
||||||
|
}"
|
||||||
class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
||||||
shadow="always"
|
shadow="always"
|
||||||
>
|
>
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
<span class="large-title"
|
<span class="large-title"
|
||||||
>{{ pcsItem.deviceName }}</span
|
>{{ pcsIndex + 1 }}#{{ pcsItem.deviceName }}</span
|
||||||
>
|
>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<div>
|
<div>
|
||||||
@ -27,14 +31,10 @@
|
|||||||
<div>数据更新时间:{{ pcsItem.dataUpdateTime }}</div>
|
<div>数据更新时间:{{ pcsItem.dataUpdateTime }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alarm">
|
<div class="alarm">
|
||||||
<el-button type="primary" round size="small" style="margin-right:20px;"
|
<el-badge :value="pcsItem.alarmNum || 0" class="item">
|
||||||
@click="pointDetail(pcsItem,'point')">
|
|
||||||
详细
|
|
||||||
</el-button>
|
|
||||||
<el-badge :hidden="!pcsItem.alarmNum" :value="pcsItem.alarmNum || 0" class="item">
|
|
||||||
<i
|
<i
|
||||||
class="el-icon-message-solid alarm-icon"
|
class="el-icon-message-solid"
|
||||||
@click="pointDetail(pcsItem,'alarmPoint')"
|
style="font-size: 26px; color: #fff; display: block"
|
||||||
></i>
|
></i>
|
||||||
</el-badge>
|
</el-badge>
|
||||||
</div>
|
</div>
|
||||||
@ -42,14 +42,15 @@
|
|||||||
<div class="descriptions-main">
|
<div class="descriptions-main">
|
||||||
<el-descriptions :colon="false" :column="4" direction="vertical">
|
<el-descriptions :colon="false" :column="4" direction="vertical">
|
||||||
<el-descriptions-item
|
<el-descriptions-item
|
||||||
contentClassName="descriptions-direction work-status"
|
:contentClassName="`descriptions-direction ${
|
||||||
|
pcsItem.workStatus === '0' ? 'save' : 'danger'
|
||||||
|
}`"
|
||||||
:span="1"
|
:span="1"
|
||||||
label="工作状态"
|
label="工作状态"
|
||||||
labelClassName="descriptions-label"
|
labelClassName="descriptions-label"
|
||||||
>{{
|
>{{
|
||||||
PCSWorkStatusOptions[pcsItem.workStatus]
|
$store.state.ems.workStatusOptions[pcsItem.workStatus]
|
||||||
}}
|
}}</el-descriptions-item
|
||||||
</el-descriptions-item
|
|
||||||
>
|
>
|
||||||
<el-descriptions-item
|
<el-descriptions-item
|
||||||
:span="1"
|
:span="1"
|
||||||
@ -58,20 +59,18 @@
|
|||||||
labelClassName="descriptions-label"
|
labelClassName="descriptions-label"
|
||||||
>{{
|
>{{
|
||||||
$store.state.ems.gridStatusOptions[pcsItem.gridStatus]
|
$store.state.ems.gridStatusOptions[pcsItem.gridStatus]
|
||||||
}}
|
}}</el-descriptions-item
|
||||||
</el-descriptions-item
|
|
||||||
>
|
>
|
||||||
<el-descriptions-item
|
<el-descriptions-item
|
||||||
:contentClassName="`descriptions-direction ${
|
:contentClassName="`descriptions-direction ${
|
||||||
pcsItem.deviceStatus === '1' ? 'save' : 'danger'
|
pcsItem.deviceStatus === '2' ? 'save' : 'danger'
|
||||||
}`"
|
}`"
|
||||||
:span="1"
|
:span="1"
|
||||||
label="设备状态"
|
label="设备状态"
|
||||||
labelClassName="descriptions-label"
|
labelClassName="descriptions-label"
|
||||||
>{{
|
>{{
|
||||||
$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]
|
$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]
|
||||||
}}
|
}}</el-descriptions-item
|
||||||
</el-descriptions-item
|
|
||||||
>
|
>
|
||||||
<el-descriptions-item
|
<el-descriptions-item
|
||||||
:span="1"
|
:span="1"
|
||||||
@ -80,8 +79,7 @@
|
|||||||
labelClassName="descriptions-label"
|
labelClassName="descriptions-label"
|
||||||
>{{
|
>{{
|
||||||
$store.state.ems.controlModeOptions[pcsItem.controlMode]
|
$store.state.ems.controlModeOptions[pcsItem.controlMode]
|
||||||
}}
|
}}</el-descriptions-item
|
||||||
</el-descriptions-item
|
|
||||||
>
|
>
|
||||||
</el-descriptions>
|
</el-descriptions>
|
||||||
</div>
|
</div>
|
||||||
@ -128,8 +126,7 @@
|
|||||||
:span="4"
|
:span="4"
|
||||||
contentClassName="descriptions-direction keep"
|
contentClassName="descriptions-direction keep"
|
||||||
labelClassName="descriptions-label"
|
labelClassName="descriptions-label"
|
||||||
>{{ item.dischargeStatus }}
|
>{{ item.dischargeStatus }}</el-descriptions-item
|
||||||
</el-descriptions-item
|
|
||||||
>
|
>
|
||||||
<el-descriptions-item
|
<el-descriptions-item
|
||||||
:span="1"
|
:span="1"
|
||||||
@ -173,28 +170,19 @@
|
|||||||
</div>
|
</div>
|
||||||
<el-empty v-show="pcsList.length <= 0" :image-size="200"></el-empty>
|
<el-empty v-show="pcsList.length <= 0" :image-size="200"></el-empty>
|
||||||
<point-chart ref="pointChart" :site-id="siteId" />
|
<point-chart ref="pointChart" :site-id="siteId" />
|
||||||
<point-table ref="pointTable"/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import pointChart from "./../PointChart.vue";
|
import pointChart from "./../PointChart.vue";
|
||||||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
|
||||||
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
|
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
|
||||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||||
import {getPcsDetailInfo, getRunningHeadInfo} from "@/api/ems/dzjk";
|
import { getRunningHeadInfo, getPcsDetailInfo } from "@/api/ems/dzjk";
|
||||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||||
import {mapState} from "vuex";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "DzjkSbjkPcs",
|
name: "DzjkSbjkPcs",
|
||||||
components: {RealTimeBaseInfo, pointChart, PointTable},
|
components: { RealTimeBaseInfo, pointChart },
|
||||||
mixins: [getQuerySiteId, intervalUpdate],
|
mixins: [getQuerySiteId, intervalUpdate],
|
||||||
computed: {
|
|
||||||
...mapState({
|
|
||||||
PCSWorkStatusOptions: state => state?.ems?.PCSWorkStatusOptions || {},
|
|
||||||
})
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
@ -202,10 +190,10 @@ export default {
|
|||||||
pcsList: [],
|
pcsList: [],
|
||||||
infoData: [
|
infoData: [
|
||||||
{
|
{
|
||||||
label: "总交流有功功率",
|
label: "总交流有功电率",
|
||||||
attr: "totalActivePower",
|
attr: "totalActivePower",
|
||||||
unit: "kW",
|
unit: "kW",
|
||||||
pointName: "总交流有功功率",
|
pointName: "总交流有功电率",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "当天交流充电量",
|
label: "当天交流充电量",
|
||||||
@ -221,10 +209,10 @@ export default {
|
|||||||
pointName: "A相电流",
|
pointName: "A相电流",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "总交流无功功率",
|
label: "总交流无功电率",
|
||||||
attr: "totalReactivePower",
|
attr: "totalReactivePower",
|
||||||
unit: "kVar",
|
unit: "kVar",
|
||||||
pointName: "总交流无功功率",
|
pointName: "总交流无功电率",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "当天交流放电量",
|
label: "当天交流放电量",
|
||||||
@ -281,15 +269,6 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleCardClass(item) {
|
|
||||||
const {workStatus = ''} = item
|
|
||||||
return workStatus === '1' || !Object.keys(this.PCSWorkStatusOptions).find(i => i === workStatus) ? "timing-card-container" : workStatus === '2' ? 'warning-card-container' : 'running-card-container'
|
|
||||||
},
|
|
||||||
// 查看设备电位表格
|
|
||||||
pointDetail(row, dataType) {
|
|
||||||
const {deviceId} = row
|
|
||||||
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'PCS'}, dataType)
|
|
||||||
},
|
|
||||||
showChart(pointName, deviceId,isBranch=false) {
|
showChart(pointName, deviceId,isBranch=false) {
|
||||||
pointName &&
|
pointName &&
|
||||||
this.$refs.pointChart.showChart({ pointName,deviceCategory:isBranch ? 'BRANCH' : 'PCS', deviceId });
|
this.$refs.pointChart.showChart({ pointName,deviceCategory:isBranch ? 'BRANCH' : 'PCS', deviceId });
|
||||||
|
|||||||
@ -14,6 +14,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import resize from "@/mixins/ems/resize";
|
import resize from "@/mixins/ems/resize";
|
||||||
|
import { formatDate } from "@/filters/ems";
|
||||||
import { storagePower } from "@/api/ems/dzjk";
|
import { storagePower } from "@/api/ems/dzjk";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -34,10 +35,12 @@ export default {
|
|||||||
this.chart = null;
|
this.chart = null;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init(siteId, timeRange) {
|
init(siteId) {
|
||||||
this.chart.showLoading();
|
this.chart.showLoading();
|
||||||
const [startTime = '', endTime = ''] = timeRange;
|
const x = [];
|
||||||
storagePower(siteId, startTime, endTime)
|
const data1 = [],
|
||||||
|
data2 = [];
|
||||||
|
storagePower(siteId)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
this.setOption(response?.data?.pcsPowerList || []);
|
this.setOption(response?.data?.pcsPowerList || []);
|
||||||
})
|
})
|
||||||
@ -46,6 +49,7 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
setOption(data) {
|
setOption(data) {
|
||||||
|
// data=[{deviceId:'pcs1',energyStoragePowList:[{createDate,deviceId,pcsTotalActPower,pcsTotalReactivePower}]}]
|
||||||
let xdata = [],
|
let xdata = [],
|
||||||
series = [];
|
series = [];
|
||||||
data.forEach((element, index) => {
|
data.forEach((element, index) => {
|
||||||
@ -60,13 +64,8 @@ export default {
|
|||||||
// color:'#FFBD00'
|
// color:'#FFBD00'
|
||||||
},
|
},
|
||||||
data: (element.energyStoragePowList || []).map(
|
data: (element.energyStoragePowList || []).map(
|
||||||
(i) => {
|
(i) => i.pcsTotalActPower
|
||||||
return {
|
),
|
||||||
value: i.pcsTotalActPower,
|
|
||||||
year: i.dateDay || ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "line",
|
type: "line",
|
||||||
@ -75,17 +74,12 @@ export default {
|
|||||||
// color:'#FFBD00'
|
// color:'#FFBD00'
|
||||||
},
|
},
|
||||||
data: (element.energyStoragePowList || []).map(
|
data: (element.energyStoragePowList || []).map(
|
||||||
(i) => {
|
(i) => i.pcsTotalReactivePower
|
||||||
return {
|
|
||||||
value: i.pcsTotalReactivePower,
|
|
||||||
year: i.dateDay || ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
),
|
),
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
this.chart && this.chart.setOption({
|
this.chart.setOption({
|
||||||
legend: {
|
legend: {
|
||||||
left: "center",
|
left: "center",
|
||||||
top: "5",
|
top: "5",
|
||||||
@ -99,24 +93,11 @@ export default {
|
|||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
show: true,
|
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
// 坐标轴指示器,坐标轴触发有效
|
// 坐标轴指示器,坐标轴触发有效
|
||||||
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
|
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
|
||||||
},
|
},
|
||||||
formatter: (params) => {
|
|
||||||
if (params.length <= 0) return
|
|
||||||
let result = (params[0].data.year || '') + ' ' + params[0].name + '<div>'
|
|
||||||
params.forEach(item => {
|
|
||||||
const {color, seriesName, value} = item
|
|
||||||
result += `<div style="position: relative;padding-left:20px;line-height: 20px;">
|
|
||||||
<div style="position: absolute;top:50%;left:0;width:12px;height:12px;border-radius:100%;background: ${color};transform: translateY(-50%)"></div>
|
|
||||||
<span>${seriesName}</span><span style="margin-left:20px;font-weight: 700">${value}</span></div>`
|
|
||||||
})
|
|
||||||
result += '</div>'
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#333333",
|
color: "#333333",
|
||||||
@ -137,7 +118,7 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
series,
|
series,
|
||||||
}, true);
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -14,6 +14,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import resize from "@/mixins/ems/resize";
|
import resize from "@/mixins/ems/resize";
|
||||||
|
import { formatDate } from "@/filters/ems";
|
||||||
import { batteryAveSoc } from "@/api/ems/dzjk";
|
import { batteryAveSoc } from "@/api/ems/dzjk";
|
||||||
export default {
|
export default {
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
@ -33,10 +34,9 @@ export default {
|
|||||||
this.chart = null;
|
this.chart = null;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init(siteId,timeRange) {
|
init(siteId) {
|
||||||
this.chart.showLoading();
|
this.chart.showLoading();
|
||||||
const [startTime='', endTime=''] = timeRange;
|
batteryAveSoc(siteId)
|
||||||
batteryAveSoc(siteId,startTime,endTime)
|
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
this.setOption(response?.data?.batteryAveSOCList || []);
|
this.setOption(response?.data?.batteryAveSOCList || []);
|
||||||
})
|
})
|
||||||
@ -49,12 +49,9 @@ export default {
|
|||||||
ydata = [];
|
ydata = [];
|
||||||
data.forEach((element) => {
|
data.forEach((element) => {
|
||||||
xdata.push(element.createDate);
|
xdata.push(element.createDate);
|
||||||
ydata.push({
|
ydata.push(element.batterySOC);
|
||||||
value:element.batterySOC,
|
|
||||||
year:element.dateDay,
|
|
||||||
});
|
});
|
||||||
});
|
xdata = this.chart.setOption({
|
||||||
this.chart && this.chart.setOption({
|
|
||||||
legend: {
|
legend: {
|
||||||
left: "center",
|
left: "center",
|
||||||
top: "5",
|
top: "5",
|
||||||
@ -68,24 +65,11 @@ export default {
|
|||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
show:true,
|
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
// 坐标轴指示器,坐标轴触发有效
|
// 坐标轴指示器,坐标轴触发有效
|
||||||
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
|
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
|
||||||
},
|
},
|
||||||
formatter :(params)=>{
|
|
||||||
if(params.length <= 0) return
|
|
||||||
let result = (params[0].data.year || '')+' '+params[0].name + '<div>'
|
|
||||||
params.forEach(item=>{
|
|
||||||
const {color,seriesName,value} = item
|
|
||||||
result += `<div style="position: relative;padding-left:20px;line-height: 20px;">
|
|
||||||
<div style="position: absolute;top:50%;left:0;width:12px;height:12px;border-radius:100%;background: ${color};transform: translateY(-50%)"></div>
|
|
||||||
<span>${seriesName}</span><span style="margin-left:20px;font-weight: 700">${value}</span></div>`
|
|
||||||
})
|
|
||||||
result+='</div>'
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#333333",
|
color: "#333333",
|
||||||
@ -115,7 +99,7 @@ export default {
|
|||||||
data: ydata,
|
data: ydata,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},true);
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -14,6 +14,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import resize from "@/mixins/ems/resize";
|
import resize from "@/mixins/ems/resize";
|
||||||
|
import { formatDate } from "@/filters/ems";
|
||||||
import { batteryAveTemp } from "@/api/ems/dzjk";
|
import { batteryAveTemp } from "@/api/ems/dzjk";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -34,10 +35,12 @@ export default {
|
|||||||
this.chart = null;
|
this.chart = null;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init(siteId,timeRange) {
|
init(siteId) {
|
||||||
this.chart.showLoading();
|
this.chart.showLoading();
|
||||||
const [startTime='', endTime=''] = timeRange;
|
const x = [];
|
||||||
batteryAveTemp(siteId,startTime,endTime)
|
const data1 = [],
|
||||||
|
data2 = [];
|
||||||
|
batteryAveTemp(siteId)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
this.setOption(response?.data?.batteryAveTempList || []);
|
this.setOption(response?.data?.batteryAveTempList || []);
|
||||||
})
|
})
|
||||||
@ -50,14 +53,9 @@ export default {
|
|||||||
ydata = [];
|
ydata = [];
|
||||||
data.forEach((element) => {
|
data.forEach((element) => {
|
||||||
xdata.push(element.createDate);
|
xdata.push(element.createDate);
|
||||||
ydata.push(
|
ydata.push(element.batteryTemp);
|
||||||
{
|
|
||||||
value: element.batteryTemp,
|
|
||||||
year: element.dateDay
|
|
||||||
}
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
this.chart && this.chart.setOption({
|
xdata = this.chart.setOption({
|
||||||
legend: {
|
legend: {
|
||||||
left: "center",
|
left: "center",
|
||||||
top: "5",
|
top: "5",
|
||||||
@ -71,24 +69,11 @@ export default {
|
|||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
show:true,
|
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
// 坐标轴指示器,坐标轴触发有效
|
// 坐标轴指示器,坐标轴触发有效
|
||||||
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
|
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
|
||||||
},
|
},
|
||||||
formatter :(params)=>{
|
|
||||||
if(params.length <= 0) return
|
|
||||||
let result = (params[0].data.year || '')+' '+params[0].name + '<div>'
|
|
||||||
params.forEach(item=>{
|
|
||||||
const {color,seriesName,value} = item
|
|
||||||
result += `<div style="position: relative;padding-left:20px;line-height: 20px;">
|
|
||||||
<div style="position: absolute;top:50%;left:0;width:12px;height:12px;border-radius:100%;background: ${color};transform: translateY(-50%)"></div>
|
|
||||||
<span>${seriesName}</span><span style="margin-left:20px;font-weight: 700">${value}</span></div>`
|
|
||||||
})
|
|
||||||
result+='</div>'
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#333333",
|
color: "#333333",
|
||||||
@ -118,7 +103,7 @@ export default {
|
|||||||
data: ydata,
|
data: ydata,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},true);
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -14,6 +14,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import resize from "@/mixins/ems/resize";
|
import resize from "@/mixins/ems/resize";
|
||||||
|
import { formatDate } from "@/filters/ems";
|
||||||
import { pcsMaxTemp } from "@/api/ems/dzjk";
|
import { pcsMaxTemp } from "@/api/ems/dzjk";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -34,10 +35,11 @@ export default {
|
|||||||
this.chart = null;
|
this.chart = null;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init(siteId,timeRange) {
|
init(siteId) {
|
||||||
this.chart.showLoading();
|
this.chart.showLoading();
|
||||||
const [startTime='', endTime=''] = timeRange;
|
const x = [];
|
||||||
pcsMaxTemp(siteId,startTime,endTime)
|
const data = [];
|
||||||
|
pcsMaxTemp(siteId)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
this.setOption(response?.data?.pcsMaxTempList || []);
|
this.setOption(response?.data?.pcsMaxTempList || []);
|
||||||
})
|
})
|
||||||
@ -58,15 +60,10 @@ export default {
|
|||||||
areaStyle: {
|
areaStyle: {
|
||||||
// color:'#FFBD00'
|
// color:'#FFBD00'
|
||||||
},
|
},
|
||||||
data: (element.maxTempVoList || []).map((i) => {
|
data: (element.maxTempVoList || []).map((i) => i.temp),
|
||||||
return {
|
|
||||||
value: i.temp,
|
|
||||||
year: i.dateDay
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
this.chart && this.chart.setOption({
|
this.chart.setOption({
|
||||||
legend: {
|
legend: {
|
||||||
left: "center",
|
left: "center",
|
||||||
top: "5",
|
top: "5",
|
||||||
@ -80,24 +77,11 @@ export default {
|
|||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
show:true,
|
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
// 坐标轴指示器,坐标轴触发有效
|
// 坐标轴指示器,坐标轴触发有效
|
||||||
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
|
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
|
||||||
},
|
},
|
||||||
formatter :(params)=>{
|
|
||||||
if(params.length <= 0) return
|
|
||||||
let result = (params[0].data.year || '')+' '+params[0].name + '<div>'
|
|
||||||
params.forEach(item=>{
|
|
||||||
const {color,seriesName,value} = item
|
|
||||||
result += `<div style="position: relative;padding-left:20px;line-height: 20px;">
|
|
||||||
<div style="position: absolute;top:50%;left:0;width:12px;height:12px;border-radius:100%;background: ${color};transform: translateY(-50%)"></div>
|
|
||||||
<span>${seriesName}</span><span style="margin-left:20px;font-weight: 700">${value}</span></div>`
|
|
||||||
})
|
|
||||||
result+='</div>'
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#333333",
|
color: "#333333",
|
||||||
@ -118,7 +102,7 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
series,
|
series,
|
||||||
},true);
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -3,8 +3,6 @@
|
|||||||
<div class="ssyx-ems-dashboard-editor-container">
|
<div class="ssyx-ems-dashboard-editor-container">
|
||||||
<!-- 6个方块-->
|
<!-- 6个方块-->
|
||||||
<real-time-base-info :data="runningHeadData"/>
|
<real-time-base-info :data="runningHeadData"/>
|
||||||
<!-- 时间选择 -->
|
|
||||||
<date-range-select ref="dateRangeSelect" @updateDate="updateDate" style="margin-top:20px;"/>
|
|
||||||
<!-- echart图表-->
|
<!-- echart图表-->
|
||||||
<el-row :gutter="32" style="background:#fff;margin:30px 0;">
|
<el-row :gutter="32" style="background:#fff;margin:30px 0;">
|
||||||
<el-col :xs="24" :sm="12" :lg="12">
|
<el-col :xs="24" :sm="12" :lg="12">
|
||||||
@ -29,7 +27,6 @@
|
|||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
|
|
||||||
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
|
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
|
||||||
import CnglqxChart from './CnglqxChart.vue'
|
import CnglqxChart from './CnglqxChart.vue'
|
||||||
import PocpjwdChart from './PocpjwdChart.vue'
|
import PocpjwdChart from './PocpjwdChart.vue'
|
||||||
@ -41,13 +38,11 @@ import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name:'DzjkSbjkSsyx',
|
name:'DzjkSbjkSsyx',
|
||||||
components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart,DateRangeSelect},
|
components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart},
|
||||||
mixins:[getQuerySiteId,intervalUpdate],
|
mixins:[getQuerySiteId,intervalUpdate],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
runningHeadData:{},//运行信息
|
runningHeadData:{},//运行信息
|
||||||
timeRange:[],
|
|
||||||
isInit:true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
@ -57,27 +52,17 @@ export default {
|
|||||||
this.runningHeadData = response?.data || {}
|
this.runningHeadData = response?.data || {}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 更新时间范围 重置图表
|
|
||||||
updateDate(data){
|
|
||||||
this.timeRange=data
|
|
||||||
!this.isInit && this.updateChart()
|
|
||||||
this.isInit = false
|
|
||||||
},
|
|
||||||
updateChart(){
|
|
||||||
this.$refs.cnglqx.init(this.siteId,this.timeRange||[])
|
|
||||||
this.$refs.pocpjwd.init(this.siteId,this.timeRange||[])
|
|
||||||
this.$refs.dcpjsoc.init(this.siteId,this.timeRange||[])
|
|
||||||
this.$refs.dcpjwd.init(this.siteId,this.timeRange||[])
|
|
||||||
this.updateInterval(this.updateData)
|
|
||||||
},
|
|
||||||
updateData(){
|
updateData(){
|
||||||
this.getRunningHeadData()
|
this.getRunningHeadData()
|
||||||
this.updateChart()
|
this.$refs.cnglqx.init(this.siteId)
|
||||||
|
this.$refs.pocpjwd.init(this.siteId)
|
||||||
|
this.$refs.dcpjsoc.init(this.siteId)
|
||||||
|
this.$refs.dcpjwd.init(this.siteId)
|
||||||
},
|
},
|
||||||
init(){
|
init(){
|
||||||
this.$refs.dateRangeSelect.init(true)
|
|
||||||
this.$nextTick(()=>{
|
this.$nextTick(()=>{
|
||||||
this.updateData()
|
this.updateData()
|
||||||
|
this.updateInterval(this.updateData)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,134 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-loading="loading">
|
|
||||||
<el-card
|
|
||||||
v-for="(item,index) in list"
|
|
||||||
:key="index+'ylLise'"
|
|
||||||
class="sbjk-card-container running-card-container"
|
|
||||||
:class="{
|
|
||||||
'warning-card-container':item.emsCommunicationStatus && item.emsCommunicationStatus !== '0',
|
|
||||||
'running-card-container':item.emsCommunicationStatus === '0'
|
|
||||||
}"
|
|
||||||
shadow="always">
|
|
||||||
<div slot="header">
|
|
||||||
<span class="large-title">{{ item.deviceName }}</span>
|
|
||||||
<div class="info">
|
|
||||||
<div>
|
|
||||||
{{
|
|
||||||
$store.state.ems.communicationStatusOptions[
|
|
||||||
item.emsCommunicationStatus
|
|
||||||
]
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
<div>数据更新时间:{{ item.dataUpdateTime || '-' }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="alarm">
|
|
||||||
<el-button type="primary" round size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">
|
|
||||||
详细
|
|
||||||
</el-button>
|
|
||||||
<el-badge :hidden="!item.alarmNum" :value="item.alarmNum || 0" class="item">
|
|
||||||
<i
|
|
||||||
class="el-icon-message-solid alarm-icon"
|
|
||||||
@click="pointDetail(item,'alarmPoint')"
|
|
||||||
></i>
|
|
||||||
</el-badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-row class="device-info-row">
|
|
||||||
<el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'hdTempData'" :span="12"
|
|
||||||
class="device-info-col">
|
|
||||||
<span class="pointer" @click="showChart(tempDataItem.title,item.deviceId)">
|
|
||||||
<span class="left">{{ tempDataItem.title }}</span> <span class="right">{{
|
|
||||||
item[tempDataItem.attr] || '-'
|
|
||||||
}}<span
|
|
||||||
v-html="tempDataItem.unit"></span></span>
|
|
||||||
</span>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-card>
|
|
||||||
<el-empty v-show="list.length<=0" :image-size="200"></el-empty>
|
|
||||||
<point-chart ref="pointChart" :site-id="siteId"/>
|
|
||||||
<point-table ref="pointTable"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
|
||||||
import {getXfDataList} from '@/api/ems/dzjk'
|
|
||||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
|
||||||
import pointChart from "./../PointChart.vue";
|
|
||||||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DzjkSbjkXf',
|
|
||||||
mixins: [getQuerySiteId, intervalUpdate],
|
|
||||||
components: {pointChart, PointTable},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
loading: false,
|
|
||||||
list: [],
|
|
||||||
tempData: [
|
|
||||||
{title: '主电源备用电池状态', attr: 'dczt', unit: ''},
|
|
||||||
{title: '手自动状态延时状态', attr: 'yszt', unit: ''},
|
|
||||||
{title: '启动喷洒气体喷洒状态', attr: 'pszt', unit: ''},
|
|
||||||
{title: '压力开关状态电磁阀状态', attr: 'dcfzt', unit: ''},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 查看设备电位表格
|
|
||||||
pointDetail(row, dataType) {
|
|
||||||
const {deviceId} = row
|
|
||||||
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'XF'}, dataType)
|
|
||||||
},
|
|
||||||
showChart(pointName, deviceId) {
|
|
||||||
pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'XF', deviceId})
|
|
||||||
},
|
|
||||||
updateData() {
|
|
||||||
this.loading = true
|
|
||||||
getXfDataList(this.siteId).then(response => {
|
|
||||||
this.list = JSON.parse(JSON.stringify(response?.data || []));
|
|
||||||
}).finally(() => {
|
|
||||||
this.loading = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
init() {
|
|
||||||
this.updateData()
|
|
||||||
this.updateInterval(this.updateData)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.sbjk-card-container {
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-row {
|
|
||||||
background-color: #ffffff;
|
|
||||||
border: 1px solid #eeeeee;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 16px;
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
.el-col {
|
|
||||||
padding: 12px 0;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-col {
|
|
||||||
border-bottom: 1px solid #eeeeee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-col:not(:nth-child(3n)) {
|
|
||||||
border-right: 1px solid #eeeeee;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,3 +1,4 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-loading="loading">
|
<div v-loading="loading">
|
||||||
<el-card
|
<el-card
|
||||||
@ -6,36 +7,18 @@
|
|||||||
class="sbjk-card-container running-card-container"
|
class="sbjk-card-container running-card-container"
|
||||||
shadow="always">
|
shadow="always">
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
<span class="large-title">{{ item.deviceName }}</span>
|
<span class="large-title">{{index+1}}#{{item.deviceName}}</span>
|
||||||
<div class="info">
|
|
||||||
<div>数据更新时间:{{ item.dataUpdateTime || '-' }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="alarm">
|
<el-row>
|
||||||
<el-button type="primary" round size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">
|
<el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8">
|
||||||
详细
|
|
||||||
</el-button>
|
|
||||||
<el-badge :hidden="!item.alarmNum" :value="item.alarmNum || 0" class="item">
|
|
||||||
<i
|
|
||||||
class="el-icon-message-solid alarm-icon"
|
|
||||||
@click="pointDetail(item,'alarmPoint')"
|
|
||||||
></i>
|
|
||||||
</el-badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-row class="device-info-row">
|
|
||||||
<el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8"
|
|
||||||
class="device-info-col">
|
|
||||||
<span class="pointer" @click="showChart(tempDataItem.title,item.deviceId)">
|
<span class="pointer" @click="showChart(tempDataItem.title,item.deviceId)">
|
||||||
<span class="left">{{ tempDataItem.title }}</span> <span
|
{{tempDataItem.title}}:{{item[tempDataItem.attr]}}<span v-html="tempDataItem.unit"></span>
|
||||||
class="right">{{ item[tempDataItem.attr] || '-' }}<span
|
|
||||||
v-html="tempDataItem.unit"></span></span>
|
|
||||||
</span>
|
</span>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-empty v-show="list.length<=0" :image-size="200"></el-empty>
|
<el-empty v-show="list.length<=0" :image-size="200"></el-empty>
|
||||||
<point-chart ref="pointChart" :site-id="siteId"/>
|
<point-chart ref="pointChart" :site-id="siteId"/>
|
||||||
<point-table ref="pointTable"/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -45,12 +28,10 @@ import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
|||||||
import {getCoolingDataList} from '@/api/ems/dzjk'
|
import {getCoolingDataList} from '@/api/ems/dzjk'
|
||||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||||
import pointChart from "./../PointChart.vue";
|
import pointChart from "./../PointChart.vue";
|
||||||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name:'DzjkSbjkYl',
|
name:'DzjkSbjkYl',
|
||||||
mixins:[getQuerySiteId,intervalUpdate],
|
mixins:[getQuerySiteId,intervalUpdate],
|
||||||
components: {pointChart, PointTable},
|
components:{pointChart},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading:false,
|
loading:false,
|
||||||
@ -67,11 +48,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
// 查看设备电位表格
|
|
||||||
pointDetail(row, dataType) {
|
|
||||||
const {deviceId} = row
|
|
||||||
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'COOLING'}, dataType)
|
|
||||||
},
|
|
||||||
showChart(pointName,deviceId){
|
showChart(pointName,deviceId){
|
||||||
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'COOLING',deviceId})
|
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'COOLING',deviceId})
|
||||||
},
|
},
|
||||||
@ -79,9 +55,7 @@ export default {
|
|||||||
this.loading = true
|
this.loading = true
|
||||||
getCoolingDataList(this.siteId).then(response => {
|
getCoolingDataList(this.siteId).then(response => {
|
||||||
this.list = JSON.parse(JSON.stringify(response?.data || []));
|
this.list = JSON.parse(JSON.stringify(response?.data || []));
|
||||||
}).finally(() => {
|
}).finally(() => {this.loading = false})
|
||||||
this.loading = false
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
init(){
|
init(){
|
||||||
this.updateData()
|
this.updateData()
|
||||||
@ -99,5 +73,23 @@ export default {
|
|||||||
&:not(:last-child){
|
&:not(:last-child){
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
}
|
}
|
||||||
|
.el-row{
|
||||||
|
background-color: #ffffff;
|
||||||
|
border:1px solid #eeeeee;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 16px;
|
||||||
|
color: #333333;
|
||||||
|
.el-col{
|
||||||
|
padding:12px 0;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.el-col{
|
||||||
|
border-bottom: 1px solid #eeeeee;
|
||||||
|
}
|
||||||
|
.el-col:not(:nth-child(3n)){
|
||||||
|
border-right: 1px solid #eeeeee;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -7,39 +7,48 @@
|
|||||||
text-color="#666666"
|
text-color="#666666"
|
||||||
active-text-color="#ffffff"
|
active-text-color="#ffffff"
|
||||||
>
|
>
|
||||||
<el-menu-item :index="item.name" v-for="(item,index) in childrenRoute" :key="index+'tjbbChildrenRoute'">
|
<el-menu-item
|
||||||
<router-link style="height: 100%;width: 100%;display: block;" :to="{path:item.path,query:$route.query}">
|
:index="item.name"
|
||||||
|
v-for="(item, index) in childrenRoute"
|
||||||
|
:key="index + 'tjbbChildrenRoute'"
|
||||||
|
>
|
||||||
|
<router-link
|
||||||
|
style="height: 100%; width: 100%; display: block"
|
||||||
|
:to="{ path: item.path, query: $route.query }"
|
||||||
|
>
|
||||||
{{ item.meta.title }}
|
{{ item.meta.title }}
|
||||||
</router-link>
|
</router-link>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
|
|
||||||
<div class="ems-content-container ems-content-container-padding tjbb-ems-content-container">
|
<div
|
||||||
|
class="ems-content-container ems-content-container-padding tjbb-ems-content-container"
|
||||||
|
>
|
||||||
<keep-alive>
|
<keep-alive>
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { dzjk } from '@/router/ems'
|
import { dzjk } from "@/router/ems";
|
||||||
const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DzjkTjbb').children//获取到统计报表下面的字路由
|
const childrenRoute = dzjk[0].children.find(
|
||||||
console.log('设备监控子路由',childrenRoute)
|
(item) => item.name === "DzjkTjbb"
|
||||||
|
).children; //获取到统计报表下面的字路由
|
||||||
|
console.log("设备监控子路由", childrenRoute);
|
||||||
export default {
|
export default {
|
||||||
name:'DzjkTjbb',
|
name: "DzjkTjbb",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
childrenRoute,
|
childrenRoute,
|
||||||
activeMenu:''
|
activeMenu: "",
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log('当前统计报表页面路由',this.$route)
|
console.log("当前统计报表页面路由", this.$route);
|
||||||
}
|
},
|
||||||
|
};
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@ -50,4 +59,3 @@ export default {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@ -1,215 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="width:100%" v-loading="loading">
|
|
||||||
<!-- 搜索栏-->
|
|
||||||
<el-form :inline="true" class="select-container">
|
|
||||||
<el-form-item label="时间选择">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="dateRange"
|
|
||||||
type="daterange"
|
|
||||||
range-separator="至"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
value-format="yyyy-MM-dd"
|
|
||||||
:clearable="false"
|
|
||||||
:picker-options="pickerOptions"
|
|
||||||
:default-value="defaultDateRange"
|
|
||||||
></el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="onReset" native-type="button">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<!--表格-->
|
|
||||||
<el-table
|
|
||||||
class="common-table"
|
|
||||||
:data="tableData"
|
|
||||||
show-summary
|
|
||||||
stripe
|
|
||||||
style="width: 100%;margin-top:25px;">
|
|
||||||
<!-- 汇总列-->
|
|
||||||
<el-table-column label="汇总" min-width="100px" align="center">
|
|
||||||
<el-table-column
|
|
||||||
prop="dataTime"
|
|
||||||
label="日期"
|
|
||||||
min-width="100px" align="center">
|
|
||||||
</el-table-column>
|
|
||||||
</el-table-column>
|
|
||||||
<!--充电量列-->
|
|
||||||
<el-table-column label="充电价格" align="center">
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
prop="activePeakPrice"
|
|
||||||
label="尖">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
prop="activeHighPrice"
|
|
||||||
label="峰">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
prop="activeFlatPrice"
|
|
||||||
label="平">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
prop="activeValleyPrice"
|
|
||||||
label="谷">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
prop="activeTotalPrice"
|
|
||||||
label="总">
|
|
||||||
</el-table-column>
|
|
||||||
</el-table-column>
|
|
||||||
<!--充电量列-->
|
|
||||||
<el-table-column label="放电价格" align="center">
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
prop="reActivePeakPrice"
|
|
||||||
label="尖">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
prop="reActiveHighPrice"
|
|
||||||
label="峰">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
prop="reActiveFlatPrice"
|
|
||||||
label="平">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
prop="reActiveValleyPrice"
|
|
||||||
label="谷">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
prop="reActiveTotalPrice"
|
|
||||||
label="总">
|
|
||||||
</el-table-column>
|
|
||||||
</el-table-column>
|
|
||||||
<!-- 实际收益-->
|
|
||||||
<el-table-column label="" align="center" fixed="right">
|
|
||||||
<el-table-column
|
|
||||||
prop="actualRevenue"
|
|
||||||
label="实际收益"
|
|
||||||
align="center">
|
|
||||||
</el-table-column>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<el-pagination
|
|
||||||
v-show="tableData.length>0"
|
|
||||||
background
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
:current-page="pageNum"
|
|
||||||
:page-size="pageSize"
|
|
||||||
:page-sizes="[10, 20, 30, 40]"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
:total="totalSize"
|
|
||||||
style="margin-top:15px;text-align: center"
|
|
||||||
>
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
|
||||||
import {getAmmeterRevenueData} from '@/api/ems/dzjk'
|
|
||||||
import {formatDate} from "@/filters/ems";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DzjkTjbbSybb',
|
|
||||||
mixins: [getQuerySiteId],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
loading: false,
|
|
||||||
pickerOptions: {
|
|
||||||
disabledDate(time) {
|
|
||||||
return time.getTime() > Date.now();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultDateRange: [],//默认展示的时间
|
|
||||||
dateRange: [],
|
|
||||||
tableData: [],
|
|
||||||
pageSize: 10,//分页栏当前每个数据总数
|
|
||||||
pageNum: 1,//分页栏当前页数
|
|
||||||
totalSize: 0,//table表格数据总数
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 搜索
|
|
||||||
onSearch() {
|
|
||||||
this.pageNum = 1//每次搜索从1开始搜索
|
|
||||||
this.getData()
|
|
||||||
},
|
|
||||||
// 重置
|
|
||||||
onReset() {
|
|
||||||
this.dateRange = this.defaultDateRange
|
|
||||||
this.pageNum = 1//每次搜索从1开始搜索
|
|
||||||
this.getData()
|
|
||||||
},
|
|
||||||
// 分页
|
|
||||||
handleSizeChange(val) {
|
|
||||||
this.pageSize = val;
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.getData()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleCurrentChange(val) {
|
|
||||||
this.pageNum = val
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.getData()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 获取数据
|
|
||||||
getData() {
|
|
||||||
this.loading = true
|
|
||||||
const {siteId, pageNum, pageSize} = this
|
|
||||||
const [startTime = '', endTime = ''] = (this.dateRange || [])
|
|
||||||
getAmmeterRevenueData({siteId: siteId, startTime, endTime, pageSize, pageNum}).then(response => {
|
|
||||||
this.tableData = response?.rows || [];
|
|
||||||
this.totalSize = response?.total || 0
|
|
||||||
}).finally(() => {
|
|
||||||
this.loading = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
init() {
|
|
||||||
this.dateRange = []
|
|
||||||
this.tableData = []
|
|
||||||
this.totalSize = 0
|
|
||||||
this.pageSize = 10
|
|
||||||
this.pageNum = 1
|
|
||||||
let now = new Date(), lastDay = now.getTime(), firstDay = new Date(now.setDate(1)).getTime();
|
|
||||||
this.defaultDateRange = [formatDate(firstDay), formatDate(lastDay)];
|
|
||||||
this.dateRange = [formatDate(firstDay), formatDate(lastDay)];
|
|
||||||
this.getData()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
::v-deep {
|
|
||||||
.common-table.el-table {
|
|
||||||
.el-table__header-wrapper th, .common-table.el-table .el-table__fixed-header-wrapper th {
|
|
||||||
border-bottom: 1px solid #dfe6ec;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table__footer-wrapper {
|
|
||||||
tbody td.el-table__cell {
|
|
||||||
color: #000;
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
577
src/views/ems/dzjk/zxlt/index copy 2.vue
Normal file
577
src/views/ems/dzjk/zxlt/index copy 2.vue
Normal file
@ -0,0 +1,577 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ems-dashboard-editor-container" v-loading="loading">
|
||||||
|
<div class="container" v-show="!empty">
|
||||||
|
<!-- 云、电脑 -->
|
||||||
|
<div class="top">
|
||||||
|
<div class="cloud-container">
|
||||||
|
<div class="cloud">
|
||||||
|
<span style="z-index: 2; position: relative">云</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="double-arrows">
|
||||||
|
<div class="top-arrows"></div>
|
||||||
|
<div class="bottom-arrows"></div>
|
||||||
|
</div>
|
||||||
|
<div class="computer">
|
||||||
|
<img src="@/assets/images/ems/computer.png" alt="" />
|
||||||
|
<span style="z-index: 2; position: relative">ems</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="outer-border">
|
||||||
|
<!-- 电表-->
|
||||||
|
<div class="row-lists-container" v-if="showDb">
|
||||||
|
<div class="row-title">电表({{ db.length }})</div>
|
||||||
|
<div class="row-lists">
|
||||||
|
<div v-for="item in db" :key="item.deviceId" class="row-items">
|
||||||
|
<div
|
||||||
|
class="status"
|
||||||
|
:class="
|
||||||
|
item.communicationStatus === '0' ? 'status-running' : ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ communicationStatusOptions[item.communicationStatus] }}
|
||||||
|
</div>
|
||||||
|
<div class="row-items-img">
|
||||||
|
<img
|
||||||
|
class="img-db"
|
||||||
|
:src="require('@/assets/images/ems/db.png')"
|
||||||
|
/>
|
||||||
|
<div class="name">{{ item.deviceName }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 液冷-->
|
||||||
|
<div class="row-lists-container" v-if="showLq">
|
||||||
|
<div class="row-title">冷却({{ lq.length }})</div>
|
||||||
|
<div class="row-lists">
|
||||||
|
<div v-for="item in lq" :key="item.deviceId" class="row-items">
|
||||||
|
<div
|
||||||
|
class="status"
|
||||||
|
:class="
|
||||||
|
item.communicationStatus === '0' ? 'status-running' : ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ communicationStatusOptions[item.communicationStatus] }}
|
||||||
|
</div>
|
||||||
|
<div class="row-items-img">
|
||||||
|
<img
|
||||||
|
class="img-lq"
|
||||||
|
:src="require('@/assets/images/ems/lq.png')"
|
||||||
|
/>
|
||||||
|
<div class="name">{{ item.deviceName }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- PCS-->
|
||||||
|
<div class="row-lists-container" v-if="showPcs">
|
||||||
|
<div class="row-lists">
|
||||||
|
<div class="row-title">PCS({{ pcs.length }})</div>
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in pcs"
|
||||||
|
:key="item.deviceId"
|
||||||
|
class="row-items row-items-pcs"
|
||||||
|
>
|
||||||
|
<!-- pcs -->
|
||||||
|
<div class="parent-dash">
|
||||||
|
<div
|
||||||
|
class="status"
|
||||||
|
:class="
|
||||||
|
item.communicationStatus === '0' ? 'status-running' : ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ communicationStatusOptions[item.communicationStatus] }}
|
||||||
|
</div>
|
||||||
|
<div class="row-items-img">
|
||||||
|
<img
|
||||||
|
class="img-pcs"
|
||||||
|
:src="require('@/assets/images/ems/pcs.png')"
|
||||||
|
/>
|
||||||
|
<div class="name">{{ item.deviceName }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 子设备 bms -->
|
||||||
|
<div
|
||||||
|
v-if="item.children && item.children.length > 0"
|
||||||
|
class="children-dash"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="row-children-title"
|
||||||
|
v-if="bmsHasParentLength > 0 && index === 0"
|
||||||
|
>
|
||||||
|
BMS({{ bmsHasParentLength }})
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-for="(childrenItem, childrenIndex) in item.children"
|
||||||
|
:key="childrenIndex + 'childrenBms'"
|
||||||
|
class="children-dash-items"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="status"
|
||||||
|
:class="
|
||||||
|
childrenItem.communicationStatus === '0'
|
||||||
|
? 'status-running'
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
communicationStatusOptions[
|
||||||
|
childrenItem.communicationStatus
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="row-items-img">
|
||||||
|
<img
|
||||||
|
class="img-pcs"
|
||||||
|
:src="require('@/assets/images/ems/bms.png')"
|
||||||
|
/>
|
||||||
|
<div class="name">{{ childrenItem.deviceName }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row-lists-container" v-if="showPcs">
|
||||||
|
<div class="row-title">PCS({{ pcs.length }})</div>
|
||||||
|
<div class="row-lists">
|
||||||
|
<div
|
||||||
|
v-for="item in bmsNoParent"
|
||||||
|
:key="item.deviceId"
|
||||||
|
class="row-items row-items-pcs"
|
||||||
|
>
|
||||||
|
<!-- pcs -->
|
||||||
|
<div class="parent-dash">
|
||||||
|
<div
|
||||||
|
class="status"
|
||||||
|
:class="
|
||||||
|
item.communicationStatus === '0' ? 'status-running' : ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ communicationStatusOptions[item.communicationStatus] }}
|
||||||
|
</div>
|
||||||
|
<div class="row-items-img">
|
||||||
|
<img :src="require('@/assets/images/ems/bms.png')" />
|
||||||
|
<div class="name">{{ item.deviceName }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- bms没有上级设备-->
|
||||||
|
<div class="row-lists-container" v-if="bmsNoParent.length > 0">
|
||||||
|
<div class="row-title">BMS({{ bmsNoParent.length }})</div>
|
||||||
|
<div class="row-lists">
|
||||||
|
<div
|
||||||
|
v-for="item in bmsNoParent"
|
||||||
|
:key="item.deviceId"
|
||||||
|
class="row-items row-items-pcs"
|
||||||
|
>
|
||||||
|
<!-- pcs -->
|
||||||
|
<div class="parent-dash">
|
||||||
|
<div
|
||||||
|
class="status"
|
||||||
|
:class="
|
||||||
|
item.communicationStatus === '0' ? 'status-running' : ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ communicationStatusOptions[item.communicationStatus] }}
|
||||||
|
</div>
|
||||||
|
<div class="row-items-img">
|
||||||
|
<img :src="require('@/assets/images/ems/bms.png')" />
|
||||||
|
<div class="name">{{ item.deviceName }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-empty v-show="empty" :image-size="200"></el-empty>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getDeviceList } from "@/api/ems/site";
|
||||||
|
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||||
|
import { mapState } from "vuex";
|
||||||
|
export default {
|
||||||
|
name: "DzjkZxlt",
|
||||||
|
mixins: [getQuerySiteId],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
pcs: [],
|
||||||
|
bms: [],
|
||||||
|
db: [],
|
||||||
|
lq: [],
|
||||||
|
pcsHasChildren: [],
|
||||||
|
pcsNoChildren: [],
|
||||||
|
bmsNoParent: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
communicationStatusOptions: (state) =>
|
||||||
|
state.ems.communicationStatusOptions,
|
||||||
|
}),
|
||||||
|
|
||||||
|
showPcs() {
|
||||||
|
return this.pcs.length > 0;
|
||||||
|
},
|
||||||
|
showBms() {
|
||||||
|
return this.bms.length > 0;
|
||||||
|
},
|
||||||
|
showDb() {
|
||||||
|
return this.db.length > 0;
|
||||||
|
},
|
||||||
|
showLq() {
|
||||||
|
return this.lq.length > 0;
|
||||||
|
},
|
||||||
|
bmsHasParentLength() {
|
||||||
|
let count = 0;
|
||||||
|
this.pcs.forEach((item) => (count += item.children.length));
|
||||||
|
return count;
|
||||||
|
},
|
||||||
|
empty() {
|
||||||
|
return !this.showBms && !this.showPcs && !this.showDb && !this.showLq;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.pcs = [];
|
||||||
|
this.bms = [];
|
||||||
|
this.lq = [];
|
||||||
|
this.db = [];
|
||||||
|
this.bmsNoParent = [];
|
||||||
|
this.loading = true;
|
||||||
|
getDeviceList(this.siteId)
|
||||||
|
.then((response) => {
|
||||||
|
const data = JSON.parse(JSON.stringify(response?.data || []));
|
||||||
|
let pcs = [],
|
||||||
|
bms = [],
|
||||||
|
db = [],
|
||||||
|
lq = [],
|
||||||
|
bmsNoParent = [];
|
||||||
|
data.forEach((item) => {
|
||||||
|
// 电表
|
||||||
|
if (item.deviceCategory === "AMMETER") {
|
||||||
|
db.push({ ...item, children: [] });
|
||||||
|
} else if (item.deviceCategory === "PCS") {
|
||||||
|
// pcs
|
||||||
|
pcs.push({ ...item, children: [] });
|
||||||
|
} else if (item.deviceCategory === "STACK") {
|
||||||
|
// bms
|
||||||
|
bms.push({ ...item, children: [] });
|
||||||
|
} else if (item.deviceCategory === "COOLING") {
|
||||||
|
// 液冷
|
||||||
|
lq.push({ ...item, children: [] });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
bms.forEach((item, index) => {
|
||||||
|
if (item.parentId) {
|
||||||
|
pcs
|
||||||
|
.find((pcsItem) => pcsItem.deviceId === item.parentId)
|
||||||
|
.children.push(item);
|
||||||
|
} else {
|
||||||
|
bmsNoParent.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.pcs = pcs;
|
||||||
|
this.bms = bms;
|
||||||
|
this.lq = lq;
|
||||||
|
this.db = db;
|
||||||
|
this.pcsHasChildren = pcs.filter((item) => item.children.length > 0);
|
||||||
|
this.pcsNoChildren = pcs.filter((item) => item.children.length === 0);
|
||||||
|
this.bmsNoParent = bmsNoParent;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$sqDistance: 30px;
|
||||||
|
$borderColor: #174a8e;
|
||||||
|
$lineColor: #86bcc7;
|
||||||
|
|
||||||
|
.ems-dashboard-editor-container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 0;
|
||||||
|
color: #666666;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
//云 、计算机 、箭头
|
||||||
|
.top {
|
||||||
|
z-index: 2;
|
||||||
|
width: fit-content;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
// position: absolute;
|
||||||
|
// top: 50%;
|
||||||
|
// left: 0;
|
||||||
|
// transform: translateY(-50%);
|
||||||
|
//云 样式
|
||||||
|
.cloud-container {
|
||||||
|
margin: 0 auto;
|
||||||
|
.cloud {
|
||||||
|
width: 60px;
|
||||||
|
height: 26px;
|
||||||
|
background: #cbebfd;
|
||||||
|
border-radius: 100px;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
.cloud:before,
|
||||||
|
.cloud:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
background: #cbebfd;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
.cloud:before {
|
||||||
|
top: -9px;
|
||||||
|
left: 8px;
|
||||||
|
}
|
||||||
|
.cloud:after {
|
||||||
|
top: -6px;
|
||||||
|
right: 9px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//双箭头
|
||||||
|
.double-arrows {
|
||||||
|
height: fit-content;
|
||||||
|
margin: 0 10px;
|
||||||
|
text-align: center;
|
||||||
|
.top-arrows,
|
||||||
|
.bottom-arrows {
|
||||||
|
height: 4px;
|
||||||
|
width: 30px;
|
||||||
|
background-color: #5ea9df;
|
||||||
|
margin: 0 10px;
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top-arrows {
|
||||||
|
vertical-align: super;
|
||||||
|
}
|
||||||
|
.top-arrows::after {
|
||||||
|
top: -4px;
|
||||||
|
border-bottom: 6px solid transparent;
|
||||||
|
border-left: 6px solid transparent;
|
||||||
|
border-right: 6px solid #5ea9df;
|
||||||
|
border-top: 6px solid transparent;
|
||||||
|
left: -11px;
|
||||||
|
}
|
||||||
|
.bottom-arrows {
|
||||||
|
margin-top: 8px;
|
||||||
|
&::after {
|
||||||
|
top: -4px;
|
||||||
|
border-top: 6px solid transparent;
|
||||||
|
border-left: 6px solid #5ea9df;
|
||||||
|
border-right: 6px solid transparent;
|
||||||
|
border-bottom: 6px solid transparent;
|
||||||
|
right: -11px;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//电脑
|
||||||
|
.computer {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
img {
|
||||||
|
width: 80px;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.outer-border {
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
border: 1.5px solid $borderColor;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding-left: 120px;
|
||||||
|
padding-right: 20px;
|
||||||
|
margin-left: -40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设备列表
|
||||||
|
.row-lists-container {
|
||||||
|
font-size: 10px;
|
||||||
|
position: relative;
|
||||||
|
padding: 10px;
|
||||||
|
.row-title {
|
||||||
|
position: absolute;
|
||||||
|
left: -$sqDistance - 30px;
|
||||||
|
top: calc(50% + 10px);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: #000;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
.row-lists {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
.row-items {
|
||||||
|
position: relative;
|
||||||
|
padding: 5px 0;
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-left: $sqDistance; //和外层父元素上下padding一致
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: 3px;
|
||||||
|
width: $sqDistance - 2px;
|
||||||
|
background: $lineColor;
|
||||||
|
position: absolute;
|
||||||
|
left: -$sqDistance;
|
||||||
|
top: calc(50% + 10px);
|
||||||
|
transform: scale(1, 0.4);
|
||||||
|
}
|
||||||
|
// 一列 第一个设备最上面的线
|
||||||
|
&:first-child {
|
||||||
|
&::before {
|
||||||
|
width: $sqDistance + 20px;
|
||||||
|
// top: -$sqDistance - 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 一列 最后一个设备最下面的线
|
||||||
|
// &:last-child {
|
||||||
|
// &::after {
|
||||||
|
// content: "";
|
||||||
|
// display: block;
|
||||||
|
// width: 3px;
|
||||||
|
// height: $sqDistance - 2px;
|
||||||
|
// background: $lineColor;
|
||||||
|
// position: absolute;
|
||||||
|
// bottom: -$sqDistance;
|
||||||
|
// left: 50%;
|
||||||
|
// transform: scale(0.4, 1);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// 设备状态
|
||||||
|
.status {
|
||||||
|
margin: 0 auto 4px;
|
||||||
|
width: fit-content;
|
||||||
|
height: 18px;
|
||||||
|
padding: 0 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 8px;
|
||||||
|
line-height: 18px;
|
||||||
|
border: 1px solid #08ffff;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #aaaaaa;
|
||||||
|
color: #ffffff;
|
||||||
|
&.status-running {
|
||||||
|
background: #00c69c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 图片+设备名称
|
||||||
|
.row-items-img {
|
||||||
|
position: relative;
|
||||||
|
padding-top: 12px;
|
||||||
|
img {
|
||||||
|
width: 80px;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
&.img-lq {
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
&.img-pcs {
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
&.img-db {
|
||||||
|
width: 56px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
position: absolute;
|
||||||
|
top: 1px;
|
||||||
|
left: 0;
|
||||||
|
color: #666;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//子设备
|
||||||
|
.row-lists-container-children {
|
||||||
|
margin: 10px 0 0 $sqDistance;
|
||||||
|
.parent-dash {
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: 40px;
|
||||||
|
width: 3px;
|
||||||
|
background: #ec7f8c;
|
||||||
|
position: absolute;
|
||||||
|
left: 20%;
|
||||||
|
top: -40px;
|
||||||
|
transform: scale(0.4, 1) rotate(-40deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.parent-dash {
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
.children-dash {
|
||||||
|
margin: $sqDistance 0 0 $sqDistance;
|
||||||
|
position: relative;
|
||||||
|
.row-children-title {
|
||||||
|
position: absolute;
|
||||||
|
left: -$sqDistance - 30px;
|
||||||
|
top: calc(50% + 10px);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: #000;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
.children-dash-items {
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: $sqDistance;
|
||||||
|
width: 3px;
|
||||||
|
background: #ec7f8c;
|
||||||
|
position: absolute;
|
||||||
|
left: 20%;
|
||||||
|
top: -$sqDistance;
|
||||||
|
transform: scale(0.4, 1) rotate(-40deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
614
src/views/ems/dzjk/zxlt/index copy.vue
Normal file
614
src/views/ems/dzjk/zxlt/index copy.vue
Normal file
@ -0,0 +1,614 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ems-dashboard-editor-container" v-loading="loading" >
|
||||||
|
<div class="container" v-show="!empty">
|
||||||
|
<div class="top">
|
||||||
|
<div class="cloud-container">
|
||||||
|
<div class="cloud">
|
||||||
|
<span style="z-index:2;position: relative;">云</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="double-arrows">
|
||||||
|
<div class="top-arrows"></div>
|
||||||
|
<div class="bottom-arrows"></div>
|
||||||
|
</div>
|
||||||
|
<div class="computer">
|
||||||
|
<img src="@/assets/images/ems/computer.png" alt="">
|
||||||
|
<span style="z-index:2;position: relative;">ems</span>
|
||||||
|
</div>
|
||||||
|
<div class="arrow"></div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<!-- 四列设备-->
|
||||||
|
<div class="zxlt-row">
|
||||||
|
<!-- bms、pcs 下级和上级在一列 -->
|
||||||
|
<div class="row-lists pcs-row-lists" v-if="showPcsAndBms">
|
||||||
|
<div class="item-square">
|
||||||
|
<div class="row-lists-title" v-if="showPcs">PCS({{pcs.length}})</div>
|
||||||
|
<div class="row-lists-title" v-if="showBms">BMS({{bms.length}})</div>
|
||||||
|
</div>
|
||||||
|
<!-- 上下级块 class区分-->
|
||||||
|
<div class="item-square pcs-has-children-item-square" :class="{'no-bms-list':!showBms}" v-for="(item,index) in pcsHasChildren" :key="index+'pcsHasChildren'">
|
||||||
|
<!-- 左边的上级 上级只有一个-->
|
||||||
|
<div class="item-lists parent-item-lists">
|
||||||
|
<!-- 上级设备-->
|
||||||
|
<div class="items normal-items-arrow">
|
||||||
|
<div class="items-inner">
|
||||||
|
<div style="text-align: center;margin-bottom:10px;">
|
||||||
|
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
|
||||||
|
</div>
|
||||||
|
<img v-if="item.pictureUrl" :src="item.pictureUrl">
|
||||||
|
<img v-else :src="require('@/assets/images/ems/pcs.png')"/>
|
||||||
|
<div class="name">{{item.deviceName}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 右边的下级 下级有多个-->
|
||||||
|
<div class="item-lists children-item-lists">
|
||||||
|
<!-- 下级设备 循环生成-->
|
||||||
|
<div class="items children-items-arrow bms-children-arrow" v-for="children in item.children" :key="children.deviceId">
|
||||||
|
<div class="items-inner">
|
||||||
|
<div style="text-align: center;margin-bottom:10px;">
|
||||||
|
<div class="status" :class="children.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[children.communicationStatus] || '-'}}</div>
|
||||||
|
</div>
|
||||||
|
<img v-if="children.pictureUrl" :src="children.pictureUrl">
|
||||||
|
<img v-else :src="require('@/assets/images/ems/bms.png')"/>
|
||||||
|
<div class="name">{{children.deviceName}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- 没有上下级关系的bms、pcs-->
|
||||||
|
<div class="item-square" :class="{'no-bms-list':!showBms}">
|
||||||
|
<!-- 左边没有下级的pcs-->
|
||||||
|
<div class="item-lists">
|
||||||
|
<div class="items normal-items-arrow" v-for="item in pcsNoChildren" :key="item.deviceId">
|
||||||
|
<div class="items-inner">
|
||||||
|
<div style="text-align: center;margin-bottom:10px;">
|
||||||
|
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
|
||||||
|
</div>
|
||||||
|
<img v-if="item.pictureUrl" :src="item.pictureUrl">
|
||||||
|
<img v-else :src="require('@/assets/images/ems/pcs.png')"/>
|
||||||
|
<div class="name">{{item.deviceName}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 右边没有上级的bms-->
|
||||||
|
<div class="item-lists">
|
||||||
|
<!-- 下级设备 循环生成-->
|
||||||
|
<div class="items children-items-arrow" v-for="item in bmsNoParent" :key="item.deviceId">
|
||||||
|
<div class="items-inner">
|
||||||
|
<div style="text-align: center;margin-bottom:10px;">
|
||||||
|
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
|
||||||
|
</div>
|
||||||
|
<img v-if="item.pictureUrl" :src="item.pictureUrl">
|
||||||
|
<img v-else :src="require('@/assets/images/ems/bms.png')"/>
|
||||||
|
<div class="name">{{item.deviceName}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 电表-->
|
||||||
|
<div class="row-lists" v-if="showDb">
|
||||||
|
<div class="item-square">
|
||||||
|
<div class="row-lists-title" style="width:100%;">电表({{db.length}})</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-square">
|
||||||
|
<!-- 左边的下级 下级有多个-->
|
||||||
|
<div class="item-lists">
|
||||||
|
<!-- 下级设备 循环生成-->
|
||||||
|
<div class="items normal-items-arrow" v-for="item in db" :key="item.deviceId">
|
||||||
|
<div class="items-inner">
|
||||||
|
<div style="text-align: center;margin-bottom:10px;">
|
||||||
|
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
|
||||||
|
</div>
|
||||||
|
<img v-if="item.pictureUrl" :src="item.pictureUrl">
|
||||||
|
<img v-else :src="require('@/assets/images/ems/bms.png')"/>
|
||||||
|
<div class="name">{{item.deviceName}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--冷却-->
|
||||||
|
<div class="row-lists" v-if="showLq">
|
||||||
|
<div class="item-square">
|
||||||
|
<div class="row-lists-title" style="width:100%;">冷却({{lq.length}})</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-square">
|
||||||
|
<div class="item-lists">
|
||||||
|
<div class="items normal-items-arrow" v-for="item in lq" :key="item.deviceId">
|
||||||
|
<div class="items-inner">
|
||||||
|
<div style="text-align: center;margin-bottom:10px;">
|
||||||
|
<div class="status" :class="item.communicationStatus === '0' ?'status-normal' : 'status-warn'">通讯状态:{{communicationStatusOptions[item.communicationStatus] || '-'}}</div>
|
||||||
|
</div>
|
||||||
|
<img v-if="item.pictureUrl" :src="item.pictureUrl">
|
||||||
|
<img v-else :src="require('@/assets/images/ems/bms.png')"/>
|
||||||
|
<div class="name">{{item.deviceName}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-empty v-show="empty" :image-size="200"></el-empty>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getDeviceList} from'@/api/ems/site'
|
||||||
|
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||||
|
import {mapState} from "vuex";
|
||||||
|
export default {
|
||||||
|
name: 'DzjkZxlt',
|
||||||
|
mixins: [getQuerySiteId],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading:false,
|
||||||
|
pcs :[],
|
||||||
|
bms:[],
|
||||||
|
db:[],
|
||||||
|
lq:[],
|
||||||
|
pcsHasChildren:[],
|
||||||
|
pcsNoChildren:[],
|
||||||
|
bmsNoParent:[]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
...mapState({
|
||||||
|
communicationStatusOptions:(state)=>state.ems.communicationStatusOptions
|
||||||
|
}),
|
||||||
|
|
||||||
|
showPcs(){
|
||||||
|
return this.pcs.length>0
|
||||||
|
},
|
||||||
|
showBms(){
|
||||||
|
return this.bms.length>0
|
||||||
|
},
|
||||||
|
showDb(){
|
||||||
|
return this.db.length>0
|
||||||
|
},
|
||||||
|
showLq(){
|
||||||
|
return this.lq.length>0
|
||||||
|
},
|
||||||
|
showPcsAndBms(){
|
||||||
|
return this.showPcs || this.showBms
|
||||||
|
},
|
||||||
|
empty(){
|
||||||
|
return !this.showBms && !this.showPcs && !this.showDb && !this.showLq
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init(){
|
||||||
|
this.pcs = []
|
||||||
|
this.bms = []
|
||||||
|
this.lq=[]
|
||||||
|
this.db=[]
|
||||||
|
this.bmsNoParent=[]
|
||||||
|
this.loading = true
|
||||||
|
getDeviceList(this.siteId).then(response => {
|
||||||
|
const data =JSON.parse(JSON.stringify(response?.data || []))
|
||||||
|
let pcs = [],bms=[],db=[],lq=[],bmsNoParent=[]
|
||||||
|
data.forEach(item=>{
|
||||||
|
// 电表
|
||||||
|
if(item.deviceCategory === 'AMMETER'){
|
||||||
|
db.push({...item,children:[]})
|
||||||
|
}else if(item.deviceCategory === 'PCS'){
|
||||||
|
// pcs
|
||||||
|
pcs.push({...item,children:[]})
|
||||||
|
}else if(item.deviceCategory === 'STACK'){
|
||||||
|
// bms
|
||||||
|
bms.push({...item,children:[]})
|
||||||
|
}else if(item.deviceCategory === 'COOLING'){
|
||||||
|
// 液冷
|
||||||
|
lq.push({...item,children:[]})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
bms.forEach((item,index)=>{
|
||||||
|
if(item.parentId){
|
||||||
|
pcs.find(pcsItem=>pcsItem.deviceId === item.parentId).children.push(item)
|
||||||
|
}else{
|
||||||
|
bmsNoParent.push(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.pcs = pcs
|
||||||
|
this.bms = bms
|
||||||
|
this.lq=lq
|
||||||
|
this.db=db
|
||||||
|
this.pcsHasChildren = pcs.filter(item=>item.children.length > 0)
|
||||||
|
this.pcsNoChildren = pcs.filter(item=>item.children.length === 0)
|
||||||
|
this.bmsNoParent = bmsNoParent
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$distance:60px;
|
||||||
|
$arrowDistance:80px;//margin:60+quare的padding10
|
||||||
|
$arrowColoe:#5ea9df;
|
||||||
|
$lineColoe:#5ea9df;
|
||||||
|
.ems-dashboard-editor-container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding:0;
|
||||||
|
.container{
|
||||||
|
position: relative;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
//云 、计算机 、箭头
|
||||||
|
.top{
|
||||||
|
width: 280px;
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 40px;
|
||||||
|
font-weight: 500;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
//云 样式
|
||||||
|
.cloud-container{
|
||||||
|
padding-top:40px;
|
||||||
|
margin:0 auto;
|
||||||
|
.cloud {
|
||||||
|
width: 150px;
|
||||||
|
height: 60px;
|
||||||
|
background: #cbebfd;
|
||||||
|
border-radius: 200px;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
color:#666666;
|
||||||
|
}
|
||||||
|
.cloud:before, .cloud:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
background:#cbebfd;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.cloud:before {
|
||||||
|
top: -28px;
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
.cloud:after {
|
||||||
|
top: -31px;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//双箭头
|
||||||
|
.double-arrows {
|
||||||
|
height: 50px;
|
||||||
|
margin:20px 0;
|
||||||
|
text-align: center;
|
||||||
|
.top-arrows,.bottom-arrows{
|
||||||
|
height: 100%;
|
||||||
|
width: 6px;
|
||||||
|
background-color: $arrowColoe;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 10px;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: super;
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left:0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top-arrows{
|
||||||
|
vertical-align: super;
|
||||||
|
}
|
||||||
|
.top-arrows::after {
|
||||||
|
bottom: -24px;
|
||||||
|
border-bottom: 12px solid transparent;
|
||||||
|
border-left: 12px solid transparent;
|
||||||
|
border-right: 12px solid transparent;
|
||||||
|
border-top: 14px solid $arrowColoe;
|
||||||
|
left: -9px;
|
||||||
|
}
|
||||||
|
.bottom-arrows{
|
||||||
|
margin-top:12px;
|
||||||
|
&::after {
|
||||||
|
top: -24px;
|
||||||
|
border-top: 12px solid transparent;
|
||||||
|
border-left: 12px solid transparent;
|
||||||
|
border-right: 12px solid transparent;
|
||||||
|
border-bottom: 14px solid $arrowColoe;
|
||||||
|
left: -9px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//电脑
|
||||||
|
.computer{
|
||||||
|
margin:20px auto;
|
||||||
|
text-align: center;
|
||||||
|
color:#666666;
|
||||||
|
position: relative;
|
||||||
|
img {
|
||||||
|
width: auto;
|
||||||
|
height: 100px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.arrow{
|
||||||
|
height: 50px;
|
||||||
|
width: 30px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: $arrowColoe;
|
||||||
|
position: relative;
|
||||||
|
margin:0 auto;
|
||||||
|
&::after{
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: -9px;
|
||||||
|
border-top: 24px solid $arrowColoe;
|
||||||
|
border-left: 24px solid transparent;
|
||||||
|
border-bottom: 24px solid transparent;
|
||||||
|
border-right: 24px solid transparent;
|
||||||
|
bottom: -44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.bottom{
|
||||||
|
z-index:1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top:50px;
|
||||||
|
.zxlt-row{
|
||||||
|
display: flex;
|
||||||
|
padding:20px $distance;
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
&:before{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width:calc(100% - 100px);
|
||||||
|
height:1px;
|
||||||
|
background-color: $lineColoe;
|
||||||
|
position:absolute;
|
||||||
|
top:0;
|
||||||
|
left: $distance/2;
|
||||||
|
}
|
||||||
|
.row-lists{
|
||||||
|
height: fit-content;
|
||||||
|
position: relative;
|
||||||
|
&:before{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
width: 1px;
|
||||||
|
position: absolute;
|
||||||
|
left:-($distance/2);
|
||||||
|
top:-20px;
|
||||||
|
background-color: $lineColoe;
|
||||||
|
}
|
||||||
|
//pcs列 bms右侧的边框
|
||||||
|
&.pcs-row-lists{
|
||||||
|
&:after{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
width: 1px;
|
||||||
|
position: absolute;
|
||||||
|
right:-(($distance/2) + 1);
|
||||||
|
top:-20px;
|
||||||
|
background-color: $lineColoe;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not(:last-child){
|
||||||
|
margin-right: $distance;
|
||||||
|
}
|
||||||
|
.item-square{
|
||||||
|
//左右 两列
|
||||||
|
display: flex;
|
||||||
|
vertical-align: middle;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding:10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
&:not(:last-child){
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.row-lists-title{
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.item-lists{
|
||||||
|
position: relative;
|
||||||
|
&:not(:last-child){
|
||||||
|
margin-right:$distance;
|
||||||
|
}
|
||||||
|
//每个设备
|
||||||
|
.items{
|
||||||
|
background-color: #cbebfd;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 rgba(0, 0, 0, 0.5);
|
||||||
|
//普通设备 箭头方向
|
||||||
|
&.normal-items-arrow{
|
||||||
|
&:before{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width:($arrowDistance/2) - 15;
|
||||||
|
height: 4px;
|
||||||
|
background-color: $arrowColoe;
|
||||||
|
position: absolute;
|
||||||
|
top:50%;
|
||||||
|
left: -($arrowDistance/2);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
&:after{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
border-left: 10px solid #5ea9df;
|
||||||
|
border-right: 10px solid transparent;
|
||||||
|
border-bottom: 10px solid transparent;
|
||||||
|
border-top: 10px solid transparent;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: -15px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//下级的箭头
|
||||||
|
&.children-items-arrow{
|
||||||
|
&:before{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width:($arrowDistance/2) - 15;
|
||||||
|
height: 4px;
|
||||||
|
background-color: $arrowColoe;
|
||||||
|
position: absolute;
|
||||||
|
top:50%;
|
||||||
|
right: -($arrowDistance/2);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
&:after{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
border-right: 10px solid #5ea9df;
|
||||||
|
border-left: 10px solid transparent;
|
||||||
|
border-bottom: 10px solid transparent;
|
||||||
|
border-top: 10px solid transparent;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: -15px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not(:last-child){
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items-inner{
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding:10px;
|
||||||
|
width:130px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
img{
|
||||||
|
width: 80px;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
z-index:2;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.name{
|
||||||
|
text-align: center;
|
||||||
|
margin-top:10px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
z-index:2;
|
||||||
|
}
|
||||||
|
.status{
|
||||||
|
z-index:2;
|
||||||
|
margin-top:10px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
position: relative;
|
||||||
|
padding-left:20px;
|
||||||
|
display: inline;
|
||||||
|
&.status-normal {
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #05AEA3;
|
||||||
|
position: absolute;
|
||||||
|
top:50%;
|
||||||
|
left:0;
|
||||||
|
transform: translate(0,-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.status-warn{
|
||||||
|
&:before{
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #FC6B69;
|
||||||
|
position: absolute;
|
||||||
|
top:50%;
|
||||||
|
left:0;
|
||||||
|
transform: translate(0,-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.children-item-lists{
|
||||||
|
//todo 手动修改
|
||||||
|
&:before{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width:40px;
|
||||||
|
height: 4px;
|
||||||
|
background-color: $arrowColoe;
|
||||||
|
position: absolute;
|
||||||
|
top:50%;
|
||||||
|
left: -50px;
|
||||||
|
transform:translateY(-50%);
|
||||||
|
}
|
||||||
|
&:after{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
border-left: 10px solid #5ea9df;
|
||||||
|
border-right: 10px solid transparent;
|
||||||
|
border-bottom: 10px solid transparent;
|
||||||
|
border-top: 10px solid transparent;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: -14px;
|
||||||
|
transform:translateY(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pcs-has-children-item-square{
|
||||||
|
vertical-align: middle;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #ffefad;
|
||||||
|
}
|
||||||
|
.no-bms-list{
|
||||||
|
.item-lists{
|
||||||
|
&:not(:last-child){
|
||||||
|
margin-right:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
@ -34,10 +34,10 @@
|
|||||||
<div
|
<div
|
||||||
class="status"
|
class="status"
|
||||||
:class="
|
:class="
|
||||||
item.deviceStatus === '1' ? 'status-running' : ''
|
item.runningStatus === '2' ? 'status-running' : ''
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ deviceStatusOptions[item.deviceStatus] }}
|
{{ deviceStatusOptions[item.runningStatus] }}
|
||||||
</div>
|
</div>
|
||||||
<div class="row-items-img">
|
<div class="row-items-img">
|
||||||
<img
|
<img
|
||||||
@ -68,10 +68,10 @@
|
|||||||
<div
|
<div
|
||||||
class="status"
|
class="status"
|
||||||
:class="
|
:class="
|
||||||
item.deviceStatus === '1' ? 'status-running' : ''
|
item.runningStatus === '2' ? 'status-running' : ''
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ deviceStatusOptions[item.deviceStatus] }}
|
{{ deviceStatusOptions[item.runningStatus] }}
|
||||||
</div>
|
</div>
|
||||||
<div class="row-items-img">
|
<div class="row-items-img">
|
||||||
<img
|
<img
|
||||||
@ -107,10 +107,10 @@
|
|||||||
<div
|
<div
|
||||||
class="status"
|
class="status"
|
||||||
:class="
|
:class="
|
||||||
item.deviceStatus === '1' ? 'status-running' : ''
|
item.runningStatus === '2' ? 'status-running' : ''
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ deviceStatusOptions[item.deviceStatus] }}
|
{{ deviceStatusOptions[item.runningStatus] }}
|
||||||
</div>
|
</div>
|
||||||
<div class="row-items-img row-items-img-bms">
|
<div class="row-items-img row-items-img-bms">
|
||||||
<div style="position:relative;">
|
<div style="position:relative;">
|
||||||
@ -150,10 +150,10 @@
|
|||||||
<div
|
<div
|
||||||
class="status"
|
class="status"
|
||||||
:class="
|
:class="
|
||||||
item.deviceStatus === '1' ? 'status-running' : ''
|
item.runningStatus === '2' ? 'status-running' : ''
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ deviceStatusOptions[item.deviceStatus] }}
|
{{ deviceStatusOptions[item.runningStatus] }}
|
||||||
</div>
|
</div>
|
||||||
<div class="row-items-img">
|
<div class="row-items-img">
|
||||||
<img
|
<img
|
||||||
@ -171,14 +171,14 @@
|
|||||||
<div
|
<div
|
||||||
class="status"
|
class="status"
|
||||||
:class="
|
:class="
|
||||||
item.children[0].deviceStatus === '1'
|
item.children[0].runningStatus === '2'
|
||||||
? 'status-running'
|
? 'status-running'
|
||||||
: ''
|
: ''
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{
|
{{
|
||||||
deviceStatusOptions[
|
deviceStatusOptions[
|
||||||
item.children[0].deviceStatus
|
item.children[0].runningStatus
|
||||||
]
|
]
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
@ -207,7 +207,6 @@
|
|||||||
import { getDeviceList } from "@/api/ems/site";
|
import { getDeviceList } from "@/api/ems/site";
|
||||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||||
import { mapState } from "vuex";
|
import { mapState } from "vuex";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "DzjkZxlt",
|
name: "DzjkZxlt",
|
||||||
mixins: [getQuerySiteId],
|
mixins: [getQuerySiteId],
|
||||||
@ -323,14 +322,13 @@ $lineColor: #86bcc7;
|
|||||||
|
|
||||||
.ems-dashboard-editor-container {
|
.ems-dashboard-editor-container {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
padding: 0;
|
padding: 30px;
|
||||||
color: #666666;
|
color: #666666;
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
//云 、计算机 、箭头
|
//云 、计算机 、箭头
|
||||||
.top {
|
.top {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
@ -345,7 +343,6 @@ $lineColor: #86bcc7;
|
|||||||
//云 样式
|
//云 样式
|
||||||
.cloud-container {
|
.cloud-container {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
.cloud {
|
.cloud {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
@ -357,7 +354,6 @@ $lineColor: #86bcc7;
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cloud:before,
|
.cloud:before,
|
||||||
.cloud:after {
|
.cloud:after {
|
||||||
content: "";
|
content: "";
|
||||||
@ -367,24 +363,20 @@ $lineColor: #86bcc7;
|
|||||||
height: 30px;
|
height: 30px;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cloud:before {
|
.cloud:before {
|
||||||
top: -9px;
|
top: -9px;
|
||||||
left: 8px;
|
left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cloud:after {
|
.cloud:after {
|
||||||
top: -6px;
|
top: -6px;
|
||||||
right: 9px;
|
right: 9px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//双箭头
|
//双箭头
|
||||||
.double-arrows {
|
.double-arrows {
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.top-arrows,
|
.top-arrows,
|
||||||
.bottom-arrows {
|
.bottom-arrows {
|
||||||
height: 4px;
|
height: 4px;
|
||||||
@ -392,7 +384,6 @@ $lineColor: #86bcc7;
|
|||||||
background-color: #5ea9df;
|
background-color: #5ea9df;
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -401,11 +392,9 @@ $lineColor: #86bcc7;
|
|||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-arrows {
|
.top-arrows {
|
||||||
vertical-align: super;
|
vertical-align: super;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-arrows::after {
|
.top-arrows::after {
|
||||||
top: -4px;
|
top: -4px;
|
||||||
border-bottom: 6px solid transparent;
|
border-bottom: 6px solid transparent;
|
||||||
@ -414,10 +403,8 @@ $lineColor: #86bcc7;
|
|||||||
border-top: 6px solid transparent;
|
border-top: 6px solid transparent;
|
||||||
left: -11px;
|
left: -11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-arrows {
|
.bottom-arrows {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
top: -4px;
|
top: -4px;
|
||||||
border-top: 6px solid transparent;
|
border-top: 6px solid transparent;
|
||||||
@ -438,7 +425,6 @@ $lineColor: #86bcc7;
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: auto;
|
height: auto;
|
||||||
@ -446,7 +432,6 @@ $lineColor: #86bcc7;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.outer-border {
|
.outer-border {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
@ -482,10 +467,8 @@ $lineColor: #86bcc7;
|
|||||||
color: #000;
|
color: #000;
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-lists {
|
.row-lists {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.row-items {
|
.row-items {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
@ -520,20 +503,16 @@ $lineColor: #86bcc7;
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background: #aaaaaa;
|
background: #aaaaaa;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
|
|
||||||
&.status-running {
|
&.status-running {
|
||||||
background: #00c69c;
|
background: #00c69c;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 图片+设备名称
|
// 图片+设备名称
|
||||||
.row-items-img {
|
.row-items-img {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
|
|
||||||
&.row-items-img-bms{
|
&.row-items-img-bms{
|
||||||
padding-top: 14px;
|
padding-top: 14px;
|
||||||
|
|
||||||
.num{
|
.num{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
@ -547,26 +526,21 @@ $lineColor: #86bcc7;
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: auto;
|
height: auto;
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&.img-lq {
|
&.img-lq {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.img-pcs {
|
&.img-pcs {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.img-db {
|
&.img-db {
|
||||||
width: 56px;
|
width: 56px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1px;
|
top: 1px;
|
||||||
@ -585,24 +559,19 @@ $lineColor: #86bcc7;
|
|||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-items {
|
.row-items {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.parent-dash {
|
.parent-dash {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
position: inherit;
|
position: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
content: "";
|
content: "";
|
||||||
@ -616,19 +585,16 @@ $lineColor: #86bcc7;
|
|||||||
transform: scale(0.4, 1);
|
transform: scale(0.4, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.children-dash {
|
.children-dash {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
margin: -20px 0 0 26px;
|
margin: -20px 0 0 26px;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
position: inherit;
|
position: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
content: "";
|
content: "";
|
||||||
|
|||||||
@ -98,9 +98,13 @@
|
|||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import resize from "@/mixins/ems/resize";
|
import resize from "@/mixins/ems/resize";
|
||||||
import { getAllSites } from "@/api/ems/zddt";
|
import { getAllSites } from "@/api/ems/zddt";
|
||||||
import {getAllBatteryIdsBySites, getAllDeviceCategory, getPointValueList, pointFuzzyQuery,} from "@/api/ems/search";
|
import {
|
||||||
|
getAllDeviceCategory,
|
||||||
|
getPointValueList,
|
||||||
|
pointFuzzyQuery,
|
||||||
|
getAllBatteryIdsBySites,
|
||||||
|
} from "@/api/ems/search";
|
||||||
import DateTimeSelect from "./DateTimeSelect.vue";
|
import DateTimeSelect from "./DateTimeSelect.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Search",
|
name: "Search",
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
@ -210,26 +214,11 @@ export default {
|
|||||||
this.getDate();
|
this.getDate();
|
||||||
},
|
},
|
||||||
setOption(data) {
|
setOption(data) {
|
||||||
// 点位类型 dataType 1-瞬时值 2-累计值 仅当值为2展示差值
|
|
||||||
// 图表类型 chartType 1-曲线图,2-箱线图
|
|
||||||
if (!this.chart) return;
|
if (!this.chart) return;
|
||||||
this.chart.clear();
|
this.chart.clear();
|
||||||
console.log("返回的数据", data);
|
console.log("返回的数据", data);
|
||||||
if (!data || data.length <= 0) {
|
|
||||||
this.$message.warning("暂无数据");
|
|
||||||
}
|
|
||||||
console.log('展示的图表类型chartType', data[0].chartType)
|
|
||||||
|
|
||||||
if (data[0].chartType === 2) {
|
|
||||||
// 箱型图
|
|
||||||
this.setBoxOption(data)
|
|
||||||
} else {
|
|
||||||
//折线图
|
|
||||||
this.setLineOption(data)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setLineOption(data) {
|
|
||||||
let dataset = [];
|
let dataset = [];
|
||||||
|
if (data.length > 0) {
|
||||||
data.forEach((item, index) => {
|
data.forEach((item, index) => {
|
||||||
item.deviceList.forEach((inner) => {
|
item.deviceList.forEach((inner) => {
|
||||||
dataset.push({
|
dataset.push({
|
||||||
@ -291,7 +280,10 @@ export default {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
console.log("折线图图表数据", dataset);
|
} else {
|
||||||
|
this.$message.warning("暂无数据");
|
||||||
|
}
|
||||||
|
console.log("图表数据", dataset);
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
legend: {
|
legend: {
|
||||||
// left: 'center',
|
// left: 'center',
|
||||||
@ -331,119 +323,6 @@ export default {
|
|||||||
series: dataset,
|
series: dataset,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
setBoxOption(data) {
|
|
||||||
let dataset = [];
|
|
||||||
data.forEach((item, index) => {
|
|
||||||
item.deviceList.forEach((inner) => {
|
|
||||||
dataset.push({
|
|
||||||
name: `${
|
|
||||||
this.isDtdc
|
|
||||||
? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}`
|
|
||||||
: ""
|
|
||||||
}${inner.deviceId}`,
|
|
||||||
type: "boxplot",
|
|
||||||
// markPoint: {
|
|
||||||
// symbolSize: 30,
|
|
||||||
// emphasis: {
|
|
||||||
// disabled: false//打开 鼠标高亮
|
|
||||||
// },
|
|
||||||
// data: [//最大值、最小值
|
|
||||||
// {
|
|
||||||
// // type: 'max',
|
|
||||||
// name: `最大值`,
|
|
||||||
// coord: [inner.maxDate, inner.maxValue],
|
|
||||||
// relativeTo: 'coordinate',
|
|
||||||
// label: {
|
|
||||||
// position: "top",
|
|
||||||
// formatter: item.dataType === 2 ? ([
|
|
||||||
// `最大值:${inner.maxValue}`,
|
|
||||||
// // `平均值:${inner.avgValue}`,
|
|
||||||
// `差值:${inner.diffValue}`,
|
|
||||||
// ]).join('\n') : ([
|
|
||||||
// `最大值:${inner.maxValue}`,
|
|
||||||
// // `平均值:${inner.avgValue}`,
|
|
||||||
// ]).join('\n'),
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// // type: 'min',
|
|
||||||
// name: `最小值`,
|
|
||||||
// coord: [inner.minDate, inner.minValue],
|
|
||||||
// relativeTo: 'coordinate',
|
|
||||||
// label: {
|
|
||||||
// position: "top",
|
|
||||||
// formatter: item.dataType === 2 ? ([
|
|
||||||
// `最小值:${inner.minValue}`,
|
|
||||||
// // `平均值:${inner.avgValue}`,
|
|
||||||
// `差值:${inner.diffValue}`,
|
|
||||||
// ]).join('\n') : ([
|
|
||||||
// `最小值:${inner.minValue}`,
|
|
||||||
// // `平均值:${inner.avgValue}`,
|
|
||||||
// ]).join('\n'),
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
xdata: [],
|
|
||||||
data: [],
|
|
||||||
});
|
|
||||||
const length = dataset.length;
|
|
||||||
inner.pointValueList.forEach((value) => {
|
|
||||||
const {valueDate, min, q1, median, q3, max} = value
|
|
||||||
dataset[length - 1].xdata.push(valueDate);
|
|
||||||
dataset[length - 1].data.push([min, q1, median, q3, max]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
console.log("箱型图图表数据", dataset);
|
|
||||||
this.chart.setOption({
|
|
||||||
legend: {
|
|
||||||
// left: 'center',
|
|
||||||
// top: '10',
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
formatter: function (params) {
|
|
||||||
let data = params.data;
|
|
||||||
let result = params.marker + params.name + ' ' + params.seriesName + '<br/>';
|
|
||||||
result += '最小值: ' + data[1] + '<br/>';
|
|
||||||
result += '平均值: ' + data[3] + '<br/>';
|
|
||||||
result += '最大值: ' + data[5];
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
// trigger: "axis",
|
|
||||||
// axisPointer: {
|
|
||||||
// type: 'cross',
|
|
||||||
// },
|
|
||||||
// axisPointer: {
|
|
||||||
// // 坐标轴指示器,坐标轴触发有效
|
|
||||||
// type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
textStyle: {
|
|
||||||
color: "#333333",
|
|
||||||
},
|
|
||||||
xAxis: {type: "category", data: dataset?.[0]?.xdata || []},
|
|
||||||
yAxis: {
|
|
||||||
type: "value",
|
|
||||||
},
|
|
||||||
dataZoom: [
|
|
||||||
{
|
|
||||||
type: "inside",
|
|
||||||
start: 0,
|
|
||||||
end: 100,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
start: 0,
|
|
||||||
end: 100,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: dataset,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
submitForm() {
|
submitForm() {
|
||||||
this.getDate();
|
this.getDate();
|
||||||
},
|
},
|
||||||
@ -483,8 +362,7 @@ export default {
|
|||||||
.then((response) => {
|
.then((response) => {
|
||||||
this.siteList = response.data || [];
|
this.siteList = response.data || [];
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {});
|
||||||
});
|
|
||||||
},
|
},
|
||||||
getDate() {
|
getDate() {
|
||||||
this.$refs.form.validate((valid) => {
|
this.$refs.form.validate((valid) => {
|
||||||
|
|||||||
@ -111,9 +111,7 @@
|
|||||||
<el-cascader
|
<el-cascader
|
||||||
v-model="item.deviceId"
|
v-model="item.deviceId"
|
||||||
:options="childOptions"
|
:options="childOptions"
|
||||||
:props="props"
|
|
||||||
:show-all-levels="false"
|
:show-all-levels="false"
|
||||||
:ref="'protectionSettings'+index"
|
|
||||||
@change="(v)=>handleChange(v,'protectionSettings',index)"
|
@change="(v)=>handleChange(v,'protectionSettings',index)"
|
||||||
></el-cascader>
|
></el-cascader>
|
||||||
</div>
|
</div>
|
||||||
@ -228,8 +226,6 @@
|
|||||||
v-model="item.deviceId"
|
v-model="item.deviceId"
|
||||||
:show-all-levels="false"
|
:show-all-levels="false"
|
||||||
:options="childOptions"
|
:options="childOptions"
|
||||||
:props="props"
|
|
||||||
:ref="'protectionPlan'+index"
|
|
||||||
@change="(v)=>handleChange(v,'protectionPlan',index)"
|
@change="(v)=>handleChange(v,'protectionPlan',index)"
|
||||||
></el-cascader>
|
></el-cascader>
|
||||||
</div>
|
</div>
|
||||||
@ -274,9 +270,13 @@
|
|||||||
import { mapState } from "vuex";
|
import { mapState } from "vuex";
|
||||||
import { getAllSites } from "@/api/ems/zddt";
|
import { getAllSites } from "@/api/ems/zddt";
|
||||||
import { validText } from "@/utils/validate";
|
import { validText } from "@/utils/validate";
|
||||||
import {addProtectPlan, getDeviceListBySiteAndCategory, getProtectPlan, updateProtectPlan} from "@/api/ems/site";
|
import {
|
||||||
|
updateProtectPlan,
|
||||||
|
addProtectPlan,
|
||||||
|
getProtectPlan,
|
||||||
|
getDeviceListBySiteAndCategory
|
||||||
|
} from "@/api/ems/site";
|
||||||
import { getAllDeviceCategory, pointFuzzyQuery } from "@/api/ems/search";
|
import { getAllDeviceCategory, pointFuzzyQuery } from "@/api/ems/search";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
const validateText = (rule, value, callback) => {
|
const validateText = (rule, value, callback) => {
|
||||||
@ -287,14 +287,6 @@ export default {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
return {
|
return {
|
||||||
props: {
|
|
||||||
// emitPath: false,//在选中节点改变时,是否返回由该节点所在的各级菜单的值所组成的数组,若设置 false,则只返回该节点的值
|
|
||||||
lazy: true,
|
|
||||||
lazyLoad: (node, resolve) => {
|
|
||||||
console.log('---------node', node)
|
|
||||||
this.getDeviceList(node, resolve)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mode:'',
|
mode:'',
|
||||||
loading: 0,
|
loading: 0,
|
||||||
childOptions:[],
|
childOptions:[],
|
||||||
@ -357,8 +349,8 @@ export default {
|
|||||||
this.getZdList();
|
this.getZdList();
|
||||||
this.getDeviceCategoryList().then(()=>{
|
this.getDeviceCategoryList().then(()=>{
|
||||||
if(id && siteId) {
|
if(id && siteId) {
|
||||||
// this.getDeviceList('PCS', siteId)
|
this.getDeviceList('PCS',siteId)
|
||||||
// this.getDeviceList('STACK', siteId)
|
this.getDeviceList('STACK',siteId)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if(id){
|
if(id){
|
||||||
@ -377,39 +369,20 @@ export default {
|
|||||||
description: data?.description ||'',//方案描述
|
description: data?.description ||'',//方案描述
|
||||||
}
|
}
|
||||||
const plan =(JSON.parse(data?.protectionPlan || [])).map(item=>{
|
const plan =(JSON.parse(data?.protectionPlan || [])).map(item=>{
|
||||||
const index = this.childOptions.findIndex(i => i.value === item.deviceCategory)
|
|
||||||
if (index > -1) {
|
|
||||||
!this.childOptions[index].children.find(i => i.value === item.deviceId) && this.childOptions[index].children.push({
|
|
||||||
value: item.deviceId,
|
|
||||||
label: item.deviceName,
|
|
||||||
leaf: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return Object.assign({},item,{
|
return Object.assign({},item,{
|
||||||
deviceId:[item.deviceCategory || '',item.deviceId || ''],
|
deviceId:[item.deviceCategory || '',item.deviceId || ''],
|
||||||
deviceName: [item.categoryName || '', item.deviceName || ''],
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
const settings =(JSON.parse(data?.protectionSettings || [])).map(item=>{
|
const settings =(JSON.parse(data?.protectionSettings || [])).map(item=>{
|
||||||
const index = this.childOptions.findIndex(i => i.value === item.deviceCategory)
|
|
||||||
if (index > -1) {
|
|
||||||
!this.childOptions[index].children.find(i => i.value === item.deviceId) && this.childOptions[index].children.push({
|
|
||||||
value: item.deviceId,
|
|
||||||
label: item.deviceName,
|
|
||||||
leaf: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return Object.assign({},item,{
|
return Object.assign({},item,{
|
||||||
deviceId:[item.deviceCategory || '',item.deviceId || ''],
|
deviceId:[item.deviceCategory || '',item.deviceId || ''],
|
||||||
deviceName: [item.categoryName || '', item.deviceName || ''],
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
this.$nextTick(()=>{
|
this.$nextTick(()=>{
|
||||||
this.protectionPlan.splice(0,0,...plan)
|
this.protectionPlan.splice(0,0,...plan)
|
||||||
this.protectionSettings.splice(0,0,...settings)
|
this.protectionSettings.splice(0,0,...settings)
|
||||||
})
|
})
|
||||||
console.log('获取设备保护详情并初始化', this.formData, this.protectionPlan, this.protectionSettings, this.childOptions)
|
console.log('获取设备保护详情并初始化',this.formData,this.protectionPlan,this.protectionSettings)
|
||||||
|
|
||||||
})
|
})
|
||||||
}else{
|
}else{
|
||||||
this.mode = 'add'
|
this.mode = 'add'
|
||||||
@ -419,7 +392,6 @@ export default {
|
|||||||
addRow(type) {
|
addRow(type) {
|
||||||
const item = type === 'protectionSettings' ? {
|
const item = type === 'protectionSettings' ? {
|
||||||
deviceId:[],//设备ID
|
deviceId:[],//设备ID
|
||||||
deviceName: [],
|
|
||||||
deviceCategory: "",//设备类型 英文
|
deviceCategory: "",//设备类型 英文
|
||||||
categoryName:'',//设备类型名称 中文
|
categoryName:'',//设备类型名称 中文
|
||||||
point: "",//点位 英文
|
point: "",//点位 英文
|
||||||
@ -431,7 +403,6 @@ export default {
|
|||||||
relationNext: "",//与下一个点位的关系
|
relationNext: "",//与下一个点位的关系
|
||||||
} : {
|
} : {
|
||||||
deviceId:[],
|
deviceId:[],
|
||||||
deviceName: [],
|
|
||||||
deviceCategory: "",//设备类型 英文
|
deviceCategory: "",//设备类型 英文
|
||||||
categoryName:'',//设备类型名称 中文
|
categoryName:'',//设备类型名称 中文
|
||||||
point: "",
|
point: "",
|
||||||
@ -490,14 +461,14 @@ export default {
|
|||||||
this.loading += 1;
|
this.loading += 1;
|
||||||
return getAllDeviceCategory()
|
return getAllDeviceCategory()
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
const data = (response?.data || []);
|
const data = (response?.data || []).filter(item => ['PCS','STACK'].includes(item.code));
|
||||||
|
// this.childOptions=[]
|
||||||
this.$set(this,'childOptions',[])
|
this.$set(this,'childOptions',[])
|
||||||
let arr =[]
|
let arr =[]
|
||||||
data.forEach((item) => {
|
data.forEach((item) => {
|
||||||
arr.push({
|
arr.push({
|
||||||
value: item.code,
|
value: item.code,
|
||||||
label: item.name,
|
label: item.name,
|
||||||
leaf: false,
|
|
||||||
children:[]
|
children:[]
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
@ -509,28 +480,21 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
//获取设备列表-区分站点
|
//获取设备列表-区分站点
|
||||||
getDeviceList(node, resolve) {
|
getDeviceList(deviceCategory,siteId){
|
||||||
if (!this.formData.siteId) {
|
this.$nextTick(()=>{
|
||||||
this.$message({
|
getDeviceListBySiteAndCategory({siteId:siteId || this.formData.siteId,deviceCategory}).then((response) => {
|
||||||
type: "warning",
|
|
||||||
message: "请先选择站点",
|
|
||||||
});
|
|
||||||
return resolve([])
|
|
||||||
}
|
|
||||||
getDeviceListBySiteAndCategory({
|
|
||||||
siteId: this.formData.siteId,
|
|
||||||
deviceCategory: node.value
|
|
||||||
}).then((response) => {
|
|
||||||
const data = (response?.data || []).map(item => {
|
const data = (response?.data || []).map(item => {
|
||||||
return {
|
return {
|
||||||
label: item.deviceName,
|
label: item.deviceName,
|
||||||
value: item.id,
|
value: item.id,
|
||||||
leaf: true
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
resolve(data)
|
const index = this.childOptions.findIndex(item=>item.value === deviceCategory)
|
||||||
}).catch(() => {
|
if(index>-1){
|
||||||
resolve([])
|
const length = this.childOptions[index].children.length
|
||||||
|
this.childOptions[index].children.splice(0,length,...data)
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
//更新站点下面的设备列表
|
//更新站点下面的设备列表
|
||||||
@ -539,17 +503,17 @@ export default {
|
|||||||
const length = item.children.length
|
const length = item.children.length
|
||||||
item.children.splice(0,length)
|
item.children.splice(0,length)
|
||||||
})
|
})
|
||||||
|
this.getDeviceList('PCS')
|
||||||
|
this.getDeviceList('STACK')
|
||||||
},
|
},
|
||||||
//选中设备类型、设备
|
//选中设备类型、设备
|
||||||
handleChange(data,type,index){
|
handleChange(data,type,index){
|
||||||
console.log('设置选中设备类型、设备', data, type, index)
|
const deviceCategory = data[0],deviceId=data[1]
|
||||||
const {label = '', parent = {}} = this.$refs[type + index][0].getCheckedNodes()[0]
|
console.log('设置选中设备类型、设备',deviceCategory,deviceId,type,index)
|
||||||
console.log('选中设备的名称', parent.label, label)
|
|
||||||
const item = Object.assign({},this[type][index],{
|
const item = Object.assign({},this[type][index],{
|
||||||
deviceId:data,
|
deviceId:data,
|
||||||
deviceName: [parent.label, label],
|
deviceCategory,
|
||||||
deviceCategory: data[0],
|
categoryName : this.childOptions.find(i=>i.value === deviceCategory).label,
|
||||||
categoryName: parent.label,
|
|
||||||
pointName:'',
|
pointName:'',
|
||||||
point:''
|
point:''
|
||||||
})
|
})
|
||||||
@ -583,7 +547,6 @@ export default {
|
|||||||
item.point = ""
|
item.point = ""
|
||||||
item.pointName = ""
|
item.pointName = ""
|
||||||
item.deviceId=[]
|
item.deviceId=[]
|
||||||
item.deviceName = []
|
|
||||||
item.categoryName=''
|
item.categoryName=''
|
||||||
item.deviceCategory=''
|
item.deviceCategory=''
|
||||||
});
|
});
|
||||||
@ -598,7 +561,6 @@ export default {
|
|||||||
item.point = ""
|
item.point = ""
|
||||||
item.pointName = ""
|
item.pointName = ""
|
||||||
item.deviceId=[]
|
item.deviceId=[]
|
||||||
item.deviceName = []
|
|
||||||
item.categoryName=''
|
item.categoryName=''
|
||||||
item.deviceCategory=''
|
item.deviceCategory=''
|
||||||
});
|
});
|
||||||
@ -635,7 +597,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}[type][name]
|
}[type][name]
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$refs.addTempForm.validate((valid) => {
|
this.$refs.addTempForm.validate((valid) => {
|
||||||
if (!valid) return;
|
if (!valid) return;
|
||||||
const {
|
const {
|
||||||
@ -698,13 +659,11 @@ export default {
|
|||||||
const settings = protectionSettings.map(item=>{
|
const settings = protectionSettings.map(item=>{
|
||||||
return Object.assign({},item,{
|
return Object.assign({},item,{
|
||||||
deviceId:item.deviceId[1],
|
deviceId:item.deviceId[1],
|
||||||
deviceName: item.deviceName[1],
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
const plan = protectionPlan.map(item=>{
|
const plan = protectionPlan.map(item=>{
|
||||||
return Object.assign({},item,{
|
return Object.assign({},item,{
|
||||||
deviceId:item.deviceId[1],
|
deviceId:item.deviceId[1],
|
||||||
deviceName: item.deviceName[1],
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
this.loading += 1;
|
this.loading += 1;
|
||||||
@ -768,43 +727,35 @@ export default {
|
|||||||
.items-container {
|
.items-container {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
|
||||||
.item-title {
|
.item-title {
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.time-lists-container {
|
.time-lists-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1px solid #eee;
|
border: 1px solid #eee;
|
||||||
|
|
||||||
.time-lists {
|
.time-lists {
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
& > div {
|
& > div {
|
||||||
width: 16%;
|
width: 16%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
width: 28%;
|
width: 28%;
|
||||||
border-right: 1px solid #eee;
|
border-right: 1px solid #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-date-editor.el-input,
|
.el-date-editor.el-input,
|
||||||
.el-date-editor.el-input__inner {
|
.el-date-editor.el-input__inner {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.time-lists-title {
|
.time-lists-title {
|
||||||
color: #000;
|
color: #000;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|||||||
@ -1,14 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog :visible.sync="dialogTableVisible" :close-on-press-escape="false" :close-on-click-modal="false"
|
<el-dialog :visible.sync="dialogTableVisible" :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false" destroy-on-close lock-scroll append-to-body width="600px" class="ems-dialog" :title="mode === 'add'?'新增设备':`编辑设备` " >
|
||||||
:show-close="false" destroy-on-close lock-scroll append-to-body width="800px" class="ems-dialog"
|
<el-form v-loading="loading>0" ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="140px">
|
||||||
:title="mode === 'add'?'新增设备':`编辑设备` ">
|
|
||||||
<div v-loading="loading>0">
|
|
||||||
<el-form v-loading="loading>0" ref="addTempForm" inline :model="formData" :rules="rules" size="medium"
|
|
||||||
label-width="120px" class="device-form">
|
|
||||||
<el-form-item label="站点" prop="siteId">
|
<el-form-item label="站点" prop="siteId">
|
||||||
<el-select v-model="formData.siteId" placeholder="请选择" :style="{width: '100%'}" @change="changeType">
|
<el-select v-model="formData.siteId" placeholder="请选择" :style="{width: '100%'}" @change="changeType">
|
||||||
<el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList"
|
<el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'siteOptions'"></el-option>
|
||||||
:key="index+'siteOptions'"></el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="设备id" prop="deviceId" >
|
<el-form-item label="设备id" prop="deviceId" >
|
||||||
@ -20,35 +15,27 @@
|
|||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="设备描述" prop="description">
|
<el-form-item label="设备描述" prop="description">
|
||||||
<el-input v-model="formData.description" type="textarea" placeholder="请输入" clearable
|
<el-input v-model="formData.description" type="textarea" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||||
:style="{width: '100%'}">
|
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="工作状态" prop="communicationStatus">
|
<el-form-item label="工作状态" prop="communicationStatus">
|
||||||
<el-select v-model="formData.communicationStatus" placeholder="请选择" :style="{width: '100%'}">
|
<el-select v-model="formData.communicationStatus" placeholder="请选择" :style="{width: '100%'}">
|
||||||
<el-option :label="value" :value="key" v-for="(value,key) in communicationStatusOptions"
|
<el-option :label="value" :value="key" v-for="(value,key) in communicationStatusOptions" :key="key+'communicationStatusOptions'"></el-option>
|
||||||
:key="key+'communicationStatusOptions'"></el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="设备类型" prop="deviceType">
|
<el-form-item label="设备类型" prop="deviceType">
|
||||||
<el-select v-model="formData.deviceType" placeholder="请选择" :style="{width: '100%'}">
|
<el-select v-model="formData.deviceType" placeholder="请选择" :style="{width: '100%'}">
|
||||||
<el-option :label="value" :value="key" v-for="(value,key) in deviceTypeOptions"
|
<el-option :label="value" :value="key" v-for="(value,key) in deviceTypeOptions" :key="key+'deviceTypeOptions'"></el-option>
|
||||||
:key="key+'deviceTypeOptions'"></el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="设备类别" prop="deviceCategory">
|
<el-form-item label="设备类别" prop="deviceCategory">
|
||||||
<el-select v-model="formData.deviceCategory" placeholder="请选择" :style="{width: '100%'}"
|
<el-select v-model="formData.deviceCategory" placeholder="请选择" :style="{width: '100%'}" @change="changeType">
|
||||||
@change="changeType">
|
<el-option :label="item.name" :value="item.code" v-for="(item,index) in deviceCategoryList" :key="index+'deviceCategoryList'"></el-option>
|
||||||
<el-option :label="item.name" :value="item.code" v-for="(item,index) in deviceCategoryList"
|
|
||||||
:key="index+'deviceCategoryList'"></el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="上级设备" prop="parentId" v-if="dccDeviceCategoryList.includes(formData.deviceCategory)">
|
<el-form-item label="上级设备" prop="parentId" v-if="dccDeviceCategoryList.includes(formData.deviceCategory)">
|
||||||
<el-select v-model="formData.parentId"
|
<el-select v-model="formData.parentId" :placeholder="parentDeviceList.length === 0 && !formData.siteId ? '请先选择站点' : '请选择'" :style="{width: '100%'}">
|
||||||
:placeholder="parentDeviceList.length === 0 && !formData.siteId ? '请先选择站点' : '请选择'"
|
<el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in parentDeviceList" :key="index+'parentDeviceList'" ></el-option>
|
||||||
:style="{width: '100%'}">
|
|
||||||
<el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in parentDeviceList"
|
|
||||||
:key="index+'parentDeviceList'"></el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="TCP设备的ip地址" prop="ipAddress" v-if="formData.deviceType === 'TCP'">
|
<el-form-item label="TCP设备的ip地址" prop="ipAddress" v-if="formData.deviceType === 'TCP'">
|
||||||
@ -59,10 +46,7 @@
|
|||||||
<el-input v-model="formData.ipPort" placeholder="请输入" clearable :style="{width: '100%'}">
|
<el-input v-model="formData.ipPort" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="从站地址" prop="slaveId" v-if="formData.deviceType === 'TCP'">
|
|
||||||
<el-input v-model="formData.slaveId" placeholder="请输入" clearable :style="{width: '100%'}">
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="串口路径" prop="serialPort">
|
<el-form-item label="串口路径" prop="serialPort">
|
||||||
<el-input v-model="formData.serialPort" placeholder="请输入" clearable :style="{width: '100%'}">
|
<el-input v-model="formData.serialPort" placeholder="请输入" clearable :style="{width: '100%'}">
|
||||||
</el-input>
|
</el-input>
|
||||||
@ -88,49 +72,6 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
</el-form>
|
</el-form>
|
||||||
<!-- pcs配置-->
|
|
||||||
<el-form v-if="isPcs" ref="pcsSettingForm" inline :model="pcsSetting" size="medium"
|
|
||||||
label-width="120px" class="device-form" :rules="pcsSettingRules">
|
|
||||||
<div style="font-size: 14px;padding: 10px 0 20px;font-weight: 600;">PCS配置</div>
|
|
||||||
<el-form-item label="开关机地址" prop="pointAddress">
|
|
||||||
<el-input v-model="pcsSetting.pointAddress" placeholder="请输入" clearable :style="{width: '100%'}">
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="功率地址" prop="powerAddress">
|
|
||||||
<el-input v-model="pcsSetting.powerAddress" placeholder="请输入" clearable :style="{width: '100%'}">
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="开机指令" prop="startCommand">
|
|
||||||
<el-input v-model="pcsSetting.startCommand" placeholder="请输入" clearable :style="{width: '100%'}">
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="开机目标功率" prop="startPower">
|
|
||||||
<el-input v-model="pcsSetting.startPower" placeholder="请输入" clearable :style="{width: '100%'}">
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="关机指令" prop="stopCommand">
|
|
||||||
<el-input v-model="pcsSetting.stopCommand" placeholder="请输入" clearable :style="{width: '100%'}">
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="关机目标功率" prop="stopPower">
|
|
||||||
<el-input v-model="pcsSetting.stopPower" placeholder="请输入" clearable :style="{width: '100%'}">
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="电池簇数" prop="clusterNum">
|
|
||||||
<el-input v-model="pcsSetting.clusterNum" placeholder="请输入" clearable :style="{width: '100%'}">
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<br>
|
|
||||||
<template v-for="index in parseInt(pcsSetting.clusterNum) || 0">
|
|
||||||
<el-form-item :label="'电池簇'+(index)+'地址'"
|
|
||||||
prop="clusterPointAddress">
|
|
||||||
<el-input v-model="pcsSetting.clusterPointAddress[index-1]" placeholder="请输入" clearable
|
|
||||||
:style="{width: '100%'}">
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div slot="footer">
|
<div slot="footer">
|
||||||
<el-button @click="closeDialog">取消</el-button>
|
<el-button @click="closeDialog">取消</el-button>
|
||||||
<el-button type="primary" @click="saveDialog">确定</el-button>
|
<el-button type="primary" @click="saveDialog">确定</el-button>
|
||||||
@ -141,9 +82,8 @@
|
|||||||
import {mapState} from "vuex";
|
import {mapState} from "vuex";
|
||||||
import {getAllSites} from '@/api/ems/zddt'
|
import {getAllSites} from '@/api/ems/zddt'
|
||||||
import {validText} from '@/utils/validate'
|
import {validText} from '@/utils/validate'
|
||||||
import {addDevice, getDeviceDetailInfo, getParentDeviceId, updateDevice} from "@/api/ems/site";
|
import {getDeviceDetailInfo,updateDevice,addDevice,getParentDeviceId} from "@/api/ems/site";
|
||||||
import {getAllDeviceCategory} from '@/api/ems/search'
|
import {getAllDeviceCategory} from '@/api/ems/search'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props:{
|
props:{
|
||||||
mode:{
|
mode:{
|
||||||
@ -170,13 +110,6 @@ export default {
|
|||||||
callback();
|
callback();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const validateNumber = (rule, value, callback) => {
|
|
||||||
if (value !== '' && !/^[0-9]+$/.test(value)) {
|
|
||||||
callback(new Error('只能输入数字!'));
|
|
||||||
} else {
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {
|
return {
|
||||||
loading:0,
|
loading:0,
|
||||||
dccDeviceCategoryList:['CLUSTER','BATTERY'],//需要展示上级设备的设备类型
|
dccDeviceCategoryList:['CLUSTER','BATTERY'],//需要展示上级设备的设备类型
|
||||||
@ -202,18 +135,6 @@ export default {
|
|||||||
stopBits:'',//停止位
|
stopBits:'',//停止位
|
||||||
parity:'',//校验位
|
parity:'',//校验位
|
||||||
pictureUrl:'',//设备图片
|
pictureUrl:'',//设备图片
|
||||||
slaveId: '',//从站地址
|
|
||||||
},
|
|
||||||
pcsSetting: {
|
|
||||||
deviceSettingId: '',
|
|
||||||
powerAddress: '',//功率地址
|
|
||||||
pointAddress: "",//开关机地址
|
|
||||||
startCommand: "",//开机指令
|
|
||||||
stopCommand: "",//关机指令
|
|
||||||
startPower: '',//开机目标功率
|
|
||||||
stopPower: '',//关机目标功率
|
|
||||||
clusterNum: '',//电池簇数
|
|
||||||
clusterPointAddress: []//电池簇地址
|
|
||||||
},
|
},
|
||||||
rules: {
|
rules: {
|
||||||
siteId:[
|
siteId:[
|
||||||
@ -246,9 +167,6 @@ export default {
|
|||||||
ipPort:[
|
ipPort:[
|
||||||
{ validator: validateText, trigger: 'blur' }
|
{ validator: validateText, trigger: 'blur' }
|
||||||
],
|
],
|
||||||
slaveId: [
|
|
||||||
{validator: validateNumber, trigger: 'blur'}
|
|
||||||
],
|
|
||||||
serialPort:[
|
serialPort:[
|
||||||
{ validator: validateText, trigger: 'blur' }
|
{ validator: validateText, trigger: 'blur' }
|
||||||
],
|
],
|
||||||
@ -268,47 +186,13 @@ export default {
|
|||||||
// { required: true, message: '请上传图片', trigger: ['blur', 'change']}
|
// { required: true, message: '请上传图片', trigger: ['blur', 'change']}
|
||||||
// ],
|
// ],
|
||||||
},
|
},
|
||||||
pcsSettingRules: {
|
|
||||||
pointAddress: [
|
|
||||||
{required: true, message: '请输入开关机地址', trigger: 'blur'},
|
|
||||||
{validator: validateText, trigger: 'blur'}
|
|
||||||
],
|
|
||||||
powerAddress: [
|
|
||||||
{validator: validateText, trigger: 'blur'}
|
|
||||||
],
|
|
||||||
startCommand: [
|
|
||||||
{required: true, message: '请输入开机指令', trigger: 'blur'},
|
|
||||||
{validator: validateText, trigger: 'blur'}
|
|
||||||
],
|
|
||||||
startPower: [
|
|
||||||
{validator: validateText, trigger: 'blur'}
|
|
||||||
],
|
|
||||||
stopCommand: [
|
|
||||||
{required: true, message: '请输入关机指令', trigger: 'blur'},
|
|
||||||
{validator: validateText, trigger: 'blur'}
|
|
||||||
],
|
|
||||||
stopPower: [
|
|
||||||
{validator: validateText, trigger: 'blur'}
|
|
||||||
],
|
|
||||||
clusterNum: [
|
|
||||||
{required: true, message: '请输入电池簇数', trigger: 'blur'},
|
|
||||||
{validator: validateNumber, trigger: 'blur'}
|
|
||||||
],
|
|
||||||
clusterPointAddress: [
|
|
||||||
{required: true, message: '请输入电池簇地址', trigger: 'blur'},
|
|
||||||
{validator: validateText, trigger: 'blur'}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
communicationStatusOptions: state => state?.ems?.communicationStatusOptions || {},
|
communicationStatusOptions: state => state?.ems?.communicationStatusOptions || {},
|
||||||
deviceTypeOptions:state=>state?.ems?.deviceTypeOptions || {}
|
deviceTypeOptions:state=>state?.ems?.deviceTypeOptions || {}
|
||||||
}),
|
})
|
||||||
isPcs() {
|
|
||||||
return this.formData.deviceCategory === 'PCS'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
watch:{
|
watch:{
|
||||||
dialogTableVisible:{
|
dialogTableVisible:{
|
||||||
@ -326,20 +210,11 @@ export default {
|
|||||||
if((newVal || newVal===0) && this.mode !== 'add'){
|
if((newVal || newVal===0) && this.mode !== 'add'){
|
||||||
this.loading+=1
|
this.loading+=1
|
||||||
getDeviceDetailInfo(newVal).then(response => {
|
getDeviceDetailInfo(newVal).then(response => {
|
||||||
const {pcsSetting, ...data} = JSON.parse(JSON.stringify(response?.data || {}))
|
this.formData = JSON.parse(JSON.stringify(response?.data || {}));
|
||||||
this.formData = data;
|
|
||||||
if (pcsSetting && JSON.stringify(pcsSetting) !== '{}') {
|
|
||||||
this.pcsSetting = JSON.parse(JSON.stringify({
|
|
||||||
...pcsSetting,
|
|
||||||
clusterPointAddress: JSON.parse(pcsSetting.clusterPointAddress || [])
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
if(this.dccDeviceCategoryList.includes(this.formData.deviceCategory)){
|
if(this.dccDeviceCategoryList.includes(this.formData.deviceCategory)){
|
||||||
this.getParentDeviceList(true)
|
this.getParentDeviceList(true)
|
||||||
}
|
}
|
||||||
}).finally(() => {
|
}).finally(() => {this.loading-=1})
|
||||||
this.loading -= 1
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
@ -359,18 +234,14 @@ export default {
|
|||||||
this.loading+=1
|
this.loading+=1
|
||||||
getAllSites().then(response => {
|
getAllSites().then(response => {
|
||||||
this.siteList = response?.data || []
|
this.siteList = response?.data || []
|
||||||
}).finally(() => {
|
}).finally(() => {this.loading-=1})
|
||||||
this.loading -= 1
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
// 获取设备类别
|
// 获取设备类别
|
||||||
getDeviceCategoryList(){
|
getDeviceCategoryList(){
|
||||||
this.loading+=1
|
this.loading+=1
|
||||||
getAllDeviceCategory().then(response => {
|
getAllDeviceCategory().then(response => {
|
||||||
this.deviceCategoryList = response?.data || []
|
this.deviceCategoryList = response?.data || []
|
||||||
}).finally(() => {
|
}).finally(() => {this.loading-=1})
|
||||||
this.loading -= 1
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
//获取上级id列表
|
//获取上级id列表
|
||||||
getParentDeviceList(init=false){
|
getParentDeviceList(init=false){
|
||||||
@ -385,7 +256,9 @@ export default {
|
|||||||
this.loading=this.loading -1
|
this.loading=this.loading -1
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
saveData() {
|
saveDialog() {
|
||||||
|
this.$refs.addTempForm.validate(valid => {
|
||||||
|
if (!valid) return
|
||||||
this.loading+=1
|
this.loading+=1
|
||||||
const {
|
const {
|
||||||
id='',
|
id='',
|
||||||
@ -405,52 +278,9 @@ export default {
|
|||||||
stopBits='',//停止位
|
stopBits='',//停止位
|
||||||
parity='',//校验位
|
parity='',//校验位
|
||||||
pictureUrl='',//设备图片
|
pictureUrl='',//设备图片
|
||||||
slaveId = '',//从站地址
|
|
||||||
}= this.formData;
|
}= this.formData;
|
||||||
const {
|
|
||||||
deviceSettingId,
|
|
||||||
powerAddress,
|
|
||||||
pointAddress,
|
|
||||||
startCommand,
|
|
||||||
stopCommand,
|
|
||||||
startPower,
|
|
||||||
stopPower,
|
|
||||||
clusterNum,
|
|
||||||
clusterPointAddress
|
|
||||||
} = this.pcsSetting
|
|
||||||
let params = {
|
|
||||||
siteId,
|
|
||||||
deviceId,
|
|
||||||
deviceName,
|
|
||||||
description,
|
|
||||||
communicationStatus,
|
|
||||||
deviceType,
|
|
||||||
deviceCategory,
|
|
||||||
parentId,
|
|
||||||
ipAddress,
|
|
||||||
ipPort,
|
|
||||||
serialPort,
|
|
||||||
baudRate,
|
|
||||||
dataBits,
|
|
||||||
stopBits,
|
|
||||||
parity,
|
|
||||||
pictureUrl,
|
|
||||||
slaveId,
|
|
||||||
}
|
|
||||||
if (this.isPcs) {
|
|
||||||
params.pcsSetting = {
|
|
||||||
powerAddress,
|
|
||||||
pointAddress,
|
|
||||||
startCommand,
|
|
||||||
stopCommand,
|
|
||||||
startPower,
|
|
||||||
stopPower,
|
|
||||||
clusterNum,
|
|
||||||
clusterPointAddress: JSON.stringify(!clusterNum ? [] : (clusterPointAddress || []).slice(0, clusterNum))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(this.mode === 'add'){
|
if(this.mode === 'add'){
|
||||||
addDevice(params).then(response => {
|
addDevice({siteId,deviceId,deviceName,description,communicationStatus,deviceType,deviceCategory,parentId,ipAddress,ipPort,serialPort,baudRate,dataBits,stopBits,parity,pictureUrl}).then(response => {
|
||||||
if(response.code === 200){
|
if(response.code === 200){
|
||||||
//新增成功
|
//新增成功
|
||||||
// 关闭弹窗 更新表格
|
// 关闭弹窗 更新表格
|
||||||
@ -461,9 +291,7 @@ export default {
|
|||||||
this.loading-=1
|
this.loading-=1
|
||||||
})
|
})
|
||||||
}else{
|
}else{
|
||||||
params.id = id
|
updateDevice({id,siteId,deviceId,deviceName,description,communicationStatus,deviceType,deviceCategory,parentId,ipAddress,ipPort,serialPort,baudRate,dataBits,stopBits,parity,pictureUrl}).then(response => {
|
||||||
params.pcsSetting && (params.pcsSetting.deviceSettingId = deviceSettingId)
|
|
||||||
updateDevice(params).then(response => {
|
|
||||||
if(response.code === 200){
|
if(response.code === 200){
|
||||||
//新增成功
|
//新增成功
|
||||||
// 关闭弹窗 更新表格
|
// 关闭弹窗 更新表格
|
||||||
@ -474,18 +302,7 @@ export default {
|
|||||||
this.loading-=1
|
this.loading-=1
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
|
||||||
saveDialog() {
|
|
||||||
this.$refs.addTempForm.validate(valid => {
|
|
||||||
if (!valid) return
|
|
||||||
if (this.isPcs) {
|
|
||||||
this.$refs.pcsSettingForm.validate(pcsValidate => {
|
|
||||||
if (!pcsValidate) return
|
|
||||||
this.saveData()
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
this.saveData()
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
closeDialog(){
|
closeDialog(){
|
||||||
@ -509,36 +326,13 @@ export default {
|
|||||||
stopBits:'',//停止位
|
stopBits:'',//停止位
|
||||||
parity:'',//校验位
|
parity:'',//校验位
|
||||||
pictureUrl:'',//设备图片
|
pictureUrl:'',//设备图片
|
||||||
slaveId: '',//从站地址
|
|
||||||
}
|
|
||||||
this.pcsSetting = {
|
|
||||||
deviceSettingId: '',
|
|
||||||
powerAddress: '',//功率地址
|
|
||||||
pointAddress: "",//开关机地址
|
|
||||||
startCommand: "",//开机指令
|
|
||||||
stopCommand: "",//关机指令
|
|
||||||
startPower: '',//开机目标功率
|
|
||||||
stopPower: '',//关机目标功率
|
|
||||||
clusterNum: '',//电池簇数
|
|
||||||
clusterPointAddress: []//电池簇地址
|
|
||||||
}
|
}
|
||||||
this.$refs.addTempForm.resetFields()
|
this.$refs.addTempForm.resetFields()
|
||||||
this.$refs?.pcsSettingForm?.resetFields()
|
|
||||||
this.dialogTableVisible=false
|
this.dialogTableVisible=false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped>
|
||||||
.device-form {
|
|
||||||
::v-deep .el-form-item--medium .el-form-item__content {
|
|
||||||
width: 260px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-form-item {
|
|
||||||
width: 50%;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,94 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-button :size="size" :type="type" :round="round" @click="switchStatus"
|
|
||||||
>
|
|
||||||
{{ label }}
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script>
|
|
||||||
import {updateDeviceStatus} from "@/api/ems/site";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
size: {
|
|
||||||
type: String,
|
|
||||||
default: 'mini',
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
round: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'primary',
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {
|
|
||||||
return {
|
|
||||||
workStatus: null,
|
|
||||||
deviceId: null,
|
|
||||||
deviceName: null,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
label() {
|
|
||||||
return this.data.workStatus === '0' ? '关机' : '开机'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
switchStatus() {
|
|
||||||
console.log(this.data, 11111111)
|
|
||||||
const {workStatus, deviceId, deviceName, siteId} = this.data
|
|
||||||
this.$confirm(`确认要${this.label}设备${deviceName || ''}吗?`, {
|
|
||||||
confirmButtonText: "确定",
|
|
||||||
cancelButtonText: "取消",
|
|
||||||
showClose: false,
|
|
||||||
closeOnClickModal: false,
|
|
||||||
type: "warning",
|
|
||||||
beforeClose: (action, instance, done) => {
|
|
||||||
if (action === "confirm") {
|
|
||||||
instance.confirmButtonLoading = true;
|
|
||||||
//做开关机操作,更新成功后刷新表格
|
|
||||||
updateDeviceStatus({
|
|
||||||
siteId,
|
|
||||||
workStatus: workStatus === '0' ? "1" : '0',
|
|
||||||
deviceId
|
|
||||||
})
|
|
||||||
.then((response) => {
|
|
||||||
response.code === 200 && done();
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
instance.confirmButtonLoading = false;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
done();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
//只有在废弃成功的情况下会走到这里
|
|
||||||
this.$message({
|
|
||||||
type: "success",
|
|
||||||
message: `${deviceName}${this.label}成功!`,
|
|
||||||
});
|
|
||||||
this.$emit('updateSuccess')
|
|
||||||
//调用接口 更新表格数据
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
//取消关机
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
@ -10,7 +10,7 @@
|
|||||||
destroy-on-close
|
destroy-on-close
|
||||||
lock-scroll
|
lock-scroll
|
||||||
show-close
|
show-close
|
||||||
:title="dataType === 'point' ? '点位清单' : '报警点位'"
|
title="点位清单"
|
||||||
width="950px"
|
width="950px"
|
||||||
>
|
>
|
||||||
<el-form :inline="true" label-width="100px">
|
<el-form :inline="true" label-width="100px">
|
||||||
@ -30,15 +30,14 @@
|
|||||||
style="width: 150px"
|
style="width: 150px"
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!-- <el-form-item label="modbus ip">-->
|
<el-form-item label="modbus ip">
|
||||||
<!-- <el-input-->
|
<el-input
|
||||||
<!-- v-model="form.ipAddress"-->
|
v-model="form.ipAddress"
|
||||||
<!-- clearable-->
|
clearable
|
||||||
<!-- placeholder="请输入ip"-->
|
placeholder="请输入ip"
|
||||||
<!-- style="width: 150px"-->
|
style="width: 150px"
|
||||||
<!-- ></el-input>-->
|
></el-input>
|
||||||
<!-- </el-form-item>-->
|
</el-form-item>
|
||||||
<br>
|
|
||||||
<el-form-item label="最小值">
|
<el-form-item label="最小值">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="form.lower"
|
v-model="form.lower"
|
||||||
@ -55,14 +54,14 @@
|
|||||||
style="width: 150px"
|
style="width: 150px"
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!-- <el-form-item label="modbus 端口">-->
|
<el-form-item label="modbus 端口">
|
||||||
<!-- <el-input-->
|
<el-input
|
||||||
<!-- v-model="form.ipPort"-->
|
v-model="form.ipPort"
|
||||||
<!-- clearable-->
|
clearable
|
||||||
<!-- placeholder="请输入端口"-->
|
placeholder="请输入端口"
|
||||||
<!-- style="width: 150px"-->
|
style="width: 150px"
|
||||||
<!-- ></el-input>-->
|
></el-input>
|
||||||
<!-- </el-form-item>-->
|
</el-form-item>
|
||||||
<el-form-item style="margin-left: 20px">
|
<el-form-item style="margin-left: 20px">
|
||||||
<el-button type="primary" @click="search">搜索</el-button>
|
<el-button type="primary" @click="search">搜索</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@ -78,18 +77,14 @@
|
|||||||
@sort-change="handleSortChange"
|
@sort-change="handleSortChange"
|
||||||
>
|
>
|
||||||
<el-table-column label="数据点位" prop="dataPoint"> </el-table-column>
|
<el-table-column label="数据点位" prop="dataPoint"> </el-table-column>
|
||||||
|
<el-table-column label="数据点位名称" prop="pointName"></el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
label="数据点位名称"
|
label="modbus地址"
|
||||||
prop="dataPointName"
|
>
|
||||||
></el-table-column>
|
<template slot-scope="scope">
|
||||||
<!-- <el-table-column label="modbus地址">-->
|
<span>{{`${scope.row.ipAddress || ''} ${scope.row.ipPort || ''}`}}</span>
|
||||||
<!-- <template slot-scope="scope">-->
|
</template>
|
||||||
<!-- <span>{{-->
|
</el-table-column>
|
||||||
<!-- `${scope.row.ipAddress || ""} ${scope.row.ipPort || ""}`-->
|
|
||||||
<!-- }}</span>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- </el-table-column>
|
|
||||||
<el-table-column label="寄存器地址" prop="寄存器地址"></el-table-column>-->
|
|
||||||
<el-table-column
|
<el-table-column
|
||||||
label="最新值"
|
label="最新值"
|
||||||
prop="pointValue"
|
prop="pointValue"
|
||||||
@ -97,18 +92,19 @@
|
|||||||
sortable="custom"
|
sortable="custom"
|
||||||
>
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span class="pointer" @click="showChart(scope.row)">{{
|
<span
|
||||||
scope.row.pointValue
|
class="pointer"
|
||||||
}}</span>
|
@click="
|
||||||
|
showChart(
|
||||||
|
scope.row
|
||||||
|
)
|
||||||
|
"
|
||||||
|
>{{ scope.row.pointValue }}</span
|
||||||
|
>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="单位" prop="dataUnit"></el-table-column>
|
<el-table-column label="单位" prop="dataUnit"></el-table-column>
|
||||||
<el-table-column
|
<el-table-column label="更新时间" min-width="160px" prop="updateTime" sortable="custom">
|
||||||
label="更新时间"
|
|
||||||
min-width="160px"
|
|
||||||
prop="updateTime"
|
|
||||||
sortable="custom"
|
|
||||||
>
|
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
@ -141,12 +137,11 @@ export default {
|
|||||||
if (!val) {
|
if (!val) {
|
||||||
this.tableData = [];
|
this.tableData = [];
|
||||||
this.deviceId = "";
|
this.deviceId = "";
|
||||||
this.parentId = "";
|
this.parentId='';
|
||||||
this.siteId = "";
|
this.siteId = "";
|
||||||
this.pageSize = 10;
|
this.pageSize = 10;
|
||||||
this.pageNum = 1;
|
this.pageNum = 1;
|
||||||
this.totalSize = 0;
|
this.totalSize = 0;
|
||||||
this.dataType = '';
|
|
||||||
this.form = {
|
this.form = {
|
||||||
sortMethod: "desc", //升序不传或者asc、降序desc)
|
sortMethod: "desc", //升序不传或者asc、降序desc)
|
||||||
sortData:this.defaultSort.prop,
|
sortData:this.defaultSort.prop,
|
||||||
@ -154,8 +149,8 @@ export default {
|
|||||||
dataPoint: "", //点位名称
|
dataPoint: "", //点位名称
|
||||||
lower: "", //
|
lower: "", //
|
||||||
upper: "", //
|
upper: "", //
|
||||||
// ipAddress: "",
|
ipAddress:'',
|
||||||
// ipPort: "",
|
ipPort:''
|
||||||
};
|
};
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
}
|
}
|
||||||
@ -163,8 +158,8 @@ export default {
|
|||||||
},
|
},
|
||||||
computed:{
|
computed:{
|
||||||
isDtdc(){
|
isDtdc(){
|
||||||
return this.deviceCategory === "BATTERY";
|
return this.deviceCategory === 'BATTERY'
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -172,7 +167,6 @@ export default {
|
|||||||
defaultSort: { prop: "updateTime", order: "descending" },
|
defaultSort: { prop: "updateTime", order: "descending" },
|
||||||
show: false,
|
show: false,
|
||||||
loading: false,
|
loading: false,
|
||||||
dataType: '',//展示的数据类型 point点位/alarmPoint报警点位
|
|
||||||
form: {
|
form: {
|
||||||
sortData: "updateTime", //最新值升序不传或者asc、降序desc)
|
sortData: "updateTime", //最新值升序不传或者asc、降序desc)
|
||||||
sortMethod: "desc", //升序不传或者asc、降序desc)
|
sortMethod: "desc", //升序不传或者asc、降序desc)
|
||||||
@ -180,12 +174,12 @@ export default {
|
|||||||
dataPoint: "", //点位名称
|
dataPoint: "", //点位名称
|
||||||
lower: "", //
|
lower: "", //
|
||||||
upper: "", //
|
upper: "", //
|
||||||
// ipAddress: "",
|
ipAddress:'',
|
||||||
// ipPort: "",
|
ipPort:''
|
||||||
},
|
},
|
||||||
deviceCategory: "",
|
deviceCategory: "",
|
||||||
deviceId: "",
|
deviceId: "",
|
||||||
parentId: "",
|
parentId:'',
|
||||||
siteId: "",
|
siteId: "",
|
||||||
tableData: [],
|
tableData: [],
|
||||||
pageSize: 10, //分页栏当前每个数据总数
|
pageSize: 10, //分页栏当前每个数据总数
|
||||||
@ -196,55 +190,31 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
showChart({pointName}) {
|
showChart({pointName}) {
|
||||||
if(pointName){
|
if(pointName){
|
||||||
const {deviceCategory, deviceId} = this;
|
const {deviceCategory,deviceId}=this
|
||||||
if (this.isDtdc)
|
if(this.isDtdc) this.$refs.pointChart.showChart({ pointName, deviceCategory, deviceId:this.parentId,child:[deviceId] });
|
||||||
this.$refs.pointChart.showChart({
|
else this.$refs.pointChart.showChart({ pointName, deviceCategory, deviceId });
|
||||||
pointName,
|
|
||||||
deviceCategory,
|
|
||||||
deviceId: this.parentId,
|
|
||||||
child: [deviceId],
|
|
||||||
});
|
|
||||||
else
|
|
||||||
this.$refs.pointChart.showChart({
|
|
||||||
pointName,
|
|
||||||
deviceCategory,
|
|
||||||
deviceId,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleSortChange(column) {
|
handleSortChange(column) {
|
||||||
this.form.sortData = column.prop;
|
this.form.sortData = column.prop
|
||||||
this.form.sortMethod = column.order === "descending" ? "desc" : "asc";
|
this.form.sortMethod = column.order === "descending" ? "desc" : "asc";
|
||||||
console.log("切换排序方式", column, this.form);
|
console.log("切换排序方式", column, this.form);
|
||||||
this.getData()
|
this.getData();
|
||||||
},
|
},
|
||||||
search() {
|
search() {
|
||||||
this.pageNum = 1;
|
this.pageNum = 1;
|
||||||
this.getData()
|
this.getData();
|
||||||
},
|
},
|
||||||
// 分页
|
showTable({ deviceCategory, siteId, deviceId ,parentId=''}) {
|
||||||
handleSizeChange(val) {
|
|
||||||
this.pageSize = val;
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.getData()
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handleCurrentChange(val) {
|
|
||||||
this.pageNum = val;
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.getData()
|
|
||||||
});
|
|
||||||
},
|
|
||||||
showTable({deviceCategory, siteId, deviceId, parentId = ""}, dataType) {
|
|
||||||
this.dataType = dataType;
|
|
||||||
this.deviceCategory = deviceCategory;
|
this.deviceCategory = deviceCategory;
|
||||||
this.siteId = siteId;
|
this.siteId = siteId;
|
||||||
this.deviceId = deviceId;
|
this.deviceId = deviceId;
|
||||||
this.parentId = deviceCategory === "BATTERY" ? parentId : ""; //只有单体电池需要这个值
|
this.parentId=deviceCategory === 'BATTERY' ? parentId : ''//只有单体电池需要这个值
|
||||||
this.show = true;
|
this.show = true;
|
||||||
this.getData()
|
this.getData();
|
||||||
},
|
},
|
||||||
getData() {
|
getData() {
|
||||||
|
this.loading = true;
|
||||||
const {
|
const {
|
||||||
siteId,
|
siteId,
|
||||||
deviceId,
|
deviceId,
|
||||||
@ -259,11 +229,11 @@ export default {
|
|||||||
dataPoint,
|
dataPoint,
|
||||||
lower,
|
lower,
|
||||||
upper,
|
upper,
|
||||||
// ipAddress,
|
ipAddress,
|
||||||
// ipPort,
|
ipPort
|
||||||
},
|
},
|
||||||
} = this;
|
} = this;
|
||||||
const params = {
|
getDevicePointList({
|
||||||
siteId,
|
siteId,
|
||||||
deviceId,
|
deviceId,
|
||||||
deviceCategory,
|
deviceCategory,
|
||||||
@ -276,12 +246,9 @@ export default {
|
|||||||
dataPoint,
|
dataPoint,
|
||||||
lower,
|
lower,
|
||||||
upper,
|
upper,
|
||||||
// ipAddress: '',
|
ipAddress,
|
||||||
// ipPort: '',
|
ipPort
|
||||||
}
|
})
|
||||||
params.isAlarm = this.dataType === 'point' ? 0 : 1
|
|
||||||
this.loading = true;
|
|
||||||
getDevicePointList(params)
|
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
this.tableData = response?.rows || [];
|
this.tableData = response?.rows || [];
|
||||||
this.totalSize = response?.total || 0;
|
this.totalSize = response?.total || 0;
|
||||||
@ -290,6 +257,19 @@ export default {
|
|||||||
this.loading = false;
|
this.loading = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
// 分页
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.pageSize = val;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getData();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.pageNum = val;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getData();
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,10 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog :visible.sync="show" class="ems-dialog" title="点位上传" width="400px" append-to-body
|
<el-dialog :visible.sync="show" class="ems-dialog" title="点位上传" width="400px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
|
||||||
:close-on-click-modal="false" :close-on-press-escape="false">
|
|
||||||
<!-- <file-upload :fileType='["xls", "xlsx"]' value="String" :limit="1" :drag="false" @input="updateFile"/>-->
|
<!-- <file-upload :fileType='["xls", "xlsx"]' value="String" :limit="1" :drag="false" @input="updateFile"/>-->
|
||||||
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url"
|
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
|
||||||
:data="upload.data" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
|
|
||||||
:on-success="handleFileSuccess" :auto-upload="false" drag>
|
|
||||||
<i class="el-icon-upload"></i>
|
<i class="el-icon-upload"></i>
|
||||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
||||||
<div class="el-upload__tip text-center" slot="tip">
|
<div class="el-upload__tip text-center" slot="tip">
|
||||||
@ -24,32 +21,28 @@
|
|||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
import { getToken } from "@/utils/auth"
|
import { getToken } from "@/utils/auth"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
show:false,
|
show:false,
|
||||||
// 用户导入参数
|
// 用户导入参数
|
||||||
upload: {
|
upload: {
|
||||||
data: {},
|
|
||||||
// 是否禁用上传
|
// 是否禁用上传
|
||||||
isUploading: false,
|
isUploading: false,
|
||||||
// 设置上传的请求头部
|
// 设置上传的请求头部
|
||||||
headers: { Authorization: "Bearer " + getToken() },
|
headers: { Authorization: "Bearer " + getToken() },
|
||||||
// 上传的地址
|
// 上传的地址
|
||||||
url: process.env.VUE_APP_BASE_API + "/ems/pointMatch/importDataByDevice"
|
url: process.env.VUE_APP_BASE_API + "/ems/pointMatch/importData"
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
showDialog({siteId, deviceCategory, deviceId}) {
|
showDialog(){
|
||||||
this.upload.data = {siteId, deviceCategory, deviceId}
|
|
||||||
this.show = true;
|
this.show = true;
|
||||||
},
|
},
|
||||||
//关闭弹窗 重置数据
|
//关闭弹窗 重置数据
|
||||||
handleClosed(){
|
handleClosed(){
|
||||||
this.$refs.upload.clearFiles()//写在before-closed无效
|
this.$refs.upload.clearFiles()//写在before-closed无效
|
||||||
this.upload.data = {}
|
|
||||||
this.show=false
|
this.show=false
|
||||||
},
|
},
|
||||||
// updateFile(data){
|
// updateFile(data){
|
||||||
@ -58,12 +51,12 @@ export default {
|
|||||||
// saveDialog(){
|
// saveDialog(){
|
||||||
// this.show=true
|
// this.show=true
|
||||||
// },
|
// },
|
||||||
// 文件上传中处理 返回参数event, file, fileList
|
// 文件上传中处理
|
||||||
handleFileUploadProgress() {
|
handleFileUploadProgress(event, file, fileList) {
|
||||||
this.upload.isUploading = true
|
this.upload.isUploading = true
|
||||||
},
|
},
|
||||||
// 文件上传成功处理 返回参数response, file, fileList
|
// 文件上传成功处理
|
||||||
handleFileSuccess(response) {
|
handleFileSuccess(response, file, fileList) {
|
||||||
console.log('上传文件结果',response)
|
console.log('上传文件结果',response)
|
||||||
this.upload.isUploading = false
|
this.upload.isUploading = false
|
||||||
if(response.code === 500 && !response.msg) response.msg = '上传失败'
|
if(response.code === 500 && !response.msg) response.msg = '上传失败'
|
||||||
|
|||||||
@ -1,21 +1,10 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
|
<div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
|
||||||
<el-form :inline="true" class="select-container">
|
<el-form :inline="true" class="select-container">
|
||||||
<el-form-item label="站点选择">
|
<el-form-item label="站点选择">
|
||||||
<el-select v-model="siteId" placeholder="请选择换电站名称" :loading="searchLoading" loading-text="正在加载数据"
|
<el-select v-model="siteId" placeholder="请选择换电站名称" :loading="searchLoading" loading-text="正在加载数据" @change="onSearch" clearable>
|
||||||
@change="onSearch" clearable>
|
<el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
|
||||||
<el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList"
|
|
||||||
:key="index+'zdxeSelect'"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="设备类型">
|
|
||||||
<el-select v-model="deviceCategory" placeholder="请选择设备类型" @change="onSearch" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="(item,index) in deviceCategoryList"
|
|
||||||
:key="index+'deviceCategorySelect'"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item.code">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
@ -24,34 +13,12 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<el-button type="primary" @click="addDevice" native-type="button">新增设备</el-button>
|
<el-button type="primary" @click="addDevice" native-type="button">新增设备</el-button>
|
||||||
<el-dropdown @command="(val)=>downloadPointDetail(val,false)">
|
|
||||||
<el-button
|
<el-button
|
||||||
style="margin-left:10px;"
|
@click="uploadPointDetail"
|
||||||
type="primary"
|
type="success"
|
||||||
plain>
|
plain>
|
||||||
下载点位清单
|
上传点位清单
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-dropdown-menu slot="dropdown">
|
|
||||||
<el-dropdown-item v-for="(item,index) in deviceCategoryList" :key="index+'deviceCategoryList'"
|
|
||||||
:command="item">
|
|
||||||
{{ item.name }}
|
|
||||||
</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</el-dropdown>
|
|
||||||
<!-- <el-dropdown @command="(val)=>uploadPointDetail(val,false)">-->
|
|
||||||
<!-- <el-button-->
|
|
||||||
<!-- style="margin-left:10px;"-->
|
|
||||||
<!-- type="success"-->
|
|
||||||
<!-- plain>-->
|
|
||||||
<!-- 上传点位清单-->
|
|
||||||
<!-- </el-button>-->
|
|
||||||
<!-- <el-dropdown-menu slot="dropdown">-->
|
|
||||||
<!-- <el-dropdown-item v-for="(item,index) in deviceCategoryList" :key="index+'deviceCategoryList'"-->
|
|
||||||
<!-- :command="item">-->
|
|
||||||
<!-- {{ item.name }}-->
|
|
||||||
<!-- </el-dropdown-item>-->
|
|
||||||
<!-- </el-dropdown-menu>-->
|
|
||||||
<!-- </el-dropdown>-->
|
|
||||||
<el-table
|
<el-table
|
||||||
class="common-table"
|
class="common-table"
|
||||||
:data="tableData"
|
:data="tableData"
|
||||||
@ -80,14 +47,10 @@
|
|||||||
label="设备类别">
|
label="设备类别">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="deviceStatus"
|
prop="runningStatus"
|
||||||
label="在线状态">
|
label="在线状态">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span>{{ $store.state.ems.deviceStatusOptions[scope.row.deviceStatus] }}</span>
|
<span>{{$store.state.ems.deviceStatusOptions[scope.row.runningStatus]}}</span>
|
||||||
<!-- <pcs-switch v-if="scope.row.deviceCategory === 'PCS' && ![null,'',undefined].includes(scope.row.deviceStatus)"-->
|
|
||||||
<!-- style="margin-left:5px;"-->
|
|
||||||
<!-- :data="{siteId:scope.row.siteId,deviceStatus:scope.row.deviceStatus,deviceId:scope.row.deviceId,deviceName:scope.row.deviceName}"-->
|
|
||||||
<!-- @updateSuccess="getData"/>-->
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
@ -96,34 +59,18 @@
|
|||||||
width="250">
|
width="250">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-button
|
<el-button
|
||||||
@click="pointDetail(scope.row,'point')"
|
@click="pointDetail(scope.row)"
|
||||||
type="primary"
|
type="primary"
|
||||||
size="mini">
|
size="mini">
|
||||||
点位清单
|
点位清单
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
@click="pointDetail(scope.row,'alarmPoint')"
|
@click="downloadPointDetail(scope.row)"
|
||||||
type="primary"
|
|
||||||
size="mini">
|
|
||||||
报警点位清单
|
|
||||||
</el-button>
|
|
||||||
<br>
|
|
||||||
<el-button
|
|
||||||
@click="downloadPointDetail(scope.row,true)"
|
|
||||||
style="margin-top:10px;"
|
|
||||||
type="primary"
|
type="primary"
|
||||||
plain
|
plain
|
||||||
size="mini">
|
size="mini">
|
||||||
下载点位清单
|
下载点位清单
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
|
||||||
@click="uploadPointDetail(scope.row,true)"
|
|
||||||
style="margin-top:10px;"
|
|
||||||
type="success"
|
|
||||||
plain
|
|
||||||
size="mini">
|
|
||||||
上传点位清单
|
|
||||||
</el-button>
|
|
||||||
<br>
|
<br>
|
||||||
<el-button
|
<el-button
|
||||||
@click="editDevice(scope.row)"
|
@click="editDevice(scope.row)"
|
||||||
@ -155,14 +102,10 @@
|
|||||||
style="margin-top:15px;text-align: center"
|
style="margin-top:15px;text-align: center"
|
||||||
>
|
>
|
||||||
</el-pagination>
|
</el-pagination>
|
||||||
<el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" title="详细信息" :close-on-click-modal="false"
|
<el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" title=" 详细信息" :close-on-click-modal="false" :before-close="handleClosed">
|
||||||
:before-close="handleClosed">
|
|
||||||
<div class="descriptions-main" style="padding: 0" >
|
<div class="descriptions-main" style="padding: 0" >
|
||||||
<el-descriptions direction="vertical" :column="2" :colon="false" border>
|
<el-descriptions direction="vertical" :column="2" :colon="false" border>
|
||||||
<el-descriptions-item v-for="(item,index) in detailData" :key="index+'descriptions'"
|
<el-descriptions-item v-for="(item,index) in detailData" :key="index+'descriptions'" labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" :label="item.label">{{item.value}}</el-descriptions-item>
|
||||||
labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1"
|
|
||||||
:label="item.label">{{ item.value }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
</el-descriptions>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
@ -173,15 +116,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {deleteService, getDeviceDetailInfo, getDeviceInfoList} from '@/api/ems/site'
|
import {getDeviceInfoList,getDeviceDetailInfo,deleteService,exportPointList,importPointList} from'@/api/ems/site'
|
||||||
import {getAllSites} from '@/api/ems/zddt'
|
import {getAllSites} from '@/api/ems/zddt'
|
||||||
import {formatNumber} from "@/filters/ems";
|
import {formatNumber} from "@/filters/ems";
|
||||||
import {getAllDeviceCategory} from '@/api/ems/search'
|
|
||||||
import PointTable from './PointTable.vue'
|
import PointTable from './PointTable.vue'
|
||||||
import AddDevice from "./AddDevice.vue";
|
import AddDevice from "./AddDevice.vue";
|
||||||
import PointUpload from "./PointUpload.vue";
|
import PointUpload from "./PointUpload.vue";
|
||||||
// import PcsSwitch from "./PcsSwitch.vue";
|
import {download} from "@/utils/request";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Sblb",
|
name: "Sblb",
|
||||||
components:{AddDevice,PointTable,PointUpload},
|
components:{AddDevice,PointTable,PointUpload},
|
||||||
@ -193,8 +134,6 @@ export default {
|
|||||||
editDeviceId:'',//编辑设备id
|
editDeviceId:'',//编辑设备id
|
||||||
siteId:'',
|
siteId:'',
|
||||||
siteList:[],
|
siteList:[],
|
||||||
deviceCategory: '',//搜索栏设备类型
|
|
||||||
deviceCategoryList: [],//设备类别
|
|
||||||
tableData:[],
|
tableData:[],
|
||||||
pageSize:10,//分页栏当前每个数据总数
|
pageSize:10,//分页栏当前每个数据总数
|
||||||
pageNum:1,//分页栏当前页数
|
pageNum:1,//分页栏当前页数
|
||||||
@ -224,37 +163,20 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
// 获取设备类别
|
|
||||||
getDeviceCategoryList() {
|
|
||||||
getAllDeviceCategory().then(response => {
|
|
||||||
this.deviceCategoryList = response?.data || []
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 查看设备电位表格
|
// 查看设备电位表格
|
||||||
pointDetail(row, dataType) {
|
pointDetail(row){
|
||||||
this.$refs.pointTable.showTable(row, dataType)
|
this.$refs.pointTable.showTable(row)
|
||||||
},
|
},
|
||||||
// 下载点位清单
|
// 下载点位清单
|
||||||
downloadPointDetail(command, isDetail = false) {
|
downloadPointDetail({siteId,deviceCategory,deviceName}){
|
||||||
const siteId = isDetail ? command.siteId : this.siteId
|
|
||||||
const deviceCategory = isDetail ? command.deviceCategory : command.code
|
|
||||||
const categoryName = isDetail ? command.categoryName : command.name
|
|
||||||
const deviceId = isDetail ? command.deviceId : null
|
|
||||||
console.log('下载', command, isDetail)
|
|
||||||
this.download('ems/pointMatch/export', {
|
this.download('ems/pointMatch/export', {
|
||||||
siteId,
|
siteId,
|
||||||
deviceCategory,
|
deviceCategory
|
||||||
deviceId,
|
}, `点位清单_${deviceName}_${new Date().getTime()}.xlsx`)
|
||||||
}, `点位清单_${categoryName}_${new Date().getTime()}.xlsx`)
|
|
||||||
},
|
},
|
||||||
// 上传点位清单
|
// 上传点位清单
|
||||||
uploadPointDetail(command, isDetail = false) {
|
uploadPointDetail(){
|
||||||
const siteId = isDetail ? command.siteId : this.siteId
|
this.$refs.pointUpload.showDialog()
|
||||||
const deviceCategory = isDetail ? command.deviceCategory : command.code
|
|
||||||
const categoryName = isDetail ? command.categoryName : command.name
|
|
||||||
const deviceId = isDetail ? command.deviceId : ''
|
|
||||||
console.log('上传', command, isDetail)
|
|
||||||
this.$refs.pointUpload.showDialog({siteId, deviceCategory, categoryName, deviceId})
|
|
||||||
},
|
},
|
||||||
clearEditDeviceData(){
|
clearEditDeviceData(){
|
||||||
this.mode = '';
|
this.mode = '';
|
||||||
@ -304,9 +226,7 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleClosed(done){
|
handleClosed(done){
|
||||||
this.detailData.forEach((item) => {
|
this.detailData.forEach((item)=>{item.value = ''})
|
||||||
item.value = ''
|
|
||||||
})
|
|
||||||
done()
|
done()
|
||||||
},
|
},
|
||||||
toDetail(id){
|
toDetail(id){
|
||||||
@ -322,9 +242,7 @@ export default {
|
|||||||
|
|
||||||
})
|
})
|
||||||
this.dialogTableVisible = true
|
this.dialogTableVisible = true
|
||||||
}).finally(() => {
|
}).finally(() => {this.loading = false})
|
||||||
this.loading = false
|
|
||||||
})
|
|
||||||
|
|
||||||
},
|
},
|
||||||
// 分页
|
// 分页
|
||||||
@ -354,13 +272,11 @@ export default {
|
|||||||
// 获取数据
|
// 获取数据
|
||||||
getData(){
|
getData(){
|
||||||
this.loading=true
|
this.loading=true
|
||||||
const {siteId, deviceCategory, pageNum, pageSize} = this
|
const {siteId,pageNum,pageSize} =this
|
||||||
getDeviceInfoList({siteId, deviceCategory, pageNum, pageSize}).then(response => {
|
getDeviceInfoList({siteId,pageNum,pageSize}).then(response => {
|
||||||
this.tableData=response?.rows || [];
|
this.tableData=response?.rows || [];
|
||||||
this.totalSize = response?.total || 0
|
this.totalSize = response?.total || 0
|
||||||
}).finally(() => {
|
}).finally(() => {this.loading=false})
|
||||||
this.loading = false
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
//获取站点列表
|
//获取站点列表
|
||||||
getZdList(){
|
getZdList(){
|
||||||
@ -368,16 +284,13 @@ export default {
|
|||||||
return getAllSites().then(response => {
|
return getAllSites().then(response => {
|
||||||
this.siteList = response?.data || []
|
this.siteList = response?.data || []
|
||||||
if(this.siteList.length>0) this.siteId = this.siteList[0].siteId
|
if(this.siteList.length>0) this.siteId = this.siteList[0].siteId
|
||||||
}).finally(() => {
|
}).finally(() => {this.searchLoading=false})
|
||||||
this.searchLoading = false
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.loading=true
|
this.loading=true
|
||||||
this.siteId=''
|
this.siteId=''
|
||||||
this.pageNum =1//每次搜索从1开始搜索
|
this.pageNum =1//每次搜索从1开始搜索
|
||||||
this.getDeviceCategoryList()
|
|
||||||
this.getZdList().then(()=>{
|
this.getZdList().then(()=>{
|
||||||
this.getData()
|
this.getData()
|
||||||
})
|
})
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 11 MiB |
@ -1,418 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="big-screen-container">
|
|
||||||
<!-- 背景容器 -->
|
|
||||||
<div class="bg-wrapper">
|
|
||||||
<!-- 右侧功率曲线图表 -->
|
|
||||||
<div class="chart-box power-chart">
|
|
||||||
<div ref="powerChart" class="chart-content"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 底部中间电力需求曲线图表(width:980px, bottom:26px) -->
|
|
||||||
<div class="chart-box demand-chart">
|
|
||||||
<div ref="demandChart" class="chart-content"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts'
|
|
||||||
import { getPointData } from '@/api/ems/dzjk'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'PowerCurveScreen',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
powerChartInstance: null, // 功率曲线实例
|
|
||||||
demandChartInstance: null, // 电力需求曲线实例
|
|
||||||
timer: null,
|
|
||||||
siteId: '021_DDS_01',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.initPowerChart() // 初始化功率曲线
|
|
||||||
this.initDemandChart() // 初始化电力需求曲线
|
|
||||||
|
|
||||||
// Initial fetch
|
|
||||||
this.fetchData()
|
|
||||||
// Polling every 5 seconds
|
|
||||||
this.timer = setInterval(() => {
|
|
||||||
this.fetchData()
|
|
||||||
}, 5000)
|
|
||||||
|
|
||||||
window.addEventListener('resize', this.resizeAllCharts)
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (this.timer) {
|
|
||||||
clearInterval(this.timer)
|
|
||||||
this.timer = null
|
|
||||||
}
|
|
||||||
// 销毁两个图表实例
|
|
||||||
if (this.powerChartInstance) {
|
|
||||||
this.powerChartInstance.dispose()
|
|
||||||
this.powerChartInstance = null
|
|
||||||
}
|
|
||||||
if (this.demandChartInstance) {
|
|
||||||
this.demandChartInstance.dispose()
|
|
||||||
this.demandChartInstance = null
|
|
||||||
}
|
|
||||||
window.removeEventListener('resize', this.resizeAllCharts)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getTodayDate() {
|
|
||||||
const now = new Date()
|
|
||||||
const year = now.getFullYear()
|
|
||||||
const month = String(now.getMonth() + 1).padStart(2, '0')
|
|
||||||
const day = String(now.getDate()).padStart(2, '0')
|
|
||||||
return `${year}-${month}-${day}`
|
|
||||||
},
|
|
||||||
fetchData() {
|
|
||||||
const today = this.getTodayDate()
|
|
||||||
getPointData({
|
|
||||||
siteId: this.siteId,
|
|
||||||
startDate: today,
|
|
||||||
endDate: today
|
|
||||||
}).then(response => {
|
|
||||||
if (response.code === 200 && response.data) {
|
|
||||||
this.updateCharts(response.data)
|
|
||||||
}
|
|
||||||
}).catch(error => {
|
|
||||||
console.error('Failed to fetch point data:', error)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
updateCharts(data) {
|
|
||||||
if (!data || !Array.isArray(data)) return
|
|
||||||
const source = [['日期', '电网功率', '负载功率', '储能功率', '光伏功率']];
|
|
||||||
const demandSource = [['日期', '电网功率', '负载功率']]
|
|
||||||
|
|
||||||
data.forEach(item => {
|
|
||||||
source.push([
|
|
||||||
item.statisDate,
|
|
||||||
item.gridPower,
|
|
||||||
item.loadPower,
|
|
||||||
item.storagePower,
|
|
||||||
item.pvPower
|
|
||||||
]);
|
|
||||||
demandSource.push([
|
|
||||||
item.statisDate,
|
|
||||||
item.gridPower, // Mapping Grid Power to Plan Demand (or just as 2nd series)
|
|
||||||
item.loadPower, // Mapping Load Power to Actual Demand
|
|
||||||
])
|
|
||||||
})
|
|
||||||
|
|
||||||
if (this.powerChartInstance) {
|
|
||||||
this.powerChartInstance.setOption({
|
|
||||||
dataset: {
|
|
||||||
source: source
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.demandChartInstance) {
|
|
||||||
this.demandChartInstance.setOption({
|
|
||||||
dataset: {
|
|
||||||
source: demandSource
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 初始化右侧功率曲线
|
|
||||||
initPowerChart() {
|
|
||||||
this.powerChartInstance = echarts.init(this.$refs.powerChart)
|
|
||||||
|
|
||||||
const option = {
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
confine: true,
|
|
||||||
backgroundColor: 'rgba(0, 30, 60, 0.9)',
|
|
||||||
borderColor: '#00ccff',
|
|
||||||
textStyle: { color: '#fff' },
|
|
||||||
axisPointer: {
|
|
||||||
type: 'line',
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgba(0, 204, 255, 0.5)',
|
|
||||||
type: 'dashed'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
textStyle: { color: '#00ccff', fontSize: 10 },
|
|
||||||
bottom: 0,
|
|
||||||
left: 'center',
|
|
||||||
itemWidth: 9,
|
|
||||||
itemHeight: 9,
|
|
||||||
itemGap: 8,
|
|
||||||
padding: [0, 0, 0, 0]
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '2%',
|
|
||||||
right: '2%',
|
|
||||||
top: '15%',
|
|
||||||
bottom: '12%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
dataset: {
|
|
||||||
source: [] // Initial empty source
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
axisLabel: {
|
|
||||||
color: '#00ccff',
|
|
||||||
fontSize: 10,
|
|
||||||
rotate: 0, // 取消旋转,因为标签较少
|
|
||||||
margin: 10,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: { color: '#006699', width: 1.5 }
|
|
||||||
},
|
|
||||||
splitLine: { show: false },
|
|
||||||
axisTick: { show: true }
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
min: 0, // Remove fixed min/max to let it auto-scale
|
|
||||||
max: 350,
|
|
||||||
interval: 50,
|
|
||||||
axisLabel: {
|
|
||||||
color: '#00ccff',
|
|
||||||
fontSize: 12,
|
|
||||||
margin: 10,
|
|
||||||
fontWeight: 'bold'
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false,
|
|
||||||
lineStyle: { color: '#006699', width: 1.5 }
|
|
||||||
},
|
|
||||||
splitLine: { lineStyle: { color: 'rgba(0, 100, 150, 0.2)' } },
|
|
||||||
axisTick: { show: false }
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
// name: '电网功率', // Removed, auto-matched from dataset header
|
|
||||||
type: 'line',
|
|
||||||
// data: [], // Removed
|
|
||||||
smooth: true,
|
|
||||||
symbol: 'none',
|
|
||||||
lineStyle: { color: '#0099ff', width: 2 },
|
|
||||||
areaStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: 'rgba(0, 153, 255, 0.4)' },
|
|
||||||
{ offset: 1, color: 'rgba(0, 153, 255, 0.05)' }
|
|
||||||
])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// name: '负载功率',
|
|
||||||
type: 'line',
|
|
||||||
// data: [],
|
|
||||||
smooth: true,
|
|
||||||
symbol: 'none',
|
|
||||||
lineStyle: { color: '#00cc66', width: 2 },
|
|
||||||
areaStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: 'rgba(0, 204, 102, 0.4)' },
|
|
||||||
{ offset: 1, color: 'rgba(0, 204, 102, 0.05)' }
|
|
||||||
])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// name: '储能功率',
|
|
||||||
type: 'line',
|
|
||||||
// data: [],
|
|
||||||
smooth: true,
|
|
||||||
symbol: 'none',
|
|
||||||
lineStyle: { color: '#ffcc00', width: 2 },
|
|
||||||
areaStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: 'rgba(255, 204, 0, 0.4)' },
|
|
||||||
{ offset: 1, color: 'rgba(255, 204, 0, 0.05)' }
|
|
||||||
])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// name: '光伏功率',
|
|
||||||
type: 'line',
|
|
||||||
// data: [],
|
|
||||||
smooth: true,
|
|
||||||
symbol: 'none',
|
|
||||||
lineStyle: { color: '#ff3333', width: 2 },
|
|
||||||
areaStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: 'rgba(255, 51, 51, 0.4)' },
|
|
||||||
{ offset: 1, color: 'rgba(255, 51, 51, 0.05)' }
|
|
||||||
])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
this.powerChartInstance.setOption(option)
|
|
||||||
},
|
|
||||||
|
|
||||||
// 初始化底部中间电力需求曲线(适配980px宽度+130px高度+bottom:26px,两条曲线区分配色)
|
|
||||||
initDemandChart() {
|
|
||||||
this.demandChartInstance = echarts.init(this.$refs.demandChart)
|
|
||||||
|
|
||||||
const option = {
|
|
||||||
backgroundColor: 'transparent', // 透明背景
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
backgroundColor: 'rgba(0, 30, 60, 0.9)',
|
|
||||||
borderColor: '#00ccff', // 匹配图片主色
|
|
||||||
textStyle: { color: '#fff' },
|
|
||||||
axisPointer: { type: 'shadow' },
|
|
||||||
confine: true,
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '2%',
|
|
||||||
right: '2%',
|
|
||||||
top: '5%',
|
|
||||||
bottom: '8%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
dataset: {
|
|
||||||
source: [] // Initial empty
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
// data: [], // Handled by dataset
|
|
||||||
axisLabel: {
|
|
||||||
color: '#00ccff', // 匹配图片主色
|
|
||||||
fontSize: 10,
|
|
||||||
margin: 10,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: { color: '#006699', width: 1.5 }
|
|
||||||
},
|
|
||||||
splitLine: { show: false },
|
|
||||||
axisTick: { show: true }
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
min: 0,
|
|
||||||
max: 300,
|
|
||||||
interval: 50,
|
|
||||||
axisLabel: {
|
|
||||||
color: '#00ccff', // 匹配图片主色
|
|
||||||
fontSize: 12,
|
|
||||||
margin: 10,
|
|
||||||
fontWeight: 'bold'
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false,
|
|
||||||
// lineStyle: { color: '#006699', width: 1.5 }
|
|
||||||
},
|
|
||||||
splitLine: { lineStyle: { color: 'rgba(0, 100, 150, 0.2)' } },
|
|
||||||
axisTick: { show: false }
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'line',
|
|
||||||
// data: [],
|
|
||||||
smooth: true, // 平滑曲线
|
|
||||||
symbol: 'none', // 无数据点
|
|
||||||
// lineStyle: { color: '#00F2FF', width: 2.5 }, // 匹配图片主题色
|
|
||||||
// areaStyle: {
|
|
||||||
// // 匹配图片的线性渐变:#00F2FF 从100%不透明到0%不透明
|
|
||||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
// { offset: 0, color: 'rgba(0, 242, 255, 1)' }, // 0%位置:#00F2FF 100%不透明
|
|
||||||
// { offset: 1, color: 'rgba(0, 242, 255, 0)' } // 100%位置:#00F2FF 0%不透明
|
|
||||||
// ])
|
|
||||||
// }
|
|
||||||
lineStyle: { color: '#0099ff', width: 2 },
|
|
||||||
areaStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: 'rgba(0, 153, 255, 0.4)' },
|
|
||||||
{ offset: 1, color: 'rgba(0, 153, 255, 0.05)' }
|
|
||||||
])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// name: '负载功率',
|
|
||||||
type: 'line',
|
|
||||||
// data: [],
|
|
||||||
smooth: true,
|
|
||||||
symbol: 'none',
|
|
||||||
lineStyle: { color: '#00cc66', width: 2 },
|
|
||||||
areaStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: 'rgba(0, 204, 102, 0.4)' },
|
|
||||||
{ offset: 1, color: 'rgba(0, 204, 102, 0.05)' }
|
|
||||||
])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
this.demandChartInstance.setOption(option)
|
|
||||||
},
|
|
||||||
|
|
||||||
// 统一处理窗口缩放(适配两个图表)
|
|
||||||
resizeAllCharts() {
|
|
||||||
if (this.powerChartInstance) this.powerChartInstance.resize()
|
|
||||||
if (this.demandChartInstance) this.demandChartInstance.resize()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/* 大屏容器:固定1920x1080尺寸 */
|
|
||||||
.big-screen-container {
|
|
||||||
width: 1920px;
|
|
||||||
height: 1080px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 背景容器:相对路径 ./background.png */
|
|
||||||
.bg-wrapper {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image: url("./background.png");
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 通用图表容器样式 */
|
|
||||||
.chart-box {
|
|
||||||
background-color: transparent;
|
|
||||||
padding: 0;
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
border-radius: 0;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 右侧功率曲线图表定位+尺寸 */
|
|
||||||
.power-chart {
|
|
||||||
position: absolute;
|
|
||||||
top: 143px;
|
|
||||||
right: 40px;
|
|
||||||
width: 380px;
|
|
||||||
height: 270px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 底部中间电力需求曲线图表(核心修改:width:980px, bottom:26px, height:130px) */
|
|
||||||
.demand-chart {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 26px; /* 修改为26px底部间距 */
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 980px; /* 修改为980px宽度 */
|
|
||||||
height: 130px; /* 保持130px高度不变 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 图表内容区:填满容器 */
|
|
||||||
.chart-content {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -6,39 +6,30 @@
|
|||||||
<pane size="16">
|
<pane size="16">
|
||||||
<el-col>
|
<el-col>
|
||||||
<div class="head-container">
|
<div class="head-container">
|
||||||
<el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small"
|
<el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
|
||||||
prefix-icon="el-icon-search" style="margin-bottom: 20px"/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="head-container">
|
<div class="head-container">
|
||||||
<el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
|
<el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
|
||||||
:filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
|
|
||||||
@node-click="handleNodeClick"/>
|
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</pane>
|
</pane>
|
||||||
<!--用户数据-->
|
<!--用户数据-->
|
||||||
<pane size="84">
|
<pane size="84">
|
||||||
<el-col>
|
<el-col>
|
||||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||||
label-width="68px">
|
|
||||||
<el-form-item label="用户名称" prop="userName">
|
<el-form-item label="用户名称" prop="userName">
|
||||||
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px"
|
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
|
||||||
@keyup.enter.native="handleQuery"/>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="手机号码" prop="phonenumber">
|
<el-form-item label="手机号码" prop="phonenumber">
|
||||||
<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px"
|
<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
|
||||||
@keyup.enter.native="handleQuery"/>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="状态" prop="status">
|
<el-form-item label="状态" prop="status">
|
||||||
<el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
|
<el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
|
||||||
<el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
|
<el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||||
:value="dict.value"/>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="创建时间">
|
<el-form-item label="创建时间">
|
||||||
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||||
range-separator="-" start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"></el-date-picker>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||||
@ -48,29 +39,19 @@
|
|||||||
|
|
||||||
<el-row :gutter="10" class="mb8">
|
<el-row :gutter="10" class="mb8">
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
|
||||||
v-hasPermi="['system:user:add']">新增
|
|
||||||
</el-button>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
|
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>
|
||||||
v-hasPermi="['system:user:edit']">修改
|
|
||||||
</el-button>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
|
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
|
||||||
@click="handleDelete" v-hasPermi="['system:user:remove']">删除
|
|
||||||
</el-button>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport"
|
<el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>
|
||||||
v-hasPermi="['system:user:import']">导入
|
|
||||||
</el-button>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
|
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>
|
||||||
v-hasPermi="['system:user:export']">导出
|
|
||||||
</el-button>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -78,18 +59,13 @@
|
|||||||
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
|
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
|
||||||
<el-table-column type="selection" width="50" align="center" />
|
<el-table-column type="selection" width="50" align="center" />
|
||||||
<el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
|
<el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
|
||||||
<el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible"
|
<el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
|
||||||
:show-overflow-tooltip="true"/>
|
<el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
|
||||||
<el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible"
|
<el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
|
||||||
:show-overflow-tooltip="true"/>
|
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
|
||||||
<el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible"
|
|
||||||
:show-overflow-tooltip="true"/>
|
|
||||||
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber"
|
|
||||||
v-if="columns[4].visible" width="120"/>
|
|
||||||
<el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
|
<el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
|
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
|
||||||
@change="handleStatusChange(scope.row)"></el-switch>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
|
<el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
|
||||||
@ -99,30 +75,20 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
|
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
|
||||||
<template slot-scope="scope" v-if="scope.row.userId !== 1">
|
<template slot-scope="scope" v-if="scope.row.userId !== 1">
|
||||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">修改</el-button>
|
||||||
v-hasPermi="['system:user:edit']">修改
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button>
|
||||||
</el-button>
|
<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
|
||||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
|
||||||
v-hasPermi="['system:user:remove']">删除
|
|
||||||
</el-button>
|
|
||||||
<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
|
|
||||||
v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
|
|
||||||
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
|
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
|
||||||
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-menu slot="dropdown">
|
||||||
<el-dropdown-item command="handleResetPwd" icon="el-icon-key"
|
<el-dropdown-item command="handleResetPwd" icon="el-icon-key" v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
|
||||||
v-hasPermi="['system:user:resetPwd']">重置密码
|
<el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check" v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
|
||||||
</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"
|
|
||||||
v-hasPermi="['system:user:edit']">分配角色
|
|
||||||
</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
||||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||||
:limit.sync="queryParams.pageSize" @pagination="getList"/>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</pane>
|
</pane>
|
||||||
</splitpanes>
|
</splitpanes>
|
||||||
@ -139,8 +105,7 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="归属部门" prop="deptId">
|
<el-form-item label="归属部门" prop="deptId">
|
||||||
<treeselect v-model="form.deptId" :options="enabledDeptOptions" :show-count="true"
|
<treeselect v-model="form.deptId" :options="enabledDeptOptions" :show-count="true" placeholder="请选择归属部门" />
|
||||||
placeholder="请选择归属部门"/>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -164,8 +129,7 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
|
<el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
|
||||||
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20"
|
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
|
||||||
show-password/>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -173,17 +137,14 @@
|
|||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="用户性别">
|
<el-form-item label="用户性别">
|
||||||
<el-select v-model="form.sex" placeholder="请选择性别">
|
<el-select v-model="form.sex" placeholder="请选择性别">
|
||||||
<el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
|
<el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||||
:value="dict.value"></el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="状态">
|
<el-form-item label="状态">
|
||||||
<el-radio-group v-model="form.status">
|
<el-radio-group v-model="form.status">
|
||||||
<el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">
|
<el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
|
||||||
{{ dict.label }}
|
|
||||||
</el-radio>
|
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -192,33 +153,14 @@
|
|||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="岗位">
|
<el-form-item label="岗位">
|
||||||
<el-select v-model="form.postIds" multiple placeholder="请选择岗位">
|
<el-select v-model="form.postIds" multiple placeholder="请选择岗位">
|
||||||
<el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId"
|
<el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1" ></el-option>
|
||||||
:disabled="item.status == 1"></el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="角色">
|
<el-form-item label="角色">
|
||||||
<el-select v-model="form.roleIds" multiple placeholder="请选择角色">
|
<el-select v-model="form.roleIds" multiple placeholder="请选择角色">
|
||||||
<el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId"
|
<el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
|
||||||
:disabled="item.status == 1"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="24">
|
|
||||||
<el-form-item label="归属站点" name="belongSite">
|
|
||||||
<el-select
|
|
||||||
v-model="form.belongSite"
|
|
||||||
multiple
|
|
||||||
collapse-tags
|
|
||||||
placeholder="请选择"
|
|
||||||
style="width:100%"
|
|
||||||
@change="selectBelongSite">
|
|
||||||
<el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList"
|
|
||||||
:disabled="item.siteId!== 'all' && (form.belongSite || []).includes('all')"
|
|
||||||
:key="index+'zdxeSelect'"></el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -239,20 +181,15 @@
|
|||||||
|
|
||||||
<!-- 用户导入对话框 -->
|
<!-- 用户导入对话框 -->
|
||||||
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
|
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
|
||||||
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
|
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
|
||||||
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
|
|
||||||
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
|
|
||||||
<i class="el-icon-upload"></i>
|
<i class="el-icon-upload"></i>
|
||||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
||||||
<div class="el-upload__tip text-center" slot="tip">
|
<div class="el-upload__tip text-center" slot="tip">
|
||||||
<div class="el-upload__tip" slot="tip">
|
<div class="el-upload__tip" slot="tip">
|
||||||
<el-checkbox v-model="upload.updateSupport"/>
|
<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
|
||||||
是否更新已经存在的用户数据
|
|
||||||
</div>
|
</div>
|
||||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||||
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
|
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
|
||||||
@click="importTemplate">下载模板
|
|
||||||
</el-link>
|
|
||||||
</div>
|
</div>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<div slot="footer" class="dialog-footer">
|
<div slot="footer" class="dialog-footer">
|
||||||
@ -264,21 +201,11 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user"
|
||||||
addUser,
|
|
||||||
changeUserStatus,
|
|
||||||
delUser,
|
|
||||||
deptTreeSelect,
|
|
||||||
getUser,
|
|
||||||
listUser,
|
|
||||||
resetUserPwd,
|
|
||||||
updateUser
|
|
||||||
} from "@/api/system/user"
|
|
||||||
import {getAllSites} from '@/api/ems/zddt'
|
|
||||||
import { getToken } from "@/utils/auth"
|
import { getToken } from "@/utils/auth"
|
||||||
import Treeselect from "@riophae/vue-treeselect"
|
import Treeselect from "@riophae/vue-treeselect"
|
||||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
|
||||||
import {Pane, Splitpanes} from "splitpanes"
|
import { Splitpanes, Pane } from "splitpanes"
|
||||||
import "splitpanes/dist/splitpanes.css"
|
import "splitpanes/dist/splitpanes.css"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -301,8 +228,6 @@ export default {
|
|||||||
total: 0,
|
total: 0,
|
||||||
// 用户表格数据
|
// 用户表格数据
|
||||||
userList: null,
|
userList: null,
|
||||||
// 站点列表数据
|
|
||||||
siteList: [],
|
|
||||||
// 弹出层标题
|
// 弹出层标题
|
||||||
title: "",
|
title: "",
|
||||||
// 所有部门树选项
|
// 所有部门树选项
|
||||||
@ -388,8 +313,7 @@ export default {
|
|||||||
message: "请输入正确的手机号码",
|
message: "请输入正确的手机号码",
|
||||||
trigger: "blur"
|
trigger: "blur"
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -400,7 +324,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getZdList()
|
|
||||||
this.getList()
|
this.getList()
|
||||||
this.getDeptTree()
|
this.getDeptTree()
|
||||||
this.getConfigKey("sys.user.initPassword").then(response => {
|
this.getConfigKey("sys.user.initPassword").then(response => {
|
||||||
@ -408,29 +331,6 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
selectBelongSite(data) {
|
|
||||||
console.log('选中的站点', data)
|
|
||||||
if (data.includes("all")) {
|
|
||||||
this.form.belongSite = ['all']
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (this.siteList.length && data.length === (this.siteList.length - 1)) {
|
|
||||||
this.form.belongSite = ['all']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//获取站点列表
|
|
||||||
getZdList() {
|
|
||||||
return getAllSites().then(response => {
|
|
||||||
this.siteList = response?.data || []
|
|
||||||
if (this.siteList.length > 0) {
|
|
||||||
this.siteList.unshift({
|
|
||||||
id: 'all',
|
|
||||||
siteId: "all",
|
|
||||||
siteName: "全部"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
/** 查询用户列表 */
|
/** 查询用户列表 */
|
||||||
getList() {
|
getList() {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
@ -500,8 +400,7 @@ export default {
|
|||||||
status: "0",
|
status: "0",
|
||||||
remark: undefined,
|
remark: undefined,
|
||||||
postIds: [],
|
postIds: [],
|
||||||
roleIds: [],
|
roleIds: []
|
||||||
belongSite: []
|
|
||||||
}
|
}
|
||||||
this.resetForm("form")
|
this.resetForm("form")
|
||||||
},
|
},
|
||||||
@ -556,7 +455,6 @@ export default {
|
|||||||
this.form = response.data
|
this.form = response.data
|
||||||
this.postOptions = response.posts
|
this.postOptions = response.posts
|
||||||
this.roleOptions = response.roles
|
this.roleOptions = response.roles
|
||||||
this.$set(this.form, "belongSite", response?.data?.belongSite ? JSON.parse(response.data.belongSite) : [])
|
|
||||||
this.$set(this.form, "postIds", response.postIds)
|
this.$set(this.form, "postIds", response.postIds)
|
||||||
this.$set(this.form, "roleIds", response.roleIds)
|
this.$set(this.form, "roleIds", response.roleIds)
|
||||||
this.open = true
|
this.open = true
|
||||||
@ -581,8 +479,7 @@ export default {
|
|||||||
resetUserPwd(row.userId, value).then(response => {
|
resetUserPwd(row.userId, value).then(response => {
|
||||||
this.$modal.msgSuccess("修改成功,新密码是:" + value)
|
this.$modal.msgSuccess("修改成功,新密码是:" + value)
|
||||||
})
|
})
|
||||||
}).catch(() => {
|
}).catch(() => {})
|
||||||
})
|
|
||||||
},
|
},
|
||||||
/** 分配角色操作 */
|
/** 分配角色操作 */
|
||||||
handleAuthRole: function(row) {
|
handleAuthRole: function(row) {
|
||||||
@ -594,13 +491,13 @@ export default {
|
|||||||
this.$refs["form"].validate(valid => {
|
this.$refs["form"].validate(valid => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
if (this.form.userId != undefined) {
|
if (this.form.userId != undefined) {
|
||||||
updateUser({...this.form, belongSite: JSON.stringify(this.form.belongSite)}).then(response => {
|
updateUser(this.form).then(response => {
|
||||||
this.$modal.msgSuccess("修改成功")
|
this.$modal.msgSuccess("修改成功")
|
||||||
this.open = false
|
this.open = false
|
||||||
this.getList()
|
this.getList()
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
addUser({...this.form, belongSite: JSON.stringify(this.form.belongSite)}).then(response => {
|
addUser(this.form).then(response => {
|
||||||
this.$modal.msgSuccess("新增成功")
|
this.$modal.msgSuccess("新增成功")
|
||||||
this.open = false
|
this.open = false
|
||||||
this.getList()
|
this.getList()
|
||||||
@ -617,8 +514,7 @@ export default {
|
|||||||
}).then(() => {
|
}).then(() => {
|
||||||
this.getList()
|
this.getList()
|
||||||
this.$modal.msgSuccess("删除成功")
|
this.$modal.msgSuccess("删除成功")
|
||||||
}).catch(() => {
|
}).catch(() => {})
|
||||||
})
|
|
||||||
},
|
},
|
||||||
/** 导出按钮操作 */
|
/** 导出按钮操作 */
|
||||||
handleExport() {
|
handleExport() {
|
||||||
@ -633,7 +529,8 @@ export default {
|
|||||||
},
|
},
|
||||||
/** 下载模板操作 */
|
/** 下载模板操作 */
|
||||||
importTemplate() {
|
importTemplate() {
|
||||||
this.download('system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`)
|
this.download('system/user/importTemplate', {
|
||||||
|
}, `user_template_${new Date().getTime()}.xlsx`)
|
||||||
},
|
},
|
||||||
// 文件上传中处理
|
// 文件上传中处理
|
||||||
handleFileUploadProgress(event, file, fileList) {
|
handleFileUploadProgress(event, file, fileList) {
|
||||||
|
|||||||
Reference in New Issue
Block a user