From e36ce8a4943cae5cd0cb46ea5373269e06eb9d56 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Sat, 03 Sep 2022 17:46:03 +0800
Subject: [PATCH] 溯源码页面优化
---
public/js/WebRtcPlayer.js | 76 ++++
public/newtrac.html | 945 +++++++++++++++++++++++++++++++++++++++++++++++++
public/traceablityInfo.html | 113 ++---
3 files changed, 1,060 insertions(+), 74 deletions(-)
diff --git a/public/js/WebRtcPlayer.js b/public/js/WebRtcPlayer.js
new file mode 100644
index 0000000..5836516
--- /dev/null
+++ b/public/js/WebRtcPlayer.js
@@ -0,0 +1,76 @@
+class WebRtcPlayer {
+ /**
+ * WebRtc播放器
+ * @param {Element} ele
+ */
+ constructor(ele) {
+ this.ele = ele;
+ // this.PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
+ this.PeerConnection = window.RTCPeerConnection;
+
+ }
+ Open(url) {
+ if(this.localpc){
+ this.Close();
+ }
+ this.localpc = new this.PeerConnection(null);
+ const AudioTransceiverInit = {
+ direction: 'recvonly',
+ sendEncodings: []
+ };
+ const VideoTransceiverInit = {
+ direction: 'recvonly',
+ sendEncodings: []
+ };
+ this.localpc.addTransceiver('audio', AudioTransceiverInit);
+ this.localpc.addTransceiver('video', VideoTransceiverInit);
+ let that = this;
+ this.localpc.ontrack = function (e) {
+ if (!that.localpc.stream) {
+ that.localpc.streamId = e.track.id;
+ that.localpc.stream = new MediaStream();
+ that.ele.srcObject = that.localpc.stream;
+ that.ele.muted = true;
+ that.ele.autoplay = true;
+ }
+ that.localpc.stream.addTrack(e.track);
+ }
+
+ this.localpc.createOffer()
+ .then(offer => this.localpc.setLocalDescription(offer))
+ .then(() => {
+ that.getSdp(url, this.localpc.localDescription.sdp, function (data) {
+ console.log("pullStreamRes:", data);
+ data = JSON.parse(data);
+ if (data.code != 0) return;
+ let anwser = {};
+ anwser.sdp = data.sdp;
+ anwser.type = 'answer';
+ that.localpc.setRemoteDescription(anwser).then(() => {
+ console.log("播放成功");
+ }).catch(e => {
+ console.error("播放错误:" + e);
+ });
+ });
+ })
+ .catch(e => "添加ICE候选人过程错误: " + e);
+ }
+ Close() {
+ if(this.localpc){
+ this.localpc.close();
+ this.localpc = null;
+ }
+ }
+ getSdp(url, body, success) {
+ let xhr = new XMLHttpRequest();
+ xhr.open('POST', url);
+ xhr.setRequestHeader('Content-Type', 'text/plain;charset=utf-8');
+ xhr.onreadystatechange = function () {
+ if (xhr.responseText.length < 1) return;
+ if (xhr.status === 200) {
+ success(xhr.responseText);
+ }
+ };
+ xhr.send(body);
+ }
+}
\ No newline at end of file
diff --git a/public/newtrac.html b/public/newtrac.html
new file mode 100644
index 0000000..0f3aa56
--- /dev/null
+++ b/public/newtrac.html
@@ -0,0 +1,945 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>查看溯源</title>
+ <style>
+ .top-log {
+ position: relative;
+ height: 520px;
+ }
+
+ .top-log .btn-grounp {
+ position: absolute;
+ left: 0;
+ bottom: -1px;
+ width: 100%;
+ height: 100px;
+ 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: 3.5rem;
+ width: 18.75rem;
+ height: 18.75rem;
+ border-radius: 50%;
+ overflow: hidden;
+ }
+
+ .main-content .logo .btn {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 4rem;
+ line-height: 4rem;
+ text-align: center;
+ background: rgba(0, 0, 0, .4);
+ font-size: 1.5rem;
+ color: #fff;
+ }
+
+ .main-content .title {
+ margin-top: 1.875rem;
+ 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%;">
+ <!-- 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%" 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>
+
+ <!-- 权威检测 -->
+ <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" 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="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">
+ <img 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="http://182.106.212.58:8014/assets/images/sy/1272.png" />
+ 良心生产，不怕监督，24小时视频监控
+ </div>
+ <!-- str10 -->
+ </div>
+ </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%">
+ <option>${item.name}</option>
+ </select>
+ </div>
+ </div>
+ <div class="site-date">
+ <div class="site-date-text" id="sitedatetext">更新时间</div>
+ </div>
+ <div class="site-content" id="detectionlist">
+ <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>
+ <!-- <div class="site-content">
+ <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> -->
+ <!-- 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>
+ </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>
+ <!-- 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>
+</body>
+<script>
+ $(function () {
+ 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");
+ 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
+
+ // 页面数据渲染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
+
+ // 权威检测页面遍历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>
+ <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>`
+ }
+ $('#str1Dom').append(str1)
+ $('#contentImg1').attr('src', land.url)
+ $('#farmAddress').text(farm.farmAddress)
+ // 权威检测页面遍历end
+
+ // 种植环节遍历begin
+ 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>`
+ });
+ console.log(str3);
+ $('#recordBox').append(str3)
+ // 种植环节遍历end
+
+ // 监测数据更新begin
+ // 监测数据更新end
+
+ //生产企业begin
+ 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>`
+ })
+ }
+ $('#swImg').append(str5)
+ //生产企业end
+ })
+ })
+
+</script>
+
+</html>
diff --git a/public/traceablityInfo.html b/public/traceablityInfo.html
index 3c5bcd8..2c45870 100644
--- a/public/traceablityInfo.html
+++ b/public/traceablityInfo.html
@@ -345,7 +345,7 @@
.model-box.cd .model-content.jksp .content-footer .equi-btn {
display: flex;
align-items: center;
- justify-content: center;
+ /* justify-content: center; */
margin-left: 12px;
width: 196px;
height: 60px;
@@ -354,6 +354,9 @@
border: 1px solid #DCDCDC;
font-size: 24px;
color: #697580;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.model-box.cd .model-content.jksp .content-footer .equi-btn:first-child {
@@ -631,49 +634,6 @@
<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>
- (function (win, doc) {
- 'use strict';
- var options = {
- width: 750,
- dpr: win.devicePixelRatio
- };
- var html = doc.documentElement,
- width = html.getAttribute('data-width') || options.width,
- dpr = html.getAttribute('data-dpr') || options.dpr,
- viewPort = doc.querySelector('meta[name="viewport"]'),
- rotate = win.onorientationchange ? 'orientationchange' : 'resize';
-
- // 设置html fontSize
- function setSize() {
- var winWidth = win.innerWidth || html.clientWidth;
- html.style.fontSize = 16 * winWidth / width + 'px';
- };
-
- // 设置 initial-scale
- function setScale() {
- setSize();
- var viewContent = viewPort.getAttribute('content');
- var reg = /initial-scale=(\d(.\d+)?)/i;
- var matchRes = viewContent.match(reg);
- var scale = 1 / parseInt(dpr);
- if (matchRes && matchRes[1] == scale) {
- return;
- }
- var newContent = viewContent.replace(reg, function (a, b) {
- return a.replace(/\d(.\d+)?/i, scale);
- });
- viewPort.setAttribute('content', newContent);
- };
-
- win.addEventListener(rotate, setSize);
- window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame;
- requestAnimationFrame(setScale);
- }(window, document));
-
- </script>
-
</head>
@@ -708,20 +668,7 @@
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">
+ 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" />
@@ -767,11 +714,11 @@
</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">
+ 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>
@@ -793,13 +740,13 @@
</div>
</div>
</div>`
- });
- } else {
- str1 = str1 + `<div class="box"></div>`
- }
+ });
+ } else {
+ str1 = str1 + `<div class="box"></div>`
+ }
- var str2 = `
+ var str2 = `
</div>
</div>
@@ -821,7 +768,7 @@
<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}" />
+ <image style="width: 100%;height:100%" src="${land.url}" />
</div>
<div class="content-footer">
<div class="l">
@@ -838,6 +785,24 @@
<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;
+
+
+
+
//监控
@@ -1081,7 +1046,7 @@
// </div>
// </div>
- var dom = $('.page-main-container');
+ // var dom = $('.page-main-container');
dom.empty();
dom.append(str0 + str1 + str2 + strvedio + str10 + strdetection + str11 + str3 + str4 + str5 + str6);
@@ -1090,10 +1055,10 @@
var slide = false,
soundWidth = 0;
-
+ var flvPlayer = null;
//初始化视频配置
if (flvjs.isSupported()) {
- var flvPlayer = flvjs.createPlayer({
+ flvPlayer = flvjs.createPlayer({
type: 'flv',
url: window.videoList[0].wssFlv,
hasAudio: false
@@ -1108,11 +1073,11 @@
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();
@@ -1123,7 +1088,7 @@
//销毁播放实例
flvPlayer.destroy();
//重新创建流实例
- var flvPlayer = flvjs.createPlayer({
+ flvPlayer = flvjs.createPlayer({
type: 'flv',
url: window.videoList[index].wssFlv,
hasAudio: false
--
Gitblit v1.9.3