traceability
/
agricultural-products-traceability-app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式

Browse Source
master
Tuzki 2 years ago
parent c859da7902
commit 0580027854
10 changed files with 856 additions and 782 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      components/htz-image-upload/htz-image-upload.vue
  2. 4
      config.js
  3. 1
      static/images/default-data.svg
  4. 756
      sunPages/addBlock/addBlock.vue
  5. 4
      sunPages/addNoteJobForm/addNoteJobForm.vue
  6. 64
      sunPages/commonSearch/commonSearch.vue
  7. 10
      sunPages/commonSearch/nzSearch.vue
  8. 740
      sunPages/editBlock/editBlock.vue
  9. 55
      sunPages/noteJobList/noteJobList.vue
  10. 2
      uni_modules/uv-pick-color/components/uv-pick-color/props.js

2
components/htz-image-upload/htz-image-upload.vue
Unescape View File

@ -32,7 +32,7 @@
</cover-view>
</video>
</view>
<view v-if="showTips" class="tip">请上传不超过5MB格式为png/jpg/jpeg的图片</view>
<view v-if="showTips" class="tip">请上传不超过5MB的图片</view>
<!-- -->
</view>

4
config.js
Unescape View File

@ -1,8 +1,8 @@
// 应用全局配置
module.exports = {
baseUrl: 'https://sy.hbcjy.com/prod-api',
// baseUrl: 'https://sy.hbcjy.com/prod-api',
h5Url:'https://sy.hbcjy.com',
// baseUrl: 'http://127.0.0.1:48080',
baseUrl: 'http://127.0.0.1:48080',
// baseUrl: 'http://192.168.130.193:48080',
baseApi: '/admin-api',
// 应用信息

1
static/images/default-data.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

756
sunPages/addBlock/addBlock.vue
Unescape View File

@ -1,34 +1,50 @@
<template>
<view class="content">
<view class="map-view">
<map id="map" v-if="formData.positionStr && formData.positionStr != ''" class="m-map" :longitude="longitude"
:latitude="latitude" :polygons="polygons" enable-satellite="true"></map>
<map
id="map"
v-if="formData.positionStr && formData.positionStr != ''"
class="m-map"
:longitude="longitude"
:latitude="latitude"
:polygons="polygons"
enable-satellite="true"
></map>
<view class="no-map" v-else>
<uv-empty icon="https://cdn.uviewui.com/uview/demo/empty/history.png"></uv-empty>
<image style="margin: 80rpx auto 20rpx; height: 330rpx;" src="https://sy.hbcjy.com/prod-api/admin-api/infra/file/23/get/08bb1813a2093a06c57e2733fc46034b30e4f98dac67d7106c5bf7db1d84d5a0.png" mode=""></image>
</view>
<view class="map-btn-group">
<button v-if="formData.positionStr && formData.positionStr != ''" @click="reset">清除地块</button>
<button v-else @click="drawMap(formData)">绘制地块</button>
<view v-if="formData.positionStr && formData.positionStr != ''" @click="clearMap">
<image src="@/static/images/icon_enclosure.svg"></image>
<view class="text">清除</view>
</view>
<view v-else @click="drawMap(formData)">
<image src="@/static/images/icon_enclosure.svg"></image>
<view class="text">绘制</view>
</view>
</view>
</view>
<view class="v-form v-container">
<view class="form-box">
<uni-forms label-width="80px" ref="valiForm" :rules="rules" :modelValue="formData">
<view class="v-form-item">
<view class="not-show">
<uni-forms-item label="" required name="baseId">
<uni-easyinput v-model="formData.baseId" placeholder=""></uni-easyinput>
</uni-forms-item>
<uni-forms-item label="地块坐标" name="positionStr">
<view class="not-show">
<uni-forms-item label="" required name="baseId">
<uni-easyinput v-model="formData.baseId" placeholder=""></uni-easyinput>
</uni-forms-item>
<uni-forms-item label="" name="positionStr">
<uni-easyinput disabled v-model="formData.positionStr" placeholder="地块坐标"></uni-easyinput>
</uni-forms-item>
</view>
</view>
<uni-forms-item label="地块名称" required name="blockName">
<uni-easyinput v-model="formData.blockName" placeholder="请输入地块名称"></uni-easyinput>
</uni-forms-item>
<uni-forms-item label="标识颜色" name="blockColor">
<view class="color" :style="{
<view
class="color"
:style="{
background: formData.blockColor
}" @click="openColor"></view>
}"
@click="openColor"
></view>
</uni-forms-item>
<uni-forms-item label="地块类型" required name="blockType">
<uni-data-select v-model="formData.blockType" :localdata="range"></uni-data-select>
@ -40,11 +56,8 @@
</template>
</uni-easyinput>
</uni-forms-item>
</view>
</uni-forms>
<view class="fixed fixedBottom v-container"><button class="v-primary-btn large" @click="submit('valiForm')">提交</button></view>
<button class="v-primary-btn large" type="primary" @click="submit('valiForm')">提交</button>
</view>
<uv-pick-color ref="pickerColor" @confirm="confirm"></uv-pick-color>
@ -52,387 +65,398 @@
</template>
<script>
import {
getDictDatas,
DICT_TYPE
} from '@/utils/dict';
import {
createBlock
} from '@/api/system/block/block.js';
// 引入SDK核心类
var QQMapWX = require('@/plugins/qqmap-wx-jssdk.min.js');
var qqmapsdk;
var self;
export default {
data() {
return {
data: [],
IsOption: false,
polygons: [],
longitude: null,
latitude: null,
range: [],
formData: {
blockName: undefined,
blockColor: undefined,
blockType: undefined,
blockArea: undefined,
positionStr: undefined,
baseId: this.$store.state.user.baseId
},
rules: {
blockName: {
rules: [{
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
import { createBlock } from '@/api/system/block/block.js';
// 引入SDK核心类
var QQMapWX = require('@/plugins/qqmap-wx-jssdk.min.js');
var qqmapsdk;
var self;
export default {
data() {
return {
data: [],
IsOption: false,
polygons: [],
longitude: null,
latitude: null,
range: [],
formData: {
blockName: undefined,
blockColor: undefined,
blockType: undefined,
blockArea: undefined,
positionStr: undefined,
baseId: this.$store.state.user.baseId
},
rules: {
blockName: {
rules: [
{
required: true,
errorMessage: '地块名不能为空'
}]
},
blockArea: {
rules: [{
}
]
},
blockArea: {
rules: [
{
required: true,
errorMessage: '面积名不能为空'
}]
},
blockType: {
rules: [{
}
]
},
blockType: {
rules: [
{
required: true,
errorMessage: '地块类型不能为空'
}]
}
// positionStr: {
// rules: [
// {
// required: true,
// errorMessage: '请先绘制地块'
// }
// ]
// }
}
]
}
};
},
onShow() {
let arr = this.getDictDatas(DICT_TYPE.LAND_TYPE);
arr.forEach((item) => {
item.text = item.label;
});
this.range = arr;
},
onLoad(options) {
if (options.val) {
console.log(JSON.parse(decodeURIComponent(options.val)));
const obj = JSON.parse(decodeURIComponent(options.val));
this.formData.blockArea = obj.blockArea;
this.formData.positionStr = obj.positionStr;
this.initmapPolygon();
// positionStr: {
// rules: [
// {
// required: true,
// errorMessage: '请先绘制地块'
// }
// ]
// }
}
if (options.data) {
const obj = JSON.parse(decodeURIComponent(options.data));
this.formData = obj;
this.initmapPolygon();
console.log(this.formData);
};
},
onShow() {
let arr = this.getDictDatas(DICT_TYPE.LAND_TYPE);
arr.forEach((item) => {
item.text = item.label;
});
this.range = arr;
},
onLoad(options) {
if (options.val) {
console.log(JSON.parse(decodeURIComponent(options.val)));
const obj = JSON.parse(decodeURIComponent(options.val));
this.formData.blockArea = obj.blockArea;
this.formData.positionStr = obj.positionStr;
this.initmapPolygon();
}
if (options.data) {
const obj = JSON.parse(decodeURIComponent(options.data));
this.formData = obj;
this.initmapPolygon();
console.log(this.formData);
}
self = this;
// self.getAuthorizeInfo();
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'PEFBZ-ELL64-MVDUZ-KDV4N-RISMO-VCB7A'
});
},
methods: {
openColor() {
this.$refs.pickerColor.open();
},
confirm(e) {
this.formData.blockColor = e.hex;
if (this.polygons.length > 0) {
this.polygons[0].strokeColor = e.hex;
this.polygons[0].fillColor = e.hex + '5c';
}
self = this;
// self.getAuthorizeInfo();
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'PEFBZ-ELL64-MVDUZ-KDV4N-RISMO-VCB7A'
});
},
onUnload() {
toLocation: function (obj) {
self.mapCtx.moveToLocation(obj);
self.mapCtx.translateMarker({
markerId: 1,
autoRotate: true,
duration: 100,
destination: {
latitude: obj.latitude,
longitude: obj.longitude
},
animationEnd() {
console.log('animation end');
}
});
},
methods: {
openColor() {
this.$refs.pickerColor.open();
},
confirm(e) {
this.formData.blockColor = e.hex;
if (this.polygons.length > 0) {
this.polygons[0].strokeColor = e.hex;
this.polygons[0].fillColor = e.hex + '5c';
// 位置授权
getAuthorizeInfo() {
uni.authorize({
scope: 'scope.userLocation',
success() {
// 允许授权
self.getLocationInfo();
},
fail() {
// 拒绝授权
self.openConfirm();
console.log('你拒绝了授权，无法获得周边信息');
}
},
toLocation: function(obj) {
self.mapCtx.moveToLocation(obj);
self.mapCtx.translateMarker({
markerId: 1,
autoRotate: true,
duration: 100,
destination: {
latitude: obj.latitude,
longitude: obj.longitude
},
animationEnd() {
console.log('animation end');
}
});
},
// 位置授权
getAuthorizeInfo() {
uni.authorize({
scope: 'scope.userLocation',
success() {
// 允许授权
self.getLocationInfo();
},
fail() {
// 拒绝授权
self.openConfirm();
console.log('你拒绝了授权，无法获得周边信息');
}
});
},
// 获取地理位置
getLocationInfo() {
uni.getLocation({
type: 'wgs84',
success(res) {
console.log(res, '当前位置');
self.toLocation(res);
self.latitude = res.latitude;
self.longitude = res.longitude;
// uni.openLocation({
// latitude: latitude,
// longitude: longitude,
// success: function () {
// console.log('success');
// }
// })
}
});
},
});
},
// 获取地理位置
getLocationInfo() {
uni.getLocation({
type: 'wgs84',
success(res) {
console.log(res, '当前位置');
self.toLocation(res);
self.latitude = res.latitude;
self.longitude = res.longitude;
// uni.openLocation({
// latitude: latitude,
// longitude: longitude,
// success: function () {
// console.log('success');
// }
// })
}
});
},
// 再次获取授权
// 当用户第一次拒绝后再次请求授权
openConfirm() {
uni.showModal({
title: '请求授权当前位置',
content: '需要获取您的地理位置，请确认授权',
success: (res) => {
if (res.confirm) {
uni.openSetting(); // 打开地图权限设置
} else if (res.cancel) {
uni.showToast({
title: '你拒绝了授权，无法获得周边信息',
icon: 'none',
duration: 1000
});
}
// 再次获取授权
// 当用户第一次拒绝后再次请求授权
openConfirm() {
uni.showModal({
title: '请求授权当前位置',
content: '需要获取您的地理位置，请确认授权',
success: (res) => {
if (res.confirm) {
uni.openSetting(); // 打开地图权限设置
} else if (res.cancel) {
uni.showToast({
title: '你拒绝了授权，无法获得周边信息',
icon: 'none',
duration: 1000
});
}
});
},
}
});
},
poitap: function(e) {
console.log(e, 'poitap');
var obj = e.detail;
self.searchKey = obj.name;
// this.$api.msg(e)
self.toLocation(obj);
},
// 取消删除
Cancel: function() {},
poitap: function (e) {
console.log(e, 'poitap');
var obj = e.detail;
self.searchKey = obj.name;
// this.$api.msg(e)
self.toLocation(obj);
},
// 取消删除
Cancel: function () {},
submit(ref) {
let this_ = this
if (this.formData.positionStr == undefined || this.formData.positionStr == '') {
uni.showToast({
title: `请先绘制地块`,
icon: 'error'
});
return false;
}
this.$refs[ref]
.validate()
.then((res) => {
console.log('success', res);
createBlock(res)
.then((res) => {
uni.showToast({
title: `创建成功`,
duration: 1500,
success() {
setTimeout(() => {
this_.reset();
uni.reLaunch({
url: '/pages/block/index'
});
}, 1500)
}
});
})
.catch((err) => {
console.log(err);
});
})
.catch((err) => {
console.log('err', err);
});
},
drawMap(val) {
console.log(val)
const str = encodeURIComponent(JSON.stringify(val))
uni.redirectTo({
url: '/sunPages/drawMap/drawMap?str=' + str
submit(ref) {
let this_ = this
if (this.formData.positionStr == undefined || this.formData.positionStr == '') {
uni.showToast({
title: `请先绘制地块`,
icon: 'error'
});
},
reset() {
this.formData = {
blockName: null,
blockColor: null,
blockType: null,
blockArea: null,
positionStr: null,
baseId: this.$store.state.user.baseId
};
this.polygons = [];
},
initmapPolygon() {
let this_ = this;
const mapCon = uni.createMapContext('map');
const arr = JSON.parse(this.formData.positionStr);
const center = this_.calculateCenter(arr);
let Arr = arr.map((item) => {
const obj = {
latitude: item[1],
longitude: item[0]
};
return obj;
return false;
}
this.$refs[ref]
.validate()
.then((res) => {
console.log('success', res);
createBlock(res)
.then((res) => {
uni.showToast({
title: `创建成功`,
duration: 1500,
success() {
setTimeout(()=>{
this_.reset();
uni.reLaunch({
url: '/pages/block/index'
});
},1500)
}
});
})
.catch((err) => {
console.log(err);
});
})
.catch((err) => {
console.log('err', err);
});
console.log(Arr);
let Obj = {
points: Arr,
strokeColor: this_.formData.blockColor && this_.formData.blockColor != null ? this_.formData
.blockColor : '#007969',
fillColor: this_.formData.blockColor && this_.formData.blockColor != null ? this_.formData
.blockColor + '5c' : '#0079695c',
zIndex: 1
},
drawMap(val) {
const str = encodeURIComponent(JSON.stringify(val))
uni.redirectTo({
url: '/sunPages/drawMap/drawMap?str=' + str
});
},
reset() {
this.formData = {
blockName: null,
blockColor: null,
blockType: null,
blockArea: null,
positionStr: null,
baseId: this.$store.state.user.baseId
};
this.polygons = [];
},
clearMap(){
this.polygons = [];
this.formData.positionStr= null
this.formData.blockArea= null
},
initmapPolygon() {
let this_ = this;
const mapCon = uni.createMapContext('map');
const arr = JSON.parse(this.formData.positionStr);
const center = this_.calculateCenter(arr);
let Arr = arr.map((item) => {
const obj = {
latitude: item[1],
longitude: item[0]
};
this_.$nextTick(() => {
this_.polygons.push(Obj);
mapCon.includePoints({
padding: [20, 20, 20, 20],
points: Arr
});
this_.longitude = center[0];
this_.latitude = center[1];
});
},
//计算中心点
calculateCenter(coordinates) {
let sumLat = 0;
let sumLng = 0;
coordinates.forEach((coord) => {
sumLat += coord[0];
sumLng += coord[1];
return obj;
});
console.log(Arr);
let Obj = {
points: Arr,
strokeColor: this_.formData.blockColor && this_.formData.blockColor != null ? this_.formData.blockColor : '#007969',
fillColor: this_.formData.blockColor && this_.formData.blockColor != null ? this_.formData.blockColor + '5c' : '#0079695c',
zIndex: 1
};
this_.$nextTick(() => {
this_.polygons.push(Obj);
mapCon.includePoints({
padding: [20, 20, 20, 20],
points: Arr
});
const count = coordinates.length;
const centerLat = sumLat / count;
const centerLng = sumLng / count;
return [centerLat, centerLng];
}
this_.longitude = center[0];
this_.latitude = center[1];
});
},
//计算中心点
calculateCenter(coordinates) {
let sumLat = 0;
let sumLng = 0;
coordinates.forEach((coord) => {
sumLat += coord[0];
sumLng += coord[1];
});
const count = coordinates.length;
const centerLat = sumLat / count;
const centerLng = sumLng / count;
return [centerLat, centerLng];
}
};
}
};
</script>
<style scoped lang="scss">
.not-show {
display: none;
}
.content {
background-color: #f5f5f5;
overflow: hidden;
min-height: 100vh;
color: #646464;
font-size: 40rpx;
}
.not-show {
display: none;
}
.content {
background-color: #f1f1f1;
overflow: hidden;
min-height: 100vh;
color: #646464;
font-size: 40rpx;
}
.option {
max-height: 300rpx;
width: 90%;
line-height: 60rpx;
position: fixed;
top: 110rpx;
z-index: 99999;
border-radius: 150rpx;
overflow: scroll;
left: 50%;
transform: translateX(-50%);
}
.column_item {
padding: 0 40rpx;
height: 60rpx;
font-size: 28rpx;
width: 100%;
overflow: hidden;
margin: 0rpx auto;
background-color: #00000080;
text-overflow: ellipsis;
color: #fff;
white-space: nowrap;
}
.column_item:active {
background-color: #8f8f94;
}
.option {
max-height: 300rpx;
width: 90%;
line-height: 60rpx;
position: fixed;
top: 110rpx;
z-index: 99999;
border-radius: 150rpx;
overflow: scroll;
left: 50%;
transform: translateX(-50%);
}
.column_item {
padding: 0 40rpx;
height: 60rpx;
font-size: 28rpx;
width: 100%;
overflow: hidden;
margin: 0rpx auto;
background-color: #00000080;
text-overflow: ellipsis;
color: #fff;
white-space: nowrap;
}
.column_item:active {
background-color: #8f8f94;
}
.page-section-gap {
width: 100%;
position: fixed;
top: 0;
z-index: 0;
}
.color {
width: 50rpx;
height: 50rpx;
border-radius: 6rpx;
border: solid 1rpx #d0d0d0;
background-color: transparent;
}
.input-slot-right {
background-color: #eee;
padding: 10rpx;
}
.map-view {
width: 100%;
height: 500rpx;
overflow: hidden;
position: relative;
margin-bottom: 30rpx;
.page-section-gap {
.m-map {
width: 100%;
position: fixed;
top: 0;
z-index: 0;
height: 110%;
}
.color {
width: 50rpx;
height: 50rpx;
border-radius: 6rpx;
border: solid 1rpx #d0d0d0;
background-color: transparent;
}
.input-slot-right {
background-color: #eee;
padding: 10rpx;
}
.map-view {
width: 100%;
height: 500rpx;
overflow: hidden;
position: relative;
margin-bottom: 30rpx;
.m-map {
width: 100%;
height: 110%;
.map-btn-group {
position: absolute;
background-color: #fff;
padding: 14rpx 30rpx;
text-align: center;
border-radius: 16rpx;
z-index: 9;
bottom: 20rpx;
right: 30rpx;
box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.05);
image {
width: 52rpx;
height: 52rpx;
}
.map-btn-group {
position: absolute;
z-index: 9;
bottom: 20rpx;
left: 50%;
transform: translateX(-50%);
.text {
margin-top: -4px;
color: #14c171;
font-size: 28rpx;
text-align: center;
}
}
}
.form-box {
padding: 40rpx 20rpx;
margin: 0 20rpx;
background: #fff;
box-shadow: 0 0 10px 1px #dadada;
border-radius: 15rpx;
.form-box {
padding: 40rpx 20rpx;
margin: 0 20rpx;
background: #fff;
box-shadow: 0 0 10px 1px #dadada;
border-radius: 15rpx;
/deep/ .uni-forms-item {
align-items: center;
&:last-child {
display: none;
}
}
/deep/ .uni-forms-item {
align-items: center;
}
}
.no-map{
width: 100%;
height: fit-content;
display: flex;
align-items: center;
}
</style>

4
sunPages/addNoteJobForm/addNoteJobForm.vue
Unescape View File

@ -85,10 +85,10 @@
<htz-image-upload
v-model="imgList"
:action="baseUrls"
:chooseNum="1"
:chooseNum="5"
:compress="false"
:headers="headers"
:max="1"
:max="5"
:quality="80"
:remove="true"
:sourceType="['album', 'camera']"

64
sunPages/commonSearch/commonSearch.vue
Unescape View File

@ -19,41 +19,53 @@
</view>
</template>
<template v-if="!showCrop && !showBlock" class="m-sdata-list" slot="searchData">
<view class="m-sdata-box" v-for="item in searchData" @click="check(item)">
<view class="m-variety-name">
<image style="width: 100%; height: 100%; background-color: #d4d4d4" mode="aspectFit" :src="item.productPic" @error="imageError"></image>
</view>
<view class="m-variety-item-box">
<view class="m-variety-item-name">
{{ item.productName }}
<span class="m-jiao">{{ item.varietyName }}</span>
<view v-if="searchData.length > 0">
<view class="m-sdata-box" v-for="item in searchData" @click="check(item)">
<view class="m-variety-name">
<image style="width: 100%; height: 100%; background-color: #d4d4d4" mode="aspectFit" :src="item.productPic" @error="imageError"></image>
</view>
<view class="speciesName-box">
<view class="m-variety-item-species" v-for="items in item.speciesName">
{{ items }}
<view class="m-variety-item-box">
<view class="m-variety-item-name">
{{ item.productName }}
<span class="m-jiao">{{ item.varietyName }}</span>
</view>
<view class="speciesName-box">
<view class="m-variety-item-species" v-for="items in item.speciesName">
{{ items }}
</view>
</view>
</view>
</view>
</view>
<view class="no-data" v-else>
<image src="@/static/images/default-data.svg" mode=""></image>
暂无数据
</view>
</template>
<template v-if="showBlock" class="m-sdata-list v-pages-list" slot="searchData">
<view class="v-pages-list-item" v-for="item in searchData" @click="check(item, 1)">
<view class="v-card">
<view class="v-card-content">
<view class="v-card-top row">
<view class="v-card-info">
<view class="v-card-title row">
{{ item.blockName }}
</view>
<view class="v-card-state m-t-mini">
<dict-tag :type="'land_type'" :value="item.blockType" class="state primary" />
<view v-if="searchData.length > 0">
<view class="v-pages-list-item" v-for="item in searchData" @click="check(item, 1)">
<view class="v-card">
<view class="v-card-content">
<view class="v-card-top row">
<view class="v-card-info">
<view class="v-card-title row">
{{ item.blockName }}
</view>
<view class="v-card-state m-t-mini">
<dict-tag :type="'land_type'" :value="item.blockType" class="state primary" />
</view>
<view class="v-card-code">当前未种植</view>
</view>
<view class="v-card-code">当前未种植</view>
</view>
</view>
</view>
</view>
</view>
<view class="no-data" v-else>
<image src="@/static/images/default-data.svg" mode=""></image>
暂无数据
</view>
</template>
</d-search-log>
</view>
@ -309,7 +321,7 @@ export default {
color: #666;
padding-left: 15rpx;
position: relative;
&:before{
&:before {
content: ' ';
width: 4rpx;
height: 60%;
@ -354,4 +366,10 @@ export default {
box-shadow: 0 0 9px 0px gainsboro;
border-radius: 15rpx;
}
.no-data{
display: flex;
flex-direction: column;
align-items: center;
color: #666;
}
</style>

10
sunPages/commonSearch/nzSearch.vue
Unescape View File

@ -24,6 +24,10 @@
</uni-transition>
</view>
</view>
<view class="no-data" v-else>
<image src="@/static/images/default-data.svg" mode=""></image>
暂无数据
</view>
<button class="m-next-step" @click="nextStep">保存</button>
</view>
</template>
@ -344,4 +348,10 @@ export default {
bottom: 55rpx;
z-index: 97;
}
.no-data{
display: flex;
flex-direction: column;
align-items: center;
color: #666;
}
</style>

740
sunPages/editBlock/editBlock.vue
Unescape View File

@ -1,8 +1,15 @@
<template>
<view class="content">
<view class="map-view">
<map id="map" v-if="formData.positionStr && formData.positionStr != ''" class="m-map" :longitude="longitude"
:latitude="latitude" :polygons="polygons" enable-satellite="true"></map>
<map
id="map"
v-if="formData.positionStr && formData.positionStr != ''"
class="m-map"
:longitude="longitude"
:latitude="latitude"
:polygons="polygons"
enable-satellite="true"
></map>
<view class="no-map" v-else>
<uv-empty icon="https://cdn.uviewui.com/uview/demo/empty/history.png"></uv-empty>
</view>
@ -27,14 +34,21 @@
<uni-forms-item class="not-show" label="" required name="id">
<uni-easyinput v-model="formData.id" placeholder=""></uni-easyinput>
</uni-forms-item>
<uni-forms-item label="地块坐标" name="positionStr">
<uni-easyinput disabled v-model="formData.positionStr" placeholder="地块坐标"></uni-easyinput>
</uni-forms-item>
</view>
<uni-forms-item label="地块名称" required name="blockName">
<uni-easyinput v-model="formData.blockName" placeholder="请输入地块名称"></uni-easyinput>
</uni-forms-item>
<uni-forms-item label="标识颜色" name="blockColor">
<view class="color" :style="{
<view
class="color"
:style="{
background: formData.blockColor
}" @click="openColor"></view>
}"
@click="openColor"
></view>
</uni-forms-item>
<uni-forms-item label="地块类型" required name="blockType">
<uni-data-select v-model="formData.blockType" :localdata="range"></uni-data-select>
@ -46,9 +60,6 @@
</template>
</uni-easyinput>
</uni-forms-item>
<uni-forms-item label="地块坐标" name="positionStr">
<uni-easyinput disabled v-model="formData.positionStr" placeholder="地块坐标"></uni-easyinput>
</uni-forms-item>
</uni-forms>
<button class="v-primary-btn large" @click="submit('valiForm')">提交</button>
</view>
@ -58,410 +69,397 @@
</template>
<script>
import {
getDictDatas,
DICT_TYPE
} from '@/utils/dict';
import {
updateBlock
} from '@/api/system/block/block.js';
// 引入SDK核心类
var QQMapWX = require('@/plugins/qqmap-wx-jssdk.min.js');
var qqmapsdk;
var self;
export default {
data() {
return {
data: [],
IsOption: false,
polygons: [],
longitude: null,
latitude: null,
range: [],
realName: undefined,
formData: {
id: undefined,
blockName: undefined,
blockColor: undefined,
blockType: undefined,
blockArea: undefined,
positionStr: undefined,
baseId: this.$store.state.user.baseId
},
rules: {
blockName: {
rules: [{
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
import { updateBlock } from '@/api/system/block/block.js';
// 引入SDK核心类
var QQMapWX = require('@/plugins/qqmap-wx-jssdk.min.js');
var qqmapsdk;
var self;
export default {
data() {
return {
data: [],
IsOption: false,
polygons: [],
longitude: null,
latitude: null,
range: [],
realName: undefined,
formData: {
id: undefined,
blockName: undefined,
blockColor: undefined,
blockType: undefined,
blockArea: undefined,
positionStr: undefined,
baseId: this.$store.state.user.baseId
},
rules: {
blockName: {
rules: [
{
required: true,
errorMessage: '地块名不能为空'
}]
},
blockArea: {
rules: [{
}
]
},
blockArea: {
rules: [
{
required: true,
errorMessage: '面积名不能为空'
}]
},
blockType: {
rules: [{
}
]
},
blockType: {
rules: [
{
required: true,
errorMessage: '地块类型不能为空'
}]
}
// positionStr: {
// rules: [
// {
// required: true,
// errorMessage: '请先绘制地块'
// }
// ]
// }
}
]
}
};
},
onShow() {
let arr = this.getDictDatas(DICT_TYPE.LAND_TYPE);
arr.forEach((item) => {
item.text = item.label;
});
this.range = arr;
},
onLoad(options) {
if (options.val) {
const obj = JSON.parse(decodeURIComponent(options.val));
console.log(obj);
this.formData = obj;
this.formData.baseId = this.$store.state.user.baseId
this.initmapPolygon();
// positionStr: {
// rules: [
// {
// required: true,
// errorMessage: '请先绘制地块'
// }
// ]
// }
}
if (options.data) {
const obj = JSON.parse(options.data);
this.formData = obj;
this.initmapPolygon();
console.log(this.formData);
};
},
onShow() {
let arr = this.getDictDatas(DICT_TYPE.LAND_TYPE);
arr.forEach((item) => {
item.text = item.label;
});
this.range = arr;
},
onLoad(options) {
if (options.val) {
const obj = JSON.parse(decodeURIComponent(options.val));
console.log(obj);
this.formData = obj;
this.formData.baseId = this.$store.state.user.baseId;
this.initmapPolygon();
}
if (options.data) {
const obj = JSON.parse(options.data);
this.formData = obj;
this.initmapPolygon();
console.log(this.formData);
}
// self = this;
// self.getAuthorizeInfo();
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'PEFBZ-ELL64-MVDUZ-KDV4N-RISMO-VCB7A'
});
},
onUnload() {},
methods: {
openColor() {
this.$refs.pickerColor.open();
},
confirm(e) {
this.formData.blockColor = e.hex;
if (this.polygons.length > 0) {
this.polygons[0].strokeColor = e.hex;
this.polygons[0].fillColor = e.hex + '5c';
}
// self = this;
// self.getAuthorizeInfo();
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'PEFBZ-ELL64-MVDUZ-KDV4N-RISMO-VCB7A'
});
},
onUnload() {
toLocation: function (obj) {
self.mapCtx.moveToLocation(obj);
self.mapCtx.translateMarker({
markerId: 1,
autoRotate: true,
duration: 100,
destination: {
latitude: obj.latitude,
longitude: obj.longitude
},
animationEnd() {
console.log('animation end');
}
});
},
methods: {
openColor() {
this.$refs.pickerColor.open();
},
confirm(e) {
this.formData.blockColor = e.hex;
if (this.polygons.length > 0) {
this.polygons[0].strokeColor = e.hex;
this.polygons[0].fillColor = e.hex + '5c';
// 位置授权
getAuthorizeInfo() {
uni.authorize({
scope: 'scope.userLocation',
success() {
// 允许授权
self.getLocationInfo();
},
fail() {
// 拒绝授权
self.openConfirm();
console.log('你拒绝了授权，无法获得周边信息');
}
},
toLocation: function(obj) {
self.mapCtx.moveToLocation(obj);
self.mapCtx.translateMarker({
markerId: 1,
autoRotate: true,
duration: 100,
destination: {
latitude: obj.latitude,
longitude: obj.longitude
},
animationEnd() {
console.log('animation end');
}
});
},
// 位置授权
getAuthorizeInfo() {
uni.authorize({
scope: 'scope.userLocation',
success() {
// 允许授权
self.getLocationInfo();
},
fail() {
// 拒绝授权
self.openConfirm();
console.log('你拒绝了授权，无法获得周边信息');
}
});
},
// 获取地理位置
getLocationInfo() {
uni.getLocation({
type: 'wgs84',
success(res) {
console.log(res, '当前位置');
self.toLocation(res);
self.latitude = res.latitude;
self.longitude = res.longitude;
// uni.openLocation({
// latitude: latitude,
// longitude: longitude,
// success: function () {
// console.log('success');
// }
// })
}
});
},
});
},
// 获取地理位置
getLocationInfo() {
uni.getLocation({
type: 'wgs84',
success(res) {
console.log(res, '当前位置');
self.toLocation(res);
self.latitude = res.latitude;
self.longitude = res.longitude;
// uni.openLocation({
// latitude: latitude,
// longitude: longitude,
// success: function () {
// console.log('success');
// }
// })
}
});
},
// 再次获取授权
// 当用户第一次拒绝后再次请求授权
openConfirm() {
uni.showModal({
title: '请求授权当前位置',
content: '需要获取您的地理位置，请确认授权',
success: (res) => {
if (res.confirm) {
uni.openSetting(); // 打开地图权限设置
} else if (res.cancel) {
uni.showToast({
title: '你拒绝了授权，无法获得周边信息',
icon: 'none',
duration: 1000
});
}
// 再次获取授权
// 当用户第一次拒绝后再次请求授权
openConfirm() {
uni.showModal({
title: '请求授权当前位置',
content: '需要获取您的地理位置，请确认授权',
success: (res) => {
if (res.confirm) {
uni.openSetting(); // 打开地图权限设置
} else if (res.cancel) {
uni.showToast({
title: '你拒绝了授权，无法获得周边信息',
icon: 'none',
duration: 1000
});
}
});
},
}
});
},
poitap: function(e) {
console.log(e, 'poitap');
var obj = e.detail;
self.searchKey = obj.name;
// this.$api.msg(e)
self.toLocation(obj);
},
// 取消删除
Cancel: function() {},
poitap: function (e) {
console.log(e, 'poitap');
var obj = e.detail;
self.searchKey = obj.name;
// this.$api.msg(e)
self.toLocation(obj);
},
// 取消删除
Cancel: function () {},
submit(ref) {
let this_ = this;
if (this.formData.positionStr == undefined || this.formData.positionStr == '') {
uni.showToast({
title: `请先绘制地块`,
icon: 'error'
});
return false;
}
this.$refs[ref]
.validate()
.then((res) => {
console.log('success', res);
updateBlock(res)
.then((res) => {
uni.showToast({
title: `修改成功`,
duration: 1500,
success() {
setTimeout(() => {
this_.reset();
uni.reLaunch({
url: '/pages/block/index'
});
}, 1500);
}
});
})
.catch((err) => {
console.log(err);
});
})
.catch((err) => {
console.log('err', err);
});
},
drawMap(val) {
const str = encodeURIComponent(JSON.stringify(val))
uni.redirectTo({
url: '/sunPages/drawMap/drawMap?str=' + str
submit(ref) {
let this_ = this;
if (this.formData.positionStr == undefined || this.formData.positionStr == '') {
uni.showToast({
title: `请先绘制地块`,
icon: 'error'
});
},
reset() {
this.formData = {
id: undefined,
blockName: undefined,
blockColor: undefined,
blockType: undefined,
blockArea: undefined,
positionStr: undefined,
baseId: this.$store.state.user.baseId
};
this.polygons = [];
},
resetBlock() {
this.polygons = [];
this.formData.positionStr = undefined;
},
initmapPolygon() {
let this_ = this;
const mapCon = uni.createMapContext('map');
const arr = JSON.parse(this.formData.positionStr);
const center = this_.calculateCenter(arr);
let Arr = arr.map((item) => {
const obj = {
latitude: item[1],
longitude: item[0]
};
return obj;
return false;
}
this.$refs[ref]
.validate()
.then((res) => {
console.log('success', res);
updateBlock(res)
.then((res) => {
uni.showToast({
title: `修改成功`,
duration: 1500,
success() {
setTimeout(() => {
this_.reset();
uni.reLaunch({
url: '/pages/block/index'
});
}, 1500);
}
});
})
.catch((err) => {
console.log(err);
});
})
.catch((err) => {
console.log('err', err);
});
console.log(Arr);
let Obj = {
points: Arr,
strokeColor: this_.formData.blockColor && this_.formData.blockColor != null ? this_.formData
.blockColor : '#007969',
fillColor: this_.formData.blockColor && this_.formData.blockColor != null ? this_.formData
.blockColor + '5c' : '#0079695c',
zIndex: 1
},
drawMap(val) {
const str = encodeURIComponent(JSON.stringify(val));
uni.redirectTo({
url: '/sunPages/drawMap/drawMap?str=' + str
});
},
reset() {
this.formData = {
id: undefined,
blockName: undefined,
blockColor: undefined,
blockType: undefined,
blockArea: undefined,
positionStr: undefined,
baseId: this.$store.state.user.baseId
};
this.polygons = [];
},
resetBlock() {
this.polygons = [];
this.formData.positionStr = undefined;
},
initmapPolygon() {
let this_ = this;
const mapCon = uni.createMapContext('map');
const arr = JSON.parse(this.formData.positionStr);
const center = this_.calculateCenter(arr);
let Arr = arr.map((item) => {
const obj = {
latitude: item[1],
longitude: item[0]
};
this_.$nextTick(() => {
this_.polygons.push(Obj);
mapCon.includePoints({
padding: [30, 30, 30, 30],
points: Arr
});
this_.longitude = center[0];
this_.latitude = center[1];
});
},
//计算中心点
calculateCenter(coordinates) {
let sumLat = 0;
let sumLng = 0;
coordinates.forEach((coord) => {
sumLat += coord[0];
sumLng += coord[1];
return obj;
});
console.log(Arr);
let Obj = {
points: Arr,
strokeColor: this_.formData.blockColor && this_.formData.blockColor != null ? this_.formData.blockColor : '#007969',
fillColor: this_.formData.blockColor && this_.formData.blockColor != null ? this_.formData.blockColor + '5c' : '#0079695c',
zIndex: 1
};
this_.$nextTick(() => {
this_.polygons.push(Obj);
mapCon.includePoints({
padding: [30, 30, 30, 30],
points: Arr
});
const count = coordinates.length;
const centerLat = sumLat / count;
const centerLng = sumLng / count;
return [centerLat, centerLng];
}
this_.longitude = center[0];
this_.latitude = center[1];
});
},
//计算中心点
calculateCenter(coordinates) {
let sumLat = 0;
let sumLng = 0;
coordinates.forEach((coord) => {
sumLat += coord[0];
sumLng += coord[1];
});
const count = coordinates.length;
const centerLat = sumLat / count;
const centerLng = sumLng / count;
return [centerLat, centerLng];
}
};
}
};
</script>
<style scoped lang="scss">
.content {
background-color: #f5f5f5;
overflow: hidden;
min-height: 100vh;
color: #646464;
font-size: 40rpx;
}
.content {
background-color: #f5f5f5;
overflow: hidden;
min-height: 100vh;
color: #646464;
font-size: 40rpx;
}
.option {
max-height: 300rpx;
width: 90%;
line-height: 60rpx;
position: fixed;
top: 110rpx;
z-index: 99999;
border-radius: 150rpx;
overflow: scroll;
left: 50%;
transform: translateX(-50%);
}
.option {
max-height: 300rpx;
width: 90%;
line-height: 60rpx;
position: fixed;
top: 110rpx;
z-index: 99999;
border-radius: 150rpx;
overflow: scroll;
left: 50%;
transform: translateX(-50%);
}
.column_item {
padding: 0 40rpx;
height: 60rpx;
font-size: 28rpx;
width: 100%;
overflow: hidden;
margin: 0rpx auto;
background-color: #00000080;
text-overflow: ellipsis;
color: #fff;
white-space: nowrap;
}
.column_item {
padding: 0 40rpx;
height: 60rpx;
font-size: 28rpx;
width: 100%;
overflow: hidden;
margin: 0rpx auto;
background-color: #00000080;
text-overflow: ellipsis;
color: #fff;
white-space: nowrap;
}
.column_item:active {
background-color: #8f8f94;
}
.column_item:active {
background-color: #8f8f94;
}
.page-section-gap {
width: 100%;
position: fixed;
top: 0;
z-index: 0;
}
.page-section-gap {
width: 100%;
position: fixed;
top: 0;
z-index: 0;
}
.color {
width: 50rpx;
height: 50rpx;
border-radius: 6rpx;
border: solid 1rpx #d0d0d0;
background-color: transparent;
}
.color {
width: 50rpx;
height: 50rpx;
border-radius: 6rpx;
border: solid 1rpx #d0d0d0;
background-color: transparent;
}
.input-slot-right {
background-color: #eee;
padding: 10rpx;
}
.input-slot-right {
background-color: #eee;
padding: 10rpx;
}
.map-view {
width: 100%;
height: 500rpx;
overflow: hidden;
position: relative;
margin-bottom: 30rpx;
.map-view {
.m-map {
width: 100%;
height: 500rpx;
overflow: hidden;
position: relative;
margin-bottom: 30rpx;
height: 110%;
}
.map-btn-group {
position: absolute;
background-color: #fff;
padding: 14rpx 30rpx;
text-align: center;
border-radius: 16rpx;
z-index: 9;
bottom: 20rpx;
right: 30rpx;
box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.05);
.m-map {
width: 100%;
height: 110%;
image {
width: 52rpx;
height: 52rpx;
}
.map-btn-group {
position: absolute;
background-color: #fff;
padding: 14rpx 30rpx;
.text {
margin-top: -4px;
color: #14c171;
font-size: 28rpx;
text-align: center;
border-radius: 16rpx;
z-index: 9;
bottom: 20rpx;
right: 30rpx;
box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.05);
image {
width: 52rpx;
height: 52rpx;
}
.text {
margin-top: -4px;
color: #14C171;
font-size: 28rpx;
text-align: center;
}
}
}
}
.form-box {
padding: 40rpx 20rpx;
margin: 0 30rpx;
background: #fff;
box-shadow: 0 0 10px 1px #dadada;
border-radius: 15rpx;
.form-box {
padding: 40rpx 20rpx;
margin: 0 30rpx;
background: #fff;
box-shadow: 0 0 10px 1px #dadada;
border-radius: 15rpx;
/deep/ .uni-forms-item {
align-items: center;
&:last-child,
{
display: none;
}
&:first-child {
display: none;
}
}
/deep/ .uni-forms-item {
align-items: center;
}
}
</style>

55
sunPages/noteJobList/noteJobList.vue
Unescape View File

@ -6,17 +6,27 @@
</uni-section>
<view class="add-btn" v-if="canClick" @click="goNoteJob">记农事</view>
</view>
<view class="note-list">
<view class="note-list" v-if="activities.length > 0">
<view class="note-item-box" v-for="(item, index) in activities">
<vlew class="item-title" :class="index == 0 ? 'active-title' : ''">
<span class="title-time">{{ parseTime(item.jobTime, '{y}-{m}-{d}') }}</span>
<span class="title-time" v-if="item.operatingTime && item.operatingTime != '' && item.operatingTime != null">
{{ parseTime(item.operatingTime, '{y}-{m}-{d} {h}:{i}') }}
</span>
<span class="titme-name">{{ item.husbandryName && item.husbandryName != '' && item.husbandryName != null ? item.husbandryName : '-' }}</span>
</vlew>
<view class="item-data" :class="index == 0 ? 'active-data' : ''">
<view class="item-label" v-if="item.nickname">
操作人:
农事负责人:
<span class="item-value">{{ item.nickname && item.nickname != '' && item.nickname != null ? item.nickname : '-' }}</span>
</view>
<view class="item-label" v-if="item.operator">
操作人:
<span class="item-value">{{ item.operator && item.operator != '' && item.operator != null ? item.operator : '-' }}</span>
</view>
<view class="item-label" v-if="item.jobTime">
农事时间:
<span class="item-value">{{ parseTime(item.jobTime, '{y}-{m}-{d}') }}</span>
</view>
<view class="item-label" v-if="item.husbandryId && item.husbandryId == 1">
种植方式:
<dict-tag :type="'planting_way'" :value="item.plantingWay" class="m-dic-tag" />
@ -61,6 +71,10 @@
</view>
</view>
</view>
<view class="no-data" v-else>
<image src="@/static/images/default-data.svg" mode=""></image>
暂无数据
</view>
</view>
</template>
@ -88,9 +102,9 @@ export default {
onLoad(options) {
if (options.params) {
this.resviceData = JSON.parse(options.params);
this.resviceData.choose = false
this.resviceData.choose = false;
this.getBathList(this.resviceData.batch);
this.defaultBitch = this.resviceData.batch
this.defaultBitch = this.resviceData.batch;
this.getCropperNote(this.defaultBitch);
}
},
@ -112,17 +126,17 @@ export default {
//批次切换
bathChange(e) {
this.defaultBitch = e;
this.resviceData.batch = e
console.log(e,this.resviceData);
this.resviceData.batch = e;
console.log(e, this.resviceData);
this.getCropperNote(e);
},
//几农事
goNoteJob(){
const data = encodeURIComponent(JSON.stringify(this.resviceData))
console.log(data)
goNoteJob() {
const data = encodeURIComponent(JSON.stringify(this.resviceData));
console.log(data);
uni.navigateTo({
url:'/sunPages/addNoteJob/addNoteJob?params='+data
})
url: '/sunPages/addNoteJob/addNoteJob?params=' + data
});
},
//批次详情
getCropperNote(val) {
@ -211,7 +225,7 @@ export default {
font-size: 32rpx;
color: #1b1b1b;
line-height: 60rpx;
width: 50%;
width: 100%;
position: relative;
padding-left: 50rpx;
display: flex;
@ -237,7 +251,7 @@ export default {
opacity: 1;
}
.item-data {
background-color: rgba(0, 0, 0, 0.03);
background-color: rgba(0, 0, 0, 0.03);
border-radius: 20rpx;
padding: 20rpx;
margin-left: 35rpx;
@ -266,7 +280,7 @@ export default {
}
.nz-list {
background-color: rgba(0, 0, 0, 0.05);
background-color: rgba(0, 0, 0, 0.05);
border-radius: 12rpx;
padding: 15rpx;
margin-bottom: 30rpx;
@ -276,7 +290,7 @@ export default {
.nz-top {
max-width: 70%;
.nz-name{
.nz-name {
color: #333;
}
.nz-name,
@ -300,4 +314,13 @@ export default {
}
}
}
.no-data {
display: flex;
flex-direction: column;
align-items: center;
color: #666;
height: 100vh;
background: #fff;
padding-top: 100rpx;
}
</style>

2
uni_modules/uv-pick-color/components/uv-pick-color/props.js
Unescape View File

@ -40,7 +40,7 @@ export default {
// 确认按钮的颜色
confirmColor: {
type: String,
default: '#3c9cff'
default: '#14c171'
},
...uni.$uv?.props?.pickColor
}

Write Preview
Loading…
Cancel
Save