1988 lines
62 KiB
Vue
1988 lines
62 KiB
Vue
<template>
|
||
<div class="pages">
|
||
<AppHeader class="page-header" />
|
||
<!-- 左侧边栏 - 已隐藏 -->
|
||
<!-- <div class="left">
|
||
<img style="width: 198px; height: 32px; margin: 20px;" src="@/assets/images/logo.png" alt="" @click="navToLogin">
|
||
<div style="margin-left: 20px;">
|
||
<div v-for="(item, index) in historyList" @click="selectTimeBox(item)" :class="{ timeBox: item.id != isSelected, timeBox2: item.id == isSelected}">
|
||
{{ item.created_at.slice(0,10) + ' ' + item.created_at.slice(11,16) }}
|
||
<img v-if="item.id == isSelected" class="delete-icon" src="@/assets/images/delete.png" alt="" @click.stop="deleteValuations(item)">
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
<div v-if="status == 'create'" class="right">
|
||
<StepProgressBar
|
||
style="width: 800px; margin: auto; margin-top: 40px"
|
||
:steps="steps"
|
||
:currentStep="currentStep"
|
||
/>
|
||
<div class="line"></div>
|
||
<div class="form-title-box">
|
||
<div class="title-left"></div>
|
||
<div v-if="currentStep == 0" class="title-form">基础信息</div>
|
||
<div v-if="currentStep == 1" class="title-form">财务状况</div>
|
||
<div v-if="currentStep == 2" class="title-form">非遗等级与技术</div>
|
||
<div v-if="currentStep == 3" class="title-form">非遗应用与推广</div>
|
||
<div v-if="currentStep == 4" class="title-form">非遗资产衍生商品信息</div>
|
||
</div>
|
||
<NForm
|
||
class="form-container"
|
||
ref="modalFormRef"
|
||
label-placement="top"
|
||
label-align="top"
|
||
:label-width="80"
|
||
:model="modalForm"
|
||
:rules="modalRules"
|
||
require-mark-placement="left"
|
||
>
|
||
<n-grid v-if="currentStep == 0" :cols="24" :x-gap="24">
|
||
<n-form-item-gi :span="12" label="资产名称" path="asset_name">
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>资产名称</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
请填写非遗资产名称，如“蜀绣”
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<NInput v-model:value="modalForm.asset_name" placeholder="请输入资产名称" />
|
||
</n-form-item-gi>
|
||
<n-gi :span="12"></n-gi>
|
||
<n-form-item-gi :span="12" label="所属机构/权利人" path="institution">
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>所属机构/权利人</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
请填写评估机构全称,如"XXX有限公司"
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<NInput v-model:value="modalForm.institution" placeholder="请输入所属机构/权利人" />
|
||
</n-form-item-gi>
|
||
<n-form-item-gi :span="12" label="统一社会信用代码/身份证号" path="credit_code_or_id">
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>统一社会信用代码/身份证号</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
请填写评估机构统一社会信用代码/身份证号
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<NInput
|
||
v-model:value="modalForm.credit_code_or_id"
|
||
placeholder="请输入统一社会信用代码/身份证号"
|
||
/>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi :span="12" label="所属行业" path="industry">
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>所属行业</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
请根据国民经济行业分类进行选择
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<n-select
|
||
v-model:value="modalForm.industry"
|
||
placeholder="请选择所属行业"
|
||
:options="industryOptions"
|
||
filterable
|
||
/>
|
||
</n-form-item-gi>
|
||
<n-gi :span="12"></n-gi>
|
||
<n-form-item-gi :span="24" label="业务/传承介绍" path="biz_intro">
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>业务/传承介绍</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
请在此处自由填写受评估单位/人的详细业务与项目情况。建议着重介绍与本次所评估非遗IP资产直接相关的背景信息，例如：主要业务范围、核心技艺、传承谱系、运营模式、市场定位、近年发展状况等。本部分是评估师理解评估对象价值内涵的重要依据，请务必详尽、客观地描述。
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<n-input
|
||
v-model:value="modalForm.biz_intro"
|
||
type="textarea"
|
||
placeholder="请在此处自由填写受评估单位/人的详细业务与项目情况。建议着重介绍与本次所评估非遗IP资产直接相关的背景信息，例如：主要业务范围、核心技艺、传承谱系、运营模式、市场定位、近年发展状况等。本部分是评估师理解评估对象价值内涵的重要依据，请务必详尽、客观地描述。"
|
||
:autosize="{
|
||
minRows: 4,
|
||
maxRows: 8,
|
||
}"
|
||
/>
|
||
</n-form-item-gi>
|
||
</n-grid>
|
||
<n-grid v-if="currentStep == 1" :cols="24" :x-gap="0">
|
||
<n-form-item-gi
|
||
:span="10"
|
||
class="form-item"
|
||
label="近12个月机构营收/万元"
|
||
path="annual_revenue"
|
||
>
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>近12个月机构营收/万元</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
近12个月的营收额,便于体现在技术研发上的投入比例
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<NInput
|
||
v-model:value="modalForm.annual_revenue"
|
||
placeholder="请输入近12个月机构营收"
|
||
type="number"
|
||
/>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi
|
||
:span="12"
|
||
class="form-item"
|
||
label="近12个月机构研发投入/万元"
|
||
path="rd_investment"
|
||
>
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>近12个月机构研发投入/万元</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
近12个月的研发投入费用，便于体现在技术研发上的投入比例
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<NInput
|
||
v-model:value="modalForm.rd_investment"
|
||
placeholder="请输入近12个月机构研发投入"
|
||
type="number"
|
||
/>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi
|
||
:span="24"
|
||
label="近三年机构收益/万元"
|
||
path="three_year_income"
|
||
style="margin-left: 20px"
|
||
>
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>近三年机构收益/万元</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
填写近3年资产相关的年收益,用以判断资产的商业价值
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<NInput
|
||
v-model:value="modalForm.three_year_income[0]"
|
||
placeholder="第一年"
|
||
style="width: 220px"
|
||
type="number"
|
||
/>
|
||
<NInput
|
||
v-model:value="modalForm.three_year_income[1]"
|
||
placeholder="第二年"
|
||
style="width: 220px; margin-left: 10px"
|
||
type="number"
|
||
/>
|
||
<NInput
|
||
v-model:value="modalForm.three_year_income[2]"
|
||
placeholder="第三年"
|
||
style="width: 220px; margin-left: 10px"
|
||
type="number"
|
||
/>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi :span="12" class="form-item" label="资产受资助情况" path="funding_status">
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>资产受资助情况</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
根据与资产相关项目的受资助情况选择
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<n-select
|
||
v-model:value="modalForm.funding_status"
|
||
placeholder="请选择资产受资助情况"
|
||
:options="fundingOptions"
|
||
/>
|
||
</n-form-item-gi>
|
||
</n-grid>
|
||
<n-grid v-if="currentStep == 2" :cols="24" :x-gap="0">
|
||
<n-form-item-gi
|
||
:span="24"
|
||
class="form-item"
|
||
label="非遗传承人等级"
|
||
path="inheritor_level"
|
||
>
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>非遗传承人等级</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
选择该非遗项目所对应的最高传承人等级，并上传相关证书或者证明材料以佐证
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<n-select
|
||
v-model:value="modalForm.inheritor_level"
|
||
placeholder="非遗传承人等级"
|
||
:options="fundingOptions2"
|
||
/>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi
|
||
:span="24"
|
||
label="非遗传承人年龄水平及数量"
|
||
path="inheritor_age_count"
|
||
style="margin-left: 20px"
|
||
>
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>非遗传承人年龄水平及数量</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
请填写该资产的所有受认证传承人年龄段的人数
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<NInput
|
||
v-model:value="modalForm.inheritor_age_count[0]"
|
||
placeholder="请输入≤50岁传承人数量"
|
||
style="width: 220px"
|
||
type="number"
|
||
/>
|
||
<NInput
|
||
v-model:value="modalForm.inheritor_age_count[1]"
|
||
placeholder="请输入50-70岁传承人数量"
|
||
style="width: 220px; margin-left: 10px"
|
||
type="number"
|
||
/>
|
||
<NInput
|
||
v-model:value="modalForm.inheritor_age_count[2]"
|
||
placeholder="请输入≥70岁传承人数量"
|
||
style="width: 220px; margin-left: 10px"
|
||
type="number"
|
||
/>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi
|
||
:span="24"
|
||
class="form-item"
|
||
label="非遗传承人等级证书"
|
||
path="inheritor_certificates"
|
||
>
|
||
<n-upload
|
||
:action="actionUrl"
|
||
:default-file-list="modalForm.inheritor_certificates"
|
||
list-type="image-card"
|
||
@finish="handleFinish3"
|
||
@remove="delete3"
|
||
>
|
||
<div>
|
||
<img style="width: 24px; height: 24px" src="@/assets/images/upload.png" alt="" />
|
||
<p style="font-size: 12px">添加图片</p>
|
||
</div>
|
||
</n-upload>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi :span="10" class="form-item" label="非遗等级" path="heritage_level">
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>非遗等级</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
请选择该非遗资产的认证等级（如国家级非遗）
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<n-select
|
||
v-model:value="modalForm.heritage_level"
|
||
placeholder="非遗等级"
|
||
:options="heritageOptions"
|
||
/>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi
|
||
:span="12"
|
||
class="form-item"
|
||
label="非遗资产所用专利的申请号"
|
||
path="patent_application_no"
|
||
>
|
||
<NInput
|
||
v-model:value="modalForm.patent_application_no"
|
||
placeholder="非遗资产所用专利的申请号"
|
||
/>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi
|
||
:span="20"
|
||
label="非遗资产历史证明证据及数量"
|
||
path="historical_evidence"
|
||
style="margin-left: 20px; width: 800px"
|
||
>
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>非遗资产历史证明证据及数量</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
为考究非遗资产的传承历史，需填写资产所相关的历史证明材料相关信息，请填写不同证据类型的证据数量，例如某纹样有1件唐代实物+3篇研究论文证明其历史传承
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<NInput
|
||
v-model:value="modalForm.historical_evidence[0]"
|
||
placeholder="请输入出土实物样本数量"
|
||
style="width: 220px"
|
||
type="number"
|
||
/>
|
||
<NInput
|
||
v-model:value="modalForm.historical_evidence[1]"
|
||
placeholder="请输入古代文献样本数量"
|
||
style="width: 220px; margin-left: 10px"
|
||
type="number"
|
||
/>
|
||
<NInput
|
||
v-model:value="modalForm.historical_evidence[2]"
|
||
placeholder="请输入传承人佐证样本数量"
|
||
style="width: 220px; margin-left: 10px"
|
||
type="number"
|
||
/>
|
||
<NInput
|
||
v-model:value="modalForm.historical_evidence[3]"
|
||
placeholder="请输入现代研究样本数量"
|
||
style="width: 220px; margin-left: 10px"
|
||
type="number"
|
||
/>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi
|
||
:span="24"
|
||
class="form-item"
|
||
label="非遗资产所用专利的证书"
|
||
path="patent_certificates"
|
||
>
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>非遗资产所用专利的证书</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
上传资产所涉及的专利截图，佐证技术强度
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<n-upload
|
||
:action="actionUrl"
|
||
:default-file-list="modalForm.patent_certificates"
|
||
@finish="handleFinish1"
|
||
@remove="delete1"
|
||
list-type="image-card"
|
||
>
|
||
<div>
|
||
<img style="width: 24px; height: 24px" src="@/assets/images/upload.png" alt="" />
|
||
<p style="font-size: 12px">添加图片</p>
|
||
</div>
|
||
</n-upload>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi :span="24" class="form-item" label="非遗纹样图片" path="pattern_images">
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>非遗纹样图片</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
上传资产所涉及的纹样清晰图片，便于判断纹样的精细与美观度
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<n-upload
|
||
:action="actionUrl"
|
||
:default-file-list="modalForm.pattern_images"
|
||
@finish="handleFinish2"
|
||
@remove="delete2"
|
||
list-type="image-card"
|
||
>
|
||
<div>
|
||
<img style="width: 24px; height: 24px" src="@/assets/images/upload.png" alt="" />
|
||
<p style="font-size: 12px">添加图片</p>
|
||
</div>
|
||
</n-upload>
|
||
</n-form-item-gi>
|
||
</n-grid>
|
||
<n-grid v-if="currentStep == 3" :cols="24" :x-gap="0">
|
||
<n-form-item-gi
|
||
:span="24"
|
||
class="form-item"
|
||
label="非遗资产应用成熟度"
|
||
path="application_maturity"
|
||
>
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>非遗资产应用成熟度</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
根据目前资产的实际情况选择当前资产的应用成熟程度
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<n-select
|
||
v-model:value="modalForm.application_maturity"
|
||
placeholder="请选择"
|
||
:options="maturityOptions"
|
||
/>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi
|
||
:span="9"
|
||
class="form-item"
|
||
label="非遗资产应用覆盖范围"
|
||
path="application_coverage"
|
||
>
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>非遗资产应用覆盖范围</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
资产目前普及的区域范围
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<n-select
|
||
v-model:value="modalForm.application_coverage"
|
||
placeholder="请选择"
|
||
:options="coverageOptions"
|
||
/>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi
|
||
:span="12"
|
||
class="form-item"
|
||
label="非遗资产跨界合作深度"
|
||
path="cooperation_depth"
|
||
>
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>非遗资产跨界合作深度</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
根据资产目前跨界合作项目的情况选择，选项自上而下深度逐渐升高，1.品牌联名（如苗绣与LV手袋合作）2.科技载体（如云锦纹样应用于OLED屏幕）3.国家外交礼品（如景泰蓝作为国礼赠联合国）
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<n-select
|
||
v-model:value="modalForm.cooperation_depth"
|
||
placeholder="请选择"
|
||
:options="depthOptions"
|
||
/>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi
|
||
:span="12"
|
||
class="form-item"
|
||
label="近12个月线下相关宣讲活动次数"
|
||
path="offline_activities"
|
||
>
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>近12个月线下相关宣讲活动次数</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
统计以往所进行过的与资产相关的线下传习活动，填写线下传习活动次数
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<NInput
|
||
v-model:value="modalForm.offline_activities"
|
||
placeholder="近12个月线下相关宣讲活动次数"
|
||
type="number"
|
||
/>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi
|
||
:span="22"
|
||
style="margin-left: 20px"
|
||
label="线上相关宣传账号信息"
|
||
path="online_accounts"
|
||
>
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>线上相关宣传账号信息</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
与资产相关的宣传、销售的平台与账户信息
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<n-select
|
||
style="width: 330px"
|
||
v-model:value="modalForm.online_accounts[0]"
|
||
placeholder="请选择"
|
||
:options="accountsOptions"
|
||
/>
|
||
<NInput
|
||
v-model:value="modalForm.online_accounts[1]"
|
||
placeholder="请输入账号"
|
||
style="width: 220px; margin-left: 10px"
|
||
/>
|
||
<NInput
|
||
v-model:value="modalForm.online_accounts[2]"
|
||
placeholder="请输入点赞数量"
|
||
style="width: 220px; margin-left: 10px"
|
||
type="number"
|
||
/>
|
||
<NInput
|
||
v-model:value="modalForm.online_accounts[3]"
|
||
placeholder="请输入评论数量"
|
||
style="width: 220px; margin-left: 10px"
|
||
type="number"
|
||
/>
|
||
<NInput
|
||
v-model:value="modalForm.online_accounts[4]"
|
||
placeholder="请输入分享数量"
|
||
style="width: 220px; margin-left: 10px"
|
||
type="number"
|
||
/>
|
||
</n-form-item-gi>
|
||
</n-grid>
|
||
<n-grid v-if="currentStep == 4" :cols="24" :x-gap="0">
|
||
<n-form-item-gi
|
||
:span="10"
|
||
class="form-item"
|
||
label="该商品近12个月销售量"
|
||
path="sales_volume"
|
||
>
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>该商品近12个月销售量</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
非遗资产代表产品近12个月的总销售数量
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<NInput v-model:value="modalForm.sales_volume" placeholder="请输入" type="number" />
|
||
</n-form-item-gi>
|
||
<n-form-item-gi
|
||
:span="12"
|
||
class="form-item"
|
||
label="该商品近12个月的链接浏览量"
|
||
path="link_views"
|
||
>
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>该商品近12个月的链接浏览量</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
非遗资产代表产品近12个月的商品链接浏览量
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<NInput v-model:value="modalForm.link_views" placeholder="请输入" type="number" />
|
||
</n-form-item-gi>
|
||
<n-form-item-gi :span="10" class="form-item" label="该商品的发行量" path="circulation">
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>该商品的发行量</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
请选择该资产的发行量（单位：份），以便确认该资产的稀缺性
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<n-select
|
||
v-model:value="modalForm.circulation"
|
||
placeholder="请选择"
|
||
:options="circulationOptions"
|
||
:consistent-menu-width="false"
|
||
/>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi
|
||
:span="12"
|
||
class="form-item"
|
||
label="该商品最近一次市场活动时间"
|
||
path="last_market_activity"
|
||
>
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>该商品最近一次市场活动时间</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
与资产相关的商品最近一次市场活动（交易、报价、评估）的相距时间
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<n-select
|
||
v-model:value="modalForm.last_market_activity"
|
||
placeholder="请选择"
|
||
:options="activityOptions"
|
||
/>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi :span="10" class="form-item" label="月交易额" path="monthly_transaction">
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>月交易额</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
请选择该资产所衍生商品的月交易额水平
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<n-select
|
||
v-model:value="modalForm.monthly_transaction"
|
||
placeholder="请选择"
|
||
:options="transactionOptions"
|
||
/>
|
||
</n-form-item-gi>
|
||
<n-form-item-gi
|
||
:span="6"
|
||
class="form-item"
|
||
label="该商品近30天价格波动区间"
|
||
path="price_fluctuation"
|
||
>
|
||
<template #label>
|
||
<div class="flex items-center gap-4">
|
||
<span>该商品近30天价格波动区间</span>
|
||
<n-tooltip placement="top-start" trigger="hover">
|
||
<template #trigger>
|
||
<img style="width: 14px; height: 14px" src="@/assets/images/ps.png" alt="" />
|
||
</template>
|
||
请输入与资产相关的最具代表性商品近30天的最高价与最低价
|
||
</n-tooltip>
|
||
</div>
|
||
</template>
|
||
<NInput
|
||
v-model:value="modalForm.price_fluctuation[0]"
|
||
placeholder="最低价"
|
||
style="width: 220px"
|
||
/>
|
||
<span style="display: inline-block; margin: 0 8px">-</span>
|
||
<NInput
|
||
v-model:value="modalForm.price_fluctuation[1]"
|
||
placeholder="最高价"
|
||
style="width: 220px"
|
||
/>
|
||
</n-form-item-gi>
|
||
</n-grid>
|
||
</NForm>
|
||
<div class="submit-box">
|
||
<div
|
||
v-if="currentStep != 0"
|
||
class="submit-btn2"
|
||
style="cursor: pointer"
|
||
@click="previousStep"
|
||
>
|
||
上一步
|
||
</div>
|
||
<div v-if="currentStep != 4" class="submit-btn">
|
||
<n-spin style="cursor: pointer" :show="loading" @click="nextStep"> 下一步 </n-spin>
|
||
</div>
|
||
<div v-if="currentStep == 4" class="submit-btn">
|
||
<n-spin :show="loading" @click="nextStep" style="cursor: pointer"> 立即评估 </n-spin>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="status == 'success'" class="right">
|
||
<div class="price-container" :style="{ backgroundImage: `url(${backgroundImg})` }">
|
||
<div>¥{{ parseInt(selectedObj?.calculation_result?.final_value_ab) }}</div>
|
||
<div style="font-size: 20px; color: #303133; line-height: 20px">最终评估结果</div>
|
||
<div style="display: flex; justify-content: center; align-items: center; margin-top: 10px">
|
||
<div class="credibility-badge">
|
||
<span class="credibility-label">评估可信度：</span>
|
||
<div class="credibility-stars" aria-hidden="true">
|
||
<span class="stars-base">★★★★★</span>
|
||
<span class="stars-fill" :style="{ width: '95%' }">★★★★★</span>
|
||
</div>
|
||
<span class="credibility-percent">95%</span>
|
||
</div>
|
||
<div class="secondary-badge">动态质押率=50%</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; margin: auto; margin-top: 24px; width: 1010px">
|
||
<div
|
||
class="score-box"
|
||
style="
|
||
background: linear-gradient(90deg, #3196ff 0%, #165dff 100%);
|
||
color: #303133;
|
||
font-size: 14px;
|
||
"
|
||
:style="{ backgroundImage: `url(${backgroundImg3})`, backgroundSize: 'contain' }"
|
||
>
|
||
<div style="font-size: 18px; font-weight: bold">
|
||
<img
|
||
style="width: 18px; height: 18px; transform: translate(-2px, 2px)"
|
||
src="@/assets/images/cost.png"
|
||
alt=""
|
||
/>
|
||
经济价值评估
|
||
</div>
|
||
<div
|
||
ref="economy"
|
||
style="
|
||
text-align: center;
|
||
font-size: 30px;
|
||
font-weight: bold;
|
||
margin-top: 10px;
|
||
height: 95px;
|
||
"
|
||
:style="{
|
||
backgroundImage: `url(${backgroundImg4})`,
|
||
backgroundSize: '167px 95px',
|
||
backgroundPosition: 'center 2px',
|
||
backgroundRepeat: 'no-repeat',
|
||
}"
|
||
></div>
|
||
<div style="margin-top: 20px">
|
||
基础价值评估：<span style="font-weight: bold">优秀</span>
|
||
</div>
|
||
<div>流量因子评估：<span style="font-weight: bold">良好</span></div>
|
||
<div>政策系数评估：<span style="font-weight: bold; color: #165dff">极强</span></div>
|
||
</div>
|
||
<div
|
||
class="score-box"
|
||
style="background: #ffde1144; color: #303133; font-size: 14px"
|
||
:style="{ backgroundImage: `url(${backgroundImg2})` }"
|
||
>
|
||
<div style="font-size: 18px; font-weight: bold">
|
||
<img
|
||
style="width: 18px; height: 18px; transform: translate(0, 2px)"
|
||
src="@/assets/images/cost2.png"
|
||
alt=""
|
||
/>
|
||
文化价值评估
|
||
</div>
|
||
<div
|
||
ref="culture"
|
||
style="
|
||
text-align: center;
|
||
font-size: 30px;
|
||
font-weight: bold;
|
||
margin-top: 10px;
|
||
height: 95px;
|
||
"
|
||
:style="{
|
||
backgroundImage: `url(${backgroundImg5})`,
|
||
backgroundSize: '167px 95px',
|
||
backgroundPosition: 'center 2px',
|
||
backgroundRepeat: 'no-repeat',
|
||
}"
|
||
></div>
|
||
<div style="margin-top: 20px">
|
||
活态传承系数评估：<span style="font-weight: bold">优秀</span>
|
||
</div>
|
||
<div>纹样基因熵值评估：<span style="font-weight: bold">优秀</span></div>
|
||
</div>
|
||
<div
|
||
class="score-box"
|
||
style="background: #5bd77944; color: #303133; font-size: 14px"
|
||
:style="{ backgroundImage: `url(${backgroundImg1})` }"
|
||
>
|
||
<div style="font-size: 18px; font-weight: bold">
|
||
<img
|
||
style="width: 18px; height: 18px; transform: translate(0, 2px)"
|
||
src="@/assets/images/cost1.png"
|
||
alt=""
|
||
/>
|
||
文化价值风险控制
|
||
</div>
|
||
<div
|
||
ref="risk"
|
||
style="
|
||
text-align: center;
|
||
font-size: 30px;
|
||
font-weight: bold;
|
||
margin-top: 10px;
|
||
height: 95px;
|
||
"
|
||
:style="{
|
||
backgroundImage: `url(${backgroundImg6})`,
|
||
backgroundSize: '167px 95px',
|
||
backgroundPosition: 'center 2px',
|
||
backgroundRepeat: 'no-repeat',
|
||
}"
|
||
></div>
|
||
<div style="margin-top: 20px">
|
||
风险调整系数：<span style="font-weight: bold; color: #2eae44">低</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="retry"
|
||
@click="retry"
|
||
style="background: #f8f8f8; color: #303133; line-height: 40px"
|
||
>
|
||
<img
|
||
style="width: 16px; height: 16px; transform: translate(0, 2px); margin-right: 6px"
|
||
src="@/assets/images/retry.png"
|
||
alt=""
|
||
/>
|
||
重新评估
|
||
</div>
|
||
</div>
|
||
<div v-if="status == 'fail'" class="right" style="text-align: center">
|
||
<img
|
||
style="width: 100px; height: 100px; margin-top: 30vh"
|
||
src="@/assets/images/fail.png"
|
||
alt=""
|
||
/>
|
||
<div style="font-size: 20px">评估失败</div>
|
||
<div style="font-size: 14px; color: #999999; margin-top: 10px">
|
||
很抱歉，您的知识产权和非物质文化遗产的价值评估失败，请重新评估
|
||
</div>
|
||
<div class="retry" @click="retry">
|
||
<img
|
||
style="width: 16px; height: 16px; transform: translate(0, 2px); margin-right: 6px"
|
||
src="@/assets/images/retry.png"
|
||
alt=""
|
||
/>
|
||
重新评估
|
||
</div>
|
||
</div>
|
||
<div v-if="status == 'pending'" class="right" style="text-align: center">
|
||
<img
|
||
style="width: 100px; height: 100px; margin-top: 30vh"
|
||
src="@/assets/images/loading.png"
|
||
alt=""
|
||
/>
|
||
<div style="font-size: 20px">评估中…</div>
|
||
<div style="font-size: 14px; color: #999999; margin-top: 10px">
|
||
您的知识产权和非物质文化遗产的价值正在评估中，请耐心等候
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import type { FormInst, FormItemRule, FormRules } from 'naive-ui'
|
||
import StepProgressBar from './components/StepProgressBar.vue'
|
||
import AppHeader from '@/components/AppHeader.vue'
|
||
import api from '@/api'
|
||
import { ref, reactive, onMounted } from 'vue'
|
||
import { useMessage, useDialog } from 'naive-ui'
|
||
import backgroundImg from '@/assets/images/background.png'
|
||
import backgroundImg1 from '@/assets/images/bgc.png'
|
||
import backgroundImg2 from '@/assets/images/bgy.png'
|
||
import backgroundImg3 from '@/assets/images/bgg.png'
|
||
import backgroundImg4 from '@/assets/images/circleg.png'
|
||
import backgroundImg5 from '@/assets/images/circley.png'
|
||
import backgroundImg6 from '@/assets/images/circlec.png'
|
||
const status = ref('create')
|
||
const message = useMessage()
|
||
const modalFormRef = ref<FormInst | null>(null)
|
||
const isSelected = ref<Number | null>(null)
|
||
const steps = [
|
||
{ title: '基础信息' },
|
||
{ title: '财务状况' },
|
||
{ title: '非遗等级与技术' },
|
||
{ title: '非遗应用与推广' },
|
||
{ title: '非遗资产衍生商品信息' },
|
||
]
|
||
const loading = ref(false)
|
||
const actionUrl = 'https://value.cdcee.net/api/v1/upload/image'
|
||
const currentStep = ref(0)
|
||
const historyList = ref([])
|
||
const modalForm = reactive({
|
||
asset_name: '',
|
||
institution: '',
|
||
credit_code_or_id: '',
|
||
industry: null,
|
||
biz_intro: '',
|
||
annual_revenue: '',
|
||
rd_investment: '',
|
||
three_year_income: [],
|
||
funding_status: null,
|
||
sales_volume: '',
|
||
link_views: '',
|
||
circulation: null,
|
||
last_market_activity: null,
|
||
monthly_transaction: null,
|
||
price_fluctuation: [],
|
||
application_maturity: null,
|
||
application_coverage: null,
|
||
cooperation_depth: null,
|
||
offline_activities: '',
|
||
online_accounts: [],
|
||
inheritor_level: null,
|
||
inheritor_age_count: [],
|
||
inheritor_certificates: [],
|
||
heritage_level: null,
|
||
historical_evidence: [],
|
||
patent_certificates: [],
|
||
pattern_images: [],
|
||
patent_application_no: '',
|
||
})
|
||
const modalRules = {
|
||
asset_name: [
|
||
{
|
||
required: true,
|
||
message: '请输入资产名称',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
institution: [
|
||
{
|
||
required: true,
|
||
message: '请输入所属机构/权利人',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
credit_code_or_id: [
|
||
{
|
||
required: true,
|
||
message: '请输入统一社会信用代码/身份证号',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
biz_intro: [
|
||
{
|
||
required: true,
|
||
message: '请输入业务/传承介绍',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
industry: [
|
||
{
|
||
required: true,
|
||
message: '请选择所属行业',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
annual_revenue: [
|
||
{
|
||
required: true,
|
||
message: '请输入近12个月机构营收',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
rd_investment: [
|
||
{
|
||
required: true,
|
||
message: '请输入近12个月机构研发投入',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
three_year_income: [
|
||
{
|
||
type: 'array',
|
||
required: true,
|
||
message: '',
|
||
trigger: ['input', 'blur'],
|
||
len: 3,
|
||
fields: [
|
||
{
|
||
required: true,
|
||
message: '请输入第一年机构收益',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
{
|
||
required: true,
|
||
message: '请输入第二年机构收益',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
{
|
||
required: true,
|
||
message: '请输入第三年机构收益',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
historical_evidence: [
|
||
{
|
||
type: 'array',
|
||
required: true,
|
||
message: '',
|
||
trigger: ['input', 'blur'],
|
||
len: 4,
|
||
fields: [
|
||
{
|
||
required: true,
|
||
message: '请输入出土实物样本数量',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
{
|
||
required: true,
|
||
message: '请输入古代文献样本数量',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
{
|
||
required: true,
|
||
message: '请输入传承人佐证样本数量',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
{
|
||
required: true,
|
||
message: '请输入现代研究样本数量',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
funding_status: [
|
||
{
|
||
required: true,
|
||
message: '请选择资产受资助情况',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
inheritor_level: [
|
||
{
|
||
required: true,
|
||
message: '请选择非遗传承人等级',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
inheritor_age_count: [
|
||
{
|
||
type: 'array',
|
||
required: true,
|
||
message: '',
|
||
trigger: ['input', 'blur'],
|
||
len: 3,
|
||
fields: [
|
||
{
|
||
required: true,
|
||
message: '请输入≤50岁传承人数量',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
{
|
||
required: true,
|
||
message: '请输入50-70岁传承人数量',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
{
|
||
required: true,
|
||
message: '请输入≥70岁传承人数量',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
heritage_level: [
|
||
{
|
||
required: true,
|
||
message: '请选择非遗等级',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
application_maturity: [
|
||
{
|
||
required: true,
|
||
message: '请选择非遗资产应用成熟度',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
application_coverage: [
|
||
{
|
||
required: true,
|
||
message: '请选择非遗资产应用覆盖范围',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
cooperation_depth: [
|
||
{
|
||
required: true,
|
||
message: '请选择非遗资产跨界合作深度',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
offline_activities: [
|
||
{
|
||
required: true,
|
||
message: '请输入近12个月线下相关宣讲活动次数',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
online_accounts: [
|
||
{
|
||
type: 'array',
|
||
required: true,
|
||
message: '',
|
||
trigger: ['input', 'blur'],
|
||
len: 5,
|
||
fields: [
|
||
{
|
||
required: true,
|
||
message: '请选择线上相关宣传账号信息',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
{
|
||
required: true,
|
||
message: '请输入账号',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
{
|
||
required: true,
|
||
message: '请输入账号点赞量',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
{
|
||
required: true,
|
||
message: '请输入账号评论量',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
{
|
||
required: true,
|
||
message: '请输入账号分享量',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
sales_volume: [
|
||
{
|
||
required: true,
|
||
message: '请输入该商品近12个月销售量',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
link_views: [
|
||
{
|
||
required: true,
|
||
message: '请输入该商品近12个月的链接浏览量',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
circulation: [
|
||
{
|
||
required: true,
|
||
message: '请选择该商品的发行量',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
last_market_activity: [
|
||
{
|
||
required: true,
|
||
message: '请选择该商品最近一次市场活动时间',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
monthly_transaction: [
|
||
{
|
||
required: true,
|
||
message: '请选择月交易额',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
price_fluctuation: [
|
||
{
|
||
type: 'array',
|
||
required: true,
|
||
message: '',
|
||
trigger: ['input', 'blur'],
|
||
len: 2,
|
||
fields: [
|
||
{
|
||
required: true,
|
||
message: '请输入最高价',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
{
|
||
required: true,
|
||
message: '请输入最低价',
|
||
trigger: ['input', 'blur'],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
}
|
||
const industryOptions = ref([])
|
||
const fundingOptions = [
|
||
{
|
||
label: '国家级资助',
|
||
value: '0',
|
||
},
|
||
{
|
||
label: '省级资助',
|
||
value: '1',
|
||
},
|
||
{
|
||
label: '无资助',
|
||
value: '2',
|
||
},
|
||
]
|
||
const fundingOptions2 = [
|
||
{
|
||
label: '国家级传承人',
|
||
value: '0',
|
||
},
|
||
{
|
||
label: '省级传承人',
|
||
value: '1',
|
||
},
|
||
{
|
||
label: '市级传承人',
|
||
value: '2',
|
||
},
|
||
]
|
||
const circulationOptions = [
|
||
{
|
||
label: '孤品：全球唯一，不可复制（如特定版权、唯一实物）',
|
||
value: '孤品：全球唯一，不可复制（如特定版权、唯一实物）',
|
||
},
|
||
{
|
||
label: '限量：总发行份数 ≤100份',
|
||
value: '限量：总发行份数 ≤100份',
|
||
},
|
||
{
|
||
label: '稀有：总发行份数∈[100, 1000]份，或二级市场流通率 < 5%',
|
||
value: '稀有：总发行份数∈[100, 1000]份，或二级市场流通率 < 5%',
|
||
},
|
||
{
|
||
label: '流通：总发行份数 >1000份，或二级市场流通率 ≥ 5%',
|
||
value: '流通：总发行份数 >1000份，或二级市场流通率 ≥ 5%',
|
||
},
|
||
]
|
||
const activityOptions = [
|
||
{
|
||
label: '近一周',
|
||
value: '0',
|
||
},
|
||
{
|
||
label: '近一月',
|
||
value: '1',
|
||
},
|
||
{
|
||
label: '近一年',
|
||
value: '2',
|
||
},
|
||
{
|
||
label: '其他',
|
||
value: '3',
|
||
},
|
||
]
|
||
const transactionOptions = [
|
||
{
|
||
label: '月交易额<100万元',
|
||
value: '0',
|
||
},
|
||
{
|
||
label: '月交易额＞100万＜500万',
|
||
value: '1',
|
||
},
|
||
{
|
||
label: '月交易额≥500万',
|
||
value: '2',
|
||
},
|
||
]
|
||
const maturityOptions = [
|
||
{
|
||
label: '成熟应用',
|
||
value: '0',
|
||
},
|
||
{
|
||
label: '推广阶段',
|
||
value: '1',
|
||
},
|
||
{
|
||
label: '试点阶段',
|
||
value: '2',
|
||
},
|
||
]
|
||
const depthOptions = [
|
||
{
|
||
label: '无',
|
||
value: '0',
|
||
},
|
||
{
|
||
label: '品牌联名',
|
||
value: '1',
|
||
},
|
||
{
|
||
label: '科技载体',
|
||
value: '2',
|
||
},
|
||
{
|
||
label: '国家外交礼品',
|
||
value: '3',
|
||
},
|
||
]
|
||
const coverageOptions = [
|
||
{
|
||
label: '全球覆盖',
|
||
value: '0',
|
||
},
|
||
{
|
||
label: '全国覆盖',
|
||
value: '1',
|
||
},
|
||
{
|
||
label: '区域覆盖',
|
||
value: '2',
|
||
},
|
||
]
|
||
const accountsOptions = [
|
||
{
|
||
label: 'b站',
|
||
value: '0',
|
||
},
|
||
{
|
||
label: '抖音',
|
||
value: '1',
|
||
},
|
||
{
|
||
label: '快手',
|
||
value: '2',
|
||
},
|
||
{
|
||
label: '其他',
|
||
value: '3',
|
||
},
|
||
]
|
||
const heritageOptions = [
|
||
{
|
||
label: '国家级非遗',
|
||
value: '0',
|
||
},
|
||
{
|
||
label: '省级非遗',
|
||
value: '1',
|
||
},
|
||
{
|
||
label: '纳入《国家文化数字化战略清单》',
|
||
value: '2',
|
||
},
|
||
{
|
||
label: '无',
|
||
value: '3',
|
||
},
|
||
]
|
||
|
||
const handleFinish1 = (file) => {
|
||
let url = JSON.parse(file.event.target.response)
|
||
modalForm.patent_certificates.push({ url: url.url, id: file.file.batchId })
|
||
}
|
||
const handleFinish2 = (file) => {
|
||
let url = JSON.parse(file.event.target.response)
|
||
modalForm.pattern_images.push({ url: url.url, id: file.file.batchId })
|
||
}
|
||
const handleFinish3 = (file) => {
|
||
console.log(file)
|
||
let url = JSON.parse(file.event.target.response)
|
||
modalForm.inheritor_certificates.push({ url: url.url, id: file.file.batchId })
|
||
}
|
||
const delete1 = (file) => {
|
||
const index = modalForm.patent_certificates.findIndex((item) => item.id === file.file.batchId)
|
||
if (index !== -1) {
|
||
modalForm.patent_certificates.splice(index, 1)
|
||
}
|
||
}
|
||
const delete2 = (file) => {
|
||
const index = modalForm.pattern_images.findIndex((item) => item.id === file.file.batchId)
|
||
if (index !== -1) {
|
||
modalForm.pattern_images.splice(index, 1)
|
||
}
|
||
}
|
||
const delete3 = (file) => {
|
||
const index = modalForm.inheritor_certificates.findIndex((item) => item.id === file.file.batchId)
|
||
if (index !== -1) {
|
||
modalForm.inheritor_certificates.splice(index, 1)
|
||
}
|
||
console.log(modalForm.inheritor_certificates)
|
||
}
|
||
const previousStep = () => {
|
||
console.log(modalForm)
|
||
currentStep.value--
|
||
}
|
||
|
||
import { useRouter, useRoute } from 'vue-router'
|
||
import { unref } from 'vue'
|
||
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
|
||
const navToLogin = () => {
|
||
userStore.logout()
|
||
}
|
||
const nextStep = () => {
|
||
console.log(modalForm)
|
||
if (loading.value) {
|
||
return
|
||
}
|
||
modalFormRef.value?.validate((errors) => {
|
||
if (!errors) {
|
||
if (currentStep.value < 4) {
|
||
currentStep.value++
|
||
return
|
||
}
|
||
openSubmitConfirm()
|
||
} else {
|
||
message.error('请完善表单')
|
||
}
|
||
})
|
||
}
|
||
const submit = () => {
|
||
const data = {
|
||
...modalForm,
|
||
industry: industryOptions.value.find((item) => item.value === modalForm.industry).label,
|
||
funding_status: fundingOptions.find((item) => item.value === modalForm.funding_status).label,
|
||
inheritor_level: fundingOptions2.find((item) => item.value === modalForm.inheritor_level).label,
|
||
// "inheritor_ages": [60, 42, 35], # 传承人年龄
|
||
inheritor_certificates: modalForm.inheritor_certificates.map((item) => item.url),
|
||
heritage_asset_level: heritageOptions.find((item) => item.value === modalForm.heritage_level)
|
||
.label,
|
||
inheritor_ages: [
|
||
modalForm.inheritor_age_count[0] - 0,
|
||
modalForm.inheritor_age_count[1] - 0,
|
||
modalForm.inheritor_age_count[2] - 0,
|
||
],
|
||
historical_evidence: {
|
||
artifacts: modalForm.historical_evidence[0],
|
||
ancient_literature: modalForm.historical_evidence[1],
|
||
inheritor_testimony: modalForm.historical_evidence[2],
|
||
modern_research: modalForm.historical_evidence[3],
|
||
},
|
||
patent_certificates: modalForm.patent_certificates.map((item) => item.url),
|
||
pattern_images: modalForm.pattern_images.map((item) => item.url),
|
||
implementation_stage: maturityOptions.find(
|
||
(item) => item.value === modalForm.application_maturity
|
||
).label,
|
||
coverage_area: coverageOptions.find((item) => item.value === modalForm.application_coverage)
|
||
.label,
|
||
collaboration_type: depthOptions.find((item) => item.value === modalForm.cooperation_depth)
|
||
?.label,
|
||
scarcity_level: circulationOptions.find((item) => item.value === modalForm.circulation).label,
|
||
market_activity_time: activityOptions.find(
|
||
(item) => item.value === modalForm.last_market_activity
|
||
).label,
|
||
price_fluctuation: [modalForm.price_fluctuation[0] - 0, modalForm.price_fluctuation[1] - 0],
|
||
monthly_transaction_amount: transactionOptions.find(
|
||
(item) => item.value === modalForm.monthly_transaction
|
||
).label,
|
||
platform_accounts: {},
|
||
}
|
||
if (modalForm.online_accounts[0] == '0') {
|
||
data.platform_accounts = {
|
||
bilibili: {
|
||
account: modalForm.online_accounts[1],
|
||
likes: modalForm.online_accounts[2],
|
||
comments: modalForm.online_accounts[3],
|
||
shares: modalForm.online_accounts[4],
|
||
},
|
||
}
|
||
} else if (modalForm.online_accounts[0] == '1') {
|
||
data.platform_accounts = {
|
||
douyin: {
|
||
account: modalForm.online_accounts[1],
|
||
likes: modalForm.online_accounts[2],
|
||
comments: modalForm.online_accounts[3],
|
||
shares: modalForm.online_accounts[4],
|
||
},
|
||
}
|
||
} else if (modalForm.online_accounts[0] == '2') {
|
||
data.platform_accounts = {
|
||
kuaishou: {
|
||
account: modalForm.online_accounts[1],
|
||
likes: modalForm.online_accounts[2],
|
||
comments: modalForm.online_accounts[3],
|
||
shares: modalForm.online_accounts[4],
|
||
},
|
||
}
|
||
} else if (modalForm.online_accounts[0] == '3') {
|
||
data.platform_accounts = {
|
||
qita: {
|
||
account: modalForm.online_accounts[1],
|
||
likes: modalForm.online_accounts[2],
|
||
comments: modalForm.online_accounts[3],
|
||
shares: modalForm.online_accounts[4],
|
||
},
|
||
}
|
||
}
|
||
data.inheritor_age_count = data.inheritor_ages
|
||
message.success('正在评估中，请前往历史记录查看')
|
||
loading.value = true
|
||
api.valuations(data).then((res) => {
|
||
loading.value = false
|
||
getHistoryList()
|
||
message.success('评估完成 将于7个工作日内生成报告与证书 以短信形式通知')
|
||
router.push('/user-center')
|
||
// status.value = 'success'
|
||
// setTimeout(() => {
|
||
// window.location.reload()
|
||
// }, 1000)
|
||
})
|
||
}
|
||
const getHistoryList = () => {
|
||
const params = {
|
||
page: 1,
|
||
page_size: 99,
|
||
}
|
||
return api.getHistoryList(params).then((res) => {
|
||
const list = res?.data?.items ?? res?.data?.results ?? res?.results ?? []
|
||
historyList.value = Array.isArray(list) ? list : []
|
||
return res
|
||
})
|
||
}
|
||
const selectedObj = ref({
|
||
calculation_result: '',
|
||
})
|
||
|
||
const selectTimeBox = (item) => {
|
||
isSelected.value = item.id
|
||
status.value = item.status
|
||
selectedObj.value = item
|
||
if (item.status == 'success') {
|
||
setTimeout(() => {
|
||
getEcharts(economy.value, 75, '#16CEB9', '#6648FF')
|
||
getEcharts(culture.value, 50, '#ffdd00', '#ffbb05')
|
||
getEcharts(risk.value, 5, '#5ad775', '#2fab43')
|
||
}, 0)
|
||
}
|
||
}
|
||
|
||
async function retry() {
|
||
try {
|
||
const res = await api.userQuota()
|
||
if (res && res.data && res.data.remaining_count > 0) {
|
||
status.value = 'create'
|
||
} else {
|
||
$message.error('剩余评估次数不足！')
|
||
router.push('/user-center/transfer')
|
||
}
|
||
} catch (err) {
|
||
console.log(err)
|
||
}
|
||
}
|
||
const dialog = useDialog()
|
||
const openSubmitConfirm = () => {
|
||
dialog.warning({
|
||
title: '提示',
|
||
content: '提交后将消耗评估次数，确认提交？',
|
||
positiveText: '确认',
|
||
negativeText: '取消',
|
||
onPositiveClick: () => submit(),
|
||
})
|
||
}
|
||
const deleteValuations = (item) => {
|
||
dialog.warning({
|
||
title: '确认删除',
|
||
content: '是否确认删除记录？',
|
||
positiveText: '确定',
|
||
negativeText: '取消',
|
||
draggable: true,
|
||
onPositiveClick: () => {
|
||
api.deleteValuations(item).then(() => {
|
||
message.success('删除成功')
|
||
getHistoryList()
|
||
status.value = 'create'
|
||
})
|
||
},
|
||
})
|
||
}
|
||
import * as echarts from 'echarts'
|
||
import type { ECharts, EChartsOption } from 'echarts'
|
||
import { useUserStore } from '@/store'
|
||
const userStore = useUserStore()
|
||
const economy = ref<HTMLDivElement | null>(null)
|
||
const culture = ref<HTMLDivElement | null>(null)
|
||
const risk = ref<HTMLDivElement | null>(null)
|
||
// 存储ECharts实例
|
||
const chartInstance = ref<ECharts | null>(null)
|
||
|
||
const getEcharts = (item, value, color1, color2) => {
|
||
if (!item) return
|
||
// 创建实例
|
||
chartInstance.value = echarts.init(item)
|
||
// 定义半圆形进度环配置
|
||
const chartOptions = ref<EChartsOption>({
|
||
title: [
|
||
{
|
||
text: '综合评估',
|
||
top: '80%',
|
||
left: '36%',
|
||
textStyle: {
|
||
color: '#909399',
|
||
fontSize: 13,
|
||
fontWeight: 100,
|
||
},
|
||
},
|
||
{
|
||
text: value < 10 ? '0' + value : value,
|
||
top: '45%',
|
||
left: '40%',
|
||
textStyle: {
|
||
fontSize: '26',
|
||
color: '#000',
|
||
fontFamily: 'DINAlternate-Bold, DINAlternate',
|
||
fontWeight: 800,
|
||
},
|
||
},
|
||
],
|
||
polar: {
|
||
radius: ['132%', '165%'],
|
||
center: ['50%', '90%'],
|
||
},
|
||
angleAxis: {
|
||
max: 100,
|
||
show: false,
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
min: 0,
|
||
type: 'value',
|
||
},
|
||
radiusAxis: {
|
||
type: 'category',
|
||
show: false,
|
||
data: [''],
|
||
},
|
||
series: [
|
||
{
|
||
name: '进度',
|
||
type: 'bar',
|
||
roundCap: true,
|
||
barWidth: 90,
|
||
data: [
|
||
{
|
||
value: value,
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||
{
|
||
offset: 1,
|
||
color: color1,
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: color2,
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
],
|
||
coordinateSystem: 'polar',
|
||
},
|
||
],
|
||
})
|
||
chartInstance.value.setOption(chartOptions.value)
|
||
}
|
||
|
||
onMounted(async () => {
|
||
const params = {
|
||
page: 1,
|
||
page_size: 99,
|
||
}
|
||
await getHistoryList()
|
||
|
||
if (route.query.id) {
|
||
const targetId = Number(route.query.id)
|
||
const targetItem = historyList.value.find((item) => item.id === targetId)
|
||
if (targetItem) {
|
||
selectTimeBox(targetItem)
|
||
}
|
||
}
|
||
// 使用await提高可读性
|
||
const res = await api.getIndustryList(params)
|
||
|
||
// 检查响应数据有效性
|
||
if (!res?.data || !Array.isArray(res.data)) {
|
||
return
|
||
}
|
||
|
||
// 复制原始数据并处理，避免直接修改响应数据
|
||
industryOptions.value = await res.data.map((element, index) => {
|
||
// 只处理有名称且索引<=10的元素
|
||
if (element.name) {
|
||
return {
|
||
...element, // 保留原始属性
|
||
value: index + '',
|
||
label: element.name,
|
||
}
|
||
}
|
||
// 对于不满足条件的元素，返回原始值或进行其他处理
|
||
return element
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.pages {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||
'Noto Color Emoji';
|
||
width: 100%;
|
||
height: 100vh;
|
||
overflow-y: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #f8f8f8;
|
||
/* 左侧边栏样式 - 已隐藏 */
|
||
/* .left {
|
||
width: 270px;
|
||
height: 100%;
|
||
background-color: #fff;
|
||
} */
|
||
.right {
|
||
flex: 1;
|
||
margin: 20px auto;
|
||
max-width: 1200px;
|
||
width: 95%;
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-bottom: 60px;
|
||
}
|
||
}
|
||
.page-header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 10;
|
||
}
|
||
.delete-icon {
|
||
float: right;
|
||
transform: translate(0, 2px);
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
.timeBox {
|
||
margin-top: 10px;
|
||
width: 200px;
|
||
height: 40px;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
color: #303133;
|
||
line-height: 20px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 10px 12px;
|
||
cursor: pointer;
|
||
}
|
||
.timeBox2 {
|
||
margin-top: 10px;
|
||
width: 200px;
|
||
height: 40px;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
color: #303133;
|
||
line-height: 20px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 10px 12px;
|
||
cursor: pointer;
|
||
background-color: #f8f8f8;
|
||
}
|
||
|
||
.line {
|
||
margin: auto;
|
||
margin-top: 40px;
|
||
width: 900px;
|
||
height: 1px;
|
||
background: #eeeeee;
|
||
border-radius: 4px;
|
||
}
|
||
.form-container {
|
||
margin: auto;
|
||
margin-top: 30px;
|
||
width: 900px;
|
||
max-width: 100%;
|
||
}
|
||
.form-item {
|
||
display: inline-block;
|
||
width: 330px;
|
||
margin-left: 20px;
|
||
}
|
||
.form-title-box {
|
||
margin: auto;
|
||
margin-top: 40px;
|
||
width: 900px;
|
||
}
|
||
.title-left {
|
||
width: 6px;
|
||
height: 24px;
|
||
background: #a30113;
|
||
border-radius: 4px;
|
||
display: inline-block;
|
||
transform: translate(0, 3px);
|
||
}
|
||
.title-form {
|
||
display: inline-block;
|
||
font-weight: 500;
|
||
font-size: 20px;
|
||
color: #303133;
|
||
line-height: 20px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 8px;
|
||
}
|
||
.submit-box {
|
||
width: 900px;
|
||
margin: auto;
|
||
margin-top: 60px;
|
||
}
|
||
.submit-btn {
|
||
display: inline-block;
|
||
margin-left: 20px;
|
||
width: 180px;
|
||
height: 40px;
|
||
background: #a30113;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: #ffffff;
|
||
line-height: 40px;
|
||
font-style: normal;
|
||
}
|
||
|
||
.submit-btn2 {
|
||
display: inline-block;
|
||
margin-left: 20px;
|
||
width: 180px;
|
||
height: 40px;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
line-height: 14px;
|
||
font-style: normal;
|
||
padding-top: 12px;
|
||
border-radius: 4px;
|
||
border: 1px solid #bbbbbb;
|
||
}
|
||
.retry {
|
||
text-align: center;
|
||
margin: auto;
|
||
margin-top: 40px;
|
||
width: 180px;
|
||
height: 40px;
|
||
background: #a30113;
|
||
border-radius: 4px;
|
||
font-size: 16px;
|
||
line-height: 40px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.price-container {
|
||
margin: auto;
|
||
margin-top: 40px;
|
||
height: 268px;
|
||
width: 1010px;
|
||
padding-top: 79px;
|
||
/* 使用导入的图片作为背景 */
|
||
background-image: url(~@/assets/images/background.png);
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
/* 文本样式 */
|
||
color: #b5906b; /* 假设白色文本在背景上更清晰 */
|
||
font-size: 52px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
.credibility-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 8px 14px;
|
||
min-width: 240px;
|
||
height: 36px;
|
||
background: linear-gradient(180deg, #f1e4e4 0%, #ead7d7 100%);
|
||
border-radius: 12px;
|
||
box-shadow: 0 6px 16px rgba(163, 1, 19, 0.08);
|
||
color: #4f4f4f;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
.credibility-label {
|
||
color: #595959;
|
||
}
|
||
.credibility-stars {
|
||
display: flex;
|
||
position: relative;
|
||
width: 100px;
|
||
height: 18px;
|
||
align-items: center;
|
||
}
|
||
.stars-base,
|
||
.stars-fill {
|
||
font-size: 18px;
|
||
line-height: 1;
|
||
letter-spacing: 3px;
|
||
}
|
||
.stars-base {
|
||
color: #d0d0d0;
|
||
}
|
||
.stars-fill {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
color: #a30d15;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
.credibility-percent {
|
||
color: #595959;
|
||
font-weight: 600;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
.secondary-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 14px;
|
||
padding: 8px 14px;
|
||
min-width: 170px;
|
||
height: 36px;
|
||
background: linear-gradient(180deg, #e7ebf3 0%, #dce2ee 100%);
|
||
border-radius: 12px;
|
||
box-shadow: 0 6px 16px rgba(22, 93, 255, 0.06);
|
||
color: #5a5a5a;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
.score-box {
|
||
padding: 30px;
|
||
width: 320px;
|
||
height: 284px;
|
||
border-radius: 8px;
|
||
margin-left: 25px;
|
||
color: #303133;
|
||
}
|
||
|
||
/* 移除number类型输入框的箭头 */
|
||
input[type='number']::-webkit-outer-spin-button,
|
||
input[type='number']::-webkit-inner-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
</style>
|