智慧农业后台管理页面
Administrator
2022-07-09 be89cd49d263acbc6222375fe263ab930f20be68
溯源详情修改
2 files modified
1 files added
1044 ■■■■■ changed files
public/traceablityInfo.html 2 ●●● patch | view | raw | blame | history
public/traceablityInfos.html 1040 ●●●●● patch | view | raw | blame | history
src/views/traceability/details.vue 2 ●●● patch | view | raw | blame | history
public/traceablityInfo.html
@@ -614,7 +614,7 @@
        // var code = "22060000002";
        axios.get('https://dev.jxpskj.com:8023/api/traceability/getTraceabilityDetailInfo?code=' + code).then(function(res) {
        axios.get('https://dev.jxpskj.com:8023/api/traceability/getTraceabilityDetailInfo?code=' + code + '&bind=1').then(function(res) {
            // axios.get('http://192.168.0.114:89/traceability/getTraceabilityDetailInfo?code==22060000002').then(function(res) {
            var data = res.data.data;
public/traceablityInfos.html
New file
@@ -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>
src/views/traceability/details.vue
@@ -7,7 +7,7 @@
export default {
  data() {
    return {
      url: "/traceablityInfo.html",
      url: "/traceablityInfos.html",
    };
  },
  created(){