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">
		    {{ company.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>
					<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 v-for="(item, idx) in itemList" :key="idx" class="term">
		    <view class="term-name">{{ item.name }}:</view>
		    <view class="term-value-group" >
		      <p  class="term-value-item">{{ item.value || "-" }}</p>
		    </view>
		</view>
		</view>
	</view>
</template>

<script>
	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月"],
				  "series": [
						{name: "本年度",data: [15,10,16,23,21,36,25,7,18,29,33,12]},
					]
			  },
			  itemList: [
			    {
			      name: "法定代表人",
			      value: '马须伦',
			    },
			    {
			      name: "成立日期",
			      value: '2017.11.14',
			    },
			    {
			      name: "注册资本",
			      value: '1,776,759.3',
			    },
			    {
			      name: "规上工业企业",
			      value: '是',
			    },
			    {
			      name: "先进制造业",
			      value: '否',
			    },
			    {
			      name: "亩均排序",
			      value: 'A',
			    },
			    {
			      name: "规上评定时间",
			      value: '2021.01.01',
			    },
			    {
			      name: "经营地址",
			      value: '万联大道以东,宣平大街以北',
			    },
			    {
			      name: "累计研发投入费用",
			      value: '-',
			    },
			    {
			      name: "本年度生产总值",
			      value: '-',
			    },
				{
				  name: "本年度工业产值增速",
				  value: '-',
				},
			  ],
		 }
	  },
	  onLoad(option) {
	  	console.log(option.id)
	  },
	  methods:{
		  bindDateChange(e){
			   this.dateYear = e.target.value
		  },
		  bindDateMonthChange(e){
			   this.dateMonth = this.arrayMonth[e.target.value]
		  },
	  }
	};
</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>