11
This commit is contained in:
parent
7bb9b9ca7b
commit
062777688d
|
|
@ -46,9 +46,9 @@ const install = (Vue, vm) => {
|
|||
|
||||
// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的
|
||||
// 所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值
|
||||
const token = uni.getStorageSync('token');
|
||||
// const token = uni.getStorageSync('token');
|
||||
|
||||
// const token = " eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImE1ZmE2YzM0LWM0Y2YtNGEwMS05YjY2LTE1M2M4YWY1YzU1YSJ9.Wze_tAjY7cCfw2K6mtDpTSd-QFLRF4A49Fx7bq7g2tVLKL4v5bqqHfpG0VQy7_a_CUQch5RPBTBIKMVCDupIqg"
|
||||
const token = " eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjY2ODhkNGE3LWM1MzctNGE2Mi1hMGNlLWIwOWUyZjhjOWM5OCJ9.umR5ryK0CA8zrnq04XBj21-Z-yaOwQ3oCv1cYga2bo6I-CAvR_WVM-wn9h8ZaJGqYpLhU6wdxjlD78y1coNWFg"
|
||||
|
||||
// console.log("我是token", token)
|
||||
config.header.Authorization = token;
|
||||
|
|
@ -121,9 +121,10 @@ const install = (Vue, vm) => {
|
|||
|
||||
} else if (res.code == 200) {
|
||||
// console.log("老用户登录",res.data)
|
||||
uni.switchTab({
|
||||
url:'/pages/index/index'
|
||||
})
|
||||
uni.setStorageSync('token', res.data);
|
||||
// uni.switchTab({
|
||||
// url:'/pages/index/index'
|
||||
// })
|
||||
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -63,6 +63,15 @@
|
|||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh" : false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/Apiary/Apiary_detail",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh" : false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
128
pages/Apiary.vue
128
pages/Apiary.vue
|
|
@ -1,20 +1,21 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar :is-back="false" title="蜂场" :border-bottom="false" :background="bgc" title-color='#3D3D3D '
|
||||
title-size='36' height='36' id="navbar">
|
||||
title-size='36' height='45' id="navbar">
|
||||
</u-navbar>
|
||||
<view class="top_box">
|
||||
<view class="search">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/um5GxgXufKY8IK2qkaWR" mode=""></image>
|
||||
<view class="search_center">
|
||||
<input type="text" class="ips" v-model="code" placeholder="编码/报修单号" placeholder-class="my-placeholder" />
|
||||
<input type="text" class="ips" v-model="code" placeholder="编码/报修单号"
|
||||
placeholder-class="my-placeholder" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="add">
|
||||
<view class="add" @click="addApiary()">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uR30yYn3IsHDu5qWV0ML" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="no_cont">
|
||||
<view class="no_cont" v-if="false">
|
||||
<view class="img">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uUZ3MF84e3bKgwAei8Rz" mode=""></image>
|
||||
</view>
|
||||
|
|
@ -22,7 +23,31 @@
|
|||
当前还没有添加蜂场哦
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="Apiary_box">
|
||||
<view class="Apiary_card">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/ug4ZIzZSC0XAiRelaIfp" mode=""></image>
|
||||
<view class="weather">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/u6wWpgZOuId6JSX8LGmz" mode=""></image>
|
||||
<view class="txt1">
|
||||
多云
|
||||
</view>
|
||||
<view class="txt2">
|
||||
温度舒适，湿润，光照强，空气优
|
||||
</view>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="left">
|
||||
福鼎蜂场
|
||||
</view>
|
||||
<view class="right">
|
||||
8箱
|
||||
</view>
|
||||
</view>
|
||||
<view class="address">
|
||||
福建省宁德市福鼎市太姥山镇秦屿大道2号 福建省宁德市福鼎市太姥山镇秦屿大道2号
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<tab-bar :indexs='1' style=""></tab-bar>
|
||||
|
||||
|
||||
|
|
@ -46,7 +71,11 @@
|
|||
|
||||
},
|
||||
methods: {
|
||||
|
||||
addApiary(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/Apiary/AddApiary'
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -61,6 +90,84 @@
|
|||
// position: relative;
|
||||
width: 750rpx;
|
||||
|
||||
.Apiary_box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.Apiary_card {
|
||||
position: relative;
|
||||
width: 674rpx;
|
||||
height: 512rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
|
||||
image {
|
||||
width: 674rpx;
|
||||
height: 360rpx;
|
||||
}
|
||||
.address{
|
||||
margin-top: 18rpx;
|
||||
padding: 0 24rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #50565A;
|
||||
white-space: nowrap;
|
||||
/* 禁止换行 */
|
||||
overflow: hidden;
|
||||
/* 超出部分隐藏 */
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.info{
|
||||
margin-top: 18rpx;
|
||||
padding: 0 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.right{
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #50565A;
|
||||
}
|
||||
}
|
||||
.weather {
|
||||
padding: 20rpx 24rpx;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 674rpx;
|
||||
height: 70rpx;
|
||||
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
|
||||
image{
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
.txt1{
|
||||
margin-left: 16rpx;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.txt2{
|
||||
margin-left: 28rpx;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top_box {
|
||||
margin: 42rpx auto;
|
||||
display: flex;
|
||||
|
|
@ -91,13 +198,14 @@
|
|||
.ips {
|
||||
// 基本样式设置
|
||||
width: 100%; // 根据需要调整
|
||||
|
||||
|
||||
// border: 1px solid #ccc; // 根据需要调整
|
||||
|
||||
|
||||
// 设置 placeholder 样式
|
||||
|
||||
|
||||
}
|
||||
.my-placeholder{
|
||||
|
||||
.my-placeholder {
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #808080;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,57 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar title="添加蜂场" :border-bottom="false" :background="bgc" title-color='#3D3D3D '
|
||||
title-size='36' height='36' id="navbar">
|
||||
<u-navbar title="添加蜂场" :border-bottom="false" :background="bgc" title-color='#3D3D3D ' :title-bold='true'
|
||||
title-size='36' height='45' id="navbar">
|
||||
</u-navbar>
|
||||
|
||||
|
||||
|
||||
<view class="tit">
|
||||
蜂场名称
|
||||
</view>
|
||||
<view class="iptbox">
|
||||
<input type="text" class="ips" v-model="code" placeholder="请输入蜂场名称（5个字以内）"
|
||||
placeholder-class="my-placeholder" />
|
||||
|
||||
</view>
|
||||
|
||||
<view class="tit">
|
||||
具体位置
|
||||
</view>
|
||||
<view class="iptbox" @click="chooseAddress()">
|
||||
<input type="text" class="ips" v-model="form.address" placeholder="请选择蜂场具体位置" placeholder-class="my-placeholder"
|
||||
disabled />
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
|
||||
</view>
|
||||
<view class="tit">
|
||||
养殖蜂种
|
||||
</view>
|
||||
<view class="iptbox" @click="showfengzhong = true">
|
||||
<input type="text" class="ips" v-model="code" placeholder="请选择养殖蜂种" placeholder-class="my-placeholder" disabled/>
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
|
||||
</view>
|
||||
<view class="tit">
|
||||
采集蜜源
|
||||
</view>
|
||||
<view class="iptbox" @click="showmiyuan = true">
|
||||
<input type="text" class="ips" v-model="code" placeholder="请选择采集蜜源" placeholder-class="my-placeholder" disabled/>
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
|
||||
</view>
|
||||
<view class="tit">
|
||||
照片
|
||||
</view>
|
||||
<view class="imgbox" @click="btn">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uLpiGDDDvBwk7hOhOtVp" mode="" v-if=""></image>
|
||||
|
||||
</view>
|
||||
<view class="imgbox" @click="btn">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uLpiGDDDvBwk7hOhOtVp" mode="" v-if=""></image>
|
||||
|
||||
</view>
|
||||
<u-select v-model="showfengzhong" :list="fengzhongcolumns" title='角色切换' @confirm="confirm"></u-select>
|
||||
<u-select v-model="showmiyuan" :list="miyuancolumns" title='角色切换' @confirm="confirm"></u-select>
|
||||
<view class="btn">
|
||||
确认添加
|
||||
</view>
|
||||
<!-- <u-picker @cancel="showmiyuan=false" @confirm="confirmmiyuan" :show="showmiyuan"
|
||||
:columns="miyuancolumns"></u-picker> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -18,7 +62,44 @@
|
|||
bgc: {
|
||||
backgroundColor: " #FAFDFD",
|
||||
},
|
||||
|
||||
code: '',
|
||||
fengzhongcolumns: [
|
||||
[]
|
||||
],
|
||||
miyuancolumns: [
|
||||
{
|
||||
label: '百花蜜',
|
||||
value: 1
|
||||
}, {
|
||||
label: '油菜蜜',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '荆条蜜',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: '荔枝蜜',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: '枣花蜜',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
label: '椴树蜜',
|
||||
value: 6
|
||||
},
|
||||
|
||||
],
|
||||
showfengzhong:false,
|
||||
showmiyuan:false,
|
||||
form: {
|
||||
lat: 0,
|
||||
lng: 0,
|
||||
address: '',
|
||||
},
|
||||
upurl:''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
|
@ -28,7 +109,82 @@
|
|||
|
||||
},
|
||||
methods: {
|
||||
btn() {
|
||||
let _this = this
|
||||
let math = 'static/' + _this.$u.guid(20)
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
type: 'all',
|
||||
success(res) {
|
||||
// tempFilePath可以作为img标签的src属性显示图片
|
||||
const tempFilePaths = res.tempFiles
|
||||
// let tempFilePaths = chooseImageRes.tempFilePaths;
|
||||
// console.log(tempFilePaths)
|
||||
// tempFilePaths.forEach(item=>{
|
||||
// // 上传图片到七牛云
|
||||
|
||||
// })
|
||||
wx.uploadFile({
|
||||
url: 'https://up-z2.qiniup.com',
|
||||
name: 'file',
|
||||
filePath: tempFilePaths[0].path,
|
||||
formData: {
|
||||
token: _this.token, //后端返回的token
|
||||
key: 'smartmeter/img/' + math
|
||||
},
|
||||
success: function(res) {
|
||||
console.log(res,'resres');
|
||||
let str = JSON.parse(res.data)
|
||||
console.log(str.key)
|
||||
_this.userImgs = _this.upurl +'/'+ str.key
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
confirmfengzhong(e) {
|
||||
console.log(e);
|
||||
this.form.bee_type = e.value[0].id
|
||||
this.form.bee_type_text = e.value[0].text
|
||||
|
||||
this.showfengzhong = false
|
||||
},
|
||||
confirmmiyuan(e) {
|
||||
this.form.honey_source = e.value[0].id
|
||||
this.form.honey_source_text = e.value[0].text
|
||||
this.showmiyuan = false
|
||||
},
|
||||
sourcelist() {
|
||||
request.put("/api/apiary/info", {}).then(res => {
|
||||
this.fengzhongcolumns[0] = this.setfor(res.data.data.bee_type)
|
||||
this.miyuancolumns[0] = this.setfor(res.data.data.honey_source)
|
||||
})
|
||||
},
|
||||
chooseAddress() {
|
||||
uni.chooseLocation({
|
||||
success: (res) => {
|
||||
console.log(res);
|
||||
this.form.lng = res.longitude
|
||||
this.form.lat = res.latitude
|
||||
this.form.address = res.address
|
||||
},
|
||||
fail: function(err) {
|
||||
// 检查错误消息，看是否是用户取消了位置选择
|
||||
if (err.errMsg && err.errMsg.indexOf('chooseLocation:cancel') === 0) {
|
||||
uni.showToast({
|
||||
title: '您取消了位置选择',
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
console.log('选择位置失败', err);
|
||||
// 处理其他失败情况
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -40,8 +196,67 @@
|
|||
}
|
||||
|
||||
.page {
|
||||
padding-bottom: 200rpx;
|
||||
// position: relative;
|
||||
width: 750rpx;
|
||||
.btn{
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
bottom: 100rpx;
|
||||
left: 46rpx;
|
||||
width: 658rpx;
|
||||
height: 88rpx;
|
||||
background: #FFCC25;
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.tit {
|
||||
margin-top: 40rpx;
|
||||
margin-left: 50rpx;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.imgbox{
|
||||
margin-top: 28rpx;
|
||||
margin-left: 46rpx;
|
||||
image{
|
||||
width: 412rpx;
|
||||
height: 222rpx;
|
||||
}
|
||||
}
|
||||
.iptbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
padding: 22rpx;
|
||||
margin: 28rpx auto 0;
|
||||
width: 658rpx;
|
||||
height: 88rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
|
||||
.ips {
|
||||
width: 630rpx;
|
||||
|
||||
}
|
||||
|
||||
image {
|
||||
width: 18rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.my-placeholder {
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
720
pages/Apiary/Apiary_detail.vue
Normal file
720
pages/Apiary/Apiary_detail.vue
Normal file
|
|
@ -0,0 +1,720 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar :title="title" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
|
||||
:title-bold='true' height='45' id="navbar">
|
||||
</u-navbar>
|
||||
<view class="tipbox">
|
||||
<view class="tip_cont">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uwO70CUV98b3maj6bfCF" mode=""></image>
|
||||
<view class="txt">
|
||||
中华蜂
|
||||
</view>
|
||||
</view>
|
||||
<view class="tip_cont" style="margin-top: 28rpx;">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uQQym033Pvs3rirm9kP5" mode=""></image>
|
||||
<view class="txt">
|
||||
枣花蜜
|
||||
</view>
|
||||
</view>
|
||||
<view class="tip_cont" style="margin-top: 28rpx;">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/u9wAWh1AIzSDGgKDKsKY" mode=""></image>
|
||||
<view class="txt">
|
||||
22.0 ℃
|
||||
</view>
|
||||
</view>
|
||||
<view class="tip_cont" style="margin-top: 28rpx;">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uBIctX6qJ9yMtAZYuY0R" mode=""></image>
|
||||
<view class="txt">
|
||||
60.0 %
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_box">
|
||||
<view class="cont_img" style="margin-top: 25rpx;" @click="showtqs()">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uuDdvHXyO9xuWd3DqCLU" mode=""></image>
|
||||
|
||||
</view>
|
||||
<view class="cont_img" style="margin-top: 15rpx;">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/urhdebIu3K8vqRb8leoH" mode=""></image>
|
||||
</view>
|
||||
<view class="cont_img" style="margin-top: 15rpx;">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uTcBaMpmiZwS63GPCMBZ" mode=""></image>
|
||||
<view class="tip">
|
||||
1
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont_img" style="margin-top: 25rpx;">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uZVc2GgYQoUmn6aJwVeR" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tit">
|
||||
具体位置
|
||||
</view>
|
||||
<view class="mapbox">
|
||||
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
|
||||
:show-location='true'> </map>
|
||||
<view class="num">
|
||||
<view class="txt">
|
||||
在线：1001
|
||||
</view>
|
||||
<view class="txt" style="color:#FF473E ;margin-top: 10rpx;">
|
||||
在线：100
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn" @click="showwl = true">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uaGU0mFvFqbgAxAsFlUP" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tit">
|
||||
具体位置
|
||||
</view>
|
||||
<view class="setbox">
|
||||
<view class="setcard">
|
||||
<view class="top">
|
||||
<view class="left">
|
||||
视频监控
|
||||
</view>
|
||||
<view class="right iconfont icon-xiangyou1">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="bot">
|
||||
更好查看蜂场情况
|
||||
</view>
|
||||
<view class="img">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/ukN0K37DEPQQxFJ03Qi9" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="setcard">
|
||||
<view class="top">
|
||||
<view class="left">
|
||||
预警设置
|
||||
</view>
|
||||
<view class="right iconfont icon-xiangyou1">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="bot">
|
||||
时刻注意蜂箱变化
|
||||
</view>
|
||||
<view class="img">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uxDnt5rGbJcc6mU6W3cE" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-mask :show="showtq" @click="showtq = false" :z-index='100' duration='0' />
|
||||
<view class="weather_info" v-show="showtq">
|
||||
<view class="top">
|
||||
<view class="weather_info_tit">
|
||||
未来7日天气预知
|
||||
</view>
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uQK4q99a1Qb7LFD6O3Hw" mode="" @click="showtq = false"></image>
|
||||
</view>
|
||||
<view class="top" style="margin-top: 14rpx;">
|
||||
<view class="weather_add">
|
||||
蜂场位置：<span style="color: #42A5F5;">福鼎市</span>
|
||||
</view>
|
||||
<view class="up_time">
|
||||
1小时前更新
|
||||
</view>
|
||||
</view>
|
||||
<view class="weather_cont">
|
||||
<view class="weather_li" v-for="imte in 7 " :key="item">
|
||||
<view class="data">
|
||||
5/16
|
||||
</view>
|
||||
<view class="week">
|
||||
今天
|
||||
</view>
|
||||
<view class="week_weather">
|
||||
多云
|
||||
</view>
|
||||
<view class="week_weather_img">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/u6wWpgZOuId6JSX8LGmz" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="echarts_box">
|
||||
<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
|
||||
</uni-ec-canvas>
|
||||
</view>
|
||||
</view>
|
||||
<u-mask :show="showwl" @click="showwl = false" :z-index='100' duration='0' />
|
||||
<view class="pops" v-if='showwl'>
|
||||
<image class="bgimg" src="https://api.ccttiot.com/smartmeter/img/static/uImWgTlNYBAv4SO02gSL" mode=""></image>
|
||||
<view class="tit">
|
||||
电子围栏（Km）
|
||||
</view>
|
||||
<view class="cont">
|
||||
最大距离 <view class="ipt"><input type="text" class="ips" v-model="code" placeholder=" "
|
||||
placeholder-class="my-placeholder" /></view>
|
||||
</view>
|
||||
<view class="btn">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
|
||||
import * as echarts from '@/components/uni-ec-canvas/echarts'
|
||||
let chart = null
|
||||
export default {
|
||||
components: {
|
||||
uniEcCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ec: {
|
||||
lazyLoad: true
|
||||
},
|
||||
bgc: {
|
||||
backgroundColor: " #F4FAF8",
|
||||
},
|
||||
title: "福鼎蜂场",
|
||||
latitude: '39.916527',
|
||||
longitude: ' 116.397128',
|
||||
isMap: false,
|
||||
zoomSize: 15,
|
||||
markers: [{
|
||||
id: 1,
|
||||
latitude: 39.90469,
|
||||
longitude: 116.40717,
|
||||
title: 'Marker1'
|
||||
}, {
|
||||
id: 2,
|
||||
latitude: 39.90969,
|
||||
longitude: 116.41217,
|
||||
title: 'Marker2'
|
||||
}],
|
||||
showtq: false,
|
||||
showwl:true
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
showtqs(){
|
||||
setTimeout(() => {
|
||||
|
||||
this.$refs.canvas.init(this.initChart)
|
||||
}, 200);
|
||||
this.showtq=true
|
||||
},
|
||||
initChart(canvas, width, height, canvasDpr) {
|
||||
let that = this
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top:'0%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisLine: {
|
||||
show: false // 隐藏X轴线
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 隐藏X轴刻度
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // 隐藏X轴标签
|
||||
},
|
||||
splitLine: {
|
||||
show: true, // 显示X轴网格线
|
||||
lineStyle: {
|
||||
type: 'dashed', // 设置网格线为虚线
|
||||
color: '#ccc', // 可以设置虚线的颜色
|
||||
width: 1 // 可以设置虚线的宽度
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 40, // 设置Y轴的最大值为40
|
||||
axisLabel: {
|
||||
show: false // 隐藏Y轴标签
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 隐藏Y轴线
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 隐藏Y轴刻度
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 隐藏Y轴背景网格线
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
type: 'inside',
|
||||
filterMode: 'none',
|
||||
xAxisIndex: [0],
|
||||
startValue: -20,
|
||||
endValue: 20
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
type: 'inside',
|
||||
filterMode: 'none',
|
||||
yAxisIndex: [0],
|
||||
startValue: -20,
|
||||
endValue: 20
|
||||
}
|
||||
],
|
||||
series: [{
|
||||
name: '最高温度',
|
||||
type: 'line',
|
||||
data: [25, 29, 29, 29, 27, 24, 26],
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
lineStyle: {
|
||||
width: 3
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#42A5F5'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c}°',
|
||||
color: '#42A5F5'
|
||||
},
|
||||
markLine: {
|
||||
silent: true, // 不响应鼠标事件
|
||||
symbol: ['none', 'none'], // 不显示标记
|
||||
lineStyle: {
|
||||
color: 'red', // 使虚线更明显
|
||||
type: 'dashed'
|
||||
},
|
||||
// data: [
|
||||
// { yAxis: 'min' },
|
||||
// { yAxis: 'max' }
|
||||
// ]
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '最低温蒂',
|
||||
type: 'line',
|
||||
data: [15, 18, 19, 19, 21, 20, 20],
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
lineStyle: {
|
||||
width: 3
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#42A5F5'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
formatter: '{c}°',
|
||||
color: '#42A5F5'
|
||||
},
|
||||
}]
|
||||
};
|
||||
|
||||
chart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: canvasDpr
|
||||
})
|
||||
|
||||
|
||||
canvas.setChart(chart)
|
||||
chart.setOption(option)
|
||||
return chart
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #FAFDFD;
|
||||
background-image: url('https://api.ccttiot.com/smartmeter/img/static/uzH4CBTO95bjOrhGDpAe');
|
||||
background-size: cover;
|
||||
/* 确保背景图覆盖整个区域 */
|
||||
background-repeat: no-repeat;
|
||||
/* 防止背景图重复 */
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.page {
|
||||
// position: relative;
|
||||
width: 750rpx;
|
||||
.pops{
|
||||
position: fixed;
|
||||
left: 98rpx;
|
||||
top: 400rpx;
|
||||
z-index: 101;
|
||||
width: 554rpx;
|
||||
height: 420rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
.bgimg{
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
right: 16rpx;
|
||||
width: 210rpx;
|
||||
height: 172rpx;
|
||||
}
|
||||
.tit{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 40rpx auto 0;
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.cont{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
margin-top: 42rpx;
|
||||
width: 100%;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
.ipt{
|
||||
margin-left: 18rpx;
|
||||
width: 178rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
border: 2rpx solid #808080;
|
||||
.ips{
|
||||
padding: 14rpx;
|
||||
}
|
||||
.my-placeholder {
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.btn{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 60rpx;
|
||||
margin-left: 74rpx;
|
||||
width: 406rpx;
|
||||
height: 90rpx;
|
||||
background: #FFC107;
|
||||
border-radius: 54rpx 54rpx 54rpx 54rpx;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 40rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.weather_info {
|
||||
position: fixed;
|
||||
padding: 30rpx 50rpx;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 750rpx;
|
||||
height: 820rpx;
|
||||
background: #FFFFFF;
|
||||
z-index: 200;
|
||||
|
||||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||||
|
||||
.echarts_box {
|
||||
|
||||
margin-top: 24rpx;
|
||||
// width: 100%;
|
||||
// height: 80%;
|
||||
width: 646rpx;
|
||||
height: 344rpx;
|
||||
}
|
||||
|
||||
.weather_cont {
|
||||
margin-top: 42rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.weather_li {
|
||||
.data {
|
||||
text-align: center;
|
||||
width: 72rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #50565A;
|
||||
}
|
||||
|
||||
.week {
|
||||
margin-top: 4rpx;
|
||||
text-align: center;
|
||||
width: 72rpx;
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
color: #50565A;
|
||||
}
|
||||
|
||||
.week_weather {
|
||||
margin-top: 14rpx;
|
||||
text-align: center;
|
||||
width: 72rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #50565A;
|
||||
}
|
||||
|
||||
.week_weather_img {
|
||||
margin-top: 4rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 72rpx;
|
||||
|
||||
image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.weather_info_tit {
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
|
||||
.weather_add {
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #50565A;
|
||||
}
|
||||
|
||||
.up_time {
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setbox {
|
||||
margin: 0 auto;
|
||||
margin-top: 34rpx;
|
||||
width: 674rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.setcard {
|
||||
position: relative;
|
||||
padding: 14rpx 22rpx;
|
||||
width: 320rpx;
|
||||
height: 132rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 24rpx;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
|
||||
.bot {
|
||||
margin-top: 14rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.img {
|
||||
position: absolute;
|
||||
right: 24rpx;
|
||||
bottom: 24rpx;
|
||||
width: 82rpx;
|
||||
height: 82rpx;
|
||||
|
||||
image {
|
||||
width: 82rpx;
|
||||
height: 82rpx;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tit {
|
||||
margin-top: 40rpx;
|
||||
margin-left: 38rpx;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
.mapbox {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
margin-top: 34rpx;
|
||||
width: 674rpx;
|
||||
height: 372rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.num {
|
||||
width: 180rpx;
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
left: 30rpx;
|
||||
|
||||
.txt {
|
||||
width: 180rpx;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #FFC107;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
right: 0rpx;
|
||||
bottom: 0rpx;
|
||||
|
||||
// width: 70rpx;
|
||||
// height: 70rpx;
|
||||
image {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 672rpx;
|
||||
height: 372rpx;
|
||||
// border-radius:20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info_box {
|
||||
padding-left: 40rpx;
|
||||
margin: 138rpx auto 0;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 680rpx;
|
||||
height: 184rpx;
|
||||
|
||||
.cont_img {
|
||||
position: relative;
|
||||
margin-right: 50rpx;
|
||||
|
||||
image {
|
||||
|
||||
width: 112rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
.tip {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 6rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #FF473E;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FAFDFD;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tipbox {
|
||||
width: 300rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// position: relative;
|
||||
margin-top: 42rpx;
|
||||
margin-left: 38rpx;
|
||||
|
||||
.tip_cont {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
margin-right: 6rpx;
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
|
||||
// display: inline-flexbox;
|
||||
flex-wrap: nowrap;
|
||||
padding: 8rpx 22rpx;
|
||||
background: rgba(61, 61, 61, 0.5);
|
||||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #FAFDFD;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar :is-back="false" title="我的" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36'
|
||||
height='36'
|
||||
height='45'
|
||||
id="navbar">
|
||||
</u-navbar>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user