修改页面适配 添加新页面

src/App.vue

 <template>
-  <div id="app">
-    <dv-full-screen-container class="bg">
-      <router-view/>
-    </dv-full-screen-container>
+  <div id="app" class="bg">
+    <router-view/>
   </div>
 </template>
 

src/assets/js/VisHelper.js

@@ -4,9 +4,9 @@ let ori_data = null
 let cur_data = {}
 let network = null
 let container = null
-let nodeBorderWidth = 5
+const nodeBorderWidth = 5
 let vm = null
-let options = {
+const options = {
   physics: {
     enabled: false
   },
@@ -31,7 +31,7 @@ let options = {
 let int = 0
 let nodecontext = null
 let edgecontext = null
-let colors = {
+const colors = {
   // n: '#dddddd', // 闪烁背景色
   // d: '#cf2b0b', // 深红
   l: '#E4F9FF', // 线默认色
@@ -49,7 +49,7 @@ let colors = {
 let MapNodeIdIndex = {}
 let MapEdgeIdIndex = {}
 
-let registerNetworkEvent = () => {
+const registerNetworkEvent = () => {
   // 屏蔽右键菜单
   document.getElementsByTagName('canvas')[0].oncontextmenu = function (ev) {
     ev.preventDefault()
@@ -87,8 +87,8 @@ let registerNetworkEvent = () => {
       cur_data.nodes._data[params.nodes[0]].axisX = params.pointer.canvas.x
       cur_data.nodes._data[params.nodes[0]].axisY = params.pointer.canvas.y
       // console.log(params.nodes[0], params.pointer.canvas.x, params.pointer.canvas.y)
-      let arr = []
-      for (let k in cur_data.nodes._data) {
+      const arr = []
+      for (const k in cur_data.nodes._data) {
         // 实际需要传位置和id
         // obj={axisX:cur_data.nodes._data[k].axisX,axisY : cur_data.nodes._data[k].axisY,ip : cur_data.nodes._data[k].ip}
         arr.push(cur_data.nodes._data[k])
@@ -100,21 +100,21 @@ let registerNetworkEvent = () => {
 
     }
   })
-  //双击事件
-  network.on("doubleClick", params => {
+  // 双击事件
+  network.on('doubleClick', params => {
     // saveviewpos();
     // hidecontext();
-    let id = params.nodes[0];
+    const id = params.nodes[0]
     if (id == undefined) {
-      return;
+      return
     }
-    localStorage.setItem("cfg", "");
-    let bexc = 0;
-    let bend = 0;
-    ori_data.nodes.forEach((v,i)=>{
-      if(v.level == 1){
+    localStorage.setItem('cfg', '')
+    const bexc = 0
+    const bend = 0
+    ori_data.nodes.forEach((v, i) => {
+      if (v.level == 1) {
         redraw(id, 1)
-      }else{
+      } else {
         redraw(id, 2)
       }
     })
@@ -129,23 +129,23 @@ let registerNetworkEvent = () => {
     // } else {
     //   id && redraw(id, 2);
     // }
-  });
+  })
 }
-let redraw = (id, qryType, that) => {
+const redraw = (id, qryType, that) => {
   vm = that || vm
-  let cfg = {
+  const cfg = {
     qryType // 1,展开 2,收缩 3,刷新 4,按点查询
   }
   // cfg.vpnName = sessionStorage.getItem('topuVpnName');
   if (qryType === 3 || qryType == 4) {
     cfg.nodeId = id
   }
-  let list = []
+  const list = []
   let listStr = ''
   // let list = "";
   if (qryType === 3) {
     ori_data = JSON.parse(sessionStorage.getItem('graph'))
-    container = document.querySelector(`#topology`)
+    container = document.querySelector('#topology')
   }
   ori_data &&
     ori_data.nodes.forEach(v => {
@@ -179,9 +179,9 @@ let redraw = (id, qryType, that) => {
   // }).catch((err=>{
   // }))
 }
-let moveTo = () => {
-  let scale = JSON.parse(localStorage.getItem('scale'))
-  let viewposition = JSON.parse(localStorage.getItem('viewposition'))
+const moveTo = () => {
+  const scale = JSON.parse(localStorage.getItem('scale'))
+  const viewposition = JSON.parse(localStorage.getItem('viewposition'))
   if (scale && viewposition) {
     network.moveTo({
       position: viewposition,
@@ -190,27 +190,27 @@ let moveTo = () => {
   }
 }
 
-//字符串换行
-function insertEnter(str,n){
-  if(str){
-    var len = str.length;
-    var strTemp = '';
-    if(len > n){
-      strTemp = str.substring(0,n);
-      str = str.substring(n,len);
-      return strTemp+'\n'+insertEnter(str,n);
-    }else{
-      return str;
+// 字符串换行
+function insertEnter (str, n) {
+  if (str) {
+    var len = str.length
+    var strTemp = ''
+    if (len > n) {
+      strTemp = str.substring(0, n)
+      str = str.substring(n, len)
+      return strTemp + '\n' + insertEnter(str, n)
+    } else {
+      return str
     }
   }
 }
 
-let handleData = (data) => {
-  let newData = { nodes: [], edges: [] }
+const handleData = (data) => {
+  const newData = { nodes: [], edges: [] }
   if (data.retNodes.length != 0) {
     // _store.commit('updateRetNode', data.retNodes)
     data.retNodes.forEach((v, i) => {
-      v.label = insertEnter(v.customerName,5) || insertEnter(v.projectName,5) || insertEnter(v.nicheName,5) || insertEnter(v.memberName,5)
+      v.label = insertEnter(v.customerName, 5) || insertEnter(v.projectName, 5) || insertEnter(v.nicheName, 5) || insertEnter(v.memberName, 5)
       newData.nodes.push(v)
     })
   }
@@ -293,16 +293,16 @@ export default {
   },
   cgraph: (fn, S, __fn) => {
     // 改变数据类型
-    cur_data['edges'] = new DataSet(cur_data['edges'])
-    cur_data['nodes'] = new DataSet(cur_data['nodes'])
+    cur_data.edges = new DataSet(cur_data.edges)
+    cur_data.nodes = new DataSet(cur_data.nodes)
     // 初始绘制图表
     if (!container) return
     network = new Network(container, cur_data, options)
     registerNetworkEvent()
     if (!S) {
       // 计算位置
-      let initpos = network.getPositions()
-      let initid = Object.keys(initpos)[0]
+      const initpos = network.getPositions()
+      const initid = Object.keys(initpos)[0]
       sessionStorage.setItem('initpos', JSON.stringify(initpos[initid]))
       sessionStorage.setItem('initid', initid)
     }

src/assets/js/knowledgeJSON.js

 const knowledgeJSON = [
-  { 'retNodes': [
-    { 'ip': '1',
-      'axisX': '886.4717477003943',
-      'axisY': '551.522667542707',
-      'level': '1',
-      'status': '1',
-      'nodeName': '一级节点' },
-    { 'ip': '2-1',
-      'axisX': '1032.0933249370275',
-      'axisY': '544.7911335012593',
-      'level': '2',
-      'status': '1',
-      'nodeName': '二级节点' },
-    { 'ip': '3-1',
-      'axisX': '1150.6307490144548',
-      'axisY': '63.60545335085421',
-      'level': '3',
-      'status': '1',
-      'nodeName': '三级节点1' },
-    { 'ip': '3-2',
-      'axisX': '1445.867279894875',
-      'axisY': '265.6093955321945',
-      'level': '3',
-      'status': '1',
-      'nodeName': '三级节点2' }
-  ],
+  {
+    retNodes: [
+      {
+        ip: '1',
+        axisX: '886.4717477003943',
+        axisY: '551.522667542707',
+        level: '1',
+        status: '1',
+        nodeName: '一级节点'
+      },
+      {
+        ip: '2-1',
+        axisX: '1032.0933249370275',
+        axisY: '544.7911335012593',
+        level: '2',
+        status: '1',
+        nodeName: '二级节点'
+      },
+      {
+        ip: '3-1',
+        axisX: '1150.6307490144548',
+        axisY: '63.60545335085421',
+        level: '3',
+        status: '1',
+        nodeName: '三级节点1'
+      },
+      {
+        ip: '3-2',
+        axisX: '1445.867279894875',
+        axisY: '265.6093955321945',
+        level: '3',
+        status: '1',
+        nodeName: '三级节点2'
+      }
+    ],
 
-  'retLinks': [
-    {
-      'lkId': '54',
-      'state': '1',
-      'useRate': '0.00',
-      'bandwidth': '1000',
-      'flow': '0',
-      'dnode': '1',
-      'snode': '2-1'
-    },
+    retLinks: [
+      {
+        lkId: '54',
+        state: '1',
+        useRate: '0.00',
+        bandwidth: '1000',
+        flow: '0',
+        dnode: '1',
+        snode: '2-1'
+      },
 
-    {
-      'lkId': '56',
-      'state': '1',
-      'useRate': '164.48',
-      'bandwidth': '155',
-      'flow': '254',
-      'dnode': '3-1',
-      'snode': '2-1'
-    },
+      {
+        lkId: '56',
+        state: '1',
+        useRate: '164.48',
+        bandwidth: '155',
+        flow: '254',
+        dnode: '3-1',
+        snode: '2-1'
+      },
 
-    {
-      'lkId': '61',
-      'state': '1',
-      'useRate': '115.55',
-      'bandwidth': '155',
-      'flow': '179',
-      'dnode': '3-2',
-      'snode': '2-1'
-    }
+      {
+        lkId: '61',
+        state: '1',
+        useRate: '115.55',
+        bandwidth: '155',
+        flow: '179',
+        dnode: '3-2',
+        snode: '2-1'
+      }
 
-  ] }
+    ]
+  }
 ]
 
 export default knowledgeJSON

src/assets/style/business.scss

@@ -41,15 +41,17 @@
     }
     .box{
       display: inline-block;
+      box-sizing: border-box;
       width: 2rem;
       height: .613rem;
-      text-align: center;
+      text-align: left;
+      padding: 0 .16rem;
       background:rgba(144,224,255,0.15);
       color: #fff;
       border: 0.01rem solid #77E2FF;
-      // margin-bottom: .2rem;
       &:nth-of-type(2n){
         margin-left: .2rem;
+        text-align: right;
       }
       .boxTitle{
         font-size:.16rem;
@@ -93,17 +95,5 @@
       transform: translateY(-50%);
       z-index: 1;
     }
-    .pl-8 {
-      padding-left: .8rem;
-    }
-    .pr-7 {
-      padding-right: .7rem;
-    }
-    .pl-2 {
-      padding-left: .2rem;
-    }
-    .pr-2 {
-      padding-right: .2rem;
-    }
   }
 }

src/assets/style/client.scss

@@ -56,7 +56,7 @@
     }
     .iconBlock{
       padding: .24rem;
-      height:calc(100% - 1.12rem);
+      height:calc(100% - 1.6rem);
       margin: 0 auto;
     }
     i{

src/assets/style/mainPage.scss

@@ -21,7 +21,14 @@
       }
     }
     .centerBlock {
-      .clientDistributed{
+      position: relative;
+      .search-box {
+        position: absolute;
+        top: .2rem;
+        left: .2rem;
+        z-index: 1;
+      }
+      .nationwide,.itemNation{
         margin-top: .2rem;
         height: 3.02rem;
         background: url("~@/assets/img/c-border-b.png");

src/assets/style/operation.scss

@@ -21,7 +21,6 @@
   }
   .block{
     width: 100%;
-    height:100%;
     font-family:PingFang-SC-Bold,PingFang-SC;
     font-weight:bold;
     font-size: .12rem;

src/assets/style/public.scss

@@ -50,6 +50,7 @@ $prefix: d2;
   background-color: $color-bg;
   background-size: cover;
   background-position: center center;
+  overflow: hidden;
 }
 .dv-loading {
   color: #fff;
@@ -100,6 +101,15 @@ ul{list-style: none; padding: 0}
     vertical-align: .03rem;
   }
 }
+.lookMore {
+  position: absolute;
+  right: 0.1rem;
+  top: 0.1rem;
+  font-size: .14rem;
+  color: #fff;
+  text-decoration: underline;
+  cursor: pointer;
+}
 .px-24 {
   padding: .24rem;
 }

src/components/HeaderLayout/index.vue

@@ -5,7 +5,7 @@
               <el-button class="tabButton" size="mini" :class="num==index?'is-active':''">{{item}}</el-button>
           </div>
       </div>
-      <h3 class="flex-1">企业运行图谱</h3>
+      <h3 class="flex-1">企业运营图谱</h3>
       <div class="flex-1 header-right-box">
         <div class="time">{{nowDate | moment("YYYY/MM/DD")}} {{nowDate | moment("HH:mm:ss")}} 星期{{week | weekFilter}}</div>
         <div class="right-menu">
@@ -84,7 +84,6 @@ export default {
         this.timer = true
         const that = this
         setTimeout(function () {
-          console.log(that.screenWidth)
           that.timer = false
         }, 400)
       }
@@ -116,6 +115,7 @@ export default {
       const vm = this
       this.nowDate = new Date()
       this.week = new Date().getDay()
+      console.log(this.week)
       setTimeout(function () {
         vm.getDate()
       }, 1000)

src/components/echarts/barChart.vue

@@ -3,13 +3,9 @@
 </template>
 
 <script>
-// 引入基本模板
-const echarts = require('echarts/lib/echarts')
-// 引入提示框和title组件
-require('echarts/lib/component/tooltip')
-require('echarts/lib/component/title')
-
+// import echartMixins from '@/utils/resizeMixins'
 export default {
+  // mixins: [echartMixins],
   data () {
     return {
       dataObj: {},
@@ -26,10 +22,15 @@ export default {
     drawLine () {
       const vm = this
       // 基于准备好的dom，初始化echarts实例
-      vm.chart = echarts.init(document.getElementById(vm.idstr))
+      vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
       // 清空图表
       vm.chart.clear()
       vm.option = {
+        tooltip: {
+          transitionDuration: 0,
+          trigger: 'item',
+          formatter: '{b}: {c}'
+        },
         grid: {
           top: '15%',
           left: '10%',
@@ -106,7 +107,6 @@ export default {
         setTimeout(function () {
           vm.drawLine()
         }, 0)
-        console.log(this.message)
       },
       deep: true
     }

src/components/echarts/doubleYBarChart.vue

@@ -3,12 +3,6 @@
 </template>
 
 <script>
-// 引入基本模板
-const echarts = require('echarts/lib/echarts')
-// 引入提示框和title组件
-require('echarts/lib/component/tooltip')
-require('echarts/lib/component/title')
-
 export default {
   data () {
     return {
@@ -26,7 +20,7 @@ export default {
     drawLine () {
       const vm = this
       // 基于准备好的dom，初始化echarts实例
-      vm.chart = echarts.init(document.getElementById(vm.idstr))
+      vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
       // 清空图表
       vm.chart.clear()
       vm.option = {
@@ -163,7 +157,6 @@ export default {
         setTimeout(function () {
           vm.drawLine()
         }, 0)
-        console.log(this.message)
       },
       deep: true
     }

src/components/echarts/funnel.vue

@@ -3,12 +3,6 @@
 </template>
 
 <script>
-// 引入基本模板
-const echarts = require('echarts/lib/echarts')
-// 引入提示框和title组件
-require('echarts/lib/component/tooltip')
-require('echarts/lib/component/title')
-
 export default {
   data () {
     return {
@@ -26,7 +20,7 @@ export default {
     drawLine () {
       const vm = this
       // 基于准备好的dom，初始化echarts实例
-      vm.chart = echarts.init(document.getElementById(vm.idstr))
+      vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
       // 清空图表
       vm.chart.clear()
       vm.option = {
@@ -97,7 +91,6 @@ export default {
         setTimeout(function () {
           vm.drawLine()
         }, 0)
-        console.log(this.message)
       },
       deep: true
     }

src/components/echarts/graphChart.vue

+<template>
+    <div :id="idstr"></div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      dataObj: {},
+      option: {},
+      chart: null,
+      clickNum: [1, 1, 1, 1, 1]
+    }
+  },
+  props: ['message', 'idstr'],
+  mounted () {
+    this.drawLine()
+  },
+  methods: {
+    drawLine () {
+      const vm = this
+      const _list = {
+        nodes: [
+          {
+            id: '0',
+            name: '群智合',
+            symbolSize: 19.12381,
+            value: 28.685715,
+            category: 0,
+            itemStyle: {
+              color: '#30DDF4'
+            }
+          },
+          {
+            id: '1',
+            name: '中行',
+            symbolSize: 15.6666666666666665,
+            value: 4,
+            category: 0,
+            itemStyle: {
+              color: '#4f19c7'
+            }
+          },
+          {
+            id: '2',
+            name: '新航城',
+            symbolSize: 15.323809333333333,
+            value: 9.485714,
+            category: 1,
+            itemStyle: {
+              color: '#c71969'
+            }
+          },
+          {
+            id: '3',
+            name: '科技局',
+            symbolSize: 15.323809333333333,
+            value: 9.485714,
+            category: 1,
+            itemStyle: {
+              color: '#1984c7'
+            }
+          },
+          {
+            id: '4',
+            name: '报表项目',
+            symbolSize: 10,
+            value: 4,
+            category: 0,
+            itemStyle: {
+              color: '#8419c7'
+            }
+          },
+          {
+            id: '5',
+            name: '知识图谱项目',
+            symbolSize: 10,
+            value: 4,
+            category: 0,
+            itemStyle: {
+              color: '#9f19c7'
+            }
+          },
+          {
+            id: '6',
+            name: '可视化项目',
+            symbolSize: 10,
+            value: 4,
+            category: 0,
+            itemStyle: {
+              color: '#199fc7'
+            }
+          },
+          {
+            id: '7',
+            name: '可视化报表',
+            symbolSize: 6,
+            value: 4,
+            category: 0,
+            itemStyle: {
+              color: '#19c719'
+            }
+          },
+          {
+            id: '8',
+            name: '王珊珊',
+            symbolSize: 6,
+            value: 4,
+            category: 0,
+            itemStyle: {
+              color: '#69c719'
+            }
+          },
+          {
+            id: '9',
+            name: '崔雪征',
+            symbolSize: 6,
+            value: 4,
+            category: 0,
+            itemStyle: {
+              color: '#b9c719'
+            }
+          },
+          {
+            id: '10',
+            name: '土地开发项目',
+            symbolSize: 10,
+            value: 4,
+            category: 0,
+            itemStyle: {
+              color: '#8419c7'
+            }
+          },
+          {
+            id: '11',
+            name: '科技局大数据分析项目',
+            symbolSize: 10,
+            value: 4,
+            category: 0,
+            itemStyle: {
+              color: '#8419c7'
+            }
+          },
+          {
+            id: '12',
+            name: '可视化大屏',
+            symbolSize: 6,
+            value: 4,
+            category: 0,
+            itemStyle: {
+              color: '#19c719'
+            }
+          },
+          {
+            id: '13',
+            name: '傅宝乐',
+            symbolSize: 6,
+            value: 4,
+            category: 0,
+            itemStyle: {
+              color: '#69c719'
+            }
+          }, {
+            id: '14',
+            name: '奚鑫',
+            symbolSize: 6,
+            value: 4,
+            category: 0,
+            itemStyle: {
+              color: '#69c719'
+            }
+          }, {
+            id: '15',
+            name: '郭静',
+            symbolSize: 6,
+            value: 4,
+            category: 0,
+            itemStyle: {
+              color: '#69c719'
+            }
+          }, {
+            id: '16',
+            name: 'PC端系统',
+            symbolSize: 6,
+            value: 4,
+            category: 0,
+            itemStyle: {
+              color: '#19c719'
+            }
+          }, {
+            id: '17',
+            name: '余大超',
+            symbolSize: 6,
+            value: 4,
+            category: 0,
+            itemStyle: {
+              color: '#b9c719'
+            }
+          }, {
+            id: '18',
+            name: '郭襄',
+            symbolSize: 6,
+            value: 4,
+            category: 0,
+            itemStyle: {
+              color: '#b9c719'
+            }
+          }
+        ],
+        links: [
+          {
+            source: '1',
+            target: '0'
+          },
+          {
+            source: '2',
+            target: '0'
+          },
+          {
+            source: '3',
+            target: '0'
+          },
+          {
+            source: '4',
+            target: '1'
+          },
+          {
+            source: '5',
+            target: '1'
+          },
+          {
+            source: '6',
+            target: '1'
+          },
+          {
+            source: '10',
+            target: '2'
+          },
+          {
+            source: '7',
+            target: '4'
+          },
+          {
+            source: '8',
+            target: '7'
+          },
+          {
+            source: '9',
+            target: '7'
+          },
+          {
+            source: '11',
+            target: '3'
+          },
+          {
+            source: '12',
+            target: '10'
+          }, {
+            source: '16',
+            target: '10'
+          }, {
+            source: '13',
+            target: '12'
+          }, {
+            source: '14',
+            target: '12'
+          }, {
+            source: '15',
+            target: '12'
+          }, {
+            source: '17',
+            target: '16'
+          }, {
+            source: '18',
+            target: '16'
+          }
+        ],
+        category: [{ name: '类目0' }]
+      }
+      // 基于准备好的dom，初始化echarts实例
+      vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
+      // 清空图表
+      vm.chart.clear()
+      vm.option = {
+        series: [
+          {
+            type: 'graph',
+            // layout: 'none', // 力引导布局
+            layout: 'force', // 力引导布局
+            legendHoverLink: true, // 是否启用图例 hover(悬停) 时的联动高亮。
+            hoverAnimation: false, // 是否开启鼠标悬停节点的显示动画
+            edgeLabel: {
+              show: false
+            },
+            force: {
+              edgeLength: 50,
+              repulsion: 100
+            },
+            edgeSymbol: ['none', 'none'],
+            roam: true,
+            draggable: true, // 每个节点的拖拉
+            emphasis: {
+              scale: true,
+              focus: 'series',
+              blurScope: 'coordinateSystem'
+            },
+            itemStyle: {
+              normal: {
+                color: '#30DDF4',
+                cursor: 'pointer',
+                shadowColor: 'rgba(0,0,0,0.10)',
+                shadowBlur: 4,
+                shadowOffsetX: 1,
+                shadowOffsetY: 1,
+                label: {
+                  show: true,
+                  position: [-10, -20],
+                  textStyle: { // 标签的字体样式
+                    color: '#fff', // 字体颜色
+                    fontStyle: 'normal', // 文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
+                    fontWeight: '500', // 'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
+                    fontFamily: 'PingFangSC-Regular', // 文字的字体系列
+                    fontSize: 14, // 字体大小
+                    align: 'center'
+                  }
+                }
+              }
+            },
+            lineStyle: {
+              width: 1,
+              color: '#fff'
+            },
+            symbolSize: 26, // 节点大小
+            links: _list.links,
+            data: _list.nodes,
+            cursor: 'pointer'
+          }
+        ]
+      }
+
+      vm.drawBar()
+      // window.addEventListener("resize",()=>{
+      //     chart.resize();
+      // });
+    },
+    drawBar () {
+      // 绘制图表
+      const vm = this
+      vm.chart.setOption(vm.option)
+      vm.eventList()
+    },
+    eventList () {
+      const vm = this
+      vm.chart.on('click', function (params) {
+      })
+    }
+  },
+  watch: {
+    message: {
+      handler () {
+        const vm = this
+        setTimeout(function () {
+          vm.drawLine()
+        }, 0)
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>

src/components/echarts/lineChart.vue

@@ -3,12 +3,6 @@
 </template>
 
 <script>
-// 引入基本模板
-const echarts = require('echarts/lib/echarts')
-// 引入提示框和title组件
-require('echarts/lib/component/tooltip')
-require('echarts/lib/component/title')
-
 export default {
   data () {
     return {
@@ -26,7 +20,7 @@ export default {
     drawLine () {
       const vm = this
       // 基于准备好的dom，初始化echarts实例
-      vm.chart = echarts.init(document.getElementById(vm.idstr))
+      vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
       // 清空图表
       vm.chart.clear()
       vm.option = {
@@ -97,7 +91,6 @@ export default {
         setTimeout(function () {
           vm.drawLine()
         }, 0)
-        console.log(this.message)
       },
       deep: true
     }

src/components/echarts/mulBarChart.vue

@@ -3,12 +3,6 @@
 </template>
 
 <script>
-// 引入基本模板
-const echarts = require('echarts/lib/echarts')
-// 引入提示框和title组件
-require('echarts/lib/component/tooltip')
-require('echarts/lib/component/title')
-
 export default {
   data () {
     return {
@@ -26,7 +20,7 @@ export default {
     drawLine () {
       const vm = this
       // 基于准备好的dom，初始化echarts实例
-      vm.chart = echarts.init(document.getElementById(vm.idstr))
+      vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
       // 清空图表
       vm.chart.clear()
       vm.option = {
@@ -107,7 +101,6 @@ export default {
         setTimeout(function () {
           vm.drawLine()
         }, 0)
-        console.log(this.message)
       },
       deep: true
     }

src/components/echarts/negativeBarChart.vue

@@ -3,12 +3,6 @@
 </template>
 
 <script>
-// 引入基本模板
-const echarts = require('echarts/lib/echarts')
-// 引入提示框和title组件
-require('echarts/lib/component/tooltip')
-require('echarts/lib/component/title')
-
 export default {
   data () {
     return {
@@ -26,7 +20,7 @@ export default {
     drawLine () {
       const vm = this
       // 基于准备好的dom，初始化echarts实例
-      vm.chart = echarts.init(document.getElementById(vm.idstr))
+      vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
       // 清空图表
       vm.chart.clear()
       vm.option = {
@@ -124,7 +118,6 @@ export default {
         setTimeout(function () {
           vm.drawLine()
         }, 0)
-        console.log(this.message)
       },
       deep: true
     }

src/components/echarts/pieChart.vue

@@ -3,12 +3,6 @@
 </template>
 
 <script>
-// 引入基本模板
-const echarts = require('echarts/lib/echarts')
-// 引入提示框和title组件
-require('echarts/lib/component/tooltip')
-require('echarts/lib/component/title')
-
 export default {
   data () {
     return {
@@ -26,7 +20,7 @@ export default {
     drawLine () {
       const vm = this
       // 基于准备好的dom，初始化echarts实例
-      vm.chart = echarts.init(document.getElementById(vm.idstr))
+      vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
       // 清空图表
       vm.chart.clear()
       vm.option = {
@@ -88,7 +82,6 @@ export default {
         setTimeout(function () {
           vm.drawLine()
         }, 0)
-        console.log(this.message)
       },
       deep: true
     }

src/components/echarts/treeChart.vue

+<template>
+    <div :id="idstr"></div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      option: {},
+      chart: null
+    }
+  },
+  props: ['message', 'idstr'],
+  mounted () {
+    this.drawLine()
+  },
+  methods: {
+    drawLine () {
+      const vm = this
+      const data = {
+        name: 'flare',
+        children: [
+          {
+            name: 'analytics',
+            children: [
+              {
+                name: 'cluster',
+                children: [
+                  { name: 'AgglomerativeCluster', value: 3938 },
+                  { name: 'CommunityStructure', value: 3812 },
+                  { name: 'HierarchicalCluster', value: 6714 },
+                  { name: 'MergeEdge', value: 743 }
+                ]
+              },
+              {
+                name: 'graph',
+                children: [
+                  { name: 'BetweennessCentrality', value: 3534 },
+                  { name: 'LinkDistance', value: 5731 },
+                  { name: 'MaxFlowMinCut', value: 7840 },
+                  { name: 'ShortestPaths', value: 5914 },
+                  { name: 'SpanningTree', value: 3416 }
+                ]
+              },
+              {
+                name: 'optimization',
+                children: [
+                  { name: 'AspectRatioBanker', value: 7074 }
+                ]
+              }
+            ]
+          },
+          {
+            name: 'animate',
+            children: [
+              { name: 'Easing', value: 17010 },
+              { name: 'FunctionSequence', value: 5842 },
+              {
+                name: 'interpolate',
+                children: [
+                  { name: 'ArrayInterpolator', value: 1983 },
+                  { name: 'ColorInterpolator', value: 2047 },
+                  { name: 'DateInterpolator', value: 1375 },
+                  { name: 'Interpolator', value: 8746 },
+                  { name: 'MatrixInterpolator', value: 2202 },
+                  { name: 'NumberInterpolator', value: 1382 },
+                  { name: 'ObjectInterpolator', value: 1629 },
+                  { name: 'PointInterpolator', value: 1675 },
+                  { name: 'RectangleInterpolator', value: 2042 }
+                ]
+              },
+              { name: 'ISchedulable', value: 1041 },
+              { name: 'Parallel', value: 5176 },
+              { name: 'Pause', value: 449 },
+              { name: 'Scheduler', value: 5593 },
+              { name: 'Sequence', value: 5534 },
+              { name: 'Transition', value: 9201 },
+              { name: 'Transitioner', value: 19975 },
+              { name: 'TransitionEvent', value: 1116 },
+              { name: 'Tween', value: 6006 }
+            ]
+          },
+          {
+            name: 'data',
+            children: [
+              {
+                name: 'converters',
+                children: [
+                  { name: 'Converters', value: 721 },
+                  { name: 'DelimitedTextConverter', value: 4294 },
+                  { name: 'GraphMLConverter', value: 9800 },
+                  { name: 'IDataConverter', value: 1314 },
+                  { name: 'JSONConverter', value: 2220 }
+                ]
+              },
+              { name: 'DataField', value: 1759 },
+              { name: 'DataSchema', value: 2165 },
+              { name: 'DataSet', value: 586 },
+              { name: 'DataSource', value: 3331 },
+              { name: 'DataTable', value: 772 },
+              { name: 'DataUtil', value: 3322 }
+            ]
+          },
+          {
+            name: 'display',
+            children: [
+              { name: 'DirtySprite', value: 8833 },
+              { name: 'LineSprite', value: 1732 },
+              { name: 'RectSprite', value: 3623 },
+              { name: 'TextSprite', value: 10066 }
+            ]
+          },
+          {
+            name: 'flex',
+            children: [
+              { name: 'FlareVis', value: 4116 }
+            ]
+          },
+          {
+            name: 'physics',
+            children: [
+              { name: 'DragForce', value: 1082 },
+              { name: 'GravityForce', value: 1336 },
+              { name: 'IForce', value: 319 },
+              { name: 'NBodyForce', value: 10498 },
+              { name: 'Particle', value: 2822 },
+              { name: 'Simulation', value: 9983 },
+              { name: 'Spring', value: 2213 },
+              { name: 'SpringForce', value: 1681 }
+            ]
+          }
+        ]
+      }
+
+      // 基于准备好的dom，初始化echarts实例
+      vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
+      // 清空图表
+      vm.chart.clear()
+      vm.option = {
+        series: [
+          {
+            type: 'tree',
+
+            data: [data],
+
+            top: '1%',
+            left: '7%',
+            bottom: '1%',
+            right: '20%',
+
+            symbolSize: 14,
+
+            label: {
+              position: 'left',
+              verticalAlign: 'middle',
+              align: 'right',
+              fontSize: 12,
+              color: '#fff'
+            },
+
+            leaves: {
+              label: {
+                position: 'right',
+                verticalAlign: 'middle',
+                align: 'left',
+                color: '#fff'
+              }
+            },
+
+            emphasis: {
+              focus: 'descendant'
+            },
+
+            expandAndCollapse: true,
+            animationDuration: 550,
+            animationDurationUpdate: 750
+          }
+        ]
+      }
+
+      vm.drawBar()
+      // window.addEventListener("resize",()=>{
+      //     chart.resize();
+      // });
+    },
+    drawBar () {
+      // 绘制图表
+      const vm = this
+      vm.chart.setOption(vm.option)
+      vm.eventList()
+    },
+    eventList () {
+      const vm = this
+      vm.chart.on('click', function (params) {
+      })
+    }
+  },
+  watch: {
+    message: {
+      handler () {
+        const vm = this
+        setTimeout(function () {
+          vm.drawLine()
+        }, 0)
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>

src/components/echarts/waterBallChart.vue

@@ -4,12 +4,8 @@
 
 <script>
 import 'echarts-liquidfill/src/liquidFill.js'
-
 // 引入基本模板
 const echarts = require('echarts/lib/echarts')
-// 引入提示框和title组件
-require('echarts/lib/component/tooltip')
-require('echarts/lib/component/title')
 export default {
   data () {
     return {
@@ -120,7 +116,6 @@ export default {
         setTimeout(function () {
           vm.drawLine()
         }, 0)
-        console.log(this.message)
       },
       deep: true
     }

src/filters/index.js

+
+/**
+   * 金额单位转换
+   * @param {Number} value
+   * @param {Number} format
+   */
+const moneyFormat = (value, format) => {
+  if (value === '' || value === null || value === undefined) {
+    return '--'
+  }
+  if (format === 4) { // 转万元
+    return (Number(value) / 10000).toFixed(0).toLocaleString()
+  }
+  if (format === 8) { // 转亿元
+    return (Number(value) / 10000 / 10000).toFixed(0).toLocaleString()
+  }
+  if (format === 8.5) { // 转亿元
+    return (Number(value) / 10000 / 10000).toLocaleString()
+  }
+}
+/**
+   * 千分位符转换
+   * @param {Number} num
+   */
+const numFormat = (num) => {
+  if (num === '--' || num === '' || num === null || num === undefined) {
+    return '--'
+  }
+  var _num = Number(num)
+  var c = (_num.toString().indexOf('.') !== -1) ? _num.toLocaleString() : _num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
+  return c
+}
+export {
+  moneyFormat,
+  numFormat
+}

src/main.js

@@ -22,10 +22,13 @@ import echarts from 'echarts'
 import dataV from '@jiaminghi/data-view'
 // 适配flex
 import '@/utils/flexible.js'
-Vue.prototype.$echarts = echarts
-
-// Vue.prototype.$ = $
 
+// 引入全局过滤器
+import * as filters from '@/filters/index'
+Object.keys(filters).forEach(key => {
+  Vue.filter(key, filters[key])
+})
+Vue.prototype.$echarts = echarts
 Vue.prototype.downUrl = 'http://10.11.16.19:8080'
 Vue.prototype.baseUrl = 'http://10.12.8.67:51005'
 

src/router/modules/child.js

+// 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
+const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
+
+const meta = { auth: true }
+// 首页-companyNews
+export default [
+  {
+    path: '/companyNews',
+    name: 'companyNews',
+    meta,
+    component: _import('system/index/components/companyNews')
+  },
+  {
+    path: '/newsDetail',
+    name: 'newsDetail',
+    meta,
+    component: _import('system/index/components/newsDetail')
+  },
+  {
+    path: '/orgDetail',
+    name: 'orgDetail',
+    meta,
+    component: _import('content/organization/components/orgDetail')
+  }
+]

src/router/routes.js

@@ -3,7 +3,9 @@ import operation from './modules/operation'
 import business from './modules/business'
 import client from './modules/client'
 import organization from './modules/organization'
-
+import child from './modules/child'
+console.log(child, 'child')
+console.log(organization, 'organization')
 // 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
 const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
 
@@ -44,7 +46,8 @@ const frameIn = [
   operation,
   business,
   client,
-  organization
+  organization,
+  ...child
 ]
 
 /**

src/utils/flexible.js

@@ -22,25 +22,25 @@
 
   // create testDom
   var testDom = document.createElement('div')
-  var testDomWidth = 0
+  // var testDomWidth = 0
   var adjustRatio = 0
   testDom.style.cssText = 'height:0;width:1rem;'
   // doc.body.appendChild(testDom);
 
-  var calcTestDom = function () {
-    testDomWidth = testDom.offsetWidth
-    if (testDomWidth !== Math.round(clientWidth / grids)) {
-      adjustRatio = clientWidth / grids / testDomWidth
-      var reCalcRem = clientWidth * adjustRatio / grids
-      html.style.fontSize = reCalcRem + 'px'
-    } else {
-      doc.body.removeChild(testDom)
-    }
-  }
+  // var calcTestDom = function () {
+  //   testDomWidth = testDom.offsetWidth
+  //   if (testDomWidth !== Math.round(clientWidth / grids)) {
+  //     adjustRatio = clientWidth / grids / testDomWidth
+  //     var reCalcRem = clientWidth * adjustRatio / grids
+  //     html.style.fontSize = reCalcRem + 'px'
+  //   } else {
+  //     doc.body.removeChild(testDom)
+  //   }
+  // }
 
   // detect if rem calc is working directly
   // if not , recalc and set the rem value
-  setTimeout(calcTestDom, 20)
+  // setTimeout(calcTestDom, 20)
 
   var reCalc = function () {
     var newCW = html.clientWidth

src/utils/index.js

+/**
+ * 节流throttle（时间戳+定时器）
+ * @param {FUNCTION} func
+ * @param {NUMBER} delay
+ */
+export function throttle (func, delay) {
+  var timer = null
+  var startTime = Date.now()
+  return function () {
+    var curTime = Date.now()
+    var remaining = delay - (curTime - startTime)
+    var context = this
+    var args = arguments
+    clearTimeout(timer)
+    if (remaining <= 0) {
+      func.apply(context, args)
+      startTime = Date.now()
+    } else {
+      timer = setTimeout(func, remaining)
+    }
+  }
+}
+/**
+   * 防抖
+   * @param {FUNCTION} func
+   * @param {NUMBER} wait
+   * @param {BOOLEAN} immediate
+   */
+export function debounce (func, wait, immediate) {
+  let timeout, args, context, timestamp, result
+
+  const later = function () {
+    // 据上一次触发时间间隔
+    const last = +new Date() - timestamp
+
+    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last)
+    } else {
+      timeout = null
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, args)
+        if (!timeout) context = args = null
+      }
+    }
+  }
+
+  return function (...args) {
+    context = this
+    timestamp = +new Date()
+    const callNow = immediate && !timeout
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = setTimeout(later, wait)
+    if (callNow) {
+      result = func.apply(context, args)
+      context = args = null
+    }
+
+    return result
+  }
+}
+
+/**
+   * @param {date} time 需要转换的时间
+   * @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
+   */
+export function formatTime (time, fmt) {
+  if (!time) return ''
+  else {
+    const date = new Date(time)
+    const o = {
+      'M+': date.getMonth() + 1,
+      'd+': date.getDate(),
+      'H+': date.getHours(),
+      'm+': date.getMinutes(),
+      's+': date.getSeconds(),
+      'q+': Math.floor((date.getMonth() + 3) / 3),
+      S: date.getMilliseconds()
+    }
+    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+    for (const k in o) {
+      if (new RegExp('(' + k + ')').test(fmt)) {
+        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : ((
+          '00' + o[k]).substr(('' + o[k]).length)))
+      }
+    }
+    return fmt
+  }
+}
+
+/**
+   * 动画函数
+   * 任意一个元素移动到指定的目标位置
+   * @param {*} element 任意一个元素
+   * @param {*} direction 移动方向
+   * @param {*} target  目标位置（number类型）
+   */
+export function animate (element, direction, target) {
+  // 先清理定时器
+  if (element && element.timeId) {
+    clearInterval(element.timeId)
+  }
+  element.timeId = setInterval(function () {
+    // 获取移动元素当前位置
+    var current = Number(element.style[direction].replace('rem', ''))
+    // 每次移动距离
+    var step = 0.4
+    step = target > current ? step : -step
+    // 移动后的距离
+    current += step
+    // 判断是否到达目标位置
+    if (Math.abs(target - current) > Math.abs(step)) {
+      element.style[direction] = current + 'rem'
+    } else {
+      clearInterval(element.timeId)
+      element.style[direction] = target + 'rem'
+    }
+  }, 10)
+}
+/**
+   *
+   * @param {Number} value 金额
+   * @param {Number} fmt 亿元还是万元
+   */
+export function formatMoney (value, fmt) {
+  if (value === '' || value === null || value === undefined) {
+    return '--'
+  }
+  if (fmt === 4) { // 转万元
+    return (Number(value) / 10000).toFixed(0)
+  }
+  if (fmt === 8) { // 转亿元
+    return (Number(value) / 10000 / 10000).toFixed(0)
+  }
+  if (fmt === 8.01) { // 转亿元
+    return (Number(value) / 10000 / 10000).toFixed(2)
+  }
+}
+/**
+   * 千分位符转换
+   * @param {Number} num
+   */
+export function numFormat (num) {
+  if (num === '--' || num === '' || num === null || num === undefined) {
+    return '--'
+  }
+  var _num = Number(num)
+  var c = (_num.toString().indexOf('.') !== -1) ? _num.toLocaleString() : _num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
+  return c
+}

src/utils/resizeMixins.js

+// 混入代码 resize-mixins.js
+import { debounce } from '@/utils/index'
+const resizeChartMethod = '$__resizeChartMethod'
+
+export default {
+  data () {
+    // 在组件内部将图表init的引用映射到chart属性上
+    return {
+      chart: null
+    }
+  },
+  created () {
+    window.addEventListener('resize', this[resizeChartMethod], false)
+  },
+  beforeDestroy () {
+    window.removeEventListener('reisze', this[resizeChartMethod])
+  },
+  methods: {
+    // 通过lodash的防抖函数来控制resize的频率
+    [resizeChartMethod]: debounce(function () {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+  }
+}

src/views/content/business/page.vue

@@ -12,34 +12,34 @@
               <div class="circle circleOut"></div>
               <div class="flex-1">
                 <div class="box">
-                  <div class="boxTitle pr-2">商机总数<span>（个）</span></div>
-                  <div class="boxValue pr-2">{{totalObj.total['商机总数']}}</div>
+                  <div class="boxTitle">商机总数<span>（个）</span></div>
+                  <div class="boxValue">{{totalObj.total['商机总数']}}</div>
                 </div>
                 <div class="box">
-                  <div class="boxTitle pl-2">整体预算<span>（百万）</span></div>
-                  <div class="boxValue pl-2">{{totalObj.total['商机整体总预算'] | numFilter}}</div>
+                  <div class="boxTitle">整体预算<span>（百万）</span></div>
+                  <div class="boxValue">{{totalObj.total['商机整体总预算'] | numFilter}}</div>
                 </div>
               </div>
               <div class="horizontal"></div>
               <div class="flex-1">
                 <div class="box">
-                  <div class="boxTitle pr-7">本月新增<span>（个）</span></div>
-                  <div class="boxValue pr-7">{{(totalObj.total['本月新增']|| 0) | numFilter }}</div>
+                  <div class="boxTitle">本月新增<span>（个）</span></div>
+                  <div class="boxValue">{{(totalObj.total['本月新增']|| 0) | numFilter }}</div>
                 </div>
                 <div class="box">
-                  <div class="boxTitle pl-8">预计毛利<span>（百万）</span></div>
-                  <div class="boxValue pl-8">{{totalObj.total['公司预计毛利'] | numFilter }}</div>
+                  <div class="boxTitle">预计毛利<span>（百万）</span></div>
+                  <div class="boxValue">{{totalObj.total['公司预计毛利'] | numFilter }}</div>
                 </div>
               </div>
               <div class="horizontal"></div>
               <div class="flex-1">
                 <div class="box">
-                  <div class="boxTitle pr-2">售前参与<span>（个）</span></div>
-                  <div class="boxValue pr-2">{{totalObj.total['售前参与']}}</div>
+                  <div class="boxTitle">售前参与<span>（个）</span></div>
+                  <div class="boxValue">{{totalObj.total['售前参与']}}</div>
                 </div>
                 <div class="box">
-                  <div class="boxTitle pl-2">预计成本<span>（百万）</span></div>
-                  <div class="boxValue pl-2">{{totalObj.total['公司预计成本'] | numFilter }}</div>
+                  <div class="boxTitle">预计成本<span>（百万）</span></div>
+                  <div class="boxValue">{{totalObj.total['公司预计成本'] | numFilter }}</div>
                 </div>
               </div>
               <div class="horizontal horizontal1 "></div>

src/views/content/client/page.vue

@@ -12,34 +12,34 @@
               <div class="circle circleOut"></div>
               <div class="flex-1">
                 <div class="box">
-                  <div class="boxTitle pr-2">客户总数<span>（个）</span></div>
-                  <div class="boxValue pr-2">{{clientObj.total['客户总数']}}</div>
+                  <div class="boxTitle">客户总数<span>（个）</span></div>
+                  <div class="boxValue">{{clientObj.total['客户总数']}}</div>
                 </div>
                 <div class="box">
-                  <div class="boxTitle pl-2">商机客户<span>（个）</span></div>
-                  <div class="boxValue pl-2">{{clientObj.total['最终用户']}}</div>
+                  <div class="boxTitle">商机客户<span>（个）</span></div>
+                  <div class="boxValue">{{clientObj.total['最终用户']}}</div>
                 </div>
               </div>
               <div class="horizontal"></div>
               <div class="flex-1">
                 <div class="box">
-                  <div class="boxTitle pr-7">集成商<span>（个）</span></div>
-                  <div class="boxValue pr-7">{{clientObj.total['集成商']}}</div>
+                  <div class="boxTitle">集成商<span>（个）</span></div>
+                  <div class="boxValue">{{clientObj.total['集成商']}}</div>
                 </div>
                 <div class="box">
-                  <div class="boxTitle pl-8">本年新增<span>（个）</span></div>
-                  <div class="boxValue pl-8">{{clientObj.total['本年新增客户']}}</div>
+                  <div class="boxTitle">本年新增<span>（个）</span></div>
+                  <div class="boxValue">{{clientObj.total['本年新增客户']}}</div>
                 </div>
               </div>
               <div class="horizontal"></div>
               <div class="flex-1">
                 <div class="box">
-                  <div class="boxTitle pr-2">优秀案例<span>（个）</span></div>
-                  <div class="boxValue pr-2">500</div>
+                  <div class="boxTitle">优秀案例<span>（个）</span></div>
+                  <div class="boxValue">500</div>
                 </div>
                 <div class="box">
-                  <div class="boxTitle pl-2">本年活跃<span>（个）</span></div>
-                  <div class="boxValue pl-2">29</div>
+                  <div class="boxTitle">本年活跃<span>（个）</span></div>
+                  <div class="boxValue">29</div>
                 </div>
               </div>
               <div class="horizontal horizontal1 "></div>

src/views/content/organization/components/orgDetail.vue

+<template>
+  <d2-container class="orgDetail">
+    <headerLayout></headerLayout>
+    <div class="org-wrapper">
+      <div class="org-title d-flex jc-between">
+        <label>组织架构</label>
+        <span @click="goBack">&lt; 返回</span>
+      </div>
+        <treeChart class="org-content" idstr="orgCharts"/>
+    </div>
+  </d2-container>
+</template>
+
+<script>
+import headerLayout from '@/components/headerLayout/index' // 公共头部
+import treeChart from '@/components/echarts/treeChart'
+
+export default {
+  components: { headerLayout, treeChart },
+  data () {
+    return {
+      itemContent: {},
+      content: ''
+    }
+  },
+  mounted () {
+    this.itemContent = JSON.parse(this.$route.query.row)
+    this.content = ''
+  },
+  methods: {
+    goBack () {
+      this.$router.back(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.orgDetail {
+  .org-wrapper {
+    padding: .5rem 1rem;
+  }
+  .org-title {
+    width: 100%;
+    height: .54rem;
+    font-size: .24rem;
+    line-height: 1.5;
+    color: $color-primary;
+    border-bottom: .02rem solid $color-primary;
+    margin-bottom: .5rem;
+    span {
+      cursor: pointer;
+    }
+  }
+  .org-content {
+    color: #fff;
+    font-size: .14rem;
+    width: 10.8rem;
+    height: 7.89rem;
+    margin: 0 auto;
+  }
+}
+</style>

src/views/content/organization/components/peopleCounting.vue

 <template>
     <div class="peopleCounting">
         <div class="title">人数统计</div>
-        <div class="px-24">
-          <dv-scroll-board :config="config" style="width:450px;height:380px" />
+        <div class="content heightCut44">
+          <dv-scroll-board :config="config" style="width:calc(100% - 0.01rem);height:calc(100% - 0.01rem)" />
         </div>
     </div>
 </template>
@@ -37,4 +37,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.peopleCounting {
+  .content{
+    box-sizing: border-box;
+    padding: .24rem;
+    width: 100%;
+  }
+}
+
 </style>

src/views/content/organization/page.vue

@@ -3,8 +3,9 @@
       <headerLayout></headerLayout>
       <div class="section">
           <div class="leftBlock">
-              <div class="boxHeight-3">
+              <div class="boxHeight-3" style="position:relative;">
                   <div class="title">组织架构</div>
+                  <div class="lookMore" @click="orgDetail">查看详情</div>
                   <div class="architecture">
                       <div class="architectureBlock">
                           <div class="top">总裁办</div>
@@ -184,6 +185,9 @@ export default {
     },
     handleSelect (item) {
 
+    },
+    orgDetail () {
+      this.$router.push('/orgDetail')
     }
   }
 }

src/views/system/index/components/companyNews.vue

 <template>
-    <div class="news height100">
-        <div class="title">公司新闻</div>
-        <div class="line"></div>
-        <div class="block">
-            <el-carousel>
-                <el-carousel-item v-for="(item, id) in newsList" :key="id">
-                    <img :src="item.url" alt="">
-                    <div class="content">
-                        <!-- <span>{{item.name}}</span> -->
-                        <!-- <p>{{item.introduce}}</p> -->
-                        <el-link href="https://www.baidu.com" :underline="false" target="_blank">{{item.introduce}}</el-link>
-                        <!-- <p>工期：2个月***信息有限公司机房运维项目</p>
-                        <p>工期：2个月****信息有限</p> -->
-                    </div>
-                </el-carousel-item>
-            </el-carousel>
-        </div>
+  <d2-container class="companyNews">
+    <headerLayout></headerLayout>
+    <div class="news-wrapper">
+      <div class="news-title d-flex jc-between">
+        <label>公司新闻</label>
+        <span @click="goBack">&lt; 返回</span>
+      </div>
+      <div class="news-content">
+        <el-table stripe :data="tableData" style="width: 100%">
+          <el-table-column prop="name" label="内容">
+            <template slot-scope="scope">
+              <a @click.stop="goDetail(scope.row)">{{scope.row.name}}</a>
+            </template>
+          </el-table-column>
+          <el-table-column align="right" prop="publishTime" label="日期">
+            <template slot-scope="scope">
+              <a @click.stop="goDetail(scope.row)">{{scope.row.publishTime}}</a>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          background
+          class="text-right"
+          layout="prev, pager, next"
+          :total="1000">
+        </el-pagination>
+      </div>
     </div>
+  </d2-container>
 </template>
 
 <script>
-import * as API_BASIC from '@/api/sys.basic.js'
+import headerLayout from '@/components/headerLayout/index' // 公共头部
 
 export default {
+  components: { headerLayout },
   data () {
     return {
-      newsList: [],
-      newsObj: {}
+      tableData: [
+        { id: '1', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
+        { id: '2', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
+        { id: '3', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
+        { id: '4', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
+        { id: '5', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
+        { id: '6', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
+        { id: '7', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
+        { id: '8', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
+        { id: '9', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' },
+        { id: '10', name: '千帆竞渡，群智合助力医药健康行业数字化', publishTime: '2021年4月30日', source: '中国网' }
+      ]
     }
   },
   mounted () {
-    this.getCustomerList()
   },
   methods: {
-    getCustomerList () {
-      API_BASIC.GetBasicList().then(res => {
-        this.newsList = res.data.news
-        this.newsList.forEach(element => {
-          this.newsObj = element
-        })
-      })
+    goDetail (row) {
+      this.$router.push({ path: '/newsDetail', query: { row: JSON.stringify(row) } })
+    },
+    goBack () {
+      this.$router.back(-1)
     }
   }
 }
 </script>
 
-<style lang="scss">
-    .news{
-        .block{
-            height:  calc(100% - 60px);
-            margin-top: 10px;
-            overflow: hidden;
-            background:rgba(0,14,66,0.5);
-            box-shadow:0px 0px 8px 4px rgba(10,18,35,0.5);
-            .el-carousel,.el-carousel__container{
-                width:calc(100% - 20px);
-                height: 100%;
-                margin: 0 10px;
-            }
-            img{
-                width:44%;
-                height: 80%;
-                box-shadow:0px 0px 8px 4px rgba(10,18,35,0.5);
-                border-radius:2px 0px 0px 2px;
-                float: left;
-            }
-            .content{
-                width: calc(56% - 10px);
-                margin-left: 10px;
-                float: left;
-                span{
-                    font-size:14px;
-                    font-family:PingFang-SC-Bold,PingFang-SC;
-                    font-weight:bold;
-                    color:rgba(255,255,255,1);
-                    line-height:18px;
-                }
-                p{
-                    font-size:12px;
-                    font-family:PingFang-SC-Regular,PingFang-SC;
-                    font-weight:400;
-                    color:rgba(255,255,255,1);
-                    line-height:18px;
-                    margin: 0;
-                }
-            }
-
+<style lang="scss" scoped>
+.companyNews {
+  .news-wrapper {
+    padding: .5rem 1rem;
+  }
+  .news-title {
+    width: 100%;
+    height: .54rem;
+    font-size: .24rem;
+    line-height: 1.5;
+    color: $color-primary;
+    border-bottom: .02rem solid $color-primary;
+    margin-bottom: .5rem;
+    span {
+      cursor: pointer;
+    }
+  }
+  .news-content {
+    ::v-deep .el-table {
+      font-size: .16rem;
+      color: #fff;
+      margin-bottom: .24rem;
+      background-color: rgba(47, 219, 243, 0.05);
+      &::before {
+        height: 0;
+      }
+      .el-table__header-wrapper {
+        display: none;
+      }
+      td {
+        border-bottom: none;
+      }
+      .el-table__row--striped td {
+        background-color: rgba(47, 219, 243, 0.15);
+      }
+      tr {
+        background-color: $color-bg;
+        cursor: pointer;
+        &.is-leaf {
+          border-bottom: none;
         }
+      }
+      .el-table__body tr:hover>td {
+        background-color: rgba(47, 219, 243, 0.15);
+      }
     }
+    ::v-deep .el-pagination.is-background {
+      .el-pager li:not(.disabled):hover {
+        color: $color-primary;
+      }
+      .el-pager li:not(.disabled).active {
+        background-color:$color-primary;
+        color: #fff;
+      }
+
+    }
+  }
+}
 </style>

src/views/system/index/components/deptNews.vue

 <template>
     <div class="deptNews">
         <div class="title">公司新闻</div>
-        <div class="content">
-          <dv-scroll-board :config="config" style="width:450px;height:220px" />
+        <div class="lookMore" @click="newsDetail">查看更多</div>
+        <div class="content heightCut44">
+          <dv-scroll-board :config="config" style="width:calc(100% - 0.01rem);height:calc(100% - 0.01rem)" />
         </div>
     </div>
 </template>
@@ -13,22 +14,11 @@ import * as API_BASIC from '@/api/sys.basic.js'
 export default {
   data () {
     return {
-      basicData: {},
-      basicObj: {},
-      hotwordsarr: [],
-      labelArr: [],
-      businessarr: [],
       config: {
         columnWidth: [350, 100],
         oddRowBGC: 'rgba(47,219,243,0.15)',
         evenRowBGC: 'rgba(47,219,243,0.05)',
         data: [
-          ['群智合成功交付实施*****项目', '2010/9/10'],
-          ['群智合成功交付实施*****项目', '2010/9/10'],
-          ['群智合成功交付实施*****项目', '2010/9/10'],
-          ['群智合成功交付实施*****项目', '2010/9/10'],
-          ['群智合成功交付实施*****项目', '2010/9/10'],
-          ['群智合成功交付实施*****项目', '2010/9/10'],
           ['群智合成功交付实施*****项目', '2010/9/10'],
           ['群智合成功交付实施*****项目', '2010/9/10'],
           ['群智合成功交付实施*****项目', '2010/9/10'],
@@ -40,20 +30,27 @@ export default {
     }
   },
   mounted () {
-    // this.getBasicList()
+    // this.getNewsList()
   },
   methods: {
     // 查询概况页面数据
-    getBasicList () {
+    getNewsList () {
       API_BASIC.GetBasicList().then(res => {
-        this.basicData = res.data
-        this.basicData.org.forEach(element => {
-          this.basicObj = element
-          this.labelArr = element.label.split('，')
-          this.hotwordsarr = element.hotwords.split('，')
-          this.businessarr = element.business.split('，')
+        const newsList = res.data.news
+        const _data = []
+        newsList.forEach(element => {
+          _data.push([element.introduce, element.createTime])
         })
+        this.config = {
+          columnWidth: [350, 100],
+          oddRowBGC: 'rgba(47,219,243,0.15)',
+          evenRowBGC: 'rgba(47,219,243,0.05)',
+          data: _data
+        }
       })
+    },
+    newsDetail () {
+      this.$router.push('/companyNews')
     }
   }
 }
@@ -61,8 +58,11 @@ export default {
 
 <style lang="scss" scoped>
     .deptNews{
+      position: relative;
       .content{
+        box-sizing: border-box;
         padding: .24rem;
+        width: 100%;
       }
 
     }

src/views/system/index/components/itemNationwide.vue

+<template>
+    <div class="itemNation">
+      <div class="title">全国</div>
+      <div class="content d-flex">
+        <div class="flex-1">
+          <pieChart :message="itemNationWide" idstr="itemNationWide" class="heightCut44"></pieChart>
+          <p v-if="type=='1'">共计客户 <strong>2655个</strong></p>
+          <p v-if="type=='2'">共计商机 <strong>18792个</strong></p>
+          <p v-if="type=='3'">共计项目 <strong>98231个</strong></p>
+        </div>
+        <template>
+          <div v-if="type=='1'" class="flex-1 sum-box">
+            <div class="d-flex flex-column">
+              <div class="text-box">
+                <label>本年度签署合同</label>
+                <span>3.98 亿</span>
+              </div>
+              <div class="text-box">
+                <label>相关产品</label>
+                <span>3009 个</span>
+              </div>
+              <div class="text-box">
+                <label>累计服务次数</label>
+                <span>3000 次</span>
+              </div>
+            </div>
+          </div>
+          <div v-if="type=='2'" class="flex-1 sum-box">
+            <div class="d-flex flex-column">
+              <div class="text-box">
+                <label>预计总收入</label>
+                <span>3098 亿</span>
+              </div>
+              <div class="text-box">
+                <label>预计总成本</label>
+                <span>300 亿</span>
+              </div>
+              <div class="text-box">
+                <label>参与售前</label>
+                <span>300 人</span>
+              </div>
+            </div>
+          </div>
+          <div v-if="type=='3'" class="flex-1 sum-box">
+            <div class="d-flex flex-column">
+              <div class="text-box">
+                <label>服务次数累计</label>
+                <span>3098 次</span>
+              </div>
+              <div class="text-box">
+                <label>当前参与技术人员</label>
+                <span>300 人</span>
+              </div>
+              <div class="text-box">
+                <label>当前参与销售人员</label>
+                <span>300 人</span>
+              </div>
+            </div>
+          </div>
+        </template>
+
+      </div>
+    </div>
+</template>
+
+<script>
+// import * as API_BASIC from '@/api/sys.basic.js'
+import pieChart from '@/components/echarts/pieChart' // 行业分布-饼图
+export default {
+  props: ['message', 'type'],
+  components: { pieChart },
+  data () {
+    return {
+      itemNationWide: {}
+    }
+  },
+  watch: {
+    message: {
+      handler () {
+        const vm = this
+        setTimeout(function () {
+          vm.getList()
+        }, 0)
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    // 查询概况页面数据
+    getList () {
+      if (this.type === 3) {
+        this.itemNationWide = {
+          legend: ['启动', '完结', '作废'],
+          data: [
+            { value: 35, name: '启动' },
+            { value: 100, name: '完结' },
+            { value: 234, name: '作废' }
+          ]
+        }
+      } else {
+        this.itemNationWide = {
+          legend: ['集成', '软件', '服务'],
+          data: [
+            { value: 335, name: '集成' },
+            { value: 310, name: '软件' },
+            { value: 234, name: '服务' }
+          ]
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.itemNation {
+  .content {
+    width: 100%;
+    height: calc(100% - .44rem);
+    box-sizing: border-box;
+    padding: .24rem;
+    p {
+      font-size: .16rem;
+      color: #fff;
+      text-align: center;
+    }
+    .sum-box {
+      border-left: 1px solid #30DDF4;
+      padding-top: .24rem;
+    }
+    .text-box {
+      text-align: center;
+      flex: 1;
+      font-family: PingFang-SC-Medium;
+      font-size: .16rem;
+      line-height: 2;
+      color: #FFFFFF;
+      span {
+        padding-left: .24rem;
+        font-family: ZhenyanGB-Regular;
+        font-size: .24rem;
+        color: #30DDF4;
+      }
+
+    }
+  }
+}
+</style>

src/views/system/index/components/knowledgeDialog.vue

 <template>
-    <el-dialog :visible.sync="visible" :close-on-click-modal="false" center  @close="close"
-               :modal-append-to-body=true append-to-body class="knowledgeDialog">
+    <el-dialog
+      :visible.sync="visible"
+      :close-on-click-modal="false"
+      center
+      @close="close"
+      :modal-append-to-body=true
+      append-to-body class="knowledgeDialog">
         <div class="leftBox">
             <div id="topo"></div>
         </div>
         <div class="rightBox">
+          <div class="search-box">
+           <el-select v-model="value" size="mini">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
             <div class="search">
               <el-autocomplete
                 class="inline-input"
@@ -12,12 +26,13 @@
                 size="mini"
                 clearable
                 :fetch-suggestions="querySearch"
-                placeholder="请输入项目名称"
+                placeholder="请输入"
                 :trigger-on-focus="false"
                 @select="handleSelectChild"
               ></el-autocomplete>
-                <div class="searchBtn">搜索</div>
+              <el-button class="searchBtn" type="text">搜索</el-button>
             </div>
+        </div>
             <h3>关系筛选</h3>
             <el-checkbox-group v-model="checked">
               <el-checkbox v-for="item in checkList" :key="item.value" :label="item.value">{{item.name}}</el-checkbox>
@@ -41,9 +56,11 @@ export default {
       knowledData: [],
       checked: [1],
       checkList: [
-        { name: '对应销售', value: 2 },
-        { name: '对应商机', value: 3 },
-        { name: '对应客户', value: 4 }
+        { name: '客户', value: 2 },
+        { name: '项目', value: 3 },
+        { name: '商机', value: 4 },
+        { name: '产品', value: 5 },
+        { name: '人员', value: 6 }
       ],
       value: '',
       topoData: {} // 接收到的topo数据
@@ -142,52 +159,54 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-    .knowledgeDialog{
-        .leftBox{
-            width: 75%;
-            height: 100%;
-            float: left;
-            #topo{
-                height: 100%;
-            }
-        }
-        .rightBox{
-            width: calc(25% - 4px);
-            height:calc(100% - 4px);
-            background: #000E42;
-            float: left;
-            margin-top: 2px;
-            position: relative;
-            h3{
-                width: calc(100% - 20px);
-                font-size:16px;
-                font-family:PingFang-SC-Bold,PingFang-SC;
-                font-weight:bold;
-                color:rgba(48,221,244,1);
-                padding: 10px;
-                margin-top: 20px;
-                border-bottom: 1px solid #30DDF4;
-            }
-            .inquire{
-                width: 90%;
-                height: 32px;
-                background:linear-gradient(180deg,rgba(48,221,244,1) 0%,rgba(48,221,244,1) 100%);
-                box-shadow:0px 4px 10px 0px rgba(0,0,0,0.5);
-                border-radius:2px;
-                border:1px solid rgba(119,226,255,0.15);
-                font-size:16px;
-                font-family:PingFang-SC-Bold,PingFang-SC;
-                font-weight:bold;
-                color:rgba(0,14,66,1);
-                line-height:32px;
-                cursor: pointer;
-                position: absolute;
-                bottom: 10px;
-                left: 5%;
-                text-align: center;
-            }
-        }
+  .knowledgeDialog{
+    .leftBox{
+      width: 75%;
+      height: 100%;
+      float: left;
+      #topo{
+        height: 100%;
+      }
+    }
+    .rightBox{
+      box-sizing: border-box;
+      width: calc(25% - 4px);
+      height:calc(100% - 4px);
+      background: #000E42;
+      float: left;
+      padding-top: .6rem;
+      position: relative;
+      h3{
+          width: calc(100% - .2rem);
+          font-size:.16rem;
+          font-family:PingFang-SC-Bold,PingFang-SC;
+          font-weight:bold;
+          color:rgba(48,221,244,1);
+          padding: .1rem;
+          margin: 0;
+          margin-bottom:.1rem;
+          border-bottom: 1px solid #30DDF4;
+      }
+      .inquire{
+          width: 90%;
+          height: .32rem;
+          background:linear-gradient(180deg,rgba(48,221,244,1) 0%,rgba(48,221,244,1) 100%);
+          box-shadow:0px 4px 10px 0px rgba(0,0,0,0.5);
+          border-radius:2px;
+          border:1px solid rgba(119,226,255,0.15);
+          font-size:.16rem;
+          font-family:PingFang-SC-Bold,PingFang-SC;
+          font-weight:bold;
+          color:rgba(0,14,66,1);
+          line-height:.32rem;
+          cursor: pointer;
+          position: absolute;
+          bottom: .1rem;
+          left: 5%;
+          text-align: center;
+      }
     }
+  }
 </style>
 <style lang="scss">
     .el-dialog{
@@ -218,34 +237,23 @@ export default {
             font-weight:bold;
         }
         .search{
-            width: calc(90% - 2px);
-            height:28px;
-            margin:60px 8% 0 2%;
-            border:1px solid rgba(119,226,255,1);
-            border-radius: 2px;
-            .el-autocomplete{
-                width: 70%;
-                float: left;
-                .el-input__inner{
-                  width: 100%;
-                    background:rgba(144,224,255,0.15);
-                    border-radius:2px;
-                    color: #FFFFFF;
-                    font-size:12px;
-                    font-family:PingFang-SC-Bold,PingFang-SC;
-                    font-weight:bold;
-                    border: 0 !important;
-                }
-            }
-            .searchBtn{
-                width: 30%;
-                height: 28px;
-                line-height: 28px;
-                background:linear-gradient(180deg,rgba(48,221,244,1) 0%,rgba(48,221,244,1) 100%);
-                box-shadow:0px 4px 10px 0px rgba(0,0,0,0.5);
-                text-align: center;
-                float: left;
+          font-size:12px;
+          font-family:PingFang-SC-Bold,PingFang-SC;
+          font-weight:bold;
+          width: 100%;
+          height:.28rem;
+          margin-top:.2rem;
+          border-bottom:1px solid rgba(119,226,255,1);
+          display: flex;
+          .el-autocomplete{
+            flex: 1;
+            .el-input__inner{
+              width: 100%;
+              background:transparent;
+              color: #FFFFFF;
+              border: 0 !important;
             }
+          }
         }
         .el-checkbox{
             float: left;

src/views/system/index/components/knowledgeGraph.vue

@@ -25,7 +25,8 @@
             </div>
         </div>
 
-        <div id="topology"></div>
+        <!-- <div id="topology"></div> -->
+        <graphChart :message="{}" idstr="graphChart" class="heightCut44"></graphChart>
         <div class="open" @click="openDialog"></div>
         <knowledgeDialog v-if="knowledgeDialogShow" ref="child"></knowledgeDialog>
     </div>
@@ -36,9 +37,10 @@ import vis from '@/assets/js/VisHelper.js'
 import knowledgeJSON from '@/assets/js/knowledgeJSON.js'
 import knowledgeDialog from './knowledgeDialog'
 import * as API_KNOWLED from '@/api/sys.knowled.js'
+import graphChart from '@/components/echarts/graphChart'
 
 export default {
-  components: { knowledgeDialog },
+  components: { knowledgeDialog, graphChart },
   data () {
     return {
       options: [
@@ -71,6 +73,7 @@ export default {
     }
   },
   mounted () {
+
   },
   methods: {
     // 根据name查id
@@ -128,16 +131,6 @@ export default {
       // }
       // vm.locationArr = arr
     },
-    initTopuData (data) {
-      localStorage.setItem('data', JSON.stringify(data))
-      vis.destroy()
-      vis.init('topology', data, this)
-      vis.cgraph(
-        (snode, dnode, S, B) => {},
-        false,
-        info => {}
-      )
-    },
     openDialog () {
       let data = ''
       if (this.state) {
@@ -167,16 +160,16 @@ export default {
         margin-left: .2rem;
       }
       #topology{
-        height: calc(100% - 80px);
+        height: calc(100% - 1.12rem);
       }
       .open{
-        width: 24px;
-        height: 24px;
+        width: .24rem;
+        height: .24rem;
         background: url("~@/assets/img/open.png");
         background-size: 100% 100%;
         position: absolute;
-        right: 10px;
-        bottom: 10px;
+        right: .1rem;
+        bottom: .1rem;
         cursor: pointer;
       }
     }

src/views/system/index/components/clientDistributed.vue → src/views/system/index/components/nationwide.vue

 <template>
-    <div class="clientDistributed">
+    <div class="nationwide">
       <div class="title">全国</div>
       <div class="content">
         <el-col span="12">
@@ -93,7 +93,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.clientDistributed {
+.nationwide {
   .content {
     padding: .24rem;
     .icon-box {

src/views/system/index/components/newsDetail.vue

+<template>
+  <d2-container class="newsDetail">
+    <headerLayout></headerLayout>
+    <div class="news-wrapper">
+      <div class="news-title d-flex jc-between">
+        <label>公司新闻</label>
+        <span @click="goBack">&lt; 返回</span>
+      </div>
+      <div class="news-content">
+        <h3>{{itemContent.name}}</h3>
+        <div class="d-flex jc-center mb-2">
+           <div>
+            <label>发布时间：</label>
+            {{itemContent.publishTime}}
+          </div>
+          <div class="pl">
+            <label>来源：</label>{{itemContent.source}}
+          </div>
+        </div>
+        <!-- <div v-html="content"></div> -->
+        <div>
+          “晓看红湿处，花重锦官城”。春天自古是筹谋与播种的季节，春生夏长秋收冬藏，在春意盎然的成都城里，一场关于信息化数字化的讨论为这个3月增添了更多的春色。
+          3月18日-19日，以“千帆竞渡·数字新起点”为主题的第九届医药健康行业信息化高峰论坛在成都保利公园皇冠假日酒店举行，来自医药健康行业的从业者、信息中心负责人、厂商代表等300余位行业精英共聚一堂，会间，大家围绕疫情后产业变局思维、数字新生态新空间、网络智慧连接运用、数据治理、设备智慧互联、研发全流程信息化等话题展开了激烈交流与探讨，群智合作为国内领先的政企数字化转型方案提供商应邀出席本次盛会。
+          <div class="text-center">
+            <el-image src=""></el-image>
+            <el-image src=""></el-image>
+          </div>
+          “晓看红湿处，花重锦官城”。春天自古是筹谋与播种的季节，春生夏长秋收冬藏，在春意盎然的成都城里，一场关于信息化数字化的讨论为这个3月增添了更多的春色。
+          3月18日-19日，以“千帆竞渡·数字新起点”为主题的第九届医药健康行业信息化高峰论坛在成都保利公园皇冠假日酒店举行，来自医药健康行业的从业者、信息中心负责人、厂商代表等300余位行业精英共聚一堂，会间，大家围绕疫情后产业变局思维、数字新生态新空间、网络智慧连接运用、数据治理、设备智慧互联、研发全流程信息化等话题展开了激烈交流与探讨，群智合作为国内领先的政企数字化转型方案提供商应邀出席本次盛会。
+        </div>
+      </div>
+    </div>
+  </d2-container>
+</template>
+
+<script>
+import headerLayout from '@/components/headerLayout/index' // 公共头部
+
+export default {
+  components: { headerLayout },
+  data () {
+    return {
+      itemContent: {},
+      content: ''
+    }
+  },
+  mounted () {
+    this.itemContent = JSON.parse(this.$route.query.row)
+    this.content = ''
+  },
+  methods: {
+    goBack () {
+      this.$router.back(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.newsDetail {
+  .news-wrapper {
+    padding: .5rem 1rem;
+  }
+  .news-title {
+    width: 100%;
+    height: .54rem;
+    font-size: .24rem;
+    line-height: 1.5;
+    color: $color-primary;
+    border-bottom: .02rem solid $color-primary;
+    margin-bottom: .5rem;
+    span {
+      cursor: pointer;
+    }
+  }
+  .news-content {
+    color: #fff;
+    font-size: .14rem;
+    width: 9.6rem;
+    margin: 0 auto;
+    h3 {
+      text-align: center;
+      font-size: .18rem;
+    }
+    .mb-2 {
+      margin-bottom: .2rem;
+    }
+    .pl {
+      padding-left: .5rem;
+    }
+    .el-image {
+      width: 2.4rem;
+      height: 1.8rem;
+      margin: .24rem;
+    }
+  }
+}
+</style>

src/views/system/index/page.vue

@@ -8,13 +8,18 @@
           <deptNews class="deptNews"></deptNews>
       </div>
       <div class="centerBlock">
-        <div style="position: absolute; left: .2rem; z-index: 1; top: 0;line-height: .4rem;">
-          <el-button @click="getData(1)">客户</el-button>
-          <el-button @click="getData(2)">商机</el-button>
-          <el-button @click="getData(3)">项目</el-button>
+        <div class="d-flex search-box">
+           <el-select v-model="type" size="mini" @change="getData">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
         </div>
         <mapChina :message="mapChina" idstr="mapChina" class="mapChina"></mapChina>
-        <clientDistributed class="clientDistributed"></clientDistributed>
+        <component :is="currentComp" :message="dataList" :type="type"/>
       </div>
       <div class="rightBlock">
           <knowledgeGraph class="knowledgeGraph"></knowledgeGraph>
@@ -30,26 +35,51 @@ import mapChina from './components/mainPageEcharts/mapChina' // 地图
 import deptIntroduction from './components/deptIntroduction'// 部门介绍
 import deptNews from './components/deptNews'// 部门介绍
 import deptOperation from './components/deptOperation'// 部门运营
-import clientDistributed from './components/clientDistributed'// 客户增长分布
+
 import knowledgeGraph from './components/knowledgeGraph'// 知识图谱
 import importantProject from './components/importantProject'// 重点项目
 import * as API_BASIC from '@/api/sys.basic.js'
 
+import nationwide from './components/nationwide' // 全国
+import itemNationwide from './components/itemNationwide'// 全国 客户 项目 商机
+
 export default {
-  components: { headerLayout, mapChina, deptIntroduction, deptNews, deptOperation, clientDistributed, knowledgeGraph, importantProject },
+  components: { headerLayout, mapChina, deptIntroduction, deptNews, deptOperation, nationwide, itemNationwide, knowledgeGraph, importantProject },
   data () {
     return {
+      currentComp: 'nationwide',
+      options: [
+        {
+          value: 0,
+          label: '全部'
+        },
+        {
+          value: 1,
+          label: '客户'
+        }, {
+          value: 2,
+          label: '商机'
+        }, {
+          value: 3,
+          label: '项目'
+        }
+      ],
       newData: [],
       mapChina: [],
-      type: 1
+      type: 0
     }
   },
   mounted () {
     this.GET_MapChina()
   },
   methods: {
-    getData (type) {
-      this.type = type
+    getData () {
+      this.dataList = { type: this.type }
+      if (this.type) {
+        this.currentComp = 'itemNationwide'
+      } else {
+        this.currentComp = 'nationwide'
+      }
       this.GET_MapChina()
     },
     GET_MapChina () {

vue.config.js

@@ -13,8 +13,8 @@ process.env.VUE_APP_VERSION = require('./package.json').version
 process.env.VUE_APP_BUILD_TIME = require('dayjs')().format('YYYY-M-D HH:mm:ss')
 
 // 基础路径 注意发布之前要先修改这里
-// const publicPath = process.env.VUE_APP_PUBLIC_PATH || '/'
-const publicPath = '/front/'
+const publicPath = process.env.VUE_APP_PUBLIC_PATH || '/'
+// const publicPath = '/front/'
 
 // 设置不参与构建的库
 const externals = {}