cas_cloud_web_i18n_old/src/views/admin/components/enterpriseItem.vue

<template>
  <el-row style="padding: 40px 20px" type="flex">
    <div class="img">
      <el-image :src="data.image" alt />
    </div>
    <div class="content">
      <div class="tit" @click="handleDetail(data.id)">
        <div class="text" style="flex: 1">{{ data.name }}</div>
      </div>
      <div class="line">
        {{ "webSearch.companySize" }}：
        <span>{{
          data.kind_title || t("webSearch.noDataFromBackground")
        }}</span>
      </div>
      <div class="line">
        {{ t("webSearch.coreProducts") }}： <span>{{ data.product }}</span>
      </div>
      <div class="line">
        {{ t("webSearch.companyWebsite") }}：
        <a :href="data.url"
          ><span>{{ data.url || t("webSearch.noDataFromBackground") }}</span></a
        >
      </div>
    </div>
    <div class="keywords" style="/*flex: 1; */ width: 360px">
      <wordcloud
        :width="360"
        :data="createdData(data.keyword?.split(',') ?? [])"
      ></wordcloud>
    </div>
  </el-row>
</template>

<script setup>
import wordcloud from "./wordcloud.vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

function createdData(arr) {
  let l = [];
  let snap = JSON.parse(JSON.stringify(arr));
  snap.map((e) => {
    l.push({ name: e, value: 30 });
    return { name: e, value: 30 };
  });
  return l;
}

function handleDetail(id) {
  let routeData = router.resolve({
    path: `/searchList/enterprise/detail/${id}`,
    query: {
      keyword: route.query.keyword,
      queryType: route.query.queryType,
    },
  });
  window.open(routeData.href, "_blank");
}
</script>

<style lang="scss" scoped>
.img {
  width: 90px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;

  :deep(.el-image) {
    width: 90px;
    height: 90px;
    border-radius: 50%;
  }
}

.content {
  flex: 1;
}
</style>