From fef715fd34f81b386495e08b549f755503e8e2c1 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Wed, 31 Aug 2022 11:09:25 +0800
Subject: [PATCH] 12
---
public/traceablityInfo.html | 119 ++++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 85 insertions(+), 34 deletions(-)
diff --git a/public/traceablityInfo.html b/public/traceablityInfo.html
index ac8e040..3c5bcd8 100644
--- a/public/traceablityInfo.html
+++ b/public/traceablityInfo.html
@@ -8,14 +8,15 @@
<style>
.top-log {
position: relative;
+ height: 520px;
}
.top-log .btn-grounp {
position: absolute;
left: 0;
- bottom: 0;
+ bottom: -1px;
width: 100%;
- height: 80px;
+ height: 100px;
display: flex;
align-items: center;
justify-content: space-around;
@@ -31,9 +32,9 @@
.main-content .logo {
position: relative;
- margin-top: 56px;
- width: 300px;
- height: 300px;
+ margin-top: 3.5rem;
+ width: 18.75rem;
+ height: 18.75rem;
border-radius: 50%;
overflow: hidden;
}
@@ -42,16 +43,16 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 64px;
- line-height: 64px;
+ height: 4rem;
+ line-height: 4rem;
text-align: center;
background: rgba(0, 0, 0, .4);
- font-size: 24px;
+ font-size: 1.5rem;
color: #fff;
}
.main-content .title {
- margin-top: 30px;
+ margin-top: 1.875rem;
font-size: 48px;
font-weight: bold;
color: #333333;
@@ -625,10 +626,54 @@
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>
+
+ <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>
@@ -652,7 +697,8 @@
// var code = "22070000001";
- axios.get('https://dev.jxpskj.com:8023/api/traceability/getTraceabilityDetailInfos?code=' + code).then(function (res) {
+ 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;
@@ -664,7 +710,9 @@
var recovery = data.recoveryVO;
//请求检测数据
- axios.get('http://dev.jxpskj.com:8030/pyh-station/stationAndVideo/queryStationAndVideoInfoData?type=All&landId=' + recovery.landId).then(function (res) {
+ 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;
@@ -674,12 +722,12 @@
var str0 = `<div class="top-log">
- <img width="100%" height="405px" src="http://182.106.212.58:8014/assets/images/sym/2.png" />
+ <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="176px" height="80px" src="http://182.106.212.58:8014/assets/images/sy/1418.png" />
- <img bindtap="scrollTo" data-class=".cd" width="176px" height="80px" src="http://182.106.212.58:8014/assets/images/sy/1416.png" />
- <img bindtap="scrollTo" data-class=".zz" width="176px" height="80px" src="http://182.106.212.58:8014/assets/images/sy/1415.png" />
- <img bindtap="scrollTo" data-class=".sc" width="176px" height="80px" src="http://182.106.212.58:8014/assets/images/sy/1414.png" />
+ <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>
@@ -757,7 +805,7 @@
<div class="cd model-box">
<div class="model-title">
- <div class="l"></div>
+ <div class="l"></div>f
<div class="title">产地信息</div>
<div class="border"></div>
<div class="status">
@@ -808,11 +856,11 @@
</div>
</div><div class="content-footer">`
//遍历监控点
- vidList.forEach((item,index) => {
+ vidList.forEach((item, index) => {
strvedio = strvedio + `<div class="equi-btn on">
${item.name}
</div>`
- if(index>=1){
+ if (index >= 1) {
// equibtn.style.color = "#fff";
}
})
@@ -847,19 +895,19 @@
if (days == 0) {
//计算出小时数
- var leave1 = crud % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
+ var leave1 = crud % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
var hours = Math.floor(leave1 / (3600 * 1000))
timeStr = hours + "小时";
if (hours == 0) {
//计算相差分钟数
- var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
+ var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
var minutes = Math.floor(leave2 / (60 * 1000))
timeStr = minutes + "分钟";
if (minutes == 0) {
//计算相差秒数
- var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
+ var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
var seconds = Math.round(leave3 / 1000)
timeStr = seconds + "秒";
}
@@ -867,13 +915,14 @@
}
//读取第一个检测设备
- strdetection = strdetection + `<div class="site-title">
+ 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=>{
+ staList.forEach(item => {
strdetection = strdetection + `<option>${item.name}</option>`
})
@@ -1039,7 +1088,8 @@
var videoBody = document.getElementById('video-body'),
videoElement = document.getElementById('video-element');
- var slide = false, soundWidth = 0;
+ var slide = false,
+ soundWidth = 0;
//初始化视频配置
if (flvjs.isSupported()) {
@@ -1086,18 +1136,18 @@
})
//检测点下拉切换事件
- $('#select').change(function() {
- var bind = $(this).val()
- window.detectionList.some((e, index) => {
+ $('#select').change(function () {
+ var bind = $(this).val()
+ window.detectionList.some((e, index) => {
if (bind == e.name) {
- var detectionlist= document.getElementById("detectionlist");
+ var detectionlist = document.getElementById("detectionlist");
//先清空
detectionlist.innerHTML = "";
//再追加
var weatherList = e.weatherList;
var strdetection = "";
if (weatherList.length > 0) {
- weatherList.forEach( item => {
+ weatherList.forEach(item => {
if (item.name != '监测时间') {
strdetection = strdetection + `<div class="list">
<div class="l">
@@ -1116,7 +1166,7 @@
detectionlist.innerHTML = strdetection;
//更新时间替换
- var sitedatetext= document.getElementById("sitedatetext");
+ var sitedatetext = document.getElementById("sitedatetext");
//先清空
sitedatetext.innerHTML = "";
var timeStr = '';
@@ -1131,19 +1181,19 @@
if (days == 0) {
//计算出小时数
- var leave1 = crud % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
+ var leave1 = crud % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
var hours = Math.floor(leave1 / (3600 * 1000))
timeStr = hours + "小时";
if (hours == 0) {
//计算相差分钟数
- var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
+ var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
var minutes = Math.floor(leave2 / (60 * 1000))
timeStr = minutes + "分钟";
if (minutes == 0) {
//计算相差秒数
- var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
+ var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
var seconds = Math.round(leave3 / 1000)
timeStr = seconds + "秒";
}
@@ -1157,6 +1207,7 @@
})
});
});
+
</script>
<script>
--
Gitblit v1.9.3