可视化组件

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@antv/g6": "^4.5.0",
     "core-js": "^3.6.5",
     "echarts": "^4.9.0",
     "element-ui": "^2.15.6",

src/layout/CqMain.vue

 <!--
  * @Author: your name
  * @Date: 2021-07-20 14:08:33
- * @LastEditTime: 2021-10-18 18:28:13
+ * @LastEditTime: 2021-12-14 09:57:08
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\layout\main.vue
@@ -96,6 +96,12 @@ export default {
               index: "cqThkshfx",
               disabled: false,
             },
+            {
+              id: "cqgxcx",
+              label: "重庆关系查询",
+              index: "cqgxcx",
+              disabled: false,
+            },
           ],
         },
         {

src/router/index.js

 /*
  * @Author: your name
  * @Date: 2021-06-22 15:23:03
- * @LastEditTime: 2021-11-17 18:10:30
+ * @LastEditTime: 2021-12-08 11:42:08
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\router\index.js
@@ -42,7 +42,7 @@ const mainRouters = [
   shRightContentRoutes,
   hnRightContentRoutes,
   cqRightContentRoutes,
-  ceshiContentRoutes,
+  ...ceshiContentRoutes,
   {
     path: "*",
     name: "error",

src/router/modules/ceshi.js

 /*
  * @Author: your name
  * @Date: 2021-07-20 14:42:16
- * @LastEditTime: 2021-12-01 15:41:59
+ * @LastEditTime: 2021-12-16 10:10:56
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\router\modules\rightContent.js
  */
 import Main from '@/views/ceshi/cqceshi.vue'
-
-export default {
-  path: "/cqceshi2",
-  name: "cqceshi2",
-  meta: {
-    title: "重庆测试",
+import ceshi3 from '@/views/ceshi/ceshi3.vue'
+import ceshi4 from '@/views/ceshi/ceshi4.vue'
+import ceshi5 from '@/views/ceshi/ceshi5.vue'
+import ceshi6 from '@/views/ceshi/ceshi6.vue'
+import ceshi7 from '@/views/ceshi/ceshi7.vue'
+export default [
+  {
+    path: "/cqceshi2",
+    name: "cqceshi2",
+    meta: {
+      title: "重庆测试",
+    },
+    component: Main
   },
-  component: Main
-}
\ No newline at end of file
+  {
+    path: "/ceshi3",
+    name: "ceshi3",
+    meta: {
+      title: "测试关系图谱",
+    },
+    component: ceshi3
+  },
+  {
+    path: "/ceshi4",
+    name: "ceshi4",
+    meta: {
+      title: "测试关系图谱4",
+    },
+    component: ceshi4
+  },
+  {
+    path: "/ceshi5",
+    name: "ceshi5",
+    meta: {
+      title: "组件测试",
+    },
+    component: ceshi5
+  },
+  {
+    path: "/ceshi6",
+    name: "ceshi6",
+    meta: {
+      title: "节点样式",
+    },
+    component: ceshi6
+  },
+  {
+    path: "/ceshi7",
+    name: "ceshi7",
+    meta: {
+      title: "节点样式",
+    },
+    component: ceshi7
+  },
+]
\ No newline at end of file

src/router/modules/cqContent.js

 /*
  * @Author: your name
  * @Date: 2021-07-20 14:42:16
- * @LastEditTime: 2021-10-18 18:32:22
+ * @LastEditTime: 2021-12-14 09:56:17
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\router\modules\rightContent.js
@@ -17,6 +17,14 @@ const createArr = [
     component: () => import("@/views/cqksh/module/cqRyksh.vue")
   },
   {
+    path: "/cqgxcx",
+    name: "cqgxcx",
+    meta: {
+      title: '重庆关系查询'
+    },
+    component: () => import( '@/views/multilevel/cqgxcx.vue')
+  },
+  {
     path: "/cqQqkshfx",
     name: "cqQqkshfx",
     meta: {

src/setting.js

 /*
  * @Author: your name
  * @Date: 2021-06-20 11:48:40
- * @LastEditTime: 2021-11-29 13:30:47
+ * @LastEditTime: 2021-12-01 18:32:25
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \control_platform\src\settings.js
@@ -22,5 +22,5 @@ module.exports = {
   // 湖南可视化
   BaseURL3: "/hnapi",
   // 打包方式阿里云(aly) 和 公安网(gaw)
-  packType: 'gaw'
+  packType: 'aly'
 }

src/utils/gxt.js

@@ -1270,6 +1270,7 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
     // this.graphSetting.canvasOffset.y = this.graphSetting.viewNVInfo.height / 2 - 100
   };
   this.placeNodesPosition = function (rootNode, allNodes, analyticResult) {
+    
     var __mapWidth = this.graphSetting.viewSize.width;
     var __mapHeight = this.graphSetting.viewSize.height;
     // console.log('analysisNodes:', analyticResult, allNodes)
@@ -1277,6 +1278,7 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
     // this.graphSetting.canvasOffset.y = 0
     var __offsetX = rootNode.offset_x || 0;
     var __offsetY = rootNode.offset_y || 0;
+    console.log(rootNode.lot,'--------------------------===========设置')
     // console.log('#############Seeks graph viewSize:Tree layout:', this.graphSetting.viewSize.width, this.graphSetting.viewSize.height)
     // console.log('[layout canvasOffset]', __mapHeight, this.graphSetting, this.graphSetting.canvasSize, this.config)
     // console.log('[Layout:AnalyticResult]', analyticResult)
@@ -1345,6 +1347,7 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
 
   };
   this.placeRelativePosition = function (rootNode, analyticResult, dynamicSizeConfig) {
+    console.log('---------------------------------')
     if (this.config.from === 'left' || this.config.from === 'right') {
       const __min_per_height = this.config.min_per_height || 80;
       const __max_per_height = this.config.max_per_height || 400;
@@ -1577,12 +1580,19 @@ function SeeksCenterLayouter(layoutSetting, graphSetting) {
     if (window.SeeksGraphDebug) console.log('analyticResult:', analyticResult, __leve1_min_r, this.config.distance_coefficient);
     if (__leve1_min_r < 150 * distance_coefficient) __leve1_min_r = 150 * distance_coefficient;
     var __level1_r = 0;
+    console.log(rootNode.lot,'rootNoderootNoderootNode.lot')
     this.allNodes.forEach(thisNode => {
       if (thisNode.lot.subling.level === 1) {
         __level1_r = parseInt(thisNode.lot.subling.all_size * 50 / Math.PI / 2);
         if (__level1_r < __leve1_min_r) __level1_r = __leve1_min_r;
         // if (__level1_r > 500)__level1_r = 500
-        const _point = core4vue_SeeksGraphMath.getOvalPoint(rootNode.lot.x, rootNode.lot.y, thisNode.lot.subling.level * __level1_r, thisNode.lot.strength_plus - thisNode.lot.strength / 2, thisNode.lot.subling.all_strength);
+        const _point = core4vue_SeeksGraphMath.getOvalPoint(
+            rootNode.lot.x, 
+            rootNode.lot.y, 
+            thisNode.lot.subling.level * __level1_r, 
+            thisNode.lot.strength_plus - thisNode.lot.strength / 2, 
+            thisNode.lot.subling.all_strength
+        );
         // const _point = SeeksGraphMath.getOvalPoint(this.rootNode.x, this.rootNode.y, thisNode.lot.subling.level * __level1_r, thisNode.lot.index_of_level, thisNode.lot.subling.all_size)
         thisNode.lot.x = _point.x;
         thisNode.lot.y = _point.y;
@@ -5691,6 +5701,11 @@ if (false) {(function () {
       if (callback) callback(this);
     },
     doLayout() {
+      let arr = []
+      this.graphData.nodes.forEach(el=>{
+        console.log(el,'elellelelel')
+        console.log(el.offset_x,el.offset_x,'offsetxxxxxxxxxxxxxxxxxxxx')
+      })
       if (this.graphSetting.layouter && this.graphData.rootNode) {
         console.log('需要布局的节点数量：', this.graphData.nodes.length);
         // ----改

src/views/ceshi/ceshi3.vue

+<template>
+
+  <div>
+
+    <div style="width: calc(100% - 2px);height:calc(100vh - 50px);">
+
+      <SeeksRelationGraph ref="seeksRelationGraph" :options="userGraphOptions" />
+
+    </div>
+
+    <el-button type="success" class="c-show-code-button">
+        <el-link href="https://github.com/seeksdream/relation-graph/blob/master/doc/demo/Demo4SceneCompany.vue" target="_blank" style="color: #ffffff;">查看代码</el-link>
+    </el-button>
+
+  </div>
+
+</template>
+
+
+
+<script>
+
+import SeeksRelationGraph from 'relation-graph'
+
+export default {
+
+  name: 'SeeksRelationGraphDemo',
+
+  components: { SeeksRelationGraph },
+
+  data() {
+
+    return {
+
+      g_loading: true,
+
+      userGraphOptions: {
+
+        'backgrounImage': '',
+
+        'backgrounImageNoRepeat': true,
+
+        'layouts': [
+
+          {
+
+            'label': '手工',
+
+            'layoutName': 'fixed',
+
+            'layoutClassName': 'seeks-layout-fixed',
+
+            'defaultJunctionPoint': 'border',
+
+            'defaultNodeShape': 0,
+
+            'defaultLineShape': 1
+
+          }
+
+        ],
+
+        'defaultNodeBorderWidth': 0,
+
+        'defaultNodeShape': 1,
+
+        'allowShowMiniNameFilter': false,
+
+        'allowShowMiniToolBar': false,
+
+        'defaultJunctionPoint': 'lr',
+
+        'defaultLineShape': 2
+
+      }
+
+    }
+
+  },
+
+  created() {
+
+  },
+
+  mounted() {
+
+    this.setGraphData()
+
+  },
+
+  methods: {
+
+    setGraphData() {
+
+      var _orign_data = {
+
+        entname: '中数智汇数据科技股份有限公司',
+
+        invs: [
+
+          { id: 'inv1', text: '北京某个公司科技有限公司', desc: '40%' },
+
+          { id: 'inv2', text: '张蜈支', desc: '30%' },
+
+          { id: 'inv3', text: '如花', desc: '10%' },
+
+          { id: 'inv4', text: '路人甲', desc: '10%' },
+
+          { id: 'inv5', text: '路人乙', desc: '10%' }
+
+        ],
+
+        persons: [
+
+          { id: 'person1', text: '张蜈支', desc: '董事长' },
+
+          { id: 'person2', text: '包奥曼', desc: '总经理' },
+
+          { id: 'person3', text: '路人甲', desc: '监事' },
+
+          { id: 'person4', text: '路人乙', desc: '董事' }
+
+        ],
+
+        asInvs: [
+
+          { id: 'asinv1', text: '北京超级大橘科技有限公司', desc: '80%' },
+
+          { id: 'asinv2', text: '北京超级大蚂蚁科技有限公司', desc: '70%' },
+
+          { id: 'asinv3', text: '北京超级大米粒儿科技有限公司', desc: '20%' }
+
+        ],
+
+        branchs: [
+
+          { id: 'branch1', text: '某个公司（北京）科技股份有限公司', desc: '80%' },
+
+          { id: 'branch2', text: '某个公司（天津）科技股份有限公司', desc: '70%' },
+
+          { id: 'branch4', text: '某个公司（成都）科技股份有限公司', desc: '70%' },
+
+          { id: 'branch5', text: '某个公司（武汉）科技股份有限公司', desc: '20%' }
+
+        ]
+
+      }
+
+      var _graphSetting = this.$refs.seeksRelationGraph.graphSetting
+
+      this.$refs.seeksRelationGraph.graphSetting.defaultLineShape = 1
+
+      // 手工设置节点的坐标
+
+      const _center = {
+
+        x: (_graphSetting.viewSize.width) / 2 - _graphSetting.canvasOffset.x,
+
+        y: (_graphSetting.viewSize.height) / 2 - _graphSetting.canvasOffset.y
+
+      }
+
+      var graphData = {
+
+        rootId: 'root',
+
+        nodes: [],
+
+        links: []
+
+      }
+
+      // 添加根节点和虚拟节点
+
+      var rootNode = { id: graphData.rootId, name: _orign_data.entname, styleClass: 'c-g-center', color: '#A4C1FF', width: 250, height: 50, x: _center.x - 125, y: _center.y - 25 }
+
+      var invRootNode = { id: 'invRoot', name: '股东', styleClass: 'c-g-group-node', color: '#FFC5A6', width: 100, height: 50 }
+
+      var personRootNode = { id: 'personRoot', name: '高管', styleClass: 'c-g-group-node', color: '#B9FFA7', width: 100, height: 50 }
+
+      var asinvRootNode = { id: 'asinvRoot', name: '对外投资', styleClass: 'c-g-group-node', color: '#FFBEC1', width: 100, height: 50 }
+
+      var branchRootNode = { id: 'branchRoot', name: '分支机构', styleClass: 'c-g-group-node', color: '#FFA1F8', width: 100, height: 50 }
+
+      invRootNode.x = _center.x - 200 - invRootNode.width
+
+      invRootNode.y = _center.y - 130
+
+      personRootNode.x = _center.x - 200 - personRootNode.width
+
+      personRootNode.y = _center.y + 90
+
+      asinvRootNode.x = _center.x + 200
+
+      asinvRootNode.y = _center.y - 130
+
+      branchRootNode.x = _center.x + 200
+
+      branchRootNode.y = _center.y + 90
+
+      // 添加节点数据到graphData
+
+      graphData.nodes.push(rootNode)
+
+      graphData.nodes.push(invRootNode)
+
+      graphData.nodes.push(personRootNode)
+
+      graphData.nodes.push(asinvRootNode)
+
+      graphData.nodes.push(branchRootNode)
+
+      // 添加根节点和虚拟节点之间的关系，并将关系数据放入graphData
+
+      graphData.links.push({ from: rootNode.id, to: invRootNode.id, styleClass: 'c-g-l-group', color: '#C7E9FF', lineShape: 2 })
+
+      graphData.links.push({ from: rootNode.id, to: personRootNode.id, styleClass: 'c-g-l-group', color: '#C7E9FF', lineShape: 2 })
+
+      graphData.links.push({ from: rootNode.id, to: asinvRootNode.id, styleClass: 'c-g-l-group', color: '#C7E9FF', lineShape: 2 })
+
+      graphData.links.push({ from: rootNode.id, to: branchRootNode.id, styleClass: 'c-g-l-group', color: '#C7E9FF', lineShape: 2 })
+
+      // 将股东加入虚拟节点"股东"
+
+      _orign_data.invs.forEach((thisNode, _index) => {
+
+        thisNode.width = 200
+
+        thisNode.x = invRootNode.x - 300 - thisNode.width
+
+        thisNode.y = invRootNode.y + _index * 30 * -1 + 30
+
+        graphData.nodes.push(thisNode)
+
+        graphData.links.push({ from: invRootNode.id, to: thisNode.id, text: thisNode.desc, color: '#FFC5A6', arrow: 'none', lineShape: 4 })
+
+      })
+
+      // 将高管加入虚拟节点"高管"
+
+      _orign_data.persons.forEach((thisNode, _index) => {
+
+        thisNode.width = 200
+
+        thisNode.x = personRootNode.x - 200 - thisNode.width
+
+        thisNode.y = personRootNode.y + _index * 30
+
+        graphData.nodes.push(thisNode)
+
+        graphData.links.push({ from: personRootNode.id, to: thisNode.id, text: thisNode.desc, color: '#B9FFA7', arrow: 'none', lineShape: 4 })
+
+      })
+
+      // 将对外投资企业加入虚拟节点"对外投资"
+
+      _orign_data.asInvs.forEach((thisNode, _index) => {
+
+        thisNode.x = asinvRootNode.x + 200
+
+        thisNode.y = asinvRootNode.y + _index * 30 * -1 + 30
+
+        graphData.nodes.push(thisNode)
+
+        graphData.links.push({ from: asinvRootNode.id, to: thisNode.id, text: thisNode.desc, color: '#FFBEC1', lineShape: 4 })
+
+      })
+
+      // 将分支机构加入虚拟节点"分支机构东"
+
+      _orign_data.branchs.forEach((thisNode, _index) => {
+
+        thisNode.x = branchRootNode.x + 200
+
+        thisNode.y = branchRootNode.y + _index * 30
+
+        graphData.nodes.push(thisNode)
+
+        graphData.links.push({ from: branchRootNode.id, to: thisNode.id, text: thisNode.desc, color: '#FFA1F8', lineShape: 4 })
+
+      })
+
+      this.$refs.seeksRelationGraph.setJsonData(graphData, (seeksRGGraph) => {
+
+      })
+
+    }
+
+  }
+
+}
+
+</script>
+
+
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/ceshi/ceshi6.vue

+<template>
+  <div>
+    <div style="height:calc(100vh - 50px);">
+      <SeeksRelationGraph
+        ref="seeksRelationGraph"
+        :options="graphOptions"
+        :on-node-click="onNodeClick"
+        :on-line-click="onLineClick" />
+    </div>
+    <el-button type="success" class="c-show-code-button"><el-link href="https://github.com/seeksdream/relation-graph/blob/master/doc/demo/Demo4Node.vue" target="_blank" style="color: #ffffff;">查看代码</el-link></el-button>
+  </div>
+</template>
+
+<script>
+import SeeksRelationGraph from 'relation-graph'
+export default {
+  name: 'Demo',
+  components: { SeeksRelationGraph },
+  data() {
+    return {
+      isShowCodePanel: false,
+      graphOptions: {
+        // 这里可以参考"Graph 图谱"中的参数进行设置
+      }
+    }
+  },
+  mounted() {
+    this.showSeeksGraph()
+  },
+  methods: {
+    showSeeksGraph(query) {
+      var __graph_json_data = {
+        rootId: 'a',
+        nodes: [
+          { id: 'a', text: '边框颜色', borderColor: 'yellow' },
+          { id: 'a1', text: '无边框', borderWidth: -1, color: '#ff8c00' },
+          { id: 'a1-1', html: '<span style="color:#ff8c00">纯文字节点</span>' },
+          { id: 'a1-2', html: '<img src="http://ai-mark.cn/images/ai-mark-desc.png" width="200" style="border:#ff8c00 solid 2px;" />', nodeShape: 1 },
+          { id: 'a1-3', html: '<img src="http://ai-mark.cn/images/ai-mark-desc.png" width="100" style="border:#ff8c00 solid 2px;border-radius: 60px;" />', nodeShape: 0 },
+          { id: 'a1-4', html: '<div style="border:#ff8c00 solid 2px;height:80px;width:80px;border-radius: 40px;background-image: url(http://ai-mark.cn/images/ai-mark-desc.png);background-position: center center;" />', nodeShape: 0 },
+          { id: 'b', text: '字体颜色', borderWidth: 1, color: '#43a2f1' },
+          { id: 'c', text: '文字颜色', fontColor: 'yellow' },
+          { id: 'd', text: '节点大小', width: 150, height: 150, color: '#ffd700', borderWidth: 1 },
+          { id: 'e', text: '矩形节点', nodeShape: 1 },
+          { id: 'f', text: '矩形节点-固定大小', borderWidth: 1, nodeShape: 1, width: 300, height: 60 },
+          { id: 'f1', text: '固定位置', fixed: true, x: 20, y: 20 },
+          { id: 'g', text: '自定义class实现闪烁', styleClass: 'my-node-style' }
+        ],
+        links: [
+          { from: 'a', to: 'b' },
+          { from: 'a', to: 'c' },
+          { from: 'a', to: 'a1' },
+          { from: 'a1', to: 'a1-1' },
+          { from: 'a1', to: 'a1-2' },
+          { from: 'a1', to: 'a1-3' },
+          { from: 'a1', to: 'a1-4' },
+          { from: 'a', to: 'f1' },
+          { from: 'a', to: 'd' },
+          { from: 'd', to: 'f' },
+          { from: 'a', to: 'g' },
+          { from: 'a', to: 'e' },
+          { from: 'b', to: 'e' }
+        ]
+      }
+      this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
+        // 这些写上当图谱初始化完成后需要执行的代码
+      })
+    },
+    onNodeClick(nodeObject, $event) {
+      console.log('onNodeClick:', nodeObject)
+    },
+    onLineClick(lineObject, $event) {
+      console.log('onLineClick:', lineObject)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .my-node-style{
+    background-color: #00ced1 !important;/** 通过自定义样式设置节点颜色需要加 !important **/
+  }.my-node-style:hover{
+    background-color: #ff0000 !important;
+  }
+  @keyframes myFlash {
+    from {
+      opacity: 1.0;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    to {
+      opacity: 1.0;
+    }
+  }
+  @-webkit-keyframes myFlash {
+    from {
+      opacity: 1.0;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    to {
+      opacity: 1.0;
+    }
+  }
+  .my-node-style{
+    animation: myFlash 600ms infinite;
+    -webkit-animation: myFlash 600ms infinite;
+  }
+</style>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file

src/views/ceshi/ceshi7.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-12-13 16:52:38
+ * @LastEditTime: 2021-12-13 18:18:44
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \founder_vue\src\views\ceshi\ceshi7.vue
+-->
+<template>
+  <div>
+    <div style="height:calc(100vh - 50px);">
+      <SeeksRelationGraph
+        ref="seeksRelationGraph"
+        :options="graphOptions"
+        :on-node-click="onNodeClick"
+        :on-line-click="onLineClick" >
+        <div
+          slot="node"
+          slot-scope="{ node }"
+          class="shan"
+        >
+        <ul class="backNodeShanThree">
+                  <li v-for="(item) in node.data.arr" :key="item.id">{{item.text}}</li>
+        </ul>
+              <div
+                class="w100h100 backImg"
+                :style="{
+                    background: 'url(' + node.data.nodePhoto + ') 0 0 / cover',
+                }"
+              ></div>
+              
+        </div>
+      </SeeksRelationGraph>
+    </div>
+  </div>
+</template>
+
+<script>
+import SeeksRelationGraph from "@/utils/gxt.js";
+export default {
+  name: 'Demo',
+  components: { SeeksRelationGraph },
+  data() {
+    return {
+      isShowCodePanel: false,
+      graphOptions: {
+        // 这里可以参考"Graph 图谱"中的参数进行设置
+      }
+    }
+  },
+  mounted() {
+    this.showSeeksGraph()
+  },
+  methods: {
+    showSeeksGraph(query) {
+      var __graph_json_data = {
+        rootId: 'a',
+        nodes: [
+          { 
+              id: 'g', 
+              text: '扇形背景',
+              data:{
+                  nodePhoto:require(`@/assets/img/graphEcharts/ashperson.png`),
+                  arr:[
+                      {
+                          text:'赋值账号',
+                          id:0,
+                      },
+                      {
+                          text:'标注',
+                          id:1,
+                      },
+                      {
+                          text:'查看详情',
+                          id:2,
+                      },
+                      {
+                          text:'聚拢',
+                          id:3,
+                      },
+                  ]
+              }
+          }
+        ],
+        links: [
+        ]
+      }
+      this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
+        // 这些写上当图谱初始化完成后需要执行的代码
+      })
+    },
+    onNodeClick(nodeObject, $event) {
+      console.log('onNodeClick:', nodeObject)
+    },
+    onLineClick(lineObject, $event) {
+      console.log('onLineClick:', lineObject)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .my-node-style{
+    background-color: #00ced1 !important;/** 通过自定义样式设置节点颜色需要加 !important **/
+  }.my-node-style:hover{
+    background-color: #ff0000 !important;
+  }
+  @keyframes myFlash {
+    from {
+      opacity: 1.0;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    to {
+      opacity: 1.0;
+    }
+  }
+  @-webkit-keyframes myFlash {
+    from {
+      opacity: 1.0;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    to {
+      opacity: 1.0;
+    }
+  }
+  .my-node-style{
+    animation: myFlash 600ms infinite;
+    -webkit-animation: myFlash 600ms infinite;
+  }
+</style>
+
+<style lang="scss" scoped>
+.shan{
+    width: 80px;
+    height: 80px;
+    background: pink;
+    position: relative;
+    .backImg{
+        height: 80px;
+        width: 80px;
+        position: absolute;
+    }
+    .backNodeShanFour{
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50%;
+        left: 50%;
+        border-radius: 100%;
+        list-style: none;
+        overflow: hidden;
+        padding: 0;
+        transform: translate(-50%,-50%);
+        li{
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            line-height: 100px;
+            text-align: center;
+            cursor: pointer;
+        }
+        li:nth-child(1){
+            top: 0;
+            left: 0;
+            background: palegreen;
+        }
+        li:nth-child(2){
+            top: 0;
+            right: 0;
+            background: paleturquoise;
+        }
+        li:nth-child(3){
+            bottom: 0;
+            left: 0;
+            background: palevioletred;
+        }
+        li:nth-child(4){
+             bottom: 0;
+            right: 0;
+            background: peru;
+        }
+    }
+    .backNodeShanThree{
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50%;
+        left: 50%;
+        border-radius: 100%;
+        list-style: none;
+        overflow: hidden;
+        padding: 0;
+        transform: translate(-50%,-50%);
+        li{
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            line-height: 100px;
+            text-align: center;
+            cursor: pointer;
+        }
+        li:nth-child(1){
+            // transform-origin: 0% 100%;
+            background: palegreen;
+        }
+    }
+}
+</style>
\ No newline at end of file

src/views/ceshi/components/photoDialog.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-12-14 15:49:28
+ * @LastEditTime: 2021-12-15 15:28:29
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \founder_vue\src\views\ceshi\components\photoDialog.vue
+-->
+<template>
+    <div>
+        <el-dialog
+            title="历史照片"
+            :visible.sync="dialogVisible"
+            width="60%"
+            :modal-append-to-body="false"
+            :before-close="handleClose">
+            <div class="content">
+                <ul>
+                    <li v-for="(item) in queryPhotoData" :key="item.id">
+                        <el-image 
+                            style="width: 80px; height: 80px"
+                            :src="item.url" 
+                            :preview-src-list="item.srcList">
+                        </el-image>
+                        <p>{{ item.text }}</p>
+                    </li>
+                </ul>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="handleSure">确 定</el-button>
+                <el-button @click="handleClose">取 消</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+<script>
+export default {
+    props:{
+        dialogVisible: {
+            type: Boolean,
+        },
+        photoData: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    data(){
+        return{
+            queryPhotoData:this.photoData,
+        }
+    },
+    mounted(){},
+    methods:{
+        handleClose(done) {
+            this.$emit('handleClose')
+        },
+        //确认
+        handleSure(){
+            this.$emit('handleSure')
+        },
+    },
+}
+</script>
+<style lang="scss">
+.content{
+      ul{
+          display: flex;
+          align-items: center;
+          justify-content: space-evenly;
+          li{
+              p{
+                  text-align: center;
+              }
+          }
+      }
+}
+</style>
\ No newline at end of file

src/views/multilevel/component/SearchGraphMore.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-12-14 09:46:10
+ * @LastEditTime: 2021-12-14 09:54:15
+ * @LastEditors: your name
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \founder_vue\src\views\multilevel\component\SearchGraphMore.vue
+-->
+<template>
+    <div>
+        
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return{
+
+        }
+    },
+    methods:{
+
+    },
+    mounted(){},
+    watch:{
+        
+    }
+}
+</script>
+<style lang="scss">
+    
+</style>

src/views/multilevel/cqgxcx.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-12-14 09:27:41
+ * @LastEditTime: 2021-12-14 15:13:57
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \founder_vue\src\views\multilevel\relationalQuery.vue
+-->
+<template>
+    <div class="searchGraph">
+        <div class="searchImg">
+            <ul class="imgType">
+                <li @click="imgClick(item.id)" v-for="item in photoChangeArr" :key="item.id">
+                    <div :class="{ active:item.activeFLag }">
+                        <img :src="item.activeFLag?item.activeUrl:item.deActiveUrl" :alt="item.text">
+                    </div>
+                    <p>{{ item.text }}</p>
+                </li>
+            </ul>
+        </div>
+        <div class="searchForm">
+             <el-form ref="form" :model="formData" label-width="0px" :rules="formDataRules">
+                    <el-form-item class="demo-input-suffix zdycol3" prop="type">
+                        <el-select 
+                            v-model="formData.type"
+                            placeholder="请选择标识类型"
+                        >
+                            <el-option
+                                v-for="item in typeOptions"
+                                :key="item.value"
+                                :label="item.name"
+                                :value="item.value"
+                            >
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item class="demo-input-suffix zdycol3" prop="value">
+                        <el-input clearable placeholder="请输入标识号" v-model="formData.value"></el-input> 
+                    </el-form-item>
+                    <el-button @click="searchSure">搜索</el-button>
+             </el-form>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name:"cqgxcx",
+    components:{},
+    data(){
+        return{
+            photoChangeArr:[//图片展示
+                {
+                    id:'0',
+                    text:"车牌",
+                    activeUrl:require("@/assets/img/graphEcharts/weibo.png"),
+                    deActiveUrl:require("@/assets/img/graphEcharts/ashweibo.png"),
+                    activeFLag:true,
+                    OptionData:[
+                        {
+                            name:'小型车',
+                            value:'0',
+                        },
+                        {
+                            name:'大型车',
+                            value:'1',
+                        },
+                        {
+                            name:'摩托车',
+                            value:'2',
+                        },
+                    ],
+                },
+                {
+                    id:'1',
+                    text:"硬件串号",
+                    activeUrl:require("@/assets/img/graphEcharts/wechat.png"),
+                    deActiveUrl:require("@/assets/img/graphEcharts/ashwechat.png"),
+                    activeFLag:false,
+                    OptionData:[
+                        {
+                            name:'IMSI',
+                            value:'0',
+                        },
+                        {
+                            name:'IMEI',
+                            value:'1',
+                        },
+                        {
+                            name:'MAC',
+                            value:'2',
+                        },
+                    ],
+                },
+                {
+                    id:'2',
+                    text:"虚拟身份",
+                    activeUrl:require("@/assets/img/graphEcharts/person.png"),
+                    deActiveUrl:require("@/assets/img/graphEcharts/ashperson.png"),
+                    activeFLag:false,
+                    OptionData:[
+                        {
+                            name:'qq',
+                            value:'0',
+                        },
+                        {
+                            name:'微信',
+                            value:'1',
+                        },
+                        {
+                            name:'微博',
+                            value:'2',
+                        },
+                    ],
+                },
+            ],
+            formData:{
+                type:'0',
+                value:"",
+            },
+            typeOptions:[
+                {
+                    name:'小型车',
+                    value:'0',
+                },
+                {
+                    name:'大型车',
+                    value:'1',
+                },
+                {
+                    name:'摩托车',
+                    value:'2',
+                },
+            ],
+            formDataRules:{
+               type: [
+                   { required: true, message: "请选择标识类型", trigger: "blur" }
+               ],
+               value:[
+                   {
+                       required: true, message: "请输入标识号", trigger: "blur"
+                   }
+               ]
+            }
+        }
+    },
+    methods:{
+        //图片点击事件
+        imgClick(id){
+            this.photoChangeArr.map(el=>{
+                if(el.id == id){
+                     el.activeFLag = true
+                     this.typeOptions = el.OptionData
+                }else if(el.id != id && el.activeFLag){
+                    el.activeFLag = false;
+                }
+            })
+        },
+        //搜索
+        searchSure(){
+               this.$refs["form"].validate((valid) => {
+                    if (valid) {
+                        //成功校验
+                    }else{
+                        return false
+                    }
+               })
+        },
+    },
+    mounted(){},
+    watch:{},
+}
+</script>
+<style lang="scss" scoped>
+.searchGraph{
+  width: 100%;
+  padding:0 20px;
+  text-align: center;
+  position: absolute;
+  top: 20%;
+  .imgType{
+      width: 100%;
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      margin-bottom: 15px;
+      li{
+          cursor: pointer;
+          div{
+              width: 72px;
+              height: 72px;
+          }
+          .active{
+            background-image: url("../../assets/img/bian.png");
+            background-repeat: no-repeat;
+            background-size: cover;
+          }
+          p{
+                color: #fff;
+                margin-top: 10px;
+          }
+      }
+  }
+  /deep/.el-form-item {
+    display: inline-block;
+    width: 20%;
+    margin-right: 20px;
+  }
+  /deep/.el-form-item__content{
+      display: flex;
+      justify-content: center;
+  }
+  /deep/.el-input {
+    border-radius: 4px;
+    .el-input__inner {
+      background: #0d3354;
+      border: 1px solid #0268ff;
+      color: #fff;
+    }
+  }
+  /deep/.el-button {
+    width: 72px;
+    background: #0268ff;
+    border-radius: 4px;
+    color: #fff;
+    border: none;
+    vertical-align: top;
+  }
+}
+</style>
\ No newline at end of file