Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 e6e77db5 作者: 王定
操作

feat: 重构农场

上级 4e33924a
正在显示 包含 87 行增加 和 26 行删除
src/pages/device/device.vue
...@@ -146,19 +146,19 @@ function handleDeviceClick(device) { ...@@ -146,19 +146,19 @@ function handleDeviceClick(device) {
<text class="stat-label">设备ID：</text> <text class="stat-label">设备ID：</text>
<text class="stat-value">{{ pageData.selectedDevice.deviceIdentifier }}</text> <text class="stat-value">{{ pageData.selectedDevice.deviceIdentifier }}</text>
</view> </view>
<!-- <view class="stat-item"> <view class="stat-item">
<text class="stat-label">位置坐标：</text> <text class="stat-label">位置坐标：</text>
<text class="stat-value">30.2680, 120.0450</text> <text class="stat-value">30.2680, 120.0450</text>
</view> --> </view>
</view> </view>
<view class="device-stats"> <view class="device-stats">
<view class="stat-item"> <view class="stat-item">
<text class="stat-label">设备来源：</text> <text class="stat-label">设备类型：</text>
<text class="stat-value">灌溉设备</text> <text class="stat-value">灌溉设备</text>
</view> </view>
<view class="stat-item"> <view class="stat-item">
<text class="stat-label">归属地：</text> <text class="stat-label">归属地：</text>
<text class="stat-value">西区灌溉基地</text> <text class="stat-value">西区油茶基地</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -168,13 +168,20 @@ function handleDeviceClick(device) { ...@@ -168,13 +168,20 @@ function handleDeviceClick(device) {
<!-- 搜索框 --> <!-- 搜索框 -->
<view class="codefun-flex-row codefun-items-center section_2"> <view class="codefun-flex-row codefun-items-center section_2">
<image class="image_6" src="/static/images/codefun/6c5c5a3c082b8c60a307d3a7caee623c.png" /> <image class="image_6" src="/static/images/codefun/6c5c5a3c082b8c60a307d3a7caee623c.png" />
<u-input <!-- <u-input
v-model="pageData.param.deviceName" v-model="pageData.param.deviceName"
:placeholder="isCameraDevice ? '请输入关键词搜索' : '请输入设备名称搜索'" :placeholder="isCameraDevice ? '请输入关键词搜索' : '请输入设备名称搜索'"
border="none" border="none"
class="codefun-ml-8" class="codefun-ml-8"
@confirm="handleSearch" @confirm="handleSearch"
/> /> -->
<u-input
v-model="pageData.param.deviceName"
placeholder="请输入搜索内容"
border="none"
class="codefun-ml-8"
@confirm="handleSearch"
/>
</view> </view>
<!-- 分类标签 --> <!-- 分类标签 -->
...@@ -926,6 +933,8 @@ body { ...@@ -926,6 +933,8 @@ body {
.device-title-group { .device-title-group {
flex: 1; flex: 1;
display: flex;
align-items: center;
} }
.device-title { .device-title {
...@@ -960,7 +969,7 @@ body { ...@@ -960,7 +969,7 @@ body {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 16rpx; margin-bottom: 16rpx;
padding-right: 26rpx;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -973,13 +982,13 @@ body { ...@@ -973,13 +982,13 @@ body {
} }
.stat-label { .stat-label {
font-size: 26rpx; font-size: 24rpx;
color: #999999; color: #999999;
} }
.stat-value { .stat-value {
font-size: 26rpx; font-size: 24rpx;
color: #333333; color: #666666;
} }
.device-grid { .device-grid {
......
src/pages/nongchang/detail/index.vue
...@@ -16,6 +16,7 @@ import { ToolBoxWidget, useToolBoxWidget } from '@/components/Map/Widgets/ToolBo ...@@ -16,6 +16,7 @@ import { ToolBoxWidget, useToolBoxWidget } from '@/components/Map/Widgets/ToolBo
import * as NongchangAPI from '@/api/model/nongchang' import * as NongchangAPI from '@/api/model/nongchang'
import * as farmbaseApi from '@/api/model/farmbase' import * as farmbaseApi from '@/api/model/farmbase'
import navigate from '@/utils/page/navigate' import navigate from '@/utils/page/navigate'
import dayjs from 'dayjs'
// 页面参数 // 页面参数
const page = reactive<Page>({ const page = reactive<Page>({
...@@ -29,6 +30,7 @@ const showDialog = ref(false) ...@@ -29,6 +30,7 @@ const showDialog = ref(false)
onShow(() => { onShow(() => {
getFarmbaseInfoList() getFarmbaseInfoList()
}) })
const model = reactive({ const model = reactive({
id: '', id: '',
name: '', name: '',
...@@ -58,12 +60,19 @@ const model = reactive({ ...@@ -58,12 +60,19 @@ const model = reactive({
], ],
}, },
// 预报日期 // 预报日期
forecasts: ['29日', '30日', '1日', '2日', '3日'], forecasts: [],
clicked: 0, clicked: 0,
farmbaseInfo: {}, farmbaseInfo: {},
farmbaseInfoList: [], farmbaseInfoList: [],
deviceTypeCount: [], deviceTypeCount: [],
}) })
onLoad(()=>{
var today = dayjs();
for (var i = 0; i < 5; i++) {
var futureDate = today.add(i, 'day');
model.forecasts.push(futureDate.format('DD')+'日');
}
})
async function getFarmbaseInfoList() { async function getFarmbaseInfoList() {
farmbaseApi farmbaseApi
.list({ .list({
...@@ -124,7 +133,7 @@ const [registerMap, map] = useMapbox({ ...@@ -124,7 +133,7 @@ const [registerMap, map] = useMapbox({
center: model.lonlat.split(',').map(Number) as [number, number], center: model.lonlat.split(',').map(Number) as [number, number],
duration: 0, duration: 0,
}) })
// 渲染地块数据 // 渲染地块数据
model.plots = [ model.plots = [
turf.polygon( turf.polygon(
...@@ -240,6 +249,28 @@ const [registerMap, map] = useMapbox({ ...@@ -240,6 +249,28 @@ const [registerMap, map] = useMapbox({
}, },
}) })
/* const mapAddImage = new Image();
mapAddImage.src = '/static/images/test/mapLayer.png';
// 添加自定义图像图层
map.on('load','custom-image',()=>{
console.log("进到自定义的地图里了")
// 添加图片资源
map.addImage('custom-image', mapAddImage, { pixelRatio: 2 }); // 确保路径正确且图片可访问
// 添加图层到地图上，并指定位置和大小
map.addLayer({
id: 'custom-image-layer', // 图层的唯一ID
type: 'raster', // 或者使用 'raster' 根据需要选择类型
source: {
type: 'image', // 指定源类型为图像
url: '/static/images/test/mapLayer.png' // 同上，确保路径正确
},
layout: {
'icon-image': 'custom-image', // 使用上面添加的图片ID
'icon-anchor': 'center' // 设置锚点为图片中心，根据需要调整
}
});
}) */
// 左侧工具栏小部件 // 左侧工具栏小部件
const [registerToolBoxWidget] = useToolBoxWidget({ const [registerToolBoxWidget] = useToolBoxWidget({
show: true, show: true,
...@@ -396,11 +427,33 @@ const toDevice = (device)=>{ ...@@ -396,11 +427,33 @@ const toDevice = (device)=>{
</view> </view>
</view> </view>
</view> </view>
<view class="card !top-950"> <view class="card !top-854">
<view class="box-1">
<view class="relative w-full flex flex-row">
<view class="box-1-left"
><image class="image_1" src="/static/images/nongchang/play.png"
/></view>
<view class="box-1-right">
<view class="box-1-right-top">
<view class="text_1">预报</view>
</view>
<view class="box-1-right-bottom"
><text
v-for="(forecast, index) in model.forecasts"
:class="model.clicked === index ? 'active' : ''"
:key="index"
>{{ forecast }}</text
></view
>
</view>
</view>
</view>
</view>
<view class="card !top-954">
<view class="w-full absolute"> <view class="w-full absolute">
<view style="background: #e6f5e8"> <view style="background: #e6f5e8">
<view class="box-1"> <!-- <view class="box-1">
<view class="relative w-full flex flex-row"> <view class="relative w-full flex flex-row">
<view class="box-1-left" <view class="box-1-left"
><image class="image_1" src="/static/images/nongchang/play.png" ><image class="image_1" src="/static/images/nongchang/play.png"
...@@ -419,7 +472,7 @@ const toDevice = (device)=>{ ...@@ -419,7 +472,7 @@ const toDevice = (device)=>{
> >
</view> </view>
</view> </view>
</view> </view> -->
<view class="box-2"> <view class="box-2">
<view class="box-2-left"> <view class="box-2-left">
<view class="box-2-left-top"> <view class="box-2-left-top">
...@@ -663,11 +716,9 @@ page { ...@@ -663,11 +716,9 @@ page {
.card { .card {
width: 100%; width: 100%;
background-color: #e6f5e8;
position: absolute; position: absolute;
font-weight: 400; font-weight: 400;
font-family: '思源黑体'; font-family: '思源黑体';
.box-1 { .box-1 {
width: 95%; width: 95%;
height: 80rpx; height: 80rpx;
...@@ -676,7 +727,7 @@ page { ...@@ -676,7 +727,7 @@ page {
border-radius: 18rpx; border-radius: 18rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
// margin-top:-500rpx;
.box-1-left { .box-1-left {
width: 50rpx; width: 50rpx;
height: 100%; height: 100%;
...@@ -699,14 +750,16 @@ page { ...@@ -699,14 +750,16 @@ page {
.box-1-right-top { .box-1-right-top {
// height: 50%; // height: 50%;
background-image: url('/static/images/nongchang/yubaobeijing.png'); // background-image: url('/static/images/nongchang/yubaobeijing.png');
background-size: 100% 100%; padding-left: 184rpx;
background-repeat: no-repeat;
.text_1 { .text_1 {
font-size: 25rpx; font-size: 25rpx;
color: #5db66f; color: #5db66f;
text-align: center; text-align: center;
background: linear-gradient(180deg, rgba(93, 182, 111, 0.3) 0%, rgba(93, 182, 111, 0) 100%);
background-size: 100% 100%;
background-repeat: no-repeat;
border-top-right-radius: 16rpx;
} }
} }
......
src/pages/nongchang/nongchang.vue
...@@ -740,13 +740,12 @@ onHide(() => { ...@@ -740,13 +740,12 @@ onHide(() => {
</view> </view>
</view> </view>
<fui-fab position="right" distance="10" bottom="240" width="96" @click="handlePublish"> <!-- <fui-fab position="right" distance="10" bottom="240" width="96" @click="handlePublish">
<view class="text-white text-center"> <view class="text-white text-center">
<!-- <view class="fab-icon" /> -->
<image style="width: 52rpx;height:52rpx;" src="/static/images/nongchang/work_icon.png" /> <image style="width: 52rpx;height:52rpx;" src="/static/images/nongchang/work_icon.png" />
<view style="font-size: 18rpx;margin-top: -16rpx;">找人干活</view> <view style="font-size: 18rpx;margin-top: -16rpx;">找人干活</view>
</view> </view>
</fui-fab> </fui-fab> -->
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论