From cbf18809270976db8af332fb80bedd6509c60245 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Tue, 06 Sep 2022 11:12:02 +0800
Subject: [PATCH] 溯源码页面修改
---
public/traceablityInfo.html | 836 +++++++++++++++++++++++++++--------------------------------
1 files changed, 387 insertions(+), 449 deletions(-)
diff --git a/public/traceablityInfo.html b/public/traceablityInfo.html
index 2c45870..b799edc 100644
--- a/public/traceablityInfo.html
+++ b/public/traceablityInfo.html
@@ -5,6 +5,8 @@
<head>
<meta charset="UTF-8">
<meta name="divport" content="width=device-width, initial-scale=1.0">
+ <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
+ <title>查看溯源</title>
<style>
.top-log {
position: relative;
@@ -222,7 +224,6 @@
.model-box.cd .model-content.dk .content-body {
height: 450px;
- background: greenyellow;
}
.model-box.cd .model-content.jksp .content-body {
@@ -355,8 +356,13 @@
font-size: 24px;
color: #697580;
white-space: nowrap;
+ padding: 0 5px;
overflow: hidden;
- text-overflow: ellipsis;
+ }
+
+ .equiBtnOn {
+ background-color: rgb(28, 235, 28) !important;
+ color: #fff !important;
}
.model-box.cd .model-content.jksp .content-footer .equi-btn:first-child {
@@ -607,6 +613,15 @@
position: relative;
overflow: hidden;
} */
+ #video-body {
+ width: 94%;
+ padding: 0 3%;
+ height: 400px;
+ }
+
+ #video-body video {
+ object-fit: fill;
+ }
#video-footer {
width: 100%;
@@ -633,19 +648,187 @@
</style>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
- <script src="js/flv.min.js" type="text/javascript" charset="utf-8"></script>
+ <script src="js/WebRtcPlayer.js"></script>
</head>
-
<body>
<div class="page-main-container" style="background: #F1F9F8;width:100%;height: 100%;">
+ <!-- str0 -->
+ <!-- 顶部图片 -->
+ <div class="top-log">
+ <img width="100%" height="520px" src="https://dev.jxpskj.com:8023/zhny-web/assets/images/sym/2.png" />
+ <div class="btn-grounp">
+ <img bindtap="scrollTo" data-class=".qw" width="200px" height="100px"
+ src="https://dev.jxpskj.com:8023/zhny-web/assets/images/sy/1418.png" />
+ <img bindtap="scrollTo" data-class=".cd" width="200px" height="100px"
+ src="https://dev.jxpskj.com:8023/zhny-web/assets/images/sy/1416.png" />
+ <img bindtap="scrollTo" data-class=".zz" width="200px" height="100px"
+ src="https://dev.jxpskj.com:8023/zhny-web/assets/images/sy/1415.png" />
+ <img bindtap="scrollTo" data-class=".sc" width="200px" height="100px"
+ src="https://dev.jxpskj.com:8023/zhny-web/assets/images/sy/1414.png" />
+ </div>
+ </div>
- <!-- <scroll-div scroll-top="{{scrollTop}}" refresher-enabled="{{true}}" bindrefresherrefresh="refresh" refresher-triggered="{{triggered}}" style="height: {{clientHeight}}" scroll-y bindscrolltolower="upcroll"> -->
+ <!-- 农产品信息 -->
+ <div class="main-content">
+ <div class="logo">
+ <img width="100%" height="100%" id="logoImg" />
+ </div>
+ <div class="title" id="titleName"></div>
+ <div class="type">
+ <div class="sub" id="sub1">${recovery.lx}</div>
+ </div>
+ <div class="date" id="date1"></div>
+ </div>
- <!-- </scroll-div> -->
+ <!-- 权威检测 -->
+ <div class="qw model-box">
+ <div class="model-title">
+ <div class="l"></div>
+ <div class="title">权威检测</div>
+ <div class="border"></div>
+ <div class="status">
+ <div>
+ <van-icon style="margin-right: 10px;"
+ name="https://dev.jxpskj.com:8023/zhny-web/assets/images/sym/1265.png" />
+ </div>
+ 可追溯
+ </div>
+ </div>
+ <div class="model-content" id="str1Dom">
+ <!-- str1 -->
+ <!-- str2 -->
+ </div>
+ </div>
+ <!-- 产地信息 -->
+ <div class="cd model-box">
+ <div class="model-title">
+ <div class="l"></div>
+ <div class="title">产地信息</div>
+ <div class="border"></div>
+ <div class="status">
+ <div>
+ <van-icon style="margin-right: 10px;"
+ name="https://dev.jxpskj.com:8023/zhny-web/assets/images/sym/1265.png" />
+ </div>
+ 可追溯
+ </div>
+ </div>
+
+ <div class="dk model-content">
+ <div class="content-header">
+ <van-icon style="margin-right: 12px;" name="https://dev.jxpskj.com:8023/zhny-web/assets/images/sy/1267.png" />
+ 种植地块
+ </div>
+ <div class="content-body">
+ <img width="94%" height="100%" style="margin-left:3%" id="contentImg1" />
+ </div>
+ <div class="content-footer">
+ <div class="l" id="farmAddress"></div>
+ </div>
+ </div>
+
+ <!-- 监控数据展示 -->
+ <div class="jksp model-content">
+ <div class="content-header">
+ <van-icon style="margin-right: 12px;" name="https://dev.jxpskj.com:8023/zhny-web/assets/images/sy/1272.png" />
+ 良心生产，不怕监督，24小时视频监控
+ </div>
+ <div class="content-body">
+ <div id="video-body">
+ <video autoplay muted controls id="videoElement"
+ style="width:100%;height: 100%;">你的浏览器太老了，不支持HTML5视频。</video>
+ </div>
+ </div>
+ <div class="content-footer" id="videoFooter"></div>
+ <!-- str10 -->
+ </div>
+ <!-- 监测数据展示-->
+ <div class="jk model-content">
+ <div class="content-header">
+ 物联网监控保证产地养分充足，且不被污染
+ </div>
+ <div class="content-body">
+ <div class="site-box">
+ <!-- strdetection -->
+ <div class="site-title">
+ <div class="l">
+ <select id="select" style="font-weight: bold;color: #333333;border: none;font-size: 28px;width:96%">
+ </select>
+ </div>
+ </div>
+ <div class="site-date">
+ <div class="site-date-text" id="sitedatetext">更新时间</div>
+ </div>
+ <div class="site-content" id="detectionlist">
+ <!-- str11 -->
+ <!-- </div> -->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 种植环节 -->
+ <div class="zz model-box">
+ <div class="model-title">
+ <div class="l"></div>
+ <div class="title">种植环节</div>
+ <div class="border"></div>
+ <div class="status no"></div>
+ </div>
+ <div class="model-content">
+ <div class="msg">
+ <div class="l">
+ <img width="126px" height="126px" src="https://dev.jxpskj.com:8023/zhny-web/assets/images/sy/zz-log.png" />
+ </div>
+ <div class="r">
+ <div>
+ 我是基地管理员：
+ </div>
+ <div class="r-b-msg">
+ 以下农事操作，是在我的监督下完成
+ </div>
+
+ <div class="point-to"></div>
+ </div>
+ </div>
+ <!-- str3 -->
+ <div id="recordBox"></div>
+ <!-- str4 -->
+ </div>
+ </div>
+
+ <!-- 生产企业 -->
+ <div class="sc model-box">
+ <div class="model-title">
+ <div class="l"></div>
+ <div class="title">生产企业</div>
+ <div class="border"></div>
+ <div class="status no">
+ </div>
+ </div>
+ <div class="model-content">
+ <div class="content-header" id="contentHeader"></div>
+ <div class="content-body">
+ <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
+ <block class="swiper-image" id="swImg">
+ <!-- str5 -->
+ <!-- str6 -->
+ </block>
+ </swiper>
+
+ </div>
+ <div class="text-intro" id="textIntro"></div>
+ <div class="content-footer">
+ </div>
+ </div>
+ </div>
</div>
- <script>
+</body>
+<script>
+ $(function () {
var getData = function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
@@ -653,72 +836,34 @@
return null;
};
var code = getData("code");
+ axios.get('https://dev.jxpskj.com:8023/api/traceability/getTraceabilityDetailInfos?code=' + code).then(
+ function (res) {
+ // 初始化数据begin
+ var data = res.data.data;
+ var farm = data.farm;
+ var land = data.landVO;
+ var num = data.num;
+ var paperList = data.paperVOList;
+ var recordVOList = data.recordVOList;
+ var recovery = data.recoveryVO;
+ // 初始化数据end
- // var code = "22070000001";
+ // 页面数据渲染begin
+ $('#titleName').text(recovery.strainName)
+ $('#logoImg').attr('src', recovery.url)
+ $('#sub1').text(recovery.lx)
+ $('#date1').text('采收时间：' + recovery.time.replaceAll("-", "."))
+ $('#contentHeader').text(farm.farmName)
+ $('#textIntro').text(farm.introduce)
+ // $('#slideImg').attr(item)
+ // 页面数据渲染end
-
- axios.get('https://dev.jxpskj.com:8023/api/traceability/getTraceabilityDetailInfos?code=' + code).then(function (
- res) {
- // axios.get('http://192.168.0.114:89/traceability/getTraceabilityDetailInfo?code=' + code).then(function(res) {
-
- var data = res.data.data;
- var farm = data.farm;
- var land = data.landVO;
- var num = data.num;
- var paperList = data.paperVOList;
- var recordVOList = data.recordVOList;
- var recovery = data.recoveryVO;
- var str0 = `<div class="top-log">
- <img width="100%" height="520px" src="http://182.106.212.58:8014/assets/images/sym/2.png" />
- <div class="btn-grounp">
- <img bindtap="scrollTo" data-class=".qw" width="200px" height="100px" src="http://182.106.212.58:8014/assets/images/sy/1418.png" />
- <img bindtap="scrollTo" data-class=".cd" width="200px" height="100px" src="http://182.106.212.58:8014/assets/images/sy/1416.png" />
- <img bindtap="scrollTo" data-class=".zz" width="200px" height="100px" src="http://182.106.212.58:8014/assets/images/sy/1415.png" />
- <img bindtap="scrollTo" data-class=".sc" width="200px" height="100px" src="http://182.106.212.58:8014/assets/images/sy/1414.png" />
- </div>
- </div>
-
- <div class="main-content">
-
- <div class="logo">
- <img width="100%" height="100%" src="${recovery.url}" />
- <!-- <div class="btn">更换图片</div> -->
- </div>
-
- <div class="title">${recovery.strainName}</div>
-
- <div class="type">
- <div class="sub">${recovery.lx}</div>
- <!-- <div class="icon">
- <van-icon name="play" />
- </div> -->
- </div>
-
- <div class="date">
- 采收时间：${recovery.time.replaceAll("-", ".")}
- </div>
-
- </div>
- <div class="qw model-box">
-
- <div class="model-title">
- <div class="l"></div>
- <div class="title">权威检测</div>
- <div class="border"></div>
- <div class="status">
- <div>
- <van-icon style="margin-right: 10px;" name="http://182.106.212.58:8014/assets/images/sym/1265.png" />
- </div>
- 可追溯
- </div>
- </div>
-
- <div class="model-content">`
- var str1 = '';
- if (paperList.length > 0) {
- paperList.forEach(item => {
- var url = item.pictures.split(",")[0];
- str1 = str1 + `<div class="box">
+ // 权威检测页面遍历begin
+ var str1 = '';
+ if (paperList.length > 0) {
+ paperList.forEach(item => {
+ var url = item.pictures.split(",")[0];
+ str1 = str1 + `<div class="box">
<div class="l">
<img width="204px" height="204px" src="${url}" />
</div>
@@ -740,226 +885,16 @@
</div>
</div>
</div>`
- });
- } else {
- str1 = str1 + `<div class="box"></div>`
- }
-
-
- var str2 = `
- </div>
- </div>
-
- <div class="cd model-box">
- <div class="model-title">
- <div class="l"></div>f
- <div class="title">产地信息</div>
- <div class="border"></div>
- <div class="status">
- <div>
- <van-icon style="margin-right: 10px;" name="http://182.106.212.58:8014/assets/images/sym/1265.png" />
- </div>
- 可追溯
- </div>
- </div>
-
- <div class="dk model-content">
- <div class="content-header">
- <van-icon style="margin-right: 12px;" name="http://182.106.212.58:8014/assets/images/sy/1267.png" /> 种植地块
- </div>
- <div class="content-body">
- <image style="width: 100%;height:100%" src="${land.url}" />
- </div>
- <div class="content-footer">
- <div class="l">
- ${farm.farmAddress}
- </div>
- <!-- <div class="r">
- <van-icon name="star" />
- 导航
- </div> -->
- </div>
- </div>
-
- <div class="jksp model-content">
- <div class="content-header">
- <van-icon style="margin-right: 12px;" name="http://182.106.212.58:8014/assets/images/sy/1272.png" /> 良心生产，不怕监督，24小时视频监控
- </div>`
-
- var dom = $('.page-main-container');
- dom.empty();
- dom.append(str0 + str1 + str2);
-
- //请求检测数据
- axios.get(
- 'http://dev.jxpskj.com:8030/pyh-station/stationAndVideo/queryStationAndVideoInfoData?type=All&landId=' +
- recovery.landId).then(function (res) {
- var staList = res.data.data.staList;
- var vidList = res.data.data.vidList;
-
- window.detectionList = staList;
- window.videoList = vidList;
-
-
-
-
-
-
- //监控
- var strvedio = '';
- // vidList.push({
- // name:"1号摄像头"
- // })
- // vidList.push({
- // name:"2号摄像头"
- // })
- if (vidList.length > 0) {
- //读取第一个视频 url
- strvedio = strvedio + `<div class="content-body">
- <div id="video-body">
- <video controls id="video-element" autoplay muted>你的浏览器太老了，不支持HTML5视频。</video>
- </div>
- </div><div class="content-footer">`
- //遍历监控点
- vidList.forEach((item, index) => {
- strvedio = strvedio + `<div class="equi-btn on">
- ${item.name}
- </div>`
- if (index >= 1) {
- // equibtn.style.color = "#fff";
- }
- })
+ });
} else {
- strvedio = strvedio + `<div class="content-body">
- </div><div class="content-footer">`
+ str1 = str1 + `<div class="box"></div>`
}
+ $('#str1Dom').append(str1)
+ $('#contentImg1').attr('src', land.url)
+ $('#farmAddress').text(farm.farmAddress)
+ // 权威检测页面遍历end
- var str10 =
- `</div>
- </div>
- <div class="jk model-content">
- <div class="content-header">
- 物联网监控保证产地养分充足，且不被污染
- </div>
- <div class="content-body">
- <div class="site-box">`
-
- var strdetection = '';
-
- if (staList.length > 0) {
- var sta = staList[0];
- var timeStr = '';
- var time = sta.weatherTime;
- //当前时间
- var date = new Date();
- //计算时间差
- var crud = date.getTime() - new Date(time).getTime();
- //计算出相差天数
- var days = Math.floor(crud / (24 * 3600 * 1000))
- timeStr = days + "天";
-
- if (days == 0) {
- //计算出小时数
- var leave1 = crud % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
- var hours = Math.floor(leave1 / (3600 * 1000))
- timeStr = hours + "小时";
-
- if (hours == 0) {
- //计算相差分钟数
- var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
- var minutes = Math.floor(leave2 / (60 * 1000))
- timeStr = minutes + "分钟";
-
- if (minutes == 0) {
- //计算相差秒数
- var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
- var seconds = Math.round(leave3 / 1000)
- timeStr = seconds + "秒";
- }
- }
- }
-
- //读取第一个检测设备
- strdetection = strdetection +
- `<div class="site-title">
- <div class="l">
- <select id="select" style="font-weight: bold;color: #333333;border: none;font-size: 28px;width:96%">`
-
-
-
- staList.forEach(item => {
- strdetection = strdetection + `<option>${item.name}</option>`
- })
-
- strdetection = strdetection + `</select>
- </div>
- </div>
- <div class="site-date">
- <div class="site-date-text" id="sitedatetext">
- ${timeStr}前更新</div>
- </div>
- <div class="site-content" id="detectionlist">`
- //遍历检测信息
- var weatherList = staList[0].weatherList;
- if (weatherList.length > 0) {
- weatherList.forEach(item => {
- if (item.name != '监测时间') {
- strdetection = strdetection + `<div class="list">
- <div class="l">
- <div class="type">${item.name}</div>
- <div class="unit">
- 单位：${item.unit}
- </div>
- </div>
- <div class="r">
- ${item.value}
- </div>
- </div>`
- }
- })
- }
- } else {
- strdetection = strdetection + `
- <div class="site-content">`
- }
-
- var str11 = `</div>
- </div>
- </div>
- </div>
- </div>
-
- <div class="zz model-box">
- <div class="model-title">
- <div class="l"></div>
- <div class="title">种植环节</div>
- <div class="border"></div>
- <div class="status no">
- <!-- 去完善 -->
- <!-- <div>
- <van-icon style="margin-left: 10px;" color="#EC9144" name="arrow" />
- </div> -->
- </div>
- </div>
-
- <div class="model-content">
-
- <div class="msg">
- <div class="l">
- <img width="126px" height="126px" src="http://182.106.212.58:8014/assets/images/sy/zz-log.png" />
- </div>
- <div class="r">
- <div>
- 我是基地管理员：
- </div>
- <div class="r-b-msg">
- 以下农事操作，是在我的监督下完成
- </div>
-
- <div class="point-to"></div>
- </div>
- </div>`
-
+ // 种植环节遍历begin
var str3 = '';
recordVOList.forEach((item, index) => {
str3 = str3 + `<div class="record-box">
@@ -986,31 +921,11 @@
</div>
</div>`
});
+ $('#recordBox').append(str3)
+ // 种植环节遍历end
- var str4 = `</div>
- </div>
-
- <div class="sc model-box">
- <div class="model-title">
- <div class="l"></div>
- <div class="title">生产企业</div>
- <div class="border"></div>
- <div class="status no">
- <!-- 去完善
- <div>
- <van-icon style="margin-left: 10px;" color="#EC9144" name="arrow" />
- </div> -->
- </div>
- </div>
-
- <div class="model-content">
- <div class="content-header">
- ${farm.farmName}
- </div>
- <div class="content-body">
- <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
- <block class="swiper-image">`
- var str5 = '';
+ //生产企业begin
+ var str5 = ''
var urls = farm.picture.split(",");
if (urls.length > 0) {
urls.forEach(item => {
@@ -1019,102 +934,122 @@
</swiper-item>`
})
}
- var str6 = `</block></swiper>
+ $('#swImg').append(str5)
+ //生产企业end
- </div>
- <div class="text-intro">
- ${farm.introduce}
- </div>
- <div class="content-footer">
- </div>
- </div>
- </div>`
-
- // <div class="btn-grounp">
- // <div class="l">
- // <div class="plan">
- // ${num} %
- // </div>
- // <div class="text">
- // 溯源完整度
- // </div>
- // </div>
- // <div class="r">
- // <van-button bind:click="editTracability" round custom-style="margin-right: 40px; width: 200px; height: 72px; border: 2px solid #5ABF78; background: #fff; color: #5ABF78; font-size: 30px;">编辑溯源</van-button>
-
- // <van-button bind:click="submit" round custom-style="width: 200px; height: 72px; border: none; background: #5ABF78; color: #fff; font-size: 30px;">分享</van-button>
- // </div>
- // </div>
-
- // var dom = $('.page-main-container');
- dom.empty();
- dom.append(str0 + str1 + str2 + strvedio + str10 + strdetection + str11 + str3 + str4 + str5 + str6);
-
- var videoBody = document.getElementById('video-body'),
- videoElement = document.getElementById('video-element');
-
- var slide = false,
- soundWidth = 0;
- var flvPlayer = null;
- //初始化视频配置
- if (flvjs.isSupported()) {
- flvPlayer = flvjs.createPlayer({
- type: 'flv',
- url: window.videoList[0].wssFlv,
- hasAudio: false
- });
-
-
- flvPlayer.attachMediaElement(videoElement);
- flvPlayer.load();
- }
-
- videoElement.style.width = "100%";
- videoElement.style.height = "385px";
- videoElement.style.objectFit = "fill";
-
- //切换视频
- $('.jksp .content-footer .equi-btn').click(function () {
- var ind = $(this).index()
- window.videoList.some((item, index) => {
- console.log('1112', item, index);
- if (ind == index) {
- //暂停播放数据流
- flvPlayer.pause();
- //取消数据流加载
- flvPlayer.unload();
- //将播放实例从节点中取出
- flvPlayer.detachMediaElement();
- //销毁播放实例
- flvPlayer.destroy();
- //重新创建流实例
- flvPlayer = flvjs.createPlayer({
- type: 'flv',
- url: window.videoList[index].wssFlv,
- hasAudio: false
- });
-
- flvPlayer.attachMediaElement(videoElement);
- flvPlayer.load();
- }
+ // 监控/监测数据begin
+ axios.get(
+ 'https://dev.jxpskj.com:8023/pyh-station/stationAndVideo/queryStationAndVideoInfoData?type=All&landId=' +
+ recovery.landId).then(function (res) {
+ var staList = res.data.data.staList;
+ var vidList = res.data.data.vidList;
+ window.detectionList = staList;
+ window.videoList = vidList;
+ //监控展示
+ var ele = document.getElementById("videoElement");
+ var player = new WebRtcPlayer(ele);
+ var videoUrl = vidList[0].webRtc
+ player.Open(videoUrl)
+ //监控列表
+ var jkBtn = ''
+ vidList.forEach((item, index) => {
+ jkBtn = jkBtn + `<div class="equi-btn">${item.name}</div>`
})
- })
+ $('#videoFooter').append(jkBtn)
+ $('.equi-btn')[0].classList.add('equiBtnOn')
- //检测点下拉切换事件
- $('#select').change(function () {
- var bind = $(this).val()
- window.detectionList.some((e, index) => {
- if (bind == e.name) {
- var detectionlist = document.getElementById("detectionlist");
- //先清空
- detectionlist.innerHTML = "";
- //再追加
- var weatherList = e.weatherList;
- var strdetection = "";
- if (weatherList.length > 0) {
- weatherList.forEach(item => {
- if (item.name != '监测时间') {
- strdetection = strdetection + `<div class="list">
+ //切换视频
+ $('.jksp .content-footer .equi-btn').click(function () {
+ for (var i = 0; i < $('.equi-btn').length; i++) {
+ $('.equi-btn')[i].classList.remove('equiBtnOn')
+ }
+ $(this)[0].classList.add('equiBtnOn')
+ var btnText = $(this)[0].innerText
+ vidList.forEach((item, index) => {
+ if (item.name == btnText) {
+ var newVideoUrl = item.webRtc
+ player.Open(newVideoUrl)
+ }
+ })
+ })
+ //监测点
+ var jcList = ''
+ staList.forEach(item => {
+ jcList = jcList + `<option>${item.name}</option>`
+ })
+ $('#select').append(jcList)
+ //更新时间
+ var timeStr = ''
+ if (staList.length > 0) {
+ var sta = staList[0];
+ var time = sta.weatherTime;
+ //当前时间
+ var date = new Date();
+ //计算时间差
+ var crud = date.getTime() - new Date(time).getTime();
+ //计算出相差天数
+ var days = Math.floor(crud / (24 * 3600 * 1000))
+ timeStr = days + "天";
+
+ if (days == 0) {
+ //计算出小时数
+ var leave1 = crud % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
+ var hours = Math.floor(leave1 / (3600 * 1000))
+ timeStr = hours + "小时";
+
+ if (hours == 0) {
+ //计算相差分钟数
+ var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
+ var minutes = Math.floor(leave2 / (60 * 1000))
+ timeStr = minutes + "分钟";
+
+ if (minutes == 0) {
+ //计算相差秒数
+ var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
+ var seconds = Math.round(leave3 / 1000)
+ timeStr = seconds + "秒";
+ }
+ }
+ }
+ timeStr = timeStr + '前更新'
+ }
+ $('#sitedatetext').text(timeStr)
+ //监测数据展示
+ var jcStr = ''
+ var weatherList = staList[0].weatherList;
+ if (weatherList.length > 0) {
+ weatherList.forEach(item => {
+ if (item.name != '监测时间') {
+ jcStr = jcStr + `<div class="list">
+ <div class="l">
+ <div class="type">${item.name}</div>
+ <div class="unit">
+ 单位：${item.unit}
+ </div>
+ </div>
+ <div class="r">
+ ${item.value}
+ </div>
+ </div>`
+ }
+ })
+ }
+ $('#detectionlist').append(jcStr)
+ //检测点下拉切换事件
+ $('#select').change(function () {
+ var bind = $(this).val()
+ window.detectionList.some((e, index) => {
+ if (bind == e.name) {
+ var detectionlist = document.getElementById("detectionlist");
+ //先清空
+ detectionlist.innerHTML = "";
+ //再追加
+ var weatherList = e.weatherList;
+ var strdetection = "";
+ if (weatherList.length > 0) {
+ weatherList.forEach(item => {
+ if (item.name != '监测时间') {
+ strdetection = strdetection + `<div class="list">
<div class="l">
<div class="type">${item.name}</div>
<div class="unit">
@@ -1125,59 +1060,62 @@
${item.value}
</div>
</div>`
- }
- })
- }
- detectionlist.innerHTML = strdetection;
+ }
+ })
+ }
+ detectionlist.innerHTML = strdetection;
- //更新时间替换
- var sitedatetext = document.getElementById("sitedatetext");
- //先清空
- sitedatetext.innerHTML = "";
- var timeStr = '';
- var time = e.weatherTime;
- //当前时间
- var date = new Date();
- //计算时间差
- var crud = date.getTime() - new Date(time).getTime();
- //计算出相差天数
- var days = Math.floor(crud / (24 * 3600 * 1000))
- timeStr = days + "天";
+ //更新时间替换
+ var sitedatetext = document.getElementById("sitedatetext");
+ //先清空
+ sitedatetext.innerHTML = "";
+ var timeStr = '';
+ var time = e.weatherTime;
+ //当前时间
+ var date = new Date();
+ //计算时间差
+ var crud = date.getTime() - new Date(time).getTime();
+ //计算出相差天数
+ var days = Math.floor(crud / (24 * 3600 * 1000))
+ timeStr = days + "天";
- if (days == 0) {
- //计算出小时数
- var leave1 = crud % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
- var hours = Math.floor(leave1 / (3600 * 1000))
- timeStr = hours + "小时";
+ if (days == 0) {
+ //计算出小时数
+ var leave1 = crud % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
+ var hours = Math.floor(leave1 / (3600 * 1000))
+ timeStr = hours + "小时";
- if (hours == 0) {
- //计算相差分钟数
- var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
- var minutes = Math.floor(leave2 / (60 * 1000))
- timeStr = minutes + "分钟";
+ if (hours == 0) {
+ //计算相差分钟数
+ var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
+ var minutes = Math.floor(leave2 / (60 * 1000))
+ timeStr = minutes + "分钟";
- if (minutes == 0) {
- //计算相差秒数
- var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
- var seconds = Math.round(leave3 / 1000)
- timeStr = seconds + "秒";
+ if (minutes == 0) {
+ //计算相差秒数
+ var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
+ var seconds = Math.round(leave3 / 1000)
+ timeStr = seconds + "秒";
+ }
}
}
- }
- //填充时间参数
- sitedatetext.innerHTML = `<div class="site-date-text" id="sitedatetext">
+ //填充时间参数
+ if (time != null) {
+ sitedatetext.innerHTML = `<div class="site-date-text" id="sitedatetext">
${timeStr}前更新</div>`;
- }
+ } else {
+ sitedatetext.innerHTML = '暂无数据'
+ }
+
+ }
+ })
})
+
})
- });
- });
+ // 监控/监测数据end
+ })
+ })
- </script>
-
- <script>
-
- </script>
-</body>
+</script>
</html>
--
Gitblit v1.9.3