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

朱桂飞

2023-04-11 e86013cd8d4b88ca916067b01eeb452401b38c7b

 pages/tabBar/general.vue

@@ -14,7 +14,7 @@
      <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">

@@ -88,21 +88,27 @@
            <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">{{showValue(model.feed)}} <text

                        class="text-gray text-sm margin-left-xs">筐</text></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> {{showValue(model.group)}} <text

                              class="text-gray text-xs"></text></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> {{showValue(model.batch)}} <text

                              class="text-gray text-xs"></text></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>



@@ -110,14 +116,20 @@
                  <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> {{showValue(model.weight)}} <text

                              class="text-gray text-xs">kg</text></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> {{showValue(model.dryTime)}} <text

                              class="text-gray text-xs">min</text></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>

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

         </view>



         <lunc-calendar ref="calendar" @dayChange="dayChange" weekType="星期" @monthChange="monthChange" :showShrink="true" shrinkState="week" :signList="monthList"></lunc-calendar>

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

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

      </view>





@@ -164,18 +177,19 @@
               <view class="flex">

                  <text>中草药</text>

                  <text>丨</text>

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

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

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

                  <u-tag  text="正常" plain size="mini" type="success"></u-tag>
                     <u-tag text="正常" plain size="mini" type="success"></u-tag>

                  </view>

               </view>

               <view style="width:160rpx;" class="flex align-center text-xs ">

                  <text>进度:</text>

                  <view style="width: 100rpx;">

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

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

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

                  </view>

               </view>

            </view>

@@ -188,7 +202,8 @@
               <view class="flex flex-direction margin-left-xl margin-left-sm justify-center">

                  <view>

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

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

@@ -197,7 +212,7 @@
                  <view>

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

                     <text

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

@@ -282,8 +297,8 @@
            StatusBar: this.StatusBar,

            CustomBar: this.CustomBar,

            percent: 50,

            activeColor: '#0081ff',
            monthList:[],

            activeColor: '#0081ff',

            monthList: [],

            signList: [{

                  date: "2023-03-13",

                  title: "龙须草",

@@ -329,46 +344,53 @@
                  time: '2021年10月18日'

               }

            ],

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

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

            },

            herbList: []

         }

      },

      onShow() {

         console.info('onShow')
			
			
      },
      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)
		
         console.info('onShow')





      },

      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: {
         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
         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)

@@ -379,87 +401,95 @@
               url: "/pages/charts/charts"

            })

         },

         getOrderList(date1,date2) {
            let params = {
               "orderTime_begin":date1 + " 00:00:00",
               "orderTime_end":date2 + " 23:59:59",
         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)
                     }
                  });
                  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)
                  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":array[2],"month":array[1],"year":array[0]})
                      }
					    	
                  }
						
						
						
               }
					
            })
          },
         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;
         }
			
         },

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

         countTotal(arr, keyName) {

            let $total = 0;

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

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

            }, 0);

            return $total;

         }







      }

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

      }

   }

</style>
</style>