代码优化

src/assets/js/flexible.js

@@ -1,42 +1,47 @@
+// 首先是一个立即执行函数，执行时传入的参数是window和document
 (function flexible(window, document) {
-  var docEl = document.documentElement;
-  var dpr = window.devicePixelRatio || 1;
+  // 返回文档的root元素
+  var docEl = document.documentElement; 
+  // 获取设备的dpr，即当前设置下物理像素与虚拟像素的比值
+  var dpr = window.devicePixelRatio || 1; 
 
-  // adjust body font size
+  // 设置默认字体大小，默认的字体大小继承自body
   function setBodyFontSize() {
     if (document.body) {
-      document.body.style.fontSize = 12 * dpr + "px";
+      // 调整body标签的fontSize，fontSize = (12 * dpr) + 'px'
+      document.body.style.fontSize = 12 * dpr + 'px';
     } else {
-      document.addEventListener("DOMContentLoaded", setBodyFontSize);
+      document.addEventListener('DOMContentLoaded', setBodyFontSize);
     }
   }
   setBodyFontSize();
 
-  // set 1rem = viewWidth / 10
+  // set 1rem = viewWidth / 24
   function setRemUnit() {
+    // 设置root元素的fontSize = 其clientWidth / 24 + 'px'
     var rem = docEl.clientWidth / 24;
-    docEl.style.fontSize = rem + "px";
+    docEl.style.fontSize = rem + 'px';
   }
 
   setRemUnit();
 
-  // reset rem unit on page resize
-  window.addEventListener("resize", setRemUnit);
-  window.addEventListener("pageshow", function(e) {
+  // 当页面展示或重新设置大小的时候，触发重新
+  window.addEventListener('resize', setRemUnit);
+  window.addEventListener('pageshow', function(e) {
     if (e.persisted) {
       setRemUnit();
     }
   });
 
-  // detect 0.5px supports
+  // 检测0.5px的支持，支持则root元素的class中有hairlines
   if (dpr >= 2) {
-    var fakeBody = document.createElement("body");
-    var testElement = document.createElement("div");
-    testElement.style.border = ".5px solid transparent";
+    var fakeBody = document.createElement('body');
+    var testElement = document.createElement('div');
+    testElement.style.border = '.5px solid transparent';
     fakeBody.appendChild(testElement);
     docEl.appendChild(fakeBody);
     if (testElement.offsetHeight === 1) {
-      docEl.classList.add("hairlines");
+      docEl.classList.add('hairlines');
     }
     docEl.removeChild(fakeBody);
   }

src/components/companySummary/business.vue

@@ -0,0 +1,184 @@
+<!--
+ 描述: 业务范围
+ 作者: Jack Chen
+ 日期: 2020-05-09
+-->
+
+<template>
+  <div class="business-container"> 
+    <div class="chart" id="chart_left1"></div>   
+  </div>
+</template>
+
+<script>
+export default {
+  name: "business",
+  data() {
+    return {
+      
+    }
+  },
+  mounted() {
+    this.getEchartLeft1();
+  },
+  methods: {
+    getEchartLeft1() {
+      // 实例化对象
+      let myChart = echarts.init(document.getElementById('chart_left1'));
+      let charts = { // 按顺序排列从大到小
+        cityList: ['金融行业', '电子政务', '文创版权', '教育行业', '智慧停车', '医疗互联', '物流行业'],
+        cityData: [1500, 1200, 900, 600, 400, 300, 100]
+      }
+
+      let top10CityList = charts.cityList;
+      let top10CityData = charts.cityData;
+      let color = ['rgba(14,109,236', 'rgba(255,91,6', 'rgba(100,255,249', 'rgba(248,195,248', 'rgba(110,234,19', 'rgba(255,168,17', 'rgba(218,111,227'];
+
+      let lineY = [];
+      for (let i = 0; i < charts.cityList.length; i++) {
+        let x = i
+        if (x > color.length - 1) {
+          x = color.length - 1
+        }
+        let data = {
+          name: charts.cityList[i],
+          color: color[x] + ')',
+          value: top10CityData[i],
+          itemStyle: {
+            normal: {
+              show: true,
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                offset: 0,
+                color: color[x] + ', 0.3)'
+              }, {
+                offset: 1,
+                color: color[x] + ', 1)'
+              }], false),
+              barBorderRadius: 10
+            },
+            emphasis: {
+              shadowBlur: 15,
+              shadowColor: 'rgba(0, 0, 0, 0.1)'
+            }
+          }
+        }
+        lineY.push(data)
+      }  
+
+      // 指定配置和数据
+      let option = {
+        color: color,
+        tooltip: {
+          trigger: 'item',
+        },
+        grid: {
+          borderWidth: 0,
+          top: '5%',
+          left: '2%',
+          right: '2%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          }
+        }],
+        yAxis: [{
+          type: 'category',
+          inverse: true,
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            inside: false,
+            textStyle: {
+              color: '#b3ccf8',
+              fontSize: 13
+            },
+          },
+          data: top10CityList
+        }, {
+          type: 'category',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            inside: false,
+            textStyle: {
+              color: '#b3ccf8',
+              fontSize: 13
+            },
+            formatter: (val) => {
+              return `${val}`
+            }
+          },
+          splitArea: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          data: top10CityData.reverse()
+        }],
+        series: [{
+          name: '',
+          type: 'bar',
+          zlevel: 2,
+          barWidth: '10px',
+          data: lineY,
+          animationDuration: 1500,
+          label: {
+            normal: {
+              color: '#b3ccf8',
+              show: false,
+              position: [0, '-15px'],
+              textStyle: {
+                fontSize: 13
+              },
+              formatter: (a, b) => {
+                return a.name;
+              }
+            }
+          }
+        }]
+      };
+
+      // 把配置给实例对象
+      myChart.setOption(option, true);
+      window.addEventListener('resize', () => {
+        myChart.resize();
+      });
+    },
+  },
+  beforeDestroy() {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.business-container {
+  .chart {
+    height: 3rem;
+  }
+}
+</style>

src/components/companySummary/distribution.vue

@@ -0,0 +1,210 @@
+<!--
+ 描述: 客户分布
+ 作者: Jack Chen
+ 日期: 2020-05-09
+-->
+
+<template>
+  <div class="distribution-container"> 
+    <div class="chart" id="chart_right2"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "distribution",
+  data() {
+    return {
+      
+    }
+  },
+  mounted() {
+    this.getEchartRight2();
+  },
+  methods: {
+    getEchartRight2() {
+      let myChart = echarts.init(document.getElementById('chart_right2'));
+      let option = {
+        color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05', '#4465fc'],
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b} : {c} ({d}%)'
+        },
+        polar: {},
+        angleAxis: {
+          interval: 1,
+          type: 'category',
+          data: [],
+          z: 10,
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#0B4A6B',
+              width: 5,
+              type: 'solid'
+            },
+          },
+          axisLabel: {
+            interval: 0,
+            show: true,
+            color: '#0B4A6B',
+            margin: 8,
+            fontSize: 16
+          },
+        },
+        radiusAxis: {
+          min: 40,
+          max: 120,
+          interval: 20,
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#0B3E5E',
+              width: 1,
+              type: 'solid'
+            },
+          },
+          axisLabel: {
+            formatter: '{value} %',
+            show: false,
+            padding: [0, 0, 20, 0],
+            color: '#0B3E5E',
+            fontSize: 16
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#0B3E5E',
+              width: 2,
+              type: "solid"
+            }
+          }
+        },
+        calculable: true,
+        series: [{
+          type: 'pie',
+          radius: ['6%', '10%'],
+          hoverAnimation: false,
+          labelLine: {
+            normal: {
+              show: false,
+              length: 30,
+              length2: 50
+            },
+            emphasis: {
+              show: false
+            }
+          },
+          tooltip: {
+            show: false
+          },
+          data: [{
+            name: '',
+            value: 0,
+            itemStyle: {
+              normal: {
+                color: '#0B4A6B'
+              }
+            }
+          }]
+        }, {
+          type: 'pie',
+          radius: ['90%', '95%'],
+          hoverAnimation: false,
+          labelLine: {
+            normal: {
+              show: false,
+              length: 30,
+              length2: 50
+            },
+            emphasis: {
+              show: false
+            }
+          },
+          tooltip: {
+            show: false
+          },
+          data: [{
+            name: '',
+            value: 0,
+            itemStyle: {
+              normal: {
+                color: '#0B4A6B'
+              }
+            }
+          }]
+        },{
+          stack: 'a',
+          type: 'pie',
+          radius: ['20%', '80%'],
+          roseType: 'area',
+          zlevel: 10,
+          label: {
+            normal: {
+              show: true,
+              formatter: '{b}',
+              textStyle: {
+                fontSize: 12,
+              },
+              position: 'outside'
+            },
+            emphasis: {
+              show: false
+            }
+          },
+          labelLine: {
+            normal: {
+              show: true,
+              length: 15,
+              length2: 50,
+              lineStyle: {
+                type: 'dotted' 
+              } 
+            },
+            emphasis: {
+              show: true
+            }
+          },
+          data: [{
+            value: 35,
+            name: '湖南'
+          },{
+            value: 28,
+            name: '河北'
+          },{
+            value: 23,
+            name: '广东'
+          },{
+            value: 18,
+            name: '四川'
+          },{
+            value: 13,
+            name: '浙江'
+          },{
+            value: 8,
+            name: '江苏'
+          },{
+            value: 5,
+            name: '湖北'
+          }]
+        }]
+      }
+
+      myChart.setOption(option, true);
+      window.addEventListener('resize', () => {
+        myChart.resize();
+      });
+    },
+  },
+  beforeDestroy() {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.distribution-container {
+  .chart {
+    height: 3rem;
+  }
+}
+</style>

src/components/companySummary/history.vue

@@ -0,0 +1,171 @@
+<!--
+ 描述: 发展历程
+ 作者: Jack Chen
+ 日期: 2020-05-09
+-->
+
+<template>
+  <div class="history-container">
+    <div class="tabs"> 
+      <ul class="tab-tilte">
+        <li v-for="(itemTit, index) in tabTitle" @mouseover="handleMouseOver(index)" @mouseout="handleMouseOut(index)" :class="{active: cur == index}">
+          {{ itemTit }}
+        </li>
+      </ul>
+      <div class="indicatorDots">
+        <span :class="{active: cur == i}" v-for="(v, i) in tabTitle" :key="i"></span>
+      </div>
+      <div class="tab-content">
+        <div v-for="(itemCon, index) in tabCon" v-show="cur == index">
+          <div v-for="(v, i) in itemCon" :key="i" class="content">
+            {{ v }}
+          </div>
+        </div>
+      </div>
+    </div>   
+  </div>
+</template>
+
+<script>
+export default {
+  name: "history",
+  data() {
+    return {
+      timer: null,
+      tabTitle: ['2015', '2016', '2017', '2018', '2019', '2020'],
+      tabCon: [
+        [
+          '2015.10，公司成立，正式布局区块链、大数据方向',
+          '2015.11，与国家超算吕梁云计算中心签订战略合作协议',
+          '2015.12，建设高性能计算服务平台，基于区块链技术打造文创基础云平台'
+        ],
+        [
+          '2016.03，公司提供的高性能计算服务得到中科院认可，就此达成合作',
+          '2016.07，与国家超算广州中心签订战略合作协议，启动区块链底层公链开发技术论证',
+          '2016.10，启动区块链底层公链开发，开拓数字资产管理业务',
+          '2016.11，与国家超级计算长沙中心签订战略合作协议'
+        ],
+        [
+          '2017.03，与国家级长沙经开区共建博士创新创业园',
+          '2017.07，开发GBI区块链资讯信息平台',
+          '2017.09，打造区块链信息服务平台，开拓区块链安全业务',
+          '2017.12，区块链底层公链测试链上线运行，启动链上DAPP开发'
+        ],
+        [
+          '2018.05，与长沙经开区共建区块链产业园，区块链底层公链上线运行',
+          '2018.08，公链分布式存储网络正式运行',
+          '2018.10，区块链安全技术检测中心正式运行，公链多侧链技术落地，链上应用上线',
+          '2018.12，被评为中国区块链百强企业'
+        ],
+        [
+          '2019.03，上线分布式存储系统UDFS，更新优壹号V2.0.0版，完成Ulord V2.0版白皮书全部规划',
+          '2019.07，文创版权公共服务平台优版权正式上线',
+          '2019.08，承担国家网信办区块链相关课题研究',
+        ],
+        [
+          '2020.03，完成分布式计算框架和贡献证明算法的设计和开发',
+          '2020.05，完成分布式计算资源动态调度和管理开发',
+          '2020.10，推出链云计算生态，完成计算平台和API接口开发，完成优壹号对计算Dapp支持'
+        ]
+      ],
+      cur: 0, //默认选中第一个tab
+    }
+  },
+  mounted() {
+    this.getTimer();
+  },
+  methods: {
+    getTimer() {
+      this.timer = setInterval(() => {
+        this.cur++;
+        if (this.cur == this.tabTitle.length) {
+          this.cur = 0;
+        }
+      }, 2000)
+    },
+    handleMouseOver(index) {
+      this.cur = index;
+      clearInterval(this.timer);
+    },
+    handleMouseOut(index) {
+      this.getTimer();
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.history-container {
+  margin: 0 0.125rem;
+  .tabs {
+    display: flex;
+    .tab-tilte {
+      li {
+        color: #fff;
+        background-color: rgba(36, 196, 255, 0.5);
+        text-align: center;
+        cursor: pointer;
+        width: 1.0rem;
+        height: 0.35rem;
+        line-height: 0.35rem;
+        margin-bottom: 0.175rem;
+        -webkit-border-radius: 5px;
+        -ms-border-radius: 5px;
+        -o-border-radius: 5px;
+        -moz-border-radius: 5px;
+        border-radius: 5px;
+        &.active{
+          background: linear-gradient(to right, #1b81bc, 20%, #24c4ff);
+          color: #fff;
+        }
+      }
+    }
+    .indicatorDots {
+      background-color: rgba(36, 196, 255, 0.5);
+      width: 1px;
+      height: 2.8rem;
+      margin: 0.0625rem 0 0 0.375rem;
+      span {
+        display: block;
+        height: 0.525rem;
+        margin-left: -0.0875rem;
+        &:after {
+          content: '';
+          display: block;
+          width: 0.125rem;
+          height: 0.125rem;
+          background: #ddd;
+          -webkit-border-radius: 50%;
+          -ms-border-radius: 50%;
+          -o-border-radius: 50%;
+          -moz-border-radius: 50%;
+          border-radius: 50%;
+          border: 2px solid #1b81bc;
+        }
+        &.active {
+          &:after {
+            background: #24c4ff;
+            -webkit-box-shadow: 0 0 0.125rem #1b81bc;
+            box-shadow: 0 0 0.125rem #1b81bc;
+          }
+        }
+      }
+    }
+    .tab-content {
+      display: flex;
+      align-items: center;
+      div {
+        margin-left: 0.1875rem;
+        color: #fff;
+        .content {
+          line-height: 0.275rem;
+          padding: 0.125rem 0;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/companySummary/income.vue

@@ -0,0 +1,185 @@
+<!--
+ 描述: 营业收入
+ 作者: Jack Chen
+ 日期: 2020-05-09
+-->
+
+<template>
+  <div class="income-container"> 
+    <div class="chart" id="chart_left3"></div>  
+  </div>
+</template>
+
+<script>
+export default {
+  name: "income",
+  data() {
+    return {
+      
+    }
+  },
+  mounted() {
+    this.getEchartLeft3();
+  },
+  methods: {
+    getEchartLeft3() {
+      let myChart = echarts.init(document.getElementById('chart_left3'));
+      let data = {
+        city: ['2015', '2016', '2017', '2018', '2019', '2020'],
+        num: ['555', '896', '1935', '2922', '4508', '5000']
+      }
+
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0,
+                  color: 'rgba(255,255,255,0)' // 0% 处的颜色
+                }, {
+                  offset: 0.5,
+                  color: 'rgba(255,255,255,1)' // 100% 处的颜色
+                }, {
+                  offset: 1,
+                  color: 'rgba(255,255,255,0)' // 100% 处的颜色
+                }],
+                global: false // 缺省为 false
+              }
+            },
+          },
+          formatter: (value) => {
+            return value[0].name + '年营业收入：<br>' + value[0].value + '万元'; 
+          }
+        },
+        grid: {
+          top: '5%',
+          left: '2%',
+          right: '2%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          boundaryGap: true,
+          axisLine: { //坐标轴轴线相关设置。数学上的x轴
+            show: false,
+            lineStyle: {
+              color: '#092b5d'
+            },
+          },
+          axisLabel: { //坐标轴刻度标签的相关设置
+            textStyle: {
+              color: '#24c4ff',
+              margin: 15,
+            },
+            formatter: (data) => {
+                return data.substr(2) + '年';
+            }
+          },
+          axisTick: {
+            show: false,
+          },
+          data: data.city
+        }],
+        yAxis: [{
+          min: 0,
+          max: 6000,
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: '#092b5d'
+            },
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: "#092b5d"
+            }
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#24c4ff',
+            }
+          },
+          axisTick: {
+            show: false,
+          },
+        }],
+        series: [{
+          name: '',
+          type: 'line',
+          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+          showAllSymbol: true,
+          symbolSize: 8,
+          lineStyle: {
+            normal: {
+              color: '#7c80f4', // 线条颜色
+            },
+            borderColor: 'rgba(0,0,0,.4)',
+          },
+          itemStyle: {
+            color: "rgba(14,30,73,1)",
+            borderColor: "#646ace",
+            borderWidth: 2
+          },
+          label: {
+            normal: {
+              show: true,
+              position: 'top',
+              formatter: [
+                ' {a|{c}}',
+              ].join(','),
+              rich: {
+                a: {
+                  color: '#fff',
+                  align: 'center',
+                },
+              }
+            }
+          },
+          smooth: true,
+          areaStyle: { //区域填充样式
+            normal: {
+              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: "rgba(124, 128, 244,.3)"
+              },{
+                offset: 1,
+                color: "rgba(124, 128, 244, 0)"
+              }], false),
+              shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
+              shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+            }
+          },
+          data: data.num
+        }]
+      }
+
+      myChart.setOption(option, true);
+      window.addEventListener('resize', () => {
+        myChart.resize();
+      })
+    },
+  },
+  beforeDestroy() {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.income-container {
+  .chart {
+    height: 3rem;
+  }
+}
+</style>

src/components/companySummary/talent.vue

@@ -0,0 +1,146 @@
+<!--
+ 描述: 人才队伍
+ 作者: Jack Chen
+ 日期: 2020-05-09
+-->
+
+<template>
+  <div class="talent-container"> 
+    <div class="chart" id="chart_left2"></div>   
+  </div>
+</template>
+
+<script>
+export default {
+  name: "talent",
+  data() {
+    return {
+      
+    }
+  },
+  mounted() {
+    this.getEchartLeft2();
+  },
+  methods: {
+    getEchartLeft2() {
+      let myChart = echarts.init(document.getElementById('chart_left2'));
+      let scaleData = [{
+        name: '博士',
+        value: 5
+      },{
+        name: '硕士',
+        value: 10
+      },{
+        name: '本科',
+        value: 10
+      },{
+        name: '专科',
+        value: 10
+      },{
+        name: '国防科大',
+        value: 5
+      },{
+        name: '大厂专家',
+        value: 5
+      }];
+      let rich = {
+        white: {
+          color: '#ddd',
+          align: 'center',
+          padding: [3, 0]
+        }
+      };
+      let placeHolderStyle = {
+        normal: {
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          },
+          color: 'rgba(0, 0, 0, 0)',
+          borderColor: 'rgba(0, 0, 0, 0)',
+          borderWidth: 0
+        }
+      };
+      let data = [];
+      let color=['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+      for (let i = 0; i < scaleData.length; i++) {
+        data.push({
+          value: scaleData[i].value,
+          name: scaleData[i].name,
+          itemStyle: {
+            normal: {
+              borderWidth: 6,
+              shadowBlur: 10,
+              borderColor: color[i],
+              shadowColor: color[i]
+            }
+          }
+        }, {
+          value: 2,
+          name: '',
+          itemStyle: placeHolderStyle
+        });
+      }
+
+      let option = {
+        series: [{
+          name: '',
+          type: 'pie',
+          clockWise: false,
+          radius: ['66%', '68%'],
+          center: ['50%', '50%'],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: true,
+                position: 'outside',
+                color: '#ddd',
+                formatter: (params) => {
+                  let percent = 0;
+                  let total = 0;
+                  for (let i = 0; i < scaleData.length; i++) {
+                    total += scaleData[i].value;
+                  }
+                  percent = ((params.value / total) * 100).toFixed(0);
+                  if (params.name !== '') {
+                    return params.name + '\n{white|' + '占比' + percent + '%}';
+                  } else {
+                    return '';
+                  }
+                },
+                rich: rich
+              },
+              labelLine: {
+                length: 10,
+                length2: 30,
+                show: true,
+                color: '#00ffff'
+              }
+            }
+          },
+          data: data
+        }]
+      }
+
+      myChart.setOption(option, true);
+      window.addEventListener('resize', () => {
+        myChart.resize();
+      });
+    },
+  },
+  beforeDestroy() {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.talent-container {
+  .chart {
+    height: 3rem;
+  }
+}
+</style>

src/components/companySummary/wordCloud.vue

@@ -0,0 +1,191 @@
+<!--
+ 描述: 产品热词
+ 作者: Jack Chen
+ 日期: 2020-05-09
+-->
+
+<template>
+  <div class="word-container"> 
+    <div class="chart" id="chart_right1"></div>
+  </div>
+</template>
+
+<script>
+import '@/assets/js/echarts-wordcloud.min'
+
+export default {
+  name: "wordCloud",
+  data() {
+    return {
+      timer: null
+    }
+  },
+  mounted() {
+    this.getEchartRight1();
+    this.timer = setInterval(() => {
+      this.getEchartRight1();
+    }, 5000)
+  },
+  methods: {
+    getEchartRight1() {
+      let myChart = echarts.init(document.getElementById('chart_right1'));
+      let option = {
+        // tooltip: {
+        //   show: false
+        // },
+        series: [{
+          type: 'wordCloud',
+          gridSize: 1,
+          sizeRange: [12, 50],
+          rotationRange: [-90, 90],
+          rotationStep: 45,
+          shape: 'diamond',
+          width: '90%',
+          textPadding: 0,
+          autoSize: {
+            enable: true,
+            minSize: 6
+          },
+          textStyle: {
+            normal: {
+              textBorderColor: 'rgba(255,255,255,0.3)',
+              textBorderWidth: 1,
+              color: () => {
+                return 'rgb(' + [
+                  Math.round(Math.random() * 160),
+                  Math.round(Math.random() * 160),
+                  Math.round(Math.random() * 160)
+                ].join(',') + ')';
+              }
+            },
+            emphasis: {
+              fontSize: 20,
+              // shadowBlur: 10,
+              // shadowColor: 'rgba(255,255,255, .1)'
+            }
+          },
+          data: [{
+            name: '区块链',
+            value: 810
+          }, {
+            name: '云计算',
+            value: 520
+          },{
+            name: "人工智能",
+            value: 928
+          },{
+            name: "大数据",
+            value: 906
+          },{
+            name: "工业互联网",
+            value: 825
+          },{
+            name: "医疗",
+            value: 514
+          },{
+            name: "质量溯源",
+            value: 486
+          },{
+            name: "政务",
+            value: 53
+          },{
+            name: "密码学",
+            value: 927
+          },{
+            name: "金融行业",
+            value: 1308
+          },{
+            name: "供应链",
+            value: 693
+          },{
+            name: "公有链",
+            value: 611
+          },{
+            name: "私有链",
+            value: 512
+          },{
+            name: "联盟链",
+            value: 382
+          },{
+            name: "数据共享",
+            value: 312
+          },{
+            name: "文创版权",
+            value: 187
+          },{
+            name: "天河链",
+            value: 163
+          },{
+            name: "数据存证",
+            value: 104
+          },{
+            name: "UDFS存储",
+            value: 3
+          },{
+            name: "在线教育",
+            value: 31
+          },{
+            name: "关联分析",
+            value: 941
+          },{
+            name: "智慧停车",
+            value: 585
+          },{
+            name: "链云生态",
+            value: 473
+          },{
+            name: "应用层",
+            value: 358
+          },{
+            name: "网络层",
+            value: 246
+          },{
+            name: "数据层",
+            value: 207
+          },{
+            name: "基础层",
+            value: 194
+          },{
+            name: "智能合约",
+            value: 104
+          },{
+            name: "去中心化",
+            value: 87
+          },{
+            name: "数字货币",
+            value: 415
+          },{
+            name: "酷屏",
+            value: 253
+          },{
+            name: "可视化",
+            value: 211
+          },{
+            name: "P2P",
+            value: 116
+          },{
+            name: "数据挖掘",
+            value: 1309
+          }]
+        }]
+      }
+
+      myChart.setOption(option, true);
+      window.addEventListener('resize', () => {
+        myChart.resize();
+      });
+    },
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.word-container {
+  .chart {
+    height: 3rem;
+  }
+}
+</style>

src/components/index.js

@@ -30,6 +30,13 @@ import gauge from './gauge' // 仪表盘
 import waterPolo from './waterPolo' // 水球图
 import circleNesting from './circleNesting' // 圆环套圆环
 
+import business from './companySummary/business' // 业务范围
+import talent from './companySummary/talent' // 人才队伍
+import income from './companySummary/income' // 营业收入
+import wordCloud from './companySummary/wordCloud' // 产品热词
+import distribution from './companySummary/distribution' // 客户分布
+import history from './companySummary/history' // 发展历程
+
 const components = {
   bgAnimation,
   modal,
@@ -56,6 +63,13 @@ const components = {
   gauge,
   waterPolo,
   circleNesting,
+
+  business,
+  talent,
+  income,
+  wordCloud,
+  distribution,
+  history,
   
 };
 

src/components/modal/index.vue

@@ -33,8 +33,8 @@
 export default {
   name: 'Modal',
   props: {
-    // midal标题
-    title:{
+    // modal标题
+    title: {
       type: String,
       default: '提示'
     },
@@ -50,22 +50,23 @@ export default {
     },
     // 是否显示取消按钮
     showCancle: {
-        type: Boolean,
-        default: true
+      type: Boolean,
+      default: true
     },
     // 确认按钮文字
     confirmText: {
-        type: String,
-        default: '确认'
+      type: String,
+      default: '确认'
     },
     // 取消按钮文字
     cancleText: {
-        type: String,
-        default: '取消'
+      type: String,
+      default: '取消'
     }
   },
-  watch:{
+  watch: {
     visible (curVal) {
+      // 监听visible值的变化
       console.log(curVal)
     }
   },

src/views/Brand.vue

@@ -1,7 +1,7 @@
 <!--
  描述: 公司品牌介绍
  作者: Jack Chen
- 日期: 2020-05-07
+ 日期: 2020-05-10
 -->
 
 <template>
@@ -25,19 +25,19 @@
 
       <section class="mainbox">
         <div class="item left">
-          <div class="panel bar">
+          <div class="panel">
             <h2>业务范围</h2>
-            <div class="chart" id="chart_left1"></div>
+            <business />
             <div class="panel-footer"></div>
           </div>
-          <div class="panel line">
+          <div class="panel">
             <h2>人才队伍</h2>
-            <div class="chart" id="chart_left2"></div>
+            <talent />
             <div class="panel-footer"></div>
           </div>
-          <div class="panel pie">
-            <h2>客户分布</h2>
-            <div class="chart" id="chart_left3"></div>
+          <div class="panel">
+            <h2>营收状况</h2>
+            <income />
             <div class="panel-footer"></div>
           </div>
         </div>
@@ -74,19 +74,19 @@
         </div>
 
         <div class="item right">
-          <div class="panel bar1">
+          <div class="panel">
             <h2>产品热词</h2>
-            <div class="chart" id="chart_right1"></div>
+            <wordCloud />
             <div class="panel-footer"></div>
           </div>
-          <div class="panel line1">
-            <h2>营收状况</h2>
-            <div class="chart" id="chart_right2"></div>
+          <div class="panel">
+            <h2>客户分布</h2>
+            <distribution />
             <div class="panel-footer"></div>
           </div>
-          <div class="panel pie1">
-            <h2>产品体系</h2>
-            <div class="chart" id="chart_right3"></div>
+          <div class="panel">
+            <h2>发展历程</h2>
+            <history />
             <div class="panel-footer"></div>
           </div>
         </div>
@@ -101,7 +101,6 @@
 import '@/assets/js/flexible'
 import '@/assets/js/china'
 import countTo from 'vue-count-to'
-import '@/assets/js/echarts-wordcloud.min'
 
 export default {
   name: 'Brand',
@@ -150,14 +149,9 @@ export default {
     this.timer = setInterval(() => {
       this.getWeather();
     }, 1000 * 60 * 60)
+
     this.nowTimes();
     this.getEchart();
-    this.getEchartLeft1();
-    this.getEchartLeft2();
-    this.getEchartRight1();
-    this.timer = setInterval(() => {
-      this.getEchartRight1();
-    }, 3000)
   },
   methods: {
     timeFormate(timeStamp) { //显示当前时间
@@ -489,422 +483,9 @@ export default {
 
       myChart.setOption(option, true);
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    },
-    // 左1柱状图
-    getEchartLeft1() {
-      // 实例化对象
-      let myChart = echarts.init(document.getElementById('chart_left1'));
-      let charts = { // 按顺序排列从大到小
-        cityList: ['金融行业', '电子政务', '文创版权', '教育行业', '智慧停车', '医疗互联', '物流行业'],
-        cityData: [1500, 1200, 900, 600, 400, 300, 100]
-      }
-
-      let top10CityList = charts.cityList;
-      let top10CityData = charts.cityData;
-      let color = ['rgba(14,109,236', 'rgba(255,91,6', 'rgba(100,255,249', 'rgba(248,195,248', 'rgba(110,234,19', 'rgba(255,168,17', 'rgba(218,111,227'];
-
-      let lineY = [];
-      for (let i = 0; i < charts.cityList.length; i++) {
-        let x = i
-        if (x > color.length - 1) {
-          x = color.length - 1
-        }
-        let data = {
-          name: charts.cityList[i],
-          color: color[x] + ')',
-          value: top10CityData[i],
-          itemStyle: {
-            normal: {
-              show: true,
-              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-                offset: 0,
-                color: color[x] + ', 0.3)'
-              }, {
-                offset: 1,
-                color: color[x] + ', 1)'
-              }], false),
-              barBorderRadius: 10
-            },
-            emphasis: {
-              shadowBlur: 15,
-              shadowColor: 'rgba(0, 0, 0, 0.1)'
-            }
-          }
-        }
-        lineY.push(data)
-      }  
-
-      // 指定配置和数据
-      let option = {
-        color: color,
-        tooltip: {
-          trigger: 'item',
-        },
-        grid: {
-          borderWidth: 0,
-          top: '5%',
-          left: '2%',
-          right: '2%',
-          bottom: '0%',
-          containLabel: true
-        },
-        xAxis: [{
-          type: 'value',
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: false
-          },
-          splitLine: {
-            show: false
-          },
-          axisLabel: {
-            show: false
-          }
-        }],
-        yAxis: [{
-          type: 'category',
-          inverse: true,
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: false
-          },
-          axisLabel: {
-            show: false,
-            inside: false
-          },
-          data: top10CityList
-        }, {
-          type: 'category',
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            show: true,
-            inside: false,
-            textStyle: {
-              color: '#b3ccf8',
-              fontSize: 13
-            },
-            formatter: (val) => {
-              return `${val}`
-            }
-          },
-          splitArea: {
-            show: false
-          },
-          splitLine: {
-            show: false
-          },
-          data: top10CityData.reverse()
-        }],
-        series: [{
-          name: '',
-          type: 'bar',
-          zlevel: 2,
-          barWidth: '10px',
-          data: lineY,
-          animationDuration: 1500,
-          label: {
-            normal: {
-              color: '#b3ccf8',
-              show: true,
-              position: [0, '-15px'],
-              textStyle: {
-                fontSize: 13
-              },
-              formatter: (a, b) => {
-                return a.name;
-              }
-            }
-          }
-        }]
-      };
-
-      // 把配置给实例对象
-      myChart.setOption(option, true);
       window.addEventListener("resize", () => {
         myChart.resize();
       });
-    },
-    // 左2饼图
-    getEchartLeft2() {
-      let myChart = echarts.init(document.getElementById('chart_left2'));
-      let scaleData = [{
-        name: '博士',
-        value: 5
-      },{
-        name: '硕士',
-        value: 10
-      },{
-        name: '本科',
-        value: 10
-      },{
-        name: '专科',
-        value: 10
-      },{
-        name: '国防科大',
-        value: 5
-      },{
-        name: '大厂专家',
-        value: 5
-      }];
-      let rich = {
-        white: {
-          color: '#ddd',
-          align: 'center',
-          padding: [3, 0]
-        }
-      };
-      let placeHolderStyle = {
-        normal: {
-          label: {
-            show: false
-          },
-          labelLine: {
-            show: false
-          },
-          color: 'rgba(0, 0, 0, 0)',
-          borderColor: 'rgba(0, 0, 0, 0)',
-          borderWidth: 0
-        }
-      };
-      let data = [];
-      let color=['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
-      for (let i = 0; i < scaleData.length; i++) {
-        data.push({
-          value: scaleData[i].value,
-          name: scaleData[i].name,
-          itemStyle: {
-            normal: {
-              borderWidth: 6,
-              shadowBlur: 10,
-              borderColor: color[i],
-              shadowColor: color[i]
-            }
-          }
-        }, {
-          value: 2,
-          name: '',
-          itemStyle: placeHolderStyle
-        });
-      }
-
-      let option = {
-        series: [{
-          name: '',
-          type: 'pie',
-          clockWise: false,
-          radius: ['66%', '68%'],
-          center: ['50%', '50%'],
-          hoverAnimation: false,
-          itemStyle: {
-            normal: {
-              label: {
-                show: true,
-                position: 'outside',
-                color: '#ddd',
-                formatter: (params) => {
-                  let percent = 0;
-                  let total = 0;
-                  for (let i = 0; i < scaleData.length; i++) {
-                    total += scaleData[i].value;
-                  }
-                  percent = ((params.value / total) * 100).toFixed(0);
-                  if (params.name !== '') {
-                    return params.name + '\n{white|' + '占比' + percent + '%}';
-                  } else {
-                    return '';
-                  }
-                },
-                rich: rich
-              },
-              labelLine: {
-                length: 10,
-                length2: 30,
-                show: true,
-                color: '#00ffff'
-              }
-            }
-          },
-          data: data
-        }]
-      }
-
-      myChart.setOption(option, true);
-      window.addEventListener("resize", () => {
-        myChart.resize();
-      });
-    },
-    // 左3折线图
-    getEchartLeft3() {
-      
-    },
-    // 右1
-    getEchartRight1() {
-      let myChart = echarts.init(document.getElementById('chart_right1'));
-      let option = {
-        // backgroundColor: 'rgba(255,255,255,.05)',
-        // tooltip: {
-        //   show: false
-        // },
-        series: [{
-          type: 'wordCloud',
-          gridSize: 1,
-          sizeRange: [12, 50],
-          rotationRange: [-90, 90],
-          rotationStep: 45,
-          shape: 'diamond',
-          width: '90%',
-          textPadding: 0,
-          autoSize: {
-            enable: true,
-            minSize: 6
-          },
-          textStyle: {
-            normal: {
-              textBorderColor: 'rgba(255,255,255,0.3)',
-              textBorderWidth: 1,
-              color: () => {
-                return 'rgb(' + [
-                  Math.round(Math.random() * 160),
-                  Math.round(Math.random() * 160),
-                  Math.round(Math.random() * 160)
-                ].join(',') + ')';
-              }
-            },
-            // emphasis: {
-            //   shadowBlur: 10,
-            //   shadowColor: 'rgba(255,255,255, .1)'
-            // }
-          },
-          data: [{
-            name: '区块链',
-            value: 810
-          }, {
-            name: '云计算',
-            value: 520
-          },{
-            name: "人工智能",
-            value: 928
-          },{
-            name: "大数据",
-            value: 906
-          },{
-            name: "工业互联网",
-            value: 825
-          },{
-            name: "医疗",
-            value: 514
-          },{
-            name: "存证溯源",
-            value: 486
-          },{
-            name: "政务",
-            value: 53
-          },{
-            name: "密码学",
-            value: 927
-          },{
-            name: "金融",
-            value: 908
-          },{
-            name: "供应链",
-            value: 693
-          },{
-            name: "公有链",
-            value: 611
-          },{
-            name: "私有链",
-            value: 512
-          },{
-            name: "联盟链",
-            value: 382
-          },{
-            name: "数据共享",
-            value: 312
-          },{
-            name: "文创版权",
-            value: 187
-          },{
-            name: "天河链",
-            value: 163
-          },{
-            name: "优壹号",
-            value: 104
-          },{
-            name: "UDFS存储",
-            value: 3
-          },{
-            name: "在线教育",
-            value: 1331
-          },{
-            name: "关联分析",
-            value: 941
-          },{
-            name: "智慧停车",
-            value: 585
-          },{
-            name: "链云生态",
-            value: 473
-          },{
-            name: "应用层",
-            value: 358
-          },{
-            name: "网络层",
-            value: 246
-          },{
-            name: "数据层",
-            value: 207
-          },{
-            name: "基础层",
-            value: 194
-          },{
-            name: "智能合约",
-            value: 104
-          },{
-            name: "去中心化",
-            value: 87
-          },{
-            name: "数字货币",
-            value: 415
-          },{
-            name: "酷屏",
-            value: 253
-          },{
-            name: "可视化",
-            value: 211
-          },{
-            name: "P2P",
-            value: 116
-          },{
-            name: "数据挖掘",
-            value: 1309
-          }]
-        }]
-      }
-
-      myChart.setOption(option, true);
-      window.addEventListener("resize", () => {
-        myChart.resize();
-      });
-    },
-    // 右2
-    getEchartRight2() {
-
-    },
-    // 右3
-    getEchartRight3() {
-
     }
   },
   beforeDestroy() {
@@ -925,20 +506,20 @@ export default {
     line-height: 1.15;
     header {
       position: relative;
-      height: 1.25rem;
+      height: 1rem;
       background: url(../assets/img/brand/head_bg.png) no-repeat top center;
       background-size: 100% 100%;
       h2 {
         color: #7ef0ff;
         font-size: 0.475rem;
         text-align: center;
-        line-height: 1rem;
+        line-height: 0.75rem;
         letter-spacing: 1px;
       }
       .weather {
         position: absolute;
         left: 1.375rem;
-        top: 0.5rem;
+        top: 0.35rem;
         font-size: 0.25rem;
         color: rgba(126, 240, 255, .7);
         img {
@@ -985,7 +566,7 @@ export default {
         flex: 3;
         &.center {
           flex: 5;
-          margin: 0 0.125rem 0.1875rem;
+          margin: 0 0.125rem 0.1rem;
           overflow: hidden;
 
           .resume {
@@ -1064,6 +645,7 @@ export default {
             }
           }
         }
+        
         %map-style {
           position: absolute;
           top: 50%;
@@ -1168,7 +750,7 @@ export default {
             line-height: 0.6rem;
             text-align: center;
             color: #fff;
-            font-size: 0.25rem;
+            font-size: 0.225rem;
             font-weight: 400;
             a {
               margin: 0 0.1875rem;
@@ -1187,6 +769,7 @@ export default {
   }
 
 }
+
 @-webkit-keyframes rotate {
   from {
     transform: translate(-50%, -50%) rotate(0deg);

src/views/Login.vue

@@ -86,7 +86,7 @@ export default {
   		userName: 'admin',
   		userPwd: '123456',
       visible: false,
-      modalContent: '这是一段信息'
+      modalContent: '这是一段自定义模态框消息'
   	}
   },
   computed: {

vue.config.js

@@ -16,11 +16,11 @@ module.exports = {
     // }
   },
   configureWebpack: {
-      // 把原本需要写在webpack.config.js中的配置代码 写在这里 会自动合并
-      externals: {
-       'jquery' : '$',
-       'echarts': 'echarts',
-       'axios' : 'axios'
-      }
+    // 把原本需要写在webpack.config.js中的配置代码 写在这里 会自动合并
+    externals: {
+     'jquery' : '$',
+     'echarts': 'echarts',
+     'axios' : 'axios'
     }
+  }
 };