1

src/router/index.js

@@ -496,6 +496,17 @@ const routes = [
             },
             component: () => import('@/views/noveltySearch/components/exportReport/index.vue'),
           },
+          // 导出报告2
+          {
+            path: '/exportReportByFile',
+            name: 'exportReportByFile',
+            meta: {
+              title: '导出报告',
+              sign: 'exportReportByFile',
+              belong: 'AllReport',
+            },
+            component: () => import('@/views/noveltySearch/components/exportReport/otherTemplate/index.vue'),
+          },
           // 复用结果
           {
             path: '/reuseResults',

src/views/noveltySearch/components/dialog/reportTemplate/reportTemplateDialog.vue

@@ -9,8 +9,12 @@
         :modal="false"
         v-loading="loading"
         :before-close="close">
-        <div style="height: calc(100vh - 350px)">
+        <div style="height: calc(100vh - 300px)">
+          
         <el-container>  
+          <el-header class="head">
+            <el-button size="small" type="primary" @click="otherTemplate">其他模板</el-button>
+          </el-header>
           <el-main class="height_100" :loading="loading">
             <el-table
               class="copyTable"
@@ -75,6 +79,14 @@ export default {
   created() {},
   mounted() {},
   methods: {
+    otherTemplate(){
+      let router = this.$router.resolve({
+          path: '/exportReportByFile',
+          query: {
+          }
+      })
+      window.open(router.href, '_blank')
+    },
     open(projectId){
       this.projectId = projectId
       this.queryParams.current = 1
@@ -123,4 +135,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.head{
+  display: flex;
+  justify-content: flex-end;
+}
 </style>

src/views/noveltySearch/components/exportReport/otherTemplate/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="height_100">
+    <otherTemplate></otherTemplate>
+  </div>
+</template>
+
+<script>
+import otherTemplate from './otherTemplate.vue';
+export default {
+  components: {
+    otherTemplate
+  },
+  props: {},
+  data() {
+    return {
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/noveltySearch/components/exportReport/otherTemplate/mixins/index.js

@@ -0,0 +1,295 @@
+
+export default{
+    data() {
+        return {
+            json:{}
+        }
+    },
+    methods: {
+        
+        jsonToHtml(json){
+            var {width,height} = json.size
+            var slides = json.slides
+            var html = ''
+            for(let {item,index} in slides){
+                const { type, value } = item.fill
+                
+                var divStyle = ''
+                if (type === 'image') {
+                    divStyle = `background-image: url(${value.picBase6});`
+                }
+                else if (type === 'gradient') {
+                    divStyle = `background-image: radial-gradient(${value.rot}, ${value.colors[0].color}, ${value.colors[value.colors.length - 1].color});`
+                }
+                else {
+                    divStyle = `background-color:${value}`
+                }
+                var div =  `<div id='page${index+1}' style='width:${width}px;height:${height}px;position:relative; ${divStyle}'>`
+                const elements = item.elements
+                for(let el in elements){
+                    var style = 'position:absolute;'
+                    var content=el.content
+                    var tag = ''
+                    var obj = {}
+                    if (el.type === 'text') {
+                        obj = {
+                          width: el.width,
+                          height: el.height,
+                          left: el.left,
+                          top: el.top,
+                          'transform': rotate(el.rotate),
+                        //   defaultFontName: theme.value.fontName,
+                        //   defaultColor: theme.value.fontColor,
+                        //   content: el.content,
+                          'line-height': 1,
+                        //   outline: {
+                        //     color: el.borderColor,
+                        //     width: el.borderWidth,
+                        //     style: el.borderType === 'solid' ? 'solid' : 'dashed',
+                        //   },
+                          border:`${el.borderWidth} ${(el.borderType === 'solid' ? 'solid' : 'dashed')} ${el.borderColor}`,
+                          background: el.fillColor,
+                          'text-direction': el.isVertical,
+                          'writing-mode':el.isVertical,
+                          'box-shadow':el.shadow
+                        }
+                        tag = 'span'
+                        
+                      }
+                      else if (el.type === 'image') {
+                        obj = {
+                            src: el.src,
+                            width: el.width,
+                            height: el.height,
+                            left: el.left,
+                            top: el.top,
+                            'transform': rotate(el.rotate),
+                        }
+                        tag = 'image'
+                      }
+                      else if (el.type === 'audio') {
+                        tag = 'video'
+                        obj={
+                            src: el.blob,
+                            width: el.width,
+                            height: el.height,
+                            left: el.left,
+                            top: el.top,
+                            loop: false,
+                            autoplay: false,
+                          }
+                      }
+                      else if (el.type === 'video') {
+                        tag = 'video'
+                        obj={
+                            src:(el.blob || el.src),
+                            width: el.width,
+                            height: el.height,
+                            left: el.left,
+                            top: el.top,
+                            loop: false,
+                            autoplay: false,
+                          }
+                      }
+                      else if (el.type === 'shape') {
+                        // if (el.shapType === 'line' || /Connector/.test(el.shapType)) {
+                        //     let start = [0, 0]
+                        //     let end = [0, 0]
+                        
+                        //     if (!el.isFlipV && !el.isFlipH) { // 右下
+                        //       start = [0, 0]
+                        //       end = [el.width, el.height]
+                        //     }
+                        //     else if (el.isFlipV && el.isFlipH) { // 左上
+                        //       start = [el.width, el.height]
+                        //       end = [0, 0]
+                        //     }
+                        //     else if (el.isFlipV && !el.isFlipH) { // 右上
+                        //       start = [0, el.height]
+                        //       end = [el.width, 0]
+                        //     }
+                        //     else { // 左下
+                        //       start = [el.width, 0]
+                        //       end = [0, el.height]
+                        //     }
+                        //     tag = 'hr'
+                        //     obj= {
+                        //         width: el.borderWidth || 1,
+                        //         left: el.left,
+                        //         top: el.top,
+                        //         start,
+                        //         end,
+                        //         style: el.borderType === 'solid' ? 'solid' : 'dashed',
+                        //         color: el.borderColor,
+                        //         points: ['', el.shapType === 'straightConnector1' ? 'arrow' : '']
+                        //       }
+                        // }
+                        // else {
+                        //   const shape = shapeList.find(item => item.pptxShapeType === el.shapType)
+          
+                        //   const vAlignMap: { [key: string]: ShapeTextAlign } = {
+                        //     'mid': 'middle',
+                        //     'down': 'bottom',
+                        //     'up': 'top',
+                        //   }
+                          
+                        //   const element: PPTShapeElement = {
+                        //     type: 'shape',
+                        //     id: nanoid(10),
+                        //     width: el.width,
+                        //     height: el.height,
+                        //     left: el.left,
+                        //     top: el.top,
+                        //     viewBox: [200, 200],
+                        //     path: 'M 0 0 L 200 0 L 200 200 L 0 200 Z',
+                        //     fill: el.fillColor || 'none',
+                        //     fixedRatio: false,
+                        //     rotate: el.rotate,
+                        //     outline: {
+                        //       color: el.borderColor,
+                        //       width: el.borderWidth,
+                        //       style: el.borderType === 'solid' ? 'solid' : 'dashed',
+                        //     },
+                        //     text: {
+                        //       content: el.content,
+                        //       defaultFontName: theme.value.fontName,
+                        //       defaultColor: theme.value.fontColor,
+                        //       align: vAlignMap[el.vAlign] || 'middle',
+                        //     },
+                        //     flipH: el.isFlipH,
+                        //     flipV: el.isFlipV,
+                        //   }
+                        //   if (el.shadow) element.shadow = el.shadow
+              
+                        //   if (shape) {
+                        //     element.path = shape.path
+                        //     element.viewBox = shape.viewBox
+              
+                        //     if (shape.pathFormula) {
+                        //       element.pathFormula = shape.pathFormula
+                        //       element.viewBox = [el.width, el.height]
+              
+                        //       const pathFormula = SHAPE_PATH_FORMULAS[shape.pathFormula]
+                        //       if ('editable' in pathFormula) {
+                        //         element.path = pathFormula.formula(el.width, el.height, pathFormula.defaultValue)
+                        //         element.keypoint = pathFormula.defaultValue
+                        //       }
+                        //       else element.path = pathFormula.formula(el.width, el.height)
+                        //     }
+                        //   }
+                        //   if (el.shapType === 'custom') {
+                        //     element.special = true
+                        //     element.path = el.path!
+                        //     element.viewBox = [originWidth, originHeight]
+                        //   }
+              
+                        //   slide.elements.push(element)
+                        // }
+                      }
+                      else if (el.type === 'table') {
+                        const row = el.data.length
+                        const col = el.data[0].length
+                        tag = 'table'
+                        const obj = {
+                          fontname: theme.value.fontName,
+                          color: theme.value.fontColor,
+                        }
+                        content=''
+                        for (let i = 0; i < row; i++) {
+                          content+='<tr>'
+                          for (let j = 0; j < col; j++) {
+                            const cellData = el.data[i][j]
+                            content+='<td>'+ cellData.text + '</td>'
+                           
+                          }
+                          content+='</tr>'
+                        }
+                        obj={
+                            width: el.width,
+                            height: el.height,
+                            left: el.left,
+                            top: el.top,
+                            border:`2px solid #eeece1`,
+                            cellMinHeight: 36,
+                          }
+                      }
+                    //   else if (el.type === 'chart') {
+                    //     let labels: string[]
+                    //     let legends: string[]
+                    //     let series: number[][]
+            
+                    //     if (el.chartType === 'scatterChart' || el.chartType === 'bubbleChart') {
+                    //       const data = el.data
+                    //       labels = data[0].map(item => item + '')
+                    //       legends = ['系列1']
+                    //       series = [data[1]]
+                    //     }
+                    //     else {
+                    //       const data = el.data as ChartItem[]
+                    //       labels = Object.values(data[0].xlabels)
+                    //       legends = data.map(item => item.key)
+                    //       series = data.map(item => item.values.map(v => v.y))
+                    //     }
+            
+                    //     const options: ChartOptions = {}
+            
+                    //     let chartType: ChartType = 'bar'
+          
+                    //     switch (el.chartType) {
+                    //       case 'barChart':
+                    //       case 'bar3DChart':
+                    //         chartType = 'bar'
+                    //         if (el.barDir === 'bar') options.horizontalBars = true
+                    //         if (el.grouping === 'stacked' || el.grouping === 'percentStacked') options.stackBars = true
+                    //         break
+                    //       case 'lineChart':
+                    //       case 'line3DChart':
+                    //       case 'areaChart':
+                    //       case 'area3DChart':
+                    //       case 'scatterChart':
+                    //       case 'bubbleChart':
+                    //         chartType = 'line'
+                    //         if (el.chartType === 'areaChart' || el.chartType === 'area3DChart') options.showArea = true
+                    //         if (el.chartType === 'scatterChart' || el.chartType === 'bubbleChart') options.showLine = false
+                    //         break
+                    //       case 'pieChart':
+                    //       case 'pie3DChart':
+                    //       case 'doughnutChart':
+                    //         chartType = 'pie'
+                    //         if (el.chartType === 'doughnutChart') options.donut = true
+                    //         break
+                    //       default:
+                    //     }
+            
+                    //     slide.elements.push({
+                    //       type: 'chart',
+                    //       id: nanoid(10),
+                    //       chartType: chartType,
+                    //       width: el.width,
+                    //       height: el.height,
+                    //       left: el.left,
+                    //       top: el.top,
+                    //       rotate: 0,
+                    //       themeColor: [theme.value.themeColor],
+                    //       gridColor: theme.value.fontColor,
+                    //       data: {
+                    //         labels,
+                    //         legends,
+                    //         series,
+                    //       },
+                    //       options,
+                    //     })
+                    //   }
+                    //   else if (el.type === 'group' || el.type === 'diagram') {
+                    //     const elements = el.elements.map(_el => ({
+                    //       ..._el,
+                    //       left: _el.left + originLeft,
+                    //       top: _el.top + originTop,
+                    //     }))
+                    //     parseElements(elements)
+                    //   }
+                }
+            }
+        },
+    },
+}

src/views/noveltySearch/components/exportReport/otherTemplate/otherTemplate.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="height_100">
+    <div v-if="show">
+        <!-- 展示html -->
+    </div>
+    <div v-else>
+        <!-- 上传文件 -->
+        <el-upload
+            class="upload-demo"
+            drag
+            action="#"
+            :on-change="onChange"
+        >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        </el-upload>
+    </div>
+  </div>
+</template>
+
+<script>
+import {parse} from 'pptxtojson'
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {
+        show:false
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onChange(file){
+        const reader = new FileReader()
+        var that = this
+        reader.onload = async e=>{
+            const json = await parse(e.target.result)
+            that.json = json
+            that.jsonToHtml(json)
+        }
+        reader.readAsArrayBuffer(file.raw)
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>