From cf0cf49e10febedf0a6e7837b6e6ef13e2fa8b71 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Mon, 14 Sep 2020 14:23:54 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9AassetTable=E6=B7=BB=E5=8A=A0sn?=
 =?UTF-8?q?=E5=88=97=20style=EF=BC=9A=E4=BF=AE=E6=94=B9=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/project/popData/assetTable.vue     |  7 +++++
 .../common/project/popData/expressionInfo.vue | 26 ++++++++++++++++
 .../components/common/project/topology.vue    | 30 +++++++++++++++----
 .../components/common/project/visNetwork.vue  |  7 +++--
 4 files changed, 62 insertions(+), 8 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/project/popData/expressionInfo.vue

diff --git a/nezha-fronted/src/components/common/project/popData/assetTable.vue b/nezha-fronted/src/components/common/project/popData/assetTable.vue
index f1cc24571..6ded91ee0 100644
--- a/nezha-fronted/src/components/common/project/popData/assetTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/assetTable.vue
@@ -66,6 +66,7 @@
               <div v-if="item.prop=='assetType'">
                 <span>{{scope.row.model.type.value}}</span>
               </div>
+              <template v-if="item.prop=='SN'">{{scope.row.sn}}</template>
               <div v-if="item.prop=='state'">
                 <span>{{scope.row.state==1 ? $t('asset.inStock') : $t('asset.notInStock')}}</span>
               </div>
@@ -165,6 +166,12 @@
             show: true,
             width: 130,
             fixed:'left'
+          },
+          {
+            label: this.$t("asset.tableTitle.device"),
+            prop: 'SN',
+            show: true,
+            width: 130
           },
            {
             label: this.$t("asset.tableTitle.assetType"),
diff --git a/nezha-fronted/src/components/common/project/popData/expressionInfo.vue b/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
new file mode 100644
index 000000000..1a81983dc
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="expressionInfo">
+  </div>
+</template>
+
+<script>
+	export default {
+		name:"expressionInfo",
+    props:{
+
+    },
+    data(){
+		  return{
+
+      }
+    }
+	}
+</script>
+
+<style scoped>
+.expressionInfo{
+  position: absolute;
+  top:50%;
+  left: 50%;
+}
+</style>
diff --git a/nezha-fronted/src/components/common/project/topology.vue b/nezha-fronted/src/components/common/project/topology.vue
index 39ce1fa59..2a6aa7be9 100644
--- a/nezha-fronted/src/components/common/project/topology.vue
+++ b/nezha-fronted/src/components/common/project/topology.vue
@@ -83,7 +83,9 @@
         <!--<div @click='zoomChange(0.1)'><i class="nz-icon nz-icon-hexagonBorder zoom-icon"></i></div>-->
         <!--<div @click='zoomChange(-0.1)'><i class="nz-icon nz-icon-hexagonBorder zoom-icon"></i></div>-->
       <!--</div>-->
-
+      <expression-info
+      v-if="expressionsInfoShow"
+      ></expression-info>
     </div>
     <transition name="right-box">
       <add-model
@@ -125,7 +127,7 @@
 </template>
 
 <script>
-  import Vis from 'vis'
+  import Vis from 'vis-network/dist/vis-network.js'
   import addNode from './addNode'
   import addLine from './addLine'
   import popDataMain from './popData/Main'
@@ -134,9 +136,11 @@
   import alertTable from "./popData/alertTable";
   import assetTable from "./popData/assetTable";
   import endpointTable from "./popData/endpointTable";
+  import ExpressionInfo from "./popData/expressionInfo";
 	export default {
 		name:"topology",
     components: {
+      ExpressionInfo,
       TotalChart,
       alertTable,
       assetTable,
@@ -204,6 +208,7 @@
     },
     data(){
 		  return {
+		    canvas:'',
         totalId:'',
         totalArray:[],
         allModuleInfos:[],
@@ -243,7 +248,7 @@
         },
         popData:[
           {top:'-20px', left:'-17px',className:'nz-icon-endpoint',id:'endpoint',title:this.$t('project.topology.endpoint')},
-          {top:'-20px', left:'28px',className:'nz-icon-shujuku',id:'asset',title:this.$t('project.topology.asset')},
+          {top:'-20px', left:'28px',className:'nz-icon-asset',id:'asset',title:this.$t('project.topology.asset')},
           {top:'18px',  left:'52px',className:'nz-icon-chart',id:'total',title:this.$t('project.topology.total')},
           {top:'56px', left:'28px',className:'',id:'other',title:''},
           {top:'56px', left:'-17px',className:'nz-icon-info-normal',id:'info',title:this.$t('project.topology.info')},
@@ -271,6 +276,7 @@
         options:{},
         data:{},
         timeInterval:'',
+        expressionsInfoShow:false,
       }
     },
     methods:{// 保存拓扑图数据
@@ -342,7 +348,7 @@
         };
         this_.options = {
           autoResize: true,
-          clickToUse:true,
+          clickToUse:false,
           groups:{
             useDefaultGroups: true,
             myGroupId:{
@@ -356,6 +362,11 @@
             font:{
               size:16,
             },
+            // chosen:{
+            //   node:(values, id, selected, hovering)=>{
+            //     console.log(values);
+            //   }
+            // },
           },
 
           edges: {
@@ -377,8 +388,13 @@
                   values.middleArrow=true;
                   values.middleArrowScale=1;
                   values.middleArrowType='circle';
+                  this_.expressionsInfoShow=true;
+                  console.log(values);
                 }
               },
+              // label:(values, id, selected, hovering)=>{
+              //   console.log(values,2222);
+              // },
             },
           },
           layout:{
@@ -420,6 +436,7 @@
         });
         this_.containerCanvas=document.querySelectorAll("#network_id canvas")[0];
         this_.modelTopUpdate();
+        this_.canvas=document.getElementsByTagName('canvas')[0];
       },
       resetAllNodes() {
         this.setNetworkData(this.nodesArray,this.edgesArray);
@@ -785,14 +802,16 @@
            // this_.addLineShow=true;
          });
 
-         this.network.on("hoverEdge", function () { // 悬停边
+         this.network.on("hoverEdge", function (params,a) { // 悬停边
            this_.hoverEdge=true;
            this_.cursorMove=true;
+           console.log(params,a);
          });
 
          this.network.on("blurEdge", function () { // 边失去焦点
            this_.hoverEdge=false;
            this_.cursorMove=false;
+           this_.expressionsInfoShow=false;
          });
 
          this.network.on("dragStart", function (params) {//节点移动开始
@@ -841,6 +860,7 @@
 
          this.network.on("hoverNode", function () {//hoverNode
            this_.cursorMove=true;
+           console.log(123123123);
          });
 
          this.network.on("blurNode", function () {//blurNode
diff --git a/nezha-fronted/src/components/common/project/visNetwork.vue b/nezha-fronted/src/components/common/project/visNetwork.vue
index 047a910ba..3046ff9ed 100644
--- a/nezha-fronted/src/components/common/project/visNetwork.vue
+++ b/nezha-fronted/src/components/common/project/visNetwork.vue
@@ -264,7 +264,8 @@
         arr.forEach((item,index)=>{
           item.from=item.source;
           item.to=item.target;
-          item.label=item.name;
+          item.label='';
+          item.title='title';
           // item.dashes=(item.dashes?(new Array(100).fill(item.dashes[0])):item.dashes);
           // if(index%2==0&&item.dashes){
           //   item.dataFlow='left';
@@ -356,7 +357,7 @@
     height: calc(16% - 40px);
     font-size: 12px;
     position: absolute;
-    top: 15px;
+    top: 5px;
     left: 15px;
     z-index: 10;
   }
@@ -455,7 +456,7 @@
     text-align: center;
   }
   .label{
-    padding: 0 15px;
+    padding: 0 15px 0 0;
   }
 
 </style>