修改首页草药名称过长UI错乱问题

朱桂飞

2023-04-11 e86013cd8d4b88ca916067b01eeb452401b38c7b

 pages/tabBar/general.vue

@@ -1,21 +1,21 @@
<template>

   <view class="app">

   <!--    <view class="cu-custom custom-bar" :style="[{height:CustomBar + 'px'}]">

      <!--    <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>

       <view class="blank" :style="[{height:CustomBar + 'px'}]">

       </view>

		 
       -->

      <cu-custom bgColor="bg-gradual-blue" :isBack="false">

         <block slot="content">干燥设备监控系统</block>

      </cu-custom>

      <u-toast ref="uToast"></u-toast>

      <!--       <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>

@@ -70,61 +70,78 @@
      </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 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">{{model.date}}</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>
					 
                  <text class="text-df">烘干数量</text>

                  <text class="text-bold text-sl margin-top-xs text-cyan margin-top-sm">{{showValue(model.feed)}}

                     <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>

                           <text class="margin-lr-xs">{{showValue(model.group)}}</text>

                           <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>

                           <text class="margin-lr-xs">{{showValue(model.batch)}}</text>

                           <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>

                           <text class="margin-lr-xs">{{showValue(model.weight)}}</text>

                           <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>

                           <text class="margin-lr-xs">{{showValue(model.dryTime)}}</text>

                           <text class="text-gray text-xs">min</text>

                        </text>

                     </view>



                  </view>



               </view>



            </view>

            <view  class="margin-top">
                 <u-scroll-list>
					          
                 </u-scroll-list>
					
            <view class="margin-top">

               <u-scroll-list>



               </u-scroll-list>



            </view>



         </view>

@@ -141,7 +158,8 @@
            </view>

         </view>



         <lunc-calendar :showShrink="true" shrinkState="week" :signList="signList"></lunc-calendar>

         <lunc-calendar ref="calendar" @dayChange="dayChange" weekType="星期" @monthChange="monthChange"

            :showShrink="true" shrinkState="week" :signList="monthList"></lunc-calendar>

      </view>





@@ -154,21 +172,24 @@
            </view>

         </view>



         <view class="data-item" v-for="(res, index) in dataList" :key="res.id" style="padding: 0 10rpx;">

         <view class="data-item" v-for="(item, index) in herbList" :key="item.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>

                  <text>当归</text>

                  <view class="margin-lr-sm">

                  <text @click="showLongName(showValue(item.herbName))" class="text-cut flex-twice">{{showValue(item.herbName)}}</text>

                  <!-- <view class="margin-lr-sm">

                     <u-tag text="报警一次" plain size="mini" type="warning"></u-tag>

                  </view> -->

                  <view class="margin-lr-sm">

                     <u-tag text="正常" plain size="mini" type="success"></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>

                     <u-line-progress :percentage="calcProgress(item.dryTime,item.et)"

                        height="10"></u-line-progress>

                  </view>

               </view>

            </view>

@@ -180,31 +201,33 @@


               <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>

                     <text class="text-xxl text-green">{{showValue(item.target)}}%</text>

                     <text

                        class="text-xs margin-top-xs text-grey margin-left-xs text-line-through">{{showValue(item.initial)}}%</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>

                     <text class="text-xxl">{{showValue(item.yield )}}kg</text>

                     <text

                        class="text-xs margin-top-xs text-grey margin-left-xs text-line-through">{{showValue(item.originWeight)}}kg</text>

                  </view>



                  <view class="text-xs margin-top-xs text-grey">

                     <text>16框</text>

                     <text>{{showValue(item.feed)}}筐</text>

                     <text style="margin: 0 10rpx;"> l </text>

                     <text>70℃</text>

                     <text>{{showValue(item.windTemp)}}℃</text>

                     <text style="margin: 0 10rpx;"> l </text>

                     <text>100min</text>

                     <text>{{showValue(item.dryTime)}}min</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>

               <text>{{showValue(item.code)}}</text>

               <text>{{showValue(item.orderTime)}}</text>

            </view>

            <u-line color="#f1f1f1" margin="15rpx 0 15rpx 0"></u-line>

         </view>

@@ -259,22 +282,23 @@
<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"
                            }],

         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',

            monthList: [],

            signList: [{

                  date: "2023-03-13",

                  title: "龙须草",

@@ -320,12 +344,54 @@
                  time: '2021年10月18日'

               }

            ],

            model: {

               date: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),

            },

            herbList: []

         }

      },

      onShow() {

         console.info('onShow')





      },

      methods: {

      onReady() {

         let month = uni.$u.timeFormat(new Date(), 'yyyy-mm')

         this.getMonth(month)



         let day = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd')

         this.getOrderList(day, day)



      },

      methods: {
         showLongName(longName){
               this.$refs.uToast.show({
                  type: 'default',
                  message: longName
               })
				
         },

         dayChange(dayInfo) { // 点击日期

            this.model.date = dayInfo.date

            console.log("点击日期", JSON.parse(JSON.stringify(dayInfo)));

            this.getOrderList(dayInfo.date, dayInfo.date);

         },

         monthChange(monthInfo) { // 切换月份

            console.log("切换月份", JSON.parse(JSON.stringify(monthInfo)));

            let m = monthInfo.month

            if (m < 10) {

               m = '0' + m

            }

            let month = monthInfo.year + '-' + m

            console.info(month)

            this.getMonth(month)

         },

         showValue(value) {

            if (value == null) {

               return "--"

            }

            return value

         },

         show(e) {

            console.info(this.CustomBar)



@@ -334,7 +400,97 @@
            uni.navigateTo({

               url: "/pages/charts/charts"

            })

         },

         getOrderList(date1, date2) {

            let params = {

               "orderTime_begin": date1 + " 00:00:00",

               "orderTime_end": date2 + " 23:59:59",

            }

            this.$api.getOrderList(params).then((res) => {

               if (res.success) {

                  this.herbList = res.result.records



                  let feed = this.countTotal(this.herbList, "feed");

                  let weight = this.countTotal(this.herbList, "originWeight");

                  let dryTime = this.countTotal(this.herbList, "dryTime");



                  let gList = [];

                  this.herbList.forEach(item => {

                     if (!gList.includes(item.herbName)) {

                        gList.push(item.herbName)

                     }

                  });



                  if (weight) {

                     weight = weight.toFixed(1)

                  }

                  this.model.feed = feed

                  this.model.group = gList.length

                  this.model.batch = this.herbList.length

                  this.model.weight = weight

                  this.model.dryTime = dryTime



                  console.info(this.model)

               }

            })

         },

         getMonth(month) {

            let params = {

               month: month

            }

            this.$api.getMonth(params).then((res) => {

               if (res.success) {

                  let list = res.result || []

                  list = list.map(item => {

                     let rec = {}

                     rec.date = item;

                     rec.title = "生产";

                     rec.info = "";



                     return rec

                  })

                  this.monthList = [...this.monthList, ...list]

                  this.$refs.calendar.addSignList(this.monthList);



                  if (res.result && res.result.length > 0) {

                     let date = res.result[0]

                     let array = date.split('-')

                     if (array && array.length == 3) {

                        this.$refs.calendar.clickDay({

                           "day": parseInt(array[2]),

                           "month": parseInt(array[1]),

                           "year": parseInt(array[0])

                        })

                     }



                  }







               }



            })

         },

         //计算预测进度

         calcProgress(dryTime, et) {

            if (dryTime && et) {

               let res = dryTime / et * 100

               res = res.toFixed(2)

               return res

            }

            return 0;



         },

         //计算对象数组中某个属性合计

         countTotal(arr, keyName) {

            let $total = 0;

            $total = arr.reduce(function(total, currentValue, currentIndex, arr) {

               return currentValue[keyName] ? (total + currentValue[keyName]) : total;

            }, 0);

            return $total;

         }







      }



@@ -549,4 +705,4 @@
         text-align: center;

      }

   }

</style>
</style>