在线报告文档

package.json

@@ -49,6 +49,7 @@
     "html-docx-js": "^0.3.1",
     "html-webpack-inline-source-plugin": "^0.0.10",
     "lodash": "^4.17.21",
+    "mammoth": "^1.8.0",
     "pdfjs-dist": "^2.0.943",
     "script-ext-html-webpack-plugin": "^2.1.5",
     "spark-md5": "^3.0.2",

src/views/analyse/custom/components/Charts/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="refresh">
-    <component :is="chartType.component" :width="width" :height="height"></component>
+    <component :is="chartType.component" :formData="formData" :formCount="formCount" :selectedData="selectedData" :width="width" :height="height"></component>
   </div>
 </template>
 

src/views/analyse/custom/components/dialog/addAnalyseGroup.vue

@@ -69,7 +69,6 @@ export default {
   mounted() {},
   methods: {
     open(title,form){
-      console.log(form)
       this.title = title
       this.form2 = form
       this.dialogVisible = true

src/views/analyse/custom/index-benshen.vue

@@ -43,6 +43,7 @@
         :visible.sync="drawer"
         direction="rtl"
         :before-close="handleClose"
+        append-to-body
         size="500px">
             <el-container>
                 <el-main>
@@ -79,7 +80,7 @@ export default {
     TabStyle
   },
   mixins: [customPage],
-  props: {},
+  props: ['search','projectId','patentNums','searchPatentNum','formData'],
   data() {
     return {
       showPage:false,
@@ -100,22 +101,22 @@ export default {
   watch: {},
   computed: {
     ...mapGetters(['userinfo']),
-    search(){
-        var a = this.$route.query.search
-        if(a){
-            a = JSON.parse(a)
-        }
-        return a
-    },
-    projectId(){
-        return this.$route.query.projectId
-    },
-    patentNums(){
-         return this.$route.query.patentNum || 0
-    },
-    searchPatentNum(){
-      return this.$route.query.searchPatentNum
-    }
+    // search(){
+    //     var a = this.$route.query.search
+    //     if(a){
+    //         a = JSON.parse(a)
+    //     }
+    //     return a
+    // },
+    // projectId(){
+    //     return this.$route.query.projectId
+    // },
+    // patentNums(){
+    //      return this.$route.query.patentNum || 0
+    // },
+    // searchPatentNum(){
+    //   return this.$route.query.searchPatentNum
+    // }
   },
   created() {},
   async mounted() {
@@ -192,15 +193,36 @@ export default {
     // 获取？？？
     async getData() {
         await this.getTreeList()
-        if (this.treeList.length === 0 || this.treeList[0].children.length === 0) {
-          this.handleAdd()
-          this.showChart = false
-          this.saveType = 1
-          this.openDrawer(1)
-        } else {
-          this.activeItem = [this.treeList[0].id]
-          await this.handleSelect(this.treeList[0].children[0].id)
+        if(this.formData){
+          for (let key in this.formData.schema) {
+            if (this.formData.schema[key].type !== 6) {
+              this.$set(this.selected, key, this.formData.source[key].slice(0, this.formData.schema[key].num).map(item => item.name))
+              this.formData.source[key].map(item => {
+                item.selected = this.selected[key].indexOf(item.name) !== -1
+              })
+            } else {
+              
+            }
+          }
+          var form = {
+            ...this.formData,
+            search:this.search
+          }
+          this.$store.commit('SET_RELOAD_DATA', true)
+          this.$store.commit('SET_CHART_FORM', form)
+          this.submit()
+        }else{
+          if (this.treeList.length === 0 || this.treeList[0].children.length === 0) {
+            this.handleAdd()
+            this.showChart = false
+            this.saveType = 1
+            this.openDrawer(1)
+          } else {
+            this.activeItem = [this.treeList[0].id]
+            await this.handleSelect(this.treeList[0].children[0].id)
+          }
         }
+        
         this.showPage = true
 
     },
@@ -307,6 +329,24 @@ export default {
       form2.source = this.form.source
       this.$refs.addAnalyseGroup.open(title,form2)
     },
+    async getCurrentData(){
+      var form2 = {
+        type:2,
+        // setting: this.form.setting,
+        // schema: this.form.schema,
+        // source: this.form.source,
+        projectId: this.projectId
+      }
+      form2.setting = this.form.setting
+      form2.schema = this.form.schema
+      form2.source = this.form.source
+      const canvas = await html2canvas(this.$refs.chartDom.$el)
+      const base64 = canvas.toDataURL('image/jpg')
+      return {
+        data:form2,
+        url:base64
+      }
+    },
     handleAdd() {
       let table = []
       for (let i = 0; i < 10; i++) {

src/views/analyse/custom/index.vue

@@ -1,100 +1,21 @@
 <template>
-  <div class="height_100 custom-analyse" v-if="showPage">
-    <el-container>
-      <el-aside width="350px">
-        <TabItem :active-item="activeItem" :treeList="treeList" @edit="handleEdit" @delete="handleDelete" @select="handleSelect" @handleAdd3="handleAdd3"></TabItem>
-      </el-aside>
-      <el-main>
-        <el-header style="height:45px !important">
-          <template>
-            <div class="custom-analyse-options">
-                <div>
-                    <el-button type="text" size="small" @click="openDrawer(1)">分析栏位</el-button>
-                    <el-button type="text" size="small" @click="openDrawer(2)">图形配置</el-button>
-                </div>
-                <div>
-                    <span class="text">专利数量<span class="number">{{ patentNum }} 件</span></span>
-                    
-                    <el-dropdown size="small">
-                        <el-button size="small" type="text">
-                        更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
-                        </el-button>
-                        <el-dropdown-menu slot="dropdown">
-                        <el-dropdown-item @click.native="handleScreenshot">截图</el-dropdown-item>
-                        <el-dropdown-item @click.native="handleAdd1(0)">保存修改</el-dropdown-item>
-                        <el-dropdown-item @click.native="handleAdd1(1)">另存为</el-dropdown-item>
-                        <el-dropdown-item @click.native="handleExport">导出数据</el-dropdown-item>
-                        </el-dropdown-menu>
-                    </el-dropdown>
-                </div>
-            </div>
-          </template>
-        </el-header>
-        <el-main class="custom-analyse-chart-img-box ">
-          <div class="height_100" v-if="showChart" v-loading="loading">
-            <chart ref="chartDom" :width="form.setting.width + form.setting.widthUnit" :height="form.setting.height + form.setting.heightUnit" />
-          </div>
-        </el-main>
-      </el-main>
-    </el-container>
-    <addAnalyseGroup ref="addAnalyseGroup" :projectId="projectId" :treeList="treeList" @save="getTreeList"></addAnalyseGroup>
-    <el-drawer
-        :title="title"
-        :visible.sync="drawer"
-        direction="rtl"
-        :before-close="handleClose"
-        size="500px">
-            <el-container>
-                <el-main>
-                    <component :type="this.form.setting.type" :is='components'></component> 
-                </el-main>
-                <el-footer class="footer-common">
-                    <el-button @click="handleClose">取 消</el-button>
-                    <el-button type="primary" @click="submit" :loading="loadingBtn">确 定</el-button>
-                </el-footer>
-            </el-container>
-            
-    </el-drawer>
+  <div class="height_100">
+    <Analyse :search="search" :projectId="projectId" :patentNums="patentNums" :searchPatentNum="searchPatentNum"></Analyse>
   </div>
 </template>
 
 <script>
+import Analyse from './index-benshen.vue';
 import { mapGetters } from "vuex";
-import html2canvas from "html2canvas";
-import { downLoad, findChildren, getTreeLastChildren, getTreeDataList, downLoadBase64 } from "@/utils";
-import { detectionChartType, getFormPermissions, getTreeNameByIds, getXAxisName, getSourceName } from "@/utils/chart";
-import { customPage } from "./mixins";
-import moment from "moment";
-import addAnalyseGroup from './components/dialog/addAnalyseGroup.vue'
-import Chart from "./components/Charts/index.vue";
-import TabItem from "./components/Tabs/Item";
-import TabData from "./components/Tabs/Data";
-import TabStyle from "./components/Tabs/Style";
 export default {
   components: {
-    addAnalyseGroup,
-    Chart,
-    TabItem,
-    TabData,
-    TabStyle
+    Analyse
   },
-  mixins: [customPage],
+  mixins: [],
   props: {},
   data() {
     return {
-      showPage:false,
-        enable:[],
-        activeItem:[],
-        // treeList:[],
-        showChart:false,
-        title:'',
-        drawer:false,
-        components:'TabData',
-        saveType: 1,
-        loadingBtn:false,
-        id:null,
-        loading:false,
-        patentNum:0
+      
     };
   },
   watch: {},
@@ -119,712 +40,10 @@ export default {
   },
   created() {},
   async mounted() {
-    await this.getPatentNum()
-    this.getData()
-    window.addEventListener('resize',this.refreshChart)
   },
-  methods: {
-    async getPatentNum(){
-      if(!this.searchPatentNum){
-        this.patentNum = this.patentNums
-        return
-      }
-      let params1 = {
-        projectId: this.projectId,
-      }
-      await this.$api.getAllCountColumns(params1).then(res => {
-        if (res.code == 200) {
-          var data = []
-          res.data.data.forEach(item => {
-            if (item.filedKind == -1) {
-              item.value = item.field
-            }
-            if (item.filedKind == 0 && (item.type == 'tree')) {
-
-            } else {
-              data.push(item)
-            }
-          })
-          
-          this.$store.commit('SET_SYSTEM_FIELD',data)
-        }
-      })
-      let params = {
-        current: 1,
-        size: 1,
-        projectId: this.projectId,
-        searchQuery: '',//检索条件
-        customFields: [],
-        orderDTOList: [],//排序信息
-      }
-      this.$api.QueryPatent(params).then(res => {
-        if (res.code == 200) {
-          this.patentNum = res.data.total
-        }
-      }).catch(error=>{
-        this.patentNum = 0
-      })
-    },
-    openDrawer(type){
-        var components = {
-            1:'tabData',
-            2:'tabStyle'
-        }
-        this.title = type == 1?'数据':'样式配置'
-        this.components = components[type]
-        this.drawer = true
-    },
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children;
-      }
-      return {
-        id: node.id,
-        label: node.name,
-        children: node.children
-      };
-    },
-
-
-    reset() {
-
-    },
-    // 获取？？？
-    async getData() {
-        await this.getTreeList()
-        if (this.treeList.length === 0 || this.treeList[0].children.length === 0) {
-          this.handleAdd()
-          this.showChart = false
-          this.saveType = 1
-          this.openDrawer(1)
-        } else {
-          this.activeItem = [this.treeList[0].id]
-          await this.handleSelect(this.treeList[0].children[0].id)
-        }
-        this.showPage = true
-
-    },
-    handleDelete(value) {
-      this.$confirm('确认删除本条数据吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(async () => {
-        const response = await this.$api.delAnalyseGroup({id:value.id})
-        this.$message.success('删除成功')
-        await this.getTreeList()
-        if (this.form.id === value.id) {
-          const tree = this.treeList.find(item => item.id === value.parentId)
-          if (tree && tree.children.length) {
-            await this.handleSelect(tree.children[tree.children.length - 1].id)
-          } else {
-            this.handleAdd()
-          }
-        }
-      })
-    },
-    // 获取需要进行的每一个分析项
-    async getTreeList() {
-      this.loading = true
-      const response = await this.$api.queryAnalyseGroup({ projectId: this.projectId })
-      // 获取到的数据存
-      this.$store.commit('SET_CHART_TREE', response.data)
-      this.setChildren(this.treeList, 'isDisabled')
-      this.loading = false
-    },
-    handleClose() {
-      this.drawer = false
-    },
-    setChildren(arr, key) {
-      arr.forEach(item => {
-        if (item.children && item.children.length) {
-          this.setChildren(item.children, key)
-        } else {
-          this.$set(item, key, item.type === 1)
-        }
-      })
-    },
-    refreshChart() {
-      this.$nextTick(() => {
-        let chartDom = this.$refs.chartDom
-        if (chartDom) {
-          chartDom.refreshChart()
-        }
-      })
-    },
-    onChange() {
-      if (this.saveType || !this.form2.id) {
-        this.form2.name = getSourceName(this.form.schema.x.field, this.form.schema.x.expand, this.form.schema.x.num)
-        const tree = this.treeList.find(item => item.id === this.form2.parentId)
-        if (tree) {
-          this.form2.sort = tree.children.length + 1
-        }
-      } else {
-        this.form2.name = this.tempForm.name
-        this.form2.sort = this.tempForm.sort
-      }
-    },
-    handleAdd3() {
-      var form = {
-            type:1,
-            permissions: 2,
-            parentId: 0,
-            sort: this.treeList.length + 1,
-            name: '',
-        }
-        var title = '添加组'
-        this.$refs.addAnalyseGroup.open(title,form)
-    },
-    async handleScreenshot() {
-      const canvas = await html2canvas(this.$refs.chartDom.$el)
-      const base64 = canvas.toDataURL('image/jpg')
-      downLoadBase64(base64, '图片.png')
-    },
-    async handleAdd1(saveType) {
-      this.saveType = saveType
-    //   this.onChange()
-      var title = '保存自定义分析'
-      let data = {}
-        if(this.saveType == 1){
 
-        }else{
-            data.id = this.id
-        }
-      if (this.id && this.saveType == 0) {
-        const response = await this.$api.queryAnalyseDetail({id:this.id})
-        data = response.data
-      }
-      var form2 = {
-        ...data,
-        type:2,
-        // setting: this.form.setting,
-        // schema: this.form.schema,
-        // source: this.form.source,
-        projectId: this.projectId
-      }
-      form2.setting = this.form.setting
-      form2.schema = this.form.schema
-      form2.source = this.form.source
-      this.$refs.addAnalyseGroup.open(title,form2)
-    },
-    handleAdd() {
-      let table = []
-      for (let i = 0; i < 10; i++) {
-        table.push({
-          min: 0,
-          max: 0,
-          color: null
-        })
-      }
-      let form = {
-        search:this.search,
-        setting: {
-          type: 1,
-          showType: 0,
-          tableType: 0,
-          theme: "customed",
-          titleSize: 14,
-          dataSize: 14,
-          axisSize: 14,
-          dataLabel: false,
-          dataLabel2: false,
-          dataLabel3: false,
-          title1Dir: 0,
-          title1: "",
-          title2: "",
-          dataPosition: "top",
-          fontFamily: "sans-serif",
-          fontFamily2: "sans-serif",
-          fontFamily3: "sans-serif",
-          fontFamily4: "sans-serif",
-          fontWeight: false,
-          fontWeight2: false,
-          nameLocation: "end",
-          nameLocation2: "end",
-          width: "100",
-          height: "650",
-          widthUnit: "%",
-          heightUnit: "px",
-          splitLine: false,
-          splitLine2: false,
-          legend: true,
-          gridTop: "10",
-          gridLeft: "10",
-          gridBottom: "10",
-          gridRight: "10",
-          labelColor: "#000000",
-          legendColor: "#000000",
-          legendLocation: "top",
-          legendFontSize: "13",
-          fontSize: "13",
-          fontSize2: "13",
-          fontColor: "#000000",
-          fontColor2: "#000000",
-          show: true,
-          show2: true,
-          interval: true,
-          interval2: true,
-          rotate: "0",
-          rotate2: "0",
-          paddingTop: 10,
-          paddingBottom: 10,
-          paddingRight: 10,
-          paddingLeft: 10,
-          paddingTop2: 0,
-          paddingLeft2: 0,
-          paddingBottom2: 0,
-          paddingRight2: 0,
-          type2: "scroll",
-          barWidth: "",
-          scatterSize: "0",
-          config: {
-            color: [],
-            line: {
-              name: "",
-              first: "",
-              second: "",
-              operator: 0,
-              enable: false
-            },
-            table: table
-          }
-        },
-        schema: {
-          x: {
-            num: 10,
-            // field:'PA'
-          },
-          y: {
-            num: 10
-          },
-        },
-        source: {
-          x: [],
-          y: []
-        },
-      }
-      this.$store.commit('SET_CHART_FORM', form)
-    },
-    handleEdit(value,type) {
-      var title = '编辑组'
-      var form = { ...value }
-      form.type = type
-      this.$refs.addAnalyseGroup.open(title,form)
-    },
-    getDataCountParams() {
-      let source = {
-        x: [],
-        y: [],
-      }
-      let schema = {
-        x: {},
-        y: {}
-      }
-      let merge = {
-        x: 0,
-        y: 0
-      }
-      Object.keys(source).forEach(dimension => {
-        if (this.form.schema[dimension].type === 6) {
-          if (this.form.setting.type === 20) {
-            source[dimension] = this.getTreeAllNode(dimension)
-            merge[dimension] = 1
-          } else if (this.form.setting.type === 30) {
-            source[dimension] = this.getTreeLastChildren(dimension)
-          } else {
-            source[dimension] = this.getPatentTreeChildren(dimension)
-            merge[dimension] = 1
-          }
-        } else {
-          source[dimension] = this.form.source[dimension].filter(item => item.selected)
-        }
-      })
-      Object.keys(schema).forEach(dimension => {
-        schema[dimension] = {
-          expand: this.form.schema[dimension].expand || 0,
-          field: this.form.schema[dimension].field || 0,
-          num: this.form.schema[dimension].num,
-          type: this.form.schema[dimension].type,
-          ptype: this.form.schema[dimension].ptype,
-          merge: merge[dimension]
-        }
-      })
-      return { source, schema }
-    },
-    async getDataCount() {
-      if (this.reloadData) {
-        var data = {}
-        var sign = false
-        var count = []
-        var dimensions = []
-        if(this.form.schema.x.field && this.form.schema.y.field){
-            sign = true
-            dimensions = ['x','y']
-        }else{
-            sign = false
-            dimensions = ['x']
-            
-        }
-        if (!this.form.setting.type) {
-            if(sign){
-               this.form.setting.type = 2 
-            }else{
-                this.form.setting.type = 1
-            }
-        }else{
-            var chartType = this.$constants.chartType.find(item=>{
-                return item.value == this.form.setting.type
-            }).type
-            if(sign && chartType == 1){
-                this.form.setting.type = 2 
-            }else if(!sign && chartType == 2){
-                this.form.setting.type = 1
-            }
-        }
-        dimensions.forEach(dimension=>{
-            var form = this.form
-            var obj = form.schema[dimension]
-            this.loading = true
-            if(obj.fieldKind == 0){
-                count.push(
-                    {
-                        field:'field',
-                        fieldId:form.schema[dimension].field,
-                        topN: form.schema[dimension].num,
-                        values:this.selected[dimension]
-                    }
-                )
-            }else if(form.schema[dimension].type == 'DateTime'){
-                count.push(
-                    {
-                        field:form.schema[dimension].field,
-                        topN: form.schema[dimension].num,
-                        format:form.schema[dimension].expand,
-                        values:this.selected[dimension]
-                    }
-                )
-            }else{
-                if(['classify'].includes(form.schema[dimension].groupBy)){
-                    count.push(
-                    {
-                        field:form.schema[dimension].expand,
-                        topN: form.schema[dimension].num,
-                        values:this.selected[dimension]
-                    }
-                    )
-                }else{
-                    count.push(
-                    {
-                        field:form.schema[dimension].field,
-                        topN: form.schema[dimension].num,
-                        values:this.selected[dimension]
-                    }
-                    )
-                }
-                
-            }
-        })
-        
-        var params = {
-            ...this.form.search,
-            countVOS:count
-        }
-        try{
-          // var haveCustom = count.find(item=>{
-          //   return item.field == 'field' && item.fieldId
-          // })
-          // if(haveCustom){
-          //   let Custom = {
-          //     customFieldId: haveCustom.fieldId,
-          //   }
-          //  const customResponse = await this.$api.queryCustomOption(Custom)
-          //  if(customResponse.code == 200){
-          //   // var customData =this.$commonJS.treeToArray(customResponse.data.data,{children:child}) 
-          //   var customData =customResponse.data.data
-          //  }else{
-          //   var customData = []
-          //  }
-          // }
-            const response = await this.$api.esCountAnalysis(params)
-            if(sign){
-                var res = Object.keys(response.data.analyseMap)
-                for(var i = 0;i<res.length;i++){
-                    // var x = this.form.source.x[i]
-                    // data[x.name] = {}
-                    // for(var j = 0;j<this.form.source.y.length;j++){
-                    //     data[x.name][this.form.source.y[j].name] = this.form.source.y[j].number
-                    // }
-                    var analyseMapData = response.data.analyseMap[res[i]]
-                    var obj = {}
-                    for(var j =0 ;j<analyseMapData.length;j++){
-                      var name = analyseMapData[j].name
-                        obj[name] = analyseMapData[j].number
-                    }
-                    var key = res[i]
-                    // if(haveCustom){
-                    //   var index = customData.findIndex(item=>{
-                    //     return item.id == key
-                    //   })
-                    //   if(index!=-1){
-                    //     key = customData[index].name
-                    //     customData.splice(index,1)
-                    //   }
-                    // }
-                    data[key] = obj
-                }
-            }else{
-                for(var i = 0;i<response.data.detailDTOS.length;i++){
-                  var key = response.data.detailDTOS[i].name
-                  // if(haveCustom){
-                  //   var index = customData.findIndex(item=>{
-                  //     return item.id == key
-                  //   })
-                  //   if(index!=-1){
-                  //     key = customData[index].name
-                  //     customData.splice(index,1)
-                  //   }
-                  // }
-                    data[key] = response.data.detailDTOS[i].number
-                }
-            }
-            
-        } catch (e) {
-            data = []
-        }
-        this.$store.commit('SET_DATA_COUNT', data)
-        this.refreshChart()
-        this.$store.commit('SET_RELOAD_DATA', false)
-        this.loading = false
-        this.showChart = true
-      }
-    },
-    getTreeAllNode(dimension) {
-      const tree = getTreeDataList(this.form.source[dimension], [])
-      return tree.map(item => { return { id : item.id } })
-    },
-    getTreeLastChildren(dimension) {
-      const tree = getTreeDataList(this.form.source[dimension], [])
-      const data = tree.filter(item => this.treeKey[dimension].indexOf(item.id) !== -1)
-      let arr = data.filter(item =>  !item.children || !item.children.length)
-      data.map(item => arr.push(...getTreeLastChildren(item.children || [], [])))
-      return arr.map(item => { return { id : item.id } })
-    },
-    getPatentTreeChildren(dimension) {
-      const tree = getTreeDataList(this.form.source[dimension], [])
-      const selected = this.treeKey[dimension].map(item => item)
-      let arr = []
-      selected.map(item => {
-        const node = tree.find(t => t.id === item)
-        arr.push(node)
-        arr.push(...getTreeLastChildren(node.children || [], []))
-      })
-      return arr.map(item => { return { id : item.id } })
-    },
-    getTreeNodeName(node, tree) {
-      const path = node.path.split('/').map(p => parseInt(p, 0))
-      let name = []
-      path.map(item => {
-        const n = tree.find(x => x.id === item)
-        if (n) {
-          name.push(n.name)
-        }
-      })
-      return name.join('/')
-    },
-    getExportParams() { 
-      const xAxis = getXAxisName(this.patentField, this.form.schema.x.field, this.form.schema.x.expand)
-      let type = this.form.schema.y.field ? 2 : 1
-      type = this.form.setting.type === 21 ? 3 : type
-      let count = JSON.parse(JSON.stringify(this.count))
-      const xt = this.form.schema.x.type === 6
-      const yt = this.form.schema.y.type === 6
-      const xs = getTreeDataList(this.form.source.x, [])
-      const ys = getTreeDataList(this.form.source.y, [])
-      if (xt && !yt) {
-        for (let key in count) {
-          const xn = xs.find(item => item.id === parseInt(key))
-          const name = this.getTreeNodeName(xn, xs)
-          if (xn) {
-            count[name] = count[key]
-            delete count[key]
-          }
-        }
-      }
-      if (xt && yt) {
-        for (let xk in count) {
-          const xn = xs.find(item => item.id === parseInt(xk))
-          const xa = this.getTreeNodeName(xn, xs)
-          let data = {}
-          for (let yk in count[xk]) {
-            const yn = ys.find(item => item.id === parseInt(yk))
-            const ya = this.getTreeNodeName(yn, ys)
-            if (yn) {
-              data[ya] = count[xk][yk]
-            }
-          }
-          if (xn) {
-            count[xa] = data
-            delete count[xk]
-          }
-        }
-      }
-      if (!xt && yt) {
-        for (let key in count) {
-          let data = {}
-          for (let y in count[key]) {
-            const yn = ys.find(item => item.id === parseInt(y))
-            const ya = this.getTreeNodeName(yn, ys)
-            if (yn) {
-              data[ya] = count[key][y]
-              delete count[y]
-            }
-          }
-          count[key] = data
-        }
-      }
-      return { count, type, xAxis }
-    },
-    async handleExport() {
-        if(!this.form.schema.x.field && !this.form.schema.y.field){
-            this.$message.error('请先添加数据')
-            return false
-        }
-        var data = Object.keys(this.count)
-        var head = ''
-        var body = ''
-        if(this.form.schema.x.field && this.form.schema.y.field){
-            head = `<td>${this.form.schema.x.name}</td>`
-            for(var i = 0;i<this.selected.y.length;i++){
-                head = head + `<td>${this.selected.y[i]}</td>`
-            }
-            for(var i = 0;i<data.length;i++){
-                body = body + `<tr><td>${data[i]}</td>`
-                for(var j = 0;j<this.selected.y.length;j++){
-                    body = body + `<td>${this.count[data[i]][this.selected.y[j]]}</td>`
-                }
-                body = body + '</tr>'
-            }
-        }else{
-            head = `<td>${this.form.schema.x.name}</td><td>数量</td>`
-            for(var i = 0;i<data.length;i++){
-                body = body + `<tr><td>${data[i]}</td><td>${this.count[data[i]]}</td></tr>`
-            }
-        }
-        if(!head && !body){
-            this.$message.error('导出失败，请重试')
-            return false
-        }
-        this.$commonJS.exportExcel(head,body)
-    
-    },
-    resetChartType() {
-      this.form.setting.type = null
-      this.$store.dispatch('resetSettingColor')
-    },
-    async submit() {
-      if (!this.form.schema.x.field) {
-        this.$message.error('请选择一维数据')
-        return false
-      }else{
-        if(this.form.source.x.length == 0){
-          this.$message.error('一维数据为空')
-          return false
-        }
-      }
-      if(this.form.schema.y.field){
-        if(this.form.source.y.length == 0){
-          this.$message.error('二维数据为空')
-          return false
-        }
-      }
-      const chartType = this.$constants.chartType.find(c => c.value === this.form.setting.type)
-      const { op, cg } = detectionChartType(chartType || {}, this.form)
-      if (op && cg) {
-        this.resetChartType()
-      }
-      
-      this.getDataCount()
-      this.refreshChart()
-      this.showChart = true
-      this.handleClose()
-    },
-    async handleSelect(key) {
-        this.id = key
-      let source = {
-        x: [],
-        y: []
-      }
-      this.$store.commit('SET_RELOAD_DATA', true)
-      this.activeName = '1'
-      this.loading = true
-      const response = await this.$api.queryAnalyseDetail({id:key})
-      this.$store.commit('SET_CHART_FORM', JSON.parse(JSON.stringify(response.data)))
-      this.form.search = this.search
-      if (this.enable.indexOf(this.form.setting.type) === -1) {
-        this.form.setting.config.line.enable = false
-      }
-      for (let key in response.data.source) {
-        source[key] = response.data.source[key]
-        if (response.data.source[key].length === 0 || response.data.schema[key].type === 6) {
-          await this.$store.dispatch('getSourceDataList', key)
-          if (response.data.setting.title1) {
-            this.form.setting.title1 = response.data.setting.title1
-          }
-          if (response.data.setting.title2) {
-            this.form.setting.title2 = response.data.setting.title2
-          }
-        }
-      }
-      for (let key in response.data.schema) {
-        if (this.form.schema[key].type !== 6) {
-          this.$set(this.selected, key, this.form.source[key].slice(0, response.data.schema[key].num).map(item => item.name))
-          this.form.source[key].map(item => {
-            item.selected = this.selected[key].indexOf(item.name) !== -1
-          })
-        } else {
-          this.treeKey[key] = source[key].map(item => parseInt(item.name))
-          this.selected[key] = getTreeNameByIds(this.form.source[key], this.treeKey[key])
-        }
-      }
-      await this.$store.dispatch('getItemSettingColor', [])
-      await this.getDataCount()
-      this.$nextTick(() => {
-        this.loading = false
-      })
-    },
-
-  },
-  beforeDestroy(){
-    window.removeEventListener('resize',()=>{})
-  }
 };
 </script>
 <style lang="scss" scoped>
-.custom-analyse {
-  .custom-analyse-chart-img-box {
-    background: #ffffff;
-  }
-  .custom-analyse-chart-title {
-    padding: 20px;
-    span {
-      font-weight: bold;
-      font-size: 16px;
-    }
-  }
-  .custom-analyse-options {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    padding: 20px;
-    .number {
-      padding-left: 10px;
-      color: #409EFF;
-    }
-    .text {
-      font-size: 13px;
-      padding-right: 20px;
-    }
-  }
-}
+
 </style>

src/views/analyse/custom/mixins.js

@@ -5,9 +5,14 @@ import { getLineDataArr, getTreeNameByIds } from "@/utils/chart";
 import html2canvas from 'html2canvas'
 
 export const customPage = {
+  props:{
+    formCount:{},
+    formData:{},
+    selectedData:{}
+  },
   computed: {
     form() {
-      return this.$store.state.chart.form
+      return  this.formData || this.$store.state.chart.form
     },
     changeNum() {
       return this.$store.state.chart.changeNum
@@ -22,13 +27,13 @@ export const customPage = {
       return this.$store.state.chart.treeKey
     },
     selected() {
-      return this.$store.state.chart.selected
+      return this.selectedData || this.$store.state.chart.selected
     },
     selectedLoad() {
       return this.$store.state.chart.selectedLoad
     },
     count() {
-      return this.$store.state.chart.count
+      return this.formCount || this.$store.state.chart.count
     },
     matrix() {
       return this.$store.state.chart.matrix

src/views/components/editor/components/analysis/index.vue

@@ -1,10 +1,9 @@
 <template>
-    <div>
-      <el-drawer class="custom-drawer-form" title="图" size="800px" append-to-body :visible.sync="visible"
+      <el-drawer class="custom-drawer-form" title="分析图" size="1000px" append-to-body :visible.sync="visible"
         direction="rtl" :before-close="close" destroy-on-close>
         <el-container>
-          <el-main>
-            <el-input v-model="value"></el-input>
+          <el-main v-if="visible">
+            <Analysis ref="Analysis" :search="search" :projectId="projectId" :searchPatentNum="true" :formData="data.data"></Analysis>
           </el-main>
           <el-footer class="footer-common">
             <el-button @click="close">取 消</el-button>
@@ -12,45 +11,54 @@
           </el-footer>
         </el-container>
       </el-drawer>
-    </div>
 </template>
   
   <script>
+  import Analysis from '@/views/analyse/custom/index-benshen.vue'
   export default {
       name:"echarts",
-    components: {},
-    props: {},
+    components: {
+      Analysis
+    },
+    props: {
+      projectId:null
+    },
     data() {
       return {
           visible:false,
-          value:'',
           loading:false,
+          search:{
+            searchQuery:  '',//检索条件
+            customFields: [],
+            orderDTOList: [],//排序信息
+            projectId:this.projectId
+          },
+          data:{}
       };
     },
-    watch: {},
+    watch: {
+      projectId(){
+        this.search.projectId = this.projectId
+      }
+    },
     computed: {},
     created() {},
     mounted() {
       
     },
     methods: {
-      edit(){
-          console.log(1)
-          var message = {
-            src:'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
-            data:{
-              value:this.value
-            }
-          }
-          this.$emit('data',message)
+      async edit(){
+          var data =await this.$refs.Analysis.getCurrentData()
+          data.isEdit = this.data.isEdit
+          this.$emit('data',data)
           this.close()
       },
       open(data){
-        if(data){
-          this.$set(this,'value',data.value)
-        }else{
-          this.$set(this,'value','')
+        if(!this.projectId){
+          this.$message.error('没有项目信息！')
+          return
         }
+        this.data=data
         this.visible = true
       },
       close(){

src/views/components/editor/editor.vue

@@ -6,6 +6,9 @@
       <el-header>
         <div class="menu" editor-component="menu">
         <div class="menu-item">
+          <div class="menu-item__import_WORD" @click="import_WORD">
+            <i title="导入word"></i>
+          </div>
           <div class="menu-item__export_WORD" @click="export_WORD">
             <i title="导出word"></i>
           </div>
@@ -40,13 +43,13 @@
                 <li data-family="仿宋" style="font-family:'仿宋';">仿宋</li>
                 <li data-family="楷体" style="font-family:'楷体';">楷体</li>
                 <li data-family="等线" style="font-family:'等线';">等线</li>
-                <!-- <li data-family="华文琥珀" style="font-family:'华文琥珀';">华文琥珀</li>
+                <li data-family="华文琥珀" style="font-family:'华文琥珀';">华文琥珀</li>
                 <li data-family="华文楷体" style="font-family:'华文楷体';">华文楷体</li>
                 <li data-family="华文隶书" style="font-family:'华文隶书';">华文隶书</li>
                 <li data-family="华文新魏" style="font-family:'华文新魏';">华文新魏</li>
                 <li data-family="华文行楷" style="font-family:'华文行楷';">华文行楷</li>
                 <li data-family="华文中宋" style="font-family:'华文中宋';">华文中宋</li>
-                <li data-family="华文彩云" style="font-family:'华文彩云';">华文彩云</li> -->
+                <li data-family="华文彩云" style="font-family:'华文彩云';">华文彩云</li>
                 <li data-family="Arial" style="font-family:'Arial';">Arial</li>
                 <li data-family="Segoe UI" style="font-family:'Segoe UI';">Segoe UI</li>
                 <li data-family="Ink Free" style="font-family:'Ink Free';">Ink Free</li>
@@ -220,7 +223,7 @@
                 <li data-separator='0,0'>
                   <i></i>
                 </li>
-                <li data-separator="1,1">
+                <!-- <li data-separator="1,1">
                   <i></i>
                 </li>
                 <li data-separator="3,1">
@@ -234,11 +237,11 @@
                 </li>
                 <li data-separator="6,2,2,2,2,2">
                   <i></i>
-                </li>
+                </li> -->
               </ul>
             </div>
           </div>
-          <div class="menu-item__watermark">
+          <!-- <div class="menu-item__watermark">
             <i title="水印(添加、删除)"></i>
             <div class="options">
               <ul>
@@ -246,7 +249,7 @@
                 <li data-menu="delete">删除水印</li>
               </ul>
             </div>
-          </div>
+          </div> -->
           <!-- <div class="menu-item__codeblock" title="代码块">
             <i></i>
           </div> -->
@@ -388,6 +391,7 @@
         </div>
       </el-footer>
     </el-container>
+    <Analysis ref="analysis" v-bind="$attrs" @data="insetMyImage"></Analysis>
   </div>
 </template>
 
@@ -399,7 +403,9 @@ import { Dialog } from './components/dialog/Dialog.js'
 import { Signature } from './components/signature/Signature.js'
 // import  {IEditorOption, ITableOption,IHeader, IFooter } from './options.js'
 // import  {IEditorOption, ITableOption,IHeader, IFooter } from '@hufe921/canvas-editor'
-
+import Analysis from './components/analysis'
+import mammoth from "mammoth";
+import mixins from './mixins'
 import {
   IEditorOption, ITableOption,IHeader, IFooter,
   BlockType,
@@ -421,6 +427,10 @@ import {
   splitText } from '@hufe921/canvas-editor'
 
 export default {
+  components:{
+    Analysis
+  },
+  mixins:[mixins],
   data() {
     return {
       editorRef: null,
@@ -441,7 +451,7 @@ export default {
       footer: [],// 页脚信息
       options: IEditorOption,
       // 批注 TODO
-      commentList: []
+      commentList: [],
       };
   },
   props: {
@@ -455,9 +465,13 @@ export default {
       type: String,
       default:''
     },
+    imageData:{
+      type: Array,
+      default:[]
+    },
     // 后端传过来的保存html的JSON数据（用于回显）
     docJson: {
-      type: String,
+      type: Array,
     }
   },
   watch: {
@@ -485,6 +499,15 @@ export default {
         }
       },
       deep: true
+    },
+    docJson:{
+      handler(val){
+        if(this.editorRef){
+            this.editorRef.command.executeSetValue({main:val})
+        }
+        
+      },
+      deep:true
     }
   },
   methods:{
@@ -501,50 +524,88 @@ export default {
     },
     
     //插入分析图
-    analysis(url){
-      if(url){
-
+    analysis(data={}){
+      if(data.url){
+        data.isEdit = true
       }
-      this.$refs.analysis.open()
+      this.$refs.analysis.open(data)
     },
-    insetMyImage(){
-      this.editorRef.command.executeImage({
+    insetMyImage(data){
+      if(data.isEdit){
+        this.editorRef.command.executeReplaceImageElement(data.url);
+        return
+      }
+      this.imageData.push(data)
+      var instance = this.editorRef
+      const image = new Image()
+      const value = data.url
+      image.src = value
+      image.onload = function () {
+        instance.command.executeImage({
           value,
           width: image.width,
           height: image.height
-      })
+        })
+      }
     },
-    //导出word
-    export_WORD(){
+    //获取html
+    getHtml(){
       const value = this.editorRef.command.getValue(this.options)
           const htmlVal = this.editorRef.command.getHTML()
           console.log(value,htmlVal)
       const parser = new DOMParser();
           // 解析包含 HTML 实体的字符串
           const doc = parser.parseFromString(htmlVal.main, "text/html");
+
+          //获取换行的位置以及分页的位置
+          var lineHeight = []
+          var huanhang = []
           var mainValue = []
-          var n= 0
-          for(var i = 0;i<value.data.main.length;i++){
-            var item = value.data.main[i]
+          value.data.main.forEach((item,index)=>{
             if(item.value == '\n' && item.type !='pageBreak'){
-              n +=1
+              huanhang.push(index)
+            }
+            if(item.rowMargin){
+              lineHeight.push({
+                index:index,
+                lineHeight:item.rowMargin
+              })
             }
             if(item.type == 'pageBreak'){
-              mainValue.push(i-n)
+              mainValue.push(index)
             }
-          }
-          console.log(mainValue,doc.body)
+          })
+          //获取没有换行的节点
           var nodes = doc.body.childNodes
-          var html = ''
-          var num = 0
+          var nodes2 = []
           for(var i = 0;i<nodes.length;i++){
-            if(mainValue.length>0){
-              if(i == Number(mainValue[num]) - num){
-                html += `<span><br clear="all" style="page-break-before: always" /> </span>`
-                num +=1
+            if(nodes[i].innerHTML!='<br>'){
+              nodes2.push(nodes[i])
+            }
+          }
+          //新增换行节点
+          huanhang.forEach(item=>{
+            nodes2.splice(item,0,{
+              outerHTML:`<span><br></span>`
+            })
+          })
+          //生成html并在分页的地方加上分页标签
+          var num = 0
+          var html = ''
+          for(var i = 0;i<nodes2.length;i++){
+            
+            if(i == Number(mainValue[num]) - num ){
+              html += `<span><br clear="all" style="page-break-before: always" /> </span>`
+              num +=1
+            }
+            if(lineHeight[num]){
+              if(i == Number(lineHeight[num].index) - num ){
+                nodes2[i].style.lineHeight = lineHeight[num].lineHeight
+                nodes2[i].style.display = 'inline-block'
               }
             }
-            html += nodes[i].outerHTML
+            
+            html += nodes2[i].outerHTML
           }
           html = ` <!DOCTYPE html>
             <html lang="en">
@@ -552,9 +613,47 @@ export default {
             ${html}
             </body>
             </html>`
-          // var converted = htmlDocx.asBlob(html,{orientation:"landscape"})
-          // FileSaver.saveAs(converted,  new Date().toString() + ".docx");
+            console.log(html)
+            return html
+    },
+    //导出word
+    export_WORD(){
+        // var html = this.getHtml()
+        const value = this.editorRef.command.getValue(this.options)
+        var html = this.jsonToHtml(value.data.main)
+        html = ` <!DOCTYPE html>
+            <html lang="en">
+            <body>
+            ${html}
+            </body>
+            </html>`
+            console.log(html)
+          var converted = htmlDocx.asBlob(html,{orientation:"landscape"})
+          FileSaver.saveAs(converted,  new Date().toString() + ".docx");
     },
+    //导入word
+    import_WORD(){
+      var instance = this.editorRef
+      const proxyInputFile = document.createElement("input");
+      proxyInputFile.type = "file";
+      proxyInputFile.accept = ".doc, .docx";
+      proxyInputFile.onchange = () => {
+        const file = proxyInputFile.files[0];
+        console.log(file)
+        const fileReader = new FileReader();
+        fileReader.readAsArrayBuffer(file);
+        fileReader.onload = () => {
+          const value = fileReader.result;
+          mammoth.convertToHtml({ arrayBuffer: value })
+            .then(result => {
+              var html = result.value;
+              instance.command.executeSetHTML({main: html})
+            })
+            .catch(err => console.error(err));
+        };
+      };
+      proxyInputFile.click();
+    }
   },
   async mounted () {
     const isApple = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent)
@@ -581,7 +680,15 @@ export default {
         // 通过菜单key找到菜单项后进行属性修改
         if (menu.key === 'imageChange') {
           menu.callback = (command, context) => {
-            console.log(command, context)           
+            console.log(command, context)    
+            var value = context.endElement.value
+            var index = this.imageData.findIndex(item=>{
+              return item.url == value
+            })
+            if(index!=-1){
+              this.analysis(this.imageData[index])
+              return
+            }       
             const proxyInputFile = document.createElement("input");
             proxyInputFile.type = "file";
             proxyInputFile.accept = ".png, .jpg, .jpeg";
@@ -600,116 +707,10 @@ export default {
       })
 
       // 回显编辑器数据
-      if(this.docJson) {
+      if(this.docJson && this.docJson.length>0) {
         // 通过getValue来的数据回显页面（因为用html回显页面会丢掉font-family，官网git issue有解释）
         // instance.command.executeSetValue({main: JSON.parse(this.docJson)})
-        var data = [
-    {
-        "value": "",
-        "type": "title",
-        "valueList": [
-            {
-                "value": "表一",
-                "size": 26,
-                "bold": true,
-                "rowFlex": "center"
-            }
-        ],
-        "level": "first"
-    },
-    {
-        "value": "\n哥特"
-    },
-    {
-        "value": "比如",
-        "font": "宋体"
-    },
-    {
-        "value": "特地给\n对方v发的v\n"
-    },
-    {
-        "value": "",
-        "type": "table",
-        "trList": [
-            {
-                "height": 42,
-                "tdList": [
-                    {
-                        "colspan": 1,
-                        "rowspan": 1,
-                        "value": [
-                            {
-                                "value": "1",
-                                "size": 16
-                            }
-                        ]
-                    },
-                    {
-                        "colspan": 1,
-                        "rowspan": 1,
-                        "value": []
-                    },
-                    {
-                        "colspan": 1,
-                        "rowspan": 1,
-                        "value": []
-                    }
-                ],
-                "minHeight": 42
-            }
-        ],
-        "width": 554,
-        "height": 42,
-        "colgroup": [
-            {
-                "width": 184.66666666666666
-            },
-            {
-                "width": 184.66666666666666
-            },
-            {
-                "width": 184.66666666666666
-            }
-        ]
-    },
-    {
-        "value": "\n"
-    },
-    {
-      "value":'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
-        "type": "image",
-        "width": 258,
-        "height": 258
-    },
-    {
-        "value": "\n",
-        "type": "pageBreak",
-        "width": 554
-    },
-    {
-        "value": "\n让他是个人提供v"
-    },
-    {
-        "value": "",
-        "type": "list",
-        "valueList": [
-            {
-                "value": "\ncjuidhi \njfoidjciodf"
-            }
-        ],
-        "listType": "ol",
-        "listStyle": "decimal"
-    },
-    {
-        "value": "\n",
-        "type": "pageBreak",
-        "width": 535
-    },
-    {
-        "value": "\nfui8rehfiur "
-    }
-]
-        instance.command.executeSetValue({main: data})
+        instance.command.executeSetValue({main: this.docJson})
       } else {
         // 处理后端返回的html字符串
         // 先替换 \r\n 为 空格，以统一处理空格问题
@@ -722,6 +723,7 @@ export default {
         instance.command.executeSetHTML({main: cleanedHtml})
       }
 
+
       if(this.editMode){
         this.editorRef.command.executeMode(this.editMode)
           // 设置模式
@@ -766,13 +768,13 @@ export default {
           const value = instance.command.getValue(this.options)
           const htmlVal = instance.command.getHTML()
           console.log(value,htmlVal)
-          
-          this.$emit('save', htmlVal)// 保存数据传给父组件
+          this.$emit('save', value)// 保存数据传给父组件
       };
       // 快捷键保存
       instance.listener.saved = (payload) => {
         console.log('elementList: ', payload)
-        this.$emit('save', htmlVal)// 保存数据传给父组件
+        const value = instance.command.getValue(this.options)
+        this.$emit('save', value)// 保存数据传给父组件
       }
       
       // 2. | 撤销 | 重做 | 格式刷 | 清除格式 |
@@ -1181,63 +1183,63 @@ export default {
     instance.command.executePageBreak()
   }
 
-  const watermarkDom = document.querySelector(
-    '.menu-item__watermark'
-  )
-  const watermarkOptionDom =
-    watermarkDom.querySelector('.options')
-  watermarkDom.onclick = function () {
-    console.log('watermark')
-    watermarkOptionDom.classList.toggle('visible')
-  }
-  watermarkOptionDom.onmousedown = function (evt) {
-    const li = evt.target
-    const menu = li.dataset.menu
-    watermarkOptionDom.classList.toggle('visible')
-    if (menu === 'add') {
-      new Dialog({
-        title: '水印',
-        data: [
-          {
-            type: 'text',
-            label: '内容',
-            name: 'data',
-            required: true,
-            placeholder: '请输入内容'
-          },
-          {
-            type: 'color',
-            label: '颜色',
-            name: 'color',
-            required: true,
-            value: '#AEB5C0'
-          },
-          {
-            type: 'number',
-            label: '字体大小',
-            name: 'size',
-            required: true,
-            value: '120'
-          }
-        ],
-        onConfirm: payload => {
-          const nullableIndex = payload.findIndex(p => !p.value)
-          if (~nullableIndex) return
-          const watermark = payload.reduce((pre, cur) => {
-            pre[cur.name] = cur.value
-            return pre
-          }, {})
-          instance.command.executeAddWatermark({
-            data: watermark.data,
-            color: watermark.color,
-            size: Number(watermark.size)
-          })
-        }
-      })
-    } else {
-      instance.command.executeDeleteWatermark()
-    }
-  }
+  // const watermarkDom = document.querySelector(
+  //   '.menu-item__watermark'
+  // )
+  // const watermarkOptionDom =
+  //   watermarkDom.querySelector('.options')
+  // watermarkDom.onclick = function () {
+  //   console.log('watermark')
+  //   watermarkOptionDom.classList.toggle('visible')
+  // }
+  // watermarkOptionDom.onmousedown = function (evt) {
+  //   const li = evt.target
+  //   const menu = li.dataset.menu
+  //   watermarkOptionDom.classList.toggle('visible')
+  //   if (menu === 'add') {
+  //     new Dialog({
+  //       title: '水印',
+  //       data: [
+  //         {
+  //           type: 'text',
+  //           label: '内容',
+  //           name: 'data',
+  //           required: true,
+  //           placeholder: '请输入内容'
+  //         },
+  //         {
+  //           type: 'color',
+  //           label: '颜色',
+  //           name: 'color',
+  //           required: true,
+  //           value: '#AEB5C0'
+  //         },
+  //         {
+  //           type: 'number',
+  //           label: '字体大小',
+  //           name: 'size',
+  //           required: true,
+  //           value: '120'
+  //         }
+  //       ],
+  //       onConfirm: payload => {
+  //         const nullableIndex = payload.findIndex(p => !p.value)
+  //         if (~nullableIndex) return
+  //         const watermark = payload.reduce((pre, cur) => {
+  //           pre[cur.name] = cur.value
+  //           return pre
+  //         }, {})
+  //         instance.command.executeAddWatermark({
+  //           data: watermark.data,
+  //           color: watermark.color,
+  //           size: Number(watermark.size)
+  //         })
+  //       }
+  //     })
+  //   } else {
+  //     instance.command.executeDeleteWatermark()
+  //   }
+  // }
 
   // const codeblockDom = document.querySelector(
   //   '.menu-item__codeblock'
@@ -1732,10 +1734,10 @@ export default {
     '.catalog__header__close'
   )
   const switchCatalog = () => {
-    console.log('目录', isCatalogShow)
+    // console.log('目录', isCatalogShow)
     isCatalogShow = !isCatalogShow
     if (isCatalogShow) {
-      console.log('目录', isCatalogShow)
+      // console.log('目录', isCatalogShow)
       catalogDom.style.display = 'block'
       updateCatalog()
     } else {

src/views/components/editor/mixins/index.js

@@ -0,0 +1,439 @@
+const types = {
+    'text':'getTextHtml',
+    'image':'getImageHtml',
+    'table':'getTableHtml',
+    'superscript':'getSuperscriptHtml',
+    'subscript':'getSubscriptHtml',
+    'separator':'getSeparatorHtml',
+    'pageBreak':'getPageBreakHtml',
+    'checkbox':'getCheckboxHtml',
+    'radio':'getRadioHtml',
+    'tab':'getTabHtml',
+    'date':'getDateHtml',
+    'title':'getTitleHtml',
+    'list':'getListHtml'
+}
+const block = ['separator','pageBreak','list','table']
+
+const TitleLevel ={
+    "first":'h1',
+    "second":'h2',
+    "third":'h3',
+    "fourth":'h4',
+    "fifth":'h5',
+    "sixth":'h6'
+}
+const styles = {
+    font: 'font-family:"${font}";',
+    size: 'font-size:${size}px;',
+    width: 'width:${width}px;',
+    height: 'height:${height}px;',
+    bold: 'font-weight:bold;',
+    color: 'color:${color};',
+    highlight: 'background:${highlight};',
+    italic: 'font-style:italic;',
+    underline: 'text-decoration:underline;',
+    strikeout: 'text-decoration:line-through;',
+    
+    imgDisplay:'display:${imgDisplay};',//图片样式
+    listStyle:'list-style-type:${listStyle};',//列表样式
+    verticalAlign:'vertical-align:${verticalAlign};',//表格样式
+    backgroundColor:'background-color:${backgroundColor};',//表格样式
+}
+const divStyle={
+    rowFlex: 'text-align:${rowFlex};',
+    rowMargin: 'line-height:${rowMargin};',
+}
+const TableBorder ={
+     "all":'border-top: 1px solid rgb(0, 0, 0);border-left: 1px solid rgb(0, 0, 0);',//全部
+     "empty":'',//无
+     "external":'border: 1px solid rgb(0, 0, 0);'//外侧
+}
+
+
+export default{
+    methods: {
+        getStyle(item){
+            var value = item
+            var style = 'font-family: "Microsoft YaHei"; font-size: 16px;'
+            var style2 = {}
+            for(let key in value){
+                if(value[key] && divStyle[key]){
+                    var styleContent = divStyle[key]
+                    if(styleContent.indexOf('${'+ key +'}')!=-1){
+                        var str = value[key]
+                        if(key == 'rowMargin'){
+                            str = Number(str) * 100
+                            str = str + '%'
+                        }
+                        styleContent = styleContent.replace('${'+ key +'}',str)
+                    }
+                    if(!style2[key]){
+                        style2[key] = styleContent
+                    }
+                }
+                if(value[key] && styles[key]){
+                    var styleContent = styles[key]
+                    if(styleContent.indexOf('${'+ key +'}')!=-1){
+                        styleContent = styleContent.replace('${'+ key +'}',value[key])
+                    }
+                    style = style + styleContent
+                }
+            }
+            return {
+                style:style,
+                style2:style2
+            }
+        },
+        jsonToHtml(json){
+            var data = json
+            if(!data || data.length ==0) return '';
+
+            var html = ''
+            var totalHtml = ''
+            var outStyle = {}
+            for(var i = 0;i<data.length;i++){
+                var item = data[i]
+                var sign = false
+                var type = item.type
+                if(!type){
+                    type = 'text'
+                }
+                var obj = this[types[type]](item)
+                if(JSON.stringify(obj.outStyle) != JSON.stringify(outStyle) || block.indexOf(type) !=-1){
+                    sign = true
+                    var style2 = ''
+                    for(let key in outStyle){
+                        style2 = style2 + `${outStyle[key]}`
+                    }
+                    if(style2){
+                        html = `<div style='${style2}'>${html}</div>`
+                    }
+                    totalHtml += html
+                    html = ''
+                    outStyle = obj.outStyle || {}
+                }
+                html += obj.html
+                if(i == data.length - 1 && !sign){
+                    var style2 = ''
+                    for(let key in obj.outStyle){
+                        style2 = style2 + `${obj.outStyle[key]}`
+                    }
+                    if(style2){
+                        html = `<div style='${style2}'>${html}</div>`
+                    }
+                    totalHtml += html
+                }
+            }
+            return totalHtml
+        },
+        getTextHtml(item){
+            var value = item
+            var html = ''
+            html += '<span'
+            var {style,style2} = this.getStyle(item)
+            var str = value.value.replace(/\n/g,'<br>')
+            var str1 = value.value.replace(/\n/g,'')
+            if(str1){
+                var index = value.value.indexOf('\n')
+                if(index == 0){
+                    str = value.value.replace(/\n/,'').replace(/\n/g,'<br>')
+                }
+            }
+            html += ` style='${style}'>${str}</span>`
+            return {
+                html:html,
+                outStyle:style2,
+            }
+        },
+        getImageHtml(item){
+            var value = item
+            var html = ''
+            html += '<img'
+            var {style,style2} = this.getStyle(item)
+            html += ` width='${item.width}' height='${item.height}' src='${value.value}'>`
+            return {
+                html:html,
+                outStyle:style2,
+            }
+        },
+        getTableHtml(item){
+            var value = item
+            var html = ''
+            var tableObj = this.getStyle(item)
+            var colgroup = '<colgroup>'
+            html += '<table cellspacing="0" cellpadding="0" border="0"'
+            var tableBorder = 'border-top: 1px solid rgb(0, 0, 0);border-left: 1px solid rgb(0, 0, 0);'
+            if(item.tableBorder){
+                tableBorder = TableBorder[item.tableBorder]
+            }
+            html += ` style='${tableObj.style}${tableBorder}'>`
+
+            if(value.colgroup && value.colgroup.length>0){
+                for(var i =0;i<value.colgroup.length;i++){
+                    var colgroupItem = value.colgroup[i]
+                    colgroup += `<col width='${colgroupItem.width||0}'>`
+                }
+                colgroup += '</colgroup>'
+            }
+
+            var tbody = '<tbody>'
+            if(value.trList && value.trList.length>0){
+                for(var i = 0;i<value.trList.length;i++){
+                    var tr = value.trList[i]
+                    tbody += `<tr`
+                    var trObj = this.getStyle(tr)
+                    tbody += ` style='${trObj.style}'>`
+                    if(tr.tdList && tr.tdList.length>0){
+                        for(var j=0;j<tr.tdList.length;j++){
+                            var td = tr.tdList[j]
+                            var tdBorder='border-bottom: 1px solid rgb(0, 0, 0);border-right: 1px solid rgb(0, 0, 0);'
+                            if(item.tableBorder && item.tableBorder != 'All'){
+                                var borderTypes = td.borderTypes
+                                if(borderTypes && borderTypes.length>0){
+                                    tdBorder = ''
+                                    for(var bo = 0;bo<borderTypes.length;bo++){
+                                        tdBorder += `border-${borderTypes[bo]}:1px solid rgb(0, 0, 0);`
+                                    }
+                                }
+                            }
+                            
+                            var verticalAlign = td.verticalAlign || 'top'
+                            tdBorder += `vertical-align:${verticalAlign};`
+
+                            tdBorder += `width:${value.colgroup[j].width||0}px;`
+                            tbody += `<td colspan="${td.colspan}" rowspan="${td.rowspan}"`
+                            var tdObj = this.getStyle(td)
+                            tbody += ` style='${tdObj.style}${tdBorder}'>`
+                            if(td.value && td.value.length>0){
+                                for(var n = 0;n<td.value.length;n++){
+                                    var tdValue = td.value[n]
+                                    if(tdValue.type && tdValue.type != 'text'){
+                                        var obj = this[types[tdValue.type]](tdValue)
+                                        tbody += obj.html
+                                        continue;
+                                    }
+                                    var obj = this.getTextHtml(tdValue)
+                                    tbody += obj.html
+                                }
+                            }
+                            tbody += '</td>'
+                        }
+                    }
+                    tbody += '</tr>'
+                }
+            }
+                
+            html += `${colgroup}${tbody}</table>`
+            var style2 = ''
+            var outStyle = tableObj.style2
+            for(let key in outStyle){
+                style2 = style2 + `${outStyle[key]}`
+            }
+            if(style2){
+                html = `<div style='${style2}'>${html}</div>`
+            }
+            return {
+                html:html,
+                outStyle:{},
+            }
+        },
+        getTitleHtml(item){
+            // ITitleElement {
+            //     valueList?: IElement[];
+            //     level?: TitleLevel;
+            //     titleId?: string;
+            //     title?: ITitle;
+            // }
+            var tag = TitleLevel[item.level]
+            
+            var outStyle = {}
+            var html = ''
+            for(var i = 0;i<item.valueList.length;i++){
+                var value = item.valueList[i]
+                if(value.type && value.type != 'text'){
+                    var obj = this[types[value.type]](value)
+                    html += obj.html
+                    outStyle = {
+                        ...outStyle,
+                        ...obj.outStyle
+                    }
+                    continue;
+                }
+                var obj = this.getTextHtml(value)
+                html += obj.html
+                outStyle = {
+                    ...outStyle,
+                    ...obj.outStyle
+                }
+            }
+            html = `<${tag}>${html}</${tag}>`
+            var style2 = ''
+            for(let key in outStyle){
+                style2 = style2 + `${outStyle[key]}`
+            }
+            if(style2){
+                html = `<div style='${style2}'>${html}</div>`
+            }
+            return {
+                html:html,
+                outStyle:{}
+            }
+            
+        },
+        getPageBreakHtml(item){
+            var html = '<span><br clear="all" style="page-break-before: always" /> </span>'
+            return {
+                html:html,
+                outStyle:{}
+            }
+        },
+        getSuperscriptHtml(item){
+            var value = item
+            var obj = this.getStyle(value)
+            var html = `<sup style="${obj.style}">${obj.value}</sup>`
+            return {
+                html:html,
+                outStyle:obj.style2
+            }
+        },
+        getSubscriptHtml(item){
+            var value = item
+            var obj = this.getStyle(value)
+            var html = `<sub style="${obj.style}">${obj.value}</sub>`
+            return {
+                html:html,
+                outStyle:obj.style2
+            }
+        },
+        getSeparatorHtml(item){
+            var html = `<hr>`
+            return {
+                html : html,
+                outStyle:{}
+            }
+        },
+        getListHtml(item){
+            var listObj = this.getStyle(item)
+            var tag = item.listType
+            var html = ''
+            var outStyle = {}
+
+            var valueList = []
+            for(var i = 0;i<item.valueList.length;i++){
+                var value = item.valueList[i]
+                if(value.listWarp) {
+                    continue;
+                }
+                if(value.type && value.type != 'text'){
+                    valueList.push(value)
+                    continue
+                }
+                
+                var objValue = value.value.split(/(?=\n{1,})|(?<=\n{1,})/).filter(item1=>{
+                    return item1
+                })
+                if(objValue && objValue.length>0){
+                    for(var j = 0;j<objValue.length;j++){
+                        var currentObj = JSON.parse(JSON.stringify(value))
+                        currentObj.value = objValue[j]
+                        valueList.push(currentObj)
+                    }
+                    continue;
+                }
+                valueList.push(value)
+            }
+            for(var i= 0;i<valueList.length;i++){
+                var value = valueList[i]
+                if(i == 0){
+                    html += '<li>' 
+                 }
+                if(value.value == '\n'){
+                    if(i != 0 && i != valueList.length-1){
+                       html += '</li>'
+                        html += '<li>'
+                    }
+                    continue
+                }
+                if(value.type && value.type != 'text'){
+                    var obj = this[types[value.type]](value)
+                    if(value.type == 'table'){
+                        html += '</li>'
+                        html += `<span><br></span>${obj.html}`
+                        continue
+                    }else{
+                      html += obj.html  
+                    }
+                    if(i == valueList.length-1){
+                        html += '</li>'
+                    }
+                    continue;
+                }
+                
+                var obj1 = this.getTextHtml(value)
+                html += `${obj1.html}`
+                if(i == valueList.length-1){
+                    html += '</li>'
+                }
+            }
+            html = `<${tag} style='${listObj.style}'>${html}</${tag}>`
+            var style2 = ''
+            for(let key in outStyle){
+                style2 = style2 + `${outStyle[key]}`
+            }
+            if(style2){
+                html = `<div style='${style2}'>${html}</div>`
+            }
+            return {
+                html:html,
+                outStyle:{}
+            }
+        },
+        getCheckboxHtml(item){
+            var html = `<input type="checkbox" checked='${item.checkbox.value}'>`
+            return {
+                html : html,
+                outStyle:{}
+            }
+        },
+        getRadioHtml(item){
+            var html = `<input type="radio" checked='${item.checkbox.value}'>`
+            return {
+                html : html,
+                outStyle:{}
+            }
+        },
+        getTabHtml(item){
+            var html = `<span>&nbsp;&nbsp;</span>`
+            return {
+                html : html,
+                outStyle:{}
+            }
+        },
+        getDateHtml(item){
+            var outStyle = {}
+            var html = ''
+            for(var i = 0;i<item.valueList.length;i++){
+                var value = item.valueList[i]
+                var obj = this.getTextHtml(value)
+                html += obj.html
+                outStyle = {
+                    ...outStyle,
+                    ...obj.outStyle
+                }
+            }
+            html = `<${tag}>${html}</${tag}>`
+            var style2 = ''
+            for(let key in outStyle){
+                style2 = style2 + `${outStyle[key]}`
+            }
+            if(style2){
+                html = `<div style='${style2}'>${html}</div>`
+            }
+            return {
+                html:html,
+                outStyle:{}
+            }
+        },
+    },
+}

src/views/components/editor/style.css

@@ -311,6 +311,13 @@ ul {
 .menu-item__list i {
   background-image: url('~@/assets/images/list.svg');
 }
+
+.menu-item__import_WORD{
+  position: relative;
+}
+.menu-item__import_WORD i {
+  background-image: url('~@/assets/images/import_WORD.svg');
+}
 .menu-item__export_WORD {
   position: relative;
 }
@@ -703,7 +710,7 @@ ul {
 }
 
 .catalog__main {
-  height: calc(100% - 60px);
+  height: calc(100% - 80px);
   padding: 10px 0;
   overflow-y: auto;
   overflow-x: hidden;