From ad367fd6d9ebe243dfaa1281ca30d4829104b95c Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Sat, 09 Jul 2022 17:41:21 +0800
Subject: [PATCH] 新增溯源预览页面
---
/dev/null | 0
src/router/views/index.js | 8
src/views/traceability/traceability.vue | 23
public/traceablityInfo.html | 1040 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
src/views/traceability/details.vue | 38 ++
5 files changed, 1,104 insertions(+), 5 deletions(-)
diff --git a/public/traceabilityCode.html b/public/traceabilityCode.html
deleted file mode 100644
index e69de29..0000000
--- a/public/traceabilityCode.html
+++ /dev/null
diff --git a/public/traceablityInfo.html b/public/traceablityInfo.html
new file mode 100644
index 0000000..1cd96b4
--- /dev/null
+++ b/public/traceablityInfo.html
@@ -0,0 +1,1040 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="divport" content="width=device-width, initial-scale=1.0">
+ <style>
+ .top-log {
+ position: relative;
+ }
+
+ .top-log .btn-grounp {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 80px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ background: transparent;
+ }
+
+ .main-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .main-content .logo {
+ position: relative;
+ margin-top: 56px;
+ width: 300px;
+ height: 300px;
+ border-radius: 50%;
+ overflow: hidden;
+ }
+
+ .main-content .logo .btn {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 64px;
+ line-height: 64px;
+ text-align: center;
+ background: rgba(0, 0, 0, .4);
+ font-size: 24px;
+ color: #fff;
+ }
+
+ .main-content .title {
+ margin-top: 30px;
+ font-size: 48px;
+ font-weight: bold;
+ color: #333333;
+ }
+
+ .main-content .type {
+ display: flex;
+ margin-top: 10px;
+ width: 180px;
+ height: 36px;
+ font-size: 24px;
+ background: #7BDA8F;
+ color: #fff;
+ border-radius: 8px;
+ overflow: hidden;
+ }
+
+ .main-content .type .sub {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .main-content .type .icon {
+ width: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #6AC077;
+ }
+
+ .main-content .date {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 40px;
+ width: calc(100% - 60px);
+ height: 110px;
+ background: #E4F0F1;
+ border-radius: 34px;
+ font-size: 34px;
+ color: #5ABF78;
+ }
+
+ .model-box {
+ margin-top: 60px;
+ padding: 0 30px;
+ }
+
+ .model-box .model-title {
+ display: flex;
+ align-items: center;
+ height: 50px;
+ }
+
+ .model-box .model-title .l {
+ width: 5px;
+ height: 36px;
+ background: #5ABF78;
+ }
+
+ .model-box .model-title .title {
+ margin-left: 20px;
+ font-size: 36px;
+ font-weight: bold;
+ color: #333333;
+ }
+
+ .model-box .model-title .border {
+ flex: 1;
+ margin: 13px;
+ border-top: 1px dashed #D4DBE8;
+ border-bottom: 1px dashed #D4DBE8;
+ }
+
+ .model-box .model-title .status {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ color: #5ABF78;
+ }
+
+ .model-box .model-title .statu.no {
+ color: #EC9144;
+ }
+
+ .model-box .model-title .status view {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .model-box.qw .model-content {
+ display: flex;
+ flex-direction: column;
+ margin-top: 30px;
+ height: 642px;
+ background: #fff;
+ border-radius: 30px;
+ }
+
+ .model-box.qw .model-content .box:first-child {
+ border: 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;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 28px;
+ font-weight: bold;
+ color: #333333;
+ }
+
+ .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>view {
+ 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>view:nth-child(1),
+ .model-box.cd .model-content.jk .content-body .site-box .site-content>view:nth-child(2) {
+ margin-top: 0;
+ }
+
+ .model-box.cd .model-content.jk .content-body .site-box .site-content>view .type {
+ font-size: 28px;
+ color: #333333;
+ }
+
+ .model-box.cd .model-content.jk .content-body .site-box .site-content>view .unit {
+ margin-top: 4px;
+ font-size: 24px;
+ color: #84898F;
+ }
+
+ .model-box.cd .model-content.jk .content-body .site-box .site-content>view .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;
+ }
+ </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>
+</head>
+
+
+<body>
+ <div class="page-main-container" style="background: #F1F9F8;width:100%;height: 100%;">
+
+ <!-- <scroll-div scroll-top="{{scrollTop}}" refresher-enabled="{{true}}" bindrefresherrefresh="refresh" refresher-triggered="{{triggered}}" style="height: {{clientHeight}}" scroll-y bindscrolltolower="upcroll"> -->
+
+ <!-- </scroll-div> -->
+
+ </div>
+ <script>
+ var getData = function(name) {
+ var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+ var r = window.location.search.substr(1).match(reg);
+ if (r != null) return decodeURI(r[2]);
+ return null;
+ };
+ var code = getData("code");
+
+ // var code = "22060000002";
+
+
+ axios.get('https://dev.jxpskj.com:8023/api/traceability/getTraceabilityDetailInfo?code=' + code).then(function(res) {
+ // axios.get('http://192.168.0.114:89/traceability/getTraceabilityDetailInfo?code==22060000002').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="405px" src="http://182.106.212.58:8014/assets/images/sym/2.png" />
+ <div class="btn-grounp">
+ <img bindtap="scrollTo" data-class=".qw" width="176px" height="80px" src="http://182.106.212.58:8014/assets/images/sy/1418.png" />
+ <img bindtap="scrollTo" data-class=".cd" width="176px" height="80px" src="http://182.106.212.58:8014/assets/images/sy/1416.png" />
+ <img bindtap="scrollTo" data-class=".zz" width="176px" height="80px" src="http://182.106.212.58:8014/assets/images/sy/1415.png" />
+ <img bindtap="scrollTo" data-class=".sc" width="176px" height="80px" src="http://182.106.212.58:8014/assets/images/sy/1414.png" />
+ </div>
+ </div>
+
+ <div class="main-content">
+
+ <div class="logo">
+ <img width="100%" height="100%" src="${recovery.url}" />
+ <!-- <div class="btn">更换图片</div> -->
+ </div>
+
+ <div class="title">${recovery.strainName}</div>
+
+ <div class="type">
+ <div class="sub">${recovery.lx}</div>
+ <!-- <div class="icon">
+ <van-icon name="play" />
+ </div> -->
+ </div>
+
+ <div class="date">
+ 采收时间：${recovery.time.replaceAll("-",".")}
+ </div>
+
+ </div>
+ <div class="qw model-box">
+
+ <div class="model-title">
+ <div class="l"></div>
+ <div class="title">权威检测</div>
+ <div class="border"></div>
+ <div class="status">
+ <div>
+ <van-icon style="margin-right: 10px;" name="http://182.106.212.58:8014/assets/images/sym/1265.png" />
+ </div>
+ 可追溯
+ </div>
+ </div>
+
+ <div class="model-content">`
+ var str1 = '';
+ if (paperList.length > 0) {
+ paperList.forEach(item => {
+ var url = item.pictures.split(",")[0];
+ str1 = str1 + `<div class="box">
+ <div class="l">
+ <img width="204px" height="204px" src="${url}" />
+ </div>
+ <div class="r">
+ <div class="title">
+ ${item.name}
+ </div>
+ <div class="org line-box">
+ <div class="sub">检测机构：</div>
+ <div class="content">${item.organName}</div>
+ </div>
+ <div class="ser line-box">
+ <div class="sub">证书编号：</div>
+ <div class="content">${item.code}</div>
+ </div>
+ <div class="date line-box">
+ <div class="sub">颁发日期：</div>
+ <div class="content">${item.time.replaceAll("-",".")}</div>
+ </div>
+ </div>
+ </div>`
+ });
+ } else {
+ str1 = str1 + `<div class="box"></div>`
+ }
+
+
+ var str2 = `
+ </div>
+ </div>
+
+ <div class="cd model-box">
+ <div class="model-title">
+ <div class="l"></div>
+ <div class="title">产地信息</div>
+ <div class="border"></div>
+ <div class="status">
+ <div>
+ <van-icon style="margin-right: 10px;" name="http://182.106.212.58:8014/assets/images/sym/1265.png" />
+ </div>
+ 可追溯
+ </div>
+ </div>
+
+ <div class="dk model-content">
+ <div class="content-header">
+ <van-icon style="margin-right: 12px;" name="http://182.106.212.58:8014/assets/images/sy/1267.png" /> 种植地块
+ </div>
+ <div class="content-body">
+ <image style="width: 100%;height: 100%;" src="${land.url}" />
+ </div>
+ <div class="content-footer">
+ <div class="l">
+ ${farm.farmAddress}
+ </div>
+ <!-- <div class="r">
+ <van-icon name="star" />
+ 导航
+ </div> -->
+ </div>
+ </div>
+
+ <div class="jksp model-content">
+ <div class="content-header">
+ <van-icon style="margin-right: 12px;" name="http://182.106.212.58:8014/assets/images/sy/1272.png" /> 良心生产，不怕监督，24小时视频监控
+ </div>
+ <div class="content-body"></div>
+ <div class="content-footer">
+ <div class="equi-btn on">
+ 3号摄像头
+ </div>
+
+ <div class="equi-btn">
+ 3号摄像头
+ </div>
+ </div>
+ </div>
+
+ <div class="jk model-content">
+ <div class="content-header">
+ 物联网监控保证产地养分充足，且不被污染
+ </div>
+ <div class="content-body">
+ <div class="site-box">
+ <div class="site-title">
+ <div class="l">
+ <van-icon name="like" /> 谷米田庄二号气象站
+ </div>
+ <div class="r">
+ <van-icon name="add-o" />
+ </div>
+ </div>
+ <div class="site-date">
+ <div class="site-date-text">6分钟前更新</div>
+ </div>
+ <div class="site-content">
+
+ <div>
+ <div class="l">
+ <div class="type">空气温度</div>
+ <div class="unit">
+ 单位：℃
+ </div>
+ </div>
+ <div class="r">
+ 33.92
+ </div>
+ </div>
+
+ <div>
+ <div class="l">
+ <div class="type">空气温度</div>
+ <div class="unit">
+ 单位：℃
+ </div>
+ </div>
+ <div class="r">
+ 33.92
+ </div>
+ </div>
+
+ <div>
+ <div class="l">
+ <div class="type">空气温度</div>
+ <div class="unit">
+ 单位：℃
+ </div>
+ </div>
+ <div class="r">
+ 33.92
+ </div>
+ </div>
+
+ <div>
+ <div class="l">
+ <div class="type">空气温度</div>
+ <div class="unit">
+ 单位：℃
+ </div>
+ </div>
+ <div class="r">
+ 33.92
+ </div>
+ </div>
+
+ <div>
+ <div class="l">
+ <div class="type">空气温度</div>
+ <div class="unit">
+ 单位：℃
+ </div>
+ </div>
+ <div class="r">
+ 33.92
+ </div>
+ </div>
+
+ <div>
+ <div class="l">
+ <div class="type">空气温度</div>
+ <div class="unit">
+ 单位：℃
+ </div>
+ </div>
+ <div class="r">
+ 33.92
+ </div>
+ </div>
+
+ <div>
+ <div class="l">
+ <div class="type">空气温度</div>
+ <div class="unit">
+ 单位：℃
+ </div>
+ </div>
+ <div class="r">
+ 33.92
+ </div>
+ </div>
+
+ <div>
+ <div class="l">
+ <div class="type">空气温度</div>
+ <div class="unit">
+ 单位：℃
+ </div>
+ </div>
+ <div class="r">
+ 33.92
+ </div>
+ </div>
+
+ <div>
+ <div class="l">
+ <div class="type">空气温度</div>
+ <div class="unit">
+ 单位：℃
+ </div>
+ </div>
+ <div class="r">
+ 33.92
+ </div>
+ </div>
+
+ <div>
+ <div class="l">
+ <div class="type">空气温度</div>
+ <div class="unit">
+ 单位：℃
+ </div>
+ </div>
+ <div class="r">
+ 33.92
+ </div>
+ </div>
+
+ <div>
+ <div class="l">
+ <div class="type">空气温度</div>
+ <div class="unit">
+ 单位：℃
+ </div>
+ </div>
+ <div class="r">
+ 33.92
+ </div>
+ </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>
+ <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>
+ 我是基地管理员：
+ <!-- <text>郝爱国</text> -->
+ </div>
+ <div class="r-b-msg">
+ 以下农事操作，是在我的监督下完成
+ </div>
+
+ <div class="point-to"></div>
+ </div>
+ </div>`
+
+ var str3 = '';
+ recordVOList.forEach((item, index) => {
+ str3 = str3 + `<div class="record-box">
+ <div class="l">
+
+ <div class="one line" style="${ index == 0 ? 'background: transparent !important;' : '' }">
+ </div>
+
+ <div class="point">
+ </div>
+
+ <div class="two line" style="${ index == recordVOList.length - 1 ? 'background: transparent !important;' : '' }">
+ </div>
+
+ </div>
+ <div class="r">
+ <div class="record-item">
+ <div class="type">${item.typeName}</div>
+ <div class="date-pel">
+ <div class="date">${item.time}</div>
+ <div class="pel">操作人：${item.realName}</div>
+ </div>
+ </div>
+
+ </div>
+ </div>`
+ });
+
+ var str4 = `</div>
+ </div>
+
+ <div class="sc model-box">
+ <div class="model-title">
+ <div class="l"></div>
+ <div class="title">生产企业</div>
+ <div class="border"></div>
+ <div class="status no">
+ <!-- 去完善
+ <div>
+ <van-icon style="margin-left: 10px;" color="#EC9144" name="arrow" />
+ </div> -->
+ </div>
+ </div>
+
+ <div class="model-content">
+ <div class="content-header">
+ ${farm.farmName}
+ </div>
+ <div class="content-body">
+ <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
+ <block class="swiper-image">`
+ var str5 = '';
+ var urls = farm.picture.split(",");
+ if (urls.length > 0) {
+ urls.forEach(item => {
+ str5 = str5 + `<swiper-item>
+ <image src="${item}" class="slide-image" />
+ </swiper-item>`
+ })
+ }
+ var str6 = `</block></swiper>
+
+ </div>
+ <div class="text-intro">
+ ${farm.introduce}
+ </div>
+ <div class="content-footer">
+ </div>
+ </div>
+ </div>`
+
+ // <div class="btn-grounp">
+ // <div class="l">
+ // <div class="plan">
+ // ${num} %
+ // </div>
+ // <div class="text">
+ // 溯源完整度
+ // </div>
+ // </div>
+ // <div class="r">
+ // <van-button bind:click="editTracability" round custom-style="margin-right: 40px; width: 200px; height: 72px; border: 2px solid #5ABF78; background: #fff; color: #5ABF78; font-size: 30px;">编辑溯源</van-button>
+
+ // <van-button bind:click="submit" round custom-style="width: 200px; height: 72px; border: none; background: #5ABF78; color: #fff; font-size: 30px;">分享</van-button>
+ // </div>
+ // </div>
+
+ var dom = $('.page-main-container');
+ dom.empty();
+ dom.append(str0 + str1 + str2 + str3 + str4 + str5 + str6);
+ });
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/router/views/index.js b/src/router/views/index.js
index f0ecb6b..9ac2db8 100644
--- a/src/router/views/index.js
+++ b/src/router/views/index.js
@@ -272,6 +272,14 @@
},
component: () =>
import ( /* webpackChunkName: "views" */ '@/views/traceability/traceability')
+ }, {
+ path: 'details',
+ name: '溯源详情信息',
+ meta: {
+ i18n: 'index',
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/traceability/details')
}]
},
{
diff --git a/src/views/traceability/details.vue b/src/views/traceability/details.vue
new file mode 100644
index 0000000..baab835
--- /dev/null
+++ b/src/views/traceability/details.vue
@@ -0,0 +1,38 @@
+<template>
+ <iframe :src="url" style="width: 100%; height: 100%" frameborder="0"></iframe>
+</template>
+
+<script>
+//占位路由 巡逻管理
+export default {
+ data() {
+ return {
+ url: "/traceablityInfo.html",
+ };
+ },
+ created(){
+ var d = this.$route.query.code;
+ this.url += "?code=" + d;
+ },
+ mounted() {
+ var flag = false,
+ i = 0,
+ ind = null;
+ this.$store.state.tags.tagList.forEach((item, index) => {
+ if (item.label == "溯源详情信息") {
+ if (flag == false) {
+ ind = index;
+ flag = true;
+ }
+ i++;
+ }
+ });
+ if (i > 1) {
+ this.$store.state.tags.tagList.splice(ind, 1);
+ }
+ },
+};
+</script>
+
+<style>
+</style>
diff --git a/src/views/traceability/traceability.vue b/src/views/traceability/traceability.vue
index 3933658..ae44ebf 100644
--- a/src/views/traceability/traceability.vue
+++ b/src/views/traceability/traceability.vue
@@ -43,6 +43,14 @@
:size="size"
icon="el-icon-view"
:disabled="row.bind != 0"
+ @click="handleViewCode(row)"
+ >二维码
+ </el-button>
+ <el-button
+ :type="type"
+ :size="size"
+ icon="el-icon-view"
+ :disabled="row.bind != 0"
@click="handleView(row)"
>预览
</el-button>
@@ -109,7 +117,7 @@
option: {
tip: false,
height: "auto",
- menuWidth: 280,
+ menuWidth: 320,
menuAlign: "center",
align: "center",
selection: true,
@@ -248,15 +256,20 @@
this.$refs.print.init(row);
});
},
- //预览溯源码
- handleView(row){
+ //查看二维码
+ handleViewCode(row){
this.viewVisible = true;
this.$nextTick(() => {
- console.log(this.$refs,123456);
- console.log(this.$refs.views,789);
this.$refs.views.init(row);
});
},
+ //预览溯源码详情信息
+ handleView(row){
+ this.$router.push({
+ path: `/traceability/details`,
+ query: row
+ });
+ },
//新增
rowSave(row, done, loading) {
row['farmType'] = 0;
--
Gitblit v1.9.3