我是个攻城狮
1184 lines
31 KiB
Vue
1184 lines
31 KiB
Vue
<template>
|
||
<Layout :titles="'区块链数字资产查询'" :title_content="'区块链数字资产查询'">
|
||
<view class="content-fx2" >
|
||
<view class="hy">
|
||
<view class="asset_type">
|
||
<view class="asset_nav" :class="{'active': activeTab === 1}" @tap="exchange(1)">
|
||
<image :src="activeTab === 1 ? '../static/img/asset/a_icon1x.png' : '../static/img/asset/a_icon1.png'" class="asset_icon"></image>
|
||
<view class="asset_title">资产编号</view>
|
||
</view>
|
||
<view class="asset_nav" :class="{'active': activeTab === 2}" @tap="exchange(2)">
|
||
<image :src="activeTab === 2 ? '../static/img/asset/a_icon2x.png' : '../static/img/asset/a_icon2.png'" class="asset_icon"></image>
|
||
<view class="asset_title">资产指纹</view>
|
||
</view>
|
||
<view class="asset_nav" :class="{'active': activeTab === 3}" @tap="exchange(3)">
|
||
<image :src="activeTab === 3 ? '../static/img/asset/a_icon3x.png' : '../static/img/asset/a_icon3.png'" class="asset_icon"></image>
|
||
<view class="asset_title">存证HASH</view>
|
||
</view>
|
||
</view>
|
||
<view class="form_query">
|
||
<!-- <image src="../static/img/page/ss.png" class="ss"></image> -->
|
||
<uni-data-select class="ssxl" placeholder="资产类别" v-model="sz_type" :localdata="range" ></uni-data-select>
|
||
|
||
<input type="text" v-model="hash" class="hash" name="param" :placeholder="placeholder" value="">
|
||
<view class="btn-query" id="btn_sub" @tap="find()">立即核验</view>
|
||
</view>
|
||
<view class="form_tips">
|
||
温馨提示
|
||
<p>1. 核验功能主要验证在本平台确权的数据资产数据是否被篡改，权属是否正确;</p>
|
||
<p>2. 可通过三种方式: 资产编号、资产指纹、存证HASH;</p>
|
||
<p>3. 通过验证的条件为: 在链上能匹配到一致的数据信息;</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content">
|
||
<view class="content_e" v-if="show">
|
||
核验通过<image src="../static/img/page/pass.png" class="pass"></image>，资产溯源记录如下
|
||
</view>
|
||
<view class="content_e" v-if="showsz">
|
||
核验通过<image src="../static/img/page/pass.png" class="pass"></image>，资产溯源记录如下
|
||
</view>
|
||
<view class="content_bg" >
|
||
<view class="content_e" v-if="shows" style="text-align: center;margin: 0 auto;">
|
||
查验无结果
|
||
</view>
|
||
<view class="content_l" v-if="showsz">
|
||
|
||
<view class="content2">
|
||
<view class="content2_t">
|
||
资产编号:
|
||
</view>
|
||
<view class="content2_no">
|
||
{{asset.item_no}}
|
||
</view>
|
||
</view>
|
||
<view class="content2">
|
||
<view class="content2_t">
|
||
资产哈希:
|
||
</view>
|
||
<view class="content2_no">
|
||
{{asset.hash}}
|
||
</view>
|
||
</view>
|
||
<view class="content2s">
|
||
<view class="content2">
|
||
<view class="content2_t">
|
||
资产名称:
|
||
</view>
|
||
<view class="content2_no">
|
||
{{asset.info.asset_name}}
|
||
</view>
|
||
</view>
|
||
<view class="content22">
|
||
<view class="content2_t">
|
||
资产类型:
|
||
</view>
|
||
<view class="content2_no" >
|
||
{{asset.info.asset_type}}
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="content_timeline">
|
||
<view class="content2_t">
|
||
资产溯源路径:
|
||
</view>
|
||
|
||
<view class="content_timeline_line">
|
||
<el-timeline >
|
||
<el-timeline-item
|
||
v-for="(activity, index) in activities"
|
||
:key="index"
|
||
:icon="activity.icon"
|
||
:type="activity.type"
|
||
:color="activity.color"
|
||
:size="activity.size"
|
||
>
|
||
<p class="content_timeline_name" :style="{color:activity.color}" >{{activity.name}}</p>
|
||
<p class="content_timeline_content">哈希：</p>
|
||
<p class="content_timeline_content">{{activity.hash}}</p>
|
||
<p class="content_timeline_content">{{activity.timestamp}}</p>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
<view class="content_more" @click="showMore()">
|
||
{{showAll ? '收起' : '查看更多'}}<i :class="showAll ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content_r" id="certs" v-if="showsz" >
|
||
<image :src="game.cert_url" class="content_r_img" mode="widthFix">
|
||
<view class="download" @tap="exportToPDFs(game.cert_url)">
|
||
下载证书
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="content_l" v-if="show">
|
||
|
||
<view class="content2">
|
||
<view class="content2_t">
|
||
资产编号:
|
||
</view>
|
||
<view class="content2_no">
|
||
{{asset.no}}
|
||
</view>
|
||
</view>
|
||
<view class="content2s">
|
||
<view class="content2">
|
||
<view class="content2_t">
|
||
资产名称:
|
||
</view>
|
||
<view class="content2_no">
|
||
{{asset.name}}
|
||
</view>
|
||
</view>
|
||
<view class="content22">
|
||
<view class="content2_t">
|
||
资产状态:
|
||
</view>
|
||
<view class="content2_no" v-if="game.asset_status=='talk'">
|
||
洽谈对接中
|
||
</view>
|
||
<view class="content2_no" v-if="game.asset_status=='financing'">
|
||
需要融资
|
||
</view>
|
||
<view class="content2_no" v-if="game.asset_status=='frozen'">
|
||
质押冻结中
|
||
</view>
|
||
<view class="content2_no" v-if="game.asset_status=='disposing'">
|
||
待处置
|
||
</view>
|
||
<view class="content2_no" v-if="game.asset_status=='disposed'">
|
||
处置完成
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content_timeline">
|
||
<view class="content2_t">
|
||
资产溯源路径:
|
||
</view>
|
||
|
||
<view class="content_timeline_line">
|
||
<el-timeline >
|
||
<el-timeline-item
|
||
v-for="(activity, index) in activities"
|
||
:key="index"
|
||
:icon="activity.icon"
|
||
:type="activity.type"
|
||
:color="activity.color"
|
||
:size="activity.size"
|
||
>
|
||
<p class="content_timeline_name" :style="{color:activity.color}">{{activity.name}}</p>
|
||
<p class="content_timeline_content">资产指纹：{{activity.content}}</p>
|
||
<p class="content_timeline_content">{{activity.hash}}</p>
|
||
<p class="content_timeline_content">{{activity.timestamp}}</p>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
<view class="content_more" @click="showMore()">
|
||
{{showAll ? '收起' : '查看更多'}}<i :class="showAll ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="content_r" id="certs" v-if="show">
|
||
<image :src="game.cert_url" class="content_r_img" mode="widthFix">
|
||
<view class="download" @tap="exportToPDFs(game.cert_url)">
|
||
下载证书
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content_l2s" v-if="show2">
|
||
<view class="content12s">
|
||
核验通过<image src="../static/img/page/pass.png" class="pass2s"></image>
|
||
</view>
|
||
<view class="content22s">
|
||
<view class="content2_t2s">
|
||
存证HASH
|
||
</view>
|
||
<view class="content2_no2s">
|
||
{{info.tx_hash}}
|
||
</view>
|
||
</view>
|
||
<view class="content22s">
|
||
<view class="content2_t2s">
|
||
上链时间
|
||
</view>
|
||
<view class="content2_no2s">
|
||
{{info.block_time}}
|
||
</view>
|
||
</view>
|
||
<view class="download2s" @tap="exportToPDF()">
|
||
下载证书
|
||
</view>
|
||
</view>
|
||
<view class="content_r2s" id="certs" v-if="show2">
|
||
<!-- <image src="../static/img/page/certs6.png" class="content_r_img" mode="widthFix"> -->
|
||
<view class="assets_name2s">{{info.pseudonym}}</view>
|
||
<view class="assets2s">{{info.worksname}}</view>
|
||
<view class="assets_time2s">{{info.block_time}}</view>
|
||
<view class="assets_no2s">{{info.ev_id}}</view>
|
||
<view class="assets_hi2s">{{info.block_height}}</view>
|
||
<view class="assets_hash2s">{{info.tx_hash}}</view>
|
||
<!-- <view class="assets_code">{{info.pseudonym}}</view> -->
|
||
</view>
|
||
|
||
|
||
<view class="content_l2s" v-if="show3">
|
||
<view class="content12s">
|
||
核验通过<image src="../static/img/page/pass.png" class="pass2s"></image>
|
||
</view>
|
||
<view class="content22s">
|
||
<view class="content2_t2s">
|
||
存证HASH
|
||
</view>
|
||
<view class="content2_no2s">
|
||
{{info.tx_hash}}
|
||
</view>
|
||
</view>
|
||
<view class="content22s">
|
||
<view class="content2_t2s">
|
||
上链时间
|
||
</view>
|
||
<view class="content2_no2s">
|
||
{{info.block_time}}
|
||
</view>
|
||
</view>
|
||
<view class="download2s" @tap="exportToPDF()">
|
||
下载证书
|
||
</view>
|
||
</view>
|
||
<view class="content_r2s" id="certs" v-if="show3">
|
||
<!-- <image src="../static/img/page/certs6.png" class="content_r_img" mode="widthFix"> -->
|
||
<view class="assets_name2s">{{info.pseudonym}}</view>
|
||
<view class="assets2s">{{info.worksname}}</view>
|
||
<view class="assets_time2s">{{info.block_time}}</view>
|
||
<view class="assets_no2s">{{info.ev_id}}</view>
|
||
<view class="assets_hi2s">{{info.block_height}}</view>
|
||
<view class="assets_hash2s">{{info.tx_hash}}</view>
|
||
<!-- <view class="assets_code">{{info.pseudonym}}</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 数字资产-->
|
||
|
||
|
||
</Layout>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import Layout from './part/layouts.vue';
|
||
import JsPDF from 'jspdf';
|
||
import html2canvas from 'html2canvas';
|
||
export default {
|
||
components:{
|
||
Layout,
|
||
// Kefu
|
||
},
|
||
data(){
|
||
return {
|
||
hash:'',
|
||
info:[],
|
||
show:false,
|
||
shows:false,
|
||
show2:false,
|
||
show3:false,
|
||
showAll:false,
|
||
showsz:false,
|
||
activeTab: 1,
|
||
placeholder:'可输入资产编号对存证证书进行核验',
|
||
types:'no',
|
||
onchain_logs:[],
|
||
asset:[],
|
||
game:[],
|
||
activitiess:[],
|
||
activities: [],
|
||
sz_type: 0,
|
||
range: [
|
||
// { value: 0, text: "资产类别" },
|
||
{ value: 1, text: "游戏产品" },
|
||
{ value: 2, text: "游戏数字资产" },
|
||
],
|
||
|
||
}
|
||
},
|
||
created() {
|
||
// this.getZs();
|
||
},
|
||
beforeDestroy() {
|
||
},
|
||
methods:{
|
||
showMore(){
|
||
this.showAll = !this.showAll;
|
||
if(this.showAll){
|
||
this.activities = this.activitiess;
|
||
}else{
|
||
this.activities = this.activitiess.slice(0,4);
|
||
}
|
||
},
|
||
exchange(tab){
|
||
this.activeTab = tab;
|
||
if(tab==1){
|
||
this.types = 'no';
|
||
this.placeholder = '可输入资产编号对存证证书进行核验';
|
||
}else if(tab==2){
|
||
this.types = 'fingerprint';
|
||
this.placeholder = '可输入资产指纹对存证证书进行核验';
|
||
}else if(tab==3){
|
||
this.types = 'hash';
|
||
this.placeholder = '可输入存证HASH对存证证书进行核验';
|
||
}
|
||
},
|
||
find_sz(){
|
||
let that = this;
|
||
that.show=false;
|
||
that.shows=false;
|
||
that.show2=false;
|
||
that.show3=false;
|
||
that.showAll=false;
|
||
that.game.cert_url = '';
|
||
that.showsz = false;
|
||
uni.showLoading({
|
||
title: '查询中'
|
||
});
|
||
if(that.hash==''){
|
||
uni.showToast({
|
||
title: '查询不能为空',
|
||
icon:'none',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
if(that.types=='no'){
|
||
var sztype = 'item_no'
|
||
}else if(that.types=='fingerprint'){
|
||
var sztype = 'key'
|
||
}else{
|
||
var sztype = 'hash'
|
||
}
|
||
// $allowedTypes = ['item_no', 'key', 'hash'];
|
||
that._post('gameasset.GameAsset/query',{
|
||
value: that.hash,
|
||
type: sztype
|
||
},res=>{
|
||
uni.hideLoading();
|
||
if(res.data.length==0){
|
||
//that.finds();
|
||
that.shows = true;
|
||
that.showsz = false;
|
||
return;
|
||
}else{
|
||
that.game.cert_url = res.data.cert_url;
|
||
that.asset = res.data.logs[0];
|
||
that.asset.info = JSON.parse(that.asset['info']);
|
||
//循环处理that.onchain_logs成activities
|
||
that.activitiess = res.data.logs.map((item,key)=>{
|
||
//item.type:asset-确权登记;evaluate-资产评估上链; frozen-质押冻结;transfer-处置转移;change-变更登记
|
||
let name = '';
|
||
if(item.type=='asset'){
|
||
name = '确权登记';
|
||
}else if(item.type=='evaluate'){
|
||
name = '资产评估上链';
|
||
}else if(item.type=='frozen'){
|
||
name = '质押冻结';
|
||
}else if(item.type=='transfer'){
|
||
name = '资产交易';
|
||
}else if(item.type=='change'){
|
||
name = '变更登记';
|
||
}
|
||
else if(item.type=='mint'){
|
||
name = '确权登记';
|
||
}
|
||
if(res.data.logs.length==key+2){
|
||
name = '资产发放';
|
||
}
|
||
let post_time = '';
|
||
post_time = item['info'].post_time;
|
||
if(post_time==undefined){
|
||
// console.log(JSON.parse(item['info']),111111)
|
||
post_time = JSON.parse(item['info'])['post_time'];
|
||
}
|
||
//循环第一个赋值color
|
||
if(key==0){
|
||
//判断item.type是否为asset，赋值name
|
||
|
||
return {
|
||
name: name,
|
||
content: item.key,
|
||
hash: item.hash,
|
||
timestamp: post_time,
|
||
size: 'large',
|
||
type: 'primary',
|
||
color:'#F86D07',
|
||
icon: 'el-icon-check'
|
||
}
|
||
}else{
|
||
return {
|
||
name: name,
|
||
content: item.key,
|
||
hash: item.hash,
|
||
timestamp: post_time,
|
||
icon: ''
|
||
}
|
||
}
|
||
})
|
||
if(!this.showAll){
|
||
this.activities = this.activitiess.slice(0, 4);
|
||
}
|
||
|
||
that.showsz = true;
|
||
}
|
||
}
|
||
,err=>{
|
||
if(err.data.msg=='未找到相关资产项'){
|
||
that.shows = true;
|
||
that.showsz = false;
|
||
// that.finds();
|
||
return;
|
||
}else{
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: err.data.msg
|
||
})
|
||
return;
|
||
}
|
||
// this.$message(err.data.msg);
|
||
}
|
||
)
|
||
},
|
||
|
||
find(){
|
||
let that = this;
|
||
if(that.sz_type==0){
|
||
uni.showToast({
|
||
title: '请选择资产类别',
|
||
icon:'none',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
if(that.sz_type==2){
|
||
this.find_sz();
|
||
return;
|
||
}
|
||
that.show=false;
|
||
that.shows=false;
|
||
that.show2=false;
|
||
that.show3=false;
|
||
that.showAll=false;
|
||
that.game.cert_url = '';
|
||
that.showsz = false;
|
||
uni.showLoading({
|
||
title: '查询中'
|
||
});
|
||
if(that.hash==''){
|
||
uni.showToast({
|
||
title: '查询不能为空',
|
||
icon:'none',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
that._post('asset.asset/query',{
|
||
param: that.hash,
|
||
type: that.types
|
||
},res=>{
|
||
uni.hideLoading();
|
||
if(res.data.length==0){
|
||
that.finds();
|
||
return;
|
||
}else{
|
||
that.onchain_logs = res.data.onchain_logs;
|
||
that.asset = res.data.asset;
|
||
that.game = res.data.game;
|
||
if(!that.game.cert_url){
|
||
that.show3=true;
|
||
that.show=false;
|
||
that.info.tx_hash=that.asset.tx_hash;
|
||
that.info.pseudonym=that.asset.name;
|
||
that.info.worksname=that.asset.username;
|
||
that.info.ev_id=that.asset.fingerprint;
|
||
that.info.block_height=that.asset.blockNumber;
|
||
//转换时间戳that.asset.record_time转换成日期2025-03-06 10:00:00
|
||
let date = new Date(that.asset.record_time*1000);
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth()+1;
|
||
let day = date.getDate();
|
||
let hour = date.getHours();
|
||
let minute = date.getMinutes();
|
||
let second = date.getSeconds();
|
||
that.info.block_time=year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
|
||
|
||
}else{
|
||
that.show=true;
|
||
that.show3=false;
|
||
}
|
||
//循环处理that.onchain_logs成activities
|
||
that.activitiess = that.onchain_logs.map((item,key)=>{
|
||
//item.type:asset-确权登记;evaluate-资产评估上链; frozen-质押冻结;transfer-处置转移;change-变更登记
|
||
let name = '';
|
||
if(item.type=='asset'){
|
||
name = '确权登记';
|
||
}else if(item.type=='evaluate'){
|
||
name = '资产评估上链';
|
||
}else if(item.type=='frozen'){
|
||
name = '质押冻结';
|
||
}else if(item.type=='transfer'){
|
||
name = '处置转移';
|
||
}else if(item.type=='change'){
|
||
name = '变更登记';
|
||
}
|
||
//循环第一个赋值color
|
||
if(key==0){
|
||
//判断item.type是否为asset，赋值name
|
||
|
||
return {
|
||
name: name,
|
||
content: item.fingerprint,
|
||
hash: item.tx_hash,
|
||
timestamp: item.create_time,
|
||
size: 'large',
|
||
type: 'primary',
|
||
color:'#F86D07',
|
||
icon: 'el-icon-check'
|
||
}
|
||
}else{
|
||
return {
|
||
name: name,
|
||
content: item.fingerprint,
|
||
hash: item.tx_hash,
|
||
timestamp: item.create_time,
|
||
}
|
||
}
|
||
})
|
||
if(!this.showAll){
|
||
this.activities = this.activitiess.slice(0, 4);
|
||
}
|
||
//that.show = true;
|
||
}
|
||
}
|
||
,err=>{
|
||
if(err.data.msg=='资产不存在'){
|
||
that.finds();
|
||
return;
|
||
}else{
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: err.data.msg
|
||
})
|
||
return;
|
||
}
|
||
// this.$message(err.data.msg);
|
||
}
|
||
)
|
||
},
|
||
|
||
finds(){
|
||
let that = this;
|
||
that.show=false;
|
||
that.shows=false;
|
||
that.show2=false;
|
||
that.showAll=false;
|
||
that.game.cert_url = '';
|
||
that.showsz = false;
|
||
if(that.hash==''){
|
||
uni.showToast({
|
||
title: '查询不能为空',
|
||
icon:'none',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
uni.showLoading({
|
||
title: '查询中'
|
||
});
|
||
uni.request({
|
||
url: 'https://banquan.scszcb.com/home/blockchain/queryresultnew?param='+this.hash,
|
||
method: 'POST',
|
||
success: function(res) {
|
||
uni.hideLoading();
|
||
if(res.data.msg=='没有查询到结果'){
|
||
that.shows = true;
|
||
that.show=false;
|
||
that.show2=false;
|
||
that.show3=false;
|
||
that.showAll=false;
|
||
return;
|
||
}else{
|
||
that.info = res.data;
|
||
that.show2 = true;
|
||
}
|
||
},
|
||
fail: function(eres) {
|
||
uni.hideLoading();
|
||
that.shows = true;
|
||
that.show=false;
|
||
that.show2=false;
|
||
that.show3=false;
|
||
that.showAll=false;
|
||
},
|
||
});
|
||
},
|
||
exportToPDF() {
|
||
let that = this
|
||
this.loading = false;
|
||
uni.showLoading({
|
||
title: '下载中'
|
||
});
|
||
html2canvas(document.querySelector('#certs'), {//对应的dom元素id(class也可以)
|
||
allowTaint: true,//是否允许跨域图像渲染画布
|
||
useCORS:true,//是否尝试使用 CORS 从服务器加载图像 解决图片跨域问题
|
||
dpi: 300, // 设置截图的分辨率
|
||
scale: 2, // 设置截图缩放比例，以适应pdf的dpi
|
||
imageQuality: 1 // 设置图片质量为最好
|
||
}).then(canvas => {
|
||
var contentWidth = canvas.width;
|
||
var contentHeight = canvas.height;
|
||
// 加水印
|
||
// console.log(canvas)
|
||
var ctx=canvas.getContext("2d");
|
||
ctx.rotate(Math.PI / 180 * 20);
|
||
ctx.font="60px";
|
||
ctx.fillStyle = "rgba(255,255,255,1)";
|
||
ctx.strokeText("证书",250,50);
|
||
// 加水印
|
||
//一页pdf显示html页面生成的canvas高度;
|
||
var pageHeight = contentWidth / 592.28 * 841.89;
|
||
//未生成pdf的html页面高度
|
||
var leftHeight = contentHeight;
|
||
//页面偏移
|
||
var position = 0;
|
||
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
|
||
var imgWidth = 595.28;
|
||
var imgHeight = 592.28/contentWidth * contentHeight;
|
||
|
||
var pageData = canvas.toDataURL('image/jpeg', 1.0);
|
||
var pdf = new JsPDF('', 'pt', 'a4');
|
||
|
||
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
|
||
//当内容未超过pdf一页显示的范围，无需分页
|
||
if (leftHeight < pageHeight) {
|
||
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
|
||
} else {
|
||
while(leftHeight > 0) {
|
||
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
|
||
leftHeight -= pageHeight;
|
||
position -= 841.89;
|
||
//避免添加空白页
|
||
if(leftHeight > 0) {
|
||
pdf.addPage();
|
||
}
|
||
}
|
||
}
|
||
pdf.save('证书.pdf');
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
exportToPDFs(url){
|
||
// url = https://static-cog.scszsj.com/game/cert/2025/03/67c940cee1730.jpg 替换成 https://szsj-cog.oss-cn-chengdu.aliyuncs.com/game/cert/2025/03/67c940cee1730.jpg
|
||
let ulrs = 'https://szsj-cog.oss-cn-chengdu.aliyuncs.com/';
|
||
url = url.replace('https://static-cog.scszsj.com', ulrs);
|
||
// 根据url电脑浏览器打开
|
||
window.open(url, '_blank');
|
||
},
|
||
downPdf() {
|
||
window.screen.zoom = 0.5;
|
||
window.scrollTo(500, 0) //首先滚动到顶部 如果要某一个元素 就滚动到元素位置
|
||
let that = this;
|
||
const dpi = 600;
|
||
html2canvas(document.querySelector('#certs'), {//对应的dom元素id(class也可以)
|
||
allowTaint: true,//是否允许跨域图像渲染画布
|
||
useCORS:true,//是否尝试使用 CORS 从服务器加载图像 解决图片跨域问题
|
||
dpi: dpi, // 设置截图的分辨率
|
||
scale: dpi/96, // 设置截图缩放比例，以适应pdf的dpi
|
||
imageQuality: 1 // 设置图片质量为最好
|
||
}).then(function (canvas) {
|
||
/* 提高倍数 */
|
||
// canvas.width = canvas.width*2;
|
||
// canvas.height = canvas.height*2;
|
||
//生成的canvas实例
|
||
var contentWidth = canvas.width;//所选元素宽度
|
||
var contentHeight = canvas.height;//所选元素高度
|
||
console.log(contentWidth,222)
|
||
console.log(contentHeight,222)
|
||
|
||
//一页pdf显示html页面生成的canvas高度;
|
||
var pageHeight = contentWidth / 595.28 * 841.89;
|
||
//未生成pdf的html页面高度
|
||
var leftHeight = contentHeight;
|
||
//pdf页面偏移
|
||
var position = 0;
|
||
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
|
||
var imgWidth = 595.28;
|
||
var imgHeight = 595.28 / contentWidth * contentHeight;
|
||
console.log(imgWidth,222)
|
||
console.log(imgHeight,222)
|
||
//return false;
|
||
var pageData = canvas.toDataURL('image/jpeg', 1.0);//转成jpg格式
|
||
var pdf = new JsPDF('', 'pt', 'a4',true);//生成pdf实例
|
||
|
||
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
|
||
//当内容未超过pdf一页显示的范围，无需分页
|
||
// if (leftHeight < pageHeight) {
|
||
// pdf.addImage(pageData, 'PNG', 0, 0, imgWidth, imgHeight,'', 'FAST');
|
||
// } else {
|
||
// while (leftHeight > 0) {
|
||
// pdf.addImage(pageData, 'PNG', 0, position, imgWidth, imgHeight,'', 'FAST')
|
||
// leftHeight -= pageHeight;
|
||
// position -= 841.89;
|
||
// //避免添加空白页
|
||
// if (leftHeight > 0) {
|
||
// pdf.addPage();
|
||
// }
|
||
// }
|
||
// }
|
||
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight,'', 'FAST');
|
||
//保存
|
||
pdf.save('证书.pdf');
|
||
//可以吧生成的pdf转成其他格式 如 base64
|
||
pdf.output('datauristring')//获取到base64 的pdf
|
||
})
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.asset_type{
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
width:507px;
|
||
margin: 0 auto;
|
||
}
|
||
.asset_nav{
|
||
display: flex;
|
||
width: 140px;
|
||
cursor: pointer;
|
||
align-items: center;
|
||
}
|
||
.asset_title{
|
||
font-weight: 400;
|
||
font-size: 22px;
|
||
color: #979797;
|
||
}
|
||
|
||
.asset_icon{
|
||
width: 22px;
|
||
height: 22px;
|
||
margin-right: 10px;
|
||
}
|
||
.active .asset_title{
|
||
font-weight: 500;
|
||
color: #F86D07;
|
||
}
|
||
|
||
.content_e{
|
||
height: 132px;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 24px;
|
||
color: #332C26;
|
||
}
|
||
.hy{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
width: 670px;
|
||
height: 241px;
|
||
|
||
}
|
||
.hy_title{
|
||
background: -webkit-linear-gradient(#FFA536, #EF6F04);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-weight: bold;
|
||
font-size: 37px;
|
||
letter-spacing: 4px;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.form_query{
|
||
width: 670px;
|
||
height: 68px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-radius: 14px;
|
||
border: 2px solid #f5be8d;
|
||
background-color: #ffffff;
|
||
cursor: pointer;
|
||
}
|
||
.ssxl{
|
||
width: 112px;
|
||
height: 32px;
|
||
border-radius: 6px 6px 6px 6px;
|
||
margin-left: 32px;
|
||
}
|
||
::v-deep .uni-select{
|
||
width: 132px;
|
||
height: 32px;
|
||
background: #FFDBC2 !important;
|
||
border: none;
|
||
}
|
||
::v-deep .uni-select__input-placeholder{
|
||
font-family: Source Han Sans, Source Han Sans;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #3D3D3D;
|
||
line-height: 22px;
|
||
}
|
||
::v-deep .uni-select__input-text{
|
||
text-align: center;
|
||
font-family: Source Han Sans, Source Han Sans;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #3D3D3D;
|
||
line-height: 22px;
|
||
}
|
||
::v-deep .uniui-clear{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
::v-deep .uniui-clear:before{
|
||
font-size: 18px !important;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.hash{
|
||
width:346px;
|
||
}
|
||
.btn-query{
|
||
width: 125px;
|
||
height: 68px;
|
||
background: linear-gradient(to bottom, #FFD161, #FF9336);
|
||
border-radius: 0px 12px 12px 0px;
|
||
text-align: center;
|
||
line-height: 68px;
|
||
font-weight: 400;
|
||
font-size: 20px;
|
||
color: #332C26;
|
||
}
|
||
.content-fx2{
|
||
width: 100%;
|
||
height: 428px;
|
||
background-image: url('../static/img/page/hys.jpg');
|
||
background-size: cover;
|
||
position:relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.content{
|
||
width: 100%;
|
||
min-height: 1076px;
|
||
border-radius: 2px 2px 2px 2px;
|
||
background: linear-gradient(to bottom, #fdf7f1, #faece1);
|
||
overflow: hidden;
|
||
background-image: url('../static/img/asset/a_bg.jpg');
|
||
background-size: cover;
|
||
}
|
||
.content_bg{
|
||
width: 1140px;
|
||
min-height: 1073px;
|
||
// box-shadow: 0px 0px 21px #BFA188;
|
||
margin: 19px auto 21px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.content_l{
|
||
width: 505px;
|
||
height: 1073px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.content1{
|
||
display: flex;
|
||
font-weight: 400;
|
||
font-size: 22px;
|
||
color: #332C26;
|
||
}
|
||
.content2s{
|
||
width:100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.content2{
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.content22{
|
||
display: flex;
|
||
flex-direction: column;
|
||
width:65px;
|
||
}
|
||
.content2_t{
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #7E7C7A;
|
||
margin-bottom: 12px;
|
||
}
|
||
.content2_no{
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: #433B34;
|
||
// width: 270px;
|
||
word-wrap: break-word;
|
||
margin-bottom: 30px;
|
||
}
|
||
.pass{
|
||
width: 29px;
|
||
height: 29px;
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.content_r{
|
||
width: 562px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
margin-left: 30px;
|
||
font-size: 16px;
|
||
color: #262626;
|
||
font-weight: bold;
|
||
|
||
}
|
||
.content_r_img{
|
||
width: 562px;
|
||
}
|
||
.assets_name{
|
||
position: absolute;
|
||
top: 375px;
|
||
left: 220px;
|
||
}
|
||
.assets{
|
||
position: absolute;
|
||
top: 407px;
|
||
left: 234px;
|
||
|
||
}
|
||
.assets_time{
|
||
position: absolute;
|
||
top: 472px;
|
||
left: 234px;
|
||
|
||
}
|
||
.assets_no{
|
||
position: absolute;
|
||
top: 504px;
|
||
left: 234px;
|
||
|
||
}
|
||
.assets_hi{
|
||
position: absolute;
|
||
top: 536px;
|
||
left: 234px;
|
||
|
||
}
|
||
.assets_hash{
|
||
position: absolute;
|
||
top: 563px;
|
||
left: 234px;
|
||
width: 486px;
|
||
word-wrap: break-word;
|
||
font-size: 14px;
|
||
}
|
||
.assets_code{
|
||
position: absolute;
|
||
top: 640px;
|
||
left: 596px;
|
||
|
||
}
|
||
.download{
|
||
width: 130px;
|
||
height: 40px;
|
||
background: radial-gradient( 100% 0% at 0% 0%, #FF9336 0%, #FFB95D 73%);
|
||
// background: linear-gradient(to right, #FFB95D, #FF9336);
|
||
box-shadow: 4px 0px 8px 0px #9A6337;
|
||
border-radius: 9px 9px 9px 9px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: #332C26;
|
||
cursor: pointer;
|
||
margin:0 auto;
|
||
margin-top: 40px;
|
||
}
|
||
.form_tips{
|
||
width: 458px;
|
||
height: 78px;
|
||
font-family: "Source Han Sans CN", sans-serif, "Source Han Sans CN", sans-serif;
|
||
font-weight: 400;
|
||
font-size: 13px;
|
||
color: #C59473;
|
||
line-height: 24px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
margin-left:40px;
|
||
}
|
||
.content_timeline_line{
|
||
width: 450px;
|
||
height: 668px;
|
||
background: #FFFFFF;
|
||
box-shadow: 4px 0px 8px 0px rgb(230, 182, 142);
|
||
border-radius: 12px 12px 12px 12px;
|
||
padding: 40px;
|
||
margin-top: 18px;
|
||
overflow-y: auto; /* 允许垂直方向滚动 */
|
||
overflow-x: hidden; /* 隐藏水平滚动条 */
|
||
word-wrap: break-word; /* 长单词换行 */
|
||
}
|
||
.content_timeline_line::-webkit-scrollbar {
|
||
display: none; /* 隐藏滚动条 */
|
||
}
|
||
.content_more{
|
||
cursor: pointer;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #979797;
|
||
margin: 0 auto;
|
||
text-align:center
|
||
}
|
||
.content_timeline_name{
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
color: #979797;
|
||
margin-bottom: 12px;
|
||
}
|
||
.content_timeline_content{
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #979797;
|
||
margin-bottom: 6px;
|
||
}
|
||
//show2
|
||
.content_l2s{
|
||
width: 286px;
|
||
height: 300px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
margin-left: 30px;
|
||
margin-top: 300px;
|
||
}
|
||
.content12s{
|
||
display: flex;
|
||
font-weight: 400;
|
||
font-size: 22px;
|
||
color: #332C26;
|
||
}
|
||
.content22s{
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.content2_t2s{
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #7E7C7A;
|
||
margin-bottom: 18px;
|
||
}
|
||
.content2_no2s{
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #433B34;
|
||
width: 270px;
|
||
word-wrap: break-word;
|
||
}
|
||
.pass2s{
|
||
width: 29px;
|
||
height: 29px;
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.content_r2s{
|
||
width: 800px;
|
||
height: 1128px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
margin-left: 30px;
|
||
font-size: 16px;
|
||
color: #262626;
|
||
font-weight: bold;
|
||
margin-top: -20px;
|
||
background-image: url('../static/img/page/certbg.png');
|
||
background-size: cover;
|
||
margin-top: 100px;
|
||
}
|
||
.content_r_img2s{
|
||
width: 800px;
|
||
}
|
||
.assets_name2s{
|
||
position: absolute;
|
||
top: 373px;
|
||
left: 220px;
|
||
}
|
||
.assets2s{
|
||
position: absolute;
|
||
top: 404px;
|
||
left: 230px;
|
||
|
||
}
|
||
.assets_time2s{
|
||
position: absolute;
|
||
top: 470px;
|
||
left: 234px;
|
||
|
||
}
|
||
.assets_no2s{
|
||
position: absolute;
|
||
top: 504px;
|
||
left: 234px;
|
||
|
||
}
|
||
.assets_hi2s{
|
||
position: absolute;
|
||
top: 536px;
|
||
left: 234px;
|
||
|
||
}
|
||
.assets_hash2s{
|
||
position: absolute;
|
||
top: 560px;
|
||
left: 234px;
|
||
width: 486px;
|
||
word-wrap: break-word;
|
||
font-size: 14px;
|
||
}
|
||
.assets_code2s{
|
||
position: absolute;
|
||
top: 640px;
|
||
left: 596px;
|
||
|
||
}
|
||
.download2s{
|
||
width: 130px;
|
||
height: 40px;
|
||
background: radial-gradient( 100% 0% at 0% 0%, #FF9336 0%, #FFB95D 73%);
|
||
// background: linear-gradient(to right, #FFB95D, #FF9336);
|
||
box-shadow: 4px 0px 8px 0px #9A6337;
|
||
border-radius: 9px 9px 9px 9px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #332C26;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|