DESKTOP-00SUCB6\Administrator
4 years ago
6 changed files with 500 additions and 1 deletions
@ -0,0 +1,278 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|||
<link rel="icon" href="./favicon.ico"> |
|||
<title id="sys_title">欢迎使用牛栏山二锅头防伪查询系统</title> |
|||
<script src="./fwm/jquery.min.js"></script> |
|||
<script src="./config.js"></script> |
|||
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Di3uzrPoRAPKso8IAbBG138RUwBTIWbR"></script> --> |
|||
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=Di3uzrPoRAPKso8IAbBG138RUwBTIWbR"></script> |
|||
</head> |
|||
<style> |
|||
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
body { |
|||
height: 100%; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; |
|||
} |
|||
|
|||
label { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: inherit; |
|||
} |
|||
.flex-box { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.flex-box-column { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
.search-container { |
|||
position: relative; |
|||
width: 100vw; |
|||
min-height: 100%; |
|||
background-image: url('./fwm/img/search-bg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
.content-block { |
|||
position: relative; |
|||
margin-top: 42vh; |
|||
width: 320px; |
|||
color: #fff; |
|||
} |
|||
.content-block .title { |
|||
font-size: 18px; |
|||
line-height: 30px; |
|||
} |
|||
.content-box { |
|||
position: relative; |
|||
top:5px; |
|||
width: 100%; |
|||
min-height: 200px; |
|||
background: #fff; |
|||
border-radius: 20px; |
|||
padding: 15px; |
|||
word-wrap:break-word; |
|||
/* font-weight: 550; */ |
|||
} |
|||
.content-box .content-text { |
|||
font-size: 14px; |
|||
line-height: 30px; |
|||
color: #000000; |
|||
} |
|||
.content-box .num-text { |
|||
font-size: 12px; |
|||
text-align: center; |
|||
line-height: 30px; |
|||
color: #C02932; |
|||
} |
|||
.text-indent-1 { |
|||
text-indent:1em |
|||
} |
|||
.aplayer-block { |
|||
position: relative; |
|||
/* bottom: 20px; */ |
|||
margin: 20px 0; |
|||
width: 100%; |
|||
height: 50px; |
|||
/* background: #fff; */ |
|||
border-radius: 25px; |
|||
} |
|||
.aplayer-block audio { |
|||
width: 100%; |
|||
} |
|||
.nla-public { |
|||
position: absolute; |
|||
right: 15px; |
|||
width: 80px; |
|||
height: 80px; |
|||
bottom: 10px; |
|||
|
|||
} |
|||
</style> |
|||
<body> |
|||
<div class="search-container flex-box-column"> |
|||
<div class="content-block"> |
|||
|
|||
<p class="title text-indent-1">查询结果：</p> |
|||
<div class="content-box"> |
|||
<div id="patch" style="display: none;"> |
|||
<img src="./fwm/img/nls.jpg" class="nla-public"> |
|||
<p class="content-text">尊敬的客户您好！</p> |
|||
<p class="content-text text-indent-1">您所查询的商品编码为：</p> |
|||
<p class="num-text" id="gyhl_code"></p> |
|||
<p class="content-text text-indent-1">您查询的是由"北京顺鑫农业股份有限公司牛栏山酒厂"生产的正牌产品，请放心使用，谢谢您的查询。</p> |
|||
<br> |
|||
<p class="content-text">查询次数：<span id="scan_count"></span>，首次查询时间为：<br> <span id="first_scan" style="color:#C02932;"></span></p> |
|||
</div> |
|||
<div id="noFound" style="display: none;"> |
|||
<p class="content-text text-indent-1" style="color:red;font-size: 18px;">您所查询的商品不存在！</p> |
|||
</div> |
|||
</div> |
|||
<div class="aplayer-block" id="aplayerBlock" style="display: none;"> |
|||
<audio id="play1" controls="controls" > |
|||
<source id="audioSource" src=""></source> |
|||
</audio> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
|
|||
<script> |
|||
function checkSocureData(posParam) { |
|||
let param = window.location.href.split('?')[1] || '' |
|||
if(param&&posParam.lat&&posParam.lng&&posParam.address) |
|||
{ |
|||
$.ajax({ |
|||
url: config.API_URL+"/scan/code/"+encodeURIComponent(param)+"/"+encodeURIComponent(posParam.lng)+"/"+encodeURIComponent(posParam.lat)+"/"+encodeURIComponent(posParam.address), |
|||
type: "GET", |
|||
dataType: "json", |
|||
success: function(res) { |
|||
if(res.code == 200) |
|||
{ |
|||
$("#patch").show() |
|||
$("#aplayerBlock").show() |
|||
|
|||
$("#gyhl_code").text(res.data.gyhl_code) |
|||
$("#scan_count").text(res.data.scan_count) |
|||
$("#first_scan").text(res.data.first_scan) |
|||
|
|||
let url = config.API_URL + res.data.url |
|||
$('#play1').attr('src',url) |
|||
var fry_audio=$('#play1').get('0'); |
|||
fry_audio.load() |
|||
|
|||
// createAudioMP3(res.data.gyhl_code) |
|||
} else { |
|||
$("#noFound").show() |
|||
} |
|||
}, |
|||
error: function(err) { |
|||
console.log(err); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
//获取地址信息，设置地址label |
|||
function getAddress(point){ |
|||
let params = {} |
|||
params.lat = point.lat |
|||
params.lng = point.lng |
|||
var gc = new BMap.Geocoder(); |
|||
gc.getLocation(point, function(rs){ |
|||
var addComp = rs.addressComponents; |
|||
var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址 |
|||
params.address = address |
|||
checkSocureData(params) |
|||
console.log(params); |
|||
}); |
|||
|
|||
} |
|||
//错误类型 |
|||
function handleError(value) { |
|||
switch (value) { |
|||
case 1: |
|||
alert("位置服务被拒绝"); |
|||
break; |
|||
case 2: |
|||
alert("暂时获取不到位置信息"); |
|||
break; |
|||
case 3: |
|||
alert("获取信息超时"); |
|||
break; |
|||
case 4: |
|||
alert("未知错误"); |
|||
break; |
|||
} |
|||
} |
|||
//浏览器定位 |
|||
function getCurrentPosition () { |
|||
var geolocation = new BMap.Geolocation(); |
|||
geolocation.getCurrentPosition(function(r){ |
|||
if(this.getStatus() == BMAP_STATUS_SUCCESS){ |
|||
// if(r.accuracy==null){ |
|||
// handleError(1) |
|||
// //用户决绝地理位置授权 |
|||
// return; |
|||
// } |
|||
mk = new BMap.Marker(r.point); |
|||
// alert(r.point.lat+';'+r.point.lng) |
|||
getAddress(r.point); |
|||
}else { |
|||
handleError(this.getStatus()) |
|||
} |
|||
}); |
|||
} |
|||
window.onload=function(){ |
|||
getCurrentPosition() |
|||
|
|||
|
|||
//IP定位 |
|||
// var map = new BMap.Map("allmap"); |
|||
// var point = new BMap.Point(116.331398,39.897445); |
|||
// map.centerAndZoom(point,12); |
|||
|
|||
// function myFun(result){ |
|||
// var cityName = result.name; |
|||
// map.setCenter(cityName); |
|||
// alert("当前定位城市:"+cityName); |
|||
// } |
|||
// var myCity = new BMap.LocalCity(); |
|||
// myCity.get(myFun); |
|||
|
|||
//浏览器定位 |
|||
// var map = new BMap.Map("allmap"); |
|||
// var point = new BMap.Point(116.331398,39.897445); |
|||
// map.centerAndZoom(point,12); |
|||
// var geolocation = new BMap.Geolocation(); |
|||
// geolocation.getCurrentPosition(function(r){ |
|||
// if(this.getStatus() == BMAP_STATUS_SUCCESS){ |
|||
// if(r.accuracy==null){ |
|||
// handleError(1) |
|||
// //用户决绝地理位置授权 |
|||
// return; |
|||
// } |
|||
// // var mk = new BMap.Marker(r.point); |
|||
// // map.addOverlay(mk); |
|||
// // map.panTo(r.point); |
|||
// // alert('您的位置：'+r.point.lng+','+r.point.lat); |
|||
// } |
|||
// else { |
|||
// // alert('failed:'+this.getStatus()); |
|||
// handleError(this.getStatus()) |
|||
// } |
|||
// },handleError); |
|||
|
|||
} |
|||
</script> |
|||
|
|||
</html> |
|||
@ -0,0 +1,16 @@ |
|||
import request from '@/utils/request'; |
|||
|
|||
export function getScanList(params) { |
|||
return request({ |
|||
url: '/scan/list', |
|||
method: 'post', |
|||
data:params |
|||
}); |
|||
} |
|||
export function getScanDetail(params) { |
|||
return request({ |
|||
url: '/scan/detail', |
|||
method: 'post', |
|||
data:params |
|||
}); |
|||
} |
|||
@ -0,0 +1,91 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-table :data="tableData" style="width: 100%" header-row-class-name=""> |
|||
<el-table-column prop="code" label="防伪码"></el-table-column> |
|||
<el-table-column prop="scan_time" sortable label="扫码时间"></el-table-column> |
|||
<el-table-column prop="lng" label="扫码经度"></el-table-column> |
|||
<el-table-column prop="lat" label="扫码纬度"></el-table-column> |
|||
<el-table-column prop="address" label="扫码地址"></el-table-column> |
|||
<!-- <el-table-column label="操作" width="200"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" size="small" @click="showDetail(scope.row.code)">查看详细</el-button> |
|||
</template> |
|||
</el-table-column> --> |
|||
</el-table> |
|||
<el-pagination |
|||
background |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="currentPage" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="pageSize" |
|||
layout="total, prev, pager, next, sizes, jumper" |
|||
:total="total"> |
|||
</el-pagination> |
|||
|
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { |
|||
getScanDetail |
|||
} from "@/api/waring" |
|||
export default { |
|||
name: "scanWaringDetail", |
|||
data() { |
|||
return { |
|||
currentPage: 1, //当前页 |
|||
pageSize: 10, //每页条数 |
|||
total: 0, //总条数 |
|||
tableData: [], //表格数据 |
|||
code:this.$route.query.code || "" |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.initData() |
|||
}, |
|||
methods: { |
|||
//搜索查询 |
|||
search() { |
|||
this.currentPage = 1 |
|||
this.initData() |
|||
}, |
|||
//获取用户列表 |
|||
initData() { |
|||
const params = { |
|||
code:this.code, |
|||
pageNo: this.currentPage, |
|||
pageSize: this.pageSize |
|||
} |
|||
getScanDetail(params).then(res => { |
|||
this.tableData = res.data.list |
|||
this.total = res.data.total |
|||
}) |
|||
}, |
|||
showDetail(){ |
|||
|
|||
}, |
|||
|
|||
//每页条数变化 |
|||
handleSizeChange(val) { |
|||
this.pageSize = val |
|||
this.initData() |
|||
}, |
|||
//当前页变化 |
|||
handleCurrentChange(val) { |
|||
this.currentPage = val |
|||
this.initData() |
|||
} |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.input-with-select { |
|||
float: left; |
|||
top: 10px; |
|||
} |
|||
|
|||
.el-input { |
|||
width: 230px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,93 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-table :data="tableData" style="width: 100%" header-row-class-name=""> |
|||
<el-table-column prop="code" label="防伪码"></el-table-column> |
|||
<el-table-column prop="scan_count" sortable label="扫码次数"></el-table-column> |
|||
<el-table-column prop="scan_time" sortable label="首次扫码时间"></el-table-column> |
|||
<!-- <el-table-column prop="gyhl_code" label="工业互联网防伪码"></el-table-column> --> |
|||
<el-table-column prop="scan_count" sortable label="告警级别"> |
|||
<template slot-scope="scope"> |
|||
<i :style="{color:scope.row.scan_count > 20 ? '#F56C6C':'#E6A23C'}" class="el-icon-warning"></i> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" width="200"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" size="small" @click="showDetail(scope.row.code)">查看详细</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
background |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="currentPage" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="pageSize" |
|||
layout="total, prev, pager, next, sizes, jumper" |
|||
:total="total"> |
|||
</el-pagination> |
|||
|
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { |
|||
getScanList |
|||
} from "@/api/waring" |
|||
export default { |
|||
name: "scanWaring", |
|||
data() { |
|||
return { |
|||
currentPage: 1, //当前页 |
|||
pageSize: 10, //每页条数 |
|||
total: 0, //总条数 |
|||
tableData: [], //表格数据 |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.initData() |
|||
}, |
|||
methods: { |
|||
//搜索查询 |
|||
search() { |
|||
this.currentPage = 1 |
|||
this.initData() |
|||
}, |
|||
//获取用户列表 |
|||
initData() { |
|||
const params = { |
|||
pageNo: this.currentPage, |
|||
pageSize: this.pageSize |
|||
} |
|||
getScanList(params).then(res => { |
|||
this.tableData = res.data.list |
|||
this.total = res.data.total |
|||
}) |
|||
}, |
|||
showDetail(code){ |
|||
this.$router.push({name:'scanWaringDetail',query:{code:code}}) |
|||
}, |
|||
|
|||
//每页条数变化 |
|||
handleSizeChange(val) { |
|||
this.pageSize = val |
|||
this.initData() |
|||
}, |
|||
//当前页变化 |
|||
handleCurrentChange(val) { |
|||
this.currentPage = val |
|||
this.initData() |
|||
} |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.input-with-select { |
|||
float: left; |
|||
top: 10px; |
|||
} |
|||
|
|||
.el-input { |
|||
width: 230px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue