<!-- web 详情页 -->
|
<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="divport" content="width=device-width, initial-scale=1.0">
|
<style>
|
.top-log {
|
position: relative;
|
}
|
|
.top-log .btn-grounp {
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
width: 100%;
|
height: 80px;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
background: transparent;
|
}
|
|
.main-content {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.main-content .logo {
|
position: relative;
|
margin-top: 56px;
|
width: 300px;
|
height: 300px;
|
border-radius: 50%;
|
overflow: hidden;
|
}
|
|
.main-content .logo .btn {
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
height: 64px;
|
line-height: 64px;
|
text-align: center;
|
background: rgba(0, 0, 0, .4);
|
font-size: 24px;
|
color: #fff;
|
}
|
|
.main-content .title {
|
margin-top: 30px;
|
font-size: 48px;
|
font-weight: bold;
|
color: #333333;
|
}
|
|
.main-content .type {
|
display: flex;
|
margin-top: 10px;
|
width: 180px;
|
height: 36px;
|
font-size: 24px;
|
background: #7BDA8F;
|
color: #fff;
|
border-radius: 8px;
|
overflow: hidden;
|
}
|
|
.main-content .type .sub {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.main-content .type .icon {
|
width: 36px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: #6AC077;
|
}
|
|
.main-content .date {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 40px;
|
width: calc(100% - 60px);
|
height: 110px;
|
background: #E4F0F1;
|
border-radius: 34px;
|
font-size: 34px;
|
color: #5ABF78;
|
}
|
|
.model-box {
|
margin-top: 60px;
|
padding: 0 30px;
|
}
|
|
.model-box .model-title {
|
display: flex;
|
align-items: center;
|
height: 50px;
|
}
|
|
.model-box .model-title .l {
|
width: 5px;
|
height: 36px;
|
background: #5ABF78;
|
}
|
|
.model-box .model-title .title {
|
margin-left: 20px;
|
font-size: 36px;
|
font-weight: bold;
|
color: #333333;
|
}
|
|
.model-box .model-title .border {
|
flex: 1;
|
margin: 13px;
|
border-top: 1px dashed #D4DBE8;
|
border-bottom: 1px dashed #D4DBE8;
|
}
|
|
.model-box .model-title .status {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 24px;
|
color: #5ABF78;
|
}
|
|
.model-box .model-title .statu.no {
|
color: #EC9144;
|
}
|
|
.model-box .model-title .status view {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.model-box.qw .model-content {
|
display: flex;
|
flex-direction: column;
|
margin-top: 30px;
|
background: #fff;
|
border-radius: 30px;
|
}
|
|
.model-box.qw .model-content .box:first-child {
|
border-bottom: 2px solid #EEEEEE;
|
}
|
|
.model-box.qw .model-content .box {
|
flex: 1;
|
display: flex;
|
padding: 30px;
|
}
|
|
.model-box.qw .model-content .box>.r {
|
margin-left: 26px;
|
flex: 1;
|
font-size: 24px;
|
}
|
|
.model-box.qw .model-content .box>.r .title {
|
font-size: 32px;
|
font-weight: bold;
|
color: #333333;
|
}
|
|
.model-box.qw .model-content .box>.r .line-box {
|
margin-top: 16px;
|
display: flex;
|
}
|
|
.model-box.qw .model-content .box>.r .line-box .sub {
|
width: 120px;
|
color: #333333;
|
line-height: 36px;
|
}
|
|
.model-box.qw .model-content .box>.r .line-box .content {
|
flex: 1;
|
color: #666666;
|
line-height: 36px;
|
}
|
|
/* 容器 */
|
|
.model-box.cd .model-content {
|
margin-top: 30px;
|
background: #fff;
|
border-radius: 30px;
|
}
|
|
/* 头部 */
|
|
.model-box.cd .model-content .content-header {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 90px;
|
font-size: 30px;
|
color: #5ABF78;
|
}
|
|
.model-box.cd .model-content.jk .content-header {
|
color: #A255B5;
|
border-bottom: 2px solid #ECECEC;
|
}
|
|
/* 中间 */
|
|
.model-box.cd .model-content.dk .content-body {
|
height: 450px;
|
background: greenyellow;
|
}
|
|
.model-box.cd .model-content.jksp .content-body {
|
height: 385px;
|
/* background: #A255B5; */
|
}
|
|
.model-box.cd .model-content.jk .content-body {
|
border-bottom: 1px solid transparent;
|
}
|
|
.model-box.cd .model-content.jk .content-body .site-box {
|
margin: 26px 22px;
|
border-radius: 28px;
|
border: 2px solid #E3E3E3;
|
}
|
|
.model-box.cd .model-content.jk .content-body .site-box .site-title {
|
padding: 0 22px;
|
/* margin-top: 10px; */
|
height: 100px;
|
line-height: 100px;
|
/* display: flex;
|
align-items: center;
|
justify-content: space-between; */
|
font-size: 28px;
|
font-weight: bold;
|
color: #333333;
|
width: 100%;
|
}
|
|
.model-box.cd .model-content.jk .content-body .site-box .site-date {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin: 13px 0;
|
height: 2px;
|
background: #ECECEC;
|
}
|
|
.model-box.cd .model-content.jk .content-body .site-box .site-date .site-date-text {
|
padding: 0 18px;
|
/* height: 36px; */
|
background: #F4F4F4;
|
border-radius: 18px;
|
font-size: 24px;
|
color: #929292;
|
}
|
|
.model-box.cd .model-content.jk .content-body .site-box .site-content {
|
padding: 24px 22px;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
}
|
|
.model-box.cd .model-content.jk .content-body .site-box .site-content>div {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 16px;
|
padding: 16px 12px;
|
width: calc((100% - 18px) / 2);
|
background: #E9F1FC;
|
border-radius: 8px;
|
box-sizing: border-box;
|
}
|
|
.model-box.cd .model-content.jk .content-body .site-box .site-content>div:nth-child(1),
|
.model-box.cd .model-content.jk .content-body .site-box .site-content>div:nth-child(2) {
|
margin-top: 0;
|
}
|
|
.model-box.cd .model-content.jk .content-body .site-box .site-content>div .type {
|
font-size: 28px;
|
color: #333333;
|
}
|
|
.model-box.cd .model-content.jk .content-body .site-box .site-content>div .unit {
|
margin-top: 4px;
|
font-size: 24px;
|
color: #84898F;
|
}
|
|
.model-box.cd .model-content.jk .content-body .site-box .site-content>div .r {
|
font-size: 38px;
|
color: #5ABF78;
|
}
|
|
/* 底部 */
|
|
.model-box.cd .model-content .content-footer {
|
display: flex;
|
align-items: center;
|
height: 120px;
|
font-size: 24px;
|
}
|
|
.model-box.cd .model-content.dk .content-footer {
|
padding: 0 26px;
|
}
|
|
.model-box.cd .model-content.dk .content-footer .l {
|
width: 480px;
|
color: #666666;
|
}
|
|
.model-box.cd .model-content.dk .content-footer .r {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #5ABF78;
|
}
|
|
.model-box.cd .model-content.jksp .content-footer {
|
padding: 0 30px;
|
}
|
|
.model-box.cd .model-content.jksp .content-footer .equi-btn {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-left: 12px;
|
width: 196px;
|
height: 60px;
|
background: #F2F5F9;
|
border-radius: 9px;
|
border: 1px solid #DCDCDC;
|
font-size: 24px;
|
color: #697580;
|
}
|
|
.model-box.cd .model-content.jksp .content-footer .equi-btn:first-child {
|
margin-left: 0;
|
}
|
|
.model-box.cd .model-content.jksp .content-footer .equi-btn.on {
|
background: linear-gradient(90deg, #5ABB82 0%, #7BDA8F 100%);
|
border: none;
|
color: #fff;
|
}
|
|
/* 种植环节 */
|
|
.model-box.zz .model-content {
|
margin-top: 30px;
|
}
|
|
.model-box.zz .model-content .msg {
|
display: flex;
|
align-items: center;
|
height: 126px;
|
}
|
|
.model-box.zz .model-content .msg .r {
|
margin-left: 30px;
|
padding: 10px 26px;
|
position: relative;
|
flex: 1;
|
background: #fff;
|
font-size: 24px;
|
color: #999999;
|
border-radius: 16px;
|
}
|
|
.model-box.zz .model-content .msg .r text {
|
font-weight: bold;
|
color: #EC9144;
|
}
|
|
.model-box.zz .model-content .msg .r .r-b-msg {
|
margin-top: 10px;
|
color: #333333;
|
}
|
|
.model-box.zz .model-content .msg .r .point-to {
|
position: absolute;
|
top: 0;
|
left: -18px;
|
right: auto;
|
bottom: 0;
|
margin: auto;
|
width: 0;
|
height: 0;
|
border-top: 14px solid transparent;
|
border-right: 30px solid #fff;
|
border-bottom: 14px solid transparent;
|
z-index: -1;
|
}
|
|
.model-box.zz .model-content .record-box {
|
display: flex;
|
align-items: center;
|
}
|
|
.model-box.zz .model-content .record-box .l {
|
margin-left: 40px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.model-box.zz .model-content .record-box .l .point {
|
width: 20px;
|
height: 20px;
|
background: #5ABF78;
|
border-radius: 50%;
|
}
|
|
.model-box.zz .model-content .record-box .l .line {
|
width: 2px;
|
height: 150px;
|
background: #DEE3E7;
|
}
|
|
.model-box.zz .model-content .record-box .l .line.one {
|
width: 2px;
|
height: 100px;
|
background: #DEE3E7;
|
}
|
|
.model-box.zz .model-content .record-box .l .line.two {
|
width: 2px;
|
height: 100px;
|
background: #DEE3E7;
|
}
|
|
.model-box.zz .model-content .record-box .r {
|
margin-left: 64px;
|
flex: 1;
|
}
|
|
.model-box.zz .model-content .record-box .r .record-item {
|
margin-top: 30px;
|
padding: 32px 30px 42px;
|
background: #FFFFFF;
|
border-radius: 30px;
|
}
|
|
.model-box.zz .model-content .record-box .r .record-item .type {
|
font-size: 32px;
|
font-weight: bold;
|
color: #333333;
|
}
|
|
.model-box.zz .model-content .record-box .r .record-item .date-pel {
|
margin-top: 10px;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.model-box.zz .model-content .record-box .r .record-item .date-pel .date {
|
padding: 2px 20px;
|
font-size: 24px;
|
color: #fff;
|
background: linear-gradient(89deg, #60BA84 0%, #73DB90 100%);
|
border-radius: 10px;
|
}
|
|
.model-box.zz .model-content .record-box .r .record-item .date-pel .pel {
|
font-size: 28px;
|
color: #666666;
|
}
|
|
/* 生产企业 */
|
|
.model-box.sc .model-content {
|
margin-top: 30px;
|
/* padding-bottom: 30px; */
|
background: #fff;
|
border-radius: 30px;
|
}
|
|
.model-box.sc .model-content .content-header {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 124px;
|
font-size: 36px;
|
font-weight: bold;
|
color: #000000;
|
}
|
|
.model-box.sc .model-content .content-body {
|
height: 390px;
|
}
|
|
.model-box.sc .model-content .content-body .swiper {
|
height: 100%;
|
width: 100%;
|
}
|
|
.model-box.sc .model-content .content-body .swiper-image {
|
height: 100%;
|
width: 100%;
|
}
|
|
.model-box.sc .model-content .content-body .slide-image {
|
height: 100%;
|
width: 100%;
|
}
|
|
.model-box.sc .model-content .text-intro {
|
margin: 0 25px;
|
padding: 20px 0 34px;
|
line-height: 42px;
|
font-size: 24px;
|
color: #818592;
|
border-bottom: 2px solid #EAEEF4;
|
}
|
|
.model-box.sc .model-content .content-footer {
|
margin-top: 24px;
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-around;
|
}
|
|
.model-box.sc .model-content .content-footer>view {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.model-box.sc .model-content .content-footer>view .type {
|
margin-top: 6px;
|
font-size: 24px;
|
color: #697580;
|
}
|
|
.model-box.sc .model-content .content-footer>view .msg {
|
margin-top: 2px;
|
padding: 2px 6px;
|
background: #E4EBEE;
|
border-radius: 13px 13px 13px 13px;
|
font-size: 20px;
|
color: #697580;
|
}
|
|
.btn-grounp {
|
margin-top: 84px;
|
display: flex;
|
height: 148px;
|
background: #FFFFFF;
|
}
|
|
.btn-grounp .l {
|
margin-right: 76px;
|
width: 194px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.btn-grounp .l .plan {
|
font-size: 34px;
|
font-weight: bold;
|
color: #D55B26;
|
}
|
|
.btn-grounp .l .text {
|
margin-top: 2px;
|
font-size: 20px;
|
color: #A5AEB5;
|
}
|
|
.btn-grounp .r {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
}
|
|
/* #video-body {
|
display: inline-block;
|
height: 100%;
|
position: relative;
|
overflow: hidden;
|
} */
|
|
#video-footer {
|
width: 100%;
|
height: 60px;
|
background: rgba(0, 0, 0, 0.5);
|
margin-top: -63px;
|
position: relative;
|
}
|
|
#oper-btn {
|
position: absolute;
|
top: 10px;
|
left: 20px;
|
cursor: pointer;
|
}
|
|
#full-btn {
|
position: absolute;
|
top: 12px;
|
right: 20px;
|
cursor: pointer;
|
}
|
</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>
|
</head>
|
|
|
<body>
|
<div class="page-main-container" style="background: #F1F9F8;width:100%;height: 100%;">
|
|
<!-- <scroll-div scroll-top="{{scrollTop}}" refresher-enabled="{{true}}" bindrefresherrefresh="refresh" refresher-triggered="{{triggered}}" style="height: {{clientHeight}}" scroll-y bindscrolltolower="upcroll"> -->
|
|
<!-- </scroll-div> -->
|
|
</div>
|
<script>
|
var getData = function (name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
var r = window.location.search.substr(1).match(reg);
|
if (r != null) return decodeURI(r[2]);
|
return null;
|
};
|
var code = getData("code");
|
|
// var code = "22070000001";
|
|
|
axios.get('https://dev.jxpskj.com:8023/api/traceability/getTraceabilityDetailInfo?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;
|
|
//请求检测数据
|
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 str0 = `<div class="top-log">
|
<img width="100%" height="405px" src="http://182.106.212.58:8014/assets/images/sym/2.png" />
|
<div class="btn-grounp">
|
<img bindtap="scrollTo" data-class=".qw" width="176px" height="80px" src="http://182.106.212.58:8014/assets/images/sy/1418.png" />
|
<img bindtap="scrollTo" data-class=".cd" width="176px" height="80px" src="http://182.106.212.58:8014/assets/images/sy/1416.png" />
|
<img bindtap="scrollTo" data-class=".zz" width="176px" height="80px" src="http://182.106.212.58:8014/assets/images/sy/1415.png" />
|
<img bindtap="scrollTo" data-class=".sc" width="176px" height="80px" 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">
|
<div class="l">
|
<img width="204px" height="204px" src="${url}" />
|
</div>
|
<div class="r">
|
<div class="title">
|
${item.name}
|
</div>
|
<div class="org line-box">
|
<div class="sub">检测机构：</div>
|
<div class="content">${item.organName}</div>
|
</div>
|
<div class="ser line-box">
|
<div class="sub">证书编号：</div>
|
<div class="content">${item.code}</div>
|
</div>
|
<div class="date line-box">
|
<div class="sub">颁发日期：</div>
|
<div class="content">${item.time.replaceAll("-", ".")}</div>
|
</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>
|
<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 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">`
|
}
|
|
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>`
|
|
var str3 = '';
|
recordVOList.forEach((item, index) => {
|
str3 = str3 + `<div class="record-box">
|
<div class="l">
|
|
<div class="one line" style="${index == 0 ? 'background: transparent !important;' : ''}">
|
</div>
|
|
<div class="point">
|
</div>
|
|
<div class="two line" style="${index == recordVOList.length - 1 ? 'background: transparent !important;' : ''}">
|
</div>
|
|
</div>
|
<div class="r">
|
<div class="record-item">
|
<div class="type">${item.typeName}</div>
|
<div class="date-pel">
|
<div class="date">${item.time}</div>
|
<div class="pel">操作人：${item.realName}</div>
|
</div>
|
</div>
|
</div>
|
</div>`
|
});
|
|
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 = '';
|
var urls = farm.picture.split(",");
|
if (urls.length > 0) {
|
urls.forEach(item => {
|
str5 = str5 + `<swiper-item>
|
<image src="${item}" class="slide-image" />
|
</swiper-item>`
|
})
|
}
|
var str6 = `</block></swiper>
|
|
</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;
|
|
//初始化视频配置
|
if (flvjs.isSupported()) {
|
var 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) => {
|
if (ind == index) {
|
//暂停播放数据流
|
flvPlayer.pause();
|
//取消数据流加载
|
flvPlayer.unload();
|
//将播放实例从节点中取出
|
flvPlayer.detachMediaElement();
|
//销毁播放实例
|
flvPlayer.destroy();
|
//重新创建流实例
|
var flvPlayer = flvjs.createPlayer({
|
type: 'flv',
|
url: window.videoList[index].wssFlv,
|
hasAudio: false
|
});
|
|
flvPlayer.attachMediaElement(videoElement);
|
flvPlayer.load();
|
}
|
})
|
})
|
|
//检测点下拉切换事件
|
$('#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">
|
单位：${item.unit}
|
</div>
|
</div>
|
<div class="r">
|
${item.value}
|
</div>
|
</div>`
|
}
|
})
|
}
|
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 + "天";
|
|
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 + "秒";
|
}
|
}
|
}
|
//填充时间参数
|
sitedatetext.innerHTML = `<div class="site-date-text" id="sitedatetext">
|
${timeStr}前更新</div>`;
|
}
|
})
|
})
|
});
|
});
|
</script>
|
|
<script>
|
|
</script>
|
</body>
|
|
</html>
|
