|
@@ -1,150 +1,234 @@
|
|
|
-/**
|
|
|
- * @description 获取监测数据,并展示
|
|
|
- * @param data API接口返回的监测数据
|
|
|
- */
|
|
|
-function getWaterHtml(data) {
|
|
|
- let html = [];
|
|
|
- let _status = data.status;
|
|
|
- let _statusStr = "正常";
|
|
|
- let _statusColor = "";
|
|
|
- if (_status == "0") {
|
|
|
- _statusStr = "正常";
|
|
|
- _statusColor = " color: #0AAD66;padding: 0px 0px 4px 0px;font-weight: bold;"
|
|
|
- } else if (_status == "1") {
|
|
|
- _statusStr = "停用";
|
|
|
- _statusColor = " color:#99D6B6; ";
|
|
|
+function getSiteStatus(siteItem) {
|
|
|
+ // 判断是否超时离线
|
|
|
+ function timeSpan(direct_time) {
|
|
|
+ var now_time = Date.parse(new Date().toDateString()) //当前时间的时间戳
|
|
|
+ var end_time = Date.parse(new Date(direct_time).toDateString()) //指定时间的时间戳
|
|
|
+ if (end_time > now_time || !direct_time) {
|
|
|
+ //截止时间已过
|
|
|
+ return 0
|
|
|
+ } else {
|
|
|
+ //计算相差分钟数
|
|
|
+ var time_dis = now_time - end_time
|
|
|
+ var minutes = Math.floor(time_dis / (60 * 1000))
|
|
|
+ return minutes > 60 ? true : false
|
|
|
+ }
|
|
|
}
|
|
|
- //获取数据上传间隔时间
|
|
|
- let _minutes = getIsTimeout(data.collectionDate);
|
|
|
- if (_minutes > 60) {
|
|
|
- _statusStr = "<lable style='color:red;'>设备离线(" + _minutes + "分钟)</lable>"
|
|
|
+ if (siteItem.siteState == 1) {
|
|
|
+ if (siteItem.collectionDate && timeSpan(siteItem.collectionDate)) return `<lable style='color:red;'>设备离线(${getIsTimeout(siteItem.collectionDate)}分钟)</lable>`
|
|
|
+ else {
|
|
|
+ if (siteItem.isWarning == 1) return `<span style="color:#F65252">报警</span>`
|
|
|
+ else return `<span style="color: #0AAD66;padding: 0px 0px 4px 0px;font-weight: bold;">正常</span>`
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (siteItem.siteState == 0) return `<span style="color:#aaaaaa">停用</span>`
|
|
|
+ else return `<span style="color:#aaaaaa">作废</span>`
|
|
|
}
|
|
|
+}
|
|
|
+/**
|
|
|
+ * @description 获取监测数据,并展示
|
|
|
+ * @param data API接口返回的监测数据
|
|
|
+ */
|
|
|
+function getWaterHtml(data) {
|
|
|
+ console.log('数据', data)
|
|
|
+
|
|
|
+ let html = []
|
|
|
+ // let _status = data.status
|
|
|
+ // let _statusStr = '正常'
|
|
|
+ // let _statusColor = ''
|
|
|
+ // if (_status == '0') {
|
|
|
+ // _statusStr = '正常'
|
|
|
+ // _statusColor = ' color: #0AAD66;padding: 0px 0px 4px 0px;font-weight: bold;'
|
|
|
+ // } else if (_status == '1') {
|
|
|
+ // _statusStr = '停用'
|
|
|
+ // _statusColor = ' color:#99D6B6; '
|
|
|
+ // }
|
|
|
+ // //获取数据上传间隔时间
|
|
|
+ // let _minutes = getIsTimeout(data.collectionDate)
|
|
|
+ // if (_minutes > 60) {
|
|
|
+ // _statusStr = "<lable style='color:red;'>设备离线(" + _minutes + '分钟)</lable>'
|
|
|
+ // }
|
|
|
|
|
|
//组合数据
|
|
|
- html.push("<span style='" + _statusColor + "'>" + _statusStr + "</span>");
|
|
|
- html.push("<span>采集时间:" + data.collectionDate + "</span>");
|
|
|
- html.push("<span>设备类型:" + (data.deviceTypeName ? data.deviceTypeName : '/') + "</span>");
|
|
|
+ // html.push("<span style='" + _statusColor + "'>" + _statusStr + '</span>')
|
|
|
+ html.push(getSiteStatus(data))
|
|
|
+ html.push('<span>采集时间:' + data.collectionDate + '</span>')
|
|
|
+ html.push('<span>设备类型:' + (data.deviceTypeName ? data.deviceTypeName : '/') + '</span>')
|
|
|
|
|
|
//获取显示的设备类别
|
|
|
if (data.showVos && data.showVos.length > 0) {
|
|
|
- data.showVos.forEach(item => {
|
|
|
- let _targetCode = item.targetCode.toLowerCase();
|
|
|
+ data.showVos.forEach((item) => {
|
|
|
+ let _targetCode = item.targetCode.toLowerCase()
|
|
|
switch (_targetCode) {
|
|
|
- case "temperature":
|
|
|
- let temperatureAry = getWarningInfos(data.warningInfos, "temperature");
|
|
|
- let temperatureColor = getColumnColor(temperatureAry);
|
|
|
- let temperatureJson = temperatureAry.length > 0 ? "【" + temperatureAry[0].lowerLimit + "-" + temperatureAry[0].upperLimit + "】" : "";
|
|
|
-
|
|
|
- html.push("<span style='" + temperatureColor + "'>温度(℃):" + (data.temperature ? data.temperature : '/') + " " + temperatureJson + "</span>");
|
|
|
- break;
|
|
|
- case "turb":
|
|
|
- let turbAry = getWarningInfos(data.warningInfos, "turb");
|
|
|
- let turbColor = getColumnColor(turbAry);
|
|
|
- let turbJson = turbAry.length > 0 ? "【" + turbAry[0].lowerLimit + "-" + turbAry[0].upperLimit + "】" : "";
|
|
|
-
|
|
|
- html.push("<span style='" + turbColor + "'>浊度(NTU):" + (data.turb ? data.turb : '/') + " " + turbJson + "</span>");
|
|
|
- break;
|
|
|
- case "cod":
|
|
|
- let codAry = getWarningInfos(data.warningInfos, "cod");
|
|
|
- let codColor = getColumnColor(codAry);
|
|
|
- let codJson = codAry.length > 0 ? "【" + codAry[0].lowerLimit + "-" + codAry[0].upperLimit + "】" : "";
|
|
|
-
|
|
|
- html.push("<span style='" + codColor + "'>化学需氧量(mg/L):" + (data.cod ? data.cod : '/') + " " + codJson + "</span>");
|
|
|
- break;
|
|
|
- case "ec":
|
|
|
- let ecAry = getWarningInfos(data.warningInfos, "ec");
|
|
|
- let ecColor = getColumnColor(ecAry);
|
|
|
- let ecJson = ecAry.length > 0 ? "【" + ecAry[0].lowerLimit + "-" + ecAry[0].upperLimit + "】" : "";
|
|
|
-
|
|
|
- html.push("<span style='" + ecColor + "'>电导率(ms/m):" + (data.ec ? data.ec : '/') + " " + ecJson + "</span>");
|
|
|
- break;
|
|
|
- case "chl":
|
|
|
- let chlAry = getWarningInfos(data.warningInfos, "chl");
|
|
|
- let chlColor = getColumnColor(chlAry);
|
|
|
- let chlJson = chlAry.length > 0 ? "【" + chlAry[0].lowerLimit + "-" + chlAry[0].upperLimit + "】" : "";
|
|
|
-
|
|
|
- html.push("<span style='" + chlColor + "'>叶绿素光谱指数:" + (data.chl ? data.chl : '/') + " " + chlJson + "</span>");
|
|
|
- break;
|
|
|
- case "toc":
|
|
|
- let tocAry = getWarningInfos(data.warningInfos, "toc");
|
|
|
- let tocColor = getColumnColor(tocAry);
|
|
|
- let tocJson = tocAry.length > 0 ? "【" + tocAry[0].lowerLimit + "-" + tocAry[0].upperLimit + "】" : "";
|
|
|
-
|
|
|
- html.push("<span style='" + tocColor + "'>总有机碳(mg/L):" + (data.toc ? data.toc : '/') + " " + tocJson + "</span>");
|
|
|
- break;
|
|
|
- case "codmn":
|
|
|
- let codmnAry = getWarningInfos(data.warningInfos, "codmn");
|
|
|
- let codmnColor = getColumnColor(codmnAry);
|
|
|
- let codmnJson = codmnAry.length > 0 ? "【" + codmnAry[0].lowerLimit + "-" + codmnAry[0].upperLimit + "】" : "";
|
|
|
-
|
|
|
- html.push("<span style='" + codmnColor + "'>高锰酸盐指数(mg/L):" + (data.codmn ? data.codmn : '/') + " " + codmnJson + "</span>");
|
|
|
- break;
|
|
|
- case "doxygen":
|
|
|
- let doxygenAry = getWarningInfos(data.warningInfos, "doxygen");
|
|
|
- let doxygenColor = getColumnColor(doxygenAry);
|
|
|
- let doxygenJson = doxygenAry.length > 0 ? "【" + doxygenAry[0].lowerLimit + "-" + doxygenAry[0].upperLimit + "】" : "";
|
|
|
-
|
|
|
- html.push("<span style='" + doxygenColor + "'>溶解氧(mg/L):" + (data.doxygen ? data.doxygen : '/') + " " + doxygenJson + "</span>");
|
|
|
- break;
|
|
|
- case "tss":
|
|
|
- let tssAry = getWarningInfos(data.warningInfos, "tss");
|
|
|
- let tssColor = getColumnColor(tssAry);
|
|
|
- let tssJson = tssAry.length > 0 ? "【" + tssAry[0].lowerLimit + "-" + tssAry[0].upperLimit + "】" : "";
|
|
|
-
|
|
|
- html.push("<span style='" + tssColor + "'>悬浮物(mg/L):" + (data.tss ? data.tss : '/') + " " + tssJson + "</span>");
|
|
|
- break;
|
|
|
- case "liquid":
|
|
|
- let liquidAry = getWarningInfos(data.warningInfos, "liquid");
|
|
|
- let liquidColor = getColumnColor(liquidAry);
|
|
|
- let liquidJson = liquidAry.length > 0 ? "【" + liquidAry[0].lowerLimit + "-" + liquidAry[0].upperLimit + "】" : "";
|
|
|
-
|
|
|
- html.push("<span style='" + liquidColor + "'>液位(m):" + (data.liquid ? data.liquid : '/') + " " + liquidJson + "</span>");
|
|
|
- break;
|
|
|
+ case 'temperature':
|
|
|
+ let temperatureAry = getWarningInfos(data.warningInfos, 'temperature')
|
|
|
+ let temperatureColor = getColumnColor(temperatureAry)
|
|
|
+ let temperatureJson =
|
|
|
+ temperatureAry.length > 0
|
|
|
+ ? '【' + temperatureAry[0].lowerLimit + '-' + temperatureAry[0].upperLimit + '】'
|
|
|
+ : ''
|
|
|
+
|
|
|
+ html.push(
|
|
|
+ "<span style='" +
|
|
|
+ temperatureColor +
|
|
|
+ "'>温度(℃):" +
|
|
|
+ (data.temperature ? data.temperature : '/') +
|
|
|
+ ' ' +
|
|
|
+ temperatureJson +
|
|
|
+ '</span>'
|
|
|
+ )
|
|
|
+ break
|
|
|
+ case 'turb':
|
|
|
+ let turbAry = getWarningInfos(data.warningInfos, 'turb')
|
|
|
+ let turbColor = getColumnColor(turbAry)
|
|
|
+ let turbJson = turbAry.length > 0 ? '【' + turbAry[0].lowerLimit + '-' + turbAry[0].upperLimit + '】' : ''
|
|
|
+
|
|
|
+ html.push(
|
|
|
+ "<span style='" + turbColor + "'>浊度(NTU):" + (data.turb ? data.turb : '/') + ' ' + turbJson + '</span>'
|
|
|
+ )
|
|
|
+ break
|
|
|
+ case 'cod':
|
|
|
+ let codAry = getWarningInfos(data.warningInfos, 'cod')
|
|
|
+ let codColor = getColumnColor(codAry)
|
|
|
+ let codJson = codAry.length > 0 ? '【' + codAry[0].lowerLimit + '-' + codAry[0].upperLimit + '】' : ''
|
|
|
+
|
|
|
+ html.push(
|
|
|
+ "<span style='" +
|
|
|
+ codColor +
|
|
|
+ "'>化学需氧量(mg/L):" +
|
|
|
+ (data.cod ? data.cod : '/') +
|
|
|
+ ' ' +
|
|
|
+ codJson +
|
|
|
+ '</span>'
|
|
|
+ )
|
|
|
+ break
|
|
|
+ case 'ec':
|
|
|
+ let ecAry = getWarningInfos(data.warningInfos, 'ec')
|
|
|
+ let ecColor = getColumnColor(ecAry)
|
|
|
+ let ecJson = ecAry.length > 0 ? '【' + ecAry[0].lowerLimit + '-' + ecAry[0].upperLimit + '】' : ''
|
|
|
+
|
|
|
+ html.push(
|
|
|
+ "<span style='" + ecColor + "'>电导率(ms/m):" + (data.ec ? data.ec : '/') + ' ' + ecJson + '</span>'
|
|
|
+ )
|
|
|
+ break
|
|
|
+ case 'chl':
|
|
|
+ let chlAry = getWarningInfos(data.warningInfos, 'chl')
|
|
|
+ let chlColor = getColumnColor(chlAry)
|
|
|
+ let chlJson = chlAry.length > 0 ? '【' + chlAry[0].lowerLimit + '-' + chlAry[0].upperLimit + '】' : ''
|
|
|
+
|
|
|
+ html.push(
|
|
|
+ "<span style='" + chlColor + "'>叶绿素光谱指数:" + (data.chl ? data.chl : '/') + ' ' + chlJson + '</span>'
|
|
|
+ )
|
|
|
+ break
|
|
|
+ case 'toc':
|
|
|
+ let tocAry = getWarningInfos(data.warningInfos, 'toc')
|
|
|
+ let tocColor = getColumnColor(tocAry)
|
|
|
+ let tocJson = tocAry.length > 0 ? '【' + tocAry[0].lowerLimit + '-' + tocAry[0].upperLimit + '】' : ''
|
|
|
+
|
|
|
+ html.push(
|
|
|
+ "<span style='" + tocColor + "'>总有机碳(mg/L):" + (data.toc ? data.toc : '/') + ' ' + tocJson + '</span>'
|
|
|
+ )
|
|
|
+ break
|
|
|
+ case 'codmn':
|
|
|
+ let codmnAry = getWarningInfos(data.warningInfos, 'codmn')
|
|
|
+ let codmnColor = getColumnColor(codmnAry)
|
|
|
+ let codmnJson = codmnAry.length > 0 ? '【' + codmnAry[0].lowerLimit + '-' + codmnAry[0].upperLimit + '】' : ''
|
|
|
+
|
|
|
+ html.push(
|
|
|
+ "<span style='" +
|
|
|
+ codmnColor +
|
|
|
+ "'>高锰酸盐指数(mg/L):" +
|
|
|
+ (data.codmn ? data.codmn : '/') +
|
|
|
+ ' ' +
|
|
|
+ codmnJson +
|
|
|
+ '</span>'
|
|
|
+ )
|
|
|
+ break
|
|
|
+ case 'doxygen':
|
|
|
+ let doxygenAry = getWarningInfos(data.warningInfos, 'doxygen')
|
|
|
+ let doxygenColor = getColumnColor(doxygenAry)
|
|
|
+ let doxygenJson =
|
|
|
+ doxygenAry.length > 0 ? '【' + doxygenAry[0].lowerLimit + '-' + doxygenAry[0].upperLimit + '】' : ''
|
|
|
+
|
|
|
+ html.push(
|
|
|
+ "<span style='" +
|
|
|
+ doxygenColor +
|
|
|
+ "'>溶解氧(mg/L):" +
|
|
|
+ (data.doxygen ? data.doxygen : '/') +
|
|
|
+ ' ' +
|
|
|
+ doxygenJson +
|
|
|
+ '</span>'
|
|
|
+ )
|
|
|
+ break
|
|
|
+ case 'tss':
|
|
|
+ let tssAry = getWarningInfos(data.warningInfos, 'tss')
|
|
|
+ let tssColor = getColumnColor(tssAry)
|
|
|
+ let tssJson = tssAry.length > 0 ? '【' + tssAry[0].lowerLimit + '-' + tssAry[0].upperLimit + '】' : ''
|
|
|
+
|
|
|
+ html.push(
|
|
|
+ "<span style='" + tssColor + "'>悬浮物(mg/L):" + (data.tss ? data.tss : '/') + ' ' + tssJson + '</span>'
|
|
|
+ )
|
|
|
+ break
|
|
|
+ case 'liquid':
|
|
|
+ let liquidAry = getWarningInfos(data.warningInfos, 'liquid')
|
|
|
+ let liquidColor = getColumnColor(liquidAry)
|
|
|
+ let liquidJson =
|
|
|
+ liquidAry.length > 0 ? '【' + liquidAry[0].lowerLimit + '-' + liquidAry[0].upperLimit + '】' : ''
|
|
|
+
|
|
|
+ html.push(
|
|
|
+ "<span style='" +
|
|
|
+ liquidColor +
|
|
|
+ "'>液位(m):" +
|
|
|
+ (data.liquid ? data.liquid : '/') +
|
|
|
+ ' ' +
|
|
|
+ liquidJson +
|
|
|
+ '</span>'
|
|
|
+ )
|
|
|
+ break
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
}
|
|
|
- return html.join('');
|
|
|
+ return html.join('')
|
|
|
}
|
|
|
/**
|
|
|
-* @description 获取报警的对象列表
|
|
|
-*/
|
|
|
+ * @description 获取报警的对象列表
|
|
|
+ */
|
|
|
function getWarningInfos(warningInfos, columnName) {
|
|
|
var tempAry = warningInfos.filter(function (obj) {
|
|
|
- return obj.targetCode.toLowerCase() === columnName;
|
|
|
+ return obj.targetCode.toLowerCase() === columnName
|
|
|
})
|
|
|
return tempAry
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * @description 获取当前子项报警的颜色
|
|
|
- */
|
|
|
+ * @description 获取当前子项报警的颜色
|
|
|
+ */
|
|
|
function getColumnColor(tempAry) {
|
|
|
- let _polluteColor = "";
|
|
|
- let _maxPollute = "";
|
|
|
+ let _polluteColor = ''
|
|
|
+ let _maxPollute = ''
|
|
|
if (tempAry && tempAry.length > 0) {
|
|
|
- _maxPollute = tempAry[0].warningValue;
|
|
|
+ _maxPollute = tempAry[0].warningValue
|
|
|
}
|
|
|
- _polluteColor = getPoliceColor(_maxPollute);
|
|
|
+ _polluteColor = getPoliceColor(_maxPollute)
|
|
|
return _polluteColor
|
|
|
}
|
|
|
/**
|
|
|
- * @description 获取颜色代码
|
|
|
- */
|
|
|
+ * @description 获取颜色代码
|
|
|
+ */
|
|
|
function getPoliceColor(pollute) {
|
|
|
- let _polluteColor = "";
|
|
|
- if (pollute == "1") {
|
|
|
- _polluteColor = "color:#BFBF00;" //绿色
|
|
|
- } else if (pollute == "2") {
|
|
|
- _polluteColor = "color:#BFBF00;" //黄色
|
|
|
- } else if (pollute == "3") {
|
|
|
- _polluteColor = "color:#F59A23;" //橙色
|
|
|
- } else if (pollute == "4") {
|
|
|
- _polluteColor = "color:#FF0000;" //红色
|
|
|
- } else if (pollute == "5") {
|
|
|
- _polluteColor = "color:#0000FF;";//"color:#AAAAAA;" //异常
|
|
|
+ let _polluteColor = ''
|
|
|
+ if (pollute == '1') {
|
|
|
+ _polluteColor = 'color:#BFBF00;' //绿色
|
|
|
+ } else if (pollute == '2') {
|
|
|
+ _polluteColor = 'color:#BFBF00;' //黄色
|
|
|
+ } else if (pollute == '3') {
|
|
|
+ _polluteColor = 'color:#F59A23;' //橙色
|
|
|
+ } else if (pollute == '4') {
|
|
|
+ _polluteColor = 'color:#FF0000;' //红色
|
|
|
+ } else if (pollute == '5') {
|
|
|
+ _polluteColor = 'color:#0000FF;' //"color:#AAAAAA;" //异常
|
|
|
}
|
|
|
|
|
|
- return _polluteColor;
|
|
|
+ return _polluteColor
|
|
|
}
|
|
|
/**
|
|
|
* @description 判断是否超时
|
|
@@ -152,44 +236,43 @@ function getPoliceColor(pollute) {
|
|
|
* @returns 超时分钟数
|
|
|
*/
|
|
|
function getIsTimeout(lastTime) {
|
|
|
- //获取数据上传间隔时间
|
|
|
- let _minutes = timeSpan(lastTime);
|
|
|
- return _minutes;
|
|
|
+ //获取数据上传间隔时间
|
|
|
+ let _minutes = timeSpan(lastTime)
|
|
|
+ return _minutes
|
|
|
}
|
|
|
/**
|
|
|
- * @description 获取2个时间差值
|
|
|
- */
|
|
|
+ * @description 获取2个时间差值
|
|
|
+ */
|
|
|
function timeSpan(direct_time) {
|
|
|
- var now_time = Date.parse(new Date().toDateString());//当前时间的时间戳
|
|
|
- var end_time = Date.parse(new Date(direct_time).toDateString());//指定时间的时间戳
|
|
|
+ var now_time = Date.parse(new Date().toDateString()) //当前时间的时间戳
|
|
|
+ var end_time = Date.parse(new Date(direct_time).toDateString()) //指定时间的时间戳
|
|
|
if (end_time > now_time || !direct_time) {
|
|
|
//截止时间已过
|
|
|
return 0
|
|
|
} else {
|
|
|
//计算相差分钟数
|
|
|
- var time_dis = now_time - end_time;
|
|
|
- var minutes = Math.floor(time_dis / (60 * 1000));
|
|
|
- return minutes;
|
|
|
+ var time_dis = now_time - end_time
|
|
|
+ var minutes = Math.floor(time_dis / (60 * 1000))
|
|
|
+ return minutes
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * @description 监测数据标签
|
|
|
- */
|
|
|
+ * @description 监测数据标签
|
|
|
+ */
|
|
|
export function creatTipMonitor(data, monitoringData = [], cellBack: Function) {
|
|
|
for (let index = 0; index < data.length; index++) {
|
|
|
- const _siteObj = data[index];
|
|
|
+ const _siteObj = data[index]
|
|
|
let _moitoringDataAry = monitoringData.filter((item, index) => {
|
|
|
- return item.siteId == _siteObj.id;
|
|
|
- });
|
|
|
+ return item.siteId == _siteObj.id
|
|
|
+ })
|
|
|
if (_moitoringDataAry.length > 0) {
|
|
|
- let _moitoringData = _moitoringDataAry[0];
|
|
|
+ let _moitoringData = _moitoringDataAry[0]
|
|
|
//监测数据
|
|
|
- let waterHtml = getWaterHtml(_moitoringData);
|
|
|
+ let waterHtml = getWaterHtml(_moitoringData)
|
|
|
cellBack(_siteObj, waterHtml)
|
|
|
} else {
|
|
|
cellBack(_siteObj, '暂无监测数据')
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-}
|
|
|
+}
|