lingji-work-fe/src/views/components/dataEngine/userPainPoints.vue

<template>
  <view>
    <topHeader ref="topHeaderRef" @search="search"></topHeader>

    <!-- 用户痛点观察 -->
    <Space
      direction="vertical"
      style="background-color: #fff; width: 100%; padding: 0 20px"
      class="bg-#fff rounded-8px  mb-24px"
    >
      <div class="title-row">
        <span class="title mr-4px">用户痛点观察</span>
        <Tooltip>
          <template #title
            >基于用户内容中的情绪分析与表达模式，提取反复出现的负面倾向主题，反映典型使用痛点。</template
          >
          <icon-question-circle size="16" class="!color-#737478" />
        </Tooltip>
      </div>
      <Table
        :dataSource="dataList"
        :pagination="false"
        :showSorterTooltip="false"
        @change="handleChange"
      >
        <Table.Column
          v-for="column in columns"
          :key="column.dataIndex"
          :title="column.title"
          :dataIndex="column.dataIndex"
          :width="column.width"
          :minWidth="column.minWidth"
          :sortable="column.sortable"
        >
          <template v-if="column.slotName === 'rank'" #customRender="{ record }">
            <img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
            <img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
            <img v-else-if="record.rank == 3" :src="topImages[2]" style="width: 25px; height: 17px" />
            <span v-else>{{ record.rank }}</span>
          </template>
          <template v-else-if="column.slotName === 'keywords'" #customRender="{ record }">
            <a-tag
              v-for="item in record.keywords"
              :key="item"
              class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px mr-5px"
              >{{ item }}</a-tag
            >
          </template>
          <template v-else-if="column.slotName === 'frequency'" #customRender="{ record }">
            <a-tag
              :class="`!rounded-2px !px-8px !py-1px !bg-${frequencyStatus[record.frequency].bgColor} !h-22px !color-${
                frequencyStatus[record.frequency].color
              }`"
              >{{ frequencyStatus[record.frequency].label }}</a-tag
            >
          </template>
          <template v-else-if="column.slotName === 'optional'" #customRender="{ record }">
            <Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
          </template>
        </Table.Column>
        <template #emptyText>
          <NoData />
        </template>
      </Table>
    </Space>

    <Modal
      v-model:open="visible"
      wrapClassName="user-pain-points-modal"
      centered
      unmountOnClose
      width="640px"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <template #title>
        <span style="text-align: left; width: 100%">用户痛点观察</span>
      </template>
      <div>
        <Space direction="vertical" style="font-size: 12px">
          <div class="mb-12px flex items-center">
            <p class="cts !mr-16px flex-shrink-0 w-60px">痛点</p>
            <span class="cts">{{ topicInfo.name }}</span>
          </div>
          <div class="mb-12px flex items-center">
            <p class="cts !mr-16px flex-shrink-0 w-60px">关键词</p>
            <a-tag
              v-for="item in topicInfo.keywords"
              :key="item"
              class="mr-8px py-10px px-8px rounded-4px bg-#F2F3F5 cts !h-24px"
              >{{ item }}</a-tag
            >
          </div>
          <div class="mb-12px flex items-center">
            <p class="cts !mr-16px flex-shrink-0 w-60px">频次</p>
            <a-tag
              :class="`!rounded-2px !px-8px !py-1px !bg-${
                frequencyStatus[topicInfo.frequency].bgColor
              } !h-22px !color-${frequencyStatus[topicInfo.frequency].color}`"
              >{{ frequencyStatus[topicInfo.frequency].label }}</a-tag
            >
          </div>
          <div class="mb-12px flex items-center">
            <p class="cts !mr-16px flex-shrink-0 w-60px">代表性发言</p>
            <span class="cts">{{ topicInfo.content }}</span>
          </div>
          <div class="flex items-start">
            <p class="cts !mr-16px flex-shrink-0 w-60px">原始来源</p>
            <div class="flex flex-col">
              <div v-for="item in topicInfo.user_pain_point_sources" :key="item" class="mb-18px flex items-center">
                <a-link style="background-color: initial" :href="item.link" target="_blank" class="!text-12px">{{
                  item.title
                }}</a-link>
                <img src="@/assets/img/hottranslation/xhs.png" width="16" height="16" />
              </div>
            </div>
          </div>
        </Space>
      </div>
      <template #footer>
        <Button size="large" @click="handleCancel">取消</Button>
        <Button type="primary" size="large" @click="handleOk"> 确定 </Button>
      </template>
    </Modal>
  </view>
</template>

<script setup>
import topHeader from './topHeader.vue';
import { Modal, Button, Tooltip, Space, Table } from 'ant-design-vue';
import { fetchUserPainPointsDetail, fetchUserPainPointsList } from '@/api/all/index';
import { ref, onMounted, computed } from 'vue';
import top1 from '@/assets/img/captcha/top1.svg';
import top2 from '@/assets/img/captcha/top2.svg';
import top3 from '@/assets/img/captcha/top3.svg';
const topImages = [top1, top2, top3];
const visible = ref(false);
const topicInfo = ref({});
const topHeaderRef = ref();
// 从topHeader获取统一的状态
const selectedIndustry = computed(() => topHeaderRef.value?.selectedIndustry);
const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCategory);
const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
const dataList = ref([]);
const frequencyStatus = {
  0: {
    label: '低频',
    color: '#1bae71',
    bgColor: '#ebf7f2',
  },
  1: {
    label: '中频',
    color: '#cc8b00',
    bgColor: '#fff5de',
  },
  2: {
    label: '高频',
    color: '#c53c27',
    bgColor: '#ffe7e4',
  },
};
const columns = [
  {
    title: '排名',
    dataIndex: 'rank',
    slotName: 'rank',
    width: 60,
    minWidth: 60,
  },
  {
    title: '痛点名称',
    dataIndex: 'name',
    width: 300,
    minWidth: 300,
  },
  {
    title: '关键词',
    dataIndex: 'keywords',
    slotName: 'keywords',
    width: 250,
    minWidth: 250,
  },
  {
    width: 180,
    minWidth: 180,
    title: '频次',
    dataIndex: 'frequency',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    slotName: 'frequency',
  },
  {
    title: '代表性发言',
    dataIndex: 'content',
    slotName: 'content',
    width: 320,
    minWidth: 320,
  },
  {
    title: '操作',
    slotName: 'optional',
    width: 120,
    minWidth: 120,
  },
];
// 详情
const gotoDetail = async (record) => {
  const res = await fetchUserPainPointsDetail(record.id);
  if (res.code == 200) {
    topicInfo.value = res.data;
    visible.value = true;
  }
};

const getUserPainPointsList = async () => {
  const params = {
    industry_id: selectedIndustry.value,
    time_dimension: selectedTimePeriod.value,
  };
  if (selectedIndustry.value == undefined) {
    return;
  }
  if (selectedSubCategory.value == undefined) {
    return;
  }
  if (selectedSubCategory.value != 0) {
    params['industry_id'] = selectedSubCategory.value;
  }
  const res = await fetchUserPainPointsList(params);
  if (res.code === 200) {
    dataList.value = res.data;
  }
};
// 弹窗的取消
const handleCancel = () => {
  visible.value = false;
};

// 弹窗的确定
const handleOk = () => {
  visible.value = false;
};
// 监听筛选条件变化
watch([selectedIndustry, selectedTimePeriod, selectedSubCategory], () => {
  getUserPainPointsList();
});

onMounted(() => {
  getUserPainPointsList();
});
const search = () => {
  getUserPainPointsList();
};
</script>

<style scoped lang="scss">
/* 自定义样式 */
:deep(.arco-table-th) {
  background-color: var(--color-fill-2);
}

:deep(.arco-table-tr):hover {
  background-color: var(--color-fill-1);
}
:deep(.arco-statistic-content .arco-statistic-value-integer) {
  font-size: 14px;
}

.pop-btn {
  background: #fff !important;
  border-color: #fff !important;
  color: #737478 !important;
  margin-left: -5px;
}

:deep(.arco-btn-outline) {
  color: #6d4cfe !important;
  border-color: #6d4cfe !important;
}
.title-row {
  display: flex;
  height: 64px;
  padding: 10px 0 2px 0;
  align-items: center;
  .title {
    color: var(--Text-1, #211f24);
    font-family: $font-family-medium;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
}
</style>
<style lang="scss">
.user-pain-points-modal {
  .ant-modal-header {
    border-bottom: none;
    height: 56px;
    padding: 0 20px;
    .ant-modal-title {
      justify-content: flex-start;
    }
  }

  .ant-modal-body {
    padding: 12px 20px 0;
    .cts {
      color: var(--Text-2, #3c4043);
      font-family: $font-family-regular;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px; /* 166.667% */
    }
    p {
      margin: 0;
      padding: 0;
    }
  }

  .ant-modal-footer {
    display: flex;
    height: 64px;
    padding: 0px 20px;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid var(--Border-1, #d7d7d9);
  }
}
</style>