konggang-city-miniprogram/pages/metrics/largeScale/index.vue

<template>
	<view class="content-box">
		
		<view class="uni-list title-date-box" style="border: none;">
			<view class="uni-list-cell">
				<view class="uni-list-cell-db display-flex-start" style="padding-left: 10rpx;">
					<picker :range="arraySort" :value="sortSelect"  @change="bindSortChange" class="picker-class" style="width: 35%;">
						<view class="uni-input display-between items-center" style="color: #707070;">{{sortSelect}}<image src="/static/arrow_down.svg" mode="aspectFit"></image></view>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="companys">
		  <!-- <view>推荐企业</view> -->
		  <view  v-for="(company, index) in companyList" :key="index" @click="toDetail(company.id)" class="company">
			<image src="/static/selfCenter/add-icon.png" mode="aspectFit" class="addIcon" v-if="company.is_new"></image>
		    <view class="title">
		      <view class="logo">
		        <image v-if="company.logo" :src="globalUrl + company.logo" alt="" class="logo-img" mode="aspectFit"/>
				<image v-else src="/static/nodata.svg" alt="" class="logo-img" mode="aspectFit"/>
		      </view>
		      <view class="name display-around-column" style="align-items: flex-start;width:65%">
		         <view>{{ company.name || '-'}}</view>
				 <view class="isAdvanced" v-show="company.advanced && company.advanced !== '0'">先进制造业</view>
		      </view>
		    </view>
		    <view class="info">
		      <view class="view">
		        <view class="info_t">亩均排序</view>
		        <view class="name">
		          {{ company.aera_order || '-'}}
		        </view>
		      </view>
		      <view class="line"></view>
		      <view class="view">
		        <view class="info_t">总产值</view>
		        {{ company.total_balance}}(亿元)
			<!-- 	 <text v-if="company.capital_type == '1'">美元</text>
				 <text v-else>人民币</text> -->
		      </view>
		      <view class="line"></view>
		      <view class="view">
		        <view class="info_t">产值增速</view>
		        {{ company.total_ratio}}
		      </view>
		    </view>
		  </view>
		</view>
		
		
		
	</view>
</template>

<script>
	import md5 from "@/common/md5.js";
	export default {
	  data() {
		  return{
			  arraySort:['全部','一至当月产值','当月产值','一至当月产值增速','当月产值增速','亩均排序'],
			  sortSelect:'一至当月产值',
			  companyList: [],
			  globalUrl:getApp().globalData.shareUrl,
			  yearVal:'',
			  monthVal:'',
			  titleVal:'',
			  techVal:''
		 }
	  },
	  onLoad(option) {
		uni.setNavigationBarTitle({
			title: option.title
		})
		this.yearVal = option.year;
		this.monthVal = option.month;
		this.titleVal = option.title;
		this.techVal  = option.tech;
		switch (option.title){
			case '规上工业企业':
			    this.getCompany(option.year,option.month,'total_balance desc')
				break;
	        case '先进制造业企业':
			    this.getAdvanced(option.year,option.month,'total_balance desc')
				break;
			case '科技创新企业':
			    this.getTech(option.year,option.month,'total_balance desc',option.tech)
				break;
		}
	  },
	  methods:{
		  bindSortChange(e){
			  let sortObj = {
				  '0' : '',
				  '1' : 'total_balance desc',
				  '2' : 'balance desc',
				  '3' : 'total_ratio desc',
				  '4' : 'ratio desc',
				  '5' : 'area',				  
			  }
			  this.sortSelect = this.arraySort[e.target.value];
			  switch (this.titleVal){
			  	case '规上工业企业':
			  	    this.getCompany(this.yearVal,this.monthVal,sortObj[e.target.value])
			  		break;
			      case '先进制造业企业':
			  	    this.getAdvanced(this.yearVal,this.monthVal,sortObj[e.target.value])
			  		break;
			  	case '科技创新企业':
			  	    this.getTech(this.yearVal,this.monthVal,sortObj[e.target.value],this.techVal)
			  		break;
			  }
		  },
		  toDetail(id){
			  uni.navigateTo({
			  	url:'./detail' + '?id=' + id + '&year=' + this.yearVal + '&month=' + this.monthVal
			  })
		  },
		  getCompany(y,m,sort) {
		    let md5Sign = md5(
		      "method=" +
		        "stat" +
		        "&timestamp=" +
		        getApp().globalData.globalTimestamp +
		        "&secret=" +
		        getApp().globalData.secret
		    );
		    let url =
		      getApp().globalData.shareUrl +
		      "api/api.php" +
		      "?method=stat&action=standard_company_list&timestamp=" +
		      getApp().globalData.globalTimestamp +
		      "&sign=" +
		      md5Sign;
		    let postData = {
				   year : y,
				   month: m,
				   order: sort
		    };
		    uni.request({
		      url: url,
		      method: "POST",
		      header: {
		        "content-type": "application/x-www-form-urlencoded",
		      },
		      data: postData,
		      success: (res) => {
		        if (res.data.code === 200) {
		          this.companyList = res.data.data;
				  if(sort === 'area'){
					 this.companyList.reverse(); 
				  }
		        }
		      },
		      fail: () => {
		        console.log("连接失败");
		      },
		    });
		  },
		  getAdvanced(y,m,sort) {
		    let md5Sign = md5(
		      "method=" +
		        "stat" +
		        "&timestamp=" +
		        getApp().globalData.globalTimestamp +
		        "&secret=" +
		        getApp().globalData.secret
		    );
		    let url =
		      getApp().globalData.shareUrl +
		      "api/api.php" +
		      "?method=stat&action=advanced_company_list&timestamp=" +
		      getApp().globalData.globalTimestamp +
		      "&sign=" +
		      md5Sign;
		    let postData = {
				   year : y,
				   month: m,
				   order:sort
		    };
		    uni.request({
		      url: url,
		      method: "POST",
		      header: {
		        "content-type": "application/x-www-form-urlencoded",
		      },
		      data: postData,
		      success: (res) => {
		        if (res.data.code === 200) {
		          this.companyList = res.data.data;
		        }
		      },
		      fail: () => {
		        console.log("连接失败");
		      },
		    });
		  },
		  getTech(y,m,sort,techType) {
		    let md5Sign = md5(
		      "method=" +
		        "stat" +
		        "&timestamp=" +
		        getApp().globalData.globalTimestamp +
		        "&secret=" +
		        getApp().globalData.secret
		    );
		    let url =
		      getApp().globalData.shareUrl +
		      "api/api.php" +
		      "?method=stat&action=tech_company_list&timestamp=" +
		      getApp().globalData.globalTimestamp +
		      "&sign=" +
		      md5Sign;
		    let postData = {
				   year : y,
				   month: m,
				   order: sort,
				   item :techType
		    };
		    uni.request({
		      url: url,
		      method: "POST",
		      header: {
		        "content-type": "application/x-www-form-urlencoded",
		      },
		      data: postData,
		      success: (res) => {
		        if (res.data.code === 200) {
		          this.companyList = res.data.data;
		        }
		      },
		      fail: () => {
		        console.log("连接失败");
		      },
		    });
		  },
	  }
	};
</script>

<style lang="scss">
	.content-box {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.title-date-box {
		margin-top: 10px;
		border-bottom: 1px solid #d7d7d7;
		padding-bottom: 10px;
	}
	.picker-class {
		border-radius: 10rpx;
		padding: 10rpx;
		width: 180rpx;
		font-size: 28rpx;
		background: #f5f5f5;
		margin-left: 20rpx;
	}
	.picker-class image {
		width: 26rpx;
		height: 26rpx;
	}
	.isAdvanced {
		background-color: #F59A23;
		color: #fff;
		padding: 5rpx;
		font-size: 26rpx;
		border-radius: 5rpx;
		margin-top: 8rpx;
	}
	.companys {
	  // margin-top: 3%;
	  padding: 0 4%;
	  .company {
	    border-radius: 20rpx;
	    box-shadow: rgba(0, 0, 0, 0.35) 0rpx 5rpx 15rpx;
	    padding: 2%;
	    margin: 3% 0;
		position: relative;
		.addIcon{
			 width: 60rpx;
			 height: 60rpx;
			 position: absolute;
			 right: 20rpx;
		 }
	    .title {
	      display: flex;
	      align-items: center;
	      .logo {
	        margin-right: 30rpx;
	        display: flex;
	        justify-content: center;
	        align-items: center;
	        overflow: hidden;
	        width: 150rpx;
	        height: 100rpx;
	        overflow: hidden;
	        .logo-img {
	          max-width: 100%;
	          max-height: 100%;
	        }
	      }
	    }
	    .line {
	      width: 2rpx;
	      height: 70rpx;
	      background: rgb(175, 186, 197);
	    }
	    .info {
	      font-size: 24rpx;
	      font-weight: 100;
	      display: flex;
	      text-align: center;
	      justify-content: space-around;
	      align-items: center;
	      padding: 0 2%;
	      margin-top: 2%;
	      .view {
	        margin-top: 2%;
	        font-size: 26rpx;
	        // .name {
	        //   color: #02a7f0;
	        // }
	        .info_t {
	          margin-bottom: 10rpx;
	        }
	      }
	    }
	  }
	}
</style>