fix: m

.env.development

@@ -1,6 +0,0 @@
-/**
- * Created by Zhang Haijun on 2018/8/13.
- */
-VUE_APP_BASEURL = '/'
-VUE_APP_MAPURL = 'http://58.210.9.131:5080'
-VUE_APP_MAPTILE = '/SIPGIS/tile-services/TileService/SIPSD_sipmap/MapServer'

.env.production

@@ -1,6 +0,0 @@
-/**
- * Created by Zhang Haijun on 2018/8/13.
- */
-VUE_APP_MAPURL = 'http://172.28.76.22'
-VUE_APP_MAPTILE = '/SIPGIS/tile-services/TileService/ZNJT_GYYQ/MapServer'
-VUE_APP_BASEURL = '/scr-web/'

.eslintrc.js

@@ -5,15 +5,9 @@ module.exports = {
     node: true
   },
 
-  extends: [
-    'plugin:vue/essential',
-    '@vue/standard',
-    '@vue/typescript'
-  ],
+  extends: ['plugin:vue/essential', '@vue/standard'],
 
-  parserOptions: {
-    parser: '@typescript-eslint/parser'
-  },
+  parserOptions: {},
 
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
-/screen-web
+/scr-web
+*.zip
 
 
 # local env files

.prettierrc

@@ -1,7 +1,7 @@
-{
-  "printWidth": 300,
-  "tabWidth": 2,
-  "singleQuote": true,
-  "semi": false,
-  "trailingComma": "none"
-}
+{
+  "printWidth": 300,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "none"
+}

Jenkinsfile

@@ -1,8 +0,0 @@
-@Library('jgpl') _
-webPipeline([
-        onBuildInstallShell:{->
-            return """
-            pnpm install --no-frozen-lockfile
-            pnpm run build || echo 'Ignore build error !!!'
-        """}
-])

package.json

@@ -1,71 +1,48 @@
-{
-    "name": "cmp-screen",
-    "version": "5.6.0",
-    "private": true,
-    "scripts": {
-        "serve": "vue-cli-service serve",
-        "build": "vue-cli-service build",
-        "lint": "vue-cli-service lint"
-    },
-    "dependencies": {
-        "@antv/g6": "3.8.5",
-        "@antv/l7": "^2.3.7",
-        "@antv/l7-district": "^2.3.1",
-        "@antv/l7-maps": "^2.3.7",
-        "@jiaminghi/data-view": "^2.10.0",
-        "@turf/turf": "^6.3.0",
-        "@tweenjs/tween.js": "^18.6.4",
-        "@vue/composition-api": "^1.7.1",
-        "axios": "^0.21.0",
-        "cmp-echarts": "2.0.0-5.6-release",
-        "core-js": "^3.6.5",
-        "crypto-js": "^4.0.0",
-        "echarts": "^4.9.0",
-        "echarts-liquidfill": "^2.0.0",
-        "element-ui": "^2.14.1",
-        "heatmapjs": "^2.0.2",
-        "js-cookie": "^2.2.1",
-        "leaflet": "^1.7.1",
-        "lodash-es": "^4.17.15",
-        "moment": "^2.29.1",
-        "nprogress": "^0.2.0",
-        "ol": "^6.5.0",
-        "ol-echarts": "^2.0.3",
-        "qs": "^6.9.4",
-        "regenerator-runtime": "^0.13.11",
-        "stats.js": "^0.17.0",
-        "three": "0.122.0",
-        "three-js-csg": "^72.0.0",
-        "three-orbitcontrols": "^2.110.3",
-        "url-loader": "^4.1.1",
-        "vue": "^2.6.11",
-        "vue-count-to": "^1.0.13",
-        "vue-router": "^3.2.0",
-        "vue-seamless-scroll": "^1.1.21",
-        "vuex": "^3.4.0"
-    },
-    "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "^2.33.0",
-        "@typescript-eslint/parser": "^2.33.0",
-        "@vue/cli-plugin-babel": "~4.5.0",
-        "@vue/cli-plugin-eslint": "~4.5.0",
-        "@vue/cli-plugin-router": "~4.5.0",
-        "@vue/cli-plugin-typescript": "~4.5.0",
-        "@vue/cli-plugin-vuex": "~4.5.0",
-        "@vue/cli-service": "~4.5.0",
-        "@vue/eslint-config-standard": "^5.1.2",
-        "@vue/eslint-config-typescript": "^5.0.2",
-        "babel-eslint": "^10.1.0",
-        "compress-webpack-plugin": "^1.0.6",
-        "eslint": "^6.7.2",
-        "eslint-plugin-import": "^2.20.2",
-        "eslint-plugin-node": "^11.1.0",
-        "eslint-plugin-promise": "^4.2.1",
-        "eslint-plugin-standard": "^4.0.0",
-        "eslint-plugin-vue": "^6.2.2",
-        "sass": "^1.26.5",
-        "sass-loader": "^8.0.2",
-        "typescript": "^4.2.4",
-        "vue-template-compiler": "^2.6.11"
-    }
-}
+{
+  "name": "scr-web",
+  "version": "5.6.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@vue/composition-api": "1.7.1",
+    "axios": "0.21.0",
+    "core-js": "3.6.5",
+    "echarts": "4.9.0",
+    "echarts-liquidfill": "2.0.0",
+    "element-ui": "2.14.1",
+    "js-cookie": "2.2.1",
+    "lodash-es": "4.17.15",
+    "qs": "6.9.4",
+    "regenerator-runtime": "0.13.11",
+    "stats.js": "0.17.0",
+    "url-loader": "4.1.1",
+    "vue": "2.6.11",
+    "vue-count-to": "1.0.13",
+    "vue-router": "3.2.0",
+    "vue-seamless-scroll": "1.1.21",
+    "vuex": "3.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "4.5.0",
+    "@vue/cli-plugin-eslint": "4.5.0",
+    "@vue/cli-plugin-router": "4.5.0",
+    "@vue/cli-plugin-vuex": "4.5.0",
+    "@vue/cli-service": "4.5.0",
+    "@vue/eslint-config-standard": "5.1.2",
+    "babel-eslint": "10.1.0",
+    "compress-webpack-plugin": "1.0.6",
+    "eslint": "6.7.2",
+    "eslint-plugin-import": "2.20.2",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-promise": "4.2.1",
+    "eslint-plugin-standard": "4.0.0",
+    "eslint-plugin-vue": "6.2.2",
+    "sass": "1.26.5",
+    "sass-loader": "8.0.2",
+    "vue-template-compiler": "2.6.11"
+  }
+}

public/index.html

@@ -1,23 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>static/img/logo.png" />
+    <title>高性能数值模拟实验平台</title>
+  </head>
 
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>static/img/shortcut.png">
-    <title>
-        <%= htmlWebpackPlugin.options.title %>
-    </title>
-    <script type="text/javascript" src="./static/config.js"></script>
-</head>
-
-<body>
+  <body>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
-</body>
-
-</html>
+  </body>
+</html>

public/static/js/config.js

@@ -1,3 +0,0 @@
-window.configs = {
-  showLogo: false
-}

src/components/AutoScroll/index.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="scroll-wrapper" :style="style" @mouseenter="clearTimer" @mouseleave="enableTimer">
-    <slot :list="list"></slot>
-  </div>
-</template>
-<script>
-import { computed, onMounted, onUnmounted, reactive, toRefs } from '@vue/composition-api'
-export default {
-  props: {
-    data: {
-      type: Array
-    },
-    waitTime: {
-      type: Number,
-      default: 1500
-    },
-    singleHeight: {
-      type: Number,
-      default: 40
-    }
-  },
-  setup(props) {
-    const state = reactive({
-      animate: false
-    });
-    const list = computed(() => props.data);
-    const style = computed(() => {
-      return state.animate ? { transition: 'all 0.5s ease-in', transform: `translate(0, -${props.singleHeight}px)` } : {};
-    })
-    const scrollAnimate = () => {
-      state.animate = true;
-      setTimeout(() => {
-        state.animate = false;
-        list.value.push(list.value[0]);
-        list.value.shift();
-      }, 500)
-    }
-    let timer = null;
-    onMounted(() => {
-      enableTimer()
-    });
-    onUnmounted(() => {
-      clearTimer()
-    });
-    const enableTimer = () => {
-      if (timer) clearTimer();
-      timer = setInterval(scrollAnimate, props.waitTime)
-    }
-    const clearTimer = () => {
-      clearInterval(timer);
-      timer = null;
-    }
-    return {
-      ...toRefs(state),
-      list,
-      style,
-      enableTimer,
-      clearTimer
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-</style>

src/components/DeviceStatus/index.vue

@@ -1,55 +0,0 @@
-<template>
-  <div class="cell">
-    <img :src="icon" alt="" class="title-icon">
-    <div>
-      <div class="icon-container" v-for="(item, index) in data" :key="index">
-        <span class="icon" :style="{background: item.color}"></span>
-        <span class="text">{{item.text}}</span>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { computed } from '@vue/composition-api'
-export default {
-  props: {
-    icon: {
-      type: String,
-      default: '/scr-web/static/img/business_network/switch.png'
-    },
-    data: {
-      type: Array
-    }
-  },
-  setup(props) {
-    return {
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.cell {
-  display: flex;
-  margin-top: 20px;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 5px;
-  .title-icon{
-    width: 60px;
-    height: 80px;
-    margin-right: 10px;
-  }
-  span{
-    display: inline-block;
-  }
-  .icon-container{
-    margin-bottom: 5px;
-  }
-  .icon {
-    width: 14px;
-    height: 14px;
-    background: #19BE6B;
-    margin-right: 10px ;
-  }
-}
-</style>

src/components/HelloWorld.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-});
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/NoData/index.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="no-data">
-    <i class="icon" :class="icon"></i>
-    <span class="text">{{text}}</span>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    icon: {
-      type: String,
-      default: 'el-icon-s-order'
-    },
-    text: {
-      type: String,
-      default: '暂无数据'
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.no-data {
-  min-height: 200px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: #fff;
-  .icon {
-    color: #1a84e6;
-    font-size: 50px;
-    margin-bottom: 10px;
-  }
-  .text {
-    color: #b3b5c3;
-  }
-}
-</style>

src/components/OverviewState/index.vue

@@ -1,106 +0,0 @@
-<template>
-  <el-row class="stat-container">
-    <!-- <dv-border-box-8 :reverse="true" style="height: 74px"> -->
-      <div class="stat-border" style="top: -2px"></div>
-      <div class="stat-border" style="top: -2px; right: 1px"></div>
-      <div class="stat-border" style="bottom: 0; right: 1px"></div>
-      <div class="stat-border" style="bottom: 0;"></div>
-      <el-col :span="24/configs.length" class="stat-part" v-for="item in configs" :key="item.title">
-        <div class="title">
-          <i class="icon" :class="item.icon"></i>
-          <span>{{item.title}}</span>
-        </div>
-        <div class="stat-count" v-for="(cell,index) in item.data" :key="index">
-          <template v-if="item.type === 'COUNT'">
-            <div>{{cell.title}}</div>
-            <div class="number" :class="cell.className" :style="cell.style">{{cell.value}} {{cell.unit}}</div>
-          </template>
-          <template v-if="item.type === 'PROGRESS'">
-            <div :style="item.titleStyle">{{cell.title}}</div>
-            <div class="progress-wrap">
-              <Progress :used="cell.used" :total="cell.total" :unit="cell.unit" :color="cell.color"></Progress>
-            </div>
-          </template>
-        </div>
-      </el-col>
-    <!-- </dv-border-box-8> -->
-  </el-row>
-</template>
-<script>
-import Progress from 'components/progress'
-export default {
-  components: { Progress },
-  props: {
-    configs: {
-      type: Array,
-      required: true
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.stat-container {
-  position: relative;
-  height: 74px;
-  width: 100%;
-  background: url('~assets/img/stat_bg.png');
-  border-bottom: 1px solid #0391d8;
-  border-top: 1px solid #0391d8;
-  margin: 10px 0;
-  .stat-border {
-    position: absolute;
-    width: 14px;
-    height: 2px;
-    background: #009ce0;
-  }
-  .stat-part {
-    display: flex;
-    align-items: center;
-    color: #fff;
-    height: 72px;
-    overflow: hidden;
-    .stat-count {
-      font-size: 17px;
-      flex: 1;
-      padding-left: 20px;
-      padding-right: 10px;
-      .number {
-        font-size: 25px;
-        font-weight: bold;
-        &.lgreen {
-          color: #42edf8;
-        }
-        &.green {
-          color: #39db3c;
-        }
-        &.purple {
-          color: #b34ef9;
-        }
-        &.yellow {
-          color: #ffc400;
-        }
-      }
-    }
-    .progress-wrap {
-      margin-top: 10px;
-    }
-    .title {
-      color: #fff;
-      height: 68px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 17px;
-      width: 140px;
-      background: #1b3c88;
-      .icon {
-        font-size: 28px;
-        margin-right: 5px;
-      }
-      span{
-        max-width: 90px;
-      }
-    }
-  }
-}
-</style>

src/components/ScreenWrapper/Header.vue

@@ -1,70 +0,0 @@
-<template>
-  <div class="outside-header">
-    <span>
-      <router-link to="/screen/list" v-if="logo">
-        <img class="logo" title="返回" :src="logo" alt="">
-      </router-link>
-    </span>
-    <span class="screen-title">
-      {{title}}
-    </span>
-    <span class="time"><span @click="operateScreen" title="全屏">{{currentTime}}</span></span>
-  </div>
-</template>
-
-<script>
-import useHeader from 'components/ScreenWrapper/useHeader'
-export default {
-  props: {
-    code: {
-      type: String,
-      required: true
-    }
-  },
-  setup(props, context) {
-    const { currentTime, operateScreen, logo, title } = useHeader(context.root.$store, props.code)
-    return {
-      currentTime,
-      logo,
-      title,
-      operateScreen
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.outside-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 93px;
-  background: url('~assets/img/header.gif');
-  background-size: 100% 100%;
-  display: flex;
-  & > span {
-    flex: 1;
-  }
-  .logo {
-    margin-left: 253px;
-    margin-top: 9px;
-  }
-  .screen-title {
-    text-align: center;
-    margin-left: 25px;
-    margin-top: 2px;
-    font-size: 48px;
-    color: #6Fffff;
-  }
-  .time {
-    font-size: 18px;
-    color: #fafbfd;
-    display: inline-block;
-    margin-top: 20px;
-    span {
-      cursor: pointer;
-      margin-left: 110px;
-    }
-  }
-}
-</style>

src/components/ScreenWrapper/index.vue

@@ -1,103 +0,0 @@
-<template>
-  <full-screen-container class="container" :loading="loading" @getScale="scale => $emit('getScale', scale)">
-    <div class="header">
-      <span>
-        <router-link to="/screen/list" v-if="logo">
-          <img class="logo" title="返回" :src="logo" alt="">
-        </router-link>
-      </span>
-      <img :src="animateImg" alt="" class="left-animate">
-      <img :src="animateImg" alt="" class="right-animate">
-      <span class="screen-title">
-        {{title}}
-      </span>
-      <span class="time"><span @click="operateScreen" title="全屏">{{currentTime}}</span></span>
-    </div>
-    <div class="body">
-      <slot></slot>
-    </div>
-  </full-screen-container>
-</template>
-
-<script>
-import useHeader from './useHeader'
-import Header from './Header'
-export default {
-  components: { Header },
-  props: {
-    code: {
-      type: String,
-      required: true
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props, context) {
-    const { currentTime, operateScreen, logo, title } = useHeader(context.root.$store, props.code)
-    return {
-      currentTime,
-      logo,
-      animateImg: require('assets/img/animate.gif'),
-      title,
-      operateScreen
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.left-animate {
-  position: absolute;
-  left: 40px;
-  top: 100px;
-}
-.right-animate {
-  position: absolute;
-  right: 40px;
-  top: 100px;
-}
-.container {
-  width: 100vw;
-  height: 100vh;
-  min-height: 700px;
-  background: url('~assets/img/screen_bg.png') no-repeat;
-  background-size: 100% 100%;
-  overflow: hidden;
-  .header {
-    display: flex;
-    align-items: center;
-    height: 75px;
-    & > span {
-      flex: 1;
-    }
-    .logo {
-      margin-left: 210px;
-    }
-    .screen-title {
-      text-align: center;
-      margin-left: 25px;
-      margin-top: -2px;
-      font-size: 40px;
-      color: #6fffff;
-    }
-    .time {
-      font-size: 20px;
-      color: #fafbfd;
-      display: inline-block;
-      margin-top: -5px;
-      span {
-        cursor: pointer;
-        margin-left: 140px;
-      }
-    }
-  }
-  .body {
-    color: #fff;
-    padding: 40px 115px;
-    height: calc(100% - 100px);
-    box-sizing: border-box;
-    // display: flex;
-  }
-}
-</style>

src/components/ScreenWrapper/useHeader.js

@@ -1,54 +0,0 @@
-import { reactive, toRefs, onUnmounted, ref, computed } from '@vue/composition-api'
-import moment from 'moment'
-import 'moment/locale/zh-cn'
-import { enableFullScreen, disableFullScreen } from './tools'
-import { getSystemConfigs } from 'services/system'
-
-export default function (store, code) {
-  const title = computed(() => {
-    return store.getters.screenConfigs[code]
-  })
-  const state = reactive({
-    currentTime: ''
-  })
-  let timer = null
-  onUnmounted(() => {
-    clearInterval(timer)
-    timer = null
-  })
-  function setTimer() {
-    const getTime = () => {
-      const time = moment()
-      state.currentTime = `${time.format('YYYY年MM月DD日 dddd HH:mm:ss')}`;
-    }
-    getTime()
-    timer = setInterval(() => {
-      getTime()
-    }, 1000)
-  }
-  setTimer();
-  let isFull = false;
-  function operateScreen() {
-    if (isFull) {
-      disableFullScreen()
-    } else {
-      enableFullScreen()
-    }
-    isFull = !isFull;
-  }
-  // 获取logo
-  const logo = ref('');
-  async function getLogo () {
-    const data = await getSystemConfigs({ codes: 'loginLogo' });
-    if (data.success) {
-      logo.value = data.data.loginLogo;
-    }
-  }
-  if (window.configs?.showLogo) getLogo()
-  return {
-    ...toRefs(state),
-    logo,
-    title,
-    operateScreen
-  }
-}

src/components/SimpleProgress/index.vue

@@ -1,55 +0,0 @@
-<template>
-  <div class="progress" >
-    <div class="content" :style="{ background: color, width: `${percent}%` }"></div>
-    <div class="text">{{percent.toFixed(2)}}%</div>
-  </div>
-</template>
-<script>
-import { computed } from '@vue/composition-api'
-export default {
-  props: {
-    percent: {
-      type: Number
-    }
-  },
-  setup(props) {
-    const color = computed(() => {
-      if (props.percent > 90) {
-        return '#F84540'
-      } else if (props.percent > 75) {
-        return '#FF9900'
-      } else if (props.percent > 50) {
-        return '#2D8CF0'
-      }
-      return '#19BE6B'
-    })
-    return {
-      color
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.progress {
-  width: 100%;
-  height: 12px;
-  position: relative;
-  background: #061330;
-  .content {
-    background: #19BE6B;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 12px;
-  }
-  .text {
-    position: absolute;
-    right: 0;
-    top: -2px;
-    // margin-right: 2px;
-    font-size: 8px;
-    font-family: Microsoft YaHei;
-    color: #fff;
-  }
-}
-</style>

src/components/Topology/index.vue

@@ -1,172 +0,0 @@
-<template>
-  <div id="mountNode" style="height: 100%; width: 100%"></div>
-</template>
-
-<script>
-import G6 from '@antv/g6';
-import registerDefault from './registerDefault';
-
-export default {
-  props: {
-    defaultEdgeType: {
-      type: String
-    },
-    defaultNodeType: {
-      type: String,
-      default: 'circle'
-    },
-    // 拓扑的配置
-    options: {
-      type: Object,
-      default: function() {
-        return {};
-      }
-    },
-    data: {
-      type: Object,
-      default: function() {
-        return {};
-      }
-    },
-    layout: {
-      type: Object
-    }
-  },
-  data() {
-    return {
-      graph: null,
-      currentLayout: ''
-    };
-  },
-  created() {
-    registerDefault(G6, this.defaultNodeType, this.defaultEdgeType);
-  },
-  mounted() {
-    this.initGraph();
-    window.addEventListener('resize', this.changeSize);
-  },
-  beforeUnmount() {
-    window.removeEventListener('resize', this.changeSize);
-  },
-  watch: {
-    data() {
-      if (this.graph) {
-        this.graph.changeData(this.data);
-      }
-    }
-  },
-  methods: {
-    initGraph() {
-      const target = document.getElementById('mountNode');
-      // const minimap = new G6.Minimap(this.minimapConfig);
-      // 实例化 grid 插件
-      const options = {
-        // plugins: [grid], // 将 minimap 实例配置到图上
-        modes: {
-          default: [
-            'drag-canvas',
-            'zoom-canvas',
-            'drag-node',
-            'drag-combo'
-            // {
-            //   type: 'tooltip', // 提示框
-            //   formatText:
-            //     this.tipFormat ||
-            //     function(model) {
-            //       // 提示框文本内容
-            //       const text = [];
-            //       text.push(`<div>${model.label}</div>`);
-            //       return text.join('');
-            //     },
-            //   offset: 60
-            // }
-          ] // 允许拖拽画布、放缩画布、拖拽节点
-        },
-        // fitCenter: true,
-        container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
-        width: target.offsetWidth, // Number，必须，图的宽度
-        height: target.offsetHeight, // Number，必须，图的高度
-        defaultNode: {
-          type: 'image',
-          size: [60],
-          color: '#ffffff',
-          style: {
-            fill: '#9EC9FF',
-            lineWidth: 1
-          },
-          labelCfg: {
-            style: {
-              fill: '#ffffff',
-              fontSize: 12
-            },
-            position: 'bottom'
-          }
-        },
-        defaultEdge: {
-          type: 'circle-running',
-          style: {
-            stroke: '#7ECEF4',
-            lineWidth: 2
-          }
-        },
-        groupByTypes: false,
-        defaultCombo: {
-          type: 'rect',
-          padding: [40, 40, 40, 40],
-          style: {
-            fill: '#112A51',
-            stroke: '#112A51',
-            radius: 4
-          },
-          labelCfg: {
-            refY: 20,
-            refX: 20,
-            position: 'top',
-            style: {
-              fill: '#ffffff',
-              fontSize: 15
-            }
-          }
-        },
-        layout: this.layout
-      };
-      const graph = new G6.Graph(options);
-      this.graph = graph;
-      graph.read(this.data);
-      this.bindEvent();
-    },
-    save () {
-      const data = this.graph.save();
-      return data;
-    },
-    itemClick(evt, type) {
-      const { clientX, clientY, item } = evt;
-      const params = {
-        x: clientX, y: clientY, item: item.getModel()
-      }
-      this.$emit(type, params)
-    },
-    bindEvent() {
-      this.graph.on('node:click', evt => {
-        this.itemClick(evt, 'nodeClick')
-      });
-      this.graph.on('edge:click', evt => {
-        this.itemClick(evt, 'edgeClick')
-      });
-      this.graph.on('canvas:click', evt => {
-        this.$emit('canvasClick')
-      });
-    },
-    changeSize() {
-      setTimeout(() => {
-        const target = document.getElementById('mountNode');
-        const width = target.offsetWidth;
-        const height = target.offsetHeight;
-        this.graph.changeSize(width, height);
-      }, 1000);
-    }
-  }
-};
-</script>
-<style lang="scss">
-</style>

src/components/Topology/registerDefault.js

@@ -1,129 +0,0 @@
-export default function registerDefault(
-  G6,
-  nodeType = 'circle',
-  lineType = 'quadratic'
-) {
-  G6.registerNode(
-    'background-animate',
-    {
-      afterDraw(cfg, group) {
-        const r = cfg.size / 2;
-        const back1 = group.addShape('circle', {
-          zIndex: -3,
-          attrs: {
-            x: 0,
-            y: 0,
-            r,
-            fill: cfg.color,
-            opacity: 0.6
-          },
-          name: 'back1-shape'
-        });
-        const back2 = group.addShape('circle', {
-          zIndex: -2,
-          attrs: {
-            x: 0,
-            y: 0,
-            r,
-            fill: cfg.color,
-            opacity: 0.6
-          },
-          name: 'back2-shape'
-        });
-        const back3 = group.addShape('circle', {
-          zIndex: -1,
-          attrs: {
-            x: 0,
-            y: 0,
-            r,
-            fill: cfg.color,
-            opacity: 0.6
-          },
-          name: 'back3-shape'
-        });
-        group.sort(); // Sort according to the zIndex
-        back1.animate(
-          {
-            // Magnifying and disappearing
-            r: r + 10,
-            opacity: 0.1
-          },
-          {
-            duration: 3000,
-            easing: 'easeCubic',
-            delay: 0,
-            repeat: true // repeat
-          }
-        ); // no delay
-        back2.animate(
-          {
-            // Magnifying and disappearing
-            r: r + 10,
-            opacity: 0.1
-          },
-          {
-            duration: 3000,
-            easing: 'easeCubic',
-            delay: 1000,
-            repeat: true // repeat
-          }
-        ); // 1s delay
-        back3.animate(
-          {
-            // Magnifying and disappearing
-            r: r + 10,
-            opacity: 0.1
-          },
-          {
-            duration: 3000,
-            easing: 'easeCubic',
-            delay: 2000,
-            repeat: true // repeat
-          }
-        ); // 3s delay
-      }
-    },
-    'image'
-  );
-  G6.registerEdge(
-    'circle-running',
-    {
-      afterDraw(cfg, group) {
-        // 获得当前边的第一个图形，这里是边本身的 path
-        const shape = group.get('children')[0];
-        // 边 path 的起点位置
-        const startPoint = shape.getPoint(0);
-
-        // 添加红色 circle 图形
-        const circle = group.addShape('circle', {
-          attrs: {
-            x: startPoint.x,
-            y: startPoint.y,
-            fill: '#29EEF7',
-            r: 3
-          },
-          name: 'circle-shape'
-        });
-
-        // 对红色圆点添加动画
-        circle.animate(
-          ratio => {
-            // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。
-            // 根据比例值，获得在边 path 上对应比例的位置。
-            const tmpPoint = shape.getPoint(ratio);
-            // 返回需要变化的参数集，这里返回了位置 x 和 y
-            return {
-              x: tmpPoint.x,
-              y: tmpPoint.y
-            };
-          },
-          {
-            repeat: true, // 动画重复
-            duration: 3000 // 一次动画的时间长度
-          }
-        );
-      }
-    },
-    lineType
-  );
-}

src/components/echarts/BarCharts.vue

@@ -1,76 +0,0 @@
-<template>
-  <bar-chart v-bind="$attrs"
-   :setting="configs"
-  ></bar-chart>
-</template>
-<script>
-import charts from 'cmp-echarts'
-const { BarCharts } = charts
-export default {
-  components: { BarChart: BarCharts },
-  props: {
-    setting: {
-      type: Object,
-      default() {
-        return {}
-      }
-    }
-  },
-  setup(props, context) {
-    const { rotate = 0 } = props.setting
-    const configs = {
-      series: {
-        label: {
-          show: true,
-          color: '#fff',
-          position: 'top'
-        }
-      },
-      legend: {
-        textStyle: {
-          color: '#fff'
-        },
-        pageIconColor: '#fff',
-        pageIconInactiveColor: '#2F4554'
-      },
-      xAxis: {
-        axisLabel: {
-          color: '#fff',
-          interval: 0,
-          rotate
-        },
-        axisLine: {
-          lineStyle: {
-            color: '#ffffff'
-          }
-        },
-        splitArea: {
-          show: false
-        }
-      },
-      yAxis: {
-        axisLabel: {
-          color: '#fff'
-        },
-        nameTextStyle: {
-          color: '#fff'
-        },
-        axisLine: {
-          lineStyle: {
-            color: '#ffffff'
-          }
-        },
-        splitLine: {
-          lineStyle: {
-            type: 'solid',
-            color: '#1B263D'
-          }
-        }
-      }
-    }
-    return {
-      configs
-    }
-  }
-}
-</script>

src/components/echarts/BarReverseCharts.vue

@@ -1,60 +0,0 @@
-<template>
-  <bar-reverse-chart v-bind="$attrs"
-   :setting="configs"
-  ></bar-reverse-chart>
-</template>
-<script>
-import charts from 'cmp-echarts'
-const { BarReverseCharts } = charts
-const configs = {
-  series: {
-    label: {
-      show: true,
-      formatter: '{b}',
-      color: '#fff',
-      position: [10, -20]
-    }
-  },
-  legend: {
-    textStyle: {
-      color: '#fff'
-    }
-  },
-  xAxis: {
-    axisLabel: {
-      color: '#fff',
-      interval: 0
-    },
-    axisLine: {
-      lineStyle: {
-        color: '#ffffff'
-      }
-    },
-    splitArea: {
-      show: false
-    }
-  },
-  yAxis: {
-    axisLine: { show: false },
-    axisLabel: { show: false },
-    axisTick: { show: false },
-    splitLine: { show: false }
-  }
-}
-export default {
-  components: { BarReverseChart: BarReverseCharts },
-  props: {
-    setting: {
-      type: Object,
-      default() {
-        return {}
-      }
-    }
-  },
-  setup(props, context) {
-    return {
-      configs
-    }
-  }
-}
-</script>

src/components/echarts/LineCharts.vue

@@ -1,60 +0,0 @@
-<template>
-  <line-chart v-bind="$attrs"
-   :setting="setting"
-  ></line-chart>
-</template>
-<script>
-import charts from 'cmp-echarts'
-import 'cmp-echarts/lib/cmp-echarts.css'
-
-const { LineCharts } = charts
-const setting = {
-  legend: {
-    textStyle: {
-      color: '#fff'
-    },
-    pageIconColor: '#fff',
-    pageIconInactiveColor: '#2F4554'
-  },
-  xAxis: {
-    axisLabel: {
-      color: '#fff'
-    },
-    axisLine: {
-      lineStyle: {
-        color: '#ffffff'
-      }
-    },
-    splitArea: {
-      show: false
-    }
-  },
-  yAxis: {
-    axisLabel: {
-      color: '#fff'
-    },
-    nameTextStyle: {
-      color: '#fff'
-    },
-    axisLine: {
-      lineStyle: {
-        color: '#ffffff'
-      }
-    },
-    splitLine: {
-      lineStyle: {
-        type: 'solid',
-        color: '#1B263D'
-      }
-    }
-  }
-}
-export default {
-  components: { LineChart: LineCharts },
-  setup(props, context) {
-    return {
-      setting
-    }
-  }
-}
-</script>

src/components/echarts/PieCharts.vue

@@ -1,72 +0,0 @@
-<template>
-  <pie-chart v-bind="$attrs"
-   :setting="setting"
-  ></pie-chart>
-</template>
-<script>
-import charts from 'cmp-echarts'
-import { computed } from '@vue/composition-api'
-const { PieCharts } = charts
-export default {
-  props: {
-    configs: {
-      type: Object,
-      default() {
-        return {}
-      }
-    }
-  },
-  components: { PieChart: PieCharts },
-  setup(props, context) {
-    console.log(context)
-    const setting = computed(() => {
-      const { attrs: { data = [] } } = context;
-      const total = data.reduce((total, item) => {
-        return total + item.value / 1
-      }, 0)
-      return {
-        legend: {
-          textStyle: {
-            rich: {
-              name: {
-                align: 'left',
-                color: '#fff',
-                width: 50
-              },
-              count: {
-                align: 'right',
-                color: '#fff',
-                width: 50,
-                fontWeight: 600
-              }
-            }
-          }
-        },
-        series: {
-          label: {
-            show: true,
-            position: 'center',
-            formatter: function() {
-              return `{count|总数\r\n\r\n${total}}`
-            },
-            textStyle: {
-              color: '#fff'
-            },
-            rich: {
-              count: {
-                fontSize: 19,
-                color: '#fff'
-              }
-            }
-          },
-          itemStyle: {}
-        },
-        ...props.configs
-      }
-    })
-    return {
-      setting
-    }
-  }
-}
-</script>

src/components/echarts/bar-charts/BarCharts.vue

@@ -1,191 +0,0 @@
-<template>
-     <div :style="{height:height,width:width}" class="chart-container">
-    <div class="chart" :class="{hide: isNoData}" :id="id" style="width: 100%;height: 100%"></div>
-    <NoData  v-show="isNoData" class="chart-no-data"></NoData>
-  </div>
-</template>
-
-<script>
-import mixins, { getLinerColor } from '../mixins'
-import { yAxis, xAxis, grid } from '../defaultSetting'
-import Axios from 'axios'
-
-export default {
-  props: {
-    is3d: {
-      type: Boolean,
-      default: false
-    }
-  },
-  mixins: [mixins],
-  data () {
-    return {}
-  },
-  computed: {
-    isNoData() {
-      return !this.data.keys || !this.data.keys.length;
-    }
-  },
-  mounted () {
-    this.eveSet()
-  },
-  methods: {
-    // 对画布绑定事件
-    eveSet () {
-      this.chart.on('click', (params) => {
-        const event = params.event.event
-        event.stopPropagation()
-        this.$emit('goToPage', params)
-      })
-    },
-    updateChart () {
-      const legends = []
-      const series = []
-      const { colorMap = {}, linerColor, axisLabel = {}, showSeriesLabel = true } = this.setting;
-      const color = (linerColor && linerColor.map(item => {
-        return getLinerColor(item[0], item[1])
-      }));
-      //  [getLinerColor('#0089FF', '#A057A1')];
-      const { values = [], keys = [] } = this.data;
-      const { showLegend = false } = this.setting;
-      values.forEach((item, index) => {
-        legends.push(item.name)
-        const data = item.data.map(cell => {
-          return {
-            value: cell,
-            itemStyle: {
-              color: colorMap[item.name]
-            }
-          }
-        })
-        series.push({
-          name: item.name,
-          type: 'bar',
-          smooth: true,
-          stack: 'all',
-          barMaxWidth: 30,
-          label: {
-            show: showSeriesLabel,
-            position: 'top',
-            color: '#fff'
-          },
-          itemStyle: {
-            // normal: {
-            //   areaStyle: { type: 'default' },
-            //   color: new this.echarts.graphic.LinearGradient(
-            //     0, 0, 1, 1, [{
-            //       offset: 0,
-            //       color: startColor
-            //     },
-            //     {
-            //       offset: 1,
-            //       color: endColor
-            //     }
-            //     ]
-            //   )
-            // }
-          },
-          data,
-          zlevel: 11
-        });
-        if (this.is3d) {
-          series.push({
-            type: 'bar',
-            barWidth: 8,
-            itemStyle: {
-              normal: {
-                color
-              }
-            },
-            barGap: 0,
-            data
-          }, {
-            name: 'b',
-            tooltip: {
-              show: false
-            },
-            type: 'pictorialBar',
-            itemStyle: {
-              borderWidth: 1,
-              borderColor: color[0],
-              color: color[0]
-            },
-            symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
-            symbolSize: ['30', '12'],
-            symbolOffset: ['0', '-8'],
-            symbolRotate: 5,
-            symbolPosition: 'end',
-            data,
-            z: 3
-          })
-        }
-      })
-      const options = {
-        color,
-        legend: {
-          show: showLegend,
-          top: 0,
-          textStyle: {
-            color: '#fff'
-          }
-        },
-        title: {
-          text: this.data.title
-        },
-        tooltip: {
-          trigger: 'axis',
-          ...(this.setting.tooltip || {})
-        },
-        toolbox: this.setting.toolbox,
-        grid: {
-          ...grid,
-          top: 30,
-          left: '1%',
-          right: '5%',
-          bottom: 1
-        },
-        xAxis: [{
-          ...xAxis,
-          type: 'category',
-          name: this.unit,
-          splitLine: {
-            show: false
-          },
-          axisLabel: {
-            color: '#fff',
-            interval: 0,
-            ...axisLabel
-          },
-          axisTick: {
-            show: false
-          },
-          data: this.data.keys.map(item => {
-            return item.replace(' ', '\n')
-          })
-        }],
-        yAxis: [{
-          ...yAxis,
-          type: 'value',
-          splitLine: {
-            show: false
-          },
-          axisLabel: {
-            color: '#fff'
-          },
-          splitArea: {
-            show: false,
-            areaStyle: {
-              color: ['rgba(255,255,255,1)', 'rgba(248,251,255,1)']
-            }
-          }
-        }],
-        series: series
-      }
-      this.chart.setOption(options, true)
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-@import '../index';
-</style>

src/components/echarts/bar-charts/index.js

@@ -1,2 +0,0 @@
-import BarCharts from './BarCharts.vue';
-export default BarCharts;

src/components/echarts/bar-reverse-charts/BarReverseCharts.vue

@@ -1,114 +0,0 @@
-<template>
-  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
-</template>
-
-<script>
-import mixins, { getLinerColor } from '../mixins'
-import { yAxis, xAxis, grid } from '../defaultSetting'
-
-export default {
-  mixins: [mixins],
-  data () {
-    return {}
-  },
-  mounted () {
-    this.eveSet()
-  },
-  methods: {
-    // 对画布绑定事件
-    eveSet () {
-      this.chart.on('click', (params) => {
-        const event = params.event.event
-        event.stopPropagation()
-        this.$emit('goToPage', params)
-      })
-    },
-    updateChart () {
-      const legends = []
-      const series = []
-      const { barColor: [startColor = '#8699FF', endColor = '#4B66FF'] = [], yAxisLabel = {}, showXAxis = true } = this.setting;
-      this.data.values.forEach(item => {
-        legends.unshift(item.name)
-        series.push({
-          name: item.name,
-          type: 'bar',
-          smooth: true,
-          stack: 'all',
-          barMaxWidth: 11,
-          itemStyle: {
-            normal: {
-              // barBorderRadius: 5,
-              areaStyle: { type: 'default' },
-              color: getLinerColor(startColor, endColor)
-            }
-          },
-          data: item.data.reverse(),
-          zlevel: 11
-        })
-      })
-      const options = {
-        color: this.setting.color,
-        title: {
-          text: this.data.title
-        },
-        tooltip: {
-          trigger: 'axis'
-        },
-        toolbox: this.setting.toolbox,
-        grid: {
-          ...grid,
-          top: 10,
-          left: '1%',
-          right: '5%'
-        },
-        xAxis: [{
-          show: showXAxis,
-          ...xAxis,
-          type: 'value',
-          name: this.unit,
-          splitLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          splitArea: {
-            show: false,
-            areaStyle: {
-              color: ['rgba(255,255,255,1)', 'rgba(248,251,255,1)']
-            }
-          },
-          axisLabel: {
-            color: '#fff'
-          }
-        }],
-        yAxis: [{
-          ...yAxis,
-          type: 'category',
-          data: this.data.keys.map(item => {
-            return item.replace(' ', '\n')
-          }),
-          axisLine: {
-            show: false
-          },
-          splitLine: {
-            show: false
-          },
-          axisLabel: {
-            color: '#ffffff',
-            ...yAxisLabel
-          },
-          splitArea: {
-            show: true,
-            areaStyle: {
-              color: ['rgba(0,0,0,0.0)', 'rgba(250,250,250,0.05)']
-            }
-          }
-        }],
-        series: series
-      }
-      this.chart.setOption(options, true)
-    }
-  }
-}
-</script>

src/components/echarts/bar-reverse-charts/index.js

@@ -1,2 +0,0 @@
-import BarReverseCharts from './BarReverseCharts.vue';
-export default BarReverseCharts;

src/components/echarts/defaultSetting.js

@@ -1,51 +0,0 @@
-export const legend = {
-  type: 'scroll',
-  itemWidth: 12,
-  itemHeight: 12,
-  icon: 'roundRect',
-  padding: [0, 20],
-  textStyle: {
-    color: '##999999'
-  }
-};
-export const grid = {
-  left: 1,
-  right: 1,
-  top: 30,
-  bottom: 1,
-  containLabel: true
-};
-export const yAxis = {
-  type: 'value',
-  nameGap: 5,
-  min: 0,
-  splitLine: {
-    lineStyle: {
-      color: ['#ebebeb'],
-      type: 'dashed'
-    }
-  },
-  axisLine: {
-    lineStyle: {
-      color: ['#d9d9d9']
-    }
-  },
-  axisTick: {
-    show: false
-  }
-};
-export const xAxis = {
-  axisLine: {
-    lineStyle: {
-      color: ['#d9d9d9']
-    }
-  },
-  axisTick: {
-    show: false
-  }
-};
-export const toolbox = {
-  feature: {
-    saveAsImage: {}
-  }
-};

src/components/echarts/gauge-charts/GaugeCharts.vue

@@ -1,66 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" :id="id"></div>
-</template>
-
-<script>
-import mixins from '../mixins';
-
-export default {
-  mixins: [mixins],
-  data () {
-    return {};
-  },
-  methods: {
-    updateChart () {
-      const series = [];
-      series.push(
-        {
-          type: 'gauge',
-          center: ['50%', '55%'],
-          radius: '90%',
-          // min: this.data.min,
-          // max: this.data.max,
-          axisLine: { // 坐标轴线
-            lineStyle: { // 属性lineStyle控制线条样式
-              width: 5
-            }
-          },
-          axisTick: { // 坐标轴小标记
-            length: 15, // 属性length控制线长
-            lineStyle: { // 属性lineStyle控制线条样式
-              color: 'auto'
-            }
-          },
-          splitLine: { // 分隔线
-            length: 10, // 属性length控制线长
-            lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
-              color: 'auto'
-            }
-          },
-          title: {
-            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-            fontWeight: 'bolder',
-            fontSize: 18,
-            color: '#fff'
-          },
-          axisLabel: {
-            fontSize: 8
-          },
-          detail: {
-            fontSize: 16
-          },
-          data: this.data
-        }
-      );
-      const options = {
-        tooltip: {
-          formatter: '{a} <br/>{c} {b}'
-        },
-        toolbox: this.setting.toolbox,
-        series: series
-      };
-      this.chart.setOption(options, true);
-    }
-  }
-};
-</script>

src/components/echarts/gauge-charts/index.js

@@ -1,5 +0,0 @@
-/**
- * Created by Zhang Haijun on 2018/6/14.
- */
-import GaugeCharts from './GaugeCharts.vue';
-export default GaugeCharts;

src/components/echarts/graph-charts/GraphCharts.vue

@@ -1,106 +0,0 @@
-<template>
-    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
-</template>
-
-<script>
-import mixins from '../mixins';
-
-export default {
-  mixins: [mixins],
-  watch: {},
-  data () {
-    return {
-      chart: null
-    };
-  },
-  mounted () {
-    this.eveSet();
-  },
-  methods: {
-    // 隐藏右键操作
-    hideOperate () {
-      const targetArr = document.getElementsByClassName('operate-node-menu');
-      for (const item of targetArr) {
-        item.style.display = 'none';
-      }
-    },
-    // 对画布绑定事件
-    eveSet () {
-      this.chart.on('mouseup', (params) => {
-        if (params.dataType == 'edge') return;
-        const event = params.event.event;
-        event.stopPropagation();
-        if (event.button == 2) {
-          this.hideOperate();
-          this.$emit('mouseup', params);
-        }
-      });
-      const self = this;
-      document.addEventListener('click', function (event) {
-        event.stopPropagation();
-        self.hideOperate();
-      });
-      document.oncontextmenu = function () {
-        return false;
-      };
-    },
-    updateChart () {
-      const options = {
-        animationDuration: 100,
-        animationDurationUpdate: 300,
-        animationEasingUpdate: 'quinticInOut',
-        toolbox: this.setting.toolbox,
-        series: [
-          {
-            type: 'graph',
-            layout: 'force',
-            draggable: true,
-            symbolSize: 50,
-            roam: true, // 禁止用鼠标滚轮缩小放大效果
-            edgeSymbol: ['circle', 'none'],
-            edgeSymbolSize: [0, 10],
-            focusNodeAdjacency: true, // 划过只显示对应关系
-            lineStyle: {
-              normal: {
-                opacity: 1,
-                width: 1,
-                curveness: 0
-              }
-            },
-            label: {
-              normal: {
-                position: this.setting.labelPosition || 'bottom',
-                show: true,
-                textStyle: {
-                  fontSize: 12
-                }
-              }
-            },
-            force: {
-              layoutAnimation: true, // 是否关闭力导向布局动画
-              repulsion: [1000, 1200], // 节点的斥力因子
-              edgeLength: [150, 200]// 节点之间的距离
-            },
-            edgeLabel: {
-              normal: {
-                show: true,
-                textStyle: {
-                  fontSize: 12
-                },
-                formatter: '{c}',
-                backgroundColor: '#fff',
-                padding: 5,
-                color: '#4b59fd',
-                borderRadius: 3
-              }
-            },
-            data: this.data.nodes,
-            links: this.data.links
-          }
-        ]
-      };
-      this.chart.setOption(options, true);
-    }
-  }
-};
-</script>

src/components/echarts/graph-charts/index.js

@@ -1,2 +0,0 @@
-import GraphCharts from './GraphCharts.vue';
-export default GraphCharts;

src/components/echarts/index.scss

@@ -1,18 +0,0 @@
-.chart-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    .chart-no-data {
-        width: 100%;
-        color: #fff;
-        position: absolute;
-        top: 0;
-    }
-    .chart {
-        width: 100%;
-        height: 100%;
-        &.hide {
-            visibility: hidden;
-        }
-    }
-}

src/components/echarts/line-charts/LineCharts.vue

@@ -1,108 +0,0 @@
-<template>
-    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
-</template>
-
-<script>
-import mixins from '../mixins';
-import { yAxis, xAxis } from '../defaultSetting';
-
-export default {
-  mixins: [mixins],
-  data () {
-    return {};
-  },
-  methods: {
-    updateChart () {
-      const axisColor = '#ffffff'
-      const legends = [];
-      const series = [];
-      const { showLegend = true } = this.setting;
-      this.data.values.forEach(item => {
-        legends.push(item.name);
-        series.push({
-          name: item.name,
-          type: 'line',
-          symbol: 'none',
-          smooth: true,
-          areaStyle: {
-            opacity: 0.3
-          },
-          data: item.data
-        });
-      });
-      const options = {
-        color: this.setting.color,
-        title: {
-          text: this.data.title
-        },
-        tooltip: {
-          trigger: 'axis'
-        },
-        toolbox: this.setting.toolbox,
-        grid: {
-          left: 1,
-          right: 1,
-          top: 30,
-          bottom: 0,
-          containLabel: true
-        },
-        legend: {
-          show: showLegend,
-          type: 'scroll',
-          padding: [0, 20],
-          top: 0,
-          data: legends,
-          textStyle: {
-            color: '#fff'
-          }
-        },
-        xAxis: [{
-          ...xAxis,
-          type: 'category',
-          data: this.data.keys.map(item => {
-            return item.replace(' ', '\n');
-          }),
-          axisLabel: {
-            color: axisColor || '#AAB3C0',
-            rotate: this.setting.axisLabelRotate
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#ffffff'
-            }
-          },
-          splitArea: {
-            show: false,
-            areaStyle: {
-              color: ['rgba(255,255,255,1)', 'rgba(248,251,255,1)']
-            }
-          }
-        }],
-        yAxis: [{
-          ...yAxis,
-          name: this.unit,
-          axisLabel: {
-            color: axisColor || '#AAB3C0'
-          },
-          nameTextStyle: {
-            color: axisColor || '#AAB3C0'
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#ffffff'
-            }
-          },
-          splitLine: {
-            lineStyle: {
-              type: 'solid',
-              color: '#1B263D'
-            }
-          }
-        }],
-        series: series
-      };
-      this.chart.setOption(options, true);
-    }
-  }
-};
-</script>

src/components/echarts/line-charts/index.js

@@ -1,2 +0,0 @@
-import LineCharts from './LineCharts.vue'
-export default LineCharts

src/components/echarts/liquid-fill-charts/LiquidFillCharts.vue

@@ -1,58 +0,0 @@
-<template>
-    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
-</template>
-
-<script>
-import mixins from '../mixins';
-import 'echarts-liquidfill';
-
-export default {
-  mixins: [mixins],
-  props: {
-    theme: {
-      type: String
-    }
-  },
-  data () {
-    return {};
-  },
-  methods: {
-    updateChart () {
-      this.chart.setOption({
-        series: {
-          type: 'liquidFill',
-          radius: '90%',
-          data: [this.data, this.data / 1 - 0.05],
-          itemStyle: {
-            shadowBlur: 0
-          },
-          color: ['#0669D9', '#60BBFF'],
-          label: {
-            normal: {
-              color: '#fff',
-              textStyle: {
-                fontSize: 30,
-                fontFamily: 'helveticaNeue Thin'
-              }
-            }
-          },
-          backgroundStyle: {
-            borderColor: '#1871C6',
-            borderWidth: 1,
-            // opacity: 0.5,
-            color: '#2D1F61'
-          },
-          outline: {
-            show: true
-          },
-          phase: 0,
-          period: 4000,
-          waveLength: '100%',
-          animationDurationUpdate: 2000
-        }
-      });
-    }
-
-  }
-};
-</script>

src/components/echarts/liquid-fill-charts/index.js

@@ -1,5 +0,0 @@
-/**
- * Created by Zhang Haijun on 2018/6/14.
- */
-import LiquidFillCharts from './LiquidFillCharts.vue'
-export default LiquidFillCharts

src/components/echarts/loop-charts/LoopCharts.vue

@@ -1,137 +0,0 @@
-<template>
-   <div :style="{height:height,width:width}" class="chart-container">
-    <div class="chart" :class="{hide: isNoData}" :id="id" style="width: 100%;height: 100%"></div>
-    <NoData  v-show="isNoData" class="chart-no-data"></NoData>
-  </div>
-</template>
-
-<script>
-import mixins, { getLinerColor } from '../mixins';
-import { legend } from '../defaultSetting';
-
-export default {
-  mixins: [mixins],
-  props: {
-    theme: {
-      type: String,
-      default: '数值'
-    },
-    centerText: {
-      type: String,
-      default: '总数'
-    }
-  },
-  data () {
-    return {
-      total: 0
-    };
-  },
-  computed: {
-    isNoData() {
-      return !this.data || !this.data.length
-    }
-  },
-  methods: {
-    updateChart: function() {
-      const { legendColor } = this.themeColor
-      const legends = []
-      this.total = 0
-      const countMap = {}
-      this.data.forEach(item => {
-        legends.push(item.name)
-        this.total += item.value / 1
-        countMap[item.name] = item.value >= 0 ? item.value : 0
-      })
-      this.total = this.total.toFixed(this.setting.fixed)
-      const that = this
-      const options = {
-        color: this.setting.color,
-        title: {
-          text: this.data.title
-        },
-        tooltip: {
-          trigger: 'item',
-          confine: true,
-          // formatter: `{a} <br/>{b} : {c}${this.unit || ''} ({d}%)`,
-          formatter: function(params) {
-            const str = params.seriesName + '</br>' + params.name + ':' + (params.data.value >= 0 ? params.data.value : 0) + (that.unit ? that.unit : '') + '(' + (params.percent >= 0 ? params.percent : 0) + '%)'
-            return str
-          }
-        },
-        legend: {
-          // ...legend,
-          data: legends,
-          bottom: 0,
-          itemGap: 15,
-          formatter: name => {
-            const { legendLength = 10 } = this.setting
-            const resultName = `${name.substr(0, legendLength)}${name.length > legendLength ? '...' : ''}`
-            return `{name|${resultName}}{count|${countMap[name]}${that.unit || ''}}`
-          },
-          textStyle: {
-            rich: {
-              name: {
-                align: 'left',
-                color: legendColor || '#666',
-                width: 50
-              },
-              count: {
-                align: 'right',
-                color: legendColor || '#7e7e7e',
-                width: this.setting.richCount || 100,
-                fontWeight: 600
-              }
-            }
-          },
-          tooltip: {
-            show: true
-          },
-          ...this.setting.legend
-        },
-        toolbox: this.setting.toolbox,
-        series: [
-          {
-            name: this.theme,
-            type: 'pie',
-            avoidLabelOverlap: false,
-            hoverAnimation: false,
-            label: {
-              normal: {
-                show: true,
-                position: 'center',
-                formatter: function() {
-                  return `{count|${that.centerText}\r\n\r\n${that.total}${that.unit}}`
-                },
-                textStyle: {
-                  color: legendColor || '#5F6264'
-                },
-                rich: {
-                  count: {
-                    fontSize: 19,
-                    color: legendColor || '#5F6264'
-                  }
-                }
-              },
-              emphasis: {
-                show: false,
-                textStyle: {
-                  fontSize: '14',
-                  fontWeight: 'bold'
-                }
-              }
-            },
-            radius: this.setting.radius || ['50%', '65%'],
-            center: this.setting.center || ['50%', '50%'],
-            data: this.data
-          }
-        ],
-        ...this.options
-      }
-      this.chart.setOption(options, true)
-    }
-  }
-};
-</script>
-<style lang="scss" scoped>
-@import '../index';
-</style>

src/components/echarts/loop-charts/index.js

@@ -1,2 +0,0 @@
-import LoopCharts from './LoopCharts.vue';
-export default LoopCharts