专利布局可视化

src/views/product/components/echarts/components/MultipleLine/index.vue

@@ -53,8 +53,6 @@ export default {
     domId:{
       default: 'multipleLine'
     },
-   NewForm:{
-   }
   },
   data() {
     return {
@@ -95,7 +93,6 @@ export default {
     },
     set(){
       this.drawer = true
-      // this.$emit('form',this.form)
     },
     open(chartData,name,relation,timeUnit){
       this.chartData = chartData

src/views/product/components/echarts/components/echarts.vue

@@ -44,43 +44,25 @@
                     </el-select>
                 </el-form-item>
             </el-form>
-            <!-- <div>
-                <el-button type="primary" @click="setting">配置</el-button>
-            </div> -->
             </div>
 
             
         </div>
         <div>
-            <component v-if="type == 1" :is="component" :ref="components" :domId="components" :NewForm="form"  @form="getForm"></component>
-            <component :is='component' :ref="component"  :NewForm="form" @form="getForm"></component>  
+            <component v-if="type == 1" :is="component" :ref="components" :domId="components" ></component>
+            <component :is='component' :ref="component"></component>  
         </div>  
-        <el-drawer
-            title="图表配置"
-            :visible.sync="drawer"
-            direction="rtl"
-            :before-close="handleClose"
-            size="500px">
-            <div style="width:500px">
-               <Style :form="form"></Style> 
-            </div>
-            
-        </el-drawer>
     </div>
 </template>
 <script>
 import { commonMethods } from './echarts'
-import Style from '@/views/components/setting/style.vue'
 export default {
     mixins:[commonMethods],
     props:['id','type','name'],
     components:{
-        Style
     },
     data() {
         return {
-            form:{},
-            drawer:false,
             height:'400px',
             ChartData:[],
             component:'MultipleLine',
@@ -142,17 +124,7 @@ export default {
         this.init()
     },
     methods: {
-        getForm(val){
-            this.form = val
-            this.drawer = true
-        },
-        handleClose(){
-            this.form = JSON.parse(JSON.stringify(this.form))
-            this.drawer = false
-        },
-        setting(){
-            this.drawer = true
-        },
+
         changeRelation(){
             var relation = this.relationList.find(i=>{
                 return i.value == this.queryParams.relation

src/views/product/components/index.vue

@@ -199,6 +199,7 @@ export default {
           this.toFramework(row,1)
           break;
         case '4'://专利布局可视化
+          this.MindIndex(row,1)
           break;
         case '5'://删 除
           this.deletes(row)

src/views/product/components/jsMind/components/mind.vue

@@ -263,7 +263,6 @@ export default {
                 </div>
                 `;
       } else if (modelInfo.MindType == 2) {//产品
-        console.log(modelInfo)
         return `
                 <div class="model-edit-card">
                   <div class="img" onclick="vm.checkImg('${ (modelInfo.systemFileList && modelInfo.systemFileList.length > 0)? this.$commonJS.checkViewer(modelInfo.systemFileList[0].guid): ""}')">
@@ -271,8 +270,8 @@ export default {
                   </div>
                   <div class="patent">
                       <p class="model-title-p"><span>${ modelInfo.name}</span></p>
-                      <p class="model-title-p model-patent" onclick="check(${modelInfo.id},${modelInfo.MindType},'${modelInfo.name}','1')">商品化专利：<span>${modelInfo.productPatentNum}</span></p>
-                      <p class="model-title-p model-patent" onclick="check(${modelInfo.id},${modelInfo.MindType},'${modelInfo.name}','2')">相关专利：<span>${modelInfo.patentNum}</span></p>
+                      <p class="model-title-p model-patent" onclick="check(${modelInfo.MindId},${modelInfo.MindType},'${modelInfo.name}','${modelInfo.categoryId}')">商品化专利：<span>${modelInfo.productPatentNum}</span></p>
+                      <p class="model-title-p model-patent1" onclick="check1(${modelInfo.MindId},${modelInfo.MindType},'${modelInfo.name}','${modelInfo.categoryId}')">相关专利：<span>${modelInfo.patentNum}</span></p>
                   </div>
                   <div class="icon" style="display:${modelInfo.hasChildren? "block":"none"}">
                       >>>
@@ -287,7 +286,7 @@ export default {
                   </div>
                     <div  class="patent">
                             <p class="model-title-p"><span>${ modelInfo.name}</span></p>
-                            <p class="model-title-p model-patent" onclick="check(${modelInfo.id},${modelInfo.MindType},'${modelInfo.pathName}','${modelInfo.productName}')">相关专利：<span>${modelInfo.patentNum}</span></p>
+                            <p class="model-title-p model-patent1" onclick="check1(${modelInfo.MindId},${modelInfo.MindType},'${modelInfo.pathName}','${modelInfo.productName}')">相关专利：<span>${modelInfo.patentNum}</span></p>
                     </div>
                     <div class="icon" style="display:${ modelInfo.hasChildren? "block":"none"}">
                       >>>
@@ -297,35 +296,40 @@ export default {
       }
     },
 
-
-    //查看相关专利
-    check(id, type,name,productName) {
-      // console.log(id,type,name)
-      // console.log(name.lastIndexOf('/') == name.length-1)
-      // if(name.lastIndexOf('/') == name.length-1){
-      //   name = name.substring(0, str.length - 1);
-      // }
+    /**
+     * 查看相关专利
+     * @param {*} id 产品id或者架构id
+     * @param {*} type 类型2是产品3是架构
+     * @param {*} name 产品名称或者架构路径
+     * @param {*} categoryId 架构id 
+     */
+    check(id, type,name,categoryId) {
       if (type == 2) {//产品
-        const router = this.$router.resolve({
-          path: "/relatedPatentsIndex",
-          query: {
-            id: id,
-            name:name,
-            queryType:productName
-          },
-        });
-        window.open(router.href, "_blank");
-      } else if (type == 3) {//架构
-        name =productName + '/' + name.substring(0, name.length - 1);
-        const router = this.$router.resolve({
-          path: "/relatedPatentsIndex",
+        var form = {
+          name:name,
+          id:id,
+          type:type,
+          categoryId:categoryId
+        }
+        let router = this.$router.resolve({
+          path: '/frameworkIndex',
           query: {
-            structureId: id,
-            name:name
-          },
-        });
-        window.open(router.href, "_blank");
-      }
+            row: JSON.stringify(form),
+          }
+        })
+        window.open(router.href, '_blank')
+      } 
+      // else if (type == 3) {//架构
+      //   name =productName + '/' + name.substring(0, name.length - 1);
+      //   const router = this.$router.resolve({
+      //     path: "/relatedPatentsIndex",
+      //     query: {
+      //       structureId: id,
+      //       name:name
+      //     },
+      //   });
+      //   window.open(router.href, "_blank");
+      // }
       this.next = false;
     },
     // 筛选树结构
@@ -468,108 +472,108 @@ export default {
       const selectedNode = this.jm.get_selected_node();
       if (selectedNode) {
         if (selectedNode.children.length == 0) {
-          if (selectedNode.data.rowType == 1) {//查询产品
-            var queryParams = {
-              productCategoryId: selectedNode.data.ids,
-            };
-            this.$api.queryProducts(queryParams).then((res) => {
-              if (res.code == 200) {
-                this.jm.enable_edit();
-                res.data.list.forEach((item) => {
-                  var data = {
-                    expanded: false,
-                    rowType: 2,
-                    ids: item.id,
-                    productName:item.productName,
-                    children: [],
-                  };
-                  this.jm.toggle_node(selectedNode.id);
-                  data.children = item.children ? item.children : [];
-                  item.type = 2;
-                  this.jm.add_node(
-                    selectedNode.id,
-                    "产品" + item.id,
-                    this.getModelCardDom(item),
-                    data
-                  );
-                });
-                this.jm.disable_edit();
-              }
-            });
-          } else if (selectedNode.data.rowType == 2) {//查询产品架构
-            var queryParams = {
-              productId: selectedNode.data.ids,
-              structureId: 0,
-            };
-            this.$api.queryStructures(queryParams).then((res) => {
-              if (res.code == 200) {
-                this.jm.enable_edit();
-
-                res.data.children.forEach((item) => {
-                  var data = {
-                    expanded: false,
-                    rowType: 3,
-                    ids: item.id,
-                    productId: selectedNode.data.ids,
-                    productName:selectedNode.data.productName,
-                  };
-                  this.jm.toggle_node(selectedNode.id);
-                  data.children = item.children ? item.children : [];
-                  item.productName=selectedNode.data.productName,
-                  item.type = 3;
-                  this.jm.add_node(
-                    selectedNode.id,
-                    "架构" + item.id,
-                    this.getModelCardDom(item),
-                    data
-                  );
-                  // if(item.children&& item.children.length>0){
-                  //     this.deepChildren(item.id,item.children)
-                  // }
-                });
-
-                this.jm.disable_edit();
-              }
-            });
-          } else {
-            if ((selectedNode.data.children&&selectedNode.data.children.length==0) ||( selectedNode.data.hasChildren && selectedNode.data.hasChildren.length==0)) {
-              return false;
-            }
-            var queryParams = {
-              structureId: selectedNode.data.ids,
-              productId: selectedNode.data.productId,
-            };
-            this.$api.queryStructures(queryParams).then((res) => {
-              if (res.code == 200) {
-                this.jm.enable_edit();
-
-                res.data.children.forEach((item) => {
-                  var data = {
-                    expanded: false,
-                    rowType: 3,
-                    ids: item.id,
-                    productId: selectedNode.data.productId,
-                    productName:selectedNode.data.productName,
-                  };
-                  this.jm.toggle_node(selectedNode.id);
-                  data.children = item.children ? item.children : [];
-                  item.productName=selectedNode.data.productName,
-                  item.type = 3;
-                  this.jm.add_node(
-                    selectedNode.id,
-                    "架构" + item.id,
-                    this.getModelCardDom(item),
-                    data
-                  );
-                  // if(item.children&& item.children.length>0){
-                  //     this.deepChildren(item.id,item.children)
-                  // }
-                });
-
-                this.jm.disable_edit();
-              }
-            });
-          }
+          // if (selectedNode.data.rowType == 1) {//查询产品
+          //   var queryParams = {
+          //     productCategoryId: selectedNode.data.ids,
+          //   };
+          //   this.$api.queryProducts(queryParams).then((res) => {
+          //     if (res.code == 200) {
+          //       this.jm.enable_edit();
+          //       res.data.list.forEach((item) => {
+          //         var data = {
+          //           expanded: false,
+          //           rowType: 2,
+          //           ids: item.id,
+          //           productName:item.productName,
+          //           children: [],
+          //         };
+          //         this.jm.toggle_node(selectedNode.id);
+          //         data.children = item.children ? item.children : [];
+          //         item.type = 2;
+          //         this.jm.add_node(
+          //           selectedNode.id,
+          //           "产品" + item.id,
+          //           this.getModelCardDom(item),
+          //           data
+          //         );
+          //       });
+          //       this.jm.disable_edit();
+          //     }
+          //   });
+          // } else if (selectedNode.data.rowType == 2) {//查询产品架构
+          //   var queryParams = {
+          //     productId: selectedNode.data.ids,
+          //     structureId: 0,
+          //   };
+          //   this.$api.queryStructures(queryParams).then((res) => {
+          //     if (res.code == 200) {
+          //       this.jm.enable_edit();
+
+          //       res.data.children.forEach((item) => {
+          //         var data = {
+          //           expanded: false,
+          //           rowType: 3,
+          //           ids: item.id,
+          //           productId: selectedNode.data.ids,
+          //           productName:selectedNode.data.productName,
+          //         };
+          //         this.jm.toggle_node(selectedNode.id);
+          //         data.children = item.children ? item.children : [];
+          //         item.productName=selectedNode.data.productName,
+          //         item.type = 3;
+          //         this.jm.add_node(
+          //           selectedNode.id,
+          //           "架构" + item.id,
+          //           this.getModelCardDom(item),
+          //           data
+          //         );
+          //         // if(item.children&& item.children.length>0){
+          //         //     this.deepChildren(item.id,item.children)
+          //         // }
+          //       });
+
+          //       this.jm.disable_edit();
+          //     }
+          //   });
+          // } else {
+          //   if ((selectedNode.data.children&&selectedNode.data.children.length==0) ||( selectedNode.data.hasChildren && selectedNode.data.hasChildren.length==0)) {
+          //     return false;
+          //   }
+          //   var queryParams = {
+          //     structureId: selectedNode.data.ids,
+          //     productId: selectedNode.data.productId,
+          //   };
+          //   this.$api.queryStructures(queryParams).then((res) => {
+          //     if (res.code == 200) {
+          //       this.jm.enable_edit();
+
+          //       res.data.children.forEach((item) => {
+          //         var data = {
+          //           expanded: false,
+          //           rowType: 3,
+          //           ids: item.id,
+          //           productId: selectedNode.data.productId,
+          //           productName:selectedNode.data.productName,
+          //         };
+          //         this.jm.toggle_node(selectedNode.id);
+          //         data.children = item.children ? item.children : [];
+          //         item.productName=selectedNode.data.productName,
+          //         item.type = 3;
+          //         this.jm.add_node(
+          //           selectedNode.id,
+          //           "架构" + item.id,
+          //           this.getModelCardDom(item),
+          //           data
+          //         );
+          //         // if(item.children&& item.children.length>0){
+          //         //     this.deepChildren(item.id,item.children)
+          //         // }
+          //       });
+
+          //       this.jm.disable_edit();
+          //     }
+          //   });
+          // }
         } else {
           this.jm.toggle_node(selectedNode.id);
         }
@@ -705,10 +709,12 @@ export default {
       await this.$api.queryProductCategory(params).then(response=>{
         if(response.code == 200){
           this.currentData = response.data.data[0]
-          this.currentData.MindId = `产品类别${this.currentData.id}`
+          this.currentData.MindId = this.currentData.id
+          this.currentData.id = `产品类别${this.currentData.id}`
           this.currentData.MindType= this.type
         }
       })
+      
     } else if (this.type == 2) {//产品
       let params = {
         searchQuery:`product_id=${this.id}`,//检索条件
@@ -716,98 +722,234 @@ export default {
       await this.$api.queryProduct(params).then(response=>{
         if(response.code == 200){
           this.currentData = response.data.data[0]
-          this.currentData.MindId = `产品${this.currentData.id}`
+          this.currentData.MindId = this.currentData.id
+          this.currentData.id = `产品${this.currentData.id}`
           this.currentData.MindType= this.type
         }
       })
     }else if (this.type == 0){//全部
       this.currentData = {}
-      this.currentData.MindId = `产品${this.currentData.id}`
+      this.currentData.MindId = `root`
+      this.currentData.id = `root`
       this.currentData.MindType= this.type
     }
     this.currentData.expanded = false
-    this.currentData.topic = this.getModelCardDom(this.currentData)
+    await this.LoadData(this.currentData)
+    // this.currentData.topic = this.getModelCardDom(this.currentData)
   },
 
-    //初始化JsMind数据
-    async initData(currentData){
+  //装载数据
+  async LoadData(currentData){
+    if(currentData.MindType == 1){//产品类别
+      var data1 = currentData
+      //装载产品
+      const [products] = await Promise.allSettled([this.initData(data1)])
+      var productList = products.status =='fulfilled'?products.value:[]
+      if(productList.length>0){
+        data1.hasChildren = true
+        data1.children = productList.map(item=>{
+          item.MindId = item.id
+          item.id = `产品${item.id}`
+          item.MindType = 2
+          item.expanded = false
+          item.topic = this.getModelCardDom(item)
+          return item
+        })     
+      }
+      data1.topic = this.getModelCardDom(data1)
+
+
+      //装载架构
+      var data2 = data1.children
+      // 获取需要返回的架构数组以及funList
+      var treeList = [], funList = []
+      for(var i = 0;i<data2.length;i++){
+        treeList.push(`tree${i+1}`)
+        funList.push(this.initData(data2[i]))
+      }
+      treeList = await Promise.allSettled(funList)
+      for(var i = 0;i<data2.length;i++){
+        var trees = treeList[i].status =='fulfilled'?treeList[i].value:[]
+        if(trees.length>0){
+          data2[i].hasChildren = true
+          this.deepChildren(trees,data2[i])
+        }
+        data2[i].topic = this.getModelCardDom(data2[i])
+        data2[i].children = trees
+      }
+
+    }else if(currentData.MindType == 2){//产品
+      var data1 = currentData
+      //装载架构
+      const [tree] = await Promise.allSettled([this.initData(data1)])
+      var trees = tree.status =='fulfilled'?tree.value:[]
+      if(trees.length>0){
+        data1.hasChildren = true
+        this.deepChildren(trees,data1)
+      }
+      data1.topic = this.getModelCardDom(data1)
+      data1.children = trees
+    }else if(currentData.MindType == 0){//全部
+      var data1 = currentData
+      //装载产品类别
+      const [category] = await Promise.allSettled([this.initData(data1)])
+      var categoryList = category.status =='fulfilled'?category.value:[]
+      if(categoryList.length>0){
+        data1.hasChildren = true
+        data1.children = categoryList.map(item=>{
+          item.MindId = item.id
+          item.id = `产品类别${item.id}`
+          item.MindType = 1
+          item.expanded = false
+          item.topic = this.getModelCardDom(item)
+          return item
+        })   
+      }
+      data1.topic = this.getModelCardDom(data1)
+
+      //装载产品
+      var data2 = data1.children
+      // 获取需要返回的架构数组以及funList
+      var productList = [], funList = []
+      for(var i = 0;i<data2.length;i++){
+        productList.push(`product${i+1}`)
+        funList.push(this.initData(data2[i]))
+      }
+      productList = await Promise.allSettled(funList)
+      for(var i = 0;i<data2.length;i++){
+        var product = productList[i].status =='fulfilled'?productList[i].value:[]
+        if(product.length>0){
+          data2[i].hasChildren = true
+          data2[i].children = product.map(item=>{
+            item.MindId = item.id
+            item.id = `产品${item.id}`
+            item.MindType = 2
+            item.expanded = false
+            item.topic = this.getModelCardDom(item)
+            return item
+          }) 
+        }
+        data2[i].topic = this.getModelCardDom(data2[i])
+      }
+
+      //装载架构
+      var data3 = data2.children
+      // 获取需要返回的架构数组以及funList
+      var treeList = [], funList = []
+      for(var i = 0;i<data3.length;i++){
+        treeList.push(`tree${i+1}`)
+        funList.push(this.initData(data3[i]))
+      }
+      treeList = await Promise.allSettled(funList)
+      for(var i = 0;i<data3.length;i++){
+        var trees = treeList[i].status =='fulfilled'?treeList[i].value:[]
+        if(trees.length>0){
+          data3[i].hasChildren = true
+          this.deepChildren(trees,data3[i])
+        }
+        data3[i].topic = this.getModelCardDom(data3[i])
+        data3[i].children = trees
+      }
+    }
+  },
+  //初始化JsMind数据
+  async initData(currentData){
       if(currentData.MindType == 1){
         let params = {
-          searchQuery:`product_id=${currentData.id}`,//检索条件
+          searchQuery:`category_id=${currentData.MindId}`,//检索条件
         }
-        await this.$api.queryProduct(params).then(response=>{
-          if(response.code == 200){
-            if(response.data.data.length>0){
-              currentData.hasChildren = true
-              currentData.children = response.data.data.map(item=>{
-                item.MindId = `产品${item.id}`
-                item.MindType = 2
-                item.expanded = false
-                item.topic = this.getModelCardDom(item)
-                // this.jm.enable_edit();
-                // this.jm.update_node(item.MindId,this.getModelCardDom(item) )
-                // this.jm.disable_edit();
-                return item
-              })
-              
-              
-            }
-          }
-        })
-      }else if(currentData.MindType == 2){
+        return await this.$api.queryProduct(params).then(response=> response.data.data)
+      }else if(currentData.MindType == 2){//产品
         var params = {
           type: currentData.MindType,
-          typeId: currentData.id
+          typeId: currentData.MindId
         }
-        await this.$api.queryTreeNodeTree(params).then(res => {
-          if (res.code == 200) {
-            var data = res.data.data
-            if(data.length>0){
-              currentData.hasChildren = true
-              var data = this.deepChildren(data,currentData)
-            }
-            currentData.children = data
-          }
-        })
+        return await this.$api.queryTreeNodeTree(params).then(response=> response.data.data)
       }else if(currentData.MindType == 0){
         let params = {
           searchQuery:'',//检索条件
         }
-        await this.$api.queryProductCategory(params).then(response=>{
-          if(response.code == 200){
-            if(response.data.data.length>0){
-              currentData.hasChildren = true
-              currentData.children = response.data.data.map(item=>{
-                item.MindId = `产品类别${item.id}`
-                item.MindType = 1
-                item.expanded = false
-                item.topic = this.getModelCardDom(item)
-                // this.jm.enable_edit();
-                // this.jm.update_node(item.MindId,this.getModelCardDom(item) )
-                // this.jm.disable_edit();
-                return item
-              })
-             
-            }
-          }
-        })
+        return await this.$api.queryProductCategory(params).then(response=> response.data.data)
       }
       
     },
+    // //初始化JsMind数据
+    // async initData(currentData){
+    //   if(currentData.MindType == 1){
+    //     let params = {
+    //       searchQuery:`product_id=${currentData.id}`,//检索条件
+    //     }
+    //     await this.$api.queryProduct(params).then(response=>{
+    //       if(response.code == 200){
+    //         if(response.data.data.length>0){
+    //           currentData.hasChildren = true
+    //           currentData.children = response.data.data.map(item=>{
+    //             item.MindId = `产品${item.id}`
+    //             item.MindType = 2
+    //             item.expanded = false
+    //             item.topic = this.getModelCardDom(item)
+    //             // this.jm.enable_edit();
+    //             // this.jm.update_node(item.MindId,this.getModelCardDom(item) )
+    //             // this.jm.disable_edit();
+    //             return item
+    //           })
+              
+              
+    //         }
+    //       }
+    //     })
+    //   }else if(currentData.MindType == 2){
+    //     var params = {
+    //       type: currentData.MindType,
+    //       typeId: currentData.id
+    //     }
+    //     await this.$api.queryTreeNodeTree(params).then(res => {
+    //       if (res.code == 200) {
+    //         var data = res.data.data
+    //         if(data.length>0){
+    //           currentData.hasChildren = true
+    //           var data = this.deepChildren(data,currentData)
+    //         }
+    //         currentData.children = data
+    //       }
+    //     })
+    //   }else if(currentData.MindType == 0){
+    //     let params = {
+    //       searchQuery:'',//检索条件
+    //     }
+    //     await this.$api.queryProductCategory(params).then(response=>{
+    //       if(response.code == 200){
+    //         if(response.data.data.length>0){
+    //           currentData.hasChildren = true
+    //           currentData.children = response.data.data.map(item=>{
+    //             item.MindId = `产品类别${item.id}`
+    //             item.MindType = 1
+    //             item.expanded = false
+    //             item.topic = this.getModelCardDom(item)
+    //             // this.jm.enable_edit();
+    //             // this.jm.update_node(item.MindId,this.getModelCardDom(item) )
+    //             // this.jm.disable_edit();
+    //             return item
+    //           })
+             
+    //         }
+    //       }
+    //     })
+    //   }
+      
+    // },
 
     //递归
     deepChildren(data,currentData){
       for(var i = 0;i<data.length;i++){
-        data[i].MindId = `架构${data[i].id}`
+        data[i].MindId = data[i].id
+        data[i].id = `架构${data[i].id}`
         data[i].MindType = 3
         data[i].expanded = false
         
         data[i].currentName = currentData.name
         data[i].currentId = currentData.id
         data[i].currentType = currentData.MindType
-        // this.jm.enable_edit();
-        // this.jm.update_node(item.MindId,this.getModelCardDom(item) )
-        // this.jm.disable_edit();
         if(data[i].child && data[i].child.length>0){
           data[i].hasChildren = true
           data[i].topic = this.getModelCardDom(data[i])
@@ -826,7 +968,7 @@ export default {
  async mounted() {
     window.check = this.check;
     await this.getData()
-    await this.initData(this.currentData)
+    // await this.initData(this.currentData)
     this.mind.data = this.currentData
     this.jm = jsMind.show(this.options, this.mind);
 

src/views/project/patentDetails/components/patentMessage/history/echarts/components/MultipleLine/index.vue

@@ -0,0 +1,315 @@
+<template>
+  <div style="margin-top:20px" >
+    <div style="display:flex;justify-content: flex-end;cursor: pointer;margin-bottom: -27px;margin-right:8px" :style="{ width: widths }">
+      <div class="set2">
+        <div>
+          <i class="el-icon-refresh" style="font-size:18px;" @click="review"></i>
+        </div>
+        <p class="text">还原</p>
+      </div>
+      <div class="set">
+        <div>
+          <i class="el-icon-setting" style="font-size: 18px;" @click="set"></i>
+        </div>
+        <p class="text">设置图表格式</p>
+      </div>
+      
+    </div>
+    <div :id="domId" :style="{ width: widths , height:heights }" ></div>
+    <el-drawer
+            title="图表配置"
+            :visible.sync="drawer"
+            direction="rtl"
+            :before-close="handleClose"
+            size="500px">
+            <div style="width:500px">
+               <Style :form="form"></Style> 
+            </div>
+            
+        </el-drawer>
+  </div>
+  
+</template>
+
+<script>
+import {chartOptionMixins,settingMethod} from '@/views/components/setting/mixins'
+import Style from '@/views/components/setting/style.vue'
+var that = this
+export default {
+  name: "CMultipleLine",
+  components:{
+        Style
+    },
+  mixins:[chartOptionMixins,settingMethod],
+  props: {
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '500px'
+    },
+    domId:{
+      default: 'multipleLine'
+    },
+  },
+  data() {
+    return {
+      widths:'100%',
+      heights:'500px',
+      drawer:false,
+      changeColor:true,
+      id:this.domId,
+      relation:{},
+      name:'',
+      // domId: 'multipleLine',
+      chartData:[]
+    }
+  },
+  computed:{
+    formSetting(){
+      return this.form.setting
+    },
+  },
+  watch:{
+    formSetting(val){
+      this.dispose(this.id)
+      this.heights = val.height + val.heightUnit
+      this.widths = val.width + val.widthUnit
+      var a = this.getOption2()
+      this.$nextTick(() => {
+        this.initChart(this.id, a)
+      })
+   }
+  },
+  mounted() {
+  },
+  
+  methods: {
+    handleClose(){
+      this.form = JSON.parse(JSON.stringify(this.form))
+      this.drawer = false
+    },
+    set(){
+      this.drawer = true
+    },
+    open(chartData,name,relation,timeUnit){
+      this.chartData = chartData
+      this.relation = relation
+      this.name = name
+      var a = this.getOption(name,relation,timeUnit)
+      this.$nextTick(() => {
+        this.initChart(this.id, a)
+      })
+    },
+  review(){
+      this.dispose(this.id)
+      var a = this.getOption2()
+      this.$nextTick(() => {
+          this.initChart(this.id, a)
+        })
+    },
+  getOption2(){
+    this.changeColor = false
+    let {backgroundColor,title,legend, xAxis, yAxis, series, grid,toolbox } = this.get2AxisOption('line', '')
+      // console.log(legend, xAxis, yAxis, series, grid)
+      return {
+        backgroundColor,
+        title,
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend,
+        grid: grid,
+        xAxis: xAxis,
+        yAxis: yAxis,
+        series: series,
+        toolbox:toolbox
+      }
+  },
+    getOption(name,relation,timeUnit) {
+      this.form.setting.text.text = name
+      this.form.setting.title1 = relation.xStr
+      this.form.setting.title2 = relation.yStr+'/万元'
+      // var chartDom1 = document.getElementById(this.domId) 
+      // var myChart1 = this.$echarts.init(chartDom1)
+      var timeList = []
+      var productNameList = []
+      var productList = []
+      var data = []
+
+      for(var i = 0;i<this.chartData.length;i++){
+        var index = productList.findIndex(item=>{
+          return item.id == this.chartData[i].productId
+        })
+        if(index == -1){
+          productNameList.push(this.chartData[i].productName)
+          productList.push({
+            id:this.chartData[i].productId,
+            data:[this.chartData[i]]
+          })
+        }else{
+          productList[index].data.push(this.chartData[i])
+        }
+        var index2 = timeList.indexOf(this.chartData[i][relation.x])
+        if(index2 == -1){
+          timeList.push(this.chartData[i][relation.x])
+        }
+      }
+      for(let i =0;i<productList.length;i++){
+        var timeData = []
+        var productData = productList[i].data
+        for(let j = 0;j<productData.length;j++){
+          var index = timeList.indexOf(productData[j][relation.x])
+          timeData[index] = productData[j][relation.y]
+        }
+        data.push(
+          {
+            name:productNameList[i],
+            type:'line',
+            connectNulls:true,
+            data:timeData
+          }
+        )
+      }
+
+      // this.chartData.forEach(item => {
+      //   productNameList.push(item.productName)
+      //   data.push({
+      //     name:item.productName,
+      //     type:'line',
+      //     connectNulls:true,
+      //     saleVOS:item.saleVOS,
+      //     data:[]
+      //   })
+      //   item.saleVOS.forEach(item1=>{
+      //     var index = timeList.findIndex(i=>{
+      //       return item1[relation.x] == i
+      //     })
+      //     if(index == -1){
+      //       timeList.push(item1[relation.x])
+      //     }
+      //   })
+      // });
+      // timeList = timeList.sort((a,b)=>{
+      //     if(timeUnit == 0){
+      //       return Date.parse(a.replace(/-/g, "/")) - Date.parse(b.replace(/-/g, "/"))
+      //     }else if(timeUnit==1){
+      //       return  Date.parse(a.match(/(\d{1,3})+(?:\.\d+)?/g).join('/'))-Date.parse(b.match(/(\d{1,3})+(?:\.\d+)?/g).join('/'))
+      //     }else{
+      //       return Date.parse(a.substring(0,a.length-1))-Date.parse(b.substring(0,b.length-1))
+      //     }
+      //   }),
+      // data.forEach(item=>{
+      //   if(item.saleVOS && item.saleVOS.length>0){
+      //     item.saleVOS.forEach(item2=>{
+      //       var index = timeList.findIndex(i=>{
+      //         return item2[relation.x] == i
+      //       })
+      //       item.data[index] = item2[relation.y]
+      //     })
+      //   }
+        
+      // });
+      
+      this.selected = {
+        x:timeList,
+        y:productNameList,
+        data:data
+      }
+      if(this.changeColor){
+        this.setColor()
+      }
+      
+      // console.log(this.selected)
+      let {backgroundColor, title, legend, xAxis, yAxis, series, grid,toolbox } = this.get2AxisOption('line', '')
+      // console.log(legend, xAxis, yAxis, series, grid)
+      return {
+        backgroundColor,
+        title,
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend,
+        grid: grid,
+        xAxis: xAxis,
+        yAxis: yAxis,
+        series: series,
+        toolbox:toolbox,
+       
+      }
+   
+      
+      // var option = {
+      //   title: {
+      //     text: name,
+      //     bottom:0,
+      //     left:'center'
+      //   },
+      //   tooltip: {
+      //     trigger: 'axis'
+      //   },
+      //   legend: {
+      //     data: productNameList.length>1?productNameList:[],
+      //   },
+      //   grid: {
+      //     left: '3%',
+      //     right: '4%',
+      //     bottom: '40',
+      //     containLabel: true
+      //   },
+      //   toolbox: {
+      //     feature: {
+      //       saveAsImage: {}
+      //     }
+      //   },
+      //   xAxis: {
+      //     type: 'category',
+      //     data: timeList,
+      //     name: '时间',
+      //     nameLocation: "end"
+      //   },
+      //   yAxis: {
+      //     type: 'value',
+      //     name: '销售额/万元',
+      //     nameLocation: "end"
+      //   },
+      //   series: data
+      // };
+      // myChart1.clear();
+      // myChart1.setOption(option);
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .text{
+    display: none;
+    font-size: 12px;
+    color: #4099c6;
+    position: absolute;
+    top: 10px;
+    left: -30px;
+    z-index: 999;
+    width: 200px;
+  }
+  .set{
+    position: relative;
+    // margin-bottom:-200%;
+    z-index: 999;
+    // padding: 10px 0;
+  }
+  .set2{
+    margin-right:6px;
+    position: relative;
+    z-index: 999;
+  }
+  .set2:hover .text{
+    left:0;
+    display: block;
+  }
+  .set:hover .text{
+    display: block;
+  }
+</style>

src/views/project/patentDetails/components/patentMessage/history/echarts/components/echarts.js

@@ -0,0 +1,7 @@
+import MultipleLine from "./MultipleLine";
+
+export const commonMethods = {
+    components:{
+        MultipleLine
+    }
+}

src/views/project/patentDetails/components/patentMessage/history/echarts/components/echarts.vue

@@ -0,0 +1,163 @@
+<template>
+    <div style="height:100%;padding:20px">
+        <div>
+            <div style="display:flex;justify-content: space-between;">
+            <el-form :inline="true">
+                <el-form-item label="时间">
+                    <el-select v-model="queryParams.timeUnit" @change="changeEcharts()"  placeholder="请选择时间">
+                        <el-option
+                            v-for="item in timeList"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="地区">
+                    <el-select v-model="queryParams.area" @change="changeEcharts()" clearable  placeholder="请选择地区">
+                        <el-option
+                            v-for="item in areaList"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            </div>
+        </div>
+        <div>
+            <component :is='component' :ref="component" v-bind="$attrs"></component>  
+            
+        </div>
+    </div>
+</template>
+<script>
+import { commonMethods } from './echarts'
+export default {
+    mixins:[commonMethods],
+    props:['patentNo'],
+    components:{
+    },
+    data() {
+        return {
+            height:'400px',
+            ChartData:[],
+            component:'MultipleLine',
+            components:'MultipleLineAll',
+            queryParams:{
+                timeUnit:0,
+                relation:1
+            },
+            relationList:[
+                {
+                    label:{
+                        x:'marketDate',
+                        xStr:'时间',
+                        y:'saleTotalMoney',
+                        yStr:'销售额'
+                    },
+                    value:1
+                },
+                {
+                    label:{
+                        x:'marketDate',
+                        xStr:'时间',
+                        y:'customLicenseMoney',
+                        yStr:'自定义许可费'
+                    },
+                    value:2
+                },
+            ],
+            timeList:[
+                {
+                    value:0,
+                    label:'月'
+                },
+                {
+                    value:1,
+                    label:'季度'
+                },
+                {
+                    value:2,
+                    label:'年'
+                },
+            ],
+            areaList:[],
+            companyList:[],
+        }
+    },
+    watch:{
+        patentNo(val){
+            this.init()
+        },
+    },
+    mounted() {
+        this.init()
+    },
+    methods: {
+        changeRelation(){
+            var relation = this.relationList.find(i=>{
+                return i.value == this.queryParams.relation
+            })
+            var option = {
+                customLicenseMoney:'预估许可价值',
+                licenseFee:'已发生的许可费用',
+                saleTotalMoney:'营销数据'
+            }
+            this.$refs[this.component].open(this.chartData,'价值曲线',option,this.queryParams.timeUnit)
+
+        },
+        async changeEcharts(){
+            await this.getData()
+            this.changeRelation()
+        },
+       async init(){
+           await this.getData()
+        this.changeRelation()
+            const [areaList] = await Promise.allSettled([this.getAreaList()])
+            this.areaList= areaList.status =='fulfilled'?areaList.value.map(item=>{
+                return {
+                    value:item,
+                    label:item
+                }
+            }):[]
+            if(this.type == 1){
+                this.getCompanyList()
+            }
+            
+            
+        },
+       async getData(){
+            this.queryParams.patentNoList =this.patentNo
+            this.queryParams.saleArea = this.queryParams.area
+            await this.$api.PatentWorth(this.queryParams).then(response=>{
+                    if(response.code == 200){
+                        this.chartData = response.data
+                    }
+            })
+           
+            
+        },
+        getAreaList(){
+            var params = {
+                patentNoList:this.patentNo
+            }
+            return this.$api.getAreaList(params).then(response=> response.data)
+        },
+        getCompanyList(){
+             this.$api.getCompanyList({id:this.id}).then(response=>{
+                if(response.code == 200){
+                     this.companyList=response.data?response.data.map(item=>{
+                        return {
+                            value:item,
+                            label:item
+                        }
+                    }):[]
+                }
+            }
+            )
+        }
+    },
+}
+</script>

src/views/project/patentDetails/components/patentMessage/history/echarts/index.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <chart></chart>
+    </div>
+</template>
+<script>
+import chart from './components/echarts.vue'
+export default{
+    components:{
+        chart
+    },
+    data() {
+        return {
+            
+        }
+    },
+    computed:{
+    }
+}
+</script>