项目概况： 后端技术：SpringBoot + Mybatis + Shiro + Jwt + Swagger-ui + Redis 前端技术： Ant-design-vue + Element-UI + Webpack 微信小程序：Uni-app + HBuilder X + Vue.js + Color-UI + Webpack
我负责的功能：微信小程序 完成了以下功能： （1）一张图的腾讯地图展示，在地图上绘制从后台获取到的垃圾点和车辆的位置坐标。 （2）点击车辆点可以跳转到车辆的详情页面和轨迹页面，点击垃圾点可以跳转到垃圾点的详情页面和垃圾上报页面。 （3）车辆的轨迹展示，从垃圾上报到派车到装车到卸车过程中车辆的行驶轨迹。 （4）垃圾点和车辆的预警信息展示，从后台获取到垃圾点的垃圾是否已满，垃圾是否滞留未清理，以及清运车是否已驶出区域，是否在某个位置长时间停留的预警信息，当预警信息较多时，支持页面下拉刷新和触底加载更多功能。 （5）在垃圾点和车辆的预警信息界面，可以通过查询得到具体某个垃圾点或车牌号的车辆的预警信息。 （6）点击垃圾点的预警信息跳转到垃圾点的详细信息页面，在地图上显示垃圾点的地理坐标，以及列表显示垃圾点的所在区域、负责人，当前状态是否已满等信息。 （7）点击车辆预警信息跳转到车辆轨迹页面，在地图上展示车辆行驶的实时轨迹信息，并标注出预警、上报、派车、车辆停留（包括停留时长）、装车、卸车的具体位置。 （8）通知通告功能。系统给特定角色的用户发送一些通知消息，包括放假通知、待办事务、审批任务等等。当通知消息比较多时，支持页面下拉刷新和触底加载更多功能。 （9）种子和农药的经销商管理。列表显示种子经销商和农药经销商的统一社会信用编码、经销商名称、法人代表和手机号，可以新增经销商、修改经销商详细信息，通过统一社会信用编码和经销商名称查询经销商，当经销商数量比较多时，支持页面下拉刷新和触底加载更多功能。 （10）农药的销售情况管理。列表显示各个经销商的各种农药的销售情况，包括经销商名称，杀虫剂、除草剂、杀菌剂、植物生长调节剂、杀鼠剂等农药的销售数量，以及该经销商销售农药的总量。可以新增经销商的农药销售情况，修改某个经销商的某种农药的销售情况，并实时计算该经销商的农药销售总量。当经销商比较多时，支持页面下拉刷新和触底加载更多功能。 （11）农药罐回收情况管理。列表显示农药罐的回收斤数，可以增加、修改农药罐的回收斤数。当回收次数比较多时，支持页面下拉刷新和触底加载更多功能。
部分源码及注释：
一张图功能：
## mymap.vue
<template>
<view>
<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回
</block>
<block slot="content">一张图
</block>
</cu-custom>
<view class="cu-form-group1" >
<map :latitude="latitude" :longitude="longitude" :scale="scale" :markers="covers" show-compass="false"
@markertap="markertap" :style="{height: EchartsHeight,width:EchartsWidth}"></map>
</view>
<view class="cu-bar" style="position: absolute; z-index: 1000; top:100px; right: 15px;">
<view class="action">
<button class="cu-btn bg-green shadow" @tap="showModal" data-target="bottomModal">列表
</button>
</view>
</view>
<view class="cu-form-group" v-if="status" style="position: absolute; z-index: 1000; top:200px; right: 15px;">
<button class='cu-btn bg-green shadow sm' @click="upPoint()">提交
</button>
<button class='cu-btn bg-green shadow sm' @click="exitPoint()">取消
</button>
</view>
<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white">
<view class="action text-green">确定
</view>
<view class="action text-blue" @tap="hideModal">取消
</view>
</view>
<view class="padding-xl modal-body">
<view class="cu-item">
<view class="content" v-for="listItem in listItems">
<text class="text-grey listItemName">{{listItem.listItemName}}
</text>
<text class="text-grey listItemType">{{listItem.listItemType}}
</text>
<button class="cu-btn bg-green shadow btn" @click="showCarDetail(listItem.listItemName, listItem.listItemLatitude, listItem.listItemLongitude)" v-if="listItem.listItemType=='清运车'">详情
</button>
<button class="cu-btn bg-green shadow btn" @click="showDetail(listItem.listItemId)" v-else>详情
</button>
<button class="cu-btn bg-green shadow btn" @click="showTrack(listItem.listItemName, getCurrentTime())" v-if="listItem.listItemType=='清运车'">轨迹
</button>
<button class="cu-btn bg-green shadow btn" @click="goUpdataListItem(listItem)" v-else>上报
</button>
</view>
</view>
</view>
</view>
</view>
<view class="cu-modal" :class="modalName=='DialogModal'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">{{markerInfo.title}}
</view>
<view class="action" @tap="hideModal">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-xl" v-if="markerInfo.type==1||markerInfo.type==2||markerInfo.type==3||markerInfo.type==4||markerInfo.type==5">
<button class="cu-btn bg-green shadow btn-marker" @tap="showDetail(markerInfo.id)">详情
</button>
<button class="cu-btn bg-green shadow btn-marker" @tap="goUpdataPage(markerInfo)">上报
</button>
</view>
<view class="padding-xl" v-if="markerInfo.type==6">
<button class="cu-btn bg-green shadow btn-marker" @tap="showCarDetail(markerInfo.title, markerInfo.latitude, markerInfo.longitude)">详情
</button>
<button class="cu-btn bg-green shadow btn-marker" @tap="showTrack(markerInfo.title, markerInfo.deviceTime)">轨迹
</button>
</view>
<view class="cu-bar bg-white justify-end">
<view class="action">
<button class="cu-btn bg-green margin-left" @tap="hideModal">确定
</button>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
status:false,
title: 'map',
latitude: 41.08,
longitude: 108.27,
callout: {},
scale: 10,
iconPath: '',
controls: [],
covers: [],
EchartsHeight: '',
EchartsWidth: '',
modalName: null,
listItems: [],
upDataInfos: [],
markerInfo: null,
url: {
pointInfo: '/ljdxx/yxLjdxx/list',
carLocationInfo: '/ljsb/ywGarbageReport/queryNewPoint',
carTrackInfo: '/ljsb/ywGarbageReport/queryLocation',
upDataInfo: '/activiti_process/listData'
}
};
},
created() {
this.EchartsHeight = uni.getSystemInfoSync().screenHeight - 60 + "px"
this.EchartsWidth = uni.getSystemInfoSync().screenWidth + "px"
this.initData()
},
methods: {
initData() {
const _this=this
this.$http.get(this.url.pointInfo, {}).then(res => {
if (res.data.success) {
const datas = res.data.result.records
_this.iconPath1 = '/static/icon/zhuanyunzhan.png'
_this.iconPath2 = '/static/icon/lajidian.png'
_this.iconPath3 = '/static/icon/lajitong/png'
_this.iconPath4 = '/static/icon/wushuichulizhan.png'
_this.iconPath5 = '/static/icon/lajichulizhan.png'
datas.forEach((item) => {
switch (item.lxBm) {
case "1":
_this.iconPath = _this.iconPath1;
break;
case "2":
_this.iconPath = _this.iconPath2;
break;
case "3":
_this.iconPath = _this.iconPath3;
break;
case "4":
_this.iconPath = _this.iconPath4;
break;
case "5":
_this.iconPath = _this.iconPath5;
break;
}
this.covers.push({id: item.id*1, latitude: item.latLonW*1, longitude: item.latLonJ*1, title: item.ljdMc, type: item.lxBm, iconPath: _this.iconPath});
})
}
}, error => {
console.info("error...", error)
});
this.$http.get(this.url.carLocationInfo + '?page=1&limit=1000', {}).then(res => {
if (res.data.success) {
const datas = res.data.result
_this.iconPath='/static/icon/lajiche.png'
datas.forEach((item) => {
this.covers.push({id: item.deviceId*1, latitude: item.latitude*0.000001, longitude: item.longitude*0.000001, iconPath: _this.iconPath, title: item.plateNo, deviceTime: item.deviceTime, type: 6});
})
}
}, error => {
console.info("error...", error)
});
this.$http.get(_this.url.upDataInfo,{
params: {
roles: true,
status: 1
}
}).then(res => {
if(res.data.success) {
this.upDataInfos = res.data.result
console.info("upDataInfos",this.upDataInfos)
}
})
},
markertap(e){
const markerId = e.detail.markerId
this.covers.forEach((item) => {
if(item.id === markerId){
this.markerInfo = item
}
})
this.modalName='DialogModal'
},
showModal(e) {
this.modalName = e.currentTarget.dataset.target
this.listItems = []
this.$http.get(this.url.pointInfo, {}).then(res => {
if (res.data.success) {
const datas = res.data.result.records
datas.forEach(data => {
this.listItems.push({
listItemId: data.id,
listItemName: data.ljdMc,
listItemType: data.lxBm_dictText,
listItemLatitude: data.latLonW*1,
listItemLongitude: data.latLonJ*1
})
})
}
}, error => {
console.info("error...", error)
})
this.$http.get(this.url.carLocationInfo + '?page=1&limit=1000', {}).then(res => {
if (res.data.success) {
const datas = res.data.result
datas.forEach(data => {
this.listItems.push({
listItemName: data.plateNo,
listItemType: '清运车',
listItemLatitude: data.latitude*0.000001,
listItemLongitude: data.longitude*0.000001
})
})
}
}, error => {
console.info("error...", error)
})
},
hideModal(e) {
this.modalName = null
},
showTrack(plateNo, deviceTime) {
uni.navigateTo({
url: '/pages/wyrenju/map/track?clMc=' + plateNo + '&time=' + deviceTime
});
this.modalName = null
},
showDetail(ID) {
uni.navigateTo({
url: '/pages/wyrenju/warnInfo/warnInfoBucketDetail?id='+ID
});
this.modalName = null
},
showCarDetail(listItemName, listItemLatitude, listItemLongitude){
uni.navigateTo({
url: '/pages/wyrenju/carsInfo/carsInfoDetail?clMc=' + listItemName + '&latitude=' + listItemLatitude + '&longitude=' + listItemLongitude
})
this.modalName = null
},
goUpdataPage(markerInfo){
let data = this.upDataInfos
let datas = {
procDefId: data.id,
name: data.name,
tableName: data.businessTable,
description: data.description,
updataBy: data.updateBy,
lat: markerInfo.latitude,
lon: markerInfo.longitude,
ljdMc: markerInfo.title
}
uni.navigateTo({
url: '/pages/wyrenju/upInfo/upData?item=' + encodeURIComponent(JSON.stringify(datas)) + '&id=' + 1001
})
this.modalName = null
},
goUpdataListItem(listItem){
let data = this.upDataInfos
let datas = {
procDefId: data.id,
name: data.name,
tableName: data.businessTable,
description: data.description,
updataBy: data.updateBy,
lat: listItem.listItemLatitude,
lon: listItem.listItemLongitude,
ljdMc: listItem.listItemName
}
uni.navigateTo({
url: '/pages/wyrenju/upInfo/upData?item=' + encodeURIComponent(JSON.stringify(datas)) + '&id=' + 1001
})
this.modalName = null
},
getCurrentTime () {
let date = new Date()
let Y = date.getFullYear()
let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
let D = date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()
let hours = date.getHours()
let minutes = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
let seconds = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds()
date = Y + '-' + M + '-' + D + ' ' + hours + ':' + minutes + ':' + seconds
return date
}
}
}
</script>
<style scoped>
.listItemName {
display: inline-block;
width: 70px;
height: 30px;
text-align: center;
margin-left: 0;
}
.listItemType {
display: inline-block;
width: 60px;
height: 30px;
text-align: center;
margin-left: 10px;
}
.btn {
width: 45px;
height: 30px;
padding: 8px 5px;
margin-left: 10px;
}
.modal-body{
max-height:300px;
overflow-y:auto;
}
.btn-marker {
width: 70px;
height: 40px;
font-size: 14px;
margin-left: 25px;
}
</style>
车辆轨迹信息功能：
## track.vue
<template>
<scroll-view :scroll-y="modalName==null">
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回
</block>
<block slot="content">{{clMc}} {{thisDay}}
</block>
</cu-custom>
<view style="margin-top: 10px;">
<map :latitude="latitude" :longitude="longitude" :scale="scale" :markers="markers"
:polyline="polylines" show-compass="false" :style="{height: mapHeight, width: mapWidth}"></map>
</view>
</scroll-view>
</template>
<script>
export default {
name: "Track",
data() {
return {
modalName: null,
mapHeight: uni.getSystemInfoSync().screenHeight - 60 + "px",
mapWidth: uni.getSystemInfoSync().screenWidth + "px",
latitude: 41.08,
longitude: 108.12,
warnLatitude: null,
warnLongitude: null,
info: '',
duration: '',
scale:13,
markers: [],
clMc: '',
thisDay: null,
polylines: [{
points: [],
arrowLine: true,
dottedLine: false,
width: 5,
color: 'rgb(0, 240, 0)'
}],
url: {
carTrackInfo: '/ljsb/ywGarbageReport/queryLocation'
}
}
},
onLoad(option) {
this.clMc = option.clMc;
console.log("clMc: " + this.clMc);
let sendTime = option.time;
let dt = new Date(sendTime);
let year = dt.getFullYear();
let month = dt.getMonth() + 1;
if(month > 0 && month < 10){
month = '0' + month
}
let date = dt.getDate();
if(date > 0 && date < 10){
date = '0' + date
}
let hour = dt.getHours();
if(hour >=0 && hour < 10){
hour = '0' + hour
}
let minute = dt.getMinutes();
if(minute >= 0 && minute < 10){
minute = '0' + minute
}
let second = dt.getSeconds();
if(second >= 0 && second < 10){
second = '0' + second
}
this.thisDay = year + "-" + month + "-" + date;
console.log("thisDay: " + this.thisDay);
let time = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
console.log("time: " + time);
this.warnLatitude = option.warnLatitude;
this.warnLongitude = option.warnLongitude;
this.duration = option.duration;
this.info = option.info;
if(this.duration <= 0){
this.info = option.info;
} else if(this.duration > 0 && this.duration < 60){
this.info = this.info + '\n停留时长：' + this.duration + '秒'
} else if(this.duration >= 60 && this.duration < 3600 && this.duration%60 == 0){
this.info = this.info + '\n停留时长：' + parseInt(this.duration/60) + '分'
} else if(this.duration >= 60 && this.duration < 3600 && this.duration%60 != 0){
this.info = this.info + '\n停留时长：' + parseInt(this.duration/60) + '分' + this.duration%60 + '秒'
} else if(this.duration >= 3600 && this.duration % 3600 == 0){
this.info = this.info + '\n停留时长：' + parseInt(this.duration/3600) + '小时'
} else if(this.duration >= 3600 && this.duration % 3600 != 0 && this.duration % 60 == 0){
this.info = this.info + '\n停留时长：' + parseInt(this.duration/3600) + '小时' + parseInt(this.duration%3600/60) + '分'
} else {
this.info = this.info + '\n停留时长：' + parseInt(this.duration/3600) + '小时' + parseInt(this.duration%3600/60) + '分' + this.duration%60 + '秒'
}
console.log("track----warnLongitude", this.warnLongitude)
this.initData(this.clMc, time);
},
methods: {
initData(clMc, time){
function sortTime(num1, num2) {
return new Date(num1.deviceTime) - new Date(num2.deviceTime)
}
this.$http.get(this.url.carTrackInfo + "?clMc=" + clMc + "&time=" + time).then(res => {
console.log('carTrackInfo: ', res);
if (res.data.success) {
const datas = res.data.result
datas.sort(sortTime)
console.info("sorted datas: ", datas)
if(datas&&datas.length > 0){
this.latitude = datas[0].latitude*0.000001
this.longitude = datas[0].longitude*0.000001
for(let i = 0; i < datas.length; i++){
this.polylines[0].points.push({latitude: datas[i].latitude*0.000001, longitude: datas[i].longitude*0.000001})
if(datas[i].latitude != this.warnLatitude && datas[i].longitude != this.warnLongitude){
if(i == 0){
const iconPathQiDian = '/static/icon/qidian.png'
this.markers.push({iconPath: iconPathQiDian, latitude: datas[i].latitude*0.000001, longitude: datas[i].longitude*0.000001})
} else if (i == datas.length - 1) {
const iconPathZhongDian = '/static/icon/zhongdian.png'
this.markers.push({
iconPath: iconPathZhongDian,
latitude: datas[i].latitude * 0.000001,
longitude: datas[i].longitude * 0.000001
})
}
} else {
const iconPathYuJing = '/static/icon/yujing.png'
this.markers.push({label: {content: this.info, color: '#ff0000', padding: 5, borderWidth: 1, borderColor:'#ff0000', borderRadius: 10}, iconPath: iconPathYuJing, latitude: this.warnLatitude*0.000001, longitude: this.warnLongitude*0.000001})
}
}
} else {
uni.showToast({
title: '无法查询到该车辆轨迹',
icon: "none",
duration: 2000
});
}
}
}).catch((error) => {
console.log(error)
})
}
}
}
</script>
<style scoped>
</style>
垃圾点和车辆预警信息功能：（查询功能支持实时跟踪输入模糊查询）
## warnInfo.vue
<template>
<view>
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回
</block>
<block slot="content">列表
</block>
</cu-custom>
<form>
<view class="cu-form-group margin-top">
<input placeholder="请输入垃圾点名称或车牌号" type="text" @input="selectInfo(selectName)"
v-model="selectName"></input>
<button class='cu-btn bg-green round shadow' @click="selectInfo(selectName)">查询
</button>
</view>
</form>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="cuIcon-title text-orange "></text>
消息列表
</view>
</view>
<view class="cu-list menu-avatar menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
<view class="cu-list menu" v-for="warnInfoItem in warnInfos">
<view class="cu-item arrow" @click="PickerChange(warnInfoItem)">
<view class="content">
<img style="float: left; width: 90px; height: 90px;" :src="warnInfoItem.msgPhoto">
<view style="margin-top:5px">
<span v-if="warnInfoItem.readFlag=='1'" style="background-color:#008000;"
class="isRead-style">已读
</span>
<span v-else style="background-color:#f52346;" class="isRead-style">未读
</span>
<text style="display: flex; float: right; margin-right: 10px; line-height: 25px;"
class="text-grey">{{ warnInfoItem.sendTime?warnInfoItem.sendTime:''}}
</text>
<text style="display: flex; width: 150px; margin-top: 15px" class="text-grey">
{{warnInfoItem.msgCategory=='16'?'车牌号':'位置'}}:{{
JSON.parse(warnInfoItem.msgContent).name?JSON.parse(warnInfoItem.msgContent).name:'' }}
</text>
<text style="display: flex;" class="text-grey">信息:{{
JSON.parse(warnInfoItem.msgContent).info?JSON.parse(warnInfoItem.msgContent).info:'' }}
</text>
</view>
</view>
</view>
</view>
</view>
<view>
<text :class="noMore?'noMoreText':'more'">------------ 没有更多了 ------------
</text>
</view>
</view>
</template>
<script>
export default {
name: "warnInfo",
data() {
return {
warnInfos: [],
modalName: null,
menuBorder: false,
menuCard: false,
selectName: '',
curPage: 0,
totalPage: 0,
noMore: false,
pageSize: 10,
url: {
warnInfoAll: '/sys/sysAnnouncementSend/getMyAnnouncementSend2?msgCategory=11,12,13,14,15,16'
}
};
},
created() {
this.getWarnInfoAll();
},
onReachBottom() {
this.loadMoreData();
},
methods: {
getWarnInfoAll() {
this.$http.get(this.url.warnInfoAll, {}).then(res => {
console.log(res);
this.curPage = 1
this.totalPage = res.data.result.pages
if (res.data.success) {
const datas = res.data.result.records
datas.forEach(data => {
data.msgPhoto = 'data:image/jpeg;base64,' + JSON.parse(data.msgContent).photo
this.warnInfos.push(data)
})
console.info("warnInfoAll: ", this.warnInfos)
}
}, error => {
console.info("error...", error)
});
},
loadMoreData() {
if (this.curPage < this.totalPage) {
this.curPage++;
this.$http.get(this.url.warnInfoAll + '?pageSize=' + this.pageSize + '&pageNo=' + this.curPage).then(res => {
const datas = res.data.result.records
datas.forEach(data => {
this.warnInfos.push(data)
})
})
} else {
this.noMore = true
}
},
PickerChange(warnInfoItem) {
let ID = JSON.parse(warnInfoItem.msgContent).id
let clMc = JSON.parse(warnInfoItem.msgContent).name
let warnLatitude = JSON.parse(warnInfoItem.msgContent).latitude
let warnLongitude = JSON.parse(warnInfoItem.msgContent).longitude
let info = JSON.parse(warnInfoItem.msgContent).info
let duration = JSON.parse(warnInfoItem.msgContent).duration
let sendTime = warnInfoItem.sendTime
if (warnInfoItem.msgCategory == '11' || warnInfoItem.msgCategory == '12' || warnInfoItem.msgCategory == '13' || warnInfoItem.msgCategory == '14' || warnInfoItem.msgCategory == '15') {
uni.navigateTo({
url: '/pages/wyrenju/warnInfo/warnInfoBucketDetail?id=' + ID,
});
} else if (warnInfoItem.msgCategory == '16') {
uni.navigateTo({
url: '/pages/wyrenju/map/track?clMc=' + clMc + '&time=' + sendTime + '&warnLatitude=' + warnLatitude + '&warnLongitude=' + warnLongitude + '&info=' + info + '&duration=' + duration
});
}
},
selectInfo(selectName) {
console.log(selectName)
if (selectName.trim() == '') {
this.warnInfos = [];
this.getWarnInfoAll();
uni.showToast({
title: '垃圾点名称和车牌号需要选填一项',
icon: "none",
duration: 2000
});
} else if (selectName.trim().indexOf(',') > -1 || selectName.trim().indexOf('，') > -1 || selectName.trim().indexOf(' ') > -1 || selectName.trim().indexOf(';') > -1 || selectName.trim().indexOf('.') > -1) {
this.warnInfos = [];
this.getWarnInfoAll();
uni.showToast({
title: '垃圾点名称和车牌号只能选填一项',
icon: "none",
duration: 2000
});
} else {
this.$http.get(this.url.warnInfoAll, {}).then(res => {
let dataName = ''
if (res.data.success) {
const datas = res.data.result.records
this.warnInfos = []
datas.forEach(data => {
dataName = JSON.parse(data.msgContent).name
data.msgPhoto = 'data:image/jpeg;base64,' + JSON.parse(data.msgContent).photo
if (dataName.indexOf(selectName.trim()) > -1) {
this.warnInfos.push(data)
}
})
console.log(this.warnInfos)
}
}, error => {
console.info("error...", error)
});
}
}
}
}
</script>
<style>
.cu-form-group .title {
min-width: calc(4em + 15px);
}
.isRead-style {
display: inline-block;
width: 40px;
height: 20px;
line-height: 20px;
font-size: 11px;
padding: 0 8px;
color: white;
border-radius: 6px;
margin-top: 2px;
}
.noMoreText {
display: block;
width: 200px;
height: 30px;
line-height: 30px;
margin: 0 auto;
font-size: x-small;
}
.more {
display: none;
}
</style>
垃圾点详细信息功能：
## warnInfoBucketDetail.vue
<template>
<scroll-view>
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回
</block>
<block slot="content">详细信息
</block>
</cu-custom>
<view>
<view class="margin-top" style="width: 100%;">
<map :latitude="latitude" :longitude="longitude" :scale="scale" :markers="covers" show-compass="false"
:style="{height: EchartsHeight,width:EchartsWidth}"></map>
</view>
<view class="cu-list menu margin-top">
<view class="cu-item">
<view class="content">
<form>
<view class="cu-bar bg-white margin-top">
<view class="action">
现场照片
</view>
</view>
<view class="cu-form-group">
<img :src="pointImage" mode="aspectFill" class="image"></img>
</view>
</form>
<form>
<view class="cu-form-group margin-top">
<label>名称
</label>
<label>{{listItem.ljdMc}}
</label>
</view>
<view class="cu-form-group">
<label>所属区域
</label>
<label>{{listItem.sysOrgCode_dictText}}
</label>
</view>
<view class="cu-form-group margin-top">
<label>负责人
</label>
<label>{{listItem.cjrMc}}
</label>
</view>
<view class="cu-form-group">
<label>上次清运日期
</label>
<label>{{listItem.createTime}}
</label>
</view>
<view class="cu-form-group margin-top">
<label>最大存储量
</label>
<label>{{listItem.storage}}
</label>
</view>
<view class="cu-form-group">
<label>预警日期
</label>
<label>{{listItem.updateTime?listItem.updateTime:''}}
</label>
</view>
<view class="cu-form-group margin-top">
<label>位置经度
</label>
<label>{{(longitude*1.0).toFixed(6)}}
</label>
</view>
<view class="cu-form-group">
<label>位置纬度
</label>
<label>{{(latitude*1.0).toFixed(6)}}
</label>
</view>
<view class="cu-form-group margin-top">
<label>状态
</label>
<label>{{listItem.status==1?'已满':'未满'}}
</label>
</view>
</form>
</view>
</view>
</view>
</view>
</scroll-view>
</template>
<script>
export default {
name: 'warnInfoBucketDetail',
data() {
return {
title: 'map',
latitude: 41.08,
longitude: 108.17,
scale: 11,
covers: [],
EchartsHeight: 250+'px',
EchartsWidth: uni.getSystemInfoSync().screenWidth + 'px',
listItem: [],
modalName: null,
pointImage: null,
url: {
pointInfo: '/ljdxx/yxLjdxx/list'
}
};
},
onLoad(option) {
let ID = option.id
this.initData(ID)
},
methods: {
initData(ID) {
this.$http.get(this.url.pointInfo+"?id="+ID).then(res => {
console.log(res);
if (res.data.success) {
this.listItem = res.data.result.records[0]
this.latitude = this.listItem.latLonW*1.0
this.longitude = this.listItem.latLonJ*1.0
this.pointImage = 'data:image/jpeg;base64,' + this.listItem.base64Str
const label = {
content: this.listItem.ljdMc,
color: '#ff0000',
padding: 5,
borderWidth: 1,
borderColor:'#ff0000',
borderRadius: 10
}
this.covers.push({latitude: this.listItem.latLonW*1.0, longitude: this.listItem.latLonJ*1.0, label: label})
}
}).catch((error) => {
console.log(error)
})
}
}
}
</script>
<style scoped>
.image {
width: 200px;
height: 200px;
display: block;
margin: 0 auto;
}
</style>
车辆详细信息功能：
## carsInfoDetail.vue
<template>
<scroll-view>
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回
</block>
<block slot="content">详细信息
</block>
</cu-custom>
<view>
<view class="margin-top" style="width: 100%;">
<map :latitude="latitude" :longitude="longitude" :scale="scale" :markers="covers" show-compass="false"
:style="{height: EchartsHeight,width:EchartsWidth}"></map>
</view>
<view class="cu-list menu margin-top">
<view class="cu-item">
<view class="content">
<form>
<view class="cu-bar bg-white margin-top">
<view class="action">
车辆照片
</view>
</view>
<view class="cu-form-group">
<img :src="carImage" mode="aspectFill" class="image"></img>
</view>
</form>
<form>
<view class="cu-form-group margin-top">
<label>车牌号
</label>
<label>{{listItem.clMc}}
</label>
</view>
<view class="cu-form-group">
<label>司机
</label>
<label>{{listItem.driver}}
</label>
</view>
<view class="cu-form-group margin-top">
<label>车辆类型
</label>
<label>{{listItem.cllx}}
</label>
</view>
<view class="cu-form-group">
<label>所在乡镇
</label>
<label>{{listItem.departName}}
</label>
</view>
<view class="cu-form-group margin-top">
<label>当前位置经度
</label>
<label>{{(longitude*1.0).toFixed(6)}}
</label>
</view>
<view class="cu-form-group">
<label>当前位置纬度
</label>
<label>{{(latitude*1.0).toFixed(6)}}
</label>
</view>
<view class="cu-form-group margin-top">
<label>更新时间
</label>
<label>{{listItem.createTime}}
</label>
</view>
</form>
</view>
</view>
</view>
</view>
</scroll-view>
</template>
<script>
export default {
name: 'warnInfoBucketDetail',
data() {
return {
title: 'map',
latitude: 41.08,
longitude: 108.17,
scale: 11,
covers: [],
EchartsHeight: 250+'px',
EchartsWidth: uni.getSystemInfoSync().screenWidth + 'px',
listItem: [],
modalName: null,
carImage: null,
url: {
carInfo: '/sys/car/list'
}
};
},
onLoad(option) {
let clMc = option.clMc
this.latitude = option.latitude
this.longitude = option.longitude
this.initData(clMc)
},
methods: {
initData(clMc) {
this.$http.get(this.url.carInfo+"?clMc="+clMc).then(res => {
console.log(res);
if (res.data.success) {
this.listItem = res.data.result.records[0]
this.carImage = 'data:image/jpeg;base64,' + this.listItem.base64Str
const label = {
content: this.listItem.clMc,
color: '#ff0000',
padding: 5,
borderWidth: 1,
borderColor:'#ff0000',
borderRadius: 10
}
this.covers.push({latitude: this.latitude, longitude: this.longitude, label: label})
}
}).catch((error) => {
console.log(error)
})
}
}
}
</script>
<style scoped>
.image {
width: 200px;
height: 200px;
display: block;
margin: 0 auto;
}
</style>
通知通告功能
## notice.vue
<template name="notice">
<view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
<cu-custom bgColor="bg-gradual-blue notice-list" :isBack="true">
<block slot="backText">返回
</block>
<block slot="content">通知通告
</block>
</cu-custom>
<view class="margin-top-lg">
<view class="sm-border card-menu cu-list margin-top menu notice-list" v-for="item in listNotice">
<view class="cu-item content arrow notice-view" @click="PickerChange(item.id)">
<view class="content">标题：{{ item.titile }}
</view>
<view>
<text class="content cuIcon-infofill text-green margin-right-xs" v-if="item.readFlag=='1'"></text>
<text class="content cuIcon-infofill text-red margin-right-xs" v-else></text>
摘要：{{ item.msgAbstract }}
</view>
<view class="content">发送时间：{{ item.sendTime }}
</view>
</view>
</view>
</view>
<view>
<text :class="noMore?'noMoreText':'more'">------------ 没有更多了 ------------
</text>
</view>
</view>
</template>
<script>
export default {
name: "notice",
data() {
return {
url: {
noticeUrl: '/sys/sysAnnouncementSend/getMyAnnouncementSend'
},
listNotice: [],
modalName: null,
curPage: 0,
totalPage: 0,
noMore: false,
pageSize: 10
};
},
created() {
this.selectNoticeList();
},
onReachBottom(){
this.loadMoreData();
},
methods: {
selectNoticeList() {
this.$http.get(this.url.noticeUrl).then(res => {
this.curPage = 1
this.totalPage = res.data.result.pages
if (res.data.success) {
const datas = res.data.result.records
datas.forEach(data => {
this.listNotice.push(data)
})
} else {
uni.showModal({
title: '数据查询失败!'
})
}
}, error => {
console.log("error.....", error)
})
},
loadMoreData(){
if(this.curPage < this.totalPage){
this.curPage++;
this.$http.get(this.url.noticeUrl+'?pageSize='+this.pageSize +'&pageNo='+this.curPage).then(res => {
const datas = res.data.result.records
datas.forEach(data =>{
this.listNotice.push(data)
})
})
} else {
this.noMore = true
}
},
showModal(e) {
console.log("showModal", e.currentTarget.dataset.target)
this.modalName = e.currentTarget.dataset.target
},
hideModal(e) {
this.modalName = null
},
PickerChange(id) {
uni.navigateTo({
url: '/pages/wyrenju/notice/noticeDetail?id='+ id
});
}
}
}
</script>
<style>
.cu-form-group .title {
min-width: calc(4em + 15px);
}
.page {
height: 100Vh;
width: 100vw;
}
.notice-view {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start !important;
}
.noMoreText {
display: block;
width: 200px;
height: 30px;
line-height: 30px;
margin: 0 auto;
font-size: x-small;
}
.more{
display: none;
}
</style>
通知通告详细信息功能
## noticeDetail.vue
<template>
<scroll-view>
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回
</block>
<block slot="content">详细信息
</block>
</cu-custom>
<view class="cu-list menu margin-top">
<view class="cu-item">
<view class="content">
<form>
<view class="cu-form-group margin-top">
<label>标题
</label>
<label>{{title}}
</label>
</view>
<view class="cu-form-group">
<label>状态
</label>
<label>{{readFlag?'已读':'未读'}}
</label>
</view>
<view class="cu-form-group margin-top">
<label>发送者
</label>
<label>{{sender}}
</label>
</view>
<view class="cu-form-group">
<label>发送时间
</label>
<label>{{sendTime}}
</label>
</view>
<view class="cu-form-group margin-top">
<label>内容
</label>
<p v-html="msgContent"></p>
</view>
</form>
</view>
</view>
</view>
</scroll-view>
</template>
<script>
export default {
name: "noticeDetail",
data(){
return {
title: '',
readFlag: 0,
sender: '',
sendTime: '',
msgContent: '',
url: {
noticeUrl: '/sys/sysAnnouncementSend/getMyAnnouncementSend'
}
};
},
onLoad(option) {
let id = option.id
this.$http.get(this.url.noticeUrl).then(res => {
console.info("noticeDetail-res", res)
if (res.data.success) {
var datas = res.data.result.records
datas.forEach(data => {
if(data.id == id){
this.title = data.titile
this.readFlag = data.readFlag
this.sender = data.sender
this.sendTime = data.sendTime
this.msgContent = data.msgContent.replace('h1', 'div').replace('<ul', '<ul class="msgContent-list"')
}
})
}
}), error => {
console.info("error...", error)
}
}
}
</script>
<style>
.msgContent-list {
list-style: none;
text-indent: -40px;
font-weight: normal;
}
</style>
农业废弃物管理功能
## wastes.vue
<template>
<view>
<scroll-view scroll-y class="page">
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回
</block>
<block slot="content">农业废弃物管理
</block>
</cu-custom>
<view class="nav-list margin-top">
<navigator hover-class="none" :url=item.url class="nav-li" navigateTo :class="'bg-'+item.color"
:style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements"
:key="index">
<view class="nav-title">{{item.name}}
</view>
<view class="nav-name">{{item.description}}
</view>
<text :class="'cuIcon-' + item.cuIcon"></text>
</navigator>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
name: "pot",
data(){
return {
elements: [{
description: '经销商采集界面',
name: '经销商管理',
color: 'purple',
cuIcon: 'discover',
url: '/pages/wyrenju/wastes/distributor'
}, {
description: '农药销售管理界面',
name: '农药管理',
color: 'brown',
cuIcon: 'colorlens',
url: '/pages/wyrenju/wastes/chemical'
}, {
description: '农药罐回收界面',
name: '农药罐管理',
color: 'mauve',
cuIcon: 'cuIcon',
url: '/pages/wyrenju/wastes/pot'
}]
}
}
}
</script>
<style scoped>
.page {
height: 100vh;
}
</style>
经销商列表
## distributor.vue
<template>
<scroll-view class="cu-list menu margin-top">
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回
</block>
<block slot="content">经销商管理
</block>
</cu-custom>
<form>
<view class="cu-form-group margin-top">
<input placeholder="请输入经销商的统一社会信用代码或名称" type="text" @input="selectDistributor" v-model="selectOption"></input>
<uni-icons size="20" color="#ccc" type="clear" v-if="showClearIcon" @click="clearIcon" />
<button class='cu-btn bg-green shadow' @click="addDistributor">添加
</button>
</view>
</form>
<view class="margin-top-sm">
<view class="sm-border cu-list menu card-menu" v-for="distributor in distributors">
<view class="content cu-item waste-view arrow margin-top-xs" @click="distributorDetail(distributor.id, distributor.socialCreditCode, distributor.distributorName, distributor.licenseCode, distributor.representative, distributor.phone, distributor.state)">
<text class="content waste-text">统一社会信用代码：{{distributor.socialCreditCode}}
</text>
<text class="content waste-text">经销商：{{distributor.distributorName}}
</text>
<text class="content waste-text">法定代表人：{{distributor.representative}}
</text>
<text class="content waste-text">联系电话：{{distributor.phone}}
</text>
</view>
</view>
</view>
<view>
<text :class="noMore?'noMoreText':'more'">------------ 没有更多了 ------------
</text>
</view>
</scroll-view>
</template>
<script>
import WebViewLocal from "../../component/web-view-local/web-view-local";
import UniIcons from "../../../components/uni-app/uni-icons/uni-icons";
export default {
name: "distributor",
components: {UniIcons, WebViewLocal},
data(){
return {
url: {
list: '/sys/distributor/list'
},
distributors: [],
oldDistributors: [],
curDistributors: [],
showClearIcon: false,
selectOption: null,
curPage: 0,
noMore: false,
pageSize: 10
};
},
onLoad(){
this.initDistributor();
},
onReachBottom(){
this.loadMoreData();
},
methods: {
initDistributor(){
this.$http.get(this.url.list).then(res => {
this.curPage = res.data.result.pages
this.$http.get(this.url.list+'?pageSize='+this.pageSize +'&pageNo='+this.curPage).then(res => {
const datas = res.data.result.records
datas.forEach(data => {
this.distributors.unshift(data)
this.oldDistributors.unshift(data)
})
})
this.loadMoreData()
})
},
loadMoreData(){
if(this.curPage > 1){
this.curPage--;
this.$http.get(this.url.list+'?pageSize='+this.pageSize +'&pageNo='+this.curPage).then(res => {
const datas = res.data.result.records
this.curDistributors = []
datas.forEach(data => {
this.curDistributors.unshift(data)
})
this.curDistributors.forEach(data =>{
if(this.selectOption && this.selectOption.trim().length > 0){
if((data.socialCreditCode.indexOf(this.selectOption.trim()) > -1) || (data.distributorName.indexOf(this.selectOption.trim()) > -1)){
this.distributors.push(data)
}
} else {
this.distributors.push(data)
this.oldDistributors.push(data)
}
})
})
} else {
this.noMore = true
}
},
selectDistributor(){
if(this.selectOption && this.selectOption.trim().length > 0){
this.distributors = []
this.showClearIcon = true
this.oldDistributors.forEach(distributor => {
if((distributor.socialCreditCode.indexOf(this.selectOption.trim()) > -1) || (distributor.distributorName.indexOf(this.selectOption.trim()) > -1)){
this.distributors.push(distributor)
}
})
} else {
this.showClearIcon = false
this.distributors = this.oldDistributors
}
},
clearIcon(){
this.showClearIcon = false
this.selectOption = null
this.distributors = this.oldDistributors
},
addDistributor(){
uni.navigateTo({
url: '/pages/wyrenju/wastes/distributorAdd'
});
},
distributorDetail(id, socialCreditCode, distributorName, licenseCode, representative, phone, state){
uni.navigateTo({
url: '/pages/wyrenju/wastes/distributorEdit?id=' + id + '&socialCreditCode=' + socialCreditCode +
'&distributorName=' + distributorName + '&licenseCode=' + licenseCode +
'&representative=' + representative + '&phone=' + phone + '&state=' + state
})
}
}
}
</script>
<style scoped>
.waste-view {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start !important;
}
.waste-text {
font-size: 14px !important;
}
.noMoreText {
display: block;
width: 200px;
height: 30px;
line-height: 30px;
margin: 0 auto;
font-size: x-small;
}
.more{
display: none;
}
</style>
新增经销商功能
## distributorAdd.vue
<template>
<scroll-view class="cu-list menu margin-top">
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回
</block>
<block slot="content">添加经销商
</block>
</cu-custom>
<view class="cu-item">
<view class="content">
<form>
<view class="cu-form-group">
<view class="title">统一社会信用代码
</view>
<input name="socialCreditCode" placeholder="请输入统一社会信用代码" v-model="socialCreditCode"></input>
</view>
<view class="cu-form-group">
<view class="title">经销商名称
</view>
<input name="distributorName" placeholder="请输入经营者名称" v-model="distributorName"></input>
</view>
<view class="cu-form-group">
<view class="title">许可证编码
</view>
<input name="licenseCode" placeholder="请输入许可证编码" v-model="licenseCode"></input>
</view>
<view class="cu-form-group">
<view class="title">法定代表人
</view>
<input name="representative" placeholder="请输入法定代表人" v-model="representative"></input>
</view>
<view class="cu-form-group">
<view class="title">联系电话
</view>
<input name="phone" placeholder="请输入联系电话" v-model="phone"></input>
</view>
</form>
</view>
</view>
<view class="cu-form-group margin-top">
<button class='cu-btn bg-green shadow submit-btn' @click="distributorAddSubmit()">
提交
</button>
</view>
</scroll-view>
</template>
<script>
export default {
name: "distributorAdd",
data(){
return {
id: null,
socialCreditCode: null,
distributorName: null,
licenseCode: null,
representative: null,
phone: null,
state: '正常',
distributor: {},
url: {
add: '/sys/distributor/add'
}
};
},
methods: {
distributorAddSubmit(){
this.distributor.socialCreditCode = this.socialCreditCode
this.distributor.distributorName = this.distributorName
this.distributor.licenseCode = this.licenseCode
this.distributor.representative = this.representative
this.distributor.phone = this.phone
this.distributor.state = this.state
this.$http.post(this.url.add, this.distributor).then(res => {
console.log("添加res: ", res);
if(res.data.success){
uni.navigateTo({
url: '/pages/wyrenju/wastes/distributor'
})
}else {
uni.showToast({
title: '添加失败',
icon: "none",
duration: 2000
})
}
})
}
}
}
</script>
<style scoped>
.submit-btn {
display: block;
margin: 0 auto;
width: 100px;
height: 35px;
line-height: 35px;
}
</style>
修改经销商详细信息功能
## distributorEdit.vue
<template>
<scroll-view class="cu-list menu margin-top">
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回
</block>
<block slot="content">经销商详情
</block>
</cu-custom>
<view class="cu-item">
<view class="content">
<form>
<view class="cu-form-group">
<view class="title">统一社会信用代码
</view>
<input id="socialCreditCode" name="socialCreditCode" v-model="distributor.socialCreditCode">
</view>
<view class="cu-form-group">
<view class="title">经销商
</view>
<input id="distributorName" name="distributorName" v-model="distributor.distributorName" />
</view>
<view class="cu-form-group">
<view class="title">许可证编码
</view>
<input id="licenseCode" name="licenseCode" v-model="distributor.licenseCode" />
</view>
<view class="cu-form-group">
<view class="title">法定代表人
</view>
<input id="representative" name="representative" v-model="distributor.representative" />
</view>
<view class="cu-form-group">
<view class="title">联系电话
</view>
<input id="phone" name="phone" v-model="distributor.phone" />
</view>
<view class="cu-form-group">
<view class="title">状态
</view>
<input id="state" name="state" v-model="distributor.state" />
</view>
</form>
</view>
</view>
<view class="cu-form-group margin-top">
<button class='cu-btn bg-green shadow submit-btn' @click="distributorEditSubmit()">
修改
</button>
</view>
</scroll-view>
</template>
<script>
export default {
name: "distributorEdit",
data(){
return{
id: null,
socialCreditCode: null,
distributorName: null,
licenseCode: null,
representative: null,
phone: null,
state: null,
distributor: {},
url: {
edit: '/sys/distributor/edit'
}
};
},
onLoad(option){
this.id = option.id
this.socialCreditCode = option.socialCreditCode
this.distributorName = option.distributorName
this.licenseCode = option.licenseCode
this.representative = option.representative
this.phone = option.phone
this.state = option.state
this.distributor.id = this.id
this.distributor.socialCreditCode = this.socialCreditCode
this.distributor.distributorName = this.distributorName
this.distributor.licenseCode = this.licenseCode
this.distributor.representative = this.representative
this.distributor.phone = this.phone
this.distributor.state = this.state
},
methods: {
distributorEditSubmit(){
this.$http.put(this.url.edit, this.distributor).then(res => {
console.log("修改res: ", res);
if(res.data.success){
uni.navigateTo({
url: '/pages/wyrenju/wastes/distributor'
})
}else {
uni.showToast({
title: '修改失败',
icon: "none",
duration: 2000
})
}
})
}
}
}
</script>
<style scoped>
.submit-btn {
display: block;
margin: 0 auto;
width: 150px;
height: 35px;
line-height: 35px;
}
</style>
农药销售情况列表
## chemical.vue
<template>
<scroll-view class="cu-list menu margin-top">
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回
</block>
<block slot="content">农药销售情况
</block>
</cu-custom>
<form>
<view class="cu-form-group margin-top-sm add-view">
<view class="chemical-view">
<view class="picker-view">
<text class="picker-text">查询起始日期：
</text>
<picker mode="date" :value="startDate" @change="bindStartDateChange">
<view class="picker-text">{{startDateStr}}
</view>
</picker>
</view>
<view class="picker-view">
<text class="picker-text">查询结束日期：
</text>
<picker mode="date" :value="endDate" @change="bindEndDateChange">
<view class="picker-text">{{endDateStr}}
</view>
</picker>
</view>
</view>
<button class='cu-btn bg-green shadow' @click="addChemical">添加
</button>
</view>
</form>
<view class="margin-top-sm">
<view class="sm-border cu-list menu card-menu" v-for="chemical in chemicals">
<view class="content cu-item waste-view arrow margin-top-xs" @click="chemicalDetail(chemical.id, chemical.distributorName, chemical.createTime, chemical.insecticide, chemical.herbicide, chemical.bactericide, chemical.regulator, chemical.rodenticide)">
<text class="content waste-text">经销商名称: {{chemical.distributorName}}
</text>
<text class="content waste-text">杀虫剂销售数量: {{chemical.insecticide}}
</text>
<text class="content waste-text">除草剂销售数量: {{chemical.herbicide}}
</text>
<text class="content waste-text">杀菌剂销售数量: {{chemical.bactericide}}
</text>
<text class="content waste-text">植物生长调节剂销售数量: {{chemical.regulator}}
</text>
<text class="content waste-text">杀鼠剂销售数量: {{chemical.rodenticide}}
</text>
</view>
</view>
</view>
<view>
<text :class="noMore?'noMoreText':'more'">------------ 没有更多了 ------------
</text>
</view>
</scroll-view>
</template>
<script>
export default {
name: "chemical",
data(){
return {
url: {
list: '/ljsb/ywSaleData/list'
},
chemicals: [],
oldChemicals: [],
curChemicals: [],
createTime: null,
startDateStr: null,
endDateStr: null,
startDate: null,
endDate: null,
insecticide: 0,
herbicide: 0,
bactericide: 0,
regulator: 0,
rodenticide: 0,
curPage: 0,
noMore: false,
pageSize: 10
};
},
onLoad(){
this.startDate = new Date()
this.startDate.setFullYear(this.startDate.getFullYear() -1)
this.startDateStr = this.dateFormat(this.startDate)
this.endDate = new Date()
this.endDateStr = this.dateFormat(this.endDate)
this.initChemicals();
},
onReachBottom(){
this.loadMoreData();
},
methods: {
initChemicals(){
this.$http.get(this.url.list).then(res => {
this.curPage = res.data.result.pages
this.$http.get(this.url.list+'?pageSize='+this.pageSize +'&pageNo='+this.curPage).then(res => {
const datas = res.data.result.records
datas.forEach(data => {
if(new Date(data.createTime) >= this.startDate && new Date(data.createTime) <= this.endDate){
this.chemicals.unshift(data)
}
this.oldChemicals.unshift(data)
})
})
this.loadMoreData()
})
},
loadMoreData(){
if(this.curPage > 1){
this.curPage--;
this.$http.get(this.url.list+'?pageSize='+this.pageSize +'&pageNo='+this.curPage).then(res => {
const datas = res.data.result.records
this.curChemicals = []
datas.forEach(data => {
this.curChemicals.unshift(data)
})
this.curChemicals.forEach(data =>{
if(new Date(data.createTime) >= this.startDate && new Date(data.createTime) <= this.endDate){
this.chemicals.push(data)
}
this.oldChemicals.push(data)
})
})
} else {
this.noMore = true
}
},
dateFormat(date) {
let year = date.getFullYear().toString().padStart(4, '0');
let month = (date.getMonth() + 1).toString().padStart(2, '0');
let day = date.getDate().toString().padStart(2, '0');
return `${year}-${month}-${day}`;
},
selectDate(startDate, endDate){
if(startDate && endDate){
this.chemicals = []
this.oldChemicals.forEach(chemical => {
if(new Date(chemical.createTime) >= startDate && new Date(chemical.createTime) <= endDate){
this.chemicals.push(chemical)
}
})
} else {
uni.showToast({
title: '起始时间和结束时间必须全部设置',
icon: "none",
duration: 2000
});
}
},
addChemical(){
uni.navigateTo({
url: '/pages/wyrenju/wastes/chemicalAdd'
});
},
chemicalDetail(id, distributorName, createTime, insecticide, herbicide, bactericide, regulator, rodenticide){
uni.navigateTo({
url: '/pages/wyrenju/wastes/chemicalEdit?id='+id+'&distributorName='+distributorName+
'&createTime=' +createTime+ '&insecticide='+insecticide+'&herbicide='+herbicide+
'&bactericide='+bactericide+'®ulator='+regulator+'&rodenticide='+rodenticide
})
},
bindStartDateChange(e){
this.startDateStr = e.detail.value
this.startDate = new Date(this.startDateStr)
this.selectDate(this.startDate, this.endDate)
},
bindEndDateChange(e){
this.endDateStr = e.detail.value
this.endDate = new Date(this.endDateStr)
this.endDate.setDate(this.endDate.getDate()+1)
this.selectDate(this.startDate, this.endDate)
}
}
}
</script>
<style scoped>
.add-view {
display: flex;
height: 80px;
}
.chemical-view {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.picker-view {
display: flex;
}
.waste-view {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start !important;
}
.waste-text {
font-size: 14px !important;
}
.picker-text {
display: inline-block;
height: 20px;
line-height: 20px;
margin-top: 10px;
font-size: large;
color: #333;
}
.noMoreText {
display: block;
width: 200px;
height: 30px;
line-height: 30px;
margin: 0 auto;
font-size: x-small;
}
.more{
display: none;
}
</style>
新增农药销售情况功能
## chemicalAdd.vue
<template>
<scroll-view class="cu-list menu margin-top">
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回
</block>
<block slot="content">添加农药销售情况
</block>
</cu-custom>
<view class="cu-item">
<view class="content">
<form>
<view class="cu-form-group">
<view class="title">经销商名称
</view>
<picker @change="bindPickerChange" :value="array[index].id" :range="array" range-key="distributorName">
<view class="cu-item">{{array[index].distributorName}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">录入时间
</view>
<input name="createTime" v-model="createTime" disabled></input>
</view>
<view class="cu-form-group">
<view class="title">杀虫剂数量
</view>
<input name="insecticide" placeholder="请输入杀虫剂数量" v-model="chemical.insecticide"></input>
</view>
<view class="cu-form-group">
<view class="title">除草剂数量
</view>
<input name="herbicide" placeholder="请输入除草剂数量" v-model="chemical.herbicide"></input>
</view>
<view class="cu-form-group">
<view class="title">杀菌剂数量
</view>
<input name="bactericide" placeholder="请输入杀菌剂数量" v-model="chemical.bactericide"></input>
</view>
<view class="cu-form-group">
<view class="title">植物生长调节剂数量
</view>
<input name="regulator" placeholder="请输入植物生长调节剂数量" v-model="chemical.regulator"></input>
</view>
<view class="cu-form-group">
<view class="title">杀鼠剂数量
</view>
<input name="rodenticide" placeholder="请输入杀鼠剂数量" v-model="chemical.rodenticide"></input>
</view>
</form>
</view>
</view>
<view class="cu-form-group margin-top">
<button class='cu-btn bg-green shadow submit-btn' @click="chemicalAddSubmit()">
提交
</button>
</view>
</scroll-view>
</template>
<script>
export default {
name: "chemicalAdd",
data(){
return {
id: null,
distributorName: null,
createTime: this.getTime(),
chemical: {},
curPage: 0,
pageSize: 10,
index: 0,
array: [],
curArray: [],
url: {
add: '/ljsb/ywSaleData/add',
list: '/sys/distributor/list'
}
};
},
onLoad(){
this.initDistributor();
},
methods: {
getTime() {
const date = new Date();
let year = date.getFullYear().toString().padStart(4, '0');
let month = (date.getMonth() + 1).toString().padStart(2, '0');
let day = date.getDate().toString().padStart(2, '0');
let hour = date.getHours().toString().padStart(2, '0');
let minute = date.getMinutes().toString().padStart(2, '0');
let second = date.getSeconds().toString().padStart(2, '0');
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
},
initDistributor(){
this.$http.get(this.url.list).then(res => {
this.curPage = res.data.result.pages
this.$http.get(this.url.list+'?pageSize='+this.pageSize +'&pageNo='+this.curPage).then(res => {
console.log("chemicalAdd-res: ", res);
const datas = res.data.result.records
datas.forEach(data => {
this.array.unshift(data)
})
})
this.loadMoreData()
})
},
loadMoreData(){
while(this.curPage > 1){
this.curPage--;
this.$http.get(this.url.list+'?pageSize='+this.pageSize +'&pageNo='+this.curPage).then(res => {
const datas = res.data.result.records
this.curArray = []
datas.forEach(data => {
this.curArray.unshift(data)
})
this.curArray.forEach(data =>{
this.array.push(data)
})
})
}
},
chemicalAddSubmit(){
this.chemical.distributorId = this.array[this.index].id
this.chemical.createTime = this.createTime
this.chemical.insecticide = this.chemical.insecticide?this.chemical.insecticide:'0'
this.chemical.herbicide = this.chemical.herbicide?this.chemical.herbicide:'0'
this.chemical.bactericide = this.chemical.bactericide?this.chemical.bactericide:'0'
this.chemical.regulator = this.chemical.regulator?this.chemical.regulator:'0'
this.chemical.rodenticide = this.chemical.rodenticide?this.chemical.rodenticide:'0'
this.$http.post(this.url.add, this.chemical).then(res => {
console.log("添加res: ", res);
if(res.data.success){
uni.navigateTo({
url: '/pages/wyrenju/wastes/chemical'
})
}else {
uni.showToast({
title: '添加失败',
icon: "none",
duration: 2000
})
}
})
},
bindPickerChange: function(e) {
this.index = e.detail.value
},
}
}
</script>
<style scoped>
.submit-btn {
display: block;
margin: 0 auto;
width: 100px;
height: 35px;
line-height: 35px;
}
</style>
修改农药销售情况功能
## chemicalEdit.vue
<template>
<scroll-view class="cu-list menu margin-top">
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回
</block>
<block slot="content">农药销售详情
</block>
</cu-custom>
<view class="cu-item">
<view class="content">
<form>
<view class="cu-form-group">
<view class="title">经销商名称
</view>
<input id="distributorName" name="distributorName" v-model="distributorName" disabled>
</view>
<view class="cu-form-group">
<view class="title">录入时间
</view>
<input id="createTime" name="createTime" v-model="createTime" disabled />
</view>
<view class="cu-form-group">
<view class="title">杀虫剂数量
</view>
<input id="insecticide" name="insecticide" v-model="insecticide" />
</view>
<view class="cu-form-group">
<view class="title">除草剂数量
</view>
<input id="herbicide" name="herbicide" v-model="herbicide" />
</view>
<view class="cu-form-group">
<view class="title">杀菌剂数量
</view>
<input id="bactericide" name="bactericide" v-model="bactericide" />
</view>
<view class="cu-form-group">
<view class="title">植物生长调节剂数量
</view>
<input id="regulator" name="regulator" v-model="regulator" />
</view>
<view class="cu-form-group">
<view class="title">杀鼠剂数量
</view>
<input id="rodenticide" name="rodenticide" v-model="rodenticide" />
</view>
<view class="cu-form-group">
<view class="title">农药销售总量
</view>
<input id="sum" name="sum" v-model="sum" disabled />
</view>
</form>
</view>
</view>
<view class="cu-form-group margin-top">
<button class='cu-btn bg-green shadow submit-btn' @click="chemicalEditSubmit()">
修改
</button>
</view>
</scroll-view>
</template>
<script>
export default {
name: "chemicalEdit",
data(){
return{
id: null,
distributorName: null,
createTime: null,
insecticide: 0,
herbicide: 0,
bactericide: 0,
regulator: 0,
rodenticide: 0,
chemical: {},
url: {
edit: '/ljsb/ywSaleData/edit'
}
};
},
onLoad(option){
this.id = option.id
this.distributorName = option.distributorName
this.createTime = option.createTime
this.insecticide = option.insecticide
this.herbicide = option.herbicide
this.bactericide = option.bactericide
this.regulator = option.regulator
this.rodenticide = option.rodenticide
},
computed: {
sum: {
get(){
return parseInt(this.insecticide?this.insecticide:'0')
+ parseInt(this.herbicide?this.herbicide:'0')
+ parseInt(this.bactericide?this.bactericide:'0')
+ parseInt(this.regulator?this.regulator:'0')
+ parseInt(this.rodenticide?this.rodenticide:'0')
}
}
},
methods: {
chemicalEditSubmit(){
this.chemical.id = this.id
this.chemical.createTime = this.createTime
this.chemical.insecticide = this.insecticide?this.insecticide:'0'
this.chemical.herbicide = this.herbicide?this.herbicide:'0'
this.chemical.bactericide = this.bactericide?this.bactericide:'0'
this.chemical.regulator = this.regulator?this.regulator:'0'
this.chemical.rodenticide = this.rodenticide?this.rodenticide:'0'
this.$http.put(this.url.edit, this.chemical).then(res => {
console.log("修改res: ", res);
if(res.data.success){
uni.navigateTo({
url: '/pages/wyrenju/wastes/chemical'
})
}else {
uni.showToast({
title: '修改失败',
icon: "none",
duration: 2000
})
}
})
}
}
}
</script>
<style scoped>
.submit-btn {
display: block;
margin: 0 auto;
width: 150px;
height: 35px;
line-height: 35px;
}
</style>
农药罐回收情况列表
## pot.vue
<template>
<scroll-view class="cu-list menu margin-top">
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回
</block>
<block slot="content">农药罐回收情况
</block>
</cu-custom>
<form>
<view class="cu-form-group margin-top add-view">
<view class="recovery-view">
<view class="picker-view">
<text class="picker-text">查询起始日期：
</text>
<picker mode="date" :value="startDate" @change="bindStartDateChange">
<view class="picker-text">{{startDateStr}}
</view>
</picker>
</view>
<view class="picker-view">
<text class="picker-text">查询结束日期：
</text>
<picker mode="date" :value="endDate" @change="bindEndDateChange">
<view class="picker-text">{{endDateStr}}
</view>
</picker>
</view>
</view>
<view>
<button class='cu-btn bg-green shadow' @click="addPot">添加
</button>
</view>
</view>
</form>
<view class="margin-top-sm">
<view class="sm-border cu-list menu card-menu" v-for="pot in pots">
<view class="content cu-item waste-view arrow margin-top-xs" @click="potDetail(pot.id, pot.createTime, pot.number)">
<text class="content waste-text">录入时间: {{pot.createTime}}
</text>
<text class="content waste-text">回收斤数: {{pot.number}}
</text>
</view>
</view>
</view>
<view>
<text :class="noMore?'noMoreText':'more'">------------ 没有更多了 ------------
</text>
</view>
</scroll-view>
</template>
<script>
export default {
name: "pot",
data(){
return {
url: {
list: '/sys/recovery/list'
},
pots: [],
oldPots: [],
curPots: [],
createTime: null,
startDateStr: null,
endDateStr: null,
startDate: null,
endDate: null,
number: 0,
curPage: 0,
noMore: false,
pageSize: 10
};
},
onLoad(){
this.startDate = new Date()
this.startDate.setFullYear(this.startDate.getFullYear() -1)
this.startDateStr = this.dateFormat(this.startDate)
this.endDate = new Date()
this.endDateStr = this.dateFormat(this.endDate)
this.initPots();
},
onReachBottom(){
this.loadMoreData();
},
methods: {
initPots(){
this.$http.get(this.url.list).then(res => {
this.curPage = res.data.result.pages
this.$http.get(this.url.list+'?pageSize='+this.pageSize +'&pageNo='+this.curPage).then(res => {
const datas = res.data.result.records
datas.forEach(data => {
if(new Date(data.createTime) >= this.startDate && new Date(data.createTime) <= this.endDate) {
this.pots.unshift(data)
}
this.oldPots.unshift(data)
})
})
this.loadMoreData()
})
},
loadMoreData(){
if(this.curPage > 1){
this.curPage--;
this.$http.get(this.url.list+'?pageSize='+this.pageSize +'&pageNo='+this.curPage).then(res => {
const datas = res.data.result.records
this.curPots = []
datas.forEach(data => {
this.curPots.unshift(data)
})
this.curPots.forEach(data =>{
if(new Date(data.createTime) >= this.startDate && new Date(data.createTime) <= this.endDate) {
this.pots.push(data)
}
this.oldPots.push(data)
})
})
} else {
this.noMore = true
}
},
dateFormat(date) {
let year = date.getFullYear().toString().padStart(4, '0');
let month = (date.getMonth() + 1).toString().padStart(2, '0');
let day = date.getDate().toString().padStart(2, '0');
return `${year}-${month}-${day}`;
},
selectDate(startDate, endDate){
if(startDate && endDate){
this.pots = []
this.oldPots.forEach(pot => {
if(new Date(pot.createTime) >= startDate && new Date(pot.createTime) <= endDate){
this.pots.push(pot)
}
})
} else {
uni.showToast({
title: '起始时间和结束时间必须全部设置',
icon: "none",
duration: 2000
});
}
},
addPot(){
uni.navigateTo({
url: '/pages/wyrenju/wastes/potAdd'
});
},
potDetail(id, createTime, number){
uni.navigateTo({
url: '/pages/wyrenju/wastes/potEdit?id='+id+'&createTime=' + createTime + '&number=' + number
})
},
bindStartDateChange(e){
this.startDateStr = e.detail.value
this.startDate = new Date(this.startDateStr)
this.selectDate(this.startDate, this.endDate)
},
bindEndDateChange(e){
this.endDateStr = e.detail.value
this.endDate = new Date(this.endDateStr)
this.endDate.setDate(this.endDate.getDate()+1)
this.selectDate(this.startDate, this.endDate)
}
}
}
</script>
<style scoped>
.add-view {
display: flex;
height: 80px;
}
.recovery-view {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.picker-view {
display: flex;
}
.waste-view {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start !important;
}
.waste-text {
font-size: 14px !important;
}
.picker-text {
display: inline-block;
height: 20px;
line-height: 20px;
margin-top: 10px;
font-size: large;
color: #333;
}
.noMoreText {
display: block;
width: 200px;
height: 30px;
line-height: 30px;
margin: 0 auto;
font-size: x-small;
}
.more{
display: none;
}
</style>
新增农药罐回收情况功能
## potAdd.vue
<template>
<scroll-view class="cu-list menu margin-top">
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回
</block>
<block slot="content">添加农药罐回收情况
</block>
</cu-custom>
<view class="cu-item">
<view class="content">
<form>
<view class="cu-form-group">
<view class="title">录入时间
</view>
<input name="createTime" v-model="createTime" disabled></input>
</view>
<view class="cu-form-group">
<view class="title">回收斤数
</view>
<input name="number" placeholder="请输入农药罐回收斤数" v-model="pot.number"></input>
</view>
</form>
</view>
</view>
<view class="cu-form-group margin-top">
<button class='cu-btn bg-green shadow submit-btn' @click="potAddSubmit()">
提交
</button>
</view>
</scroll-view>
</template>
<script>
export default {
name: "potAdd",
data(){
return {
createTime: this.getTime(),
pot: {},
url: {
add: '/sys/recovery/add'
}
};
},
methods: {
getTime() {
const date = new Date();
let year = date.getFullYear().toString().padStart(4, '0');
let month = (date.getMonth() + 1).toString().padStart(2, '0');
let day = date.getDate().toString().padStart(2, '0');
let hour = date.getHours().toString().padStart(2, '0');
let minute = date.getMinutes().toString().padStart(2, '0');
let second = date.getSeconds().toString().padStart(2, '0');
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
},
potAddSubmit(){
this.pot.createTime = this.createTime
if (this.pot.number > 0){
this.$http.post(this.url.add, this.pot).then(res => {
console.log("添加res: ", res);
if(res.data.success){
uni.navigateTo({
url: '/pages/wyrenju/wastes/pot'
})
}else {
uni.showToast({
title: '添加失败',
icon: "none",
duration: 2000
})
}
})
} else if(this.pot.number == 0) {
uni.showToast({
title: '农药回收斤数为0，请重新填写',
icon: "none",
duration: 2000
})
} else {
uni.showToast({
title: '农药回收斤数为负，请重新填写',
icon: "none",
duration: 2000
})
}
}
}
}
</script>
<style scoped>
.submit-btn {
display: block;
margin: 0 auto;
width: 100px;
height: 35px;
line-height: 35px;
}
</style>
修改农药罐回收情况功能
## potEdit.vue
<template>
<scroll-view class="cu-list menu margin-top">
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回
</block>
<block slot="content">农药罐回收详情
</block>
</cu-custom>
<view class="cu-item">
<view class="content">
<form>
<view class="cu-form-group">
<view class="title">录入时间
</view>
<input id="createTime" name="createTime" v-model="createTime" disabled />
</view>
<view class="cu-form-group">
<view class="title">回收斤数
</view>
<input id="number" name="number" v-model="number" />
</view>
</form>
</view>
</view>
<view class="cu-form-group margin-top">
<button class='cu-btn bg-green shadow submit-btn' @click="potEditSubmit()">
修改
</button>
</view>
</scroll-view>
</template>
<script>
export default {
name: "potEdit",
data(){
return{
id: null,
createTime: null,
number: 0,
pot: {},
url: {
edit: '/sys/recovery/edit'
}
};
},
onLoad(option){
this.id = option.id
this.createTime = option.createTime
this.number = option.number
},
methods: {
potEditSubmit(){
this.pot.id = this.id
this.pot.createTime = this.createTime
this.pot.number = this.number?this.number:'0'
this.$http.put(this.url.edit, this.pot).then(res => {
console.log("修改res: ", res);
if(res.data.success){
uni.navigateTo({
url: '/pages/wyrenju/wastes/pot'
})
}else {
uni.showToast({
title: '修改失败',
icon: "none",
duration: 2000
})
}
})
}
}
}
</script>
<style scoped>
.submit-btn {
display: block;
margin: 0 auto;
width: 150px;
height: 35px;
line-height: 35px;
}
</style>
运行界面：
其中，图标样式为：
图标下载站点：阿里巴巴矢量图标库官网：https://www.iconfont.cn/
查询功能：
项目的不足之处和需要改进的地方：
车辆轨迹绘制功能还不完善，比如打开腾讯地图APP，轨迹绘制显示当前地名，点击地名显示三维信息，车辆轨迹应该实时更新，并进行语音播报。还有公交、自驾、步行等的路线查询和绘制还需要学习。 这次项目我负责的功能有点少，下次应该加快进度，更加熟练，直到能够独立完成和负责一个项目。
项目心得
这次项目是我做的第一个企业项目，经历了从无到有、从恐惧害怕到渐渐上手到最后完成的过程，前端框架使用Uni-app+ColorUI，很多技术点都是从零学起，比如CSS3伸缩布局、Javascript、Vue、微信小程序、BootStrap，Uni-app可以将Vue.js代码在WebStorm中直接运行为微信小程序，在微信开发者工具中调试，Uni-app和Vue.js的官网还需要看一遍，之前还接触过Element-UI组件库，已经把Element-UI组件库的官网看了一遍，后续还需要把jQuery、Ajax学一遍，前端做小型应用型项目就差不多了，至于node.js技术等等，以后有时间再说吧。前端学完，学习SpringBoot和ArcGIS知识。我需要将项目从零开始自己搭建一遍，从微信小程序到PC前端到后端整体完成，把一个项目全部拿下来，这需要用到的技术有：
领域技术
前端HTML5、CSS3、JavaScript、BootStrap、jQuery、Ajax、Webpack、Vue、React、Uni-app、Color-UI、微信小程序后端JeecgBoot、SpringBoot、Shiro、Swagger、Redis、Element-UI地图ArcGIS、腾讯地图、百度地图、高德地图、天地图
