123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677 |
- <!doctype html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
- <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
- <meta name="format-detection"content="telephone=no">
- <title>浏览记录详情</title>
- <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
- <link rel="stylesheet" href="../../css/projeck.css">
- <style media="screen">
- body,html{
- margin: 0;
- background: #fff;
- }
- *{
- box-sizing: border-box;
- outline: none;
- }
- .note{
- border-bottom: 20px solid #ECF0F1;
- padding-bottom: 20px;
- }
- .note:last-child{
- border-bottom: 0 solid #ECF0F1;
- padding-bottom: 0;
- }
- .noneMargin:last-child{
- margin-bottom: 20px
- }
- /*header*/
- .top {
- text-align: center;
- margin: 20px;
- }
- .top .icon {
- text-align: center;
- }
- .note-name, .note-time {
- font-size: 18px;
- line-height: 30px;
- color: #2c3e50;
- }
- .top .name {
- font-size: 18px;
- color: #7f8c8d;
- }
- /*状态*/
- .m-card{
- padding: 0 15px;
- }
- .m-card .header {
- margin: 0 -15px;
- line-height: 40px;
- border-bottom: 1px solid #ECF0F1;
- background-color: #ECF0F1;
- font-size: 18px;
- position: relative;
- }
- .m-card .header span {
- margin-left: 15px;
- color: #2980B9;
- padding: 2px 0 2px 10px;
- }
- .m-card .header:after{
- content: '';
- position: absolute;
- top:8px;
- left: 14px;
- width: 3px;
- height: 60%;
- background: #3498DB;
- }
- .cell-item {
- display: -webkit-flex;
- display: flex;
- justify-content: flex-start;
- position: relative;
- overflow: hidden;
- margin: 15px 0;
- }
- .m-cell {
- background-color: #FFF;
- position: relative;
- z-index: 1;
- }
- /*.m-cell:after {*/
- /* content: '';*/
- /* position: absolute;*/
- /* z-index: 0;*/
- /* bottom: 0;*/
- /* left: 0;*/
- /* width: 100%;*/
- /* height: 1px;*/
- /* border-bottom: 1px solid #B2B2B2;*/
- /* -webkit-transform: scaleY(0.5);*/
- /* transform: scaleY(0.5);*/
- /* -webkit-transform-origin: 0 100%;*/
- /* transform-origin: 0 100%;*/
- /*}*/
- /*记录项*/
- .cell-left {
- width: 30%;
- font-size: 16px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: wrap;
- color: #333;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
- }
- .cell-right{
- display: flex;
- font-weight: bold;
- -webkit-justify-content: flex-start;
- justify-content: flex-start;
- text-align: left;
- width: 70%;
- min-height: 1rem;
- color: #525252;
- font-size: 16px;
- padding-right: 0.24rem;
- padding-left: 10px;
- }
- .m-card .m-cell .cell-title {
- width: 30%;
- color: #333;
- font-size: 16px;
- margin: 10px 0;
- }
- .m-card .m-cell .cell-content {
- color: #525252;
- font-size:16px;
- font-weight: bold;
- margin: 10px 0;
- padding: 0 5px;
- width: 70%;
- }
- .call-centers{
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .m-card .card-box .title {
- font-size: 16px;
- margin: 10px 0;
- }.m-card .card-box .content {
- padding: 10px;
- border-width: 2px;
- border-style: dashed;
- border-color: #ECF0F1;
- margin-bottom: 5px;
- }
- /*file*/
- .card-box{
- margin-bottom: 15px;
- }
- .card-box .content .file-item {
- display: inline-block;
- padding: 10px;
- width: 32%;
- vertical-align: top;
- text-align: center;
- height: 100px;
- }
- .card-box .content .file-item img {
- margin: 0 auto;
- width: 40px;
- }
- .card-box .content .file-item p {
- margin-top: 10px;
- width: 100%;
- font-size: 14px;
- color: #7f8c8d;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- /*img*/
- .m-card .card-box .img-list> .img-item {
- display: inline-block;
- width: 32%;
- }
- .card-box .img-list .img-item {
- position: relative;
- display: inline-block;
- }
- .card-box .img-list .img-item img {
- z-index: 0;
- height: 27vw;
- width: 27vw;
- object-fit: cover;
- border-radius: 5px;
- }
- /*检查项*/
- /*提交按钮*/
- .submitBtn{
- width:100%;
- color:#fff;
- position: fixed;bottom: 0;left:0;
- z-index:100;
- margin: 0;
- height: 55px;
- line-height: 55px;
- font-size: 18px;
- background: #009fe8
- }
- /*浏览记录*/
- .browse-item{
- padding: 15px;
- position: relative;
- }
- .browse-item:after{
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 1px;
- background: #ECF0F1;
- }
- .header-ico{
- width: 40px;
- height: 40px;
- border-radius: 50%;
- line-height: 40px;
- text-align: center;
- object-fit: cover;
- margin-right: 10px;
- font-size: 13px;
- }
- .browse-time{
- font-size: 13px;
- color: #BDC3C7;
- line-height: 1.5;
- }
- .personal-info,.browse-num{
- color: #2C3E50;
- font-size: 13px;
- font-style: normal;
- }
- .browse-title{
- color: #333;
- font-size: 16px;
- padding: 15px 0 ;
- position: relative;
- width: 100%;
- padding-left: 25px;
- }
- .browse-title:before{
- content: '';
- position: absolute;
- top: 13px;
- left: 14px;
- width: 3px;
- height: 26px;
- background: #009fe8;
- }
- .browse-title:after{
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 1px;
- background: #ECF0F1;
- }
- /*返回当前二维码*/
- .backQrcode{
- width: 45px;
- height: 45px;
- -webkit-border-radius: 50%;
- -moz-border-radius: 50%;
- border-radius: 50%;
- border: 1px solid #f2f2f2;
- position: fixed;
- bottom: 50px;
- right: 20px;
- z-index: 9999;
- background: #fff;
- opacity: 1;
- transition: .5s;
- text-align: center;
- padding: 5px;
- }
- .backQrcode img{
- width: 100%;
- height: 100%;
- }
- /*position*/
- .flex-starts{
- display: flex;
- justify-content: space-between;
- white-space: nowrap;
- align-items: center;
- }
- .flex-spaces{
- display: flex;
- justify-content: space-between;
- white-space: nowrap;
- align-items: center;
- }
- .ico-map{
- width: 25px;
- height: 25px;
- background: url("../../icon/position.png") no-repeat;
- background-position: center;
- background-size: cover;
- }
- .more-icon{
- width: 20px;
- height: 20px;
- background: url("../../image/more.png") no-repeat;
- background-position: center;
- background-size: cover;
- }
- .position{
- padding: 5px 15px;
- border-radius: 50px;
- background: #F0F0F0;
- font-size: 14px;
- margin-top:10px;
- }
- .map1{
- color: #009FE8;
- margin-bottom: 5px;
- text-align: left;
- }
- .map-name {
- width: 78%;
- }
- .names{
- width: 85%;
- white-space: normal;
- }
- </style>
- </head>
- <body>
- <div class="g-flexview" id="g_flexview"></div>
- </body>
- </html>
- <script type="text/template" id="recordTemplate">
- {{?it.recordInstanceList !=null}}
- {{ for (var i = 0;i<it.recordInstanceList.length;i++) { }}
- <div class="note" id="note${recordInstanceList[r].id}">
- <div class="top recordInfo">
- <div class="icon"><img src="../../icon/0001.png"></div>
- <div class="note-name">{{=it.recordInstanceList[i].templateName}}</div>
- <div class="note-time">{{=it.recordInstanceList[i].createDate}}</div>
- <div class="name">{{=it.recordInstanceList[i].createName}}</div>
- {{?it.recordInstanceList[i].spName}}
- <div class="position flex-spaces" onclick="openMaps('{{=it.recordInstanceList[i].lng}}','{{=it.recordInstanceList[i].lat}}')">
- <div class="map-name flex-starts">
- <i class="ico-map"></i>
- <div class="names">
- <p class="map1">{{=it.recordInstanceList[i].spName}}</p>
- </div>
- </div>
- <p class="more-icon"></p>
- </div>
- {{?}}
- </div>
- <!--状态-->
- {{? it.recordInstanceList[i].recordStatusInstanceList != null && it.recordInstanceList[i].recordStatusInstanceList != ""}}
- <div class="m-card">
- <div class="header"><span>状态</span></div>
- <div class="content">
- <div class="m-cell statusItem">
- {{ for (var j = 0;j<it.recordInstanceList[i].recordStatusInstanceList.length;j++) { }}
- <div class="cell-item">
- <div class="cell-left">{{=it.recordInstanceList[i].recordStatusInstanceList[j].statusName}}</div>
- <div class="cell-right" id="statusP${recordInstanceList[r].id+u}">
- {{ for (var u = 0;u<it.recordInstanceList[i].recordStatusInstanceList[j].recordStatusInstanceItemList.length;u++) { }}
- <span style="color:{{=it.recordInstanceList[i].recordStatusInstanceList[j].recordStatusInstanceItemList[u].statusColor}};">
- {{=it.recordInstanceList[i].recordStatusInstanceList[j].recordStatusInstanceItemList[u].statusContent}}
- </span>
- {{ } }}
- </div>
- </div>
- {{ } }}
- </div>
- </div>
- </div>
- {{?}}
- {{?it.recordInstanceList[i].statusName != ""}}
- <div class="m-card">
- <div class="header"><span>状态</span></div>
- <div class="content">
- <div class="m-cell">
- <div class="cell-item">
- <div class="cell-left">{{=it.recordInstanceList[i].statusName}}</div>
- <div class="cell-right"><span class="blue">{{=it.recordInstanceList[i].statusContent}}</span></div>
- </div>
- </div>
- </div>
- </div>
- {{?}}
- <!--记录项-->
- {{?it.recordInstanceList[i].inputList != null && it.recordInstanceList[i].inputList != ""}}
- {{ for(var prop in it.recordInstanceList[i].inputList) { }}
- <div class="m-card">
- <div class="header">
- <span>{{=prop==""?'记录项':prop}}</span>
- </div>
- <div class="content contents">
- {{ for (var t = 0;t<it.recordInstanceList[i].inputList[prop].length;t++) { }}
- {{? it.recordInstanceList[i].inputList[prop][t].inputType === 'photo' && it.recordInstanceList[i].inputList[prop][t].values !=""}}
- <div class="card-box">
- <div class="title">{{=it.recordInstanceList[i].inputList[prop][t].inputName}}:</div>
- <div class="content">
- <div class="my-gallery img-list" data-pswp-uid="1">
- {{ for (var s = 0;s<it.recordInstanceList[i].inputList[prop][t].values.length;s++) { }}
- <div class="img-dv img-item" onclick="browseImg('{{=i}}','{{=it.recordInstanceList[i].inputList[prop][t].values}}')">
- <a href="javascript:;">
- <img src="{{=it.recordInstanceList[i].inputList[prop][t].values[s]}}?x-oss-process=style/img-200">
- </a>
- </div>
- {{ } }}
- </div>
- </div>
- </div>
- {{?? it.recordInstanceList[i].inputList[prop][t].inputType === 'file' && it.recordInstanceList[i].inputList[prop][t].values !=""}}
- <div class="card-box">
- <div class="title">{{=it.recordInstanceList[i].inputList[prop][t].inputName}}:</div>
- <div class="content">
- <div class="file-list">
- {{ for (var f = 0;f<it.recordInstanceList[i].inputList[prop][t].values.length;f++) { }}
- <div class="file-item" onclick="browseFile('{{=it.recordInstanceList[i].inputList[prop][t].values[f].substr(0,it.recordInstanceList[i].inputList[prop][t].values[f].lastIndexOf('-'))}}')">
- <a href="javascript:;">
- <img src="../../icon/{{=it.recordInstanceList[i].inputList[prop][t].values[f].substr(it.recordInstanceList[i].inputList[prop][t].values[f].lastIndexOf(".")+1)}}.png">
- <p>{{=it.recordInstanceList[i].inputList[prop][t].values[f].substr(it.recordInstanceList[i].inputList[prop][t].values[f].lastIndexOf('-')+1)}}</p>
- </a>
- </div>
- {{ } }}
- </div>
- </div>
- </div>
- {{?? it.recordInstanceList[i].inputList[prop][t].inputType === 'video' && it.recordInstanceList[i].inputList[prop][t].values !=""}}
- <div class="card-box">
- <div class="title">{{=it.recordInstanceList[i].inputList[prop][t].inputName}}:</div>
- <div class="content vedios">
- <video controls webkit-playsinline="true" class="video" style="width: 100%;height: 200px;">
- <source src="{{=it.recordInstanceList[i].inputList[prop][t].values[0]}}">
- </video>
- </div>
- </div>
- {{?? it.recordInstanceList[i].inputList[prop][t].inputType === 'mp3' && it.recordInstanceList[i].inputList[prop][t].values !=""}}
- <div class="card-box" style="margin-bottom: 15px;">
- <div class="title titleAudio">{{=it.recordInstanceList[i].inputList[prop][t].inputName}}:</div>
- <div class="audio_a" style="position: relative;">
- <audio id="audio_src" controls style="width:100%;">
- <source src="{{=it.recordInstanceList[i].inputList[prop][t].values[0]}}">
- </audio>
- </div>
- </div>
- </div>
- {{?? it.recordInstanceList[i].inputList[prop][t].values !=""}}
- <div class="m-cell recordItem">
- <div class="cell-item">
- <div class="cell-title">{{=it.recordInstanceList[i].inputList[prop][t].inputName}}:</div>
- <div class="cell-content">
- <span class="normal">{{=it.recordInstanceList[i].inputList[prop][t].values.join(',')}}</span>
- </div>
- </div>
- </div>
- {{?}}
- {{ } }}
- </div>
- </div>
- {{ } }}
- {{?}}
- <!--检查项-->
- {{?it.recordInstanceList[i].checkItemMap != null && it.recordInstanceList[i].checkItemMap != ""}}
- <div class="m-card inspectItems">
- <div class="header">
- <span>检查项</span>
- </div>
- <div class="content">
- {{ for(var key in it.recordInstanceList[i].checkItemMap) { }}
- <div class="m-cell inspectItem">
- <div class="cell-item">
- <div class="cell-title" style="width: 80%">{{=it.recordInstanceList[i].checkItemMap[key][0].groupName}}</div>
- <div class="cell-content call-centers" style="width:20%;">
- {{ for (var c = 0;c<it.recordInstanceList[i].checkItemMap[key].length;c++) { }}
- <span class="normal">{{=it.recordInstanceList[i].checkItemMap[key][c].itemValue ===""?"暂无内容":it.recordInstanceList[i].checkItemMap[key][c].itemValue}}</span>
- {{ } }}
- </div>
- </div>
- </div>
- {{ } }}
- </div>
- </div>
- {{?}}
- </div>
- {{ } }}
- {{?}}
- <div class="browse-wrap" id="browse_items"></div>
- {{?it.pageRecord != null}}
- <button type="button" class="btn-block btn-primary submitBtn" onclick="nextStep('{{=it.pageRecord.templateName}}','{{=it.pageId}}','{{=it.pageRecord.id}}','{{=it.recordParentId}}')">{{=it.pageRecord.templateName}}</button>
- {{=bottom()}}
- {{?}}
- <!--返回当前二维码-->
- <div class="backQrcode" onclick="backQrcode('{{=it.pageId}}','{{=it.pageName}}')">
- <img src="../../icon/qrcode.png" alt="">
- </div>
- </script>
- <script type="text/template" id="browseTl">
- <label class="browse-title">浏览记录</label>
- <ul class="browse-items" style="margin-bottom:35px;">
- {{~it:value}}
- <li class="browse-item flex-space">
- <div class="flex-start">
- {{?value.img == null}}
- <p class="header-ico" style="background:#{{=Math.random().toString(16).slice(2,8)}}">
- {{=value.name.substr(value.name.length-1)}}
- </p>
- {{??}}
- <img src="{{=value.img.substr(value.img, 4) == 'http'?value.img:urlImgUrl+value.img}}" class="header-ico" alt="">
- {{?}}
- <div class="browse-time" style="margin-right:10px">
- <p class="personal-info">{{=value.name}}</p>
- <p class="personal-info">{{=value.department}}</p>
- </div>
- <div class="browse-time">
- <p>最近:{{=value.lastDate.substr(5)}}</p>
- <p>首次:{{=value.createDate.substr(5)}}</p>
- </div>
- </div>
- <i class="browse-num">{{=value.count}}次</i>
- </li>
- {{~}}
- </ul>
- </script>
- <script type="text/javascript" src="../../script/api.js"></script>
- <script type="text/javascript" src="../../script/doT.min.js"></script>
- <script src="../../script/zepto.js" charset="utf-8"></script>
- <script src="../../script/config.js" charset="utf-8"></script>
- <script type="text/javascript">
- var name= "",uuid="",organizationIds="";
- apiready = function () {
- var info = $api.getStorage('data');
- name = JSON.parse(info).data.user.name;
- uuid = JSON.parse(info).data.user.staff_num;
- organizationIds = JSON.parse(info).data.user.section_id;
- recodeDetails(api.pageParam.recordParentId);
- // 返回二维码
- scrollBottom()
- };
- function recodeDetails(id) {
- var params = {
- recordParentId:id,
- departmentId:organizationIds
- }
- $http.requestShowProgress(UrlRouter.getRecordInstanceDetailList,'get',params)
- .then(ret=>{
- if (ret.code == '200') {
- $apis.html(g_flexview,'#recordTemplate',ret.data)
- // 添加浏览记录
- var param={
- recordParentId:id,
- userId:uuid
- }
- return $http.requestData(UrlRouter.addRecordUser,'post',param)
- }
- })
- .then(ret=>{
- // console.log(JSON.stringify(ret));
- browseNum(id)
- })
- .catch(err=>{})
- }
- function bottom() {
- $api.css($api.dom('.g-flexview'), 'padding-bottom: 30px;');
- return "";
- }
- // 文件浏览
- function browseFile(paths) {
- var flag = true;
- if (paths.substr(paths.lastIndexOf(".")+1) == 'zip'&& paths.substr(paths.lastIndexOf(".")+1) == 'rar') {
- flag = false;
- }else {
- api.showProgress({
- title: '提示',
- text: '打开文件中...',
- });
- }
- api.download({
- url: paths,
- report: true,
- cache: true,
- allowResume: true
- }, function(ret, err) {
- if (ret.state == 1) {
- api.hideProgress();
- if (flag) {
- var superFile = api.require('superFile');
- superFile.open({path:ret.savePath});
- }
- setTimeout(function () {
- api.toast({
- msg: '下载成功',
- duration: 2000,
- location: 'top'
- });
- },100)
- }
- });
- }
- // 图片浏览
- function browseImg(i,value) {
- var imageBrowser = api.require('imageBrowser');
- imageBrowser.openImages({
- imageUrls: value.split(','),
- activeIndex:i,
- showList:false
- });
- }
- // 如果有下一步执行次方法
- function nextStep(title,pageId,pageRecordId,recordTrueID) {
- var param= {
- pageId: pageId,
- pageRecordId: pageRecordId,
- createBy: uuid,
- createName: name,
- recordTrueID: recordTrueID,
- organizationIds:organizationIds
- }
- $event.openTabLayout('addRecode','addRecode',title,param);
- }
- // 浏览人数
- function browseNum(recordParentId) {
- $http.fnReuestDataNologing(UrlRouter.getRecordUserById+recordParentId,'','get','',function (ret, err) {
- if (ret.code === '200') {
- $apis.html(browse_items,'#browseTl',ret.data);
- }
- })
- }
- // 返回二维码js
- function scrollBottom() {
- var window1 = $(window).height();
- var documents = $(document).height();
- if (window1 == documents) {
- $(".backQrcode").css({bottom:'50px',opacity:'1'})
- return false;
- }
- $(window).on('scroll',function(){
- if($(window).scrollTop()>=10){
- $(".backQrcode").css({bottom:'50px',opacity:'1'})
- }
- else if ($(window).scrollTop() <= 50) {
- $(".backQrcode").css({bottom:'0',opacity:'0'})
- }
- });
- }
- // 返回二维码
- function backQrcode(id,title) {
- var param={
- pageId:id,
- title:title
- }
- $event.openWin('browseQrcode_win'+Math.random(),'browseQrcode_win',param,'');
- }
- // 打开地图
- function openMaps(lon,lat) {
- $event.openTabLayout('map','map','',{lon:lon,lat:lat})
- }
- </script>
|