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/traceablityInfo.html | 113 +++++++++++++++++++-------------------------------------
1 files changed, 39 insertions(+), 74 deletions(-)
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