391 lines
10 KiB
Vue
391 lines
10 KiB
Vue
<template>
|
||
<view class="portrait-page" :style="backgroundStyle">
|
||
<view :style="topGradientStyle"></view>
|
||
<view class="portrait-page-contain">
|
||
<!-- 搜索 -->
|
||
<wd-search v-model="searchValue" :placeholder-left="placeholderLeft" cancel-txt="搜索" placeholder="请输入企业名称" />
|
||
<!--企业卡片 -->
|
||
<view class="portrait-card">
|
||
<view class="portrait-card-title">
|
||
<view class="portrait-card-title-circle"></view>
|
||
{{company.company_name}}
|
||
</view>
|
||
<view class="portrait-card-info">
|
||
<view class="portrait-card-info-item">
|
||
<view class="portrait-card-info-item-label">联系人：</view>
|
||
<view class="portrait-card-info-item-value">{{company.company_contact}}</view>
|
||
</view>
|
||
<view class="portrait-card-info-item">
|
||
<view class="portrait-card-info-item-label">联系电话：</view>
|
||
<view class="portrait-card-info-item-value">{{company.company_mobile}}</view>
|
||
</view>
|
||
<view class="portrait-card-info-item">
|
||
<view class="portrait-card-info-item-label">邮箱：</view>
|
||
<view class="portrait-card-info-item-value">{{company.company_email}}</view>
|
||
</view>
|
||
<view class="portrait-card-info-item">
|
||
<view class="portrait-card-info-item-label">地址：</view>
|
||
<view class="portrait-card-info-item-value">{{company.company_address}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- tab -->
|
||
<wd-tabs v-model="tabChange" @change="tabIndex">
|
||
<block v-for="(item,index) in tabList" :key="item">
|
||
<wd-tab :title="item">
|
||
<!-- 贸易数据 -->
|
||
<view class="content-trade" v-if="item=='贸易数据'">
|
||
<MarketTitle title='市场趋势分析'>
|
||
<view class="content-right">
|
||
<text>2025年</text>
|
||
<image :src="imgsUrl.lower_img"></image>
|
||
</view>
|
||
</MarketTitle>
|
||
<view class="content-trade-stat">
|
||
<view v-for="(item,index) in tradeData.market_analysis_board" :key="index"
|
||
@click="handleStatClick(index)" class="content-trade-stat-item"
|
||
:class="{ 'content-trade-stat-item-active': activeIndex === index }">
|
||
<text class="content-trade-stat-value">{{item.value}}</text>
|
||
<text class="content-trade-stat-label">{{item.name}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 图表 -->
|
||
<qiun-data-charts type="column" :opts="tradeOpts" :chartData="tradeCharts" class="trade-charts" />
|
||
<MarketTitle title='近三个月'></MarketTitle>
|
||
<wd-table :data="tradeDataList" :stripe="true" rowHeight="10" class="table">
|
||
<wd-table-col v-for="(column, index) in tableColumns" :key="index" :prop="column.prop"
|
||
:label="column.label" :width="index==0?100:80" align="center" ellipsis="true"></wd-table-col>
|
||
</wd-table>
|
||
</view>
|
||
<!-- 出口数据 -->
|
||
<view class="content-trade" v-if="item=='出口数据'">
|
||
<MarketTitle title='出口数据分析'>
|
||
<view class="content-right">
|
||
<wd-search v-model="exportSeach" :placeholder-left="placeholderLeft" cancel-txt=" "
|
||
placeholder="请搜索" />
|
||
</view>
|
||
</MarketTitle>
|
||
<block v-for="(item,index) in exportData" :key="index">
|
||
<DataCard :data="item"></DataCard>
|
||
</block>
|
||
|
||
</view>
|
||
</wd-tab>
|
||
</block>
|
||
</wd-tabs>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { useHomePage } from '@/composables/useHomePage'
|
||
import { postCompanyDataThirdDataViewApi, postDataViewExportApi } from '@/api/portrait'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import MarketTitle from './components/market-title.vue'
|
||
import DataCard from './components/data-card.vue'
|
||
const {
|
||
backgroundStyle,
|
||
topGradientStyle
|
||
} = useHomePage()
|
||
// 图片数据
|
||
const imgsUrl = ref({})
|
||
// 搜索值
|
||
const searchValue = ref('')
|
||
// tab选中
|
||
const tabChange = ref()
|
||
// tabl列表
|
||
const tabList = ref(["贸易数据", "出口数据", "贸易伙伴", "HS编码", "出口产品"])
|
||
// 请求参数
|
||
const params = {
|
||
page: 1,
|
||
page_size: 10
|
||
}
|
||
// 贸易数据
|
||
const tradeData = ref({})
|
||
// 企业信息
|
||
const company = ref({})
|
||
// 记录当前统计信息选中的索引（-1表示未选中）
|
||
const activeIndex = ref(-1);
|
||
// 贸易数据图表
|
||
const tradeCharts = ref({
|
||
categories: [],
|
||
series: []
|
||
})
|
||
// 市场趋势分析图表opt配置
|
||
const tradeOpts = ref({
|
||
color: ["#A2D2FF"],
|
||
padding: [15, 15, 0, 5],
|
||
dataLabel: false,//数据文案
|
||
legend: {
|
||
show: false
|
||
},
|
||
extra: {
|
||
column: {
|
||
type: "group",
|
||
width: 23,
|
||
activeBgColor: "#000000",
|
||
seriesGap: 5,
|
||
linearOpacity: 1,
|
||
barBorderCircle: true
|
||
},
|
||
|
||
},
|
||
yAxis: {
|
||
data: [
|
||
{
|
||
min: 0,
|
||
axisLine: false
|
||
}
|
||
]
|
||
}
|
||
})
|
||
// 近三月数据
|
||
const tradeDataList = ref([])
|
||
// 表格列配置
|
||
const tableColumns = ref([])
|
||
// 出口数据搜索
|
||
const exportSeach = ref('')
|
||
// 出口数据内容
|
||
const exportData = ref({})
|
||
// 搜索框设置
|
||
const placeholderLeft = ref(true)
|
||
onLoad(() => {
|
||
getCompanyDataThirdDataView()
|
||
getDataViewExport()
|
||
})
|
||
// tab函数
|
||
const tabIndex = (index) => {
|
||
if (index == 1) {
|
||
getDataViewExport()
|
||
}
|
||
}
|
||
// 企业画像
|
||
const getCompanyDataThirdDataView = () => {
|
||
postCompanyDataThirdDataViewApi(params).then(res => {
|
||
if (res.code == 1) {
|
||
tradeData.value = res.data
|
||
// 图片数据
|
||
imgsUrl.value = res.data.other
|
||
// 市场趋势数据处理
|
||
company.value = res.data.company
|
||
tradeCharts.value.categories = res.data.market_analysis_charts.name
|
||
let charts = res.data.market_analysis_charts.charts
|
||
let chartsObj = {
|
||
name: res.data.market_analysis_charts.title,
|
||
data: res.data.market_analysis_charts.value
|
||
}
|
||
tradeCharts.value.series[0] = chartsObj
|
||
// 近三月数据处理
|
||
let originalData = res.data.market_analysis_list
|
||
tradeDataList.value = originalData.list.map(item => {
|
||
return {
|
||
[originalData.name[0]]: item[0], // 最近日期
|
||
[originalData.name[1]]: item[1], // 交易次数
|
||
[originalData.name[2]]: item[2], // 交易笔数
|
||
[originalData.name[3]]: item[3] // 交易重量
|
||
};
|
||
})
|
||
extractTableColumns(tradeDataList.value)
|
||
}
|
||
})
|
||
}
|
||
// 点击统计信息
|
||
const handleStatClick = (index) => {
|
||
activeIndex.value = index;
|
||
}
|
||
// 提取表格列信息
|
||
const extractTableColumns = (data) => {
|
||
if (data.length > 0) {
|
||
// 获取第一个对象的所有键
|
||
const keys = Object.keys(data[0]);
|
||
// 转换为表格列配置
|
||
tableColumns.value = keys.map(key => ({
|
||
prop: key,
|
||
// 这里直接用键作为label，也可以根据需要进行格式化
|
||
label: key
|
||
}))
|
||
}
|
||
}
|
||
|
||
// 出口数据请求
|
||
const getDataViewExport = () => {
|
||
postDataViewExportApi(params).then(res => {
|
||
if (res.code == 1) {
|
||
exportData.value = res.data
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .portrait-page {
|
||
width: 100%;
|
||
position: relative;
|
||
min-height: 100vh;
|
||
overflow-y: hidden;
|
||
padding: 0 30rpx;
|
||
// 底部状态栏一般建议预留60rpx-100rpx，具体根据实际底部栏高度调整
|
||
padding-bottom: 60rpx;
|
||
background: #FFFFFF !important;
|
||
|
||
&-contain {
|
||
position: relative;
|
||
z-index: 1;
|
||
padding-top: 32rpx;
|
||
}
|
||
}
|
||
|
||
// 头部搜索框
|
||
.wd-search {
|
||
background-color: #E9F3FF;
|
||
height: 80rpx;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
::v-deep .wd-search__block {
|
||
background-color: #E9F3FF;
|
||
}
|
||
|
||
::v-deep .wd-search__cancel {
|
||
color: #0478F4;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
// 企业卡片
|
||
.portrait-card {
|
||
width: 100%;
|
||
height: 280rpx;
|
||
margin-top: 30rpx;
|
||
background: linear-gradient(to bottom, #1975C3, #85BCFF);
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
color: #fff;
|
||
|
||
&-title {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
|
||
&-circle {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 50%;
|
||
margin-right: 10rpx;
|
||
|
||
}
|
||
}
|
||
|
||
&-info {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
padding-bottom: 30rpx;
|
||
|
||
&-item {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
margin-top: 10rpx;
|
||
|
||
&-label {
|
||
width: 120rpx;
|
||
}
|
||
|
||
&-value {
|
||
flex: 1;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .is-active {
|
||
color: #0478F4;
|
||
}
|
||
|
||
.content-right {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
|
||
image {
|
||
width: 15rpx;
|
||
height: 13rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.wd-search {
|
||
width: 400rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
::v-deep .wd-search__cover {
|
||
background: none;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
::v-deep .wd-search__input {
|
||
height: 20rpx;
|
||
}
|
||
}
|
||
|
||
.content-trade {
|
||
&-stat {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 30rpx 0;
|
||
|
||
&-item {
|
||
width: 200rpx;
|
||
height: 100rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
background-color: #EEEEEE;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
&-item-active {
|
||
background-color: #B9C3FF;
|
||
color: #1159C0;
|
||
border: 1px solid #1159C0;
|
||
}
|
||
|
||
&-value {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.trade-charts {
|
||
height: 360rpx;
|
||
}
|
||
|
||
::v-deep .is-border {
|
||
border-right: none !important;
|
||
}
|
||
|
||
::v-deep .wd-table__cell {
|
||
background-color: #F8F8F8 !important;
|
||
min-height: 80rpx !important;
|
||
}
|
||
|
||
::v-deep .is-stripe {
|
||
background-color: #CCE6FF !important;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
margin-top: 30rpx;
|
||
}
|
||
</style>
|