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

<template>
	<view class="content-box">
		<view class="title">
		  <view class="logo">
		    <!-- <image :src="globalUrl + company.pic_url" alt="" class="logo-img" mode="aspectFit"/> -->
			<image src="/static/nodata.svg" alt="" class="logo-img" mode="aspectFit"/>
		  </view>
		  <view class="name">
		    {{ itemObj.name || '-'}}
		  </view>
		</view>
		<view class="uni-list title-date-box">
			<view class="uni-list-cell">
				<view class="uni-list-cell-db display-flex-start">
					<picker mode="date" fields="year"  @change="bindDateChange" class="picker-class">
						<view class="uni-input display-between items-center">{{dateYear}}年<image src="/static/arrow_down.svg" mode="aspectFit"></image></view>
					</picker>
					<view style="font-size: 26rpx;margin-left: 20rpx;">1月~  </view>
					<picker :range="arrayMonth" :value="dateMonth"  @change="bindDateMonthChange" class="picker-class">
						<view class="uni-input display-between items-center" style="color: #707070;">{{dateMonth}}月<image src="/static/calendar_icon.svg" mode="aspectFit"></image></view>
					</picker>
				</view>
			</view>
		</view>
		<qiun-title-bar title="工业产值(亿元)"/>
		<view class="charts-box">
		    <qiun-data-charts  type="line"  :chartData="chartData" background="#4C4C4C"/>
		</view>
		
		<view class="item-list">
		     <view class="term">
				<view class="term-name">法定代表人:</view>
				<view class="term-value-group">
				  <p  class="term-value-item">{{ itemObj.representative || "-" }}</p>
				</view>
		      </view>
		 <view class="term">
				<view class="term-name">成立日期:</view>
				<view class="term-value-group">
				  <p  class="term-value-item">{{ itemObj.found_date || "-" }}</p>
				</view>
		  </view>
			<view class="term">
					<view class="term-name">注册资本:</view>
					<view class="term-value-group">
					  <p  class="term-value-item">{{ itemObj.capital || "-" }}</p>
					</view>
			 </view>
			 <view class="term">
					<view class="term-name">规上工业企业:</view>
					<view class="term-value-group">
					  <p  class="term-value-item">{{ highType[itemObj.high_tech] || "-" }}</p>
					</view>
			  </view>
			<view class="term">
					<view class="term-name">先进制造业:</view>
					<view class="term-value-group">
					  <p  class="term-value-item">
					  {{ advancedType[itemObj.advanced] || "-" }}
					  </p>
					</view>
			 </view>
			 <view class="term">
					<view class="term-name">亩均排序:</view>
					<view class="term-value-group">
					  <p  class="term-value-item">{{ itemObj.aera_order || "-" }}</p>
					</view>
			  </view>
			 <view class="term">
					<view class="term-name">规上评定时间:</view>
					<view class="term-value-group">
					  <p  class="term-value-item">{{ itemObj.advanced_update_time || "-" }}</p>
					</view>
			  </view>
			<view class="term">
					<view class="term-name">经营地址:</view>
					<view class="term-value-group">
					  <p  class="term-value-item">{{ itemObj.rigiser_address || "-" }}</p>
					</view>
			 </view>
			 <view class="term">
					<view class="term-name">累计研发投入费用:</view>
					<view class="term-value-group">
					  <p  class="term-value-item">{{ itemObj.insure_count || "-" }}</p>
					</view>
			  </view>
			 <view class="term">
					<view class="term-name">本年度生产总值:</view>
					<view class="term-value-group">
					  <p  class="term-value-item">{{ itemObj.industry_money || "-" }}</p>
					</view>
			  </view>
			<view class="term">
				<view class="term-name">本年度工业产值增速:</view>
				<view class="term-value-group">
				  <p  class="term-value-item">{{ itemObj.increase_ratio || "-" }}</p>
				</view>
		 </view>
		</view>
	</view>
</template>

<script>
	import md5 from "@/common/md5.js";
	export default {
	  data() {
		  return{
			  dateYear:new Date().getFullYear(),
			  dateMonth:new Date().getMonth() + 1,
			  arrayMonth:["1", "2","3", "4","5", "6","7", "8","9", "10","11", "12"],
			  chartData:{
				 // "categories": ["1月", "2月","3月", "4月","5月", "6月","7月", "8月","9月", "10月","11月", "12月"],
				  "categories":[],
				  "series": [
						{name: "本年度",data: [],textSize:'10'},
					]
			  },
			  itemObj:{},
			  advancedType:{
					  '0':'是',
					  '1':'否'
			  },
			  highType:{
					  '0':'是',
					  '1':'否'
			  },
			  nowId:''
		 }
	  },
	  onLoad(option) {
		this.nowId = option.id;  
		this.getCompanyInfo(this.dateYear,this.dateMonth,option.id)
	  },
	  methods:{
		  bindDateChange(e){
			   this.dateYear = e.target.value
			   this.getCompanyInfo(this.dateYear,this.dateMonth,this.nowId)
		  },
		  bindDateMonthChange(e){
			   this.dateMonth = this.arrayMonth[e.target.value]
			   this.getCompanyInfo(this.dateYear,this.dateMonth,this.nowId)
		  },
		  getCompanyInfo(y,m,ids) {
		    let md5Sign = md5(
		      "method=" +
		        "stat" +
		        "&timestamp=" +
		        getApp().globalData.globalTimestamp +
		        "&secret=" +
		        getApp().globalData.secret
		    );
		    let url =
		      getApp().globalData.shareUrl +
		      "api/api.php" +
		      "?method=stat&action=company_by_id&timestamp=" +
		      getApp().globalData.globalTimestamp +
		      "&sign=" +
		      md5Sign;
		    let postData = {
				   year : y,
				   month: m,
				   id: ids
		    };
		    uni.request({
		      url: url,
		      method: "POST",
		      header: {
		        "content-type": "application/x-www-form-urlencoded",
		      },
		      data: postData,
		      success: (res) => {
		        if (res.data.code === 200) {
		           this.itemObj = res.data.data;
				   let chartList = res.data.data.month_list;
				   let chartCategories = [], chartData = [];
				   if(chartList.length){
					  chartList.forEach((item)=>{
						   chartCategories.push(item.month + '月')
						   chartData.push(item.balance)
					  }) 
					   this.chartData.categories = chartCategories;
					   this.chartData.series[0].data = chartData;
				   }
		        }
		      },
		      fail: () => {
		        console.log("连接失败");
		      },
		    });
		  },
	  }
	};
</script>

<style lang="scss">
	.content-box {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.charts-box-title{
		width: 100%;
		height: 100rpx;
	}
	.charts-box {
		width: 100%;
		height: 600rpx;
	}
	.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;
	}
	.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%;
	    }
	  }
	}
	.item-list {
	  margin-left: 20rpx;
	  display: flex;
	  flex-direction: column;
	  .term {
	    display: flex;
	    .term-name {
	      font-size: 28rpx;
	      width: 30%;
	      display: flex;
	      margin: 20rpx;
	      color: #7f7f7f;
	    }
	    .term-value-group {
	      flex: 1;
	      display: flex;
	      flex-direction: column;
	      font-size: 28rpx;
	      .term-value-item {
	        margin: 20rpx;
	      }
	      .flex_i {
	        display: flex;
	        flex-flow: row;
	        justify-content: space-around;
	      }
	    }
	  }
	}
</style>