<template>
|
<view class="app">
|
<!-- <view class="cu-custom custom-bar" :style="[{height:CustomBar + 'px'}]">
|
<view class="select-equ-box">
|
<u-icon name="setting" color="rgb(255,255,255)" :size="20"></u-icon>
|
<text style="margin-left: 10rpx;" @click="show">1号干燥机</text>
|
<u-icon name="arrow-right" color="rgb(255,255,255)" :size="12"></u-icon>
|
</view>
|
</view>
|
<view class="blank" :style="[{height:CustomBar + 'px'}]">
|
</view>
|
|
-->
|
<cu-custom bgColor="bg-gradual-blue" :isBack="false">
|
<block slot="content">干燥设备监控系统</block>
|
</cu-custom>
|
|
<!-- <view class="card-box dynamic shadow cu-list menu">
|
<view class="title-box">
|
<view class="left">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">统计</view>
|
</view>
|
</view>
|
|
<view class="cu-item" style="padding: 0;">
|
<view class="content">
|
<image src='/static/me/icon/bianqian.png' class='png' mode='aspectFit'></image>
|
<text class="text-lg">烘干总量</text>
|
</view>
|
<view class="action">
|
<view class="cu-tag radius bg-blue light">
|
1200kg
|
</view>
|
</view>
|
</view>
|
|
<view class="cu-item" style="padding: 0;">
|
<view class="content">
|
<image src='/static/me/icon/bianqian.png' class='png' mode='aspectFit'></image>
|
<text class="text-lg">烘干时长</text>
|
</view>
|
<view class="action">
|
<view class="cu-tag radius bg-blue light">
|
300分钟
|
</view>
|
</view>
|
</view>
|
|
<view class="bxBox">
|
<image src="/static/me/icon/bianqian.png" class="png" style="width: 48upx;
|
height: 48upx;" mode="aspectFit"></image>
|
<view style="padding-left: 10rpx;" class="text-lg">烘干药材</view>
|
</view>
|
|
<view class='padding-bottom-sm flex flex-wrap bg-white' style="justify-content: flex-end;">
|
<view class="cu-tag margin-right-xs bg-blue light radius">
|
当归
|
</view>
|
<view class="cu-tag bg-purple light radius">
|
人参
|
</view>
|
<view class="cu-tag bg-brown light radius">
|
龙须草
|
</view>
|
|
</view>
|
|
|
</view> -->
|
|
|
<view class="card-box dynamic shadow">
|
<view class="title-box margin-bottom-sm">
|
<view class="left justify-between">
|
<view class="flex align-center">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">总览</view>
|
</view>
|
<view>
|
<text class="text-gray">2023-3-18</text>
|
</view>
|
|
</view>
|
|
</view>
|
<view class="flex flex-direction padding-xs">
|
<view class="flex">
|
<view class="flex-sub flex flex-direction">
|
<text class="text-df">烘干数量</text>
|
<text class="text-bold text-sl margin-top-xs text-cyan margin-top-sm">16 <text class="text-gray text-sm margin-left-xs">框</text></text>
|
</view>
|
<view class="flex-twice flex flex-direction justify-between">
|
<view class="flex-sub flex">
|
<view class="flex flex-direction flex-sub">
|
<text class="text-gray text-xs">批次信息</text>
|
<text class="text-black"><text class="text-black">种类:</text> 2 <text class="text-gray text-xs"></text></text>
|
|
</view>
|
<view class="flex flex-direction flex-sub">
|
<text class="text-white text-xs">批次</text>
|
<text class="text-black"><text class="text-black">批次:</text> 12 <text class="text-gray text-xs"></text></text>
|
|
</view>
|
|
</view>
|
<view class="flex-sub flex margin-top-sm">
|
<view class="flex flex-direction flex-sub">
|
<text class="text-gray text-xs">烘干信息</text>
|
<text class="text-cyan"><text class="text-black">重量:</text> 100 <text class="text-gray text-xs">kg</text></text>
|
|
</view>
|
<view class="flex flex-direction flex-sub">
|
<text class="text-white text-xs">时间</text>
|
<text class="text-cyan"><text class="text-black">时间:</text> 100 <text class="text-gray text-xs">min</text></text>
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
<view class="margin-top">
|
<u-scroll-list>
|
|
</u-scroll-list>
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
|
<view class="card-box dynamic shadow">
|
<view class="title-box">
|
<view class="left">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">日期</view>
|
</view>
|
</view>
|
|
<lunc-calendar :showShrink="true" shrinkState="week" :signList="signList"></lunc-calendar>
|
</view>
|
|
|
|
<view class="card-box dynamic shadow">
|
<view class="title-box">
|
<view class="left">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">明细</view>
|
</view>
|
</view>
|
|
<view class="data-item" v-for="(res, index) in dataList" :key="res.id" style="padding: 0 10rpx;">
|
<view class="flex justify-between text-lg align-center padding-tb-xs">
|
<view class="flex">
|
<text>根茎类</text>
|
<text>丨</text>
|
<text>当归</text>
|
<view class="margin-lr-sm">
|
<u-tag text="报警一次" plain size="mini" type="warning"></u-tag>
|
</view>
|
<u-tag text="标签" plain size="mini" type="success"></u-tag>
|
</view>
|
<view style="width:160rpx;" class="flex align-center text-xs ">
|
<text>进度:</text>
|
<view style="width: 100rpx;">
|
<u-line-progress :percentage="40" height="10"></u-line-progress>
|
</view>
|
</view>
|
</view>
|
|
<view style="display: flex;flex-direction: row;height: 120rpx;">
|
<view class="image">
|
<image :src="dataList[0].goodsUrl" mode="aspectFill"></image>
|
</view>
|
|
<view class="flex flex-direction margin-left-xl margin-left-sm justify-center">
|
<view>
|
<text class="text-xxl text-green">13%</text>
|
<text class="text-xs margin-top-xs text-grey text-line-through">42%</text>
|
</view>
|
<text class="text-xs margin-top-xs text-grey">含水率</text>
|
</view>
|
|
<view class="flex flex-direction margin-left-xl margin-left-10p justify-center">
|
<view>
|
<text class="text-xxl">200kg</text>
|
<text class="text-xs margin-top-xs text-grey text-line-through">400kg</text>
|
</view>
|
|
<view class="text-xs margin-top-xs text-grey">
|
<text>16框</text>
|
<text style="margin: 0 10rpx;"> l </text>
|
<text>70℃</text>
|
<text style="margin: 0 10rpx;"> l </text>
|
<text>100min</text>
|
</view>
|
</view>
|
</view>
|
<u-gap height="10"></u-gap>
|
<view class="text-grey text-sm flex justify-between">
|
<text>CY20230318001</text>
|
<text>2023-03-18 12:00:00</text>
|
</view>
|
<u-line color="#f1f1f1" margin="15rpx 0 15rpx 0"></u-line>
|
</view>
|
|
</view>
|
<!--
|
<view class="page-box" v-show="false">
|
<view class="order" v-for="(res, index) in dataList" :key="res.id">
|
<view class="top">
|
<view class="left">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="store">{{ res.store }}</view>
|
<u-icon name="arrow-right" color="rgb(203,203,203)" :size="12"></u-icon>
|
</view>
|
<view class="right">
|
<view class='cu-tag radius light bg-blue'>{{res.id}}</view>
|
</view>
|
</view>
|
<view class="item">
|
<view class="left">
|
<image :src="res.goodsUrl" mode="aspectFill"></image>
|
</view>
|
<view class="content">
|
<view>
|
<view class="title u-line-2 text-bold">当归（12:00-13:00）</view>
|
<view class="type">重量：200kg</view>
|
<view class="type">含水率：30% <text style="color: green;">(13%)</text></view>
|
<view class="delivery-time">时间： 60min</view>
|
</view>
|
</view>
|
</view>
|
<u-line color="#f1f1f1" margin="24rpx 0 15rpx 0"></u-line>
|
<view class="bottom">
|
<view class="bottom_left">
|
<text class="text-blue">干燥进度：</text>
|
<view class="progressBox">
|
<u-line-progress :percentage="res.progre" height="8" :active-color="activeColor"
|
:striped="true" :stripedActive="true"></u-line-progress>
|
</view>
|
</view>
|
|
<view class="btnBox">
|
|
<view @click="goCharts" class="evaluate btn">查看图表</view>
|
</view>
|
</view>
|
</view>
|
</view> -->
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
list: [{
|
thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
|
}, {
|
thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
|
}, {
|
thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
|
}, {
|
thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
|
}, {
|
thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
|
}],
|
StatusBar: this.StatusBar,
|
CustomBar: this.CustomBar,
|
percent: 50,
|
activeColor: '#0081ff',
|
signList: [{
|
date: "2023-03-13",
|
title: "龙须草",
|
info: ""
|
},
|
{
|
date: "2023-03-14",
|
title: "当归"
|
},
|
{
|
date: "2023-03-15",
|
title: "羊蹄根"
|
},
|
{
|
date: "2023-01-11",
|
title: "聚会"
|
},
|
{
|
date: "2022-12-23",
|
title: "郊游"
|
},
|
{
|
date: "2022-12-19",
|
title: "游玩"
|
}
|
],
|
dataList: [{
|
id: 'No20230314001',
|
store: '当归2023年3月3日',
|
progre: 100,
|
goodsUrl: 'https://p8.itc.cn/images01/20210913/136867c5b92a4ef7905e146060dc1b3d.jpeg',
|
title: '工单项目',
|
describe: '暂无描述',
|
time: '2021年10月18日'
|
},
|
{
|
id: 'No20230314002',
|
store: '当归2023年3月3日',
|
progre: 100,
|
goodsUrl: 'https://p8.itc.cn/images01/20210913/136867c5b92a4ef7905e146060dc1b3d.jpeg',
|
title: '工单项目',
|
describe: '暂无描述',
|
time: '2021年10月18日'
|
}
|
],
|
}
|
},
|
onShow() {
|
console.info('onShow')
|
},
|
methods: {
|
show(e) {
|
console.info(this.CustomBar)
|
|
},
|
goCharts(e) {
|
uni.navigateTo({
|
url: "/pages/charts/charts"
|
})
|
}
|
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.app {}
|
|
.custom-bar {
|
background-image: linear-gradient(to right, #0381FF, #0381FF);
|
color: white;
|
display: flex;
|
align-items: flex-end;
|
padding: 0 0 14rpx 20rpx;
|
width: 100%;
|
position: fixed;
|
overflow: hidden;
|
z-index: 999999;
|
|
}
|
|
.select-equ-box {
|
display: flex;
|
flex-direction: row;
|
}
|
|
.data-item {
|
image {
|
width: 140rpx;
|
height: 120rpx;
|
border-radius: 10rpx;
|
}
|
}
|
|
.card-box {
|
margin: 20rpx;
|
padding: 20rpx;
|
box-sizing: border-box;
|
background-color: white;
|
border-radius: 20rpx;
|
font-family: Helvetica Neue, Helvetica, sans-serif
|
}
|
|
.left {
|
display: flex;
|
align-items: center;
|
|
.title {
|
margin: 0 10rpx;
|
font-size: 34rpx;
|
font-weight: bold;
|
}
|
}
|
|
|
|
.order {
|
width: 710rpx;
|
background-color: #ffffff;
|
margin: 20rpx auto;
|
border-radius: 20rpx;
|
box-sizing: border-box;
|
padding: 20rpx;
|
font-size: 28rpx;
|
|
.top {
|
display: flex;
|
justify-content: space-between;
|
|
.left {
|
display: flex;
|
align-items: center;
|
|
.store {
|
margin: 0 10rpx;
|
font-size: 34rpx;
|
font-weight: bold;
|
}
|
}
|
|
.right {
|
color: #f29100;
|
|
.progressBox {
|
width: 150rpx;
|
float: right;
|
}
|
}
|
}
|
|
.item {
|
display: flex;
|
margin: 20rpx 0 0;
|
|
.left {
|
margin-right: 20rpx;
|
|
image {
|
width: 220rpx;
|
height: 190rpx;
|
border-radius: 10rpx;
|
}
|
}
|
|
.content {
|
display: flex;
|
flex-direction: row;
|
|
.title {
|
font-size: 28rpx;
|
line-height: 45rpx;
|
|
}
|
|
.type {
|
margin: 6rpx 0;
|
font-size: 24rpx;
|
color: #909399;
|
text-overflow: -o-ellipsis-lastline;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 3;
|
line-clamp: 3;
|
-webkit-box-orient: vertical;
|
}
|
|
.delivery-time {
|
color: #0081ff;
|
font-size: 24rpx;
|
}
|
}
|
|
.right {
|
margin-left: 10rpx;
|
padding-top: 20rpx;
|
text-align: right;
|
|
.decimal {
|
font-size: 24rpx;
|
margin-top: 4rpx;
|
}
|
}
|
}
|
|
.total {
|
margin-top: 20rpx;
|
text-align: right;
|
font-size: 24rpx;
|
|
.total-price {
|
font-size: 32rpx;
|
}
|
}
|
|
.bottom {
|
line-height: 70rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.bottom_left {
|
display: flex;
|
align-items: center;
|
|
.progressBox {
|
width: 150rpx;
|
float: right;
|
}
|
}
|
|
.btnBox {
|
width: 150rpx;
|
display: flex;
|
justify-content: space-between;
|
|
.btn {
|
line-height: 52rpx;
|
width: 140rpx;
|
border-radius: 12rpx;
|
border: 2rpx solid #909399;
|
font-size: 26rpx;
|
text-align: center;
|
color: #909399;
|
}
|
|
.evaluate {
|
color: #2979ff;
|
border-color: #2979ff;
|
}
|
}
|
}
|
}
|
|
.bxBox {
|
position: relative;
|
display: flex;
|
/* padding: 0 30rpx; */
|
min-height: 100rpx;
|
/* background-color: #ffffff; */
|
/* justify-content: space-between; */
|
align-items: center;
|
font-size: 30rpx;
|
line-height: 1.6em;
|
flex: 1;
|
|
.bxImg {
|
display: inline-block;
|
margin-right: 10rpx;
|
width: 1.6em;
|
text-align: center;
|
}
|
}
|
</style>
|
