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] 溯源码页面修改
---
/dev/null | 945 ----------------------
vue.config.js | 4
public/js/WebRtcPlayer.js | 79
src/views/land/landAdd.vue | 628 +++++++-------
public/traceablityInfo.html | 836 +++++++++----------
5 files changed, 742 insertions(+), 1,750 deletions(-)
diff --git a/public/js/WebRtcPlayer.js b/public/js/WebRtcPlayer.js
index 5836516..8a2d3a7 100644
--- a/public/js/WebRtcPlayer.js
+++ b/public/js/WebRtcPlayer.js
@@ -4,73 +4,72 @@
* @param {Element} ele
*/
constructor(ele) {
- this.ele = ele;
+ this.ele = ele
// this.PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
- this.PeerConnection = window.RTCPeerConnection;
+ this.PeerConnection = window.RTCPeerConnection
}
- Open(url) {
- if(this.localpc){
- this.Close();
+ Open (url) {
+ if (this.localpc) {
+ this.Close()
}
- this.localpc = new this.PeerConnection(null);
+ 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.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.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);
+ 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';
+ 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("播放成功");
+ console.log("播放成功")
}).catch(e => {
- console.error("播放错误:" + e);
- });
- });
+ console.error("播放错误:" + e)
+ })
+ })
})
- .catch(e => "添加ICE候选人过程错误: " + e);
+ .catch(e => "添加ICE候选人过程错误: " + e)
}
- Close() {
- if(this.localpc){
- this.localpc.close();
- this.localpc = null;
+ 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');
+ 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.responseText.length < 1) return
if (xhr.status === 200) {
- success(xhr.responseText);
+ success(xhr.responseText)
}
- };
- xhr.send(body);
+ }
+ xhr.send(body)
}
}
\ No newline at end of file
diff --git a/public/newtrac.html b/public/newtrac.html
deleted file mode 100644
index 0f3aa56..0000000
--- a/public/newtrac.html
+++ /dev/null
@@ -1,945 +0,0 @@
-<!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 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>
diff --git a/src/views/land/landAdd.vue b/src/views/land/landAdd.vue
index 6664737..ea3c364 100644
--- a/src/views/land/landAdd.vue
+++ b/src/views/land/landAdd.vue
@@ -1,343 +1,343 @@
<template>
- <el-dialog
- :title="title"
- :modal-append-to-body="false"
- :append-to-body="true"
- :close-on-click-modal="false"
- width="80%"
- :visible.sync="visible"
- top="10vh"
- >
- <avue-form ref="form" v-model="form" :option="option" @submit="submit">
- <!-- 地图插入 -->
- <template slot-scope="{ type, disabled }" slot="line">
- <!-- <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere> -->
- </template>
- </avue-form>
- <div class="map">
- <iframe :src="url" frameborder="0" width="100%" height="100%"></iframe>
- </div>
- </el-dialog>
+ <el-dialog
+ :title="title"
+ :modal-append-to-body="false"
+ :append-to-body="true"
+ :close-on-click-modal="false"
+ width="80%"
+ :visible.sync="visible"
+ top="10vh"
+ >
+ <avue-form ref="form" v-model="form" :option="option" @submit="submit">
+ <!-- 地图插入 -->
+ <template slot-scope="{ type, disabled }" slot="line">
+ <!-- <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere> -->
+ </template>
+ </avue-form>
+ <div class="map">
+ <iframe :src="url" frameborder="0" width="100%" height="100%"></iframe>
+ </div>
+ </el-dialog>
</template>
<script>
-import { mapGetters } from "vuex";
-import { getFarmList,getDetail } from "@/api/farm/farm";
-import { getDeptTree } from "@/api/system/dept";
-import { add } from "@/api/land/land";
-import website from "@/config/website";
-import domtoimage from "dom-to-image";
-import h2 from "html2canvas";
-import getMapDataInThere from "./getMapDataInThere.vue";
-import { number } from "echarts";
+import { mapGetters } from "vuex"
+import { getFarmList, getDetail } from "@/api/farm/farm"
+import { getDeptTree } from "@/api/system/dept"
+import { add } from "@/api/land/land"
+import website from "@/config/website"
+import domtoimage from "dom-to-image"
+// import h2 from "html2canvas";
+import getMapDataInThere from "./getMapDataInThere.vue"
+import { number } from "echarts"
// import canvas2Image from 'canvas2Image'
export default {
- components: {
- getMapDataInThere,
- },
- data() {
- return {
- title: "新增地块",
- form: {},
- option: {
- emptyBtn: false,
- submitText: "保存",
- submitBtn: false,
- gutter: 30,
- column: [
- {
- label: "地块名称",
- prop: "landName",
- rules: [
- {
- required: true,
- message: "请输入地块名称",
- trigger: "blur",
- },
- ],
- },
- {
- label: "所属农场",
- prop: "farmId",
- type: "tree",
- value: "",
- dicData: [],
- props: {
- label: "farmName",
- value: "id",
+ components: {
+ getMapDataInThere,
+ },
+ data () {
+ return {
+ title: "新增地块",
+ form: {},
+ option: {
+ emptyBtn: false,
+ submitText: "保存",
+ submitBtn: false,
+ gutter: 30,
+ column: [
+ {
+ label: "地块名称",
+ prop: "landName",
+ rules: [
+ {
+ required: true,
+ message: "请输入地块名称",
+ trigger: "blur",
+ },
+ ],
+ },
+ {
+ label: "所属农场",
+ prop: "farmId",
+ type: "tree",
+ value: "",
+ dicData: [],
+ props: {
+ label: "farmName",
+ value: "id",
+ },
+ disabled: true,
+ slot: true,
+ rules: [
+ {
+ required: true,
+ message: "请选择所属农场",
+ trigger: "click",
+ },
+ ],
+ },
+ {
+ label: "地块类型",
+ type: "select",
+ prop: "landType",
+ dicUrl: "/api/blade-system/dict-biz/dictionary?code=land",
+ props: {
+ label: "dictValue",
+ value: "dictKey",
+ },
+ dataType: "number",
+ rules: [
+ {
+ required: true,
+ message: "请选择地块类型",
+ trigger: "blur",
+ },
+ ],
+ },
+ {
+ label: "面积",
+ prop: "landArea",
+ rules: [
+ {
+ required: true,
+ message: "请输入面积",
+ trigger: "click",
+ },
+ ],
+ span: 6,
+ type: "number",
+ controls: false,
+ },
+ {
+ label: "面积单位",
+ prop: "landUnit",
+ value: "0",
+ type: "select",
+ dicUrl: "/api/blade-system/dict-biz/dictionary?code=landunit",
+ props: {
+ label: "dictValue",
+ value: "dictKey",
+ },
+ rules: [
+ {
+ required: true,
+ message: "请选择面积单位",
+ trigger: "click",
+ },
+ ],
+ dataType: "number",
+ span: 6,
+ },
+ // {
+ // label: "地块展示",
+ // labelWidth: "0",
+ // prop: "line",
+ // className: "mapClass",
+ // span: 24,
+ // formslot: true,
+ // }
+ ],
},
- disabled: true,
- slot: true,
- rules: [
- {
- required: true,
- message: "请选择所属农场",
- trigger: "click",
- },
- ],
- },
- {
- label: "地块类型",
- type: "select",
- prop: "landType",
- dicUrl: "/api/blade-system/dict-biz/dictionary?code=land",
- props: {
- label: "dictValue",
- value: "dictKey",
- },
- dataType: "number",
- rules: [
- {
- required: true,
- message: "请选择地块类型",
- trigger: "blur",
- },
- ],
- },
- {
- label: "面积",
- prop: "landArea",
- rules: [
- {
- required: true,
- message: "请输入面积",
- trigger: "click",
- },
- ],
- span: 6,
- type: "number",
- controls: false,
- },
- {
- label: "面积单位",
- prop: "landUnit",
- value: "0",
- type: "select",
- dicUrl: "/api/blade-system/dict-biz/dictionary?code=landunit",
- props: {
- label: "dictValue",
- value: "dictKey",
- },
- rules: [
- {
- required: true,
- message: "请选择面积单位",
- trigger: "click",
- },
- ],
- dataType: "number",
- span: 6,
- },
- // {
- // label: "地块展示",
- // labelWidth: "0",
- // prop: "line",
- // className: "mapClass",
- // span: 24,
- // formslot: true,
- // }
- ],
- },
- url: "",
- landUrl: "",
- polygon: [],
- area: "",
- farmInfo:{},
- visible: false,
- };
- },
- created() {
-
- },
- computed: {
- ...mapGetters([
- "userInfo",
- "permission",
- "polygons",
- "$farmId",
- "drawMapUrlBase",
- ]),
- },
- watch: {
- landUrl: {
- handler(newVal, oldVal) {
- if (newVal) {
- this.$refs.form.submit();
+ url: "",
+ landUrl: "",
+ polygon: [],
+ area: "",
+ farmInfo: {},
+ visible: false,
}
- },
},
- "form.landName": {
- handler(newVal, oldVal) {
- this.landUrl = "";
- },
- },
- "form.landType": {
- handler(newVal, oldVal) {
- this.landUrl = "";
- },
- },
- "form.landArea": {
- handler(newVal, oldVal) {
- this.landUrl = "";
- },
- },
- "form.landUnit": {
- handler(newVal, oldVal) {
- this.landUrl = "";
- },
- },
- },
- mounted() {
- this.initData(this.userInfo.tenant_id);
- window.addEventListener("message", this.handleMessage);
- },
- methods: {
- handleMessage(event) {
- if (Number.isFinite(event.data)) {
- this.form.landArea = (event.data * 0.0015).toFixed(2);
- }
-
- if (Object.prototype.toString.call(event.data) === "[object Object]") {
- var obj = event.data;
- this.polygon = obj.polygons;
- this.landUrl = obj.url;
- }
- },
- initData(tenantId) {
- getFarmList().then((res) => {
- const column = this.findObject(this.option.column, "farmId");
- column.dicData = res.data.data;
- });
- },
- //初始化
- init() {
- //清空面的数据
- this.$store.commit("clear_polygon");
- this.form.landArea = 0
- this.visible = true;
- this.form.farmId = this.$farmId;
-
- getDetail(this.form.farmId).then(res=>{
- this.farmInfo = res.data.data
- this.url = this.drawMapUrlBase + "/base?type=1&lng=112&lat=24&status=manage&longitude="+this.farmInfo.longitude+"&latitude="+this.farmInfo.latitude;
-
- })
-
-
+ created () {
},
- // 表单提交
- submit(row, done) {
- row["deptId"] = this.userInfo.dept_id;
- // row.farmId = this.farm.id
-
- var that = this;
- var poly = [];
- if (this.polygon.length != 0) {
- this.polygon.forEach((e) => {
- poly.push({
- lng: e[0],
- lat: e[1],
- });
- });
- this.polygon = poly;
- }
-
- if (this.polygon.length == 0) {
- //没有面的数据
- // this.$refs.getMapData.isCheck = true
- // loading()
- } else {
- //如果有值，空间坐标转换
- let pol = this.polygon;
- let polLength = this.polygon.length - 1;
- let usePolygons = "";
- for (let k in pol) {
- usePolygons += pol[k].lng + "," + pol[k].lat;
- if (k != polLength) {
- usePolygons += ";";
- }
- }
- //设置坐标点
- row.userId = this.userInfo.user_id;
- row.landRange = usePolygons;
- }
-
- // if (this.polygons.length == 0) {
- // //没有面的数据
- // // this.$refs.getMapData.isCheck = true
- // // loading()
- // } else {
- // //如果有值，空间坐标转换
- // let pol = this.polygons
- // let polLength = this.polygons.length - 1
- // let usePolygons = ""
- // for (let k in pol) {
- // usePolygons += pol[k].lng + "," + pol[k].lat
- // if (k != polLength) {
- // usePolygons += ";"
- // }
- // }
- // //设置坐标点
- // row.userId = this.userInfo.user_id
- // row.landRange = usePolygons
- // console.log(row.landRange)
- // }
-
- row["url"] = this.landUrl;
- // row['landArea'] = this.area
-
- if (row.landArea < 0) {
- this.$message.warning("地块面积不能为负数");
- done();
- return;
- }
-
- add(row).then(
- () => {
- that.$emit("refreshOnLoad");
- that.$refs.form.resetFields();
- that.form.landUnit = "0";
- that.visible = false;
- this.$message({
- type: "success",
- message: "操作成功!",
- });
- done();
+ computed: {
+ ...mapGetters([
+ "userInfo",
+ "permission",
+ "polygons",
+ "$farmId",
+ "drawMapUrlBase",
+ ]),
+ },
+ watch: {
+ landUrl: {
+ handler (newVal, oldVal) {
+ if (newVal) {
+ this.$refs.form.submit()
+ }
+ },
},
- (error) => {
- // loading()
- window.console.log(error);
- }
- );
+ "form.landName": {
+ handler (newVal, oldVal) {
+ this.landUrl = ""
+ },
+ },
+ "form.landType": {
+ handler (newVal, oldVal) {
+ this.landUrl = ""
+ },
+ },
+ "form.landArea": {
+ handler (newVal, oldVal) {
+ this.landUrl = ""
+ },
+ },
+ "form.landUnit": {
+ handler (newVal, oldVal) {
+ this.landUrl = ""
+ },
+ },
},
+ mounted () {
+ this.initData(this.userInfo.tenant_id)
+ window.addEventListener("message", this.handleMessage)
+ },
+ methods: {
+ handleMessage (event) {
+ if (Number.isFinite(event.data)) {
+ this.form.landArea = (event.data * 0.0015).toFixed(2)
+ }
- setMapData(val) {
- this.LineData = val[0];
- this.PointData = val[1];
- },
+ if (Object.prototype.toString.call(event.data) === "[object Object]") {
+ var obj = event.data
+ this.polygon = obj.polygons
+ this.landUrl = obj.url
+ }
+ },
+ initData (tenantId) {
+ getFarmList().then((res) => {
+ const column = this.findObject(this.option.column, "farmId")
+ column.dicData = res.data.data
+ })
+ },
+ //初始化
+ init () {
+ //清空面的数据
+ this.$store.commit("clear_polygon")
+ this.form.landArea = 0
+ this.visible = true
+ this.form.farmId = this.$farmId
- showMap() {
- this.mapVisible = true;
+ getDetail(this.form.farmId).then(res => {
+ this.farmInfo = res.data.data
+ this.url = this.drawMapUrlBase + "/base?type=1&lng=112&lat=24&status=manage&longitude=" + this.farmInfo.longitude + "&latitude=" + this.farmInfo.latitude
+
+ })
+
+
+
+ },
+ // 表单提交
+ submit (row, done) {
+ row["deptId"] = this.userInfo.dept_id
+ // row.farmId = this.farm.id
+
+ var that = this
+ var poly = []
+ if (this.polygon.length != 0) {
+ this.polygon.forEach((e) => {
+ poly.push({
+ lng: e[0],
+ lat: e[1],
+ })
+ })
+ this.polygon = poly
+ }
+
+ if (this.polygon.length == 0) {
+ //没有面的数据
+ // this.$refs.getMapData.isCheck = true
+ // loading()
+ } else {
+ //如果有值，空间坐标转换
+ let pol = this.polygon
+ let polLength = this.polygon.length - 1
+ let usePolygons = ""
+ for (let k in pol) {
+ usePolygons += pol[k].lng + "," + pol[k].lat
+ if (k != polLength) {
+ usePolygons += ";"
+ }
+ }
+ //设置坐标点
+ row.userId = this.userInfo.user_id
+ row.landRange = usePolygons
+ }
+
+ // if (this.polygons.length == 0) {
+ // //没有面的数据
+ // // this.$refs.getMapData.isCheck = true
+ // // loading()
+ // } else {
+ // //如果有值，空间坐标转换
+ // let pol = this.polygons
+ // let polLength = this.polygons.length - 1
+ // let usePolygons = ""
+ // for (let k in pol) {
+ // usePolygons += pol[k].lng + "," + pol[k].lat
+ // if (k != polLength) {
+ // usePolygons += ";"
+ // }
+ // }
+ // //设置坐标点
+ // row.userId = this.userInfo.user_id
+ // row.landRange = usePolygons
+ // console.log(row.landRange)
+ // }
+
+ row["url"] = this.landUrl
+ // row['landArea'] = this.area
+
+ if (row.landArea < 0) {
+ this.$message.warning("地块面积不能为负数")
+ done()
+ return
+ }
+
+ add(row).then(
+ () => {
+ that.$emit("refreshOnLoad")
+ that.$refs.form.resetFields()
+ that.form.landUnit = "0"
+ that.visible = false
+ this.$message({
+ type: "success",
+ message: "操作成功!",
+ })
+ done()
+ },
+ (error) => {
+ // loading()
+ window.console.log(error)
+ }
+ )
+ },
+
+ setMapData (val) {
+ this.LineData = val[0]
+ this.PointData = val[1]
+ },
+
+ showMap () {
+ this.mapVisible = true
+ },
},
- },
};
</script>
<style lang="scss" scoped>
.mapClass div label {
- display: none;
+ display: none;
}
#getMapData {
- width: 90%;
- position: relative;
- height: 400px;
- top: 10px;
- left: 90px;
+ width: 90%;
+ position: relative;
+ height: 400px;
+ top: 10px;
+ left: 90px;
}
.map {
- height: 450px;
+ height: 450px;
}
</style>
diff --git a/vue.config.js b/vue.config.js
index d37c94c..e752b80 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -45,9 +45,9 @@
proxy: {
'/api': {
//本地服务接口地址
- target: 'http://192.168.0.207:89',
+ // target: 'http://192.168.0.207:89',
//远程演示服务地址,可用于直接启动项目
- // target: 'http://182.106.212.58:8013/api',
+ target: 'http://182.106.212.58:8020/api',
ws: true,
pathRewrite: {
'^/api': '/'
--
Gitblit v1.9.3