hbsmUniapp/src/pagesCompany/pages/companyPortrait/index.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>