项目整体细节，新增主页煤仓剩余量图表。

付延余

2022-08-03 910f2ef56d0d49a4ce24b2f33860dce4d739b1b4

 pages/the-form-data/the-form-data.vue

@@ -1,7 +1,7 @@
<template>
   <!-- 表单数据 -->
   <view class="the-form-data">
      <view class="formData">
      <!-- <view class="formData">
         <view class="formData-row">
            <view class="formData-row_input">
               <text>字段标题</text>
@@ -48,10 +48,9 @@
               <u--textarea height="130" v-model="value1" placeholder="请输入内容" ></u--textarea>
            </view>
         </view>
      </view>
      <view class="dataTable">
      </view> -->
      <!-- <view class="dataTable">
         <uni-table border stripe emptyText="暂无更多数据">
            <!-- 表格数据行 -->
            <uni-tr>
               <uni-th align="center">字段标题</uni-th>
               <uni-th align="center">字段标题</uni-th>
@@ -77,7 +76,79 @@
               <uni-td align="center">字段标题</uni-td>
            </uni-tr>
         </uni-table>
      </view> -->
		
      <view class="formDataContaniner">
         <u--form labelPosition="left" :model="formData" ref="formRef">
            <u-form-item labelWidth="20%" label="结算客户"  ref="customerNameRef">
               <u--input v-model="formData.customerName" disabled disabledColor="#ffffff"></u--input>
            </u-form-item>
            <u-form-item labelWidth="20%" label="编号" >
               <u--input  disabled disabledColor="#ffffff" v-model="formData.number" placeholder="请输入编号"></u--input>
            </u-form-item>
            <u-form-item  labelWidth="20%" label="合同编号"  ref="contractNumRef">
               <u--input v-model="formData.contractNum" disabled disabledColor="#ffffff"></u--input>
            </u-form-item>
            <u-form-item labelWidth="20%" label="合同名称"  ref="contractNameRef">
               <u--input v-model="formData.contractName" disabled disabledColor="#ffffff" ></u--input>
            </u-form-item>
            <u-form-item labelWidth="20%" label="付款方式"  ref="payTypeRef">
               <u--input :value="formData.payType == 0? '现汇':'承兑'" disabled disabledColor="#ffffff" placeholder="请选择付款方式" ></u--input>
					
            </u-form-item>
            <u-form-item labelWidth="20%" label="日期"  ref="timeDataRef">
               <u--input :value="formData.createTime != null ?formData.createTime.slice(0,10):'暂无' + ' 至 ' + formData.endDate != null? formData.endDate:'暂无'" disabled disabledColor="#ffffff" placeholder="请选择范围日期"></u--input>
            </u-form-item>
				
         </u--form>
      </view>
		
      <view class="card">
         <view class="cardList" v-for="(item,index) in formData.contractOrders">
            <view class="cardList-container">
               <view class="cardList_item">
                  收货人：
                  <text>{{ item.customerName }}</text>
               </view>
               <view class="cardList_item">
                  <view class="">
                     矿厂：
                     <text>{{ item.filedName }}</text>
                  </view>
                  <view class="">
                     煤厂：
                     <text>{{ item.compName }}</text>
                  </view>
               </view>
			
               <view class="cardList_item">
                  <view class="">
                     品种：
                     <text>{{ item.coalName }}</text>
                  </view>
                  <view class="">
                     运输：
                     <text>{{ item.trainType == 1 ? '路运' : '地销' }}</text>
                  </view>
               </view>
               <view class="cardList_item">
                  <view class="">
                     单价：
                     <text>{{ item.price }}</text>
                  </view>
                  <view class="">
                     订单金额：
                     <text>{{ item.amount }}</text>
                  </view>
                  <!-- <view class="">
                           订单数量：<text>218.899</text>
                        </view> -->
               </view>
            </view>
         </view>
      </view>
		
		
      
      <!-- 菜单栏 -->
      <popup-menu @menuShow="menushow" ref="menuRef"></popup-menu>
@@ -96,6 +167,8 @@
               name: ''
            }
         },
         formData:{},
         applicationId:0,
         menuShow:false
      };
   },
@@ -103,6 +176,10 @@
      if(this.menuShow == true){
         this.$refs.menuRef.menuClick()
      }
      this.init();
   },
   onLoad(options){
      this.applicationId = JSON.parse(options.index); // 字符串转对象
   },
   // 点击导航栏菜单后
   onNavigationBarButtonTap(e) {
@@ -113,6 +190,21 @@
      popupMenu
   },
   methods:{
      init(){
         this.requestFormData();
      },
      requestFormData(){
         uni.showLoading({
            title:'加载中...'
         })
         this.$reqGet('formData',{},this.applicationId).then(res=>{
            console.log('表单',res);
            uni.hideLoading();
            if(res.code == 0){
               this.formData = res.data
            }
         })
      },
      menushow(e){
         this.menuShow = e
      }
@@ -121,55 +213,55 @@
</script>

<style lang="scss" scoped>
.the-form-data {
::v-deep.the-form-data {
   // 表单
   .formData{
      width:91%;
      margin:vww(16) auto 0;
      .formData-row{
         margin-top:vww(16);
         display:flex;
         justify-content: space-between;
         .formData-row_input{
            width:47%;
            .u-input{
               margin-top:vww(10);
            }
            text{
               font-size:vww(13);
            }
         }
         .formData-row_textarea{
            width:100%;
            .u-textarea{
               margin-top:vww(10);
            }
            text{
               font-size: vww(13);
            }
         }
      }
   }
   // .formData{
   //    width:91%;
   //    margin:vww(16) auto 0;
   //    .formData-row{
   //       margin-top:vww(16);
   //       display:flex;
   //       justify-content: space-between;
   //       .formData-row_input{
   //          width:47%;
   //          .u-input{
   //             margin-top:vww(10);
   //          }
   //          text{
   //             font-size:vww(13);
   //          }
   //       }
   //       .formData-row_textarea{
   //          width:100%;
   //          .u-textarea{
   //             margin-top:vww(10);
   //          }
   //          text{
   //             font-size: vww(13);
   //          }
   //       }
   //    }
   // }
   // 表格
   .dataTable{
      width:91%;
      margin:vww(48) auto 0;
      .uni-table{
         .uni-table-tr{
            .uni-table-th{
               background-color: #F5F5F5;
               font-size:vww(13);
               color:#111111;
               font-weight: 500;
            }
            .uni-table-td{
               background-color: #FFFFFF;
               font-size:vww(13);
               color:#111111;
            }
         }
      }
   }
   // .dataTable{
   //    width:91%;
   //    margin:vww(48) auto 0;
   //    .uni-table{
   //       .uni-table-tr{
   //          .uni-table-th{
   //             background-color: #F5F5F5;
   //             font-size:vww(13);
   //             color:#111111;
   //             font-weight: 500;
   //          }
   //          .uni-table-td{
   //             background-color: #FFFFFF;
   //             font-size:vww(13);
   //             color:#111111;
   //          }
   //       }
   //    }
   // }
   
   
   
@@ -203,5 +295,56 @@
   // }
   
   
	
	
   .formDataContaniner {
      .u-form {
         width: 91%;
         margin: 0 auto 0;
         .u-form-item {
            .u-form-item__body {
               .u-form-item__body__left {
                  .u-form-item__body__left__content {
                     .u-form-item__body__left__content__label {
                     }
                  }
               }
               .u-form-item__body__right {
                  .u-form-item__body__right__content {
                     .u-form-item__body__right__content__slot {
                     }
                  }
               }
            }
         }
      }
   }
	
   .card{
      width:91%;
      margin:0 auto;
      .cardList {
         height: vww(130);
         border-radius: vww(4);
         padding: vww(10);
         box-shadow: 0 2px 16px #e5e5e5, 0 0 1px #e5e5e5, 0 0 1px #e5e5e5;
         margin-top: vww(10);
         .cardList-container {
            .cardList_item {
               margin-top: vww(12);
               font-size: 14px;
               display: flex;
               view {
                  width: 50%;
                  &:nth-child(2) {
                     margin-left: vww(20);
                  }
               }
            }
         }
      }
   }
	
	
}
</style>