industrial-web
/
anti-fake-code
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

定位功能

master
DESKTOP-00SUCB6\Administrator 4 years ago
parent
c3eee25f39
commit
64c01a0587
6 changed files with 500 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 278
      public/s.html
  2. 16
      src/api/waring.js
  3. 22
      src/router/index.ts
  4. 1
      src/store/modules/user.js
  5. 91
      src/views/waring/detail.vue
  6. 93
      src/views/waring/index.vue

278
public/s.html
View File

@ -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>

16
src/api/waring.js
View File

@ -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
});
}

22
src/router/index.ts
View File

@ -194,6 +194,28 @@ const routes = [
}, },
], ],
}, },
//扫码告警页-------缉查人员
{
path: 'scanWaring',
component: AppMain,
name: 'scanWaring',
redirect: 'noredirect',
meta: {title: '扫码告警'},
children: [
{
path: '',
component: () => import('@/views/waring/index.vue'),
name: 'scanWaring',
// meta: {title: '印制成品码数据统计', icon: 'form', noCache: true},
},
{
path: 'detail',
component: () => import('@/views/waring/detail.vue'),
name: 'scanWaringDetail',
meta: {title: '告警码详细', icon: 'form', noCache: true},
},
],
},
//系统管理 //系统管理
{ {
path: 'system', path: 'system',

1
src/store/modules/user.js
View File

@ -37,7 +37,6 @@ const user = {
// state.activeIndex = activeIndex; // state.activeIndex = activeIndex;
// }, // },
}, },
actions: { actions: {
// 登录 // 登录
Login({commit}, param) { Login({commit}, param) {

91
src/views/waring/detail.vue
View File

@ -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>

93
src/views/waring/index.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save