quanyawei
2024-06-27 3db69ad0012032cf01c0911d2517135394ec9bea
pages/actionChange/components/basicInfor.vue
@@ -4,7 +4,15 @@
      <view class="workOrderDetail">
         <view class="headerCont">
            <p class="title">基本信息</p>
            <p>单号:{{ basicInfor.allocationNum }}</p>
            <view style="display: flex;align-items: center;">
               <p style="display: inline-block;padding-right: 10px;">单号:{{ basicInfor.allocationNum }}</p>
               <p class="sharebut">
                  <button open-type="share" class="shareAn">
                  </button>
                  <u-icon name="share-square" label='分享' labelPos="bottom" bold size='18' color="#efb287"
                     labelColor="#efb287"></u-icon>
               </p>
            </view>
         </view>
         <u-line color="#bbb" />
         <view>
@@ -12,9 +20,25 @@
               <p class="rowTip">
                  <view class="rowTipContenet">
                     <view class="wholeLine">
                        <text class="rowTipContenetLabel">上报时间:</text>
                        <text class="rowTipContenetAll">
                           {{ basicInfor.escalationTime ||'' }}
                        </text>
                     </view>
                  </view>
                  <view class="rowTipContenet">
                     <view class="wholeLine">
                        <text class="rowTipContenetLabel">上报人:</text>
                        <text class="rowTipContenetAll">{{ basicInfor.escalationName ||'' }}</text>
                     </view>
                  </view>
               </p>
               <p class="rowTip">
                  <view class="rowTipContenet">
                     <view class="wholeLine">
                        <text class="rowTipContenetLabel">责任主体:</text>
                        <text class="rowTipContenetAll">
                           {{ unitName }}
                           {{ basicInfor.unitName }}
                        </text>
                     </view>
                  </view>
@@ -22,7 +46,7 @@
                     <view class="wholeLine">
                        <text class="rowTipContenetLabel">污染分类:</text>
                        <text class="rowTipContenetAll">
                           {{ polluteType }}
                           {{ basicInfor.polluteTypeName }}
                        </text>
                     </view>
                  </view>
@@ -41,7 +65,8 @@
                     <view class="wholeLine">
                        <text class="rowTipContenetLabel">整改类型:</text>
                        <text class="rowTipContenetAll">
                           {{ dictObj.changeEnum[basicInfor.changeType] ||'' }}
                           <text>{{ dictObj.changeEnum[basicInfor.changeType]||'' }}</text>
                           <!-- <text>{{ basicInfor.residueDay||'' }}</text> -->
                        </text>
                     </view>
                  </view>
@@ -51,184 +76,209 @@
                     <view class="wholeLine">
                        <text class="rowTipContenetLabel">上报单位:</text>
                        <text class="rowTipContenetAll">
                           {{ escalationUnitName }}
                           {{ basicInfor.escalationUnitName }}
                        </text>
                     </view>
                  </view>
                  <view class="rowTipContenet">
                     <view class="wholeLine">
                        <text class="rowTipContenetLabel">上报人:</text>
                        <text class="rowTipContenetAll">{{ basicInfor.escalationName ||'' }}</text>
                     </view>
                  </view>
               </p>
               <p class="rowTip">
                  <view class="wholeLine">
                     <text class="rowTipContenetLabel">上报时间:</text>
                     <text class="rowTipContenetAll">{{ basicInfor.escalationTime ||'' }}</text>
                  </view>
               </p>
               <p class="rowTip">
                  <view class="wholeLine">
                     <text class="rowTipContenetLabel">污染位置:</text>
                     <text class="rowTipContenetAll">{{ basicInfor.pollutePosition ||'' }}</text>
                     <u-icon name="map" color="#2979ff" size="28" @tap="toNavigation()"
                        v-if="basicInfor.longitude !==null"></u-icon>
                  </view>
               </p>
               <p class="rowTip">
                  <view class="wholeLine">
                     <text class="rowTipContenetLabel">相关附件:</text>
                     <text v-if="fileList.length>0" class="rowTipContenetAll">
                        <cl-upload
                           v-model="fileList"
                           :action="`''`"
                           :add="false"
                           cloud-type="other"
                           :remove="false"
                        />
                     </text>
                  <view class="rowTipContenet" style="width: 100%;">
                     <view class="wholeLine">
                        <text class="rowTipContenetLabel">任务分类:</text>
                        <text class="rowTipContenetAll">
                           <text>{{ dictObj.emphasisEnum[basicInfor.keyPoint]||'' }}</text>
                        </text>
                     </view>
                  </view>
               </p>
               <p class="rowTip">
                  <view class="rowTipContenet" style="width: 100%;">
                     <view class="wholeLine">
                        <text class="rowTipContenetLabel">问题描述:</text>
                        <text class="rowTipContenetAll" style="white-space: break-spaces;">
                           {{ basicInfor.problemDescribe }}
                        </text>
                     </view>
                  </view>
               </p>
               <view class="formItemContent">
                  <u--form labelPosition="left" label-width="75" :border-bottom="false" ref="uForm">
                     <u-form-item border-bottom label="相关附件:" :border-bottom="false">
                        <view class="fileBox">
                           <cl-upload v-if="fileList.length>0" v-model="fileList" :add="false" :action="`''`"
                              cloud-type="other" :remove="false" />
                        </view>
                     </u-form-item>
                  </u--form>
               </view>
            </view>
         </view>
      </view>
   </view>
</template>
<script>
export default {
   props: {
    basicInfor: {
     type: Object,
     default: ()=> {}
      },
   },
   data() {
      return {
         polluteList: this.$storage.getJson('polluteList'),
         unitList: this.$storage.getJson('unitList'),
         dictObj: this.$storage.getJson('dictObj'),
         fileList: [],
         baseUrl: this.$storage.get('baseUrl'),
      }
   },
   computed: {
      unitName(){
         let data ={}
         if(this.basicInfor.unitId){
            data=this.unitList&& this.unitList.find(
               (a)=> parseInt(a.unitId) === this.basicInfor.unitId
            )
            console.log('nnnnnn', this.unitList)
            console.log('nnnnnn', this.basicInfor.unitId)
         }
         return data.unitName || ''
      },
      escalationUnitName(){
         let data ={}
         if(this.basicInfor.unitId){
            data=this.unitList&& this.unitList.find(
               (a)=> parseInt(a.unitId) === this.basicInfor.escalationUnitId
            )
            console.log('nnnnnn', this.unitList)
            console.log('nnnnnn', this.basicInfor.unitId)
         }
         return data.unitName || ''
      },
      polluteType(){
         let data ={}
         if(this.basicInfor.polluteType){
            data=this.polluteList.find(
               (a)=> parseInt(a.dataKey) === this.basicInfor.polluteType
            )
         }
         return data.dataValue ||''
      }
   },
   watch: {
      basicInfor: {
         handler: function(newValue, oldValue) {
            // 响应数据变化
            this.basicInfor=newValue
   export default {
      props: {
         basicInfor: {
            type: Object,
            default: () => {}
         },
         deep: true
      }
   },
   onLoad: function (option) {
      //option为object类型,会序列化上个页面传递的参数
      console.log(option) //打印出上个页面传递的参数。
   },
   mounted() {
      if(this.basicInfor.fileBaseList&&this.basicInfor.fileBaseList.length>0){
         this.basicInfor.fileBaseList.forEach(item=> {
            this.baseUrl='http://120.26.43.34:8081/api/'
            let name = item.fileType === 1 ? 'name.png' : ''
            this.fileList.push(`${this.baseUrl}/file/preview/${item.fileId}?${name}`) // 原图
            this.fileList.push('http://120.26.43.34:8081/api//file/preview/145?name.png') // 原图
         })
         console.log('this.fileList', this.basicInfor.fileBaseList)
         console.log('this.fileList', this.fileList)
      }
   },
   methods: {},
}
      },
      data() {
         return {
            polluteList: [],
            unitList: [],
            dictObj: JSON.parse(uni.getStorageSync('dictObj') || '[]'),
            fileList: [],
            baseUrl: this.$storage.get('baseUrl'),
         }
      },
      computed: {},
      watch: {
         basicInfor: {
            handler: function(newValue, oldValue) {
               // 响应数据变化
               this.basicInfor = newValue
            },
            deep: true
         }
      },
      onLoad: function(option) {
         //option为object类型,会序列化上个页面传递的参数
         console.log(option) //打印出上个页面传递的参数。
      },
      created() {
         this.getUnitList()
      },
      mounted() {
         // 获取责任单位list
         console.log('this.basicInfor.fileBaseList', this.basicInfor.fileBaseList)
         if (this.basicInfor.fileBaseList && this.basicInfor.fileBaseList.length > 0) {
            this.basicInfor.fileBaseList.forEach(item => {
               let name = item.fileType === 1 ? 'name.png' : ''
               this.fileList.push(`${this.baseUrl}/file/preview/${item.fileId}?${name}`) // 原图
            })
            console.log('this.basicInfor.fileList', this.basicInfor.fileBaseList)
            console.log('this.fileList', this.fileList)
         }
      },
      methods: {
         //导航--传终点的坐标即可
         toNavigation: function() {
            //根据终点地址调起地图导航
            uni.openLocation({
               longitude: parseFloat(this.basicInfor.longitude), // 经度,范围为-180~180,负数表示西经
               latitude: parseFloat(this.basicInfor.latitude), // 纬度,范围为-90~90,负数表示南纬
               scale: 28, // 缩放比例
               name: this.basicInfor.name, //终点名称
               address: this.basicInfor.address, //终点详细地址
               success: function(res) {
                  console.log('success:', res)
               }
            })
         },
         getUnitList() {
            this.$http.httpGet('/allocation/unit').then(res => {
               this.unitList = res.data
               this.getContaminateList()
            })
         },
         getContaminateList() {
            this.$http.httpGet('/allocation/contaminate').then(res => {
               this.polluteList = res.data
            })
         },
      },
   }
</script>
<style scoped lang="scss">
/deep/.u-line {
  margin: 19.23rpx 0px !important;
}
.workOrderDetail {
  border: 1px solid #bbb;
  border-radius: 5px;
  min-height: 288.46rpx;
  margin: 19.23rpx;
  padding: 19.23rpx;
  color: #101010;
  font-weight: 700;
  font-size: 26.92rpx;
  .headerCont {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
  }
  .mainContent {
    margin-bottom: 10px;
    font-weight: 500;
    .rowTip {
      display: flex;
      padding: 8px 0;
      border-bottom: 1px dashed #bbb;
      .wholeLine {
        display: flex;
      width: 100%;
        align-items: center;
        .rowTipContenetLabel {
          min-width: 125rpx;
        }
      .rowTipContenetAll{
         width: calc(100% - 125rpx);
      }
      }
   /deep/.u-line {
      margin: 19.23rpx 0px !important;
   }
      .rowTipContenet {
        width: 50%;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .butsName {
          display: inline-block;
          margin-left: 19.23rpx;
          color: #1990ff;
        }
      }
    }
    .rowTipContenet_right {
      text-align: right !important;
    }
  }
}
</style>
   .workOrderDetail {
      border: 1px solid #bbb;
      border-radius: 5px;
      min-height: 288.46rpx;
      margin: 19.23rpx;
      padding: 19.23rpx;
      color: #101010;
      font-weight: 700;
      font-size: 30.77rpx;
      .headerCont {
         display: flex;
         justify-content: space-between;
         font-size: 30.77rpx;
         align-items: center;
      }
      .mainContent {
         margin-bottom: 10px;
         font-weight: 500;
         .rowTip {
            display: flex;
            padding: 5px 0;
            border-bottom: 1px dashed #bbb;
            .wholeLine {
               display: flex;
               width: 100%;
               align-items: center;
               .rowTipContenetLabel {
                  min-width: 144.23rpx;
                  font-size: 28.85rpx;
                  text-align: left;
               }
               .rowTipContenetAll {
                  font-size: 28.85rpx;
                  width: calc(100% - 144.23rpx);
               }
            }
            .rowTipContenet {
               width: 50%;
               text-align: left;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
               .butsName {
                  display: inline-block;
                  margin-left: 19.23rpx;
                  color: #1990ff;
               }
            }
         }
         .rowTipContenet_right {
            text-align: right !important;
         }
      }
   }
   .sharebut {
      position: relative;
      display: inline-block;
      .shareAn {
         position: absolute;
         height: 36px;
         width: 30px;
         padding: 0;
         opacity: 0;
         z-index: 100;
      }
   }
</style>