1627 lines
68 KiB
Vue
1627 lines
68 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()
|
||
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);
|
||
}
|
||
}
|
||
|
||
const retry = () => {
|
||
status.value = 'create'
|
||
}
|
||
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>
|