事件可视化

src/assets/css/main.scss

@@ -103,6 +103,18 @@
   //   border-left: 1px solid rgba(124,124,124) !important;
   // }
 
+  //下拉选项
+  .el-dropdown-menu{
+    li{
+      .el-dropdown{
+        width: 100%;
+      }
+    }
+    p{
+      margin: 0;
+    }
+  }
+
   //不换行  
   .noWrap{
     overflow: hidden;

src/router/index.js

@@ -214,7 +214,18 @@ const routes = [
               belong:'Event'
             },
             component: () => import('@/views/event/index.vue'),
-          }
+          },
+          //事件可视化
+          {
+            path: "/eventVisual",
+            name:'eventVisual',
+            meta: {
+              title: '事件可视化',
+              sign:'eventVisual',
+              belong:'Event'
+            },
+            component: () => import('@/views/home/components/visualRouter'),
+          },
         ],
       },
       //报告
@@ -548,15 +559,7 @@ const routes = [
       //   },
       //   component: () => import('@/views/components/common/retrieval'),
       // },
-      // //事件可视化
-      // {
-      //   path: "/eventVisual",
-      //   meta: {
-      //     title: '事件可视化',
-      //     button: [],
-      //   },
-      //   component: () => import('@/views/home/components/visualRouter'),
-      // },
+      
     ]
   },
 ]

src/utils/model/svg/Popover.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-popover ref="myPopover" :placement="placement" :width="width" trigger="hover">
+    <el-popover ref="myPopover" :placement="placement" :width="width" trigger="hover" :popper-options="popperOptions">
       <p v-if="type === '1'" class="p-1">公司调查是针对特定的目标公司展开的调查分析，是分析评议中常用的基础分析模块，在解决例如于企业上市、企业并购的评议以及在专利维权及遭遇侵权纠纷问题时都会用到。
       </p>
       <p v-if="type === '2'" class="p-1">
@@ -104,6 +104,9 @@ export default {
   },
   data() {
     return {
+      popperOptions:{
+        boundariesElement: 'body', gpuAcceleration: false
+      },
       width: '',
       type: '',
       width1: '',
@@ -118,7 +121,10 @@ export default {
     document.body.addEventListener('click', () => {
       if (!this.isClick) {
         this.scene = ''
-        this.$refs.myPopover2.doClose()
+        if(this.$refs.myPopover2){
+          this.$refs.myPopover2.doClose()
+        }
+        
       }
       this.isClick = false
     })
@@ -165,8 +171,7 @@ export default {
       let left = e.target.getBoundingClientRect().left
       // 将计算的值给到popover的left和top
       let popover = this.$refs[myPopover]
-      popover.$el.style.position = 'absolute'
-
+      popover.$el.style.position = 'fixed'
       if (myPopover == 'myPopover2') {
         top1 = -50
         if (e.currentTarget.getBoundingClientRect().top < Math.abs(top1)) {
@@ -190,7 +195,7 @@ export default {
       }
 
       popover.$el.style.left = left + _left + 'px'
-      popover.$el.style.top = top1 + top2 + _top3 - 50 + 'px'
+      popover.$el.style.top = top1 + top2 + _top3 + 10 + 'px'
       // 显示popover窗口
       popover.doShow()
     },
@@ -201,7 +206,4 @@ export default {
     },
   },
 }
-</script>
-<style>.a {
-  position: absolute;
-}</style>
+</script>

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

@@ -1,6 +1,6 @@
-import { checkVisual } from "@/views/home/components/mixins";
+import { openVisual } from "@/views/home/components/mixins";
 export default {
-  mixins: [checkVisual],
+  mixins: [openVisual],
   props: {
     tableData: {//数据
       type: Array,
@@ -57,14 +57,12 @@ export default {
   methods: {
     // 点击名称等事件
     handleItem(row, key) {
-      let path = {}
-      let router=this.$router.resolve({
-        path: '',
-        query: {
-          row:JSON.stringify(row)
-        },
-      })
-      window.open(router.href,'_blank')
+      var param = {
+        Scenario:row.scenarioNames, 
+        eventId:row.id, 
+        eventName:row.name
+      }
+      this.checkVisual(param)
     },
     // 取消与专利数据库的关联
     handleDelete(row) {

src/views/event/components/view/card.vue

@@ -6,7 +6,7 @@
           <div slot="head">
             <div style="font-size:18px">
               <!-- <span># {{ (itemIndex + 1) + ((queryParams.current - 1) * queryParams.size)}}</span> -->
-              <span>{{ item.name }}</span>
+              <span @click="handleItem(item)" class="cursor_pointer">{{ item.name }}</span>
             </div>
             <div v-if="!projectId && !show">
               <el-dropdown @command="handleCommand($event, item)" trigger="click">

src/views/event/components/view/table.vue

@@ -12,8 +12,8 @@
       <el-table-column v-for="item in column.filter(item=>!item.ifHidden)" :render-header=" $commonJS.renderHeaderMethods" :key="item.value" :prop="item.value" :label="item.name" align="center"
         sortable="custom">
         <template slot-scope="scope">
-          <div v-if="['name', 'reportProjectNum', 'patentProjectNum'].includes(item.value)">
-            <el-link @click="handleItem(scope.row, item.value)" >
+          <div v-if="['name'].includes(item.value)">
+            <el-link type="primary" @click="handleItem(scope.row, item.value)" >
               <span v-html="$commonJS.getColumnData(scope.row, item)"></span>
             </el-link>
           </div>

src/views/home/components/mixins.js

@@ -7,16 +7,11 @@ export const checkVisual = {
   methods: {
     //查看可视化
     checkVisual(Scenario, eventId, eventName) {
-      // this.$showDialog({
-      //     Scenario:Scenario,
-      //     eventId:eventId,
-      //     eventName:eventName
-      // },true);
-      this.$emit('checkVisual', {
-        Scenario: Scenario,
-        eventId: eventId,
-        eventName: eventName
-      })
+      this.$showDialog({
+          Scenario:Scenario,
+          eventId:eventId,
+          eventName:eventName
+      },true);
     },
     handleDownload(row) {
       var FileUrl = `http://${this.$c.hostname}:8012/onlinePreview?url=` + btoa(encodeURIComponent(this.$p + row.url))

src/views/home/components/visual.vue

@@ -1,10 +1,14 @@
 <template>
-  <div>
-    <el-carousel trigger="click" height="550px" :autoplay="false" indicator-position="none" :arrow="(visuals.Scenario && visuals.Scenario.length>1)?'always':'never'">
+  <div class="height_100">
+    <!-- <el-carousel trigger="click" height="550px" :autoplay="false" indicator-position="none" :arrow="(visuals.Scenario && visuals.Scenario.length>1)?'always':'never'">
       <el-carousel-item v-for="item in visuals.Scenario" :key="item" style="overflow:hidden">
         <view-Visual :titleType="item" :eventId="visuals.eventId" :eventName="visuals.eventName" style="transform: scale(0.5);transform-origin: 0 0;"></view-Visual>
       </el-carousel-item>
-    </el-carousel>
+    </el-carousel> -->
+    <div v-for="item in visuals.Scenario" :key="item" style="overflow:hidden;width:100%;height:100%">
+      <view-Visual :scenarioName="item" :eventId="visuals.eventId" :eventName="visuals.eventName" :sign="true"></view-Visual>
+    </div>
+    
   </div>
 </template>
 

src/views/home/components/visualRouter.vue

@@ -1,37 +1,43 @@
 <template>
-  <div>
+  <div class="height_100">
     <el-container>
         <el-aside width="300px">
             <el-form ref="form" :model="form" label-width="120px" size="mini">
                 <el-form-item label="事件名称：">
-                    <span>{{ form.questionName }}</span>
-                </el-form-item>
-                <el-form-item label="相关报告数量：">
-                    <el-link type="primary">{{ form.reportNum||0 }}</el-link>
-                </el-form-item>
-                <el-form-item label="相关专利数据库数量：">
-                    <el-link type="primary">{{ form.reportNum||0 }}</el-link>
-                </el-form-item>
-                <el-form-item label="事件场景：">
-                    <span class="cursor_pointer" v-for="item in form.scenarioNames?form.scenarioNames:[]" :key="item">
-                        {{ item }}<br />
-                    </span>
-                </el-form-item>
-                <el-form-item label="事件时间：">
-                    <span>{{form.eventDate}}</span>
-                </el-form-item>
-                <el-form-item label="事件描述：">
-                    <span>{{form.description}}</span>
-                </el-form-item>
-                <el-form-item label="创建人：">
-                    <span>{{form.createPersonName}}</span>
-                </el-form-item>
-                <el-form-item label="创建时间：">
-                    <span>{{form.createTime}}</span>
+                    <myTooltip :content="form.name" >
+                        <div v-html="$commonJS.getColumnData(form, {type:'String',value:'name'})" class="noWrap"></div>
+                    </myTooltip>
                 </el-form-item>
+                <el-form-item label="报告数量："> {{ form.reportProjectNum || 0  }} </el-form-item>
+              <el-form-item label="专利数据库数量：">{{ form.patentProjectNum || 0 }}</el-form-item>
+              <el-form-item label="应用场景：">
+                <myTooltip :content="$commonJS.getColumnData(form, {type:'Array',value:'scenarioNames'})">
+                  <div class="noWrap" v-html="$commonJS.getColumnData(form, {type:'Array',value:'scenarioNames'})"></div>
+                </myTooltip>
+              </el-form-item>
+              <el-form-item label="发生时间：">
+                <myTooltip :content="form.eventDate" >
+                  <div v-html="$commonJS.getColumnData(form, {type:'String',value:'eventDate'})" class="noWrap"></div>
+                </myTooltip>
+              </el-form-item>
+              <el-form-item label="描述：">
+                <myTooltip :content="form.description" >
+                  <div v-html="$commonJS.getColumnData(form, {type:'String',value:'description'})" class="noWrap"></div>
+                </myTooltip>
+              </el-form-item>
+              <el-form-item label="创建人：">
+                <myTooltip :content="form.createName" >
+                  <div v-html="$commonJS.getColumnData(form, {type:'String',value:'createName'})" class="noWrap"></div>
+                </myTooltip>
+              </el-form-item>
+              <el-form-item label="创建时间：">
+                <myTooltip :content="form.createTime" >
+                  <div v-html="$commonJS.getColumnData(form, {type:'String',value:'createTime'})" class="noWrap"></div>
+                </myTooltip>
+              </el-form-item>
             </el-form>
         </el-aside>
-        <el-main>
+        <el-main >
             <visual :visuals="visuals" v-if="show"></visual>
         </el-main>
     </el-container>
@@ -63,24 +69,31 @@ export default {
   },
   methods: {
     getQuestionDetails(){
-        var params = {
-            questionName:this.visuals.eventName,
+        let params = {
             current:1,
-            size:10
+            size:10,//分页信息
+            searchQuery:`id=${this.visuals.eventId}`,//检索条件
+            orderDTOList: [
+                {
+                    "orderBy": "createTime",
+                    "orderType": 1
+                }
+            ],//排序
         }
-        this.$api.eventQuery(params).then(res => {
+        this.$api.queryEvent(params).then(res => {
             if (res.code == 200) {
-                this.form = res.data.list[0]
-                if(!this.visuals.eventId){
-                    this.visuals.eventId = this.form.id
-                    this.visuals.Scenario = this.form.scenarioNames
-                    this.show = false
-                    this.$nextTick(()=>{
-                        this.show = true
-                    })
-                }
-                
+                this.form = res.data.data[0]
+                this.show = false
+                this.$nextTick(()=>{
+                    this.show = true
+                })
             }
+        }).catch(err => {
+            this.form = {}
+            this.show = false
+            this.$nextTick(()=>{
+                this.show = true
+            })
         })
     }
   },

src/views/home/index.vue

@@ -145,7 +145,7 @@ export default {
       }
       return a
     },
-    //意见反馈
+    //意见反馈q
     feedback(){
       this.$refs.feedback.open()
     },

src/views/project/index.vue

@@ -43,7 +43,7 @@
               </el-dropdown>
             </div>
             <div v-else>
-              <el-button type="primary" @click="handleAdd"
+              <el-button type="primary" @click="handleAdd" size="small"
                 v-disabled="!$permission('/workspace/project/add')">新增专利数据库</el-button>
             </div>
           </el-header>

src/views/visual/title/index.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="visual-title">
-      <el-button type="primary" class="visual-title-back" icon="el-icon-back" @click="handleBack">返回</el-button>
+      <el-button type="primary" class="visual-title-back" icon="el-icon-back" @click="handleBack" v-if="!sign">返回</el-button>
        <myCustomSvg  class="myCustomSvg" :title="title" :total="total" :QuestionTotal="QuestionTotal" @on-click="handleClick"></myCustomSvg>
-      <tips class="c-tips" />
+      <!-- <tips class="c-tips" /> -->
       <titleDrawer ref="titleDrawer" @close="close" />
       <eventDrawer ref="eventDrawer" @close="closeDrawer"></eventDrawer>
     </div>
@@ -19,6 +19,12 @@
       titleDrawer,
       eventDrawer
     },
+    props:{
+      scenarioName:'',
+      eventId:'',
+      eventName:'',
+      sign:{}
+    },
     data() {
       return {
         //事件数量
@@ -26,7 +32,7 @@
         //获取应用场景下流程节点对应项目数量
         total: {},
         //当前的应用场景
-        title: this.$route.params.title,
+        title: this.$route.params.title || this.scenarioName,
         queryParams:{
             "size": 999,
             "current": 1,
@@ -235,11 +241,11 @@
     }
     .myCustomSvg{
       
-      position: absolute;
-      left: 0; 
-      // top: 50px;
-      bottom:0;
-      right:0;
-      margin:auto;
+      // position: absolute;
+      // left: 0; 
+      // // top: 50px;
+      // bottom:0;
+      // right:0;
+      // margin:auto;
     }
   }</style>