Skip to content

jml0128 / xrk-bi

Go to a project
Commit 468e98bd by web
Options

Merge branch 'feature/照片墙' into 'develop' 

Feature/照片墙

See merge request !19
2 parents 3d37b3a6 9bd54476
Inline Side-by-side
Showing with 1443 additions and 54 deletions
.eslintignore
/dist /dist
\ No newline at end of file /src/packages/bi/src/components/photo-wall/waterfall.vue
\ No newline at end of file
package.json
{ {
"name": "xrk-bi", "name": "xrk-bi",
"version": "0.3.0-beta.21", "version": "0.4.1",
"description": "xrk-bi", "description": "xrk-bi",
"author": "xrk", "author": "xrk",
"main": "dist/bundler.js", "main": "dist/bundler.js",
......
src/App copy.vue 0 → 100644
<!--
* @Description:
* @LastEditors: Please set LastEditors
* @Date: 2021-01-28 23:29:19
-->
<template>
<div>
<XrkBi
:print="1"
:cantEdit="2"
projectType="20"
from="cso"
v-bind="config"
:getTemplateList="getTemplateList"
></XrkBi>
</div>
<!-- <ul class="pervie">
<li name="任务记录">
<h1>任务记录</h1>
<TaskDetail :config="taskDetailOptions"></TaskDetail>
</li>
<li name="滑动组件">
<h1>滑动组件</h1>
<div style="padding:300px 0 30px 100px;width:350px;" class="block">
<input type="text" v-model="form.phone" />
<button @click="showVerify">submit</button>
<XrkSlideVerify
ref="verify"
title="12"
:options="options"
></XrkSlideVerify>
</div>
</li>
</ul> -->
</template>
<script>
import { getQueryVariable } from './packages/bi/src/chart-type/common';
export default {
name: 'App',
data() {
return {
isMobile: +getQueryVariable('mobile') === 1,
isPrint: +getQueryVariable('print') === 1,
projectType: +getQueryVariable('projectType') || 6,
componentName: getQueryVariable('componentName') || 'XrkBi',
config: {
getBaseInfo() {
return {
data: {
data: [
{
styleConfigureSettlementTime: '2022-05-23',
createUserId: 3,
createFullName: '尚杰',
projectType: 5,
endDt: null,
isAuditCso: 0,
dataCollectNumber: 674806,
type: 1,
title: '关于BI照片墙压力002产品全国区域患者调研项目数据报告',
isAuditGongye: 0,
aspEnterpriseNameWrite:
'项目方：中国人民银行资本管理有限责任公司-甲方',
aspEnterpriseName: '康师傅方便面投资（中国）有限公司-乙方',
examinePeopleNumber: 30673,
executePeopleNumber: 60,
taskSum: 30673,
clickNum: null,
id: 155846,
aspNamePosition: null,
titlePosition: null,
reportId: null,
coverTemplateUrl:
'https://cdn.yxvzb.com/sunflower/invoice/1651894583988.png',
isContrainGroupAnalyse: 0,
nameShowType: 1,
patternType: 1,
videoNum: null,
isContrainSingleAnalyse: 1,
createDt: 1653307550000,
coverTemplateId: 2,
enterpriseType: null,
isAuditAllince: 0,
settlementTime: '2022-05-23',
chooseTopicNum: 2,
startDt: null,
enterpriseId: null,
projectName: '关于BI照片墙压力002产品全国区域患者调研项目',
fenpeiId: 121433,
sendEnterpriseName: '中国人民银行资本管理有限责任公司-甲方',
projectId: 6945,
styleConfigureId: 16248,
styleConfigureSettlementTimePosition: null,
totalTopicNum: 2,
csoAuditUser: null
}
],
message: '操作成功',
status: '1'
}
};
},
getFixedInfo() {
return {
data: {
data: [
{
resultSystem:
'项目执行总人数60人，其中男性60人，占比100.00%；女性0，占比0%',
resultUser: null,
analyseDescribe:
'执行人数60，18-30岁的男性占比100.00% ，女性0%；31-40岁的男性占比0% ，女性0%；41-50岁的男性占比0% ，女性0%；51岁以上的男性占比0% ，女性0%',
chartType: null,
colourGroup: null,
id: 63753,
fixedCountInfos: [
{
id: 208295,
fixedDetaileId: 63753,
num: 60,
passType: null,
genderType: '男',
ageType: null,
taskNumType: null
},
{
id: 208296,
fixedDetaileId: 63753,
num: 0,
passType: null,
genderType: '女',
ageType: null,
taskNumType: null
}
],
type: 1,
createDt: 1653307550000
},
{
resultSystem:
'项目执行总人数60人，其中18-30岁的60人，占比100.00%； 31-40岁的0人，占比0%；41-50岁的0人，占比0%；50岁及其以上0人 ，占比0%',
resultUser: null,
analyseDescribe:
'执行人数60，18-30岁的男性占比100.00% ，女性0%；31-40岁的男性占比0% ，女性0%；41-50岁的男性占比0% ，女性0%；51岁以上的男性占比0% ，女性0%',
chartType: null,
colourGroup: null,
id: 63754,
fixedCountInfos: [
{
id: 208297,
fixedDetaileId: 63754,
num: 60,
passType: null,
genderType: '18-30岁',
ageType: null,
taskNumType: null
},
{
id: 208298,
fixedDetaileId: 63754,
num: 0,
passType: null,
genderType: '31-40岁',
ageType: null,
taskNumType: null
},
{
id: 208299,
fixedDetaileId: 63754,
num: 0,
passType: null,
genderType: '41-50岁',
ageType: null,
taskNumType: null
},
{
id: 208300,
fixedDetaileId: 63754,
num: 0,
passType: null,
genderType: '51岁以上',
ageType: null,
taskNumType: null
}
],
type: 2,
createDt: 1653307550000
},
{
resultSystem:
'项目执行总人数60人：完成1-10单的有0人，占比0%；完成11-20单的有0人，占比0%；完成21-30单的有0人，占比0%；完成31-40单的有0人，占比0%；完成41单以上的有60人，占比100.00%',
resultUser: null,
analyseDescribe: null,
chartType: null,
colourGroup: null,
id: 63755,
fixedCountInfos: [
{
id: 208301,
fixedDetaileId: 63755,
num: 0,
passType: null,
genderType: '1-10',
ageType: null,
taskNumType: null
},
{
id: 208302,
fixedDetaileId: 63755,
num: 0,
passType: null,
genderType: '11-20',
ageType: null,
taskNumType: null
},
{
id: 208303,
fixedDetaileId: 63755,
num: 0,
passType: null,
genderType: '21-30',
ageType: null,
taskNumType: null
},
{
id: 208304,
fixedDetaileId: 63755,
num: 0,
passType: null,
genderType: '31-40',
ageType: null,
taskNumType: null
},
{
id: 208305,
fixedDetaileId: 63755,
num: 60,
passType: null,
genderType: '41个以上',
ageType: null,
taskNumType: null
}
],
type: 3,
createDt: 1653307550000
},
{
resultSystem:
'项目执行总任务数：0次，其中通过任务数0，占比0%；未通过任务数0，占比0%',
resultUser: null,
analyseDescribe: null,
chartType: null,
colourGroup: null,
id: 63756,
fixedCountInfos: [
{
id: 208306,
fixedDetaileId: 63756,
num: 0,
passType: null,
genderType: '通过',
ageType: null,
taskNumType: null
},
{
id: 208307,
fixedDetaileId: 63756,
num: 0,
passType: null,
genderType: '未通过',
ageType: null,
taskNumType: null
}
],
type: 4,
createDt: 1653307550000
}
],
message: '操作成功',
status: '1'
}
};
},
getTopicInfo() {
return {
data: {
data: [
{
resultSystem:
'参与【此题为单选题（点击编辑题干）】调查的30673个样本。选择答案【选项1】有30673个，占比100.00%',
resultUser: null,
isDelete: 0,
type: 1,
createDt: 1653307550000,
topicTitle: '此题为单选题（点击编辑题干）',
topicId: 7768,
showSort: null,
chartType: null,
topicCountInfos: [
{
xTopicName: '选项1',
topicDetaileId: 124730,
countNum: 30673,
id: 467661
}
],
colourGroup: null,
id: 124730,
resultIsShow: 1
},
{
resultSystem:
'参与【此题为多选题（点击编辑题干）】调查的30673个样本。选择答案【选项1】有30673个，占比100.00%',
resultUser: null,
isDelete: 0,
type: 2,
createDt: 1653307550000,
topicTitle: '此题为多选题（点击编辑题干）',
topicId: 7771,
showSort: null,
chartType: null,
topicCountInfos: [
{
xTopicName: '选项1',
topicDetaileId: 124731,
countNum: 30673,
id: 467662
}
],
colourGroup: null,
id: 124731,
resultIsShow: 1
}
],
message: '操作成功',
status: '1'
}
};
},
getGroupInfo() {
return {
data: { data: [], message: '操作成功', status: '1' }
};
},
// 获取是否含有照片题
getImageQuestionCount() {
return {
data: { data: 2, message: '操作成功', status: '1' }
};
},
// 当期BI-保持选择的图片
saveBiPicList() {
return {
data: { data: [], message: '操作成功', status: '1' }
};
},
// 当期BI-任务记录图片列表
getTaskPicList() {
return {
data: {
data: {
imageStyle: 1, //展示样式 1 流式 2平铺
imageSize: 2, //图片大小 1 大 2中 3小
taskImages: [
{
biInfoId: 123, //BI主键
taskId: 123, //任务记录ID
imageUrl:
'http://yiyang.oss-cn-beijing.aliyuncs.com/WEB/SaaS/images/2103251844.png'
},
{
biInfoId: 123, //BI主键
taskId: 123, //任务记录ID
imageUrl:
'http://yiyang.oss-cn-beijing.aliyuncs.com/WEB/SaaS/images/2103251844.png'
},
{
biInfoId: 123, //BI主键
taskId: 123, //任务记录ID
imageUrl:
'http://yiyang.oss-cn-beijing.aliyuncs.com/WEB/SaaS/images/2103251844.png'
}
]
},
message: '操作成功',
status: '1'
}
};
},
// 累计、当期、自定义BI获取随机50张图片
getImageList() {
return {
data: {
data: {
topicDetailId: 124732,
isDelete: 0,
imageUrls: [
{
id: 5253,
biInfoId: 155846,
taskId: 1508932,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/M7U6JV_1653287244442.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=FFFEFFFEFFFE3EC67F7C7F208BFECCE2E7982138227E46660FF03FF0F29E8004&pHash=E0A01A8A00821080'
},
{
id: 5254,
biInfoId: 155846,
taskId: 1508683,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/M7U6JV_1653287244442.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=FFFEFFFEFFFE3EC67F7C7F208BFECCE2E7982138227E46660FF03FF0F29E8004&pHash=E0A01A8A00821080'
},
{
id: 5255,
biInfoId: 155846,
taskId: 1509580,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3WRPC8_1653287250895.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=C5FB9E7F1C9FE01950A3BFDF77FFFFF8F8FCFFF5FFF6FE0A8000000000000000&pHash=DA10241800000000'
},
{
id: 5256,
biInfoId: 155846,
taskId: 1509456,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/R4JPN1_1653287247871.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=7BFCC7FFE3202860C3C964BDF7E27FEA7FFEFFFCFCE061A0F900E800B2009200&pHash=D9B4270020000000'
},
{
id: 5257,
biInfoId: 155846,
taskId: 1508944,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/R4JPN1_1653287247871.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=7BFCC7FFE3202860C3C964BDF7E27FEA7FFEFFFCFCE061A0F900E800B2009200&pHash=D9B4270020000000'
},
{
id: 5258,
biInfoId: 155846,
taskId: 1509098,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3WRPC8_1653287250895.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=C5FB9E7F1C9FE01950A3BFDF77FFFFF8F8FCFFF5FFF6FE0A8000000000000000&pHash=DA10241800000000'
},
{
id: 5259,
biInfoId: 155846,
taskId: 1509051,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3WRPC8_1653287250895.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=C5FB9E7F1C9FE01950A3BFDF77FFFFF8F8FCFFF5FFF6FE0A8000000000000000&pHash=DA10241800000000'
},
{
id: 5260,
biInfoId: 155846,
taskId: 1509463,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3WRPC8_1653287250895.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=C5FB9E7F1C9FE01950A3BFDF77FFFFF8F8FCFFF5FFF6FE0A8000000000000000&pHash=DA10241800000000'
},
{
id: 5261,
biInfoId: 155846,
taskId: 1509453,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3LYNWV_1653287253819.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=0000000000033FFFDFFF3FFFFFFFFFDBFFFFFFC03FFFDFFD177FE400003F4080&pHash=831B494000000400'
},
{
id: 5262,
biInfoId: 155846,
taskId: 1509000,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3WRPC8_1653287250895.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=C5FB9E7F1C9FE01950A3BFDF77FFFFF8F8FCFFF5FFF6FE0A8000000000000000&pHash=DA10241800000000'
},
{
id: 5263,
biInfoId: 155846,
taskId: 1509477,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/R4JPN1_1653287247871.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=7BFCC7FFE3202860C3C964BDF7E27FEA7FFEFFFCFCE061A0F900E800B2009200&pHash=D9B4270020000000'
},
{
id: 5264,
biInfoId: 155846,
taskId: 1509368,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/M7U6JV_1653287244442.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=FFFEFFFEFFFE3EC67F7C7F208BFECCE2E7982138227E46660FF03FF0F29E8004&pHash=E0A01A8A00821080'
},
{
id: 5265,
biInfoId: 155846,
taskId: 1509064,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3LYNWV_1653287253819.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=0000000000033FFFDFFF3FFFFFFFFFDBFFFFFFC03FFFDFFD177FE400003F4080&pHash=831B494000000400'
},
{
id: 5266,
biInfoId: 155846,
taskId: 1509141,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3LYNWV_1653287253819.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=0000000000033FFFDFFF3FFFFFFFFFDBFFFFFFC03FFFDFFD177FE400003F4080&pHash=831B494000000400'
},
{
id: 5267,
biInfoId: 155846,
taskId: 1509233,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/M7U6JV_1653287244442.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=FFFEFFFEFFFE3EC67F7C7F208BFECCE2E7982138227E46660FF03FF0F29E8004&pHash=E0A01A8A00821080'
},
{
id: 5268,
biInfoId: 155846,
taskId: 1509546,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3WRPC8_1653287250895.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=C5FB9E7F1C9FE01950A3BFDF77FFFFF8F8FCFFF5FFF6FE0A8000000000000000&pHash=DA10241800000000'
},
{
id: 5269,
biInfoId: 155846,
taskId: 1508757,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3LYNWV_1653287253819.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=0000000000033FFFDFFF3FFFFFFFFFDBFFFFFFC03FFFDFFD177FE400003F4080&pHash=831B494000000400'
},
{
id: 5270,
biInfoId: 155846,
taskId: 1509436,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/M7U6JV_1653287244442.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=FFFEFFFEFFFE3EC67F7C7F208BFECCE2E7982138227E46660FF03FF0F29E8004&pHash=E0A01A8A00821080'
},
{
id: 5271,
biInfoId: 155846,
taskId: 1508743,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3WRPC8_1653287250895.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=C5FB9E7F1C9FE01950A3BFDF77FFFFF8F8FCFFF5FFF6FE0A8000000000000000&pHash=DA10241800000000'
},
{
id: 5272,
biInfoId: 155846,
taskId: 1508735,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/M7U6JV_1653287244442.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=FFFEFFFEFFFE3EC67F7C7F208BFECCE2E7982138227E46660FF03FF0F29E8004&pHash=E0A01A8A00821080'
},
{
id: 5273,
biInfoId: 155846,
taskId: 1509518,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/M7U6JV_1653287244442.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=FFFEFFFEFFFE3EC67F7C7F208BFECCE2E7982138227E46660FF03FF0F29E8004&pHash=E0A01A8A00821080'
},
{
id: 5274,
biInfoId: 155846,
taskId: 1508821,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/R4JPN1_1653287247871.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=7BFCC7FFE3202860C3C964BDF7E27FEA7FFEFFFCFCE061A0F900E800B2009200&pHash=D9B4270020000000'
},
{
id: 5275,
biInfoId: 155846,
taskId: 1509240,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/M7U6JV_1653287244442.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=FFFEFFFEFFFE3EC67F7C7F208BFECCE2E7982138227E46660FF03FF0F29E8004&pHash=E0A01A8A00821080'
},
{
id: 5276,
biInfoId: 155846,
taskId: 1509222,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/R4JPN1_1653287247871.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=7BFCC7FFE3202860C3C964BDF7E27FEA7FFEFFFCFCE061A0F900E800B2009200&pHash=D9B4270020000000'
},
{
id: 5277,
biInfoId: 155846,
taskId: 1509035,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/R4JPN1_1653287247871.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=7BFCC7FFE3202860C3C964BDF7E27FEA7FFEFFFCFCE061A0F900E800B2009200&pHash=D9B4270020000000'
},
{
id: 5278,
biInfoId: 155846,
taskId: 1509141,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3WRPC8_1653287250895.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=C5FB9E7F1C9FE01950A3BFDF77FFFFF8F8FCFFF5FFF6FE0A8000000000000000&pHash=DA10241800000000'
},
{
id: 5279,
biInfoId: 155846,
taskId: 1508767,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3LYNWV_1653287253819.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=0000000000033FFFDFFF3FFFFFFFFFDBFFFFFFC03FFFDFFD177FE400003F4080&pHash=831B494000000400'
},
{
id: 5280,
biInfoId: 155846,
taskId: 1508557,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3LYNWV_1653287253819.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=0000000000033FFFDFFF3FFFFFFFFFDBFFFFFFC03FFFDFFD177FE400003F4080&pHash=831B494000000400'
},
{
id: 5281,
biInfoId: 155846,
taskId: 1509580,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/M7U6JV_1653287244442.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=FFFEFFFEFFFE3EC67F7C7F208BFECCE2E7982138227E46660FF03FF0F29E8004&pHash=E0A01A8A00821080'
},
{
id: 5282,
biInfoId: 155846,
taskId: 1508749,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3WRPC8_1653287250895.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=C5FB9E7F1C9FE01950A3BFDF77FFFFF8F8FCFFF5FFF6FE0A8000000000000000&pHash=DA10241800000000'
},
{
id: 5283,
biInfoId: 155846,
taskId: 1509133,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3WRPC8_1653287250895.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=C5FB9E7F1C9FE01950A3BFDF77FFFFF8F8FCFFF5FFF6FE0A8000000000000000&pHash=DA10241800000000'
},
{
id: 5284,
biInfoId: 155846,
taskId: 1509179,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3WRPC8_1653287250895.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=C5FB9E7F1C9FE01950A3BFDF77FFFFF8F8FCFFF5FFF6FE0A8000000000000000&pHash=DA10241800000000'
},
{
id: 5285,
biInfoId: 155846,
taskId: 1509241,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/M7U6JV_1653287244442.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=FFFEFFFEFFFE3EC67F7C7F208BFECCE2E7982138227E46660FF03FF0F29E8004&pHash=E0A01A8A00821080'
},
{
id: 5286,
biInfoId: 155846,
taskId: 1508940,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/R4JPN1_1653287247871.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=7BFCC7FFE3202860C3C964BDF7E27FEA7FFEFFFCFCE061A0F900E800B2009200&pHash=D9B4270020000000'
},
{
id: 5287,
biInfoId: 155846,
taskId: 1509281,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3WRPC8_1653287250895.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=C5FB9E7F1C9FE01950A3BFDF77FFFFF8F8FCFFF5FFF6FE0A8000000000000000&pHash=DA10241800000000'
},
{
id: 5288,
biInfoId: 155846,
taskId: 1508594,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3WRPC8_1653287250895.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=C5FB9E7F1C9FE01950A3BFDF77FFFFF8F8FCFFF5FFF6FE0A8000000000000000&pHash=DA10241800000000'
},
{
id: 5289,
biInfoId: 155846,
taskId: 1509281,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/R4JPN1_1653287247871.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=7BFCC7FFE3202860C3C964BDF7E27FEA7FFEFFFCFCE061A0F900E800B2009200&pHash=D9B4270020000000'
},
{
id: 5290,
biInfoId: 155846,
taskId: 1509241,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3WRPC8_1653287250895.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=C5FB9E7F1C9FE01950A3BFDF77FFFFF8F8FCFFF5FFF6FE0A8000000000000000&pHash=DA10241800000000'
},
{
id: 5291,
biInfoId: 155846,
taskId: 1508749,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/M7U6JV_1653287244442.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=FFFEFFFEFFFE3EC67F7C7F208BFECCE2E7982138227E46660FF03FF0F29E8004&pHash=E0A01A8A00821080'
},
{
id: 5292,
biInfoId: 155846,
taskId: 1509052,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3WRPC8_1653287250895.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=C5FB9E7F1C9FE01950A3BFDF77FFFFF8F8FCFFF5FFF6FE0A8000000000000000&pHash=DA10241800000000'
},
{
id: 5293,
biInfoId: 155846,
taskId: 1509592,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3LYNWV_1653287253819.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=0000000000033FFFDFFF3FFFFFFFFFDBFFFFFFC03FFFDFFD177FE400003F4080&pHash=831B494000000400'
},
{
id: 5294,
biInfoId: 155846,
taskId: 1509336,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/R4JPN1_1653287247871.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=7BFCC7FFE3202860C3C964BDF7E27FEA7FFEFFFCFCE061A0F900E800B2009200&pHash=D9B4270020000000'
},
{
id: 5295,
biInfoId: 155846,
taskId: 1509136,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/M7U6JV_1653287244442.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=FFFEFFFEFFFE3EC67F7C7F208BFECCE2E7982138227E46660FF03FF0F29E8004&pHash=E0A01A8A00821080'
},
{
id: 5296,
biInfoId: 155846,
taskId: 1509524,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/R4JPN1_1653287247871.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=7BFCC7FFE3202860C3C964BDF7E27FEA7FFEFFFCFCE061A0F900E800B2009200&pHash=D9B4270020000000'
},
{
id: 5297,
biInfoId: 155846,
taskId: 1508784,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/M7U6JV_1653287244442.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=FFFEFFFEFFFE3EC67F7C7F208BFECCE2E7982138227E46660FF03FF0F29E8004&pHash=E0A01A8A00821080'
},
{
id: 5298,
biInfoId: 155846,
taskId: 1508804,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3WRPC8_1653287250895.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=C5FB9E7F1C9FE01950A3BFDF77FFFFF8F8FCFFF5FFF6FE0A8000000000000000&pHash=DA10241800000000'
},
{
id: 5299,
biInfoId: 155846,
taskId: 1509028,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3LYNWV_1653287253819.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=0000000000033FFFDFFF3FFFFFFFFFDBFFFFFFC03FFFDFFD177FE400003F4080&pHash=831B494000000400'
},
{
id: 5300,
biInfoId: 155846,
taskId: 1508821,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/M7U6JV_1653287244442.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=FFFEFFFEFFFE3EC67F7C7F208BFECCE2E7982138227E46660FF03FF0F29E8004&pHash=E0A01A8A00821080'
},
{
id: 5301,
biInfoId: 155846,
taskId: 1508858,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/3LYNWV_1653287253819.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=0000000000033FFFDFFF3FFFFFFFFFDBFFFFFFC03FFFDFFD177FE400003F4080&pHash=831B494000000400'
},
{
id: 5302,
biInfoId: 155846,
taskId: 1509222,
imageUrl:
'https://cdn.yxvzb.com/sunflower/xcx/M7U6JV_1653287244442.jpg?x-oss-process=style/set-jpg&auto-orient&aHash=FFFEFFFEFFFE3EC67F7C7F208BFECCE2E7982138227E46660FF03FF0F29E8004&pHash=E0A01A8A00821080'
}
],
imageSize: 2,
imageStyle: 2
},
message: '操作成功',
status: '1'
}
};
},
saveInfo() {
return null;
},
exportBi() {
return null;
}
}
};
},
methods: {
getTemplateList() {
return {
data: {
data: [
{
id: 2,
templateCode: null,
templateName: '2022050711',
templatePicUrl:
'https://cdn.yxvzb.com/sunflower/invoice/1651894583988.png',
status: null,
isDelete: null,
createDt: null
}
],
message: '操作成功',
status: '1'
}
};
}
}
};
</script>
<style>
.block {
box-sizing: border-box;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
</style>
src/App.vue
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
:mobile="isMobile" :mobile="isMobile"
:print="isPrint" :print="isPrint"
:projectType="projectType" :projectType="projectType"
:selectType="selectType"
></component> ></component>
<!-- <XrkTaskRecordPdf :projectType="20" :taskId="1209388" :from="1" /> -->
</div> </div>
<!-- <ul class="pervie"> <!-- <ul class="pervie">
<li name="任务记录"> <li name="任务记录">
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<script> <script>
import { getQueryVariable } from './packages/bi/src/chart-type/common'; import { getQueryVariable } from './packages/bi/src/chart-type/common';
// import { XrkTaskRecordPdf } from './packages/task-recored/index';
export default { export default {
name: 'App', name: 'App',
data() { data() {
...@@ -44,7 +44,8 @@ export default { ...@@ -44,7 +44,8 @@ export default {
isMobile: +getQueryVariable('mobile') === 1, isMobile: +getQueryVariable('mobile') === 1,
isPrint: +getQueryVariable('print') === 1, isPrint: +getQueryVariable('print') === 1,
projectType: +getQueryVariable('projectType') || 6, projectType: +getQueryVariable('projectType') || 6,
componentName: getQueryVariable('componentName') || 'XrkBi' componentName: getQueryVariable('componentName') || 'XrkBi',
selectType: +getQueryVariable('selectType') || 45 // 44自定义-BI报告 45当期-BI报告 46累计-BI报告
}; };
} }
}; };
......
src/main.js
...@@ -2,11 +2,10 @@ ...@@ -2,11 +2,10 @@
* @Description: * @Description:
* @Date: 2021-01-28 23:29:19 * @Date: 2021-01-28 23:29:19
*/ */
import 'babel-polyfill'; // import 'babel-polyfill';
import Vue from 'vue'; import Vue from 'vue';
import App from './App'; import App from './App';
import Xrk from './lib/index.js'; import Xrk from './lib/index.js';
Vue.config.productionTip = false; Vue.config.productionTip = false;
Vue.use(Xrk); Vue.use(Xrk);
......
src/packages/bi/src/components/photo-wall/del.vue
...@@ -3,10 +3,15 @@ ...@@ -3,10 +3,15 @@
* @Date: 2022-05-13 09:41:06 * @Date: 2022-05-13 09:41:06
--> -->
<template> <template>
<el-button @click="handleRemove" class="bi-photo_btn"> <div>
<img src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg" alt="" /> <el-button @click="handleRemove" class="bi-photo_btn">
删除 <img
</el-button> src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg"
alt=""
/>
删除
</el-button>
</div>
</template> </template>
<script> <script>
......
src/packages/bi/src/components/photo-wall/images.vue
<template> <template>
<ul :style="{ columnCount }"> <!-- <ul :style="{ columnCount }">
<li v-for="(item, index) in taskImageInfo.imageUrls" :key="index"> <li v-for="(item, index) in taskImageInfo.imageUrls" :key="index">
<img :src="setUrl(item.imageUrl)" /> <img :src="setUrl(item.imageUrl)" />
</li> </li>
</ul> </ul> -->
<div>
<div
v-for="(imageUrls, imageUrlsIndex) in waterfalls"
:key="imageUrlsIndex"
>
<waterfall
ref="waterfall"
:col="columnCount"
:data="imageUrls"
@finish="finish"
>
<template>
<div
v-for="(item, index) in imageUrls"
:key="index"
:style="{
padding: '10px 0',
'text-align': 'center'
}"
>
<img
:style="{ width: widthPx, height: heightPx }"
:src="setUrl(item.imageUrl)"
/>
</div>
</template>
</waterfall>
</div>
</div>
</template> </template>
<script> <script>
import waterfall from './waterfall.vue';
const IMG_MAPPING = { const IMG_MAPPING = {
1: { 1: {
column: 2, column: 2, // 2列数据
width: 548 width: 548,
height: 305
}, },
2: { 2: {
column: 3, column: 3,
width: 355 width: 355,
height: 198
}, },
3: { 3: {
column: 4, column: 4,
width: 262 width: 262,
height: 144
} }
}; };
const baseHeight = 1697;
export default { export default {
name: 'bi-photo-wall-images', name: 'bi-photo-wall-images',
components: {
waterfall
},
props: { props: {
taskImageInfo: { taskImageInfo: {
type: Object, type: Object,
...@@ -42,6 +80,49 @@ export default { ...@@ -42,6 +80,49 @@ export default {
} }
} }
}, },
watch: {
taskImageInfo: {
deep: true,
immediate: true,
handler(v) {
const { imageUrls, imageStyle } = v;
let waterfalls = [];
const titleHeight = 88;
const margin = 20;
// 第一页图片总列数
const firstColumnNum = Math.floor(
(baseHeight - titleHeight) / (this.height + margin)
);
// 其他页图片总列数
const otherColumnNum = Math.floor(baseHeight / (this.height + margin));
const firstCount = firstColumnNum * this.columnCount; // 第一页数据总数
const otherCount = otherColumnNum * this.columnCount; // 其他页数据总数
if (imageUrls) {
if (imageStyle === 2) {
imageUrls.forEach((item, index) => {
// 第一个 || 第一组最后一个（只会出现一次） || 其他组最后一个（多次出现）
if (
index === 0 ||
index === firstCount ||
!(index % otherCount)
) {
waterfalls[waterfalls.length] = [];
}
waterfalls[waterfalls.length - 1].push(item);
});
} else {
waterfalls = [imageUrls];
}
this.waterfalls = waterfalls;
}
}
}
},
data() {
return {
waterfalls: [] // 二维数组，第一个为第一页算上title单独计算，其他为统一计算分组
};
},
computed: { computed: {
columnCount() { columnCount() {
return IMG_MAPPING[this.taskImageInfo.imageSize].column; return IMG_MAPPING[this.taskImageInfo.imageSize].column;
...@@ -50,20 +131,30 @@ export default { ...@@ -50,20 +131,30 @@ export default {
return IMG_MAPPING[this.taskImageInfo.imageSize].width; return IMG_MAPPING[this.taskImageInfo.imageSize].width;
}, },
height() { height() {
return IMG_MAPPING[this.taskImageInfo.imageSize].height;
},
widthPx() {
return this.width + 'px';
},
heightPx() {
if (this.taskImageInfo.imageStyle === 2) { if (this.taskImageInfo.imageStyle === 2) {
return this.width; return this.height + 'px';
} }
return 'auto'; return 'auto';
} }
}, },
methods: { methods: {
finish() {
this.$emit('finish');
},
setUrl(url) { setUrl(url) {
// x-oss-process=image/resize,w_355 流式 // x-oss-process=image/resize,w_355 流式
// ?x-oss-process=image/resize,m_fill,w_355,h_355 // ?x-oss-process=image/resize,m_fill,w_355,h_355
const _url = url.split('?')[0];
if (this.taskImageInfo.imageStyle === 1) { if (this.taskImageInfo.imageStyle === 1) {
return `${url}?x-oss-process=image/resize,w_${this.width}`; return `${_url}?x-oss-process=image/resize,w_${this.width}`;
} }
return `${url}?x-oss-process=image/resize,m_fill,w_${this.width},h_${this.width}`; return `${_url}?x-oss-process=image/resize,m_fill,w_${this.width},h_${this.height}`;
} }
} }
}; };
...@@ -97,12 +188,17 @@ ul { ...@@ -97,12 +188,17 @@ ul {
// flex-wrap: wrap; // flex-wrap: wrap;
column-count: 3; column-count: 3;
column-gap: 0; column-gap: 0;
img {
margin: 10px; li {
// 大548px 中355px 小262px break-inside: avoid;
// width: 358px; img {
// height: 358px; max-height: 588px;
// object-fit: fill; margin: 10px;
// 大548px 中355px 小262px
// width: 358px;
// height: 358px;
// object-fit: fill;
}
} }
} }
</style> </style>
src/packages/bi/src/components/photo-wall/index.vue
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
<template #handler> <template #handler>
<div class="bi-title-photo-btn" v-if="!isPrint"> <div class="bi-title-photo-btn" v-if="!isPrint">
<SelectStyle <SelectStyle
style="margin: 0 5px"
v-if="showEdit"
:layout="{ :layout="{
imageStyle: value.imageStyle, imageStyle: value.imageStyle,
imageSize: value.imageSize imageSize: value.imageSize
...@@ -15,14 +17,16 @@ ...@@ -15,14 +17,16 @@
@handleSave="selectStyleSave" @handleSave="selectStyleSave"
/> />
<SelectImages <SelectImages
style="margin: 0 5px"
v-if="showEdit"
:imageUrls="value.imageUrls" :imageUrls="value.imageUrls"
@handleSave="selectImgSave" @handleSave="selectImgSave"
/> />
<Del @del="onDel" /> <Del style="margin: 0 5px" @del="onDel" />
</div> </div>
</template> </template>
</BiTitle> </BiTitle>
<BiImages :taskImageInfo="value" /> <BiImages :taskImageInfo="value" @finish="finish" />
</div> </div>
</template> </template>
...@@ -70,8 +74,15 @@ export default { ...@@ -70,8 +74,15 @@ export default {
default: 4 default: 4
} }
}, },
computed: {
showEdit() {
return +this.Bi.selectType === 45; // 44自定义-BI报告 45当期-BI报告(显示样式、选择) 46累计-BI报告
}
},
methods: { methods: {
finish() {
this.$emit('finish');
},
// 选择图片的保存 // 选择图片的保存
selectImgSave(e) { selectImgSave(e) {
this.$emit('input', { this.$emit('input', {
...@@ -108,7 +119,7 @@ export default { ...@@ -108,7 +119,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.bi-photo { .bi-photo {
// page-break-before: always; page-break-before: always;
// page-break-after: always; // page-break-after: always;
padding-bottom: 50px; padding-bottom: 50px;
...@@ -144,6 +155,6 @@ export default { ...@@ -144,6 +155,6 @@ export default {
.bi-title-photo-btn { .bi-title-photo-btn {
display: flex; display: flex;
width: 320px; width: 320px;
justify-content: space-between; justify-content: flex-end;
} }
</style> </style>
src/packages/bi/src/components/photo-wall/select.vue
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
:key="item.imageUrl + index" :key="item.imageUrl + index"
> >
<el-checkbox <el-checkbox
:disabled="selectSum >= 50 && item.isSelect === 0" :disabled="selectSum >= 50 && !imageUrlsMap.includes(item.imageUrl)"
class="select-box" class="select-box"
:value="imageUrlsMap.includes(item.imageUrl)" :value="imageUrlsMap.includes(item.imageUrl)"
@change=" @change="
......
src/packages/bi/src/components/photo-wall/waterfall.vue 0 → 100644
<template>
<div
class="vue-waterfall"
:style="{ height: height }"
ref="vueWaterfall"
id="vueWaterfall"
:class="isTransition && 'is-transition'"
>
<div class="slot-box">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
col: {
type: Number,
default: 2
},
width: Number,
height: {
type: String
// default:'100vh', 取消height默认值
},
data: {
type: Array,
default: []
},
gutterWidth: {
type: Number,
default: 10
},
isTransition: {
type: Boolean,
default: true
},
lazyDistance: {
type: Number,
default: 300
},
loadDistance: {
type: Number,
default: 300
}
},
data() {
return {
root: null,
columns: [],
loadmore: true,
timeout: null,
lazyTimeout: null,
lastScrollTop: 0,
timer: null,
loadedIndex: 0,
columnWidth: 0,
isresizing: false,
clientHeight:
document.documentElement.clientHeight || document.body.clientHeight,
clientWidth:
document.documentElement.clientWidth || document.body.clientWidth
};
},
computed: {
trueLazyDistance() {
return (this.clientWidth / 375) * this.lazyDistance;
},
max() {
return (this.clientWidth / 375) * this.loadDistance;
}
},
watch: {
col(val) {
this.$nextTick(() => {
this.init();
});
},
data(newVal, oldVal) {
this.$nextTick(() => {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
if (this.isresizing) {
return;
}
if (newVal.length < this.loadedIndex) {
this.loadedIndex = 0;
}
if (
newVal.length > oldVal.length ||
newVal.length > this.loadedIndex
) {
if (newVal.length === oldVal.length) {
this.resize(this.loadedIndex > 0 ? this.loadedIndex : null);
return;
}
this.resize(oldVal.length > 0 ? oldVal.length : null);
}
}, 300);
});
}
},
methods: {
init() {
//initialize
this.root = this.$refs.vueWaterfall;
this.clearColumn();
var col = parseInt(this.col);
for (var i = 0; i < col; i++) {
let odiv = document.createElement('div');
odiv.className = 'vue-waterfall-column';
if (this.width) {
odiv.style.width = this.width + 'px';
if (i != 0) {
odiv.style.marginLeft = this.gutterWidth + 'px';
}
this.columnWidth = this.width;
} else {
odiv.style.width = 100 / parseInt(col) + '%';
this.columnWidth =
(100 / parseInt(col) / 100) * document.documentElement.clientWidth;
}
if (!this.root) {
this.root = this.$refs.vueWaterfall;
}
this.root && this.root.appendChild(odiv);
this.columns.push(odiv);
}
this.resize();
},
async __setDomImageHeight(dom) {
if (!dom.getElementsByTagName) {
return;
}
var imgs = dom.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
var lazySrc = imgs[i].getAttribute('lazy-src');
if (!imgs[i].getAttribute('src') && lazySrc) {
var newImg = new Image();
var parameter = `${lazySrc.includes('?') ? '&' : '?'}t=${Date.now()}`;
newImg.src = lazySrc + parameter;
if (newImg.complete) {
var trueWidth = imgs[i].offsetWidth || this.columnWidth;
var imgColumnHeight = (newImg.height * trueWidth) / newImg.width;
if (imgs[i].offsetWidth) {
imgs[i].style.height = imgColumnHeight + 'px';
}
} else {
await new Promise((resolve, reject) => {
newImg.onload = function() {
var trueWidth = imgs[i].offsetWidth || this.columnWidth;
var imgColumnHeight =
(newImg.height * trueWidth) / newImg.width;
if (imgs[i].offsetWidth) {
imgs[i].style.height = imgColumnHeight + 'px';
}
resolve();
};
newImg.onerror = function() {
resolve();
};
});
}
}
}
},
async append(dom) {
//append dom element
var self = this;
if (this.columns.length > 0) {
let min = this.columns[0];
for (var i = 1; i < this.columns.length; i++) {
if (
(await self.__getHeight(min)) >
(await self.__getHeight(self.columns[i]))
) {
min = self.columns[i];
}
}
await this.__setDomImageHeight(dom);
min && min.appendChild(dom);
}
},
checkImg(dom) {
//check has image
if (!dom) {
return false;
}
if (dom.getElementsByTagName && dom.getElementsByTagName('img').length) {
return true;
} else {
return false;
}
},
async resize(index, elements) {
//resize and render
this.isresizing = true;
this.routeChanged = false; // 重置routeChanged
var self = this;
if (!this.$slots.default) {
this.isresizing = false;
return;
}
if (!index && index != 0 && !elements) {
elements = this.$slots.default;
this.loadedIndex = 0;
this.clear();
} else if (!elements) {
this.loadedIndex = index;
elements = this.$slots.default.splice(index);
}
for (var j = 0; j < elements.length; j++) {
if (this.routeChanged) {
console.warn('路由发生变化，<vue-waterfall>组件停止渲染');
break;
}
if (elements[j].elm && self.checkImg(elements[j].elm)) {
var imgs = elements[j].elm.getElementsByTagName('img');
var _url =
imgs[0].getAttribute('src') || imgs[0].getAttribute('lazy-src');
var parameter = `${_url.includes('?') ? '&' : '?'}t=${Date.now()}`;
var newImg = new Image();
newImg.src = _url + parameter;
if (newImg.complete) {
await self.append(elements[j].elm);
self.lazyLoad(imgs);
} else {
await new Promise((resolve, reject) => {
newImg.onload = async function() {
await self.append(elements[j].elm);
self.lazyLoad(imgs);
resolve();
};
newImg.onerror = async function(e) {
await self.append(elements[j].elm);
self.lazyLoad(imgs);
resolve();
};
});
}
} else {
await self.append(elements[j].elm);
}
self.loadedIndex++;
}
this.isresizing = false;
self.$emit('finish');
},
computedPx(img, imgApi) {
img.style.width = imgApi.width / this.columnWidth;
},
lazyLoad(imgs) {
if (!imgs) {
if (!this.root) {
this.root = this.$refs.vueWaterfall;
}
imgs = this.root && this.root.getElementsByTagName('img');
}
if (!imgs || imgs.length < 0) {
return;
}
for (var index = 0; index < imgs.length; index++) {
if (
imgs[index].className.match('animation') &&
imgs[index].getAttribute('src')
) {
continue;
} else if (
imgs[index].className.match('animation') &&
!imgs[index].getAttribute('src')
) {
imgs[index].src = imgs[index].getAttribute('lazy-src');
imgs[index].removeAttribute('lazy-src');
} else if (
imgs[index].getAttribute('src') &&
!imgs[index].className.match('animation')
) {
imgs[index].className = imgs[index].className + ' animation';
} else if (
!imgs[index].getAttribute('src') &&
imgs[index].getBoundingClientRect().top <
this.clientHeight + this.trueLazyDistance
) {
imgs[index].src = imgs[index].getAttribute('lazy-src');
imgs[index].className = imgs[index].className + ' animation';
imgs[index].removeAttribute('lazy-src');
}
}
},
clearColumn() {
this.columns.forEach(item => {
item.remove();
});
this.columns = [];
},
clear() {
this.columns.forEach(item => {
item.innerHTML = '';
});
},
mix() {
var elements = this.$slots.default;
elements.sort(() => {
return Math.random() - 0.5;
});
this.resize(0, elements);
},
async __getHeight(dom) {
return dom.offsetHeight;
},
__emitLoadMore() {
if (!this.root) {
return;
}
var self = this;
const scrollTop = this.height
? this.root.scrollTop
: document.documentElement.scrollTop || document.body.scrollTop;
const scrollHeight = this.height
? this.root.scrollHeight
: document.documentElement.offsetHeight;
var diff = scrollHeight - scrollTop - self.clientHeight;
self.$emit('scroll', {
scrollHeight: scrollHeight,
scrollTop: scrollTop,
clientHeight: self.clientHeight,
diff: diff,
time: Date.now()
});
if (
diff < self.max &&
self.loadmore &&
scrollHeight > self.clientHeight
) {
self.lastScrollTop = scrollTop;
self.loadmore = false;
self.$emit('loadmore');
} else if (diff >= self.max) {
self.loadmore = true;
}
clearTimeout(self.lazyTimeout);
self.lazyTimeout = setTimeout(function() {
self.lazyLoad();
}, 14);
},
// 监听路由是否发生变化
__listenRouterChange() {
// 重写pushState与replaceState事件函数
var _wr = function(type) {
// 记录原生事件
var orig = history[type];
return function() {
// 触发原生事件
var rv = orig.apply(this, arguments);
// 自定义事件
var e = new Event(type);
e.arguments = arguments;
// 触发自定义事件
window.dispatchEvent(e);
return rv;
};
};
const events = ['replaceState', 'pushState'];
events.forEach(event => {
window.addEventListener(event, () => {
this.routeChanged = true;
});
// 重写history
window.history[event] = _wr(event);
});
window.addEventListener('popstate', () => {
this.routeChanged = true;
});
}
},
destroyed() {
this.root && (this.root.onscroll = null);
this.root && (this.root.onresize = null);
window.onscroll = null;
window.onresize = null;
},
beforeCreate() {
// bus.$on('forceUpdate', () => {
// this.resize();
// });
// bus.$on('mix', () => {
// this.mix();
// });
},
updated() {
// console.log(555);
// this.resize();
},
mounted() {
this.__listenRouterChange();
this.$nextTick(() => {
this.init();
var self = this;
if (this.height) {
this.root.onscroll = function(e) {
self.__emitLoadMore();
};
this.root.addEventListener('touchmove', function() {
self.__emitLoadMore();
});
} else {
window.onscroll = function(e) {
self.__emitLoadMore();
};
document.addEventListener('touchmove', function() {
self.__emitLoadMore();
});
}
});
}
};
</script>
<style>
.vue-waterfall {
width: 100%;
overflow-y: auto;
position: relative;
}
.vue-waterfall .slot-box {
position: absolute;
top: 100%;
left: 100%;
width: 0;
height: 0;
overflow: hidden;
}
.vue-waterfall .vue-waterfall-column {
float: left;
}
/* .vue-waterfall.is-transition img {
opacity: 0;
}
.vue-waterfall.is-transition img.animation {
animation: 0.4s lazy-animation linear;
animation-fill-mode: forwards;
}
@keyframes lazy-animation {
from {
opacity: 0;
}
to {
opacity: 1;
}
} */
</style>
src/packages/bi/src/main.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Description: * @Description:
* @Author: jml * @Author: jml
* @Date: 2021-02-26 15:38:10 * @Date: 2021-02-26 15:38:10
* @LastEditTime: 2022-05-19 15:25:49 * @LastEditTime: 2022-06-07 11:25:17
--> -->
<template> <template>
<div class="xrk-components-bi bi" :class="{ 'bi-print': print }"> <div class="xrk-components-bi bi" :class="{ 'bi-print': print }">
...@@ -58,6 +58,7 @@ export default { ...@@ -58,6 +58,7 @@ export default {
cantEdit: [Number, String], cantEdit: [Number, String],
projectType: [Number, String], projectType: [Number, String],
from: [Number, String], from: [Number, String],
selectType: Number, // 44自定义-BI报告 45当期-BI报告 46累计-BI报告
getBaseInfo: { getBaseInfo: {
type: Function, type: Function,
default: () => {} default: () => {}
......
src/packages/bi/src/mixin/project.js
...@@ -51,6 +51,12 @@ export default { ...@@ -51,6 +51,12 @@ export default {
resolve('load fail'); resolve('load fail');
}; };
}); });
},
preloadImgs(urls) {
if (!urls.length) {
return Promise.resolve();
}
return Promise.all(urls.map(url => this.preloadImg(url)));
} }
} }
}; };
src/packages/bi/src/project/20-configurable.vue
...@@ -61,15 +61,16 @@ ...@@ -61,15 +61,16 @@
@sort="sort(arguments, 'singleChoice', hideSingleChoice)" @sort="sort(arguments, 'singleChoice', hideSingleChoice)"
@page="setPage(arguments, 'page4')" @page="setPage(arguments, 'page4')"
> >
<BiSingleChoiceInfo index="4" name="照片集合"></BiSingleChoiceInfo> <BiSingleChoiceInfo index="4" name="照片合集"></BiSingleChoiceInfo>
</BiSingleChoice> --> </BiSingleChoice> -->
<BiPhoto <BiPhoto
v-if="!hideTaskImage" v-if="!hideTaskImage"
class="bi-block" class="bi-block"
ref="bi-photo" ref="bi-photo"
name="照片集合" name="照片合集"
v-model="taskImageInfo" v-model="taskImageInfo"
@page="setPage(arguments, 'page4')" @page="setPage(arguments, 'page4')"
@finish="taskImageInfo.finish = true"
/> />
<BiCoverEnd title="奇正藏药医学沙龙推广项目数据报告"></BiCoverEnd> <BiCoverEnd title="奇正藏药医学沙龙推广项目数据报告"></BiCoverEnd>
<BiOperate <BiOperate
...@@ -142,6 +143,7 @@ export default { ...@@ -142,6 +143,7 @@ export default {
title: { title: {
name: '照片墙' name: '照片墙'
}, },
finish: false, // 图片是否渲染完成
has: false, // true有图片题，false无 has: false, // true有图片题，false无
isDelete: 0, isDelete: 0,
imageStyle: 2, //展示样式 1 流式 2平铺 imageStyle: 2, //展示样式 1 流式 2平铺
...@@ -218,10 +220,10 @@ export default { ...@@ -218,10 +220,10 @@ export default {
}, },
...(!this.hideTaskImage && [ ...(!this.hideTaskImage && [
{ {
name: '照片集合', name: '照片合集',
child: [ child: [
{ {
name: '照片集合', name: '照片合集',
page: 4 page: 4
} }
] ]
...@@ -246,6 +248,15 @@ export default { ...@@ -246,6 +248,15 @@ export default {
} }
}, },
methods: { methods: {
taskImageFinish(resolve) {
if (this.taskImageInfo.finish) {
resolve();
} else {
setTimeout(() => {
this.taskImageFinish(resolve);
}, 1000);
}
},
dealPos(dis) { dealPos(dis) {
return dis * (this.isPrint ? printWidth : this.baseFontSize); return dis * (this.isPrint ? printWidth : this.baseFontSize);
}, },
...@@ -506,11 +517,7 @@ export default { ...@@ -506,11 +517,7 @@ export default {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const { biInfoId, styleConfigureId } = this.biInfo; const { biInfoId, styleConfigureId } = this.biInfo;
const { content } = this.$refs['cover']; const { content } = this.$refs['cover'];
if ( if (!this.hideTaskImage && !this.taskImageInfo.imageUrls.length) {
this.taskImageInfo.has &&
!this.taskImageInfo.isDelete &&
!this.taskImageInfo.imageUrls.length
) {
reject('照片墙：请删除或至少选择一张图片'); reject('照片墙：请删除或至少选择一张图片');
} }
Promise.all([ Promise.all([
...@@ -585,14 +592,23 @@ export default { ...@@ -585,14 +592,23 @@ export default {
this.dealChoice(topicInfo.data.data || []); this.dealChoice(topicInfo.data.data || []);
this.dealChoiceMixin(topicMixinInfo.data.data || []); this.dealChoiceMixin(topicMixinInfo.data.data || []);
this.coverList = tempaletList.data.data || []; this.coverList = tempaletList.data.data || [];
if (hasImageQuestion) { // taskImageInfo.data.data.imageUrls.forEach(item => {
Object.assign(this.taskImageInfo, taskImageInfo.data.data, { // item.imageUrl = item.imageUrl.replace('https', 'http');
has: hasImageQuestion // });
}); Object.assign(this.taskImageInfo, taskImageInfo.data.data, {
} has: hasImageQuestion,
finish: !hasImageQuestion || !!taskImageInfo.data.data.isDelete
});
this.$nextTick(async () => { this.$nextTick(async () => {
await this.preloadImg(this.coverUrl); await this.preloadImg(this.coverUrl);
window.status = '1'; await new Promise(resolve => {
this.taskImageFinish(resolve); // 提供给wkwebivewtopdf使用，页面处理完成，node不用
});
setTimeout(() => {
window.status = '1'; // 提供给wkwebivewtopdf使用，页面处理完成，node不用
console.log('done7');
}, 1000 * 5);
}); });
} }
) )
...@@ -604,8 +620,4 @@ export default { ...@@ -604,8 +620,4 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
.bi-block {
// margin-top: 8px;
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!