feat: 照片墙开发

web
Commit 9bd54476 authored Jun 07, 2022 by web
Showing with 978 additions and 81 deletions
package.json
src/App copy.vue
src/packages/bi/src/components/photo-wall/images.vue
src/packages/bi/src/components/photo-wall/index.vue
src/packages/bi/src/components/photo-wall/waterfall.vue
src/packages/bi/src/main.vue
src/packages/bi/src/mixin/project.js
src/packages/bi/src/project/20-configurable.vue
--- a/package.json
+++ b/package.json
 {
  "name": "xrk-bi",
-  "version": "0.4.01-beta.4",
+  "version": "0.4.1",
  "description": "xrk-bi",
  "author": "xrk",
  "main": "dist/bundler.js",

--- a/src/App copy.vue
+++ b/src/App copy.vue
+<!--
+ * @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>
--- a/src/packages/bi/src/components/photo-wall/images.vue
+++ b/src/packages/bi/src/components/photo-wall/images.vue
@@ -4,38 +4,58 @@
      <img :src="setUrl(item.imageUrl)" />
    </li>
  </ul> -->
-  <waterfall :col="columnCount" :data="taskImageInfo.imageUrls">
+  <div>
-    <template>
+    <div
-      <div
+      v-for="(imageUrls, imageUrlsIndex) in waterfalls"
-        v-for="(item, index) in taskImageInfo.imageUrls"
+      :key="imageUrlsIndex"
-        :key="index"
+    >
-        style="margin-bottom:25px"
+      <waterfall
+        ref="waterfall"
+        :col="columnCount"
+        :data="imageUrls"
+        @finish="finish"
      >
-        <img
+        <template>
-          :style="{ width: widthPx, height: heightPx }"
+          <div
-          :src="setUrl(item.imageUrl)"
+            v-for="(item, index) in imageUrls"
-        />
+            :key="index"
-      </div>
+            :style="{
-    </template>
+              padding: '10px 0',
-  </waterfall>
+              'text-align': 'center'
+            }"
+          >
+            <img
+              :style="{ width: widthPx, height: heightPx }"
+              :src="setUrl(item.imageUrl)"
+            />
+          </div>
+        </template>
+      </waterfall>
+    </div>
+  </div>
 </template>
 <script>
 import waterfall from './waterfall.vue';
 const IMG_MAPPING = {
  1: {
-    column: 2,
+    column: 2, // 2列数据
-    width: 548
+    width: 548,
+    height: 305
  },
  2: {
    column: 3,
-    width: 355
+    width: 355,
+    height: 198
  },
  3: {
    column: 4,
-    width: 262
+    width: 262,
+    height: 144
  }
 };
+const baseHeight = 1697;
 export default {
  name: 'bi-photo-wall-images',
  components: {
@@ -60,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: {
    columnCount() {
      return IMG_MAPPING[this.taskImageInfo.imageSize].column;
@@ -67,17 +130,23 @@ export default {
    width() {
      return IMG_MAPPING[this.taskImageInfo.imageSize].width;
    },
+    height() {
+      return IMG_MAPPING[this.taskImageInfo.imageSize].height;
+    },
    widthPx() {
      return this.width + 'px';
    },
    heightPx() {
      if (this.taskImageInfo.imageStyle === 2) {
-        return this.widthPx;
+        return this.height + 'px';
      }
      return 'auto';
    }
  },
  methods: {
+    finish() {
+      this.$emit('finish');
+    },
    setUrl(url) {
      // x-oss-process=image/resize,w_355 流式
      // ?x-oss-process=image/resize,m_fill,w_355,h_355
@@ -85,7 +154,7 @@ export default {
      if (this.taskImageInfo.imageStyle === 1) {
        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}`;
    }
  }
 };

--- a/src/packages/bi/src/components/photo-wall/index.vue
+++ b/src/packages/bi/src/components/photo-wall/index.vue
@@ -26,7 +26,7 @@
        </div>
      </template>
    </BiTitle>
-    <BiImages :taskImageInfo="value" />
+    <BiImages :taskImageInfo="value" @finish="finish" />
  </div>
 </template>
@@ -80,6 +80,9 @@ export default {
    }
  },
  methods: {
+    finish() {
+      this.$emit('finish');
+    },
    // 选择图片的保存
    selectImgSave(e) {
      this.$emit('input', {
@@ -116,7 +119,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .bi-photo {
-  // page-break-before: always;
+  page-break-before: always;
  // page-break-after: always;
  padding-bottom: 50px;

--- a/src/packages/bi/src/components/photo-wall/waterfall.vue
+++ b/src/packages/bi/src/components/photo-wall/waterfall.vue
-<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>
 <template>
  <div
    class="vue-waterfall"
@@ -172,7 +138,8 @@ export default {
        var lazySrc = imgs[i].getAttribute('lazy-src');
        if (!imgs[i].getAttribute('src') && lazySrc) {
          var newImg = new Image();
-          newImg.src = lazySrc;
+          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;
@@ -251,9 +218,12 @@ export default {
        }
        if (elements[j].elm && self.checkImg(elements[j].elm)) {
          var imgs = elements[j].elm.getElementsByTagName('img');
-          var newImg = new Image();
+          var _url =
-          newImg.src =
            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);
@@ -423,7 +393,10 @@ export default {
    //   this.mix();
    // });
  },
+  updated() {
+    // console.log(555);
+    // this.resize();
+  },
  mounted() {
    this.__listenRouterChange();
    this.$nextTick(() => {
@@ -448,3 +421,37 @@ export default {
  }
 };
 </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>
--- a/src/packages/bi/src/main.vue
+++ b/src/packages/bi/src/main.vue
@@ -2,7 +2,7 @@
 * @Description: 
 * @Author: jml
 * @Date: 2021-02-26 15:38:10
- * @LastEditTime: 2022-05-23 10:46:24
+ * @LastEditTime: 2022-06-07 11:25:17
 -->
 <template>
  <div class="xrk-components-bi bi" :class="{ 'bi-print': print }">

--- a/src/packages/bi/src/mixin/project.js
+++ b/src/packages/bi/src/mixin/project.js
@@ -51,6 +51,12 @@ export default {
          resolve('load fail');
        };
      });
+    },
+    preloadImgs(urls) {
+      if (!urls.length) {
+        return Promise.resolve();
+      }
+      return Promise.all(urls.map(url => this.preloadImg(url)));
    }
  }
 };
--- a/src/packages/bi/src/project/20-configurable.vue
+++ b/src/packages/bi/src/project/20-configurable.vue
@@ -61,15 +61,16 @@
      @sort="sort(arguments, 'singleChoice', hideSingleChoice)"
      @page="setPage(arguments, 'page4')"
    >
-      <BiSingleChoiceInfo index="4" name="照片集合"></BiSingleChoiceInfo>
+      <BiSingleChoiceInfo index="4" name="照片合集"></BiSingleChoiceInfo>
    </BiSingleChoice> -->
    <BiPhoto
      v-if="!hideTaskImage"
      class="bi-block"
      ref="bi-photo"
-      name="照片集合"
+      name="照片合集"
      v-model="taskImageInfo"
      @page="setPage(arguments, 'page4')"
+      @finish="taskImageInfo.finish = true"
    />
    <BiCoverEnd title="奇正藏药医学沙龙推广项目数据报告"></BiCoverEnd>
    <BiOperate
@@ -142,6 +143,7 @@ export default {
        title: {
          name: '照片墙'
        },
+        finish: false, // 图片是否渲染完成
        has: false, // true有图片题，false无
        isDelete: 0,
        imageStyle: 2, //展示样式 1 流式   2平铺
@@ -218,10 +220,10 @@ export default {
        },
        ...(!this.hideTaskImage && [
          {
-            name: '照片集合',
+            name: '照片合集',
            child: [
              {
-                name: '照片集合',
+                name: '照片合集',
                page: 4
              }
            ]
@@ -246,6 +248,15 @@ export default {
    }
  },
  methods: {
+    taskImageFinish(resolve) {
+      if (this.taskImageInfo.finish) {
+        resolve();
+      } else {
+        setTimeout(() => {
+          this.taskImageFinish(resolve);
+        }, 1000);
+      }
+    },
    dealPos(dis) {
      return dis * (this.isPrint ? printWidth : this.baseFontSize);
    },
@@ -506,11 +517,7 @@ export default {
      return new Promise((resolve, reject) => {
        const { biInfoId, styleConfigureId } = this.biInfo;
        const { content } = this.$refs['cover'];
-        if (
+        if (!this.hideTaskImage && !this.taskImageInfo.imageUrls.length) {
-          this.taskImageInfo.has &&
-          !this.taskImageInfo.isDelete &&
-          !this.taskImageInfo.imageUrls.length
-        ) {
          reject('照片墙：请删除或至少选择一张图片');
        }
        Promise.all([
@@ -585,14 +592,23 @@ export default {
          this.dealChoice(topicInfo.data.data || []);
          this.dealChoiceMixin(topicMixinInfo.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 () => {
            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 {
  }
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-.bi-block {
-  // margin-top: 8px;
-}
-</style>