first

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

ModuleHeader.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="module-box">
+    <div style="flex:0 1 25%">
+      <dv-border-box-13 style="width:100%;height:200px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">类型统计</h3>
+        <!-- <Chart /> -->
+        <div style="display: flex;justify-content: center;align-items: center;">
+          <dv-decoration-9 style="width:120px;height:120px;margin-right:30px;" dur=5><h1 style="color: rgba(255,215,0);">48</h1></dv-decoration-9>
+          <dv-decoration-9 style="width:120px;height:120px;margin-left: 30px;" dur=5><h1 style="color: rgba(255,215,0);">38</h1></dv-decoration-9>
+      </div> 
+       <div style="display: flex;justify-content: center;align-items: center;">
+        <span style="padding-right: 50px;">节点类型总数</span>
+        <span style="padding-left: 50px;">边类型总数</span>
+      </div>  
+
+      
+      </dv-border-box-13>
+
+      <dv-border-box-13 style="width:100%;height:400px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
+        <RadarChart/>
+        <!-- <dv-capsule-chart :config="config" style="width:100%;height:350px" /> -->
+      </dv-border-box-13>
+    </div>
+
+    <div style="flex:0 1 50%">
+      <dv-border-box-1 style="width:100%;height:600px;">
+       <!-- 图谱 -->
+       <iframe src="/static/3d-force-graph/index.html" ref="iframe" width="100%" height="600px" scrolling="no"></iframe>
+      </dv-border-box-1>
+    </div>
+
+    <div style="flex:0 1 25%">
+      <dv-border-box-13 style="width:100%;height:200px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">图谱统计</h3>
+        <div style="display: flex;justify-content: center;align-items: center;">
+          <dv-decoration-9 style="width:123px;height:123px;margin-right:30px;" dur=5><h2 style="color: rgba(255,215,0);">606041</h2></dv-decoration-9>
+          <dv-decoration-9 style="width:123px;height:123px;margin-left: 30px;" dur=5><h2 style="color: rgba(255,215,0);">1694475</h2></dv-decoration-9>
+      </div> 
+       <div style="display: flex;justify-content: center;align-items: center;">
+        <span style="padding-right: 60px;">节点总数</span>
+        <span style="padding-left: 55px;">边总数</span>
+      </div>  
+        <!-- <dv-capsule-chart :config="config" style="width:100%;height:300px" /> -->
+      </dv-border-box-13>
+
+      <dv-border-box-13 style="width:100%;height:400px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">区域分析</h3>
+        <!-- <dv-conical-column-chart :config="config3" style="width:100%;height:300px;" /> -->
+        <Map />
+      </dv-border-box-13>
+    </div>
+  </div>  
+      
+</template>
+
+<script>
+import Map from './Map.vue'
+import RadarChart from './RadarChart.vue'
+
+export default {
+  components:{
+    Map,
+    RadarChart
+  },
+  data(){
+    return {
+      config:{
+        data: [
+          {
+            name: '南阳',
+            value: 167
+          },
+          { 
+            name: '周口',
+            value: 67
+          },
+          {
+            name: '漯河',
+            value: 123
+          },
+          {
+            name: '郑州',
+            value: 55
+          },
+          {
+            name: '西峡',
+            value: 98
+          }
+        ],
+        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
+        unit: '单位',
+        showValue: true
+      },
+      config2:{
+        data: [66, 45],
+        shape: 'roundRect'
+      },
+      config3:{
+        data: [
+          {
+            name: '周口',
+            value: 55
+          },
+          {
+            name: '南阳',
+            value: 120
+          },
+          {
+            name: '西峡',
+            value: 71
+          },
+          {
+            name: '驻马店',
+            value: 66
+          },
+          {
+            name: '新乡',
+            value: 80
+          },
+          {
+            name: '信阳',
+            value: 35
+          },
+          {
+            name: '漯河',
+            value: 15
+          }
+        ],
+        img: [
+          require('../assets/img/1st.png'),
+          require('../assets/img/2st.png'),
+          require('../assets/img/3st.png'),
+          require('../assets/img/4st.png'),
+          require('../assets/img/5st.png'),
+          require('../assets/img/6st.png'),
+          require('../assets/img/7st.png'),
+        ]
+      },
+      config4:{
+        centerPoint: [0.48, 0.35],
+        points: [
+          {
+            position: [0.52, 0.235],
+            text: '新乡'
+          },
+          {
+            position: [0.43, 0.29],
+            text: '焦作'
+          },
+          {
+            position: [0.59, 0.35],
+            text: '开封'
+          },
+          {
+            position: [0.53, 0.47],
+            text: '许昌'
+          },
+          {
+            position: [0.45, 0.54],
+            text: '平顶山'
+          },
+          {
+            position: [0.36, 0.38],
+            text: '洛阳'
+          },
+          {
+            position: [0.62, 0.55],
+            text: '周口'
+          },
+          {
+            position: [0.56, 0.56],
+            text: '漯河'
+          },
+          {
+            position: [0.37, 0.66],
+            text: '南阳'
+          },
+          {
+            position: [0.55, 0.81],
+            text: '信阳'
+          },
+          {
+            position: [0.55, 0.67],
+            text: '驻马店'
+          },
+          {
+            position: [0.37, 0.29],
+            text: '济源'
+          },
+          {
+            position: [0.20, 0.36],
+            text: '三门峡'
+          },
+          {
+            position: [0.76, 0.41],
+            text: '商丘'
+          },
+          {
+            position: [0.59, 0.18],
+            text: '鹤壁'
+          },
+          {
+            position: [0.68, 0.17],
+            text: '濮阳'
+          },
+          {
+            position: [0.59, 0.10],
+            text: '安阳'
+          }
+        ],
+        bgImgUrl: require('../assets/img/map.jpg'),
+        centerPointImg: {
+          url: require('../assets/img/mapCenterPoint.png')
+        },
+        pointsImg: {
+          url: require('../assets/img/mapPoint.png')
+        }
+      }
+    }
+  }
+
+}
+</script>

babel.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
+
+// module.exports = {
+//   presets: [
+//     '@vue/cli-plugin-babel/preset',
+//     ["@babel/preset-env", { "modules": false }]
+//   ],
+//   plugins: [
+//     [
+// 	      "@babel/plugin-transform-runtime",
+// 	      {
+// 	        "corejs": 2,
+// 	        "sourceType": "unambiguous"
+// 	      }
+// 	],
+
+//   ]
+  
+// }

jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

package.json

@@ -0,0 +1,70 @@
+{
+  "name": "finacial",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@jiaminghi/data-view": "^2.10.0",
+    "axios": "^1.4.0",
+    "core-js": "^3.8.3",
+    "cytoscape": "^3.27.0",
+    "cytoscape-all-paths": "^0.1.0",
+    "cytoscape-automove": "^1.10.3",
+    "cytoscape-bubblesets": "^3.2.0",
+    "cytoscape-cxtmenu": "^3.5.0",
+    "cytoscape-euler": "^1.2.2",
+    "cytoscape-expand-collapse": "^4.1.0",
+    "cytoscape-layers": "^2.4.3",
+    "cytoscape-spread": "^3.0.0",
+    "cytoscape-undo-redo": "^1.3.3",
+    "d3": "^7.8.5",
+    "echarts": "^4.9.0",
+    "element-ui": "^2.15.13",
+    "less": "^4.1.2",
+    "less-loader": "^6.0.0",
+    "mockjs": "^1.1.0",
+    "node-sass": "^9.0.0",
+    "sass-loader": "^13.3.2",
+    "v-contextmenu": "^2.9.2",
+    "vue": "^2.6.14",
+    "vue-contextmenu": "^1.5.11",
+    "vue-router": "^3.6.5",
+    "vue-seamless-scroll": "^1.1.23",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@babel/preset-env": "^7.22.9",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "babel-plugin-component": "^1.1.1",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

public/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="">
+  <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="Logo.ico"> -->
+    <link rel="icon" href="Logo.ico">
+    <title>资本市场系统性风险平台</title>
+
+  </head>
+  <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>

public/static/3d-force-graph/data/three-spritetext.mjs

@@ -0,0 +1,444 @@
+import { CanvasTexture, Sprite, SpriteMaterial, SRGBColorSpace } from 'three';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _assertThisInitialized(e) {
+  if (undefined === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e, _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+function _classCallCheck(a, n) {
+  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+}
+function _defineProperties(e, r) {
+  for (var t = 0; t < r.length; t++) {
+    var o = r[t];
+    o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
+  }
+}
+function _createClass(e, r, t) {
+  return _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
+    writable: false
+  }), e;
+}
+function _getPrototypeOf(t) {
+  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
+    return t.__proto__ || Object.getPrototypeOf(t);
+  }, _getPrototypeOf(t);
+}
+function _inherits(t, e) {
+  if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
+  t.prototype = Object.create(e && e.prototype, {
+    constructor: {
+      value: t,
+      writable: true,
+      configurable: true
+    }
+  }), Object.defineProperty(t, "prototype", {
+    writable: false
+  }), e && _setPrototypeOf(t, e);
+}
+function _isNativeReflectConstruct() {
+  try {
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+  } catch (t) {}
+  return (_isNativeReflectConstruct = function () {
+    return !!t;
+  })();
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _possibleConstructorReturn(t, e) {
+  if (e && ("object" == typeof e || "function" == typeof e)) return e;
+  if (undefined !== e) throw new TypeError("Derived constructors may only return object or undefined");
+  return _assertThisInitialized(t);
+}
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (undefined !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (String )(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : undefined;
+  }
+}
+
+var three = typeof window !== 'undefined' && window.THREE ? window.THREE // Prefer consumption from global THREE, if exists
+: {
+  CanvasTexture: CanvasTexture,
+  Sprite: Sprite,
+  SpriteMaterial: SpriteMaterial,
+  SRGBColorSpace: SRGBColorSpace
+};
+var _default = /*#__PURE__*/function (_three$Sprite) {
+  function _default() {
+    var _this;
+    var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var textHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
+    var color = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rgba(255, 255, 255, 1)';
+    _classCallCheck(this, _default);
+    _this = _callSuper(this, _default, [new three.SpriteMaterial()]);
+    _this._text = "".concat(text);
+    _this._textHeight = textHeight;
+    _this._color = color;
+    _this._backgroundColor = false; // no background color
+
+    _this._padding = 0;
+    _this._borderWidth = 0;
+    _this._borderRadius = 0;
+    _this._borderColor = 'white';
+    _this._strokeWidth = 0;
+    _this._strokeColor = 'white';
+    _this._fontFace = 'system-ui';
+    _this._fontSize = 90; // defines text resolution
+    _this._fontWeight = 'normal';
+    _this._canvas = document.createElement('canvas');
+    _this._genCanvas();
+    return _this;
+  }
+  _inherits(_default, _three$Sprite);
+  return _createClass(_default, [{
+    key: "text",
+    get: function get() {
+      return this._text;
+    },
+    set: function set(text) {
+      this._text = text;
+      this._genCanvas();
+    }
+  }, {
+    key: "textHeight",
+    get: function get() {
+      return this._textHeight;
+    },
+    set: function set(textHeight) {
+      this._textHeight = textHeight;
+      this._genCanvas();
+    }
+  }, {
+    key: "color",
+    get: function get() {
+      return this._color;
+    },
+    set: function set(color) {
+      this._color = color;
+      this._genCanvas();
+    }
+  }, {
+    key: "backgroundColor",
+    get: function get() {
+      return this._backgroundColor;
+    },
+    set: function set(color) {
+      this._backgroundColor = color;
+      this._genCanvas();
+    }
+  }, {
+    key: "padding",
+    get: function get() {
+      return this._padding;
+    },
+    set: function set(padding) {
+      this._padding = padding;
+      this._genCanvas();
+    }
+  }, {
+    key: "borderWidth",
+    get: function get() {
+      return this._borderWidth;
+    },
+    set: function set(borderWidth) {
+      this._borderWidth = borderWidth;
+      this._genCanvas();
+    }
+  }, {
+    key: "borderRadius",
+    get: function get() {
+      return this._borderRadius;
+    },
+    set: function set(borderRadius) {
+      this._borderRadius = borderRadius;
+      this._genCanvas();
+    }
+  }, {
+    key: "borderColor",
+    get: function get() {
+      return this._borderColor;
+    },
+    set: function set(borderColor) {
+      this._borderColor = borderColor;
+      this._genCanvas();
+    }
+  }, {
+    key: "fontFace",
+    get: function get() {
+      return this._fontFace;
+    },
+    set: function set(fontFace) {
+      this._fontFace = fontFace;
+      this._genCanvas();
+    }
+  }, {
+    key: "fontSize",
+    get: function get() {
+      return this._fontSize;
+    },
+    set: function set(fontSize) {
+      this._fontSize = fontSize;
+      this._genCanvas();
+    }
+  }, {
+    key: "fontWeight",
+    get: function get() {
+      return this._fontWeight;
+    },
+    set: function set(fontWeight) {
+      this._fontWeight = fontWeight;
+      this._genCanvas();
+    }
+  }, {
+    key: "strokeWidth",
+    get: function get() {
+      return this._strokeWidth;
+    },
+    set: function set(strokeWidth) {
+      this._strokeWidth = strokeWidth;
+      this._genCanvas();
+    }
+  }, {
+    key: "strokeColor",
+    get: function get() {
+      return this._strokeColor;
+    },
+    set: function set(strokeColor) {
+      this._strokeColor = strokeColor;
+      this._genCanvas();
+    }
+  }, {
+    key: "_genCanvas",
+    value: function _genCanvas() {
+      var _this2 = this;
+      var canvas = this._canvas;
+      var ctx = canvas.getContext('2d');
+      var relFactor = 1 / this.textHeight;
+      var border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
+      var relBorder = border.map(function (b) {
+        return b * _this2.fontSize * relFactor;
+      }); // border in canvas units
+
+      var borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius]; // tl tr br bl corners
+      var relBorderRadius = borderRadius.map(function (b) {
+        return b * _this2.fontSize * relFactor;
+      }); // border radius in canvas units
+
+      var padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
+      var relPadding = padding.map(function (p) {
+        return p * _this2.fontSize * relFactor;
+      }); // padding in canvas units
+
+      var lines = this.text.split('\n');
+      var font = "".concat(this.fontWeight, " ").concat(this.fontSize, "px ").concat(this.fontFace);
+      ctx.font = font; // measure canvas with appropriate font
+      var innerWidth = Math.max.apply(Math, _toConsumableArray(lines.map(function (line) {
+        return ctx.measureText(line).width;
+      })));
+      var innerHeight = this.fontSize * lines.length;
+      canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
+      canvas.height = innerHeight + relBorder[1] * 2 + relPadding[1] * 2;
+
+      // paint border
+      if (this.borderWidth) {
+        ctx.strokeStyle = this.borderColor;
+        if (relBorder[0]) {
+          // left + right borders
+          var hb = relBorder[0] / 2;
+          ctx.lineWidth = relBorder[0];
+          ctx.beginPath();
+          ctx.moveTo(hb, relBorderRadius[0]);
+          ctx.lineTo(hb, canvas.height - relBorderRadius[3]);
+          ctx.moveTo(canvas.width - hb, relBorderRadius[1]);
+          ctx.lineTo(canvas.width - hb, canvas.height - relBorderRadius[2]);
+          ctx.stroke();
+        }
+        if (relBorder[1]) {
+          // top + bottom borders
+          var _hb = relBorder[1] / 2;
+          ctx.lineWidth = relBorder[1];
+          ctx.beginPath();
+          ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), _hb);
+          ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[1]), _hb);
+          ctx.moveTo(Math.max(relBorder[0], relBorderRadius[3]), canvas.height - _hb);
+          ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), canvas.height - _hb);
+          ctx.stroke();
+        }
+        if (this.borderRadius) {
+          // strike rounded corners
+          var cornerWidth = Math.max.apply(Math, _toConsumableArray(relBorder));
+          var _hb2 = cornerWidth / 2;
+          ctx.lineWidth = cornerWidth;
+          ctx.beginPath();
+          [!!relBorderRadius[0] && [relBorderRadius[0], _hb2, _hb2, relBorderRadius[0]], !!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - _hb2, _hb2, relBorderRadius[1]], !!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - _hb2, canvas.height - _hb2, canvas.height - relBorderRadius[2]], !!relBorderRadius[3] && [relBorderRadius[3], _hb2, canvas.height - _hb2, canvas.height - relBorderRadius[3]]].filter(function (d) {
+            return d;
+          }).forEach(function (_ref) {
+            var _ref2 = _slicedToArray(_ref, 4),
+              x0 = _ref2[0],
+              x1 = _ref2[1],
+              y0 = _ref2[2],
+              y1 = _ref2[3];
+            ctx.moveTo(x0, y0);
+            ctx.quadraticCurveTo(x1, y0, x1, y1);
+          });
+          ctx.stroke();
+        }
+      }
+
+      // paint background
+      if (this.backgroundColor) {
+        ctx.fillStyle = this.backgroundColor;
+        if (!this.borderRadius) {
+          ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, canvas.height - relBorder[1] * 2);
+        } else {
+          // fill with rounded corners
+          ctx.beginPath();
+          ctx.moveTo(relBorder[0], relBorderRadius[0]);
+          [[relBorder[0], relBorderRadius[0], canvas.width - relBorderRadius[1], relBorder[1], relBorder[1], relBorder[1]],
+          // t
+          [canvas.width - relBorder[0], canvas.width - relBorder[0], canvas.width - relBorder[0], relBorder[1], relBorderRadius[1], canvas.height - relBorderRadius[2]],
+          // r
+          [canvas.width - relBorder[0], canvas.width - relBorderRadius[2], relBorderRadius[3], canvas.height - relBorder[1], canvas.height - relBorder[1], canvas.height - relBorder[1]],
+          // b
+          [relBorder[0], relBorder[0], relBorder[0], canvas.height - relBorder[1], canvas.height - relBorderRadius[3], relBorderRadius[0]] // t
+          ].forEach(function (_ref3) {
+            var _ref4 = _slicedToArray(_ref3, 6),
+              x0 = _ref4[0],
+              x1 = _ref4[1],
+              x2 = _ref4[2],
+              y0 = _ref4[3],
+              y1 = _ref4[4],
+              y2 = _ref4[5];
+            ctx.quadraticCurveTo(x0, y0, x1, y1);
+            ctx.lineTo(x2, y2);
+          });
+          ctx.closePath();
+          ctx.fill();
+        }
+      }
+      ctx.translate.apply(ctx, _toConsumableArray(relBorder));
+      ctx.translate.apply(ctx, _toConsumableArray(relPadding));
+
+      // paint text
+      ctx.font = font; // Set font again after canvas is resized, as context properties are reset
+      ctx.fillStyle = this.color;
+      ctx.textBaseline = 'bottom';
+      var drawTextStroke = this.strokeWidth > 0;
+      if (drawTextStroke) {
+        ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
+        ctx.strokeStyle = this.strokeColor;
+      }
+      lines.forEach(function (line, index) {
+        var lineX = (innerWidth - ctx.measureText(line).width) / 2;
+        var lineY = (index + 1) * _this2.fontSize;
+        drawTextStroke && ctx.strokeText(line, lineX, lineY);
+        ctx.fillText(line, lineX, lineY);
+      });
+
+      // Inject canvas into sprite
+      if (this.material.map) this.material.map.dispose(); // gc previous texture
+      var texture = this.material.map = new three.CanvasTexture(canvas);
+      texture.colorSpace = three.SRGBColorSpace;
+      var yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
+      this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
+    }
+  }, {
+    key: "clone",
+    value: function clone() {
+      return new this.constructor(this.text, this.textHeight, this.color).copy(this);
+    }
+  }, {
+    key: "copy",
+    value: function copy(source) {
+      three.Sprite.prototype.copy.call(this, source);
+      this.color = source.color;
+      this.backgroundColor = source.backgroundColor;
+      this.padding = source.padding;
+      this.borderWidth = source.borderWidth;
+      this.borderColor = source.borderColor;
+      this.fontFace = source.fontFace;
+      this.fontSize = source.fontSize;
+      this.fontWeight = source.fontWeight;
+      this.strokeWidth = source.strokeWidth;
+      this.strokeColor = source.strokeColor;
+      return this;
+    }
+  }]);
+}(three.Sprite);
+
+export { _default as default };

public/static/3d-force-graph/index-shiny.html

@@ -0,0 +1,29 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="3d-force-graph.min.js"></script>
+<!--  <script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <!-- <script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script> -->
+  <script src="../../../node_modules/three/build/three.module.js"></script>
+  <script type="module">
+    import { UnrealBloomPass } from '../../../node_modules/three/examples/jsm/postprocessing/UnrealBloomPass.js';
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .backgroundColor('#000003')
+        .jsonUrl('../datasets/miserables.json')
+        .nodeLabel('id')
+        .nodeAutoColorBy('group');
+
+    const bloomPass = new UnrealBloomPass();
+    bloomPass.strength = 4;
+    bloomPass.radius = 1;
+    bloomPass.threshold = 0;
+    Graph.postProcessingComposer().addPass(bloomPass);
+  </script>
+</body>

public/static/3d-force-graph/index.html

@@ -0,0 +1,80 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="3d-force-graph.min.js"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+  <div style="position: absolute; top: 5px; right: 5px;">
+    <button id="rotationToggle" style="margin: 8px; height: 25px; width: 150px;">
+      暂停旋转
+    </button>
+  </div>
+  <script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
+  <script type="module">
+    import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
+
+    const distance = 500;
+    let isRotationActive = true;
+
+    // Random tree
+    // const N = 300;
+    // const gData = {
+    //   nodes: [...Array(N).keys()].map(i => ({ id: i,group:Math.floor(i/7) })),
+    //   links: [...Array(N).keys()]
+    //     .filter(id => id)
+    //     .map(id => ({
+    //       source: id,
+    //       target: Math.round(Math.random() * (id-1))
+    //     }))
+    // };
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        // .graphData(gData)
+        .jsonUrl('./miserables.json')
+        .nodeAutoColorBy('group')
+        // .nodeLabel('id')
+        // .linkDirectionalParticles("value")
+        // .linkDirectionalParticleWidth(2)
+        // .linkDirectionalParticleSpeed(d => d.value * 0.001)
+        // .linkWidth(2)
+        .nodeThreeObject(node => {// 借助三方库 实现文字几何的展示
+          const sprite = new SpriteText(node.id);
+          sprite.material.depthWrite = false; // make sprite background transparent
+          sprite.color = node.color;// node.color
+          sprite.textHeight = 8;
+          return sprite;
+        })
+        .linkDirectionalArrowLength(3)// 让边带上箭头
+        .linkDirectionalArrowRelPos(1)// 设置箭头位置
+        .cameraPosition({ z: distance })
+
+    // Spread nodes a little wider
+    // Graph.d3Force('charge').strength(-120);
+
+    // camera orbit
+    let angle = 0;
+    let time = setInterval(() => {
+      if (isRotationActive) {
+        Graph.cameraPosition({
+          x: distance * Math.sin(angle),
+          y: 0,
+          z: distance * Math.cos(angle),
+        });
+        angle += Math.PI / 300;
+      }
+    }, 10);
+
+    document.getElementById('rotationToggle').addEventListener('click', event => {
+      if(isRotationActive){
+      isRotationActive = !isRotationActive
+      }else{
+      isRotationActive = !isRotationActive
+    }
+      event.target.innerHTML = `${(isRotationActive ? '暂停' : '重置')} 旋转`;
+    });
+
+  </script>
+</body>

public/static/3d-force-graph/index0.html

@@ -0,0 +1,28 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="3d-force-graph.min.js"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    // Random tree
+    const N = 1500;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .graphData(gData);
+  </script>
+</body>

public/static/3d-force-graph/index1.html

@@ -0,0 +1,96 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="3d-force-graph.min.js"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+  <div style="position: absolute; top: 5px; right: 5px;">
+    <button id="rotationToggle" style="margin: 8px; height: 25px; width: 150px;">
+      暂停旋转
+    </button>
+  </div>
+  <script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
+  <script type="module">
+    import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
+
+    const distance = 2000;
+    let isRotationActive = true;
+
+    // Random tree
+    const N = 1200;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i,group:Math.floor(i/150) })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .graphData(gData)
+        // .jsonUrl('./miserables.json')
+        .nodeAutoColorBy('group')
+        .nodeLabel('id')
+        .linkDirectionalParticles(4)
+        .linkDirectionalParticleWidth(4)
+        .linkDirectionalParticleSpeed(d => 4 * 0.001)// d.value
+        .linkWidth(4)
+        .nodeRelSize(6)
+        // .nodeThreeObject(node => {// 借助三方库 实现文字几何的展示
+        //   const sprite = new SpriteText(node.id);
+        //   sprite.material.depthWrite = false; // make sprite background transparent
+        //   sprite.color = node.color;// node.color
+        //   sprite.textHeight = 8;
+        //   return sprite;
+        // })
+        // .linkDirectionalArrowLength(3)// 让边带上箭头
+        // .linkDirectionalArrowRelPos(1)// 设置箭头位置
+        .onNodeClick(node => {
+          // Aim at node from outside it
+          const distance = 1800;
+          const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
+
+          const newPos = node.x || node.y || node.z
+            ? { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }
+            : { x: 0, y: 0, z: distance }; // special case if node is in (0,0,0)
+
+          Graph.cameraPosition(
+            newPos, // new position
+            node, // lookAt ({ x, y, z })
+            3000  // ms transition duration
+          )
+        })
+        .cameraPosition({ z: distance })
+
+    // Spread nodes a little wider
+    // Graph.d3Force('charge').strength(-120);
+
+    // camera orbit
+    let angle = 0;
+    let time = setInterval(() => {
+      if (isRotationActive) {
+        Graph.cameraPosition({
+          x: distance * Math.sin(angle),
+          y: 0,
+          z: distance * Math.cos(angle),
+        });
+        angle += Math.PI / 500;
+      }
+    }, 10);
+
+    document.getElementById('rotationToggle').addEventListener('click', event => {
+      if(isRotationActive){
+      isRotationActive = !isRotationActive
+      }else{
+      isRotationActive = !isRotationActive
+    }
+      event.target.innerHTML = `${(isRotationActive ? '暂停' : '重置')} 旋转`;
+    });
+
+  </script>
+</body>

public/static/3d-force-graph/miserables.json

@@ -0,0 +1,337 @@
+{
+  "nodes": [
+    {"id": "Myriel", "group": 1},
+    {"id": "Napoleon", "group": 1},
+    {"id": "Mlle.Baptistine", "group": 1},
+    {"id": "Mme.Magloire", "group": 1},
+    {"id": "CountessdeLo", "group": 1},
+    {"id": "Geborand", "group": 1},
+    {"id": "Champtercier", "group": 1},
+    {"id": "Cravatte", "group": 1},
+    {"id": "Count", "group": 1},
+    {"id": "OldMan", "group": 1},
+    {"id": "Labarre", "group": 2},
+    {"id": "Valjean", "group": 2},
+    {"id": "Marguerite", "group": 3},
+    {"id": "Mme.deR", "group": 2},
+    {"id": "Isabeau", "group": 2},
+    {"id": "Gervais", "group": 2},
+    {"id": "Tholomyes", "group": 3},
+    {"id": "Listolier", "group": 3},
+    {"id": "Fameuil", "group": 3},
+    {"id": "Blacheville", "group": 3},
+    {"id": "Favourite", "group": 3},
+    {"id": "Dahlia", "group": 3},
+    {"id": "Zephine", "group": 3},
+    {"id": "Fantine", "group": 3},
+    {"id": "Mme.Thenardier", "group": 4},
+    {"id": "Thenardier", "group": 4},
+    {"id": "Cosette", "group": 5},
+    {"id": "Javert", "group": 4},
+    {"id": "Fauchelevent", "group": 0},
+    {"id": "Bamatabois", "group": 2},
+    {"id": "Perpetue", "group": 3},
+    {"id": "Simplice", "group": 2},
+    {"id": "Scaufflaire", "group": 2},
+    {"id": "Woman1", "group": 2},
+    {"id": "Judge", "group": 2},
+    {"id": "Champmathieu", "group": 2},
+    {"id": "Brevet", "group": 2},
+    {"id": "Chenildieu", "group": 2},
+    {"id": "Cochepaille", "group": 2},
+    {"id": "Pontmercy", "group": 4},
+    {"id": "Boulatruelle", "group": 6},
+    {"id": "Eponine", "group": 4},
+    {"id": "Anzelma", "group": 4},
+    {"id": "Woman2", "group": 5},
+    {"id": "MotherInnocent", "group": 0},
+    {"id": "Gribier", "group": 0},
+    {"id": "Jondrette", "group": 7},
+    {"id": "Mme.Burgon", "group": 7},
+    {"id": "Gavroche", "group": 8},
+    {"id": "Gillenormand", "group": 5},
+    {"id": "Magnon", "group": 5},
+    {"id": "Mlle.Gillenormand", "group": 5},
+    {"id": "Mme.Pontmercy", "group": 5},
+    {"id": "Mlle.Vaubois", "group": 5},
+    {"id": "Lt.Gillenormand", "group": 5},
+    {"id": "Marius", "group": 8},
+    {"id": "BaronessT", "group": 5},
+    {"id": "Mabeuf", "group": 8},
+    {"id": "Enjolras", "group": 8},
+    {"id": "Combeferre", "group": 8},
+    {"id": "Prouvaire", "group": 8},
+    {"id": "Feuilly", "group": 8},
+    {"id": "Courfeyrac", "group": 8},
+    {"id": "Bahorel", "group": 8},
+    {"id": "Bossuet", "group": 8},
+    {"id": "Joly", "group": 8},
+    {"id": "Grantaire", "group": 8},
+    {"id": "MotherPlutarch", "group": 9},
+    {"id": "Gueulemer", "group": 4},
+    {"id": "Babet", "group": 4},
+    {"id": "Claquesous", "group": 4},
+    {"id": "Montparnasse", "group": 4},
+    {"id": "Toussaint", "group": 5},
+    {"id": "Child1", "group": 10},
+    {"id": "Child2", "group": 10},
+    {"id": "Brujon", "group": 4},
+    {"id": "Mme.Hucheloup", "group": 8}
+  ],
+  "links": [
+    {"source": "Napoleon", "target": "Myriel", "value": 1},
+    {"source": "Mlle.Baptistine", "target": "Myriel", "value": 8},
+    {"source": "Mme.Magloire", "target": "Myriel", "value": 10},
+    {"source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6},
+    {"source": "CountessdeLo", "target": "Myriel", "value": 1},
+    {"source": "Geborand", "target": "Myriel", "value": 1},
+    {"source": "Champtercier", "target": "Myriel", "value": 1},
+    {"source": "Cravatte", "target": "Myriel", "value": 1},
+    {"source": "Count", "target": "Myriel", "value": 2},
+    {"source": "OldMan", "target": "Myriel", "value": 1},
+    {"source": "Valjean", "target": "Labarre", "value": 1},
+    {"source": "Valjean", "target": "Mme.Magloire", "value": 3},
+    {"source": "Valjean", "target": "Mlle.Baptistine", "value": 3},
+    {"source": "Valjean", "target": "Myriel", "value": 5},
+    {"source": "Marguerite", "target": "Valjean", "value": 1},
+    {"source": "Mme.deR", "target": "Valjean", "value": 1},
+    {"source": "Isabeau", "target": "Valjean", "value": 1},
+    {"source": "Gervais", "target": "Valjean", "value": 1},
+    {"source": "Listolier", "target": "Tholomyes", "value": 4},
+    {"source": "Fameuil", "target": "Tholomyes", "value": 4},
+    {"source": "Fameuil", "target": "Listolier", "value": 4},
+    {"source": "Blacheville", "target": "Tholomyes", "value": 4},
+    {"source": "Blacheville", "target": "Listolier", "value": 4},
+    {"source": "Blacheville", "target": "Fameuil", "value": 4},
+    {"source": "Favourite", "target": "Tholomyes", "value": 3},
+    {"source": "Favourite", "target": "Listolier", "value": 3},
+    {"source": "Favourite", "target": "Fameuil", "value": 3},
+    {"source": "Favourite", "target": "Blacheville", "value": 4},
+    {"source": "Dahlia", "target": "Tholomyes", "value": 3},
+    {"source": "Dahlia", "target": "Listolier", "value": 3},
+    {"source": "Dahlia", "target": "Fameuil", "value": 3},
+    {"source": "Dahlia", "target": "Blacheville", "value": 3},
+    {"source": "Dahlia", "target": "Favourite", "value": 5},
+    {"source": "Zephine", "target": "Tholomyes", "value": 3},
+    {"source": "Zephine", "target": "Listolier", "value": 3},
+    {"source": "Zephine", "target": "Fameuil", "value": 3},
+    {"source": "Zephine", "target": "Blacheville", "value": 3},
+    {"source": "Zephine", "target": "Favourite", "value": 4},
+    {"source": "Zephine", "target": "Dahlia", "value": 4},
+    {"source": "Fantine", "target": "Tholomyes", "value": 3},
+    {"source": "Fantine", "target": "Listolier", "value": 3},
+    {"source": "Fantine", "target": "Fameuil", "value": 3},
+    {"source": "Fantine", "target": "Blacheville", "value": 3},
+    {"source": "Fantine", "target": "Favourite", "value": 4},
+    {"source": "Fantine", "target": "Dahlia", "value": 4},
+    {"source": "Fantine", "target": "Zephine", "value": 4},
+    {"source": "Fantine", "target": "Marguerite", "value": 2},
+    {"source": "Fantine", "target": "Valjean", "value": 9},
+    {"source": "Mme.Thenardier", "target": "Fantine", "value": 2},
+    {"source": "Mme.Thenardier", "target": "Valjean", "value": 7},
+    {"source": "Thenardier", "target": "Mme.Thenardier", "value": 13},
+    {"source": "Thenardier", "target": "Fantine", "value": 1},
+    {"source": "Thenardier", "target": "Valjean", "value": 12},
+    {"source": "Cosette", "target": "Mme.Thenardier", "value": 4},
+    {"source": "Cosette", "target": "Valjean", "value": 31},
+    {"source": "Cosette", "target": "Tholomyes", "value": 1},
+    {"source": "Cosette", "target": "Thenardier", "value": 1},
+    {"source": "Javert", "target": "Valjean", "value": 17},
+    {"source": "Javert", "target": "Fantine", "value": 5},
+    {"source": "Javert", "target": "Thenardier", "value": 5},
+    {"source": "Javert", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Javert", "target": "Cosette", "value": 1},
+    {"source": "Fauchelevent", "target": "Valjean", "value": 8},
+    {"source": "Fauchelevent", "target": "Javert", "value": 1},
+    {"source": "Bamatabois", "target": "Fantine", "value": 1},
+    {"source": "Bamatabois", "target": "Javert", "value": 1},
+    {"source": "Bamatabois", "target": "Valjean", "value": 2},
+    {"source": "Perpetue", "target": "Fantine", "value": 1},
+    {"source": "Simplice", "target": "Perpetue", "value": 2},
+    {"source": "Simplice", "target": "Valjean", "value": 3},
+    {"source": "Simplice", "target": "Fantine", "value": 2},
+    {"source": "Simplice", "target": "Javert", "value": 1},
+    {"source": "Scaufflaire", "target": "Valjean", "value": 1},
+    {"source": "Woman1", "target": "Valjean", "value": 2},
+    {"source": "Woman1", "target": "Javert", "value": 1},
+    {"source": "Judge", "target": "Valjean", "value": 3},
+    {"source": "Judge", "target": "Bamatabois", "value": 2},
+    {"source": "Champmathieu", "target": "Valjean", "value": 3},
+    {"source": "Champmathieu", "target": "Judge", "value": 3},
+    {"source": "Champmathieu", "target": "Bamatabois", "value": 2},
+    {"source": "Brevet", "target": "Judge", "value": 2},
+    {"source": "Brevet", "target": "Champmathieu", "value": 2},
+    {"source": "Brevet", "target": "Valjean", "value": 2},
+    {"source": "Brevet", "target": "Bamatabois", "value": 1},
+    {"source": "Chenildieu", "target": "Judge", "value": 2},
+    {"source": "Chenildieu", "target": "Champmathieu", "value": 2},
+    {"source": "Chenildieu", "target": "Brevet", "value": 2},
+    {"source": "Chenildieu", "target": "Valjean", "value": 2},
+    {"source": "Chenildieu", "target": "Bamatabois", "value": 1},
+    {"source": "Cochepaille", "target": "Judge", "value": 2},
+    {"source": "Cochepaille", "target": "Champmathieu", "value": 2},
+    {"source": "Cochepaille", "target": "Brevet", "value": 2},
+    {"source": "Cochepaille", "target": "Chenildieu", "value": 2},
+    {"source": "Cochepaille", "target": "Valjean", "value": 2},
+    {"source": "Cochepaille", "target": "Bamatabois", "value": 1},
+    {"source": "Pontmercy", "target": "Thenardier", "value": 1},
+    {"source": "Boulatruelle", "target": "Thenardier", "value": 1},
+    {"source": "Eponine", "target": "Mme.Thenardier", "value": 2},
+    {"source": "Eponine", "target": "Thenardier", "value": 3},
+    {"source": "Anzelma", "target": "Eponine", "value": 2},
+    {"source": "Anzelma", "target": "Thenardier", "value": 2},
+    {"source": "Anzelma", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Woman2", "target": "Valjean", "value": 3},
+    {"source": "Woman2", "target": "Cosette", "value": 1},
+    {"source": "Woman2", "target": "Javert", "value": 1},
+    {"source": "MotherInnocent", "target": "Fauchelevent", "value": 3},
+    {"source": "MotherInnocent", "target": "Valjean", "value": 1},
+    {"source": "Gribier", "target": "Fauchelevent", "value": 2},
+    {"source": "Mme.Burgon", "target": "Jondrette", "value": 1},
+    {"source": "Gavroche", "target": "Mme.Burgon", "value": 2},
+    {"source": "Gavroche", "target": "Thenardier", "value": 1},
+    {"source": "Gavroche", "target": "Javert", "value": 1},
+    {"source": "Gavroche", "target": "Valjean", "value": 1},
+    {"source": "Gillenormand", "target": "Cosette", "value": 3},
+    {"source": "Gillenormand", "target": "Valjean", "value": 2},
+    {"source": "Magnon", "target": "Gillenormand", "value": 1},
+    {"source": "Magnon", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9},
+    {"source": "Mlle.Gillenormand", "target": "Cosette", "value": 2},
+    {"source": "Mlle.Gillenormand", "target": "Valjean", "value": 2},
+    {"source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1},
+    {"source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1},
+    {"source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1},
+    {"source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2},
+    {"source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1},
+    {"source": "Lt.Gillenormand", "target": "Cosette", "value": 1},
+    {"source": "Marius", "target": "Mlle.Gillenormand", "value": 6},
+    {"source": "Marius", "target": "Gillenormand", "value": 12},
+    {"source": "Marius", "target": "Pontmercy", "value": 1},
+    {"source": "Marius", "target": "Lt.Gillenormand", "value": 1},
+    {"source": "Marius", "target": "Cosette", "value": 21},
+    {"source": "Marius", "target": "Valjean", "value": 19},
+    {"source": "Marius", "target": "Tholomyes", "value": 1},
+    {"source": "Marius", "target": "Thenardier", "value": 2},
+    {"source": "Marius", "target": "Eponine", "value": 5},
+    {"source": "Marius", "target": "Gavroche", "value": 4},
+    {"source": "BaronessT", "target": "Gillenormand", "value": 1},
+    {"source": "BaronessT", "target": "Marius", "value": 1},
+    {"source": "Mabeuf", "target": "Marius", "value": 1},
+    {"source": "Mabeuf", "target": "Eponine", "value": 1},
+    {"source": "Mabeuf", "target": "Gavroche", "value": 1},
+    {"source": "Enjolras", "target": "Marius", "value": 7},
+    {"source": "Enjolras", "target": "Gavroche", "value": 7},
+    {"source": "Enjolras", "target": "Javert", "value": 6},
+    {"source": "Enjolras", "target": "Mabeuf", "value": 1},
+    {"source": "Enjolras", "target": "Valjean", "value": 4},
+    {"source": "Combeferre", "target": "Enjolras", "value": 15},
+    {"source": "Combeferre", "target": "Marius", "value": 5},
+    {"source": "Combeferre", "target": "Gavroche", "value": 6},
+    {"source": "Combeferre", "target": "Mabeuf", "value": 2},
+    {"source": "Prouvaire", "target": "Gavroche", "value": 1},
+    {"source": "Prouvaire", "target": "Enjolras", "value": 4},
+    {"source": "Prouvaire", "target": "Combeferre", "value": 2},
+    {"source": "Feuilly", "target": "Gavroche", "value": 2},
+    {"source": "Feuilly", "target": "Enjolras", "value": 6},
+    {"source": "Feuilly", "target": "Prouvaire", "value": 2},
+    {"source": "Feuilly", "target": "Combeferre", "value": 5},
+    {"source": "Feuilly", "target": "Mabeuf", "value": 1},
+    {"source": "Feuilly", "target": "Marius", "value": 1},
+    {"source": "Courfeyrac", "target": "Marius", "value": 9},
+    {"source": "Courfeyrac", "target": "Enjolras", "value": 17},
+    {"source": "Courfeyrac", "target": "Combeferre", "value": 13},
+    {"source": "Courfeyrac", "target": "Gavroche", "value": 7},
+    {"source": "Courfeyrac", "target": "Mabeuf", "value": 2},
+    {"source": "Courfeyrac", "target": "Eponine", "value": 1},
+    {"source": "Courfeyrac", "target": "Feuilly", "value": 6},
+    {"source": "Courfeyrac", "target": "Prouvaire", "value": 3},
+    {"source": "Bahorel", "target": "Combeferre", "value": 5},
+    {"source": "Bahorel", "target": "Gavroche", "value": 5},
+    {"source": "Bahorel", "target": "Courfeyrac", "value": 6},
+    {"source": "Bahorel", "target": "Mabeuf", "value": 2},
+    {"source": "Bahorel", "target": "Enjolras", "value": 4},
+    {"source": "Bahorel", "target": "Feuilly", "value": 3},
+    {"source": "Bahorel", "target": "Prouvaire", "value": 2},
+    {"source": "Bahorel", "target": "Marius", "value": 1},
+    {"source": "Bossuet", "target": "Marius", "value": 5},
+    {"source": "Bossuet", "target": "Courfeyrac", "value": 12},
+    {"source": "Bossuet", "target": "Gavroche", "value": 5},
+    {"source": "Bossuet", "target": "Bahorel", "value": 4},
+    {"source": "Bossuet", "target": "Enjolras", "value": 10},
+    {"source": "Bossuet", "target": "Feuilly", "value": 6},
+    {"source": "Bossuet", "target": "Prouvaire", "value": 2},
+    {"source": "Bossuet", "target": "Combeferre", "value": 9},
+    {"source": "Bossuet", "target": "Mabeuf", "value": 1},
+    {"source": "Bossuet", "target": "Valjean", "value": 1},
+    {"source": "Joly", "target": "Bahorel", "value": 5},
+    {"source": "Joly", "target": "Bossuet", "value": 7},
+    {"source": "Joly", "target": "Gavroche", "value": 3},
+    {"source": "Joly", "target": "Courfeyrac", "value": 5},
+    {"source": "Joly", "target": "Enjolras", "value": 5},
+    {"source": "Joly", "target": "Feuilly", "value": 5},
+    {"source": "Joly", "target": "Prouvaire", "value": 2},
+    {"source": "Joly", "target": "Combeferre", "value": 5},
+    {"source": "Joly", "target": "Mabeuf", "value": 1},
+    {"source": "Joly", "target": "Marius", "value": 2},
+    {"source": "Grantaire", "target": "Bossuet", "value": 3},
+    {"source": "Grantaire", "target": "Enjolras", "value": 3},
+    {"source": "Grantaire", "target": "Combeferre", "value": 1},
+    {"source": "Grantaire", "target": "Courfeyrac", "value": 2},
+    {"source": "Grantaire", "target": "Joly", "value": 2},
+    {"source": "Grantaire", "target": "Gavroche", "value": 1},
+    {"source": "Grantaire", "target": "Bahorel", "value": 1},
+    {"source": "Grantaire", "target": "Feuilly", "value": 1},
+    {"source": "Grantaire", "target": "Prouvaire", "value": 1},
+    {"source": "MotherPlutarch", "target": "Mabeuf", "value": 3},
+    {"source": "Gueulemer", "target": "Thenardier", "value": 5},
+    {"source": "Gueulemer", "target": "Valjean", "value": 1},
+    {"source": "Gueulemer", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Gueulemer", "target": "Javert", "value": 1},
+    {"source": "Gueulemer", "target": "Gavroche", "value": 1},
+    {"source": "Gueulemer", "target": "Eponine", "value": 1},
+    {"source": "Babet", "target": "Thenardier", "value": 6},
+    {"source": "Babet", "target": "Gueulemer", "value": 6},
+    {"source": "Babet", "target": "Valjean", "value": 1},
+    {"source": "Babet", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Babet", "target": "Javert", "value": 2},
+    {"source": "Babet", "target": "Gavroche", "value": 1},
+    {"source": "Babet", "target": "Eponine", "value": 1},
+    {"source": "Claquesous", "target": "Thenardier", "value": 4},
+    {"source": "Claquesous", "target": "Babet", "value": 4},
+    {"source": "Claquesous", "target": "Gueulemer", "value": 4},
+    {"source": "Claquesous", "target": "Valjean", "value": 1},
+    {"source": "Claquesous", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Claquesous", "target": "Javert", "value": 1},
+    {"source": "Claquesous", "target": "Eponine", "value": 1},
+    {"source": "Claquesous", "target": "Enjolras", "value": 1},
+    {"source": "Montparnasse", "target": "Javert", "value": 1},
+    {"source": "Montparnasse", "target": "Babet", "value": 2},
+    {"source": "Montparnasse", "target": "Gueulemer", "value": 2},
+    {"source": "Montparnasse", "target": "Claquesous", "value": 2},
+    {"source": "Montparnasse", "target": "Valjean", "value": 1},
+    {"source": "Montparnasse", "target": "Gavroche", "value": 1},
+    {"source": "Montparnasse", "target": "Eponine", "value": 1},
+    {"source": "Montparnasse", "target": "Thenardier", "value": 1},
+    {"source": "Toussaint", "target": "Cosette", "value": 2},
+    {"source": "Toussaint", "target": "Javert", "value": 1},
+    {"source": "Toussaint", "target": "Valjean", "value": 1},
+    {"source": "Child1", "target": "Gavroche", "value": 2},
+    {"source": "Child2", "target": "Gavroche", "value": 2},
+    {"source": "Child2", "target": "Child1", "value": 3},
+    {"source": "Brujon", "target": "Babet", "value": 3},
+    {"source": "Brujon", "target": "Gueulemer", "value": 3},
+    {"source": "Brujon", "target": "Thenardier", "value": 3},
+    {"source": "Brujon", "target": "Gavroche", "value": 1},
+    {"source": "Brujon", "target": "Eponine", "value": 1},
+    {"source": "Brujon", "target": "Claquesous", "value": 1},
+    {"source": "Brujon", "target": "Montparnasse", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Bossuet", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Joly", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Grantaire", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Bahorel", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Gavroche", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Enjolras", "value": 1}
+  ]
+}

src/App.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+
+    <!-- 路由出口 -->
+    <!-- 路由匹配组建将渲染到这里 -->
+<!--    <router-view> </router-view>-->
+    <keep-alive exclude="test" include="">
+      <router-view />
+    </keep-alive>
+<!--    <router-view v-if="!$route.meta.keepAlive" />-->
+  </div>
+</template>
+
+<script>
+
+
+
+// import http from './utils/request'//导入接口？？
+// import {getData} from './api'
+
+// import DevicePixelRatio from './libs/rem'
+// export default{
+//   created(){
+//     new DevicePixelRatio().init()
+//   }
+// }
+
+</script>
+
+<style lang="less">//消除固定样式
+  html,body,h3{
+    margin: 0;
+    padding: 0;
+  }
+  .superscript{ // 1、上标
+    font-size: 13px;
+    padding:10px;
+    color:#fff;
+    background-color: rgba(2, 167, 240, 0.729411764705882);
+
+  }
+.text{
+color:rgba(2, 167, 240, 0.729411764705882);
+cursor: pointer;
+/* 将鼠标样式设为手型 */
+}
+  
+  
+
+
+</style>

src/assets/css/index.css

@@ -0,0 +1,73 @@
+/* 先删除默认的内外边距 */
+* {
+    margin: 0;
+    padding: 0;
+}
+::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+
+html {
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    font-size: 62.5%;  /* 设置过根节点的文字大小后，所有子节点的文字大小全部相对于根节点计算，html为10px */
+  }
+  body, input, button, a, textarea, select {
+    margin: 0;
+    font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
+    font-size: 1.4rem;
+    line-height: 1.5;
+    color: #333;
+  }
+  html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+  }
+  
+  a {
+    text-decoration: none;
+  }
+  a:hover, a:focus {
+    text-decoration: none;
+  }
+  a:hover {
+    filter: alpha(opacity=90);
+    opacity: .9;
+  }
+
+  /* 文本对齐 */
+  .tc {
+    text-align: center;
+  }
+  
+  .tr {
+    text-align: right;
+  }
+  
+  .tl {
+    text-align: left;
+  }
+
+  /* 主体 */
+  .content {
+    color: #ddd;
+    /*background: #000;*/
+    width: 100%;
+    height:100vh;
+  }
+
+  .bg {
+    padding:0;
+    background:url('../img/pageBg.png') no-repeat center center;
+    /* background-size:cover; */
+  }
+
+  .module-box {
+    display:flex;
+    justify-content: space-evenly;
+    margin:10px;
+  }
+  .d-flex {
+    display:flex;
+  }

src/assets/svg/card.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="259px" height="170px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <mask fill="white" id="clip336">
+      <path d="M 251 0  L 31.3118811881188 0  L 2 31.9661016949153  L 2 163.305084745763  L 251 163.305084745763  L 251 0  Z " fill-rule="evenodd" />
+    </mask>
+    <filter x="201px" y="107px" width="259px" height="170px" filterUnits="userSpaceOnUse" id="filter337">
+      <feOffset dx="3" dy="3" in="SourceAlpha" result="shadowOffsetInner" />
+      <feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner" result="shadowGaussian" />
+      <feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.349019607843137 0  " in="shadowComposite" />
+    </filter>
+    <g id="widget338">
+      <path d="M 251 0  L 31.3118811881188 0  L 2 31.9661016949153  L 2 163.305084745763  L 251 163.305084745763  L 251 0  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 201 107 )" />
+      <path d="M 251 0  L 31.3118811881188 0  L 2 31.9661016949153  L 2 163.305084745763  L 251 163.305084745763  L 251 0  Z " stroke-width="2" stroke="#555555" fill="none" transform="matrix(1 0 0 1 201 107 )" mask="url(#clip336)" />
+    </g>
+  </defs>
+  <g transform="matrix(1 0 0 1 -201 -107 )">
+    <use xlink:href="#widget338" filter="url(#filter337)" />
+    <use xlink:href="#widget338" />
+  </g>
+</svg>

src/bigscreen/CapsuleChart.vue

@@ -0,0 +1,52 @@
+<template>
+    <dv-capsule-chart :config="config" style="width:100%;height:260px" />
+</template>
+
+<script>
+
+
+export default {
+props:{
+    colorsChart:{
+        type:Array,
+        default:()=>[]
+    },
+    dataChart:{
+        type:Array,
+        default:()=>[
+            {
+            name: '南阳',
+            value: 167
+            },
+            {
+            name: '周口',
+            value: 67
+            },
+            {
+            name: '漯河',
+            value: 123
+            },
+            {
+            name: '郑州',
+            value: 55
+            },
+            {
+            name: '西峡',
+            value: 98
+            }
+        ]
+    }
+},
+data(){
+  return {
+    config:{
+      data: this.dataChart,
+      colors: this.colorsChart,
+      unit: '单位',
+      showValue: true
+    }
+  }
+}
+
+}
+</script>

src/bigscreen/Chart.vue

@@ -0,0 +1,70 @@
+<template>
+ <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+ <div ref="chart" style="width: 100%;height:200px;"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+    data(){
+        return {
+            items:[]
+        }
+    },
+    mounted(){
+        this.initWebsocket();
+    },
+    methods:{
+        initChart(){
+            // 基于准备好的dom，初始化echarts实例
+            var myChart = echarts.init(this.$refs.chart);
+
+            // 指定图表的配置项和数据
+            var option = {
+                color:'#f60', //系列柱颜色
+                tooltip: {},
+                // legend: {
+                //     data: ['销量']
+                // },
+                xAxis: {
+                    data: ['1月', '2月', '3月', '裤子', '高跟鞋', '袜子'],
+                    axisLine:{
+                        lineStyle:{
+                            color:'#fff'
+                        }
+                    }
+                },
+                yAxis: {
+                    axisLine:{
+                        lineStyle:{
+                            color:'#fff'
+                        }
+                    }
+                },
+                series: [
+                    {
+                    name: '销量',
+                    type: 'bar',
+                    data:this.items || [10,20,30,40,50,60,70]
+                    }
+                ],
+                grid:{
+                    left:'5%',
+                    right:'5%',
+                    top:'10%',
+                    bottom:'5%',
+                    containLabel:true
+                }
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+        initWebsocket(){
+           
+                this.initChart();
+            
+        }
+    }
+}
+</script>

src/bigscreen/LineChart.vue

@@ -0,0 +1,105 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width: 100%;height:250px;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initWebsocket();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+   
+               // 指定图表的配置项和数据
+               let option = {
+                    xAxis: {
+                    type: "category",
+                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+                    position: "bottom",
+                    axisLine: true,
+                    axisLabel: {
+                        color: "rgba(255,255,255,.8)",
+                        fontSize: 12,
+                    },
+                    },
+                    yAxis: {
+                    type: "value",
+                    name: "年度生产量",
+                    nameLocation: "end",
+                    nameGap: 24,
+                    nameTextStyle: {
+                        color: "rgba(255,255,255,.5)",
+                        fontSize: 14,
+                    },
+                    splitNumber: 4,
+                    axisLine: {
+                        lineStyle: {
+                        opacity: 0,
+                        },
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                        color: "#fff",
+                        opacity: 0.1,
+                        },
+                    },
+                    axisLabel: {
+                        color: "rgba(255,255,255,.8)",
+                        fontSize: 12,
+                    },
+                    },
+                    grid: {
+                    left: 50,
+                    right: 10,
+                    bottom: 25,
+                    top: "18%",
+                    },
+                    series: [
+                    {
+                        data:  [220, 182, 191, 234, 290, 330, 310],
+                        type: "line",
+                        smooth: true,
+                        symbol: "emptyCircle",
+                        symbolSize: 8,
+                        itemStyle: {
+                        // normal: {
+                        //     color: "#fff",
+                        // },
+                        },
+                     },
+                     {
+                        data: [820, 932, 901, 934, 1290, 1330, 1320],
+                        type: "line",
+                        smooth: true,
+                        symbol: "emptyCircle",
+                        symbolSize: 8,
+                        itemStyle: {
+                        // normal: {
+                        //     color: "#fff",
+                        // },
+                        },
+                     },
+        ],
+      };
+
+               myChart.setOption(option);
+           },
+           initWebsocket(){
+              
+                   this.initChart();
+               
+           }
+       }
+   }
+   </script>

src/bigscreen/Map.vue

@@ -0,0 +1,104 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width:100%;height:350px;;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   import chinaMap from '@/assets/json/china.json'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initChart();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+               echarts.registerMap('china', chinaMap);
+   
+               // 指定图表的配置项和数据
+               var option = {
+                   geo:{
+                    show:true,
+                    type:'map',
+                    map:'china',
+                    // label:{
+                    //     show:true, //文字标签显示
+                    //     color:'#fff',
+                    //     fontSize:12
+                    // },
+                    itemStyle:{  //图形样式
+                        areaColor:'#3352c7', //背景色
+                        borderColor:'#fff',
+                        borderWidth:1
+                    },
+                    zoom:1.2,
+                    emphasis:{  //高亮状态
+                        label:{
+                            show:true, //文字标签显示
+                            color:'#fff',
+                            fontSize:14
+                        },
+                        itemStyle:{  //图形样式
+                            areaColor:'#f60', //背景色
+                            borderColor:'#ccc',
+                            borderWidth:1
+                        },
+                    }
+                   },
+                   series:[
+                    {
+                        type:'effectScatter', //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出
+                        coordinateSystem:'geo',//该系列使用的坐标系
+                        rippleEffect:{ //涟漪特效相关配置。
+                            period:2,
+                            brushType:'stroke',
+                            scale :5,
+                        },
+                        label:{  //标签
+                            normal:{
+                                show:true,
+                                position:'right'
+                            }
+                        },
+                        itemStyle:{
+                            color:'#f00'
+                        },
+                        symbol:'circle' ,//标记的图形，还可以设置图片
+                        symbolSize:function(val){
+                            return val[2]
+                        },
+                        data:[
+                            {
+                                name:'鄂尔多斯',
+                                value:[109.781327, 39.608266,20]
+                            },
+                            {
+                                name:'张家口',
+                                value:[114.87, 40.82,5]
+                            },
+                            {
+                                name:'珠海',
+                                value:[113.52, 22.3,15]
+                            },
+                            {
+                                name:'武汉',
+                                value:[114.31, 30.52,30]
+                            }
+                        ]
+
+                    }
+                   ]
+               };
+               // 使用刚指定的配置项和数据显示图表。
+               myChart.setOption(option);
+           },
+       }
+   }
+   </script>

src/bigscreen/ModuleHeader.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="module-box">
+    <div style="flex:0 1 25%">
+      <dv-border-box-13 style="width:100%;height:200px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">类型统计</h3>
+        <!-- <Chart /> -->
+        <div style="display: flex;justify-content: center;align-items: center;">
+          <dv-decoration-9 style="width:120px;height:120px;margin-right:30px;" dur=5><h1 style="color: rgba(255,215,0);">48</h1></dv-decoration-9>
+          <dv-decoration-9 style="width:120px;height:120px;margin-left: 30px;" dur=5><h1 style="color: rgba(255,215,0);">38</h1></dv-decoration-9>
+      </div> 
+       <div style="display: flex;justify-content: center;align-items: center;">
+        <span style="padding-right: 50px;">节点类型总数</span>
+        <span style="padding-left: 50px;">边类型总数</span>
+      </div>  
+
+      
+      </dv-border-box-13>
+
+      <dv-border-box-13 style="width:100%;height:400px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
+        <RadarChart/>
+        <!-- <dv-capsule-chart :config="config" style="width:100%;height:350px" /> -->
+      </dv-border-box-13>
+    </div>
+
+    <div style="flex:0 1 50%">
+      <dv-border-box-1 style="width:100%;height:600px;">
+       <!-- 图谱 -->
+       <iframe src="/static/3d-force-graph/index0.html" ref="iframe" width="100%" height="600px" scrolling="no"></iframe>
+      </dv-border-box-1>
+    </div>
+
+    <div style="flex:0 1 25%">
+      <dv-border-box-13 style="width:100%;height:200px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">图谱统计</h3>
+        <div style="display: flex;justify-content: center;align-items: center;">
+          <dv-decoration-9 style="width:123px;height:123px;margin-right:30px;" dur=5><h2 style="color: rgba(255,215,0);">606041</h2></dv-decoration-9>
+          <dv-decoration-9 style="width:123px;height:123px;margin-left: 30px;" dur=5><h2 style="color: rgba(255,215,0);">1694475</h2></dv-decoration-9>
+      </div> 
+       <div style="display: flex;justify-content: center;align-items: center;">
+        <span style="padding-right: 60px;">节点总数</span>
+        <span style="padding-left: 55px;">边总数</span>
+      </div>  
+        <!-- <dv-capsule-chart :config="config" style="width:100%;height:300px" /> -->
+      </dv-border-box-13>
+
+      <dv-border-box-13 style="width:100%;height:400px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">区域分析</h3>
+        <!-- <dv-conical-column-chart :config="config3" style="width:100%;height:300px;" /> -->
+        <Map />
+      </dv-border-box-13>
+    </div>
+  </div>  
+      
+</template>
+
+<script>
+import Map from './Map.vue'
+import RadarChart from './RadarChart.vue'
+
+export default {
+  components:{
+    Map,
+    RadarChart
+  },
+  data(){
+    return {
+      config:{
+        data: [
+          {
+            name: '南阳',
+            value: 167
+          },
+          { 
+            name: '周口',
+            value: 67
+          },
+          {
+            name: '漯河',
+            value: 123
+          },
+          {
+            name: '郑州',
+            value: 55
+          },
+          {
+            name: '西峡',
+            value: 98
+          }
+        ],
+        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
+        unit: '单位',
+        showValue: true
+      },
+      config2:{
+        data: [66, 45],
+        shape: 'roundRect'
+      },
+      config3:{
+        data: [
+          {
+            name: '周口',
+            value: 55
+          },
+          {
+            name: '南阳',
+            value: 120
+          },
+          {
+            name: '西峡',
+            value: 71
+          },
+          {
+            name: '驻马店',
+            value: 66
+          },
+          {
+            name: '新乡',
+            value: 80
+          },
+          {
+            name: '信阳',
+            value: 35
+          },
+          {
+            name: '漯河',
+            value: 15
+          }
+        ],
+        img: [
+          require('../assets/img/1st.png'),
+          require('../assets/img/2st.png'),
+          require('../assets/img/3st.png'),
+          require('../assets/img/4st.png'),
+          require('../assets/img/5st.png'),
+          require('../assets/img/6st.png'),
+          require('../assets/img/7st.png'),
+        ]
+      },
+      config4:{
+        centerPoint: [0.48, 0.35],
+        points: [
+          {
+            position: [0.52, 0.235],
+            text: '新乡'
+          },
+          {
+            position: [0.43, 0.29],
+            text: '焦作'
+          },
+          {
+            position: [0.59, 0.35],
+            text: '开封'
+          },
+          {
+            position: [0.53, 0.47],
+            text: '许昌'
+          },
+          {
+            position: [0.45, 0.54],
+            text: '平顶山'
+          },
+          {
+            position: [0.36, 0.38],
+            text: '洛阳'
+          },
+          {
+            position: [0.62, 0.55],
+            text: '周口'
+          },
+          {
+            position: [0.56, 0.56],
+            text: '漯河'
+          },
+          {
+            position: [0.37, 0.66],
+            text: '南阳'
+          },
+          {
+            position: [0.55, 0.81],
+            text: '信阳'
+          },
+          {
+            position: [0.55, 0.67],
+            text: '驻马店'
+          },
+          {
+            position: [0.37, 0.29],
+            text: '济源'
+          },
+          {
+            position: [0.20, 0.36],
+            text: '三门峡'
+          },
+          {
+            position: [0.76, 0.41],
+            text: '商丘'
+          },
+          {
+            position: [0.59, 0.18],
+            text: '鹤壁'
+          },
+          {
+            position: [0.68, 0.17],
+            text: '濮阳'
+          },
+          {
+            position: [0.59, 0.10],
+            text: '安阳'
+          }
+        ],
+        bgImgUrl: require('../assets/img/map.jpg'),
+        centerPointImg: {
+          url: require('../assets/img/mapCenterPoint.png')
+        },
+        pointsImg: {
+          url: require('../assets/img/mapPoint.png')
+        }
+      }
+    }
+  }
+
+}
+</script>

src/bigscreen/ModuleMain.vue

@@ -0,0 +1,156 @@
+<template>
+  <!-- 一行二等分 -->
+  <div class="module-box">
+    <div style="flex:0 1 25%">
+       <dv-border-box-13 style="width:100%;height:300px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">舆情预警</h3>
+        <!-- <CapsuleChart :colorsChart="['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff']"/> -->
+        <!-- <CapsuleChart :dataChart="items"/> -->
+        <div style="display: flex;justify-content: center;align-items: center;">
+          <dv-scroll-board :config="config1" style="width:95%;height:220px;justify-content: center;align-items: center" />
+         </div>
+      </dv-border-box-13>
+    </div>
+   
+
+    <div style="flex:0 1 50%">
+      <dv-border-box-13 style="width:100%;height:300px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">系统性风险指数</h3>
+        <!-- <CapsuleChart :dataChart="items"/> -->
+        <LineChart />
+
+      </dv-border-box-13>
+    </div>
+
+    <div style="flex:0 1 25%">
+      <dv-border-box-13 style="width:100%;height:300px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">异常监测结果</h3>
+        <!-- <CapsuleChart :dataChart="items"/> -->
+         <div style="display: flex;justify-content: center;align-items: center;">
+          <dv-scroll-board :config="config2" style="width:95%;height:220px;" />
+         </div>
+        
+      </dv-border-box-13>
+    </div>
+    
+  </div>
+
+</template>
+
+<script>
+import CapsuleChart from './CapsuleChart.vue';
+import LineChart from './LineChart.vue'
+
+export default {
+components:{
+CapsuleChart,
+LineChart
+},
+data(){
+return {
+  // 表格设置
+  config1 : { 
+    header: ['主体代码&nbsp', '行业', '&nbsp&nbsp&nbsp&nbsp&nbsp预警时刻','&nbsp&nbsp&nbsp风险水平','风险类型&nbsp'],
+    data: [
+        {
+          主体代码:'688001.SH',
+          行业:'计算机',
+          预警时刻:'2023/6/29 16:00',
+          风险水平:'严重',
+          风险类型:'流动风险',
+        },
+        {
+          主体代码:'688002.SH',
+          行业:'计算机',
+          当前预警时刻:'2023/6/29 16:00',
+          预警类型:'严重',
+          风险类型:'市场风险',
+        },
+        {
+          主体代码:'688002.SH',
+          行业:'计算机',
+          当前预警时刻:'2023/6/29 16:00',
+          预警类型:'严重',
+          风险类型:'市场风险',
+        },
+        {
+          主体代码:'688002.SH',
+          行业:'计算机',
+          当前预警时刻:'2023/6/29 16:00',
+          预警类型:'严重',
+          风险类型:'市场风险',
+        },
+        {
+          主体代码:'688002.SH',
+          行业:'计算机',
+          当前预警时刻:'2023/6/29 16:00',
+          预警类型:'严重',
+          风险类型:'市场风险',
+        },
+      ],
+    
+
+  evenRowBGC:'#0A2732',
+  oddRowBGC:'0A2732',
+  headerBGC:'rgba(61,89,171,0.5)',
+  align: ['right'],
+  
+
+},
+
+
+  config2 :
+  { 
+    data: [
+    ['教育',  7],
+    ['金融业',  1],
+    ['房地产业',  2],
+    ['制造业',  3],
+    ['房地产业',  4],
+    ['批发和零售业',  5],
+
+  ], 
+  evenRowBGC:'#0A2732',
+  oddRowBGC:'0A2732',
+  
+
+},
+
+items:[
+    {
+    name: '股权质押',
+    value: 683
+    },
+    {
+    name: '转让股价',
+    value: 234
+    },
+    {
+    name: '股份增持',
+    value: 240
+    },
+    {
+    name: '债券发行',
+    value: 523
+    },
+    {
+    name: '高管变动',
+    value: 345
+    },
+    {
+    name: '产品发布',
+    value: 320
+    },
+    {
+    name: '破产',
+    value: 280
+    },
+    {
+    name: '业绩下滑',
+    value: 271
+    },
+]
+}
+}
+}
+</script>

src/bigscreen/ModuleTitle.vue

@@ -0,0 +1,32 @@
+<template>
+    <!-- 标题 一行三等分 -->
+    <div class="module-box">
+      <div style="flex:0 1 30%">
+        <dv-decoration-10 style="height:5px;" />
+      </div>
+
+      <div style="flex:0 1 40%">
+        <div class="d-flex">
+          <dv-decoration-8 style="height:50px;flex:1;" />
+          <h2>大规模泛金融知识图谱系统</h2>
+          <!-- <div style="font-size: large;">大规模泛金融知识图谱系统</div> -->
+          <dv-decoration-8 :reverse="true" style="height:50px;flex:1;" />
+        </div>
+        
+      </div>
+
+      <div style="flex:0 1 30%">
+        <dv-decoration-10 style="height:5px;transform:rotateY(180deg)" />
+      </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: 'HomeView',
+  
+
+}
+</script>

src/bigscreen/RadarChart.vue

@@ -0,0 +1,103 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width: 100%;height:340px;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initWebsocket();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+   
+               // 指定图表的配置项和数据
+               let 
+               option = {
+        title: {
+            text: ''
+        },
+        tooltip: {},
+        legend: {
+
+            data: ['第一标准', '第二标准','第三标准'],
+            x:"center",
+            y:'bottom',
+            textStyle:{
+                color:"#fff"
+            }
+        },
+        color: ['#4c95d9', '#f6731b', '#8cd43f'],
+        radar: {
+            name:{
+                textStyle: {
+                    //设置颜色
+                    color:'#fff'
+                }
+            },
+            indicator: [
+                { name: 'test1', max: 6500},
+                { name: 'test2', max: 16000},
+                { name: 'test3', max: 30000},
+                { name: 'test4', max: 38000},
+                { name: 'test5', max: 52000},
+                { name: 'test6', max: 25000}
+            ],
+            center: ['50%','50%'],
+            radius: "58%"
+        },
+        series: [{
+            name: '',
+            type: 'radar',
+            itemStyle : {
+                normal : {
+                    splitLine: {
+                        lineStyle: {
+
+                        }
+                    },
+                    label: {
+                        show: false,
+                        textStyle:{
+                        },
+                        formatter:function(params) {
+                            return params.value;}
+                    },
+                }
+            },
+            data : [
+                {
+                    value : [2400, 10000, 28000, 35000, 50000, 19000],
+                    name : '第一标准'
+                },
+                {
+                    value : [5000, 14000, 28000, 31000, 42000, 21000],
+                    name : '第二标准'
+                },
+                {
+                    value : [6000, 14000, 18000, 21000, 32000, 11000],
+                    name : '第三标准'
+                }
+            ]
+        }]
+    };
+
+               myChart.setOption(option);
+           },
+           initWebsocket(){
+              
+                   this.initChart();
+               
+           }
+       }
+   }
+   </script>

src/bigscreen/ScaleBox.vue

@@ -0,0 +1,81 @@
+<template>
+    <div
+      class="ScaleBox"
+      ref="ScaleBox"
+      :style="{
+        width: width + 'px',
+        height: height + 'px',
+      }"
+    >
+      <slot></slot>
+    </div>
+  </template>
+   
+  <script>
+  export default {
+    name: "ScaleBox",
+    props: {},
+    data() {
+      return {
+        scale: 0,
+        width: 1920,
+        height: 1080,
+      };
+    },
+    mounted() {
+      this.setScale();
+      window.addEventListener("resize", this.debounce(this.setScale));
+    },
+    methods: {
+      getScale() {
+        // 固定好16：9的宽高比，计算出最合适的缩放比
+        const { width, height } = this;
+        const wh = window.innerHeight / height;
+        const ww = window.innerWidth / width;
+        console.log(ww < wh ? ww : wh);
+        return ww < wh ? ww : wh;
+      },
+      setScale() {
+        // 获取到缩放比例，设置它
+        this.scale = this.getScale();
+        if (this.$refs.ScaleBox) {
+          this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
+        }
+      },
+      debounce(fn, delay) {
+        const delays = delay || 500;
+        let timer;
+        return function () {
+          const th = this;
+          const args = arguments;
+          if (timer) {
+            clearTimeout(timer);
+          }
+          timer = setTimeout(function () {
+            timer = null;
+            fn.apply(th, args);
+          }, delays);
+        };
+      },
+    },
+  };
+  </script>
+   
+  <style lang="scss">
+  #ScaleBox {
+    --scale: 1;
+  }
+  .ScaleBox {
+    position: absolute;
+    transform: scale(var(--scale)) translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    transform-origin: 0 0;
+    left: 50%;
+    top: 50%;
+    transition: 0.3s;
+    z-index: 999;
+    // background: rgba(255, 0, 0, 0.3);
+  }
+  </style>
+   

src/bigscreen/大屏-9.27.vue

@@ -0,0 +1,85 @@
+<template>
+  <div id="home">
+    <dv-full-screen-container>
+      <!--一行两等份-->
+      <div class="head">大规模泛金融知识图谱系统</div>
+      <div class="module-box">
+        
+        <div style="flex: 0 1 25%">
+          <dv-border-box-12 style="width: 100%; height: 180px">
+            <div style="color:white;padding:10px 10px;">类型统计</div>
+          </dv-border-box-12>
+          <dv-border-box-12 style="width: 100%; height: 180px">
+            <div style="color:white;padding:10px 10px;">健康指数</div>
+          </dv-border-box-12>
+        </div>
+
+        <div style="flex: 0 1 50%">
+          <dv-border-box-8 style="width: 100%; height: 360px"></dv-border-box-8>
+        </div>
+
+        <div style="flex: 0 1 25%">
+          <dv-border-box-12 style="width: 100%; height: 180px">
+            <div style="color:white;padding:10px 10px;">图谱统计</div>
+          </dv-border-box-12>
+          <dv-border-box-12 style="width: 100%; height: 180px">
+            <div style="color:white;padding:10px 10px;">区域分析</div>
+          </dv-border-box-12>
+        </div>
+      </div>
+
+      <div class="module-box">
+        <div style="flex: 0 1 25%">
+          <dv-border-box-12 style="width: 100%; height: 180px;">
+             <div style="color:white;padding:10px 10px;">当前事件统计</div>
+          </dv-border-box-12>
+        </div>
+
+        <div style="flex: 0 1 50%">
+          <dv-border-box-8 style="width: 100%; height: 180px;">
+             <div style="color:white;padding:10px 10px;">行业风险价值曲线图</div>
+          </dv-border-box-8>
+        </div>
+
+        <div style="flex: 0 1 25%">
+          <dv-border-box-12 style="width: 100%; height: 180px;">
+             <div style="color:white;padding:10px 10px;">行业价值评估</div>
+          </dv-border-box-12>
+        </div>
+      </div>
+    </dv-full-screen-container>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.head{
+  color: aliceblue;
+  text-align:center;
+  padding-top:12px;
+  font-size: 18px;
+}
+#home {
+  width: 100%;
+  height: 100%;
+  background: url("../assets/background.jpg") center center no-repeat;
+  background-size: 100% 100%;
+  position: absolute; /*/绝对定位 */
+}
+.module-box {
+  display: flex;
+  justify-self: space-between;
+  margin: 1px;
+  padding-left:15px;
+}
+</style>

src/bigscreen/大屏.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="content bg">
+    
+      <!-- <dv-full-screen-container> -->
+        <scale-box>
+         <ModuleTitle />
+         <ModuleHeader />
+         <ModuleMain />
+
+           </scale-box>
+      <!-- </dv-full-screen-container> -->
+
+    </div>
+  </template>
+  
+  <script>
+  import ModuleTitle from './ModuleTitle.vue'
+  import ModuleHeader from './ModuleHeader.vue'
+  import ModuleMain from './ModuleMain.vue'
+  import ScaleBox from './ScaleBox.vue'
+
+  
+  
+  export default {
+    name: 'HomeView',
+    components:{
+      ModuleTitle,
+      ModuleHeader,
+      ModuleMain,
+      ScaleBox,//   大屏根据显示器尺寸大小自适应
+    }
+  
+  }
+  </script>
+  
+  <style scoped>
+  @import '../assets/css/index.css';
+  </style>

src/bigscreen1/CapsuleChart.vue

@@ -0,0 +1,52 @@
+<template>
+    <dv-capsule-chart :config="config" style="width:100%;height:260px" />
+</template>
+
+<script>
+
+
+export default {
+props:{
+    colorsChart:{
+        type:Array,
+        default:()=>[]
+    },
+    dataChart:{
+        type:Array,
+        default:()=>[
+            {
+            name: '南阳',
+            value: 167
+            },
+            {
+            name: '周口',
+            value: 67
+            },
+            {
+            name: '漯河',
+            value: 123
+            },
+            {
+            name: '郑州',
+            value: 55
+            },
+            {
+            name: '西峡',
+            value: 98
+            }
+        ]
+    }
+},
+data(){
+  return {
+    config:{
+      data: this.dataChart,
+      colors: this.colorsChart,
+      unit: '单位',
+      showValue: true
+    }
+  }
+}
+
+}
+</script>

src/bigscreen1/Chart.vue

@@ -0,0 +1,70 @@
+<template>
+ <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+ <div ref="chart" style="width: 100%;height:200px;"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+    data(){
+        return {
+            items:[]
+        }
+    },
+    mounted(){
+        this.initWebsocket();
+    },
+    methods:{
+        initChart(){
+            // 基于准备好的dom，初始化echarts实例
+            var myChart = echarts.init(this.$refs.chart);
+
+            // 指定图表的配置项和数据
+            var option = {
+                color:'#f60', //系列柱颜色
+                tooltip: {},
+                // legend: {
+                //     data: ['销量']
+                // },
+                xAxis: {
+                    data: ['1月', '2月', '3月', '裤子', '高跟鞋', '袜子'],
+                    axisLine:{
+                        lineStyle:{
+                            color:'#fff'
+                        }
+                    }
+                },
+                yAxis: {
+                    axisLine:{
+                        lineStyle:{
+                            color:'#fff'
+                        }
+                    }
+                },
+                series: [
+                    {
+                    name: '销量',
+                    type: 'bar',
+                    data:this.items || [10,20,30,40,50,60,70]
+                    }
+                ],
+                grid:{
+                    left:'5%',
+                    right:'5%',
+                    top:'10%',
+                    bottom:'5%',
+                    containLabel:true
+                }
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+        initWebsocket(){
+           
+                this.initChart();
+            
+        }
+    }
+}
+</script>

src/bigscreen1/LineChart.vue

@@ -0,0 +1,105 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width: 100%;height:250px;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initWebsocket();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+   
+               // 指定图表的配置项和数据
+               let option = {
+                    xAxis: {
+                    type: "category",
+                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+                    position: "bottom",
+                    axisLine: true,
+                    axisLabel: {
+                        color: "rgba(255,255,255,.8)",
+                        fontSize: 12,
+                    },
+                    },
+                    yAxis: {
+                    type: "value",
+                    name: "年度生产量",
+                    nameLocation: "end",
+                    nameGap: 24,
+                    nameTextStyle: {
+                        color: "rgba(255,255,255,.5)",
+                        fontSize: 14,
+                    },
+                    splitNumber: 4,
+                    axisLine: {
+                        lineStyle: {
+                        opacity: 0,
+                        },
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                        color: "#fff",
+                        opacity: 0.1,
+                        },
+                    },
+                    axisLabel: {
+                        color: "rgba(255,255,255,.8)",
+                        fontSize: 12,
+                    },
+                    },
+                    grid: {
+                    left: 50,
+                    right: 10,
+                    bottom: 25,
+                    top: "18%",
+                    },
+                    series: [
+                    {
+                        data:  [220, 182, 191, 234, 290, 330, 310],
+                        type: "line",
+                        smooth: true,
+                        symbol: "emptyCircle",
+                        symbolSize: 8,
+                        itemStyle: {
+                        // normal: {
+                        //     color: "#fff",
+                        // },
+                        },
+                     },
+                     {
+                        data: [820, 932, 901, 934, 1290, 1330, 1320],
+                        type: "line",
+                        smooth: true,
+                        symbol: "emptyCircle",
+                        symbolSize: 8,
+                        itemStyle: {
+                        // normal: {
+                        //     color: "#fff",
+                        // },
+                        },
+                     },
+        ],
+      };
+
+               myChart.setOption(option);
+           },
+           initWebsocket(){
+              
+                   this.initChart();
+               
+           }
+       }
+   }
+   </script>

src/bigscreen1/Map.vue

@@ -0,0 +1,99 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width:100%;height:350px;;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   import chinaMap from '@/assets/json/china.json'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initChart();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+               echarts.registerMap('china', chinaMap);
+   
+               // 指定图表的配置项和数据
+               var option = {
+                   geo:{
+                    show:true,
+                    type:'map',
+                    map:'china',
+                    // label:{
+                    //     show:true, //文字标签显示
+                    //     color:'#fff',
+                    //     fontSize:12
+                    // },
+                    itemStyle:{  //图形样式
+                        areaColor:'#3352c7', //背景色
+                        borderColor:'#fff',
+                        borderWidth:1
+                    },
+                    zoom:1.2,
+                    emphasis:{  //高亮状态
+                        label:{
+                            show:true, //文字标签显示
+                            color:'#fff',
+                            fontSize:14
+                        },
+                        itemStyle:{  //图形样式
+                            areaColor:'#f60', //背景色
+                            borderColor:'#ccc',
+                            borderWidth:1
+                        },
+                    }
+                   },
+                   series:[
+                    {
+                        type:'effectScatter', //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出
+                        coordinateSystem:'geo',//该系列使用的坐标系
+                        rippleEffect:{ //涟漪特效相关配置。
+                            period:2,
+                            brushType:'stroke',
+                            scale :5,
+                        },
+                        label:{  //标签
+                            normal:{
+                                show:true,
+                                position:'right'
+                            }
+                        },
+                        itemStyle:{
+                            color:'#f00'
+                        },
+                        symbol:'circle' ,//标记的图形，还可以设置图片
+                        symbolSize:function(val){
+                            return val[2]
+                        },
+                        data:[
+                            {
+                                name:'北京',
+                                value:[116.405285,39.904989,20]
+                            },
+                            {
+                                name:'上海',
+                                value:[121.472644,31.231706,20]
+                            },
+                            {
+                                name:'珠海',
+                                value:[113.52, 22.3,15]
+                            }
+                        ]
+                    }
+                   ]
+               };
+               // 使用刚指定的配置项和数据显示图表。
+              myChart.setOption(option);
+           },
+       }
+   }
+   </script>

src/bigscreen1/ModuleHeader.vue

@@ -0,0 +1,585 @@
+<template>
+  <!-- 真实数据 -->
+  <div>
+    <div class="module-box">
+    <div style="flex:0 1 25%">
+      <!-- 股票市场 -->
+      <dv-border-box-13 style="width:100%;height:200px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">股票市场</h3>
+        <div style="display: flex;justify-content: space-evenly;align-items: center;">
+          <dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">1100</h1></dv-decoration-9>
+          <dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">1184</h1></dv-decoration-9>
+          <dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">1254</h1></dv-decoration-9>
+      </div> 
+       <div style="display: flex;justify-content: space-evenly;align-items: center;">
+        <span >低风险</span>
+        <span >中风险</span>
+        <span >高风险</span>
+      </div>  
+      </dv-border-box-13>
+      <!-- 雷达图 -->
+      <dv-border-box-13 style="width:100%;height:400px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
+        <div ref="echarts_3" style="height:80%;width:100%"></div>
+      </dv-border-box-13>
+    </div>
+    <!-- 3D -->
+    <div style="flex:0 1 50%">
+      <dv-border-box-1 style="width:100%;height:600px;">
+       <!-- 图谱 -->
+       <iframe src="/static/3d-force-graph/index1.html" ref="iframe" width="100%" height="600px" scrolling="no"></iframe>
+      </dv-border-box-1>
+    </div>
+
+    <div style="flex:0 1 25%">
+      <!-- 债券市场 -->
+      <dv-border-box-13 style="width:100%;height:200px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">债券市场</h3>
+        <div style="display: flex;justify-content: space-evenly;align-items: center;">
+          <dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">1862</h1></dv-decoration-9>
+          <dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">441</h1></dv-decoration-9>
+          <dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">87</h1></dv-decoration-9>
+      </div> 
+       <div style="display: flex;justify-content: space-evenly;align-items: center;">
+        <span >低风险</span>
+        <span >中风险</span>
+        <span >高风险</span>
+      </div>  
+      </dv-border-box-13>
+
+      <dv-border-box-13 style="width:100%;height:400px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">区域分析</h3>
+        <Map />
+      </dv-border-box-13>
+    </div>
+  </div>  
+  
+  <!-- 一行二等分 -->
+  <div class="module-box">
+    <div style="flex:0 1 25%">
+       <dv-border-box-13 style="width:100%;height:300px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">异常监测结果</h3>
+        <div style="display: flex;justify-content: center;align-items: center;">
+          <dv-scroll-board :config="config22" style="width:95%;height:220px;" />
+        </div>
+      </dv-border-box-13>
+    </div>
+   
+
+    <div style="flex:0 1 50%">
+      <dv-border-box-13 style="width:100%;height:300px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px"></h3>
+        <!-- 维度时序 -->
+        <dimension-component :zoom="datazoom" ref="dimension"/>
+
+      </dv-border-box-13>
+    </div>
+
+    <div style="flex:0 1 25%">
+      <dv-border-box-13 style="width:100%;height:300px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">宏观经济指标</h3>
+        <div ref="chartContainer" style="width:100%; height: 90%;margin: 1px"></div>
+        
+      </dv-border-box-13>
+    </div>
+    
+  </div>
+
+  </div>
+  
+</template>
+
+<script>
+import Map from './Map.vue'
+import RadarChart from './RadarChart.vue'
+import CapsuleChart from './CapsuleChart.vue';
+import LineChart from './LineChart.vue'
+import dimensionComponent from "./components/dimensionComponent";
+
+import http from "@/utils/request";
+import * as echarts from "echarts";
+
+export default {
+  components:{
+    Map,
+    RadarChart,
+    CapsuleChart,
+    LineChart,
+    dimensionComponent
+  },
+  data(){
+    return {
+      config:{
+        data: [
+          {
+            name: '南阳',
+            value: 167
+          },
+          { 
+            name: '周口',
+            value: 67
+          },
+          {
+            name: '漯河',
+            value: 123
+          },
+          {
+            name: '郑州',
+            value: 55
+          },
+          {
+            name: '西峡',
+            value: 98
+          }
+        ],
+        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
+        unit: '单位',
+        showValue: true
+      },
+      config2:{
+        data: [66, 45],
+        shape: 'roundRect'
+      },
+      config3:{
+        data: [
+          {
+            name: '周口',
+            value: 55
+          },
+          {
+            name: '南阳',
+            value: 120
+          },
+          {
+            name: '西峡',
+            value: 71
+          },
+          {
+            name: '驻马店',
+            value: 66
+          },
+          {
+            name: '新乡',
+            value: 80
+          },
+          {
+            name: '信阳',
+            value: 35
+          },
+          {
+            name: '漯河',
+            value: 15
+          }
+        ],
+        img: [
+          require('../assets/img/1st.png'),
+          require('../assets/img/2st.png'),
+          require('../assets/img/3st.png'),
+          require('../assets/img/4st.png'),
+          require('../assets/img/5st.png'),
+          require('../assets/img/6st.png'),
+          require('../assets/img/7st.png'),
+        ]
+      },
+      config4:{
+        centerPoint: [0.48, 0.35],
+        points: [
+          {
+            position: [0.52, 0.235],
+            text: '新乡'
+          },
+          {
+            position: [0.43, 0.29],
+            text: '焦作'
+          },
+          {
+            position: [0.59, 0.35],
+            text: '开封'
+          },
+          {
+            position: [0.53, 0.47],
+            text: '许昌'
+          },
+          {
+            position: [0.45, 0.54],
+            text: '平顶山'
+          },
+          {
+            position: [0.36, 0.38],
+            text: '洛阳'
+          },
+          {
+            position: [0.62, 0.55],
+            text: '周口'
+          },
+          {
+            position: [0.56, 0.56],
+            text: '漯河'
+          },
+          {
+            position: [0.37, 0.66],
+            text: '南阳'
+          },
+          {
+            position: [0.55, 0.81],
+            text: '信阳'
+          },
+          {
+            position: [0.55, 0.67],
+            text: '驻马店'
+          },
+          {
+            position: [0.37, 0.29],
+            text: '济源'
+          },
+          {
+            position: [0.20, 0.36],
+            text: '三门峡'
+          },
+          {
+            position: [0.76, 0.41],
+            text: '商丘'
+          },
+          {
+            position: [0.59, 0.18],
+            text: '鹤壁'
+          },
+          {
+            position: [0.68, 0.17],
+            text: '濮阳'
+          },
+          {
+            position: [0.59, 0.10],
+            text: '安阳'
+          }
+        ],
+        bgImgUrl: require('../assets/img/map.jpg'),
+        centerPointImg: {
+          url: require('../assets/img/mapCenterPoint.png')
+        },
+        pointsImg: {
+          url: require('../assets/img/mapPoint.png')
+        }
+      },
+
+      // 表格设置
+      config1 : { 
+          header: ['主体代码&nbsp', '行业', '&nbsp&nbsp&nbsp&nbsp&nbsp预警时刻','&nbsp&nbsp&nbsp风险水平','风险类型&nbsp'],
+          data: [
+              {
+                主体代码:'688001.SH',
+                行业:'计算机',
+                预警时刻:'2023/6/29 16:00',
+                风险水平:'严重',
+                风险类型:'流动风险',
+              },
+              {
+                主体代码:'688002.SH',
+                行业:'计算机',
+                当前预警时刻:'2023/6/29 16:00',
+                预警类型:'严重',
+                风险类型:'市场风险',
+              },
+              {
+                主体代码:'688002.SH',
+                行业:'计算机',
+                当前预警时刻:'2023/6/29 16:00',
+                预警类型:'严重',
+                风险类型:'市场风险',
+              },
+              {
+                主体代码:'688002.SH',
+                行业:'计算机',
+                当前预警时刻:'2023/6/29 16:00',
+                预警类型:'严重',
+                风险类型:'市场风险',
+              },
+              {
+                主体代码:'688002.SH',
+                行业:'计算机',
+                当前预警时刻:'2023/6/29 16:00',
+                预警类型:'严重',
+                风险类型:'市场风险',
+              },
+            ],
+          
+
+        evenRowBGC:'#0A2732',
+        oddRowBGC:'0A2732',
+        headerBGC:'rgba(61,89,171,0.5)',
+        align: ['right'],
+        
+
+      },
+      config22 :
+        { 
+          data: [
+          ['教育',  7],
+          ['金融业',  1],
+          ['房地产业',  2],
+          ['制造业',  3],
+          ['房地产业',  4],
+          ['批发和零售业',  5],
+
+        ], 
+        evenRowBGC:'#0A2732',
+        oddRowBGC:'0A2732',
+        
+
+      },
+      items:[
+          {
+          name: '股权质押',
+          value: 683
+          },
+          {
+          name: '转让股价',
+          value: 234
+          },
+          {
+          name: '股份增持',
+          value: 240
+          },
+          {
+          name: '债券发行',
+          value: 523
+          },
+          {
+          name: '高管变动',
+          value: 345
+          },
+          {
+          name: '产品发布',
+          value: 320
+          },
+          {
+          name: '破产',
+          value: 280
+          },
+          {
+          name: '业绩下滑',
+          value: 271
+          },
+      ],
+      //
+      date:[],
+      rate:[],
+      macro:[],
+      montary:[],
+      income:[],
+      investment:[],
+      loan:[],
+      lever:[],
+      other:[],
+      whole:[],
+      title:['利率','货币','信贷','宏观指标','收入和融资','银行理财','整体杠杆','其他']
+    }
+  },
+  mounted(){
+    // 自动登录
+    const params = new URLSearchParams();
+    params.append('username', 'gongdragon');
+    params.append('password', 'gwl123');
+    http.post('/users/login/', params)
+    .then((res)=>{
+      if (res.data.message===1){
+        this.loading = false
+        let user={token:res.data.data,name:'gongdragon',stats:res.data.stats}
+        this.$store.commit('login',user)
+      } else {
+        this.$message({
+          showClose: true,
+          message: res.data.data,
+          type: 'warning'
+        });
+        this.loading = false
+      }
+    }).then(()=>{
+
+      // 健康指数 雷达图
+    http.get(
+            "/health/health_search/",
+            {params:{
+                name: '上海纳尔实业股份有限公司',//公司名
+                date: '2024-01',//时间（年份+季度）
+    }}).then(response => {
+      console.log('Response',response);
+      
+      // let radarDatas// 存放所有数据项
+      // radarDatas = response.data.data.map(item => {
+      //   // 单个数据项 转化为echarts格式
+      //   let radarData = [item.投资关系,item.操盘模式,item.财务状态,item.运行状态,item.规模扩张,item.声誉风险,item.外部环境]
+      //   return radarData
+      // })
+      // console.log('radarDatas',radarDatas)
+      let radarData = []
+      for (let i in response.data.data) {
+        if (i !== '健康指数' && i !== '等级' && typeof response.data.data[i] === 'number') radarData.push(response.data.data[i])
+      }
+    console.log('radarData',radarData);
+    
+      const echarts3 = echarts.init(this.$refs.echarts_3)
+      const option = {
+        tooltip: {},
+        legend: {
+            data: ['纳尔实业', '平安保险','招商银行'],
+            x:"center",
+            y:'bottom',
+            textStyle:{
+                color:"#fff"
+            }
+        },
+        color: ['red', 'yellow', 'blue'],
+        radar: {
+            name:{
+                textStyle: {
+                    //设置颜色
+                    color:'#fff'
+                }
+            },
+            indicator: [
+            { name: '投资关系', max: 100, color:'#fff'},
+            { name: '操盘模式', max: 100, color:'#fff' },
+            { name: '财务状态', max: 100, color:'#fff' },
+            { name: '运行状态', max: 100, color:'#fff' },
+            { name: '规模扩张', max: 100, color:'#fff' },
+            { name: '声誉风险', max: 100, color:'#fff' },
+            { name: '外部环境', max: 100, color:'#fff' }
+            ],
+            center: ['50%','50%'],
+            radius: "58%"
+        },
+        series: [{
+            name: '',
+            type: 'radar',
+            itemStyle : {
+                normal : {
+                    splitLine: {
+                        lineStyle: {
+
+                        }
+                    },
+                    label: {
+                        show: false,
+                        textStyle:{
+                        },
+                        formatter:function(params) {
+                            return params.value;}
+                    },
+                }
+            },
+            data : [
+                {
+                    value : [82.44588614888224,25,54.00000000000001,58.56999999999999,20,65,5],
+                    name : '纳尔实业'
+                },
+                {
+                    value : [50.033,45,58.8,62.73,10,65,50],
+                    name : '平安保险'
+                },
+                {
+                    value : [43.064,50,53.6,64.23,10,75,50],
+                    name : '招商银行'
+                }
+            ]
+        }]
+    };
+      echarts3.setOption(option)
+    })
+    // 轮播图
+    http.get('/anomaly/item_anomaly/',{params:{
+      sc:'stock',
+    }}).then((res)=>{
+      // console.log(res.data.data);
+      const formatData = res.data.data.map(item => {
+        return [item.监测时间,item.名称,item.异常关联类型]
+      })
+      const config22 = {
+        header: ['监测时间', '名称', '异常关联类型'],
+        data: formatData,
+        // headerBGC:'black',
+        evenRowBGC:'#0A2732',
+        oddRowBGC:'0A2732',
+      }
+      // console.log('formatData',formatData);
+      this.config22 = config22
+    })
+
+    //系统性
+    this.$refs.dimension.getData()
+
+    // 宏观分析折线图
+    http.get('/risk/future_risk/').then((res)=>{
+        this.date=res.data.date
+        this.rate=res.data.rate
+        this.macro=res.data.macro
+        this.montary=res.data.montary
+        this.income=res.data.income
+        this.investment=res.data.investment
+        this.loan=res.data.loan
+        this.lever=res.data.lever
+        this.other=res.data.other
+        this.whole.push(this.rate)
+        this.whole.push(this.montary)
+        this.whole.push(this.loan)
+        this.whole.push(this.macro)
+        this.whole.push(this.income)
+        this.whole.push(this.investment)
+        this.whole.push(this.lever)
+        this.whole.push(this.other)
+      }).then(()=>{
+        for(let i = 0; i < 6; i++) {
+        // let chartContainer = 'chartContainer' + i
+        let echart = echarts.init(this.$refs.chartContainer)
+
+        const option = {
+          title:{
+            text:this.title[4],
+            textStyle:{
+            color:'#fff'
+            },
+            left:'center'
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            top:30,
+            textStyle:{
+            color:'#fff'
+            },
+          },
+          xAxis: {
+            type: 'category',
+            data: this.date,
+            axisLabel: {//x轴文字的配置
+                show: true,
+                textStyle: {
+                    color: "#fff",
+                }
+            },
+          },
+          yAxis: {
+            type: 'value',
+            axisLabel: {//x轴文字的配置
+                show: true,
+                textStyle: {
+                    color: "#fff",
+                }
+            },
+          },
+          grid:{
+            containLabel:true
+          },
+          series: this.whole[4]
+        };
+        echart.setOption(option)
+      }}
+      )
+
+
+    })
+  }
+
+}
+</script>

src/bigscreen1/ModuleMain.vue

@@ -0,0 +1,156 @@
+<template>
+  <!-- 一行二等分 -->
+  <div class="module-box">
+    <div style="flex:0 1 25%">
+       <dv-border-box-13 style="width:100%;height:300px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">舆情预警</h3>
+        <!-- <CapsuleChart :colorsChart="['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff']"/> -->
+        <!-- <CapsuleChart :dataChart="items"/> -->
+        <div style="display: flex;justify-content: center;align-items: center;">
+          <dv-scroll-board :config="config1" style="width:95%;height:220px;justify-content: center;align-items: center" />
+         </div>
+      </dv-border-box-13>
+    </div>
+   
+
+    <div style="flex:0 1 50%">
+      <dv-border-box-13 style="width:100%;height:300px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">系统性风险指数</h3>
+        <!-- <CapsuleChart :dataChart="items"/> -->
+        <LineChart />
+
+      </dv-border-box-13>
+    </div>
+
+    <div style="flex:0 1 25%">
+      <dv-border-box-13 style="width:100%;height:300px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">异常监测结果</h3>
+        <!-- <CapsuleChart :dataChart="items"/> -->
+         <div style="display: flex;justify-content: center;align-items: center;">
+          <dv-scroll-board :config="config2" style="width:95%;height:220px;" />
+         </div>
+        
+      </dv-border-box-13>
+    </div>
+    
+  </div>
+
+</template>
+
+<script>
+import CapsuleChart from './CapsuleChart.vue';
+import LineChart from './LineChart.vue'
+
+export default {
+components:{
+CapsuleChart,
+LineChart
+},
+data(){
+return {
+  // 表格设置
+  config1 : { 
+    header: ['主体代码&nbsp', '行业', '&nbsp&nbsp&nbsp&nbsp&nbsp预警时刻','&nbsp&nbsp&nbsp风险水平','风险类型&nbsp'],
+    data: [
+        {
+          主体代码:'688001.SH',
+          行业:'计算机',
+          预警时刻:'2023/6/29 16:00',
+          风险水平:'严重',
+          风险类型:'流动风险',
+        },
+        {
+          主体代码:'688002.SH',
+          行业:'计算机',
+          当前预警时刻:'2023/6/29 16:00',
+          预警类型:'严重',
+          风险类型:'市场风险',
+        },
+        {
+          主体代码:'688002.SH',
+          行业:'计算机',
+          当前预警时刻:'2023/6/29 16:00',
+          预警类型:'严重',
+          风险类型:'市场风险',
+        },
+        {
+          主体代码:'688002.SH',
+          行业:'计算机',
+          当前预警时刻:'2023/6/29 16:00',
+          预警类型:'严重',
+          风险类型:'市场风险',
+        },
+        {
+          主体代码:'688002.SH',
+          行业:'计算机',
+          当前预警时刻:'2023/6/29 16:00',
+          预警类型:'严重',
+          风险类型:'市场风险',
+        },
+      ],
+    
+
+  evenRowBGC:'#0A2732',
+  oddRowBGC:'0A2732',
+  headerBGC:'rgba(61,89,171,0.5)',
+  align: ['right'],
+  
+
+},
+
+
+  config2 :
+  { 
+    data: [
+    ['教育',  7],
+    ['金融业',  1],
+    ['房地产业',  2],
+    ['制造业',  3],
+    ['房地产业',  4],
+    ['批发和零售业',  5],
+
+  ], 
+  evenRowBGC:'#0A2732',
+  oddRowBGC:'0A2732',
+  
+
+},
+
+items:[
+    {
+    name: '股权质押',
+    value: 683
+    },
+    {
+    name: '转让股价',
+    value: 234
+    },
+    {
+    name: '股份增持',
+    value: 240
+    },
+    {
+    name: '债券发行',
+    value: 523
+    },
+    {
+    name: '高管变动',
+    value: 345
+    },
+    {
+    name: '产品发布',
+    value: 320
+    },
+    {
+    name: '破产',
+    value: 280
+    },
+    {
+    name: '业绩下滑',
+    value: 271
+    },
+]
+}
+}
+}
+</script>

src/bigscreen1/ModuleTitle.vue

@@ -0,0 +1,32 @@
+<template>
+    <!-- 标题 一行三等分 -->
+    <div class="module-box">
+      <div style="flex:0 1 30%">
+        <dv-decoration-10 style="height:5px;" />
+      </div>
+
+      <div style="flex:0 1 40%">
+        <div class="d-flex">
+          <dv-decoration-8 style="height:50px;flex:1;" />
+          <h2 style="font-size: 20px;">资本市场系统风险监测与预警平台</h2>
+          <!-- <div style="font-size: large;">大规模泛金融知识图谱系统</div> -->
+          <dv-decoration-8 :reverse="true" style="height:50px;flex:1;" />
+        </div>
+        
+      </div>
+
+      <div style="flex:0 1 30%">
+        <dv-decoration-10 style="height:5px;transform:rotateY(180deg)" />
+      </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: 'HomeView',
+  
+
+}
+</script>

src/bigscreen1/RadarChart.vue

@@ -0,0 +1,103 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width: 100%;height:340px;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initWebsocket();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+   
+               // 指定图表的配置项和数据
+               let 
+               option = {
+        title: {
+            text: ''
+        },
+        tooltip: {},
+        legend: {
+
+            data: ['第一标准', '第二标准','第三标准'],
+            x:"center",
+            y:'bottom',
+            textStyle:{
+                color:"#fff"
+            }
+        },
+        color: ['#4c95d9', '#f6731b', '#8cd43f'],
+        radar: {
+            name:{
+                textStyle: {
+                    //设置颜色
+                    color:'#fff'
+                }
+            },
+            indicator: [
+                { name: 'test1', max: 6500},
+                { name: 'test2', max: 16000},
+                { name: 'test3', max: 30000},
+                { name: 'test4', max: 38000},
+                { name: 'test5', max: 52000},
+                { name: 'test6', max: 25000}
+            ],
+            center: ['50%','50%'],
+            radius: "58%"
+        },
+        series: [{
+            name: '',
+            type: 'radar',
+            itemStyle : {
+                normal : {
+                    splitLine: {
+                        lineStyle: {
+
+                        }
+                    },
+                    label: {
+                        show: false,
+                        textStyle:{
+                        },
+                        formatter:function(params) {
+                            return params.value;}
+                    },
+                }
+            },
+            data : [
+                {
+                    value : [2400, 10000, 28000, 35000, 50000, 19000],
+                    name : '第一标准'
+                },
+                {
+                    value : [5000, 14000, 28000, 31000, 42000, 21000],
+                    name : '第二标准'
+                },
+                {
+                    value : [6000, 14000, 18000, 21000, 32000, 11000],
+                    name : '第三标准'
+                }
+            ]
+        }]
+    };
+
+               myChart.setOption(option);
+           },
+           initWebsocket(){
+              
+                   this.initChart();
+               
+           }
+       }
+   }
+   </script>

src/bigscreen1/ScaleBox.vue

@@ -0,0 +1,81 @@
+<template>
+    <div
+      class="ScaleBox"
+      ref="ScaleBox"
+      :style="{
+        width: width + 'px',
+        height: height + 'px',
+      }"
+    >
+      <slot></slot>
+    </div>
+  </template>
+   
+  <script>
+  export default {
+    name: "ScaleBox",
+    props: {},
+    data() {
+      return {
+        scale: 0,
+        width: 1920,
+        height: 1080,
+      };
+    },
+    mounted() {
+      this.setScale();
+      window.addEventListener("resize", this.debounce(this.setScale));
+    },
+    methods: {
+      getScale() {
+        // 固定好16：9的宽高比，计算出最合适的缩放比
+        const { width, height } = this;
+        const wh = window.innerHeight / height;
+        const ww = window.innerWidth / width;
+        console.log(ww < wh ? ww : wh);
+        return ww < wh ? ww : wh;
+      },
+      setScale() {
+        // 获取到缩放比例，设置它
+        this.scale = this.getScale();
+        if (this.$refs.ScaleBox) {
+          this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
+        }
+      },
+      debounce(fn, delay) {
+        const delays = delay || 500;
+        let timer;
+        return function () {
+          const th = this;
+          const args = arguments;
+          if (timer) {
+            clearTimeout(timer);
+          }
+          timer = setTimeout(function () {
+            timer = null;
+            fn.apply(th, args);
+          }, delays);
+        };
+      },
+    },
+  };
+  </script>
+   
+  <style lang="scss">
+  #ScaleBox {
+    --scale: 1;
+  }
+  .ScaleBox {
+    position: absolute;
+    transform: scale(var(--scale)) translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    transform-origin: 0 0;
+    left: 50%;
+    top: 50%;
+    transition: 0.3s;
+    z-index: 999;
+    // background: rgba(255, 0, 0, 0.3);
+  }
+  </style>
+   

src/bigscreen1/components/CapsuleChart.vue

@@ -0,0 +1,52 @@
+<template>
+    <dv-capsule-chart :config="config" style="width:100%;height:260px" />
+</template>
+
+<script>
+
+
+export default {
+props:{
+    colorsChart:{
+        type:Array,
+        default:()=>[]
+    },
+    dataChart:{
+        type:Array,
+        default:()=>[
+            {
+            name: '南阳',
+            value: 167
+            },
+            {
+            name: '周口',
+            value: 67
+            },
+            {
+            name: '漯河',
+            value: 123
+            },
+            {
+            name: '郑州',
+            value: 55
+            },
+            {
+            name: '西峡',
+            value: 98
+            }
+        ]
+    }
+},
+data(){
+  return {
+    config:{
+      data: this.dataChart,
+      colors: this.colorsChart,
+      unit: '单位',
+      showValue: true
+    }
+  }
+}
+
+}
+</script>

src/bigscreen1/components/LineChart.vue

@@ -0,0 +1,105 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width: 100%;height:250px;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initWebsocket();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+   
+               // 指定图表的配置项和数据
+               let option = {
+                    xAxis: {
+                    type: "category",
+                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+                    position: "bottom",
+                    axisLine: true,
+                    axisLabel: {
+                        color: "rgba(255,255,255,.8)",
+                        fontSize: 12,
+                    },
+                    },
+                    yAxis: {
+                    type: "value",
+                    name: "年度生产量",
+                    nameLocation: "end",
+                    nameGap: 24,
+                    nameTextStyle: {
+                        color: "rgba(255,255,255,.5)",
+                        fontSize: 14,
+                    },
+                    splitNumber: 4,
+                    axisLine: {
+                        lineStyle: {
+                        opacity: 0,
+                        },
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                        color: "#fff",
+                        opacity: 0.1,
+                        },
+                    },
+                    axisLabel: {
+                        color: "rgba(255,255,255,.8)",
+                        fontSize: 12,
+                    },
+                    },
+                    grid: {
+                    left: 50,
+                    right: 10,
+                    bottom: 25,
+                    top: "18%",
+                    },
+                    series: [
+                    {
+                        data:  [220, 182, 191, 234, 290, 330, 310],
+                        type: "line",
+                        smooth: true,
+                        symbol: "emptyCircle",
+                        symbolSize: 8,
+                        itemStyle: {
+                        // normal: {
+                        //     color: "#fff",
+                        // },
+                        },
+                     },
+                     {
+                        data: [820, 932, 901, 934, 1290, 1330, 1320],
+                        type: "line",
+                        smooth: true,
+                        symbol: "emptyCircle",
+                        symbolSize: 8,
+                        itemStyle: {
+                        // normal: {
+                        //     color: "#fff",
+                        // },
+                        },
+                     },
+        ],
+      };
+
+               myChart.setOption(option);
+           },
+           initWebsocket(){
+              
+                   this.initChart();
+               
+           }
+       }
+   }
+   </script>

src/bigscreen1/components/Map.vue

@@ -0,0 +1,104 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width:100%;height:80%;;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   import chinaMap from '@/assets/json/china.json'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initChart();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+               echarts.registerMap('china', chinaMap);
+   
+               // 指定图表的配置项和数据
+               var option = {
+                   geo:{
+                    show:true,
+                    type:'map',
+                    map:'china',
+                    // label:{
+                    //     show:true, //文字标签显示
+                    //     color:'#fff',
+                    //     fontSize:12
+                    // },
+                    itemStyle:{  //图形样式
+                        areaColor:'#3352c7', //背景色
+                        borderColor:'#fff',
+                        borderWidth:1
+                    },
+                    zoom:1.2,
+                    emphasis:{  //高亮状态
+                        label:{
+                            show:true, //文字标签显示
+                            color:'#fff',
+                            fontSize:14
+                        },
+                        itemStyle:{  //图形样式
+                            areaColor:'#f60', //背景色
+                            borderColor:'#ccc',
+                            borderWidth:1
+                        },
+                    }
+                   },
+                   series:[
+                    {
+                        type:'effectScatter', //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出
+                        coordinateSystem:'geo',//该系列使用的坐标系
+                        rippleEffect:{ //涟漪特效相关配置。
+                            period:2,
+                            brushType:'stroke',
+                            scale :5,
+                        },
+                        label:{  //标签
+                            normal:{
+                                show:true,
+                                position:'right'
+                            }
+                        },
+                        itemStyle:{
+                            color:'#f00'
+                        },
+                        symbol:'circle' ,//标记的图形，还可以设置图片
+                        symbolSize:function(val){
+                            return val[2]
+                        },
+                        data:[
+                            {
+                                name:'鄂尔多斯',
+                                value:[109.781327, 39.608266,20]
+                            },
+                            {
+                                name:'张家口',
+                                value:[114.87, 40.82,5]
+                            },
+                            {
+                                name:'珠海',
+                                value:[113.52, 22.3,15]
+                            },
+                            {
+                                name:'武汉',
+                                value:[114.31, 30.52,30]
+                            }
+                        ]
+
+                    }
+                   ]
+               };
+               // 使用刚指定的配置项和数据显示图表。
+               myChart.setOption(option);
+           },
+       }
+   }
+   </script>

src/bigscreen1/components/RadarChart.vue

@@ -0,0 +1,103 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width: 100%;height:80%;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initWebsocket();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+   
+               // 指定图表的配置项和数据
+               let 
+               option = {
+        title: {
+            text: ''
+        },
+        tooltip: {},
+        legend: {
+
+            data: ['第一标准', '第二标准','第三标准'],
+            x:"center",
+            y:'bottom',
+            textStyle:{
+                color:"#fff"
+            }
+        },
+        color: ['#4c95d9', '#f6731b', '#8cd43f'],
+        radar: {
+            name:{
+                textStyle: {
+                    //设置颜色
+                    color:'#fff'
+                }
+            },
+            indicator: [
+                { name: 'test1', max: 6500},
+                { name: 'test2', max: 16000},
+                { name: 'test3', max: 30000},
+                { name: 'test4', max: 38000},
+                { name: 'test5', max: 52000},
+                { name: 'test6', max: 25000}
+            ],
+            center: ['50%','50%'],
+            radius: "58%"
+        },
+        series: [{
+            name: '',
+            type: 'radar',
+            itemStyle : {
+                normal : {
+                    splitLine: {
+                        lineStyle: {
+
+                        }
+                    },
+                    label: {
+                        show: false,
+                        textStyle:{
+                        },
+                        formatter:function(params) {
+                            return params.value;}
+                    },
+                }
+            },
+            data : [
+                {
+                    value : [2400, 10000, 28000, 35000, 50000, 19000],
+                    name : '第一标准'
+                },
+                {
+                    value : [5000, 14000, 28000, 31000, 42000, 21000],
+                    name : '第二标准'
+                },
+                {
+                    value : [6000, 14000, 18000, 21000, 32000, 11000],
+                    name : '第三标准'
+                }
+            ]
+        }]
+    };
+
+               myChart.setOption(option);
+           },
+           initWebsocket(){
+              
+                   this.initChart();
+               
+           }
+       }
+   }
+   </script>

src/bigscreen1/components/dimensionComponent.vue

@@ -0,0 +1,323 @@
+<template>
+  <div style="height: 85%;">
+    <div ref="dimension"  style="width: 100%; height: 100%;margin-left: 0px;margin-top: 0px;"></div>
+    <!-- <div class="warning-component">
+      <div class="warning-dates">
+        <button class="button" @click="changeState">
+          <span class="text">{{ state }}</span>
+          <svg class="arrow" viewBox="0 0 448 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg>
+        </button>
+        <div class="date-item">前日：<span>{{ prevDayDim }}</span></div>
+        <div class="date-item">昨日：<span>{{ yesterdayDim }}</span></div>
+        <div class="date-item">今日：<span>{{ todayDim }}</span></div>
+        <div class="date-item">明日：<span>{{ tomorrowDim }}</span></div>
+
+      </div>
+    </div> -->
+  </div>
+
+
+
+</template>
+
+<script>
+import * as echarts from "echarts";
+import http from "@/utils/request";
+
+export default {
+  props: {
+    // xData:[],
+    // yData: [],
+    // legend:String,
+    title:String,
+    zoom:{
+      type:Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data(){
+    return {
+      datazoom:[],
+      state:'个体风险状态',
+      individualRisk:[],
+      structureRisk:[],
+      spillRisk:[],
+      volatilityRisk:[],
+      markArea:[],
+      date:[],
+      detail:'',
+      prevDayDim:'',
+      yesterdayDim:'',
+      todayDim:'',
+      tomorrowDim:'',
+    }
+  },
+
+  mounted: function () {
+  },
+  watch:{
+    // prevDayDim(){
+    //   return this.detail[this.state][0]
+    // },
+    // yesterdayDim(){
+    //   return this.detail[this.state][1]
+    // },
+    // todayDim(){
+    //   return this.detail[this.state][2]
+    // },
+    // tomorrowDim(){
+    //   return this.detail[this.state][3]
+    // },
+    zoom(newVal){
+      this.datazoom=newVal
+
+    },
+    state(){
+
+      this.prevDayDim=this.detail[this.state][0]
+      this.yesterdayDim=this.detail[this.state][1]
+      this.todayDim=this.detail[this.state][2]
+      this.tomorrowDim=this.detail[this.state][3]
+
+    }
+
+  },
+  methods:{
+    getData(){
+      http.get('/risk/dimension/').then((res)=>{
+      this.date=res.data.date
+      this.individualRisk=res.data.individual
+      this.structureRisk=res.data.structure
+      this.spillRisk=res.data.spill
+      this.volatilityRisk=res.data.volatility
+      this.detail=res.data.detail
+      this.markArea=res.data.markarea
+      this.prevDayDim=res.data.detail[this.state][0]
+      this.yesterdayDim=res.data.detail[this.state][1]
+      this.todayDim=res.data.detail[this.state][2]
+      this.tomorrowDim=res.data.detail[this.state][3]
+      this.initChart()
+
+        }
+    )
+    },
+    changeState(){
+      let lis=['个体风险状态','风险关联与溢出','市场系统结构','市场波动和趋势']
+      this.state=lis.indexOf(this.state)+1>3? '个体风险状态':lis[lis.indexOf(this.state)+1]
+    },
+    initChart(){
+      /*
+      示例参考如下
+      * https://echarts.apache.org/v4/examples/zh/editor.html?c=line-aqi
+      *
+      * https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json
+      *
+      * */
+      var myChart = echarts.init(this.$refs["dimension"])
+      let option = {
+        title: {
+          text: '系统性风险指数维度分析',
+          left: 'center',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.date,
+          axisLabel:{
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+        },
+        legend: {
+          top:30,
+          data: ['个体风险状态', '风险关联与溢出', '市场系统结构', '市场波动和趋势'],
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        yAxis: {
+          scale: true,
+          splitLine: {
+            show: false
+          },
+          axisLabel:{
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+        },
+        //以下是时间轴
+        dataZoom: [{
+          //也应该是动态的
+          start:80,
+          end:100,
+          type: 'slider',
+          dataBackground:{
+            lineStyle:{
+              color: '#fff'
+            },
+            areaStyle:{
+              color: '#fff'
+            }
+          },
+          textStyle:{
+            color: '#fff'
+          },
+          maxSpan:30
+        }],
+        //以上是时间轴
+        series: [{
+          name: '个体风险状态',
+          type: 'line',
+          smooth:0.8,
+          data: this.individualRisk
+        },
+          {
+            name: '风险关联与溢出',
+            type: 'line',
+            smooth:0.8,
+            data: this.spillRisk
+          },
+          {
+            name: '市场系统结构',
+            type: 'line',
+            smooth:0.8,
+            data: this.structureRisk
+          },
+          {
+            name: '市场波动和趋势',
+            type: 'line',
+            smooth:0.8,
+            data: this.volatilityRisk,
+            markArea:{
+              label: { // 分界线上的文字标签
+                // position: 'end',
+                formatter: '预测值'
+              },
+              data:[[{
+                xAxis:this.markArea[0]},
+                {
+                  xAxis:this.markArea[1]},
+              ]]
+
+
+
+            }
+          },
+        ],
+      }
+      myChart.setOption(option);
+      // this.$nextTick(()=>{
+      //   myChart.dispatchAction({
+      //     type: 'dataZoom',
+      //     batch: [{
+      //       // 第一个 dataZoom 组件
+      //       start: this.datazoom[0],
+      //       end: this.datazoom[1]
+      //     }]
+      //   })
+      // })
+
+    }
+
+  },
+
+}
+</script>
+
+<style scoped>
+
+.button {
+  border-radius: 7px;
+  width: 160px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  cursor: pointer;
+  border: 3px solid rgb(94, 255, 209);
+  background-color: rgb(94, 255, 209);
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.137);
+}
+
+.text {
+
+  width: 70%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+//background-color: rgb(255, 255, 255);
+  color: black;
+}
+
+.arrow path {
+  fill: rgb(19, 19, 19);
+}
+
+.button:hover .arrow {
+  animation: slide-in-left 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+@keyframes slide-in-left {
+  0% {
+    transform: translateX(-8px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(0px);
+    opacity: 1;
+  }
+}
+
+.button:active {
+  transform: scale(0.97);
+}
+.warning-component {
+  background-color: #ffffff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  max-width: 100%;
+  text-align: center;
+
+  margin: auto;
+}
+
+.warning-dates {
+  display: flex;
+  justify-content: space-between;
+//margin-bottom: 10px;
+}
+
+.date-item {
+  margin: 0 10px;
+  font-weight: bold;
+}
+
+.warning-recent {
+  color: #ff4d4f;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+
+</style>

src/bigscreen1/components/riskIndexComponent.vue

@@ -0,0 +1,156 @@
+<template>
+  <div style="height: 95%;">
+    <div ref="index"  style="width: 100%; height: 100%;margin-left: 0px;margin-top: 0px;"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import http from "@/utils/request";
+
+export default {
+  props: {
+    date:[],
+    result:[],
+    title:String,
+    zoom:{
+      type:Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data(){
+    return {
+      //数据库结构映射
+    mapTable:{'个体风险状态':["经营风险","信用风险","流动性风险","市场风险","非流动性"],'风险关联与溢出':["条件在险价值差额","Coplua","协整关系","吸收率"],'市场系统结构':['聚类系数','密度变化','同配性'],
+      '市场波动和趋势':['vixPlus指数','市场受损性']},
+      datazoom:[],
+    state:'个体风险状态'
+    }
+  },
+watch:{
+    title(newValue){
+    this.state=newValue
+    },
+  zoom(newVal){
+    this.datazoom=newVal
+  }
+},
+  mounted() {
+    
+  },
+
+  methods:{
+    getData(){
+      var that=this
+    http.get('/risk/index/?table='+this.title).then((res)=>{
+      that.date=res.data.date
+      that.result=res.data.result
+      var series=[]
+      let nameLis=[]
+      for (let yaxis in this.result){
+        nameLis.push(this.result[yaxis].name)
+        series.push({
+          data:this.result[yaxis].data,
+          type:'line',
+          name:this.result[yaxis].name
+        })
+      }
+      this.initChart(nameLis,series)
+    })
+    },
+    initChart(nameLis,series){
+      /*
+      示例参考如下
+      * https://echarts.apache.org/v4/examples/zh/editor.html?c=line-aqi
+      *
+      * https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json
+      *
+      * */
+      var myChart = echarts.init(this.$refs["index"])
+      let option = {
+        title: {
+          text: this.title,
+          left:'center',
+          textStyle:{
+            color: '#fff'
+          },
+        },
+        
+        legend: {
+          top:30,
+          data: nameLis,
+          textStyle: {
+            color: '#fff'
+          }
+        }
+        ,
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          data: this.date,
+          axisLabel:{
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+        },
+        yAxis: {
+          scale:true,
+          splitLine: {
+            show: false
+          },
+          axisLabel:{
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+        },
+        //以下是时间轴
+        dataZoom: [{
+          //也应该是动态的
+          startValue: '2022-07-01',
+          type: 'slider',
+          dataBackground:{
+            lineStyle:{
+              color: '#fff'
+            },
+            areaStyle:{
+              color: '#fff'
+            }
+          },
+          textStyle:{
+            color: '#fff'
+          },
+          maxSpan:30,
+          bottom:10
+        }],
+        //以上是时间轴
+        series: series,
+      }
+      myChart.setOption(option);
+      myChart.dispatchAction({
+        type: 'dataZoom',
+        batch: [{
+          // 第一个 dataZoom 组件
+          start: this.datazoom[0],
+          end: this.datazoom[1]
+        }]
+      })
+    }
+  },
+
+}
+</script>
+
+<style scoped>
+
+</style>

src/bigscreen1/components/riskIndexComponent1.vue

@@ -0,0 +1,156 @@
+<template>
+  <div style="height: 95%;">
+    <div ref="index"  style="width: 100%; height: 100%;margin-left: 0px;margin-top: 0px;"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import http from "@/utils/request";
+
+export default {
+  props: {
+    date:[],
+    result:[],
+    title:String,
+    zoom:{
+      type:Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data(){
+    return {
+      //数据库结构映射
+    mapTable:{'个体风险状态':["经营风险","信用风险","流动性风险","市场风险","非流动性"],'风险关联与溢出':["条件在险价值差额","Coplua","协整关系","吸收率"],'市场系统结构':['聚类系数','密度变化','同配性'],
+      '市场波动和趋势':['vixPlus指数','市场受损性']},
+      datazoom:[],
+    state:'个体风险状态'
+    }
+  },
+watch:{
+    title(newValue){
+    this.state=newValue
+    },
+  zoom(newVal){
+    this.datazoom=newVal
+  }
+},
+  mounted() {
+    this.getData()
+  },
+
+  methods:{
+    getData(){
+      var that=this
+    http.get('/risk/index/?table='+this.title).then((res)=>{
+      that.date=res.data.date
+      that.result=res.data.result
+      var series=[]
+      let nameLis=[]
+      for (let yaxis in this.result){
+        nameLis.push(this.result[yaxis].name)
+        series.push({
+          data:this.result[yaxis].data,
+          type:'line',
+          name:this.result[yaxis].name
+        })
+      }
+      this.initChart(nameLis,series)
+    })
+    },
+    initChart(nameLis,series){
+      /*
+      示例参考如下
+      * https://echarts.apache.org/v4/examples/zh/editor.html?c=line-aqi
+      *
+      * https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json
+      *
+      * */
+      var myChart = echarts.init(this.$refs["index"])
+      let option = {
+        title: {
+          text: this.title,
+          left:'center',
+          textStyle:{
+            color: '#fff'
+          },
+        },
+        
+        legend: {
+          top:30,
+          data: nameLis,
+          textStyle: {
+            color: '#fff'
+          }
+        }
+        ,
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          data: this.date,
+          axisLabel:{
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+        },
+        yAxis: {
+          scale:true,
+          splitLine: {
+            show: false
+          },
+          axisLabel:{
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+        },
+        //以下是时间轴
+        dataZoom: [{
+          //也应该是动态的
+          startValue: '2022-07-01',
+          type: 'slider',
+          dataBackground:{
+            lineStyle:{
+              color: '#fff'
+            },
+            areaStyle:{
+              color: '#fff'
+            }
+          },
+          textStyle:{
+            color: '#fff'
+          },
+          maxSpan:30,
+          bottom:10
+        }],
+        //以上是时间轴
+        series: series,
+      }
+      myChart.setOption(option);
+      myChart.dispatchAction({
+        type: 'dataZoom',
+        batch: [{
+          // 第一个 dataZoom 组件
+          start: this.datazoom[0],
+          end: this.datazoom[1]
+        }]
+      })
+    }
+  },
+
+}
+</script>
+
+<style scoped>
+
+</style>

src/bigscreen1/components/systemRiskComponent.vue

@@ -0,0 +1,368 @@
+<template>
+<div style="height: 85%;">
+  <div style="display: flex;height: 100%;">
+    <div  ref="whole risk"  style=" float: left;width: 98%; height: 100%;margin-left: 15px;margin-top: 0px;margin-right: 0px"></div>
+    <div  ref="future"  style=" float: left; width: 2%; height: 100%;margin-left: -168px;margin-top: 0px;"></div>
+  </div>
+  <!-- <div class="warning-component">
+    <div class="warning-dates">
+      <div class="date-item">前日：<span>{{ prevDayRisk }}</span></div>
+      <div class="date-item">昨日：<span>{{ yesterdayRisk }}</span></div>
+      <div class="date-item">今日：<span>{{ todayRisk }}</span></div>
+      <div class="date-item">明日：<span>{{ tomorrowRisk }}</span></div>
+      <div class="warning-recent">
+        最近预警：<span>{{ warningRisk }}</span>
+      </div>
+    </div>
+  </div> -->
+</div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import http from "@/utils/request";
+import { color } from "d3";
+
+export default {
+
+  data(){
+    return {
+      yMax:2,
+      yMin:0,
+      prevDayRisk:'',
+      yesterdayRisk:'',
+      todayRisk:'',
+      tomorrowRisk:'',
+      warningRisk:'',
+      riskData:[],
+      markLine: [],
+      markPoint: [],
+      markArea:[],
+      future:[],
+      datazoom:[]
+    }
+  },
+props:{
+    zoom:{
+      type:Array,
+      default: function () {
+        return []
+      }
+    }
+},
+  watch:{
+    zoom(newVal){
+      this.datazoom=newVal
+    },
+    yMax(newVal){
+      console.log(newVal)
+    }
+
+  },
+  mounted() {
+    
+
+  },
+
+  methods:{
+    getData(){
+      http.get('/risk/whole/').then((res)=>{
+      this.riskData=res.data.wholerisk
+      this.markPoint=res.data.markpoint
+      this.markLine=res.data.markline
+      this.markArea=res.data.markarea
+      this.prevDayRisk=res.data.detail[0]
+      this.yesterdayRisk=res.data.detail[1]
+      this.todayRisk=res.data.detail[2]
+      this.tomorrowRisk=res.data.detail[3]
+      this.warningRisk=res.data.detail[4]
+      this.future=res.data.future
+      // console.log(this.riskData,this.markLine,this.markPoint[0])
+      this.initChart()
+    })
+
+    // this.initChart(this.dat)
+    },
+    initChart(){
+      /*
+      示例参考如下
+      * https://echarts.apache.org/v4/examples/zh/editor.html?c=line-aqi
+      *
+      * https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json
+      *
+      * */
+      let data=this.riskData
+      const future=this.future
+      var myChart = echarts.init(this.$refs["whole risk"])
+      var myChartFuture= echarts.init(this.$refs["future"])
+      let option = {
+        title: {
+          text: '系统性风险指数',
+          left: 'center',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          axisLabel:{
+            fontSize:5,
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+          data: data.map(function (item) {
+            return item[0];
+          })
+        },
+        yAxis: {
+          axisLabel:{
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+          scale:true,
+          splitLine: {
+            show: false
+          }
+        },
+        //以下是时间轴
+        dataZoom: [{
+          //也应该是动态的
+          startValue: '2022-07-01',
+          type: 'slider',
+          dataBackground:{
+            lineStyle:{
+              color: '#fff'
+            },
+            areaStyle:{
+              color: '#fff'
+            }
+          },
+          textStyle:{
+            color: '#fff'
+          },
+          maxSpan:30
+        }],
+        // 根据阈值映射不同颜色
+        visualMap: {
+          top: 10,
+          right: 0,
+          precision:2,
+          pieces: [
+            {
+              gt: 0,
+              lte: parseFloat(this.markLine[0]),
+              color: '#096'
+            },
+            {
+              gt: parseFloat(this.markLine[0]),
+              lte: parseFloat(this.markLine[1]),
+              color: '#ffde33'
+            },
+          ],
+          outOfRange: {
+            color: '#fa0744'
+          },
+          textStyle:{
+            color:'#fff'
+          }
+        },
+        series: {
+          name: '系统性风险指数',
+          type: 'line',
+          data: data.map(function (item) {
+            return item[1];
+          }),
+          //标记极端值
+          markPoint:{
+            symbol:'circle',
+            symbolSize:10,
+            data: [{
+              itemStyle:{
+                //标注的颜色
+                color: {
+                  type: 'radial',
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.5,
+                  colorStops: [{
+                    offset: 0, color: 'purple' // 0% 处的颜色
+                  }, {
+                    offset: 1, color: '#258ddc' // 100% 处的颜色
+                  }],
+                  global: false // 缺省为 false
+                }
+              },
+              //x轴的index和y值
+              coord: this.markPoint[0] // 其中 5 表示 xAxis.data[5]，即 '33' 这个元素。
+              // coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
+              // 注意，使用这种方式时，xAxis.data 不能写成 [number, number, ...]
+              // 而只能写成 [string, string, ...]
+            }]
+
+          },
+          markLine: {
+            //阈值标记线  这里应该是动态的
+            silent: true,
+            symbol:'none',
+            label:{ position:'middle',},
+            lineStyle:{
+              color:'#fff'
+            },
+            data: [{
+              yAxis: this.markLine[0]
+            }, {
+              yAxis:this.markLine[1]
+            },
+            ]
+          },
+          markArea:{
+            label: { // 分界线上的文字标签
+              // position: 'end',
+              formatter: '预测值'
+            },
+            data:[[{
+              xAxis:this.markArea[0]},
+              {
+                xAxis:this.markArea[1]
+                // x:'100%'
+              },
+            ]]
+
+          }
+        }
+      }
+      let opt2={
+        tooltip: {
+          trigger: 'item',
+        },
+        grid:
+
+          {backgroundColor: '#eeb0ae',
+            left:'0%',
+            show:true,
+            zlevel:0,
+          }
+        ,
+        xAxis:
+          {
+            data:[{value:'未来一个月'}],
+            axisLabel:{
+              fontSize:5
+            }
+            // gridIndex: 0,
+          },
+        yAxis: {
+          min:0.8,
+          max:2,
+          type: 'value',
+          show:false,
+          // boundaryGap: false,
+          // gridIndex: 1
+        },
+        series: {
+          type: 'boxplot',
+          boxWidth : [2, 10],
+          itemStyle: {
+            clip: true
+          },
+          data:[{value: this.future,} ],
+          // 确保箱型图显示在折线图之后
+          // zlevel: 3,
+          // 箱型图的x轴数据应对应未来一个月的日期，由于这些日期没有具体值，我们使用null，ECharts会自动处
+          // ... 箱型图其他配置，如颜色、样式等
+          markArea:{
+            label: { // 分界线上的文字标签
+              // position: 'end',
+              formatter: '预测值'
+            },
+            itemStyle:{
+              color:'yellow'
+            }
+            // data: [[  {
+            //   name: '平均值到最大值',
+            //   type: 'average'
+            // },
+            //   {
+            //     type: 'max'
+            //   }]]
+          },
+          tooltip: {
+            formatter: function (param) {
+              return [
+                // 'Experiment ' + param.name + ': ',
+                '最大值: ' + future[4],
+                '均值+标准差: ' + future[3],
+                '中位数: ' +future[2],
+                '均值-标准差: ' + future[1],
+                '最小值: ' + future[0]
+              ].join('<br/>');
+            }
+          }
+        }
+      }
+      myChart.setOption(option);
+      myChartFuture.setOption(opt2)
+      const that=this
+      myChart.on('datazoom', function (params) {
+        // Y轴最大值
+        this.yMax = myChart.getModel().getComponent('yAxis').axis.scale._extent[1];
+        // Y轴最小值
+        this.yMin = myChart.getModel().getComponent('yAxis').axis.scale._extent[0];
+
+        that.$nextTick(() => {
+          // 设置 myChartFuture 的 y 轴值
+          myChartFuture.setOption({
+            yAxis: {
+              min: this.yMin,
+              max: this.yMax
+            }
+          });
+        });
+      });
+    }
+
+  },
+
+}
+</script>
+
+<style scoped>
+.warning-component {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  max-width: 100%;
+  text-align: center;
+
+  margin: auto;
+}
+
+.warning-dates {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.date-item {
+  margin: 0 10px;
+  font-weight: bold;
+}
+
+.warning-recent {
+  color: #ff4d4f;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+</style>

src/bigscreen1/大屏.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="content bg">
+    
+      <!-- <dv-full-screen-container> -->
+        <scale-box>
+         <ModuleTitle />
+         <ModuleHeader />
+
+           </scale-box>
+      <!-- </dv-full-screen-container> -->
+
+    </div>
+  </template>
+  
+  <script>
+  import ModuleTitle from './ModuleTitle.vue'
+  import ModuleHeader from './ModuleHeader.vue'
+  import ModuleMain from './ModuleMain.vue'
+  import ScaleBox from './ScaleBox.vue'
+
+  
+  
+  export default {
+    name: 'HomeView',
+    components:{
+      ModuleTitle,
+      ModuleHeader,
+      ModuleMain,
+      ScaleBox,//   大屏根据显示器尺寸大小自适应
+    }
+  
+  }
+  </script>
+  
+  <style scoped>
+  @import '../assets/css/index.css';
+  </style>

src/bigscreen2/CapsuleChart.vue

@@ -0,0 +1,52 @@
+<template>
+    <dv-capsule-chart :config="config" style="width:100%;height:260px" />
+</template>
+
+<script>
+
+
+export default {
+props:{
+    colorsChart:{
+        type:Array,
+        default:()=>[]
+    },
+    dataChart:{
+        type:Array,
+        default:()=>[
+            {
+            name: '南阳',
+            value: 167
+            },
+            {
+            name: '周口',
+            value: 67
+            },
+            {
+            name: '漯河',
+            value: 123
+            },
+            {
+            name: '郑州',
+            value: 55
+            },
+            {
+            name: '西峡',
+            value: 98
+            }
+        ]
+    }
+},
+data(){
+  return {
+    config:{
+      data: this.dataChart,
+      colors: this.colorsChart,
+      unit: '单位',
+      showValue: true
+    }
+  }
+}
+
+}
+</script>

src/bigscreen2/Chart.vue

@@ -0,0 +1,70 @@
+<template>
+ <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+ <div ref="chart" style="width: 100%;height:200px;"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+    data(){
+        return {
+            items:[]
+        }
+    },
+    mounted(){
+        this.initWebsocket();
+    },
+    methods:{
+        initChart(){
+            // 基于准备好的dom，初始化echarts实例
+            var myChart = echarts.init(this.$refs.chart);
+
+            // 指定图表的配置项和数据
+            var option = {
+                color:'#f60', //系列柱颜色
+                tooltip: {},
+                // legend: {
+                //     data: ['销量']
+                // },
+                xAxis: {
+                    data: ['1月', '2月', '3月', '裤子', '高跟鞋', '袜子'],
+                    axisLine:{
+                        lineStyle:{
+                            color:'#fff'
+                        }
+                    }
+                },
+                yAxis: {
+                    axisLine:{
+                        lineStyle:{
+                            color:'#fff'
+                        }
+                    }
+                },
+                series: [
+                    {
+                    name: '销量',
+                    type: 'bar',
+                    data:this.items || [10,20,30,40,50,60,70]
+                    }
+                ],
+                grid:{
+                    left:'5%',
+                    right:'5%',
+                    top:'10%',
+                    bottom:'5%',
+                    containLabel:true
+                }
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+        initWebsocket(){
+           
+                this.initChart();
+            
+        }
+    }
+}
+</script>

src/bigscreen2/LineChart.vue

@@ -0,0 +1,105 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width: 100%;height:250px;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initWebsocket();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+   
+               // 指定图表的配置项和数据
+               let option = {
+                    xAxis: {
+                    type: "category",
+                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+                    position: "bottom",
+                    axisLine: true,
+                    axisLabel: {
+                        color: "rgba(255,255,255,.8)",
+                        fontSize: 12,
+                    },
+                    },
+                    yAxis: {
+                    type: "value",
+                    name: "年度生产量",
+                    nameLocation: "end",
+                    nameGap: 24,
+                    nameTextStyle: {
+                        color: "rgba(255,255,255,.5)",
+                        fontSize: 14,
+                    },
+                    splitNumber: 4,
+                    axisLine: {
+                        lineStyle: {
+                        opacity: 0,
+                        },
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                        color: "#fff",
+                        opacity: 0.1,
+                        },
+                    },
+                    axisLabel: {
+                        color: "rgba(255,255,255,.8)",
+                        fontSize: 12,
+                    },
+                    },
+                    grid: {
+                    left: 50,
+                    right: 10,
+                    bottom: 25,
+                    top: "18%",
+                    },
+                    series: [
+                    {
+                        data:  [220, 182, 191, 234, 290, 330, 310],
+                        type: "line",
+                        smooth: true,
+                        symbol: "emptyCircle",
+                        symbolSize: 8,
+                        itemStyle: {
+                        // normal: {
+                        //     color: "#fff",
+                        // },
+                        },
+                     },
+                     {
+                        data: [820, 932, 901, 934, 1290, 1330, 1320],
+                        type: "line",
+                        smooth: true,
+                        symbol: "emptyCircle",
+                        symbolSize: 8,
+                        itemStyle: {
+                        // normal: {
+                        //     color: "#fff",
+                        // },
+                        },
+                     },
+        ],
+      };
+
+               myChart.setOption(option);
+           },
+           initWebsocket(){
+              
+                   this.initChart();
+               
+           }
+       }
+   }
+   </script>

src/bigscreen2/Map.vue

@@ -0,0 +1,99 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width:100%;height:350px;;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   import chinaMap from '@/assets/json/china.json'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initChart();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+               echarts.registerMap('china', chinaMap);
+   
+               // 指定图表的配置项和数据
+               var option = {
+                   geo:{
+                    show:true,
+                    type:'map',
+                    map:'china',
+                    // label:{
+                    //     show:true, //文字标签显示
+                    //     color:'#fff',
+                    //     fontSize:12
+                    // },
+                    itemStyle:{  //图形样式
+                        areaColor:'#3352c7', //背景色
+                        borderColor:'#fff',
+                        borderWidth:1
+                    },
+                    zoom:1.2,
+                    emphasis:{  //高亮状态
+                        label:{
+                            show:true, //文字标签显示
+                            color:'#fff',
+                            fontSize:14
+                        },
+                        itemStyle:{  //图形样式
+                            areaColor:'#f60', //背景色
+                            borderColor:'#ccc',
+                            borderWidth:1
+                        },
+                    }
+                   },
+                   series:[
+                    {
+                        type:'effectScatter', //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出
+                        coordinateSystem:'geo',//该系列使用的坐标系
+                        rippleEffect:{ //涟漪特效相关配置。
+                            period:2,
+                            brushType:'stroke',
+                            scale :5,
+                        },
+                        label:{  //标签
+                            normal:{
+                                show:true,
+                                position:'right'
+                            }
+                        },
+                        itemStyle:{
+                            color:'#f00'
+                        },
+                        symbol:'circle' ,//标记的图形，还可以设置图片
+                        symbolSize:function(val){
+                            return val[2]
+                        },
+                        data:[
+                            {
+                                name:'北京',
+                                value:[116.405285,39.904989,20]
+                            },
+                            {
+                                name:'上海',
+                                value:[121.472644,31.231706,20]
+                            },
+                            {
+                                name:'珠海',
+                                value:[113.52, 22.3,15]
+                            }
+                        ]
+                    }
+                   ]
+               };
+               // 使用刚指定的配置项和数据显示图表。
+              myChart.setOption(option);
+           },
+       }
+   }
+   </script>

src/bigscreen2/ModuleHeader.vue

@@ -0,0 +1,564 @@
+<template>
+  <!-- 拷贝数据 -->
+  <div>
+    <div class="module-box">
+    <div style="flex:0 1 25%">
+      <!-- 股票市场 -->
+      <dv-border-box-13 style="width:100%;height:200px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">股票市场</h3>
+        <div style="display: flex;justify-content: space-evenly;align-items: center;">
+          <dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">1100</h1></dv-decoration-9>
+          <dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">1184</h1></dv-decoration-9>
+          <dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">1254</h1></dv-decoration-9>
+      </div> 
+       <div style="display: flex;justify-content: space-evenly;align-items: center;">
+        <span >低风险</span>
+        <span >中风险</span>
+        <span >高风险</span>
+      </div>  
+      </dv-border-box-13>
+      <!-- 雷达图 -->
+      <dv-border-box-13 style="width:100%;height:400px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
+        <div ref="echarts_3" style="height:80%;width:100%"></div>
+      </dv-border-box-13>
+    </div>
+    <!-- 3D -->
+    <div style="flex:0 1 50%">
+      <dv-border-box-1 style="width:100%;height:600px;">
+       <!-- 图谱 -->
+       <iframe src="/static/3d-force-graph/index1.html" ref="iframe" width="100%" height="600px" scrolling="no"></iframe>
+      </dv-border-box-1>
+    </div>
+
+    <div style="flex:0 1 25%">
+      <!-- 债券市场 -->
+      <dv-border-box-13 style="width:100%;height:200px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">债券市场</h3>
+        <div style="display: flex;justify-content: space-evenly;align-items: center;">
+          <dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">1862</h1></dv-decoration-9>
+          <dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">441</h1></dv-decoration-9>
+          <dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">87</h1></dv-decoration-9>
+      </div> 
+       <div style="display: flex;justify-content: space-evenly;align-items: center;">
+        <span >低风险</span>
+        <span >中风险</span>
+        <span >高风险</span>
+      </div>  
+      </dv-border-box-13>
+
+      <dv-border-box-13 style="width:100%;height:400px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">区域分析</h3>
+        <Map />
+      </dv-border-box-13>
+    </div>
+  </div>  
+  
+  <!-- 一行二等分 -->
+  <div class="module-box">
+    <div style="flex:0 1 25%">
+       <dv-border-box-13 style="width:100%;height:300px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">异常监测结果</h3>
+        <div style="display: flex;justify-content: center;align-items: center;">
+          <dv-scroll-board :config="config22" style="width:95%;height:220px;" />
+        </div>
+      </dv-border-box-13>
+    </div>
+   
+
+    <div style="flex:0 1 50%">
+      <dv-border-box-13 style="width:100%;height:300px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px"></h3>
+        <!-- 维度时序 -->
+        <dimension-component :zoom="datazoom" ref="dimension"/>
+
+      </dv-border-box-13>
+    </div>
+
+    <div style="flex:0 1 25%">
+      <dv-border-box-13 style="width:100%;height:300px;">
+        <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">宏观经济指标</h3>
+        <div ref="chartContainer" style="width:100%; height: 90%;margin: 1px"></div>
+        
+      </dv-border-box-13>
+    </div>
+    
+  </div>
+
+  </div>
+  
+</template>
+
+<script>
+import Map from './Map.vue'
+import RadarChart from './RadarChart.vue'
+import CapsuleChart from './CapsuleChart.vue';
+import LineChart from './LineChart.vue'
+import dimensionComponent from "./components/dimensionComponent";
+
+import http from "@/utils/request";
+import * as echarts from "echarts";
+// 数据部分
+import lunboData from './data/lunbo.json'
+import hongguanData from './data/hongguan.json'
+
+export default {
+  components:{
+    Map,
+    RadarChart,
+    CapsuleChart,
+    LineChart,
+    dimensionComponent
+  },
+  data(){
+    return {
+      config:{
+        data: [
+          {
+            name: '南阳',
+            value: 167
+          },
+          { 
+            name: '周口',
+            value: 67
+          },
+          {
+            name: '漯河',
+            value: 123
+          },
+          {
+            name: '郑州',
+            value: 55
+          },
+          {
+            name: '西峡',
+            value: 98
+          }
+        ],
+        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
+        unit: '单位',
+        showValue: true
+      },
+      config2:{
+        data: [66, 45],
+        shape: 'roundRect'
+      },
+      config3:{
+        data: [
+          {
+            name: '周口',
+            value: 55
+          },
+          {
+            name: '南阳',
+            value: 120
+          },
+          {
+            name: '西峡',
+            value: 71
+          },
+          {
+            name: '驻马店',
+            value: 66
+          },
+          {
+            name: '新乡',
+            value: 80
+          },
+          {
+            name: '信阳',
+            value: 35
+          },
+          {
+            name: '漯河',
+            value: 15
+          }
+        ],
+        img: [
+          require('../assets/img/1st.png'),
+          require('../assets/img/2st.png'),
+          require('../assets/img/3st.png'),
+          require('../assets/img/4st.png'),
+          require('../assets/img/5st.png'),
+          require('../assets/img/6st.png'),
+          require('../assets/img/7st.png'),
+        ]
+      },
+      config4:{
+        centerPoint: [0.48, 0.35],
+        points: [
+          {
+            position: [0.52, 0.235],
+            text: '新乡'
+          },
+          {
+            position: [0.43, 0.29],
+            text: '焦作'
+          },
+          {
+            position: [0.59, 0.35],
+            text: '开封'
+          },
+          {
+            position: [0.53, 0.47],
+            text: '许昌'
+          },
+          {
+            position: [0.45, 0.54],
+            text: '平顶山'
+          },
+          {
+            position: [0.36, 0.38],
+            text: '洛阳'
+          },
+          {
+            position: [0.62, 0.55],
+            text: '周口'
+          },
+          {
+            position: [0.56, 0.56],
+            text: '漯河'
+          },
+          {
+            position: [0.37, 0.66],
+            text: '南阳'
+          },
+          {
+            position: [0.55, 0.81],
+            text: '信阳'
+          },
+          {
+            position: [0.55, 0.67],
+            text: '驻马店'
+          },
+          {
+            position: [0.37, 0.29],
+            text: '济源'
+          },
+          {
+            position: [0.20, 0.36],
+            text: '三门峡'
+          },
+          {
+            position: [0.76, 0.41],
+            text: '商丘'
+          },
+          {
+            position: [0.59, 0.18],
+            text: '鹤壁'
+          },
+          {
+            position: [0.68, 0.17],
+            text: '濮阳'
+          },
+          {
+            position: [0.59, 0.10],
+            text: '安阳'
+          }
+        ],
+        bgImgUrl: require('../assets/img/map.jpg'),
+        centerPointImg: {
+          url: require('../assets/img/mapCenterPoint.png')
+        },
+        pointsImg: {
+          url: require('../assets/img/mapPoint.png')
+        }
+      },
+
+      // 表格设置
+      config1 : { 
+          header: ['主体代码&nbsp', '行业', '&nbsp&nbsp&nbsp&nbsp&nbsp预警时刻','&nbsp&nbsp&nbsp风险水平','风险类型&nbsp'],
+          data: [
+              {
+                主体代码:'688001.SH',
+                行业:'计算机',
+                预警时刻:'2023/6/29 16:00',
+                风险水平:'严重',
+                风险类型:'流动风险',
+              },
+              {
+                主体代码:'688002.SH',
+                行业:'计算机',
+                当前预警时刻:'2023/6/29 16:00',
+                预警类型:'严重',
+                风险类型:'市场风险',
+              },
+              {
+                主体代码:'688002.SH',
+                行业:'计算机',
+                当前预警时刻:'2023/6/29 16:00',
+                预警类型:'严重',
+                风险类型:'市场风险',
+              },
+              {
+                主体代码:'688002.SH',
+                行业:'计算机',
+                当前预警时刻:'2023/6/29 16:00',
+                预警类型:'严重',
+                风险类型:'市场风险',
+              },
+              {
+                主体代码:'688002.SH',
+                行业:'计算机',
+                当前预警时刻:'2023/6/29 16:00',
+                预警类型:'严重',
+                风险类型:'市场风险',
+              },
+            ],
+          
+
+        evenRowBGC:'#0A2732',
+        oddRowBGC:'0A2732',
+        headerBGC:'rgba(61,89,171,0.5)',
+        align: ['right'],
+        
+
+      },
+      config22 :
+        { 
+          data: [
+          ['教育',  7],
+          ['金融业',  1],
+          ['房地产业',  2],
+          ['制造业',  3],
+          ['房地产业',  4],
+          ['批发和零售业',  5],
+
+        ], 
+        evenRowBGC:'#0A2732',
+        oddRowBGC:'0A2732',
+        
+
+      },
+      items:[
+          {
+          name: '股权质押',
+          value: 683
+          },
+          {
+          name: '转让股价',
+          value: 234
+          },
+          {
+          name: '股份增持',
+          value: 240
+          },
+          {
+          name: '债券发行',
+          value: 523
+          },
+          {
+          name: '高管变动',
+          value: 345
+          },
+          {
+          name: '产品发布',
+          value: 320
+          },
+          {
+          name: '破产',
+          value: 280
+          },
+          {
+          name: '业绩下滑',
+          value: 271
+          },
+      ],
+      //
+      date:[],
+      rate:[],
+      macro:[],
+      montary:[],
+      income:[],
+      investment:[],
+      loan:[],
+      lever:[],
+      other:[],
+      whole:[],
+      title:['利率','货币','信贷','宏观指标','收入和融资','银行理财','整体杠杆','其他']
+    }
+  },
+  methods:{
+    getNearestWeekday() {
+      // 获取当前日期
+      const today = new Date();
+
+      // 获取当前日期是星期几，0 表示星期日，1 - 6 分别表示星期一到星期六
+      const dayOfWeek = today.getDay();
+
+      if (dayOfWeek === 0) { // 如果是星期日
+          // 距离最近的工作日是星期一，即日期加 1 天
+          today.setDate(today.getDate() - 2 );
+      } else if (dayOfWeek === 6) { // 如果是星期六
+          // 距离最近的工作日是星期一，即日期加 2 天
+          today.setDate(today.getDate() - 1 );
+      }
+
+      // 获取年、月、日
+      const year = today.getFullYear();
+      const month = today.getMonth() + 1; // 月份从 0 开始，所以要加 1
+      const date = today.getDate();
+
+      // 格式化日期
+      return `${year}-${month}-${date}`;
+    },
+  },
+  mounted(){
+    // 健康指数 雷达图
+    let radarData = [
+            {
+                value : [82.44588614888224,25,54.00000000000001,58.56999999999999,20,65,5],
+                name : '纳尔实业'
+            },
+            {
+                value : [50.033,45,58.8,62.73,10,65,50],
+                name : '平安保险'
+            },
+            {
+                value : [43.064,50,53.6,64.23,10,75,50],
+                name : '招商银行'
+    }]
+    console.log('radarData',radarData);
+    const echarts3 = echarts.init(this.$refs.echarts_3)
+    const option = {
+        tooltip: {},
+        legend: {
+            data: ['纳尔实业', '平安保险','招商银行'],
+            x:"center",
+            y:'bottom',
+            textStyle:{
+                color:"#fff"
+            }
+        },
+        color: ['red', 'yellow', 'blue'],
+        radar: {
+            name:{
+                textStyle: {
+                    //设置颜色
+                    color:'#fff'
+                }
+            },
+            indicator: [
+            { name: '投资关系', max: 100, color:'#fff'},
+            { name: '操盘模式', max: 100, color:'#fff' },
+            { name: '财务状态', max: 100, color:'#fff' },
+            { name: '运行状态', max: 100, color:'#fff' },
+            { name: '规模扩张', max: 100, color:'#fff' },
+            { name: '声誉风险', max: 100, color:'#fff' },
+            { name: '外部环境', max: 100, color:'#fff' }
+            ],
+            center: ['50%','50%'],
+            radius: "58%"
+        },
+        series: [{
+            name: '',
+            type: 'radar',
+            itemStyle : {
+                normal : {
+                    splitLine: {
+                        lineStyle: {
+                        }
+                    },
+                    label: {
+                        show: false,
+                        textStyle:{
+                        },
+                        formatter:function(params) {
+                            return params.value;}
+                    },
+                }
+            },
+            data : radarData
+        }]
+    };
+    echarts3.setOption(option)
+    
+    // 轮播图
+    const nearestWeekday = this.getNearestWeekday()
+
+    const formatData = lunboData.map(item => {
+      item.监测时间 = nearestWeekday + item.监测时间.substring(10)
+      return [item.监测时间,item.名称,item.异常关联类型]
+    })
+    const config22 = {
+      header: ['监测时间', '名称', '异常关联类型'],
+      data: formatData,
+      // headerBGC:'black',
+      evenRowBGC:'#0A2732',
+      oddRowBGC:'0A2732',
+    }
+    // console.log('formatData',formatData);
+    this.config22 = config22
+
+    //系统性
+    this.$refs.dimension.getData()
+
+    // 宏观分析折线图
+        this.date=hongguanData.date
+        this.rate=hongguanData.rate
+        this.macro=hongguanData.macro
+        this.montary=hongguanData.montary
+        this.income=hongguanData.income
+        this.investment=hongguanData.investment
+        this.loan=hongguanData.loan
+        this.lever=hongguanData.lever
+        this.other=hongguanData.other
+        this.whole.push(this.rate)
+        this.whole.push(this.montary)
+        this.whole.push(this.loan)
+        this.whole.push(this.macro)
+        this.whole.push(this.income)
+        this.whole.push(this.investment)
+        this.whole.push(this.lever)
+        this.whole.push(this.other)
+      
+        for(let i = 0; i < 6; i++) {
+        // let chartContainer = 'chartContainer' + i
+        let echart = echarts.init(this.$refs.chartContainer)
+        const option = {
+          title:{
+            text:this.title[4],
+            textStyle:{
+            color:'#fff'
+            },
+            left:'center'
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            top:30,
+            textStyle:{
+            color:'#fff'
+            },
+          },
+          xAxis: {
+            type: 'category',
+            data: this.date,
+            axisLabel: {//x轴文字的配置
+                show: true,
+                textStyle: {
+                    color: "#fff",
+                }
+            },
+          },
+          yAxis: {
+            type: 'value',
+            axisLabel: {//x轴文字的配置
+                show: true,
+                textStyle: {
+                    color: "#fff",
+                }
+            },
+          },
+          grid:{
+            containLabel:true
+          },
+          series: this.whole[4]
+        };
+        echart.setOption(option)
+      }
+      
+  }
+}
+</script>

src/bigscreen2/ModuleTitle.vue

@@ -0,0 +1,32 @@
+<template>
+    <!-- 标题 一行三等分 -->
+    <div class="module-box">
+      <div style="flex:0 1 30%">
+        <dv-decoration-10 style="height:5px;" />
+      </div>
+
+      <div style="flex:0 1 40%">
+        <div class="d-flex">
+          <dv-decoration-8 style="height:50px;flex:1;" />
+          <h2 style="font-size: 20px;">资本市场系统风险监测与预警平台</h2>
+          <!-- <div style="font-size: large;">大规模泛金融知识图谱系统</div> -->
+          <dv-decoration-8 :reverse="true" style="height:50px;flex:1;" />
+        </div>
+        
+      </div>
+
+      <div style="flex:0 1 30%">
+        <dv-decoration-10 style="height:5px;transform:rotateY(180deg)" />
+      </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: 'HomeView',
+  
+
+}
+</script>

src/bigscreen2/RadarChart.vue

@@ -0,0 +1,103 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width: 100%;height:340px;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initWebsocket();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+   
+               // 指定图表的配置项和数据
+               let 
+               option = {
+        title: {
+            text: ''
+        },
+        tooltip: {},
+        legend: {
+
+            data: ['第一标准', '第二标准','第三标准'],
+            x:"center",
+            y:'bottom',
+            textStyle:{
+                color:"#fff"
+            }
+        },
+        color: ['#4c95d9', '#f6731b', '#8cd43f'],
+        radar: {
+            name:{
+                textStyle: {
+                    //设置颜色
+                    color:'#fff'
+                }
+            },
+            indicator: [
+                { name: 'test1', max: 6500},
+                { name: 'test2', max: 16000},
+                { name: 'test3', max: 30000},
+                { name: 'test4', max: 38000},
+                { name: 'test5', max: 52000},
+                { name: 'test6', max: 25000}
+            ],
+            center: ['50%','50%'],
+            radius: "58%"
+        },
+        series: [{
+            name: '',
+            type: 'radar',
+            itemStyle : {
+                normal : {
+                    splitLine: {
+                        lineStyle: {
+
+                        }
+                    },
+                    label: {
+                        show: false,
+                        textStyle:{
+                        },
+                        formatter:function(params) {
+                            return params.value;}
+                    },
+                }
+            },
+            data : [
+                {
+                    value : [2400, 10000, 28000, 35000, 50000, 19000],
+                    name : '第一标准'
+                },
+                {
+                    value : [5000, 14000, 28000, 31000, 42000, 21000],
+                    name : '第二标准'
+                },
+                {
+                    value : [6000, 14000, 18000, 21000, 32000, 11000],
+                    name : '第三标准'
+                }
+            ]
+        }]
+    };
+
+               myChart.setOption(option);
+           },
+           initWebsocket(){
+              
+                   this.initChart();
+               
+           }
+       }
+   }
+   </script>

src/bigscreen2/ScaleBox.vue

@@ -0,0 +1,81 @@
+<template>
+    <div
+      class="ScaleBox"
+      ref="ScaleBox"
+      :style="{
+        width: width + 'px',
+        height: height + 'px',
+      }"
+    >
+      <slot></slot>
+    </div>
+  </template>
+   
+  <script>
+  export default {
+    name: "ScaleBox",
+    props: {},
+    data() {
+      return {
+        scale: 0,
+        width: 1920,
+        height: 1080,
+      };
+    },
+    mounted() {
+      this.setScale();
+      window.addEventListener("resize", this.debounce(this.setScale));
+    },
+    methods: {
+      getScale() {
+        // 固定好16：9的宽高比，计算出最合适的缩放比
+        const { width, height } = this;
+        const wh = window.innerHeight / height;
+        const ww = window.innerWidth / width;
+        console.log(ww < wh ? ww : wh);
+        return ww < wh ? ww : wh;
+      },
+      setScale() {
+        // 获取到缩放比例，设置它
+        this.scale = this.getScale();
+        if (this.$refs.ScaleBox) {
+          this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
+        }
+      },
+      debounce(fn, delay) {
+        const delays = delay || 500;
+        let timer;
+        return function () {
+          const th = this;
+          const args = arguments;
+          if (timer) {
+            clearTimeout(timer);
+          }
+          timer = setTimeout(function () {
+            timer = null;
+            fn.apply(th, args);
+          }, delays);
+        };
+      },
+    },
+  };
+  </script>
+   
+  <style lang="scss">
+  #ScaleBox {
+    --scale: 1;
+  }
+  .ScaleBox {
+    position: absolute;
+    transform: scale(var(--scale)) translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    transform-origin: 0 0;
+    left: 50%;
+    top: 50%;
+    transition: 0.3s;
+    z-index: 999;
+    // background: rgba(255, 0, 0, 0.3);
+  }
+  </style>
+   

src/bigscreen2/components/CapsuleChart.vue

@@ -0,0 +1,52 @@
+<template>
+    <dv-capsule-chart :config="config" style="width:100%;height:260px" />
+</template>
+
+<script>
+
+
+export default {
+props:{
+    colorsChart:{
+        type:Array,
+        default:()=>[]
+    },
+    dataChart:{
+        type:Array,
+        default:()=>[
+            {
+            name: '南阳',
+            value: 167
+            },
+            {
+            name: '周口',
+            value: 67
+            },
+            {
+            name: '漯河',
+            value: 123
+            },
+            {
+            name: '郑州',
+            value: 55
+            },
+            {
+            name: '西峡',
+            value: 98
+            }
+        ]
+    }
+},
+data(){
+  return {
+    config:{
+      data: this.dataChart,
+      colors: this.colorsChart,
+      unit: '单位',
+      showValue: true
+    }
+  }
+}
+
+}
+</script>

src/bigscreen2/components/LineChart.vue

@@ -0,0 +1,105 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width: 100%;height:250px;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initWebsocket();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+   
+               // 指定图表的配置项和数据
+               let option = {
+                    xAxis: {
+                    type: "category",
+                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+                    position: "bottom",
+                    axisLine: true,
+                    axisLabel: {
+                        color: "rgba(255,255,255,.8)",
+                        fontSize: 12,
+                    },
+                    },
+                    yAxis: {
+                    type: "value",
+                    name: "年度生产量",
+                    nameLocation: "end",
+                    nameGap: 24,
+                    nameTextStyle: {
+                        color: "rgba(255,255,255,.5)",
+                        fontSize: 14,
+                    },
+                    splitNumber: 4,
+                    axisLine: {
+                        lineStyle: {
+                        opacity: 0,
+                        },
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                        color: "#fff",
+                        opacity: 0.1,
+                        },
+                    },
+                    axisLabel: {
+                        color: "rgba(255,255,255,.8)",
+                        fontSize: 12,
+                    },
+                    },
+                    grid: {
+                    left: 50,
+                    right: 10,
+                    bottom: 25,
+                    top: "18%",
+                    },
+                    series: [
+                    {
+                        data:  [220, 182, 191, 234, 290, 330, 310],
+                        type: "line",
+                        smooth: true,
+                        symbol: "emptyCircle",
+                        symbolSize: 8,
+                        itemStyle: {
+                        // normal: {
+                        //     color: "#fff",
+                        // },
+                        },
+                     },
+                     {
+                        data: [820, 932, 901, 934, 1290, 1330, 1320],
+                        type: "line",
+                        smooth: true,
+                        symbol: "emptyCircle",
+                        symbolSize: 8,
+                        itemStyle: {
+                        // normal: {
+                        //     color: "#fff",
+                        // },
+                        },
+                     },
+        ],
+      };
+
+               myChart.setOption(option);
+           },
+           initWebsocket(){
+              
+                   this.initChart();
+               
+           }
+       }
+   }
+   </script>

src/bigscreen2/components/Map.vue

@@ -0,0 +1,104 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width:100%;height:80%;;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   import chinaMap from '@/assets/json/china.json'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initChart();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+               echarts.registerMap('china', chinaMap);
+   
+               // 指定图表的配置项和数据
+               var option = {
+                   geo:{
+                    show:true,
+                    type:'map',
+                    map:'china',
+                    // label:{
+                    //     show:true, //文字标签显示
+                    //     color:'#fff',
+                    //     fontSize:12
+                    // },
+                    itemStyle:{  //图形样式
+                        areaColor:'#3352c7', //背景色
+                        borderColor:'#fff',
+                        borderWidth:1
+                    },
+                    zoom:1.2,
+                    emphasis:{  //高亮状态
+                        label:{
+                            show:true, //文字标签显示
+                            color:'#fff',
+                            fontSize:14
+                        },
+                        itemStyle:{  //图形样式
+                            areaColor:'#f60', //背景色
+                            borderColor:'#ccc',
+                            borderWidth:1
+                        },
+                    }
+                   },
+                   series:[
+                    {
+                        type:'effectScatter', //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出
+                        coordinateSystem:'geo',//该系列使用的坐标系
+                        rippleEffect:{ //涟漪特效相关配置。
+                            period:2,
+                            brushType:'stroke',
+                            scale :5,
+                        },
+                        label:{  //标签
+                            normal:{
+                                show:true,
+                                position:'right'
+                            }
+                        },
+                        itemStyle:{
+                            color:'#f00'
+                        },
+                        symbol:'circle' ,//标记的图形，还可以设置图片
+                        symbolSize:function(val){
+                            return val[2]
+                        },
+                        data:[
+                            {
+                                name:'鄂尔多斯',
+                                value:[109.781327, 39.608266,20]
+                            },
+                            {
+                                name:'张家口',
+                                value:[114.87, 40.82,5]
+                            },
+                            {
+                                name:'珠海',
+                                value:[113.52, 22.3,15]
+                            },
+                            {
+                                name:'武汉',
+                                value:[114.31, 30.52,30]
+                            }
+                        ]
+
+                    }
+                   ]
+               };
+               // 使用刚指定的配置项和数据显示图表。
+               myChart.setOption(option);
+           },
+       }
+   }
+   </script>

src/bigscreen2/components/RadarChart.vue

@@ -0,0 +1,103 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width: 100%;height:80%;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initWebsocket();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+   
+               // 指定图表的配置项和数据
+               let 
+               option = {
+        title: {
+            text: ''
+        },
+        tooltip: {},
+        legend: {
+
+            data: ['第一标准', '第二标准','第三标准'],
+            x:"center",
+            y:'bottom',
+            textStyle:{
+                color:"#fff"
+            }
+        },
+        color: ['#4c95d9', '#f6731b', '#8cd43f'],
+        radar: {
+            name:{
+                textStyle: {
+                    //设置颜色
+                    color:'#fff'
+                }
+            },
+            indicator: [
+                { name: 'test1', max: 6500},
+                { name: 'test2', max: 16000},
+                { name: 'test3', max: 30000},
+                { name: 'test4', max: 38000},
+                { name: 'test5', max: 52000},
+                { name: 'test6', max: 25000}
+            ],
+            center: ['50%','50%'],
+            radius: "58%"
+        },
+        series: [{
+            name: '',
+            type: 'radar',
+            itemStyle : {
+                normal : {
+                    splitLine: {
+                        lineStyle: {
+
+                        }
+                    },
+                    label: {
+                        show: false,
+                        textStyle:{
+                        },
+                        formatter:function(params) {
+                            return params.value;}
+                    },
+                }
+            },
+            data : [
+                {
+                    value : [2400, 10000, 28000, 35000, 50000, 19000],
+                    name : '第一标准'
+                },
+                {
+                    value : [5000, 14000, 28000, 31000, 42000, 21000],
+                    name : '第二标准'
+                },
+                {
+                    value : [6000, 14000, 18000, 21000, 32000, 11000],
+                    name : '第三标准'
+                }
+            ]
+        }]
+    };
+
+               myChart.setOption(option);
+           },
+           initWebsocket(){
+              
+                   this.initChart();
+               
+           }
+       }
+   }
+   </script>

src/bigscreen2/components/dimensionComponent.vue

@@ -0,0 +1,287 @@
+<template>
+  <div style="height: 85%;">
+    <div ref="dimension"  style="width: 100%; height: 100%;margin-left: 0px;margin-top: 0px;"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import http from "@/utils/request";
+import dimensionData from '../data/dimensionData.json'
+export default {
+  props: {
+    // xData:[],
+    // yData: [],
+    // legend:String,
+    title:String,
+    zoom:{
+      type:Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data(){
+    return {
+      datazoom:[],
+      state:'个体风险状态',
+      individualRisk:[],
+      structureRisk:[],
+      spillRisk:[],
+      volatilityRisk:[],
+      markArea:[],
+      date:[],
+      detail:'',
+      prevDayDim:'',
+      yesterdayDim:'',
+      todayDim:'',
+      tomorrowDim:'',
+    }
+  },
+
+  mounted: function () {
+  },
+  watch:{
+    zoom(newVal){
+      this.datazoom=newVal
+    },
+    state(){
+      this.prevDayDim=this.detail[this.state][0]
+      this.yesterdayDim=this.detail[this.state][1]
+      this.todayDim=this.detail[this.state][2]
+      this.tomorrowDim=this.detail[this.state][3]
+    }
+  },
+  methods:{
+    getData(){
+      this.date=dimensionData.date
+      this.individualRisk=dimensionData.individual
+      this.structureRisk=dimensionData.structure
+      this.spillRisk=dimensionData.spill
+      this.volatilityRisk=dimensionData.volatility
+      this.detail=dimensionData.detail
+      this.markArea=dimensionData.markarea
+      this.prevDayDim=dimensionData.detail[this.state][0]
+      this.yesterdayDim=dimensionData.detail[this.state][1]
+      this.todayDim=dimensionData.detail[this.state][2]
+      this.tomorrowDim=dimensionData.detail[this.state][3]
+      this.initChart()
+    },
+    changeState(){
+      let lis=['个体风险状态','风险关联与溢出','市场系统结构','市场波动和趋势']
+      this.state=lis.indexOf(this.state)+1>3? '个体风险状态':lis[lis.indexOf(this.state)+1]
+    },
+    initChart(){
+      /*
+      示例参考如下
+      * https://echarts.apache.org/v4/examples/zh/editor.html?c=line-aqi
+      *
+      * https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json
+      *
+      * */
+      var myChart = echarts.init(this.$refs["dimension"])
+      let option = {
+        title: {
+          text: '系统性风险指数维度分析',
+          left: 'center',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.date,
+          axisLabel:{
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+        },
+        legend: {
+          top:30,
+          data: ['个体风险状态', '风险关联与溢出', '市场系统结构', '市场波动和趋势'],
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        yAxis: {
+          scale: true,
+          splitLine: {
+            show: false
+          },
+          axisLabel:{
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+        },
+        //以下是时间轴
+        dataZoom: [{
+          //也应该是动态的
+          start:80,
+          end:100,
+          type: 'slider',
+          dataBackground:{
+            lineStyle:{
+              color: '#fff'
+            },
+            areaStyle:{
+              color: '#fff'
+            }
+          },
+          textStyle:{
+            color: '#fff'
+          },
+          maxSpan:30
+        }],
+        //以上是时间轴
+        series: [{
+          name: '个体风险状态',
+          type: 'line',
+          smooth:0.8,
+          data: this.individualRisk
+        },
+          {
+            name: '风险关联与溢出',
+            type: 'line',
+            smooth:0.8,
+            data: this.spillRisk
+          },
+          {
+            name: '市场系统结构',
+            type: 'line',
+            smooth:0.8,
+            data: this.structureRisk
+          },
+          {
+            name: '市场波动和趋势',
+            type: 'line',
+            smooth:0.8,
+            data: this.volatilityRisk,
+            markArea:{
+              label: { // 分界线上的文字标签
+                // position: 'end',
+                formatter: '预测值'
+              },
+              data:[[{
+                xAxis:this.markArea[0]},
+                {
+                  xAxis:this.markArea[1]},
+              ]]
+
+
+
+            }
+          },
+        ],
+      }
+      myChart.setOption(option);
+      // this.$nextTick(()=>{
+      //   myChart.dispatchAction({
+      //     type: 'dataZoom',
+      //     batch: [{
+      //       // 第一个 dataZoom 组件
+      //       start: this.datazoom[0],
+      //       end: this.datazoom[1]
+      //     }]
+      //   })
+      // })
+
+    }
+
+  },
+
+}
+</script>
+
+<style scoped>
+
+.button {
+  border-radius: 7px;
+  width: 160px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  cursor: pointer;
+  border: 3px solid rgb(94, 255, 209);
+  background-color: rgb(94, 255, 209);
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.137);
+}
+
+.text {
+
+  width: 70%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+//background-color: rgb(255, 255, 255);
+  color: black;
+}
+
+.arrow path {
+  fill: rgb(19, 19, 19);
+}
+
+.button:hover .arrow {
+  animation: slide-in-left 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+@keyframes slide-in-left {
+  0% {
+    transform: translateX(-8px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(0px);
+    opacity: 1;
+  }
+}
+
+.button:active {
+  transform: scale(0.97);
+}
+.warning-component {
+  background-color: #ffffff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  max-width: 100%;
+  text-align: center;
+
+  margin: auto;
+}
+
+.warning-dates {
+  display: flex;
+  justify-content: space-between;
+//margin-bottom: 10px;
+}
+
+.date-item {
+  margin: 0 10px;
+  font-weight: bold;
+}
+
+.warning-recent {
+  color: #ff4d4f;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+
+</style>

src/bigscreen2/components/riskIndexComponent.vue

@@ -0,0 +1,156 @@
+<template>
+  <div style="height: 95%;">
+    <div ref="index"  style="width: 100%; height: 100%;margin-left: 0px;margin-top: 0px;"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import http from "@/utils/request";
+
+export default {
+  props: {
+    date:[],
+    result:[],
+    title:String,
+    zoom:{
+      type:Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data(){
+    return {
+      //数据库结构映射
+    mapTable:{'个体风险状态':["经营风险","信用风险","流动性风险","市场风险","非流动性"],'风险关联与溢出':["条件在险价值差额","Coplua","协整关系","吸收率"],'市场系统结构':['聚类系数','密度变化','同配性'],
+      '市场波动和趋势':['vixPlus指数','市场受损性']},
+      datazoom:[],
+    state:'个体风险状态'
+    }
+  },
+watch:{
+    title(newValue){
+    this.state=newValue
+    },
+  zoom(newVal){
+    this.datazoom=newVal
+  }
+},
+  mounted() {
+    
+  },
+
+  methods:{
+    getData(){
+      var that=this
+    http.get('/risk/index/?table='+this.title).then((res)=>{
+      that.date=res.data.date
+      that.result=res.data.result
+      var series=[]
+      let nameLis=[]
+      for (let yaxis in this.result){
+        nameLis.push(this.result[yaxis].name)
+        series.push({
+          data:this.result[yaxis].data,
+          type:'line',
+          name:this.result[yaxis].name
+        })
+      }
+      this.initChart(nameLis,series)
+    })
+    },
+    initChart(nameLis,series){
+      /*
+      示例参考如下
+      * https://echarts.apache.org/v4/examples/zh/editor.html?c=line-aqi
+      *
+      * https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json
+      *
+      * */
+      var myChart = echarts.init(this.$refs["index"])
+      let option = {
+        title: {
+          text: this.title,
+          left:'center',
+          textStyle:{
+            color: '#fff'
+          },
+        },
+        
+        legend: {
+          top:30,
+          data: nameLis,
+          textStyle: {
+            color: '#fff'
+          }
+        }
+        ,
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          data: this.date,
+          axisLabel:{
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+        },
+        yAxis: {
+          scale:true,
+          splitLine: {
+            show: false
+          },
+          axisLabel:{
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+        },
+        //以下是时间轴
+        dataZoom: [{
+          //也应该是动态的
+          startValue: '2022-07-01',
+          type: 'slider',
+          dataBackground:{
+            lineStyle:{
+              color: '#fff'
+            },
+            areaStyle:{
+              color: '#fff'
+            }
+          },
+          textStyle:{
+            color: '#fff'
+          },
+          maxSpan:30,
+          bottom:10
+        }],
+        //以上是时间轴
+        series: series,
+      }
+      myChart.setOption(option);
+      myChart.dispatchAction({
+        type: 'dataZoom',
+        batch: [{
+          // 第一个 dataZoom 组件
+          start: this.datazoom[0],
+          end: this.datazoom[1]
+        }]
+      })
+    }
+  },
+
+}
+</script>
+
+<style scoped>
+
+</style>

src/bigscreen2/components/riskIndexComponent1.vue

@@ -0,0 +1,156 @@
+<template>
+  <div style="height: 95%;">
+    <div ref="index"  style="width: 100%; height: 100%;margin-left: 0px;margin-top: 0px;"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import http from "@/utils/request";
+
+export default {
+  props: {
+    date:[],
+    result:[],
+    title:String,
+    zoom:{
+      type:Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data(){
+    return {
+      //数据库结构映射
+    mapTable:{'个体风险状态':["经营风险","信用风险","流动性风险","市场风险","非流动性"],'风险关联与溢出':["条件在险价值差额","Coplua","协整关系","吸收率"],'市场系统结构':['聚类系数','密度变化','同配性'],
+      '市场波动和趋势':['vixPlus指数','市场受损性']},
+      datazoom:[],
+    state:'个体风险状态'
+    }
+  },
+watch:{
+    title(newValue){
+    this.state=newValue
+    },
+  zoom(newVal){
+    this.datazoom=newVal
+  }
+},
+  mounted() {
+    this.getData()
+  },
+
+  methods:{
+    getData(){
+      var that=this
+    http.get('/risk/index/?table='+this.title).then((res)=>{
+      that.date=res.data.date
+      that.result=res.data.result
+      var series=[]
+      let nameLis=[]
+      for (let yaxis in this.result){
+        nameLis.push(this.result[yaxis].name)
+        series.push({
+          data:this.result[yaxis].data,
+          type:'line',
+          name:this.result[yaxis].name
+        })
+      }
+      this.initChart(nameLis,series)
+    })
+    },
+    initChart(nameLis,series){
+      /*
+      示例参考如下
+      * https://echarts.apache.org/v4/examples/zh/editor.html?c=line-aqi
+      *
+      * https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json
+      *
+      * */
+      var myChart = echarts.init(this.$refs["index"])
+      let option = {
+        title: {
+          text: this.title,
+          left:'center',
+          textStyle:{
+            color: '#fff'
+          },
+        },
+        
+        legend: {
+          top:30,
+          data: nameLis,
+          textStyle: {
+            color: '#fff'
+          }
+        }
+        ,
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          data: this.date,
+          axisLabel:{
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+        },
+        yAxis: {
+          scale:true,
+          splitLine: {
+            show: false
+          },
+          axisLabel:{
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+        },
+        //以下是时间轴
+        dataZoom: [{
+          //也应该是动态的
+          startValue: '2022-07-01',
+          type: 'slider',
+          dataBackground:{
+            lineStyle:{
+              color: '#fff'
+            },
+            areaStyle:{
+              color: '#fff'
+            }
+          },
+          textStyle:{
+            color: '#fff'
+          },
+          maxSpan:30,
+          bottom:10
+        }],
+        //以上是时间轴
+        series: series,
+      }
+      myChart.setOption(option);
+      myChart.dispatchAction({
+        type: 'dataZoom',
+        batch: [{
+          // 第一个 dataZoom 组件
+          start: this.datazoom[0],
+          end: this.datazoom[1]
+        }]
+      })
+    }
+  },
+
+}
+</script>
+
+<style scoped>
+
+</style>

src/bigscreen2/components/systemRiskComponent.vue

@@ -0,0 +1,368 @@
+<template>
+<div style="height: 85%;">
+  <div style="display: flex;height: 100%;">
+    <div  ref="whole risk"  style=" float: left;width: 98%; height: 100%;margin-left: 15px;margin-top: 0px;margin-right: 0px"></div>
+    <div  ref="future"  style=" float: left; width: 2%; height: 100%;margin-left: -168px;margin-top: 0px;"></div>
+  </div>
+  <!-- <div class="warning-component">
+    <div class="warning-dates">
+      <div class="date-item">前日：<span>{{ prevDayRisk }}</span></div>
+      <div class="date-item">昨日：<span>{{ yesterdayRisk }}</span></div>
+      <div class="date-item">今日：<span>{{ todayRisk }}</span></div>
+      <div class="date-item">明日：<span>{{ tomorrowRisk }}</span></div>
+      <div class="warning-recent">
+        最近预警：<span>{{ warningRisk }}</span>
+      </div>
+    </div>
+  </div> -->
+</div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import http from "@/utils/request";
+import { color } from "d3";
+
+export default {
+
+  data(){
+    return {
+      yMax:2,
+      yMin:0,
+      prevDayRisk:'',
+      yesterdayRisk:'',
+      todayRisk:'',
+      tomorrowRisk:'',
+      warningRisk:'',
+      riskData:[],
+      markLine: [],
+      markPoint: [],
+      markArea:[],
+      future:[],
+      datazoom:[]
+    }
+  },
+props:{
+    zoom:{
+      type:Array,
+      default: function () {
+        return []
+      }
+    }
+},
+  watch:{
+    zoom(newVal){
+      this.datazoom=newVal
+    },
+    yMax(newVal){
+      console.log(newVal)
+    }
+
+  },
+  mounted() {
+    
+
+  },
+
+  methods:{
+    getData(){
+      http.get('/risk/whole/').then((res)=>{
+      this.riskData=res.data.wholerisk
+      this.markPoint=res.data.markpoint
+      this.markLine=res.data.markline
+      this.markArea=res.data.markarea
+      this.prevDayRisk=res.data.detail[0]
+      this.yesterdayRisk=res.data.detail[1]
+      this.todayRisk=res.data.detail[2]
+      this.tomorrowRisk=res.data.detail[3]
+      this.warningRisk=res.data.detail[4]
+      this.future=res.data.future
+      // console.log(this.riskData,this.markLine,this.markPoint[0])
+      this.initChart()
+    })
+
+    // this.initChart(this.dat)
+    },
+    initChart(){
+      /*
+      示例参考如下
+      * https://echarts.apache.org/v4/examples/zh/editor.html?c=line-aqi
+      *
+      * https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json
+      *
+      * */
+      let data=this.riskData
+      const future=this.future
+      var myChart = echarts.init(this.$refs["whole risk"])
+      var myChartFuture= echarts.init(this.$refs["future"])
+      let option = {
+        title: {
+          text: '系统性风险指数',
+          left: 'center',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          axisLabel:{
+            fontSize:5,
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+          data: data.map(function (item) {
+            return item[0];
+          })
+        },
+        yAxis: {
+          axisLabel:{
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+          scale:true,
+          splitLine: {
+            show: false
+          }
+        },
+        //以下是时间轴
+        dataZoom: [{
+          //也应该是动态的
+          startValue: '2022-07-01',
+          type: 'slider',
+          dataBackground:{
+            lineStyle:{
+              color: '#fff'
+            },
+            areaStyle:{
+              color: '#fff'
+            }
+          },
+          textStyle:{
+            color: '#fff'
+          },
+          maxSpan:30
+        }],
+        // 根据阈值映射不同颜色
+        visualMap: {
+          top: 10,
+          right: 0,
+          precision:2,
+          pieces: [
+            {
+              gt: 0,
+              lte: parseFloat(this.markLine[0]),
+              color: '#096'
+            },
+            {
+              gt: parseFloat(this.markLine[0]),
+              lte: parseFloat(this.markLine[1]),
+              color: '#ffde33'
+            },
+          ],
+          outOfRange: {
+            color: '#fa0744'
+          },
+          textStyle:{
+            color:'#fff'
+          }
+        },
+        series: {
+          name: '系统性风险指数',
+          type: 'line',
+          data: data.map(function (item) {
+            return item[1];
+          }),
+          //标记极端值
+          markPoint:{
+            symbol:'circle',
+            symbolSize:10,
+            data: [{
+              itemStyle:{
+                //标注的颜色
+                color: {
+                  type: 'radial',
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.5,
+                  colorStops: [{
+                    offset: 0, color: 'purple' // 0% 处的颜色
+                  }, {
+                    offset: 1, color: '#258ddc' // 100% 处的颜色
+                  }],
+                  global: false // 缺省为 false
+                }
+              },
+              //x轴的index和y值
+              coord: this.markPoint[0] // 其中 5 表示 xAxis.data[5]，即 '33' 这个元素。
+              // coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
+              // 注意，使用这种方式时，xAxis.data 不能写成 [number, number, ...]
+              // 而只能写成 [string, string, ...]
+            }]
+
+          },
+          markLine: {
+            //阈值标记线  这里应该是动态的
+            silent: true,
+            symbol:'none',
+            label:{ position:'middle',},
+            lineStyle:{
+              color:'#fff'
+            },
+            data: [{
+              yAxis: this.markLine[0]
+            }, {
+              yAxis:this.markLine[1]
+            },
+            ]
+          },
+          markArea:{
+            label: { // 分界线上的文字标签
+              // position: 'end',
+              formatter: '预测值'
+            },
+            data:[[{
+              xAxis:this.markArea[0]},
+              {
+                xAxis:this.markArea[1]
+                // x:'100%'
+              },
+            ]]
+
+          }
+        }
+      }
+      let opt2={
+        tooltip: {
+          trigger: 'item',
+        },
+        grid:
+
+          {backgroundColor: '#eeb0ae',
+            left:'0%',
+            show:true,
+            zlevel:0,
+          }
+        ,
+        xAxis:
+          {
+            data:[{value:'未来一个月'}],
+            axisLabel:{
+              fontSize:5
+            }
+            // gridIndex: 0,
+          },
+        yAxis: {
+          min:0.8,
+          max:2,
+          type: 'value',
+          show:false,
+          // boundaryGap: false,
+          // gridIndex: 1
+        },
+        series: {
+          type: 'boxplot',
+          boxWidth : [2, 10],
+          itemStyle: {
+            clip: true
+          },
+          data:[{value: this.future,} ],
+          // 确保箱型图显示在折线图之后
+          // zlevel: 3,
+          // 箱型图的x轴数据应对应未来一个月的日期，由于这些日期没有具体值，我们使用null，ECharts会自动处
+          // ... 箱型图其他配置，如颜色、样式等
+          markArea:{
+            label: { // 分界线上的文字标签
+              // position: 'end',
+              formatter: '预测值'
+            },
+            itemStyle:{
+              color:'yellow'
+            }
+            // data: [[  {
+            //   name: '平均值到最大值',
+            //   type: 'average'
+            // },
+            //   {
+            //     type: 'max'
+            //   }]]
+          },
+          tooltip: {
+            formatter: function (param) {
+              return [
+                // 'Experiment ' + param.name + ': ',
+                '最大值: ' + future[4],
+                '均值+标准差: ' + future[3],
+                '中位数: ' +future[2],
+                '均值-标准差: ' + future[1],
+                '最小值: ' + future[0]
+              ].join('<br/>');
+            }
+          }
+        }
+      }
+      myChart.setOption(option);
+      myChartFuture.setOption(opt2)
+      const that=this
+      myChart.on('datazoom', function (params) {
+        // Y轴最大值
+        this.yMax = myChart.getModel().getComponent('yAxis').axis.scale._extent[1];
+        // Y轴最小值
+        this.yMin = myChart.getModel().getComponent('yAxis').axis.scale._extent[0];
+
+        that.$nextTick(() => {
+          // 设置 myChartFuture 的 y 轴值
+          myChartFuture.setOption({
+            yAxis: {
+              min: this.yMin,
+              max: this.yMax
+            }
+          });
+        });
+      });
+    }
+
+  },
+
+}
+</script>
+
+<style scoped>
+.warning-component {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  max-width: 100%;
+  text-align: center;
+
+  margin: auto;
+}
+
+.warning-dates {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.date-item {
+  margin: 0 10px;
+  font-weight: bold;
+}
+
+.warning-recent {
+  color: #ff4d4f;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+</style>

src/bigscreen2/data/naershiye.json

@@ -0,0 +1,13 @@
+{
+  "data": {
+      "投资关系": 82.44588614888224,
+      "操盘模式": 25,
+      "财务状态": 54.00000000000001,
+      "健康指数": 48,
+      "运行状态": 58.56999999999999,
+      "规模扩张": 20,
+      "声誉风险": 65,
+      "外部环境": 5,
+      "等级": 5
+  }
+}

src/bigscreen2/大屏.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="content bg">
+    
+      <!-- <dv-full-screen-container> -->
+        <scale-box>
+         <ModuleTitle />
+         <ModuleHeader />
+
+           </scale-box>
+      <!-- </dv-full-screen-container> -->
+
+    </div>
+  </template>
+  
+  <script>
+  import ModuleTitle from './ModuleTitle.vue'
+  import ModuleHeader from './ModuleHeader.vue'
+  import ScaleBox from './ScaleBox.vue'
+
+  
+  
+  export default {
+    name: 'HomeView',
+    components:{
+      ModuleTitle,
+      ModuleHeader,
+      ScaleBox,//   大屏根据显示器尺寸大小自适应
+    }
+  
+  }
+  </script>
+  
+  <style scoped>
+  @import '../assets/css/index.css';
+  </style>

src/components/Children.vue

@@ -0,0 +1,19 @@
+<template>
+    <section>
+        父组件传过来的消息是：{{myMsg}}
+    </section>
+</template>
+
+<script>
+    export default {
+        name: "Children",
+        components: {},
+        props:['msg'],
+        data() {
+            return {
+                myMsg:this.msg
+            }
+        },
+        methods: {}
+    }
+</script>

src/components/CommonAside.vue

@@ -0,0 +1,269 @@
+<!-- 侧导航栏 -->
+<template>
+  <div style="display=flex;">
+    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
+      <el-radio-button :label="false">展开</el-radio-button>
+      <el-radio-button :label="true">收起</el-radio-button>
+    </el-radio-group> -->
+
+      <el-menu
+        :default-active="$route.path"
+        class="el-menu-vertical-demo"
+        :router="true"
+        :collapse="isCollapse"
+        background-color="#000000"
+        text-color="#fff"
+        active-text-color="#ffd04b"
+        style="height:1200px">
+        <!-- style="height:auto" -->
+        <!-- :default-active="$route.path"使得在没有点击左侧导航栏时，也能根据路由转变转化颜色 -->
+        <div style="display=flex;">
+          <!-- <img src_old="../assets/Logo.png" width="12%" style="display:inline-block;padding-right: 3px;" align="absmiddle"> -->
+          <img src="../assets/数据显示.png" width="20px" style="display:inline-block;padding-left: 1px;padding-right: 5px;" align="absmiddle">
+          <!-- align="absmiddle"让图像和文字一样高 -->
+          <h3 style="display:inline-block;" @click = "bigscreen">{{ isCollapse ? '' :  '资本市场系统性风险平台'}}</h3>
+          <!--  -->
+        </div>
+
+      <!-- <el-button @click="handleMenu" icon="el-icon-menu" size="mini">bibibi</el-button> -->
+
+
+
+        <!-- 循环遍历所有的单导航栏 -->
+        <!-- 没有子菜单 -->                                               <!-- index都是为了确保唯一性,但最好设置为path，有利于根据路由跳转页面 -->
+        <el-menu-item @click='clickMenu(item)' v-for="item in nochildren" :key='item.path' :index='item.path'>
+        <!-- : 是v-bind: -->
+          <i :class="`el-icon-${item.icon}`"></i> <!-- 图标，官网可选 -->
+          <span slot="title">{{ item.label }}</span>
+        </el-menu-item>
+
+        <!-- 有子菜单 -->
+        <el-submenu  v-for="item in hasChildren" :key='item.path' :index='item.path'><!-- index都是为了确保唯一性 -->
+            <template slot="title">
+              <i :class="`el-icon-${item.icon}`"></i>
+              <span slot="title">{{ item.label }}</span>
+            </template>
+            <el-menu-item-group v-for='subItem in item.children' :key='subItem.path'>
+              <el-menu-item @click='clickMenu(subItem)' :index="subItem.path" style="padding-left: 70px;">{{subItem.label}}</el-menu-item>
+            </el-menu-item-group>
+          </el-submenu>
+
+
+      </el-menu>
+
+
+
+
+
+
+</div>
+</template>
+
+
+
+<script>
+export default {
+  
+  data() {
+    return {
+      // isCollapse:false,
+      menuData: [
+        // {
+        //   path: "/",
+        //   name: "home",
+        //   label: "首页",
+        //   icon: "s-home",
+        // },
+        {
+          path: "/systematic_risk",//2-1
+          name: "systematic_risk",
+          label: "系统性风险分析",
+          icon: 's-marketing'
+        },
+        {
+          path: "/market_entities",//1
+          name: "market_entities",
+          label: "市场主体分析",
+          icon: "s-flag",
+        },
+
+          //2
+        {
+          path: "/influential_entities",//3
+          name: "influential_entities",
+          label: "高影响主体分析",
+          icon: "star-off",
+        },
+
+            {
+            path: "/individual_risk",//2-2
+            name: "individual_risk",
+            label: "个体风险分析",
+              icon: 'lightning'
+            },
+
+        {
+          path: "/diffus",//5
+          name: "diffus",
+          label: "风险传导",
+          icon: "aim",
+        },
+
+        {
+          // path: "/warning",//4
+          label: "预警服务",
+          icon: "bell",
+          children:[
+            {
+            path: "/warning",//4-1
+            name: "warning",
+            label: "预警服务",
+            },
+            {
+            path: "/risk_warning",//4-1
+            name: "risk_warning",
+            label: "风险预警",
+            },
+            {
+            path: "/abnormal_detection",//4-2
+            name: "abnormal_detection",
+            label: "异常检测",
+            },
+
+
+        ],
+          
+        },
+        {
+          // path: "/event",//8
+          label: "事件分析",
+          icon: "document",
+          children:[
+            {
+              path: "/event_analysis",//2
+              name: "event_analysis",
+              label: "事件分析",
+            },
+            {
+              path: "/event_graph",//2
+              name: "event_graph",
+              label: "事件图谱",
+            },]
+        },
+        {
+          path: "/health",//5
+          name: "health",
+          label: "健康指数",
+          icon: "umbrella",
+        },
+
+        {
+          path: "/quotation",//7
+          name: "quotation",
+          label: "行情分析",
+          icon: "s-data",
+        },
+
+        {
+          path: "/pressure",//6
+          name: "pressure",
+          label: "压力测试",
+          icon: "s-help",
+        },
+
+
+  
+      ],
+    };
+  },
+ 
+
+ 
+
+  methods: {
+    
+
+    bigscreen(){//点击标题跳转大屏
+      this.$router.push('/bigscreen');
+    },
+
+    //点击菜单
+    clickMenu(item){
+     // 当页面的路由this.$route.path 与 跳转的路由item.path 不一致才允许跳转
+     if (this.$route.path !== item.path && !(this.$route.path === '/market_entities' && (item.path === '/'))) {//$route是当前路径的路由
+        this.$router.push(item.path)//$router是整个的router实例
+      }
+      this.$store.commit('selectMenu', item)//点击获取新路由对象,store在这里不用import  
+    },
+
+  },
+  computed: {
+
+    hasChildren() {//有子菜单才需要用
+      return this.menuData.filter((item) => item.children);
+    },
+    nochildren() {
+      return this.menuData.filter((item) => !item.children);
+    },
+    isCollapse(){
+      return this.$store.state.tab.isCollapse
+
+    },
+  },
+};
+</script>
+
+
+<style lang="less" scoped>
+.el-menu-vertical-demo:not(.el-menu--collapse) {//背景？？
+  width: 220px;
+  min-height: 300px;
+  
+
+}
+.el-menu-item, .el-submenu__title {//导航选项间隔
+    height: 40px;//导航选项之间
+    line-height: 45px;//导航上边距
+
+}
+.el-dropdown-menu__item, .el-menu-item  {//导航字体大小
+  font-size: 13px;
+}
+
+.el-menu{
+  height:100vh;//背景布满
+  h3{
+    // color: #fff;
+    // text-align: center;
+    // line-height: normal;
+    // font-size: 13px;
+    font-family: 'Arial Normal', 'Arial', sans-serif;
+    font-weight: bold;//字体加粗
+    font-size: 16px;
+    color: #fff;
+    text-align: center;
+    line-height: 4;
+    
+  }
+}
+/deep/ .el-menu-item-group__title { // 有孩子的标题
+    padding: 0px 0 0px 0px;//去掉距离
+    line-height: normal;
+    font-size: 12px;
+    color: #909399;
+}
+
+/deep/ .el-submenu__title {
+    font-size: 13px;
+    height: 40px!important;
+    line-height: 50px!important;
+
+}
+/deep/ .el-submenu__icon-arrow {
+    position: absolute;
+    top: 70%;//和文字调整一致
+    color:#fff;
+
+}
+
+</style>

src/components/CommonHeader.vue

@@ -0,0 +1,210 @@
+<!-- 上导航栏 -->
+<template>
+    <div class="header-container">
+        
+        <div class="l-content">
+            <!-- tag -->
+            <div class="tags" >
+
+                <el-tag v-for="(item,index) in tags" 
+                :key="item.path" 
+                :closable="true" 
+                :effect="$route.name === item.name ? 'dark' : 'plain'"
+                @click="changeMenu(item)"
+                @close="handledClose(item,index)"
+                style="margin-left: 5px"><!-- 只有非首页才显示closable，点击该页颜色加深effect-->
+                {{ item.label }}
+                </el-tag>
+
+            </div>
+<!-- 
+            <el-breadcrumb separator="">
+                <el-breadcrumb-item :to="{ path: '/' }">
+                    <el-button size="small" >首页</el-button>
+                </el-breadcrumb-item>
+                <el-breadcrumb-item><a href="/">
+                    <el-button size="small" >风险主体总量<i class="el-icon-close" size="mini " ></i>
+
+                            </el-button>
+                    </a></el-breadcrumb-item>
+                </el-breadcrumb> -->
+
+           
+            <!-- <span class="text">首页</span> -->
+            
+        </div>
+        <!-- 用户信息 登录注册 -->
+        <div class="r-content">
+            <!--练习的弹出框 -->
+            <el-dialog
+                title="修改个人信息"
+                :visible.sync="dialogVisible"
+                width="30%">
+                <span></span>
+                <span slot="footer" class="dialog-footer">
+                    <el-button @click="dialogVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+                </span>
+            </el-dialog>
+
+            <!-- 右侧登录页面设计 -->
+            <el-dropdown>
+                <span class="el-dropdown-link">
+                <el-button icon=el-icon-s-custom circle> </el-button>  <!--登录图表按钮-->
+                    <span class="text">请登录</span>
+                    <i class="el-icon-arrow-down el-icon--right"></i> <!--下拉-->
+                    </span>
+
+                <el-dropdown-menu slot="dropdown">
+<!--                    <el-dropdown-item>-->
+<!--                        &lt;!&ndash; 点击后改变弹出框生效情况 &ndash;&gt;-->
+<!--                        <el-button  style='width: 150px;' @click="dialogVisible = true">修改个人信息</el-button>-->
+<!--                    </el-dropdown-item>-->
+
+<!--                    <el-dropdown-item>-->
+<!--                        <el-button style='width: 150px;' @click = "logout">登出</el-button>-->
+<!--                   </el-dropdown-item>-->
+
+                   <el-dropdown-item>
+                        <el-button style='width: 150px;' @click="login">登录</el-button>
+                   </el-dropdown-item>
+                
+                </el-dropdown-menu>
+                </el-dropdown>
+            
+        </div>
+    </div>
+    
+</template>
+
+<script>
+import {mapState,mapMutations} from 'vuex'
+import http from "@/utils/request";
+  export default {
+    name: "CommonTag",
+    data(){
+        return{
+            dialogVisible:false,//用户登录页面
+
+        };
+    },
+    computed: {
+        ...mapState({//mapState返回一个对象，表示扩展运算符，起到解构的作用...
+            tags: state => state.tab.tabsList
+        })
+        
+    },
+    methods:{
+      login(){
+        this.$router.push('/login')
+      },
+      logout(){
+        this.$store.commit('logout')
+      },
+
+        //调用Mutations,获取closeTag，并添加到当前页面中（讲解34）
+        ...mapMutations(['closeTag']),
+        //点击tag跳转的功能
+        changeMenu(item){
+            // console.log(item)
+            this.$router.push({name: item.name})//点击一个，新增一个，面包屑tab增加一个
+        },
+        //点击tag x删除
+        handledClose(item,index){  //index是获取的索引
+            //点击tag删除 tabsList里面的数据
+            // 方法1
+            // this.$store.commit('closeTag')
+            // 方法2,调用store中的Mutations
+            this.closeTag(item)
+            const length=this.tags.length
+            // console.log("tags长度：",this.tags.length)
+            // console.log( this.$router)
+            
+            //删除之后的跳转逻辑
+            //一）当前页与删除页不同（item.name和当前展示路由不一致），直接删除路由列表里面的对于name，就不能再打开，没有人性化调整的必要
+            if(item.name!== this.$route.name){
+                return
+            }
+            //二）当前页=删除页——删除的是最后一页(页面转到路由列表中的前一个)
+            if(index===length){
+                if(length===0){
+                    item={
+                        path: "/market_entities",
+                        name: "market_entities",
+                        label: "市场主体分析",
+                    }
+                    this.$router.push(item)
+                    this.$store.commit('selectMenu', item)//点击获取新路由对象,store在这里不用import  
+                }
+                else{ 
+                    this.$router.push({
+                        name:this.tags[index-1].name
+                    })
+                }
+            }
+
+            //三）当前页=删除页——删除的是中间一页(跳转后一个，因为已经删除了，跳转的还是后面那个)
+            else{
+                this.$router.push({
+                    name:this.tags[index].name
+                })
+            }
+            
+
+        },
+
+        // 跳转用户管理
+        UserManagement(){//点击标题跳转大屏
+            this.$router.push('/UserManagement');
+        },
+
+    
+
+
+        
+
+
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+
+.header-container{
+    padding: 0 30px;
+    background-color: #33333325;
+    height: 60px;
+    display: flex;//相邻的两个内容一行显示
+    justify-content: space-between;
+   
+   .text{
+    color:rgba(0, 0, 0, 0.719);
+    font-size: 13px;
+    margin-left: 5px;//左间距
+    margin-bottom: 10px;//下间距
+
+   }
+   .l-content{
+    display: flex;
+    justify-content: space-between;
+    align-items: end; // 中间
+   }
+   .r-content{
+    margin-top: 5px;//下间距
+    align-items: top; // 中间
+    .el-button.is-circle {
+        border-radius: 100%;
+        padding: 3px;//边框和内部距离
+    }
+
+    .el-button {//按钮边框
+        background: #ffffff00; 
+        border: 1px solid #00040e;
+        color: #000104; 
+        font-size: 16px;
+        border-radius: 20px;
+    }
+   }
+  
+}
+</style>

src/components/CommonHeaderAdmin.vue

@@ -0,0 +1,227 @@
+<!-- 上导航栏 -->
+<template>
+    <div class="header-container">
+
+
+        <div class="l-content">
+
+            <el-button  @click="handleMenu"  :icon=" icon" size="medium" style="padding: 5px;width: 30px;height: 60px;background-color:transparent;"></el-button>
+
+            <!-- tag -->
+            <div class="tags" >
+
+                <el-tag v-for="(item,index) in tags" 
+                :key="item.path" 
+                :closable="true" 
+                :effect="$route.name === item.name ? 'dark' : 'plain'"
+                @click="changeMenu(item)"
+                @close="handledClose(item,index)"
+                style="margin-left: 5px"><!-- 只有非首页才显示closable，点击该页颜色加深effect-->
+                {{ item.label }}
+                </el-tag>
+
+            </div>
+<!-- 
+            <el-breadcrumb separator="">
+                <el-breadcrumb-item :to="{ path: '/' }">
+                    <el-button size="small" >首页</el-button>
+                </el-breadcrumb-item>
+                <el-breadcrumb-item><a href="/">
+                    <el-button size="small" >风险主体总量<i class="el-icon-close" size="mini " ></i>
+
+                            </el-button>
+                    </a></el-breadcrumb-item>
+                </el-breadcrumb> -->
+
+           
+            <!-- <span class="text">首页</span> -->
+            
+        </div>
+        <!-- 用户信息 登录注册 -->
+        <div class="r-content">
+            <!--练习的弹出框 -->
+            <el-dialog
+                title="修改个人信息"
+                :visible.sync="dialogVisible"
+                width="30%">
+                <span></span>
+                <span slot="footer" class="dialog-footer">
+                    <el-button @click="dialogVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+                </span>
+            </el-dialog>
+
+            <!-- 右侧登录页面设计 -->
+            <el-dropdown>
+                <span class="el-dropdown-link">
+                <el-button icon=el-icon-s-custom circle> </el-button>  <!--登录图表按钮-->
+                    <span class="text">用户信息</span>
+                    <i class="el-icon-arrow-down el-icon--right"></i> <!--下拉-->
+                    </span>
+
+                <el-dropdown-menu slot="dropdown">
+<!--                    <el-dropdown-item>-->
+<!--                        &lt;!&ndash; 点击后改变弹出框生效情况 &ndash;&gt;-->
+<!--                        <el-button  style='width: 150px;' @click="dialogVisible = true">修改个人信息</el-button>-->
+<!--                    </el-dropdown-item>-->
+
+                    <el-dropdown-item> 
+                        <el-button style='width: 150px;' @click = "UserManagement">用户管理</el-button>
+                   </el-dropdown-item>
+
+                   <el-dropdown-item>
+                        <el-button style='width: 150px;' @click="logout">退出登录</el-button>
+                   </el-dropdown-item>
+                
+                </el-dropdown-menu>
+                </el-dropdown>
+            
+        </div>
+    </div>
+    
+</template>
+
+<script>
+import {mapState,mapMutations} from 'vuex'
+import http from "@/utils/request";
+  export default {
+    name: "CommonTag",
+    data(){
+        return{
+            dialogVisible:false,//用户登录页面
+            // 折叠按钮
+            icon:"el-icon-arrow-left",
+
+        };
+    },
+    computed: {
+        ...mapState({//mapState返回一个对象，表示扩展运算符，起到解构的作用...
+            tags: state => state.tab.tabsList
+        })
+        
+    },
+    methods:{
+
+        // 折叠方法
+        handleMenu(){
+        this.$store.commit('collapseMenu')
+        this.icon = this.icon === 'el-icon-arrow-left' ? 'el-icon-arrow-right' : 'el-icon-arrow-left';
+        },
+
+      logout(){
+        this.$store.commit('logout')
+        this.$notify.info({
+          title: '注意',
+          message: '已退出'
+        })
+          this.$router.push('/login')
+          location.reload();
+      },
+
+        //调用Mutations,获取closeTag，并添加到当前页面中（讲解34）
+        ...mapMutations(['closeTag']),
+        //点击tag跳转的功能
+        changeMenu(item){
+            // console.log(item)
+            this.$router.push({name: item.name})//点击一个，新增一个，面包屑tab增加一个
+        },
+        //点击tag x删除
+        handledClose(item,index){  //index是获取的索引
+            //点击tag删除 tabsList里面的数据
+            // 方法1
+            // this.$store.commit('closeTag')
+            // 方法2,调用store中的Mutations
+            this.closeTag(item)
+            const length=this.tags.length
+            // console.log("tags长度：",this.tags.length)
+            // console.log( this.$router)
+            
+            //删除之后的跳转逻辑
+            //一）当前页与删除页不同（item.name和当前展示路由不一致），直接删除路由列表里面的对于name，就不能再打开，没有人性化调整的必要
+            if(item.name!== this.$route.name){
+                return
+            }
+            //二）当前页=删除页——删除的是最后一页(页面转到路由列表中的前一个)
+            if(index===length){
+                if(length===0){
+                    item={
+                        path: "/market_entities",
+                        name: "market_entities",
+                        label: "市场主体分析",
+                    }
+                    this.$router.push(item)
+                    this.$store.commit('selectMenu', item)//点击获取新路由对象,store在这里不用import  
+                }
+                else{ 
+                    this.$router.push({
+                        name:this.tags[index-1].name
+                    })
+                }
+            }
+
+            //三）当前页=删除页——删除的是中间一页(跳转后一个，因为已经删除了，跳转的还是后面那个)
+            else{
+                this.$router.push({
+                    name:this.tags[index].name
+                })
+            }
+            
+
+        },
+
+        // 跳转用户管理
+        UserManagement(){//点击标题跳转大屏
+            this.$router.push('/UserManagement');
+        },
+
+    
+
+
+        
+
+
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+
+.header-container{
+    // padding: 0 30px;
+    padding: 0 0px;
+    background-color: #33333325;
+    height: 60px;
+    display: flex;//相邻的两个内容一行显示
+    justify-content: space-between;
+   
+   .text{
+    color:rgba(0, 0, 0, 0.719);
+    font-size: 13px;
+    margin-left: 5px;//左间距
+    margin-bottom: 10px;//下间距
+
+   }
+   .l-content{
+    display: flex;
+    justify-content: space-between;
+    align-items: end; // 中间
+   }
+   .r-content{
+    margin-top: 5px;//下间距
+    align-items: top; // 中间
+    .el-button.is-circle {
+        border-radius: 100%;
+        padding: 3px;//边框和内部距离
+    }
+
+    .el-button {//按钮边框
+        background: #ffffff00; 
+        border: 1px solid #00040e;
+        color: #000104; 
+        font-size: 16px;
+        border-radius: 20px;
+    }
+   }
+  
+}
+</style>

src/components/CommonHeaderUser.vue

@@ -0,0 +1,225 @@
+<!-- 上导航栏 -->
+<template>
+    <div class="header-container">
+        
+        <div class="l-content">
+
+            <el-button  @click="handleMenu"  :icon=" icon" size="medium" style="padding: 5px;width: 30px;height: 60px;background-color:transparent;"></el-button>
+
+            <!-- tag -->
+            <div class="tags" >
+
+                <el-tag v-for="(item,index) in tags" 
+                :key="item.path" 
+                :closable="true" 
+                :effect="$route.name === item.name ? 'dark' : 'plain'"
+                @click="changeMenu(item)"
+                @close="handledClose(item,index)"
+                style="margin-left: 5px"><!-- 只有非首页才显示closable，点击该页颜色加深effect-->
+                {{ item.label }}
+                </el-tag>
+
+            </div>
+<!-- 
+            <el-breadcrumb separator="">
+                <el-breadcrumb-item :to="{ path: '/' }">
+                    <el-button size="small" >首页</el-button>
+                </el-breadcrumb-item>
+                <el-breadcrumb-item><a href="/">
+                    <el-button size="small" >风险主体总量<i class="el-icon-close" size="mini " ></i>
+
+                            </el-button>
+                    </a></el-breadcrumb-item>
+                </el-breadcrumb> -->
+
+           
+            <!-- <span class="text">首页</span> -->
+            
+        </div>
+        <!-- 用户信息 登录注册 -->
+        <div class="r-content">
+            <!--练习的弹出框 -->
+            <el-dialog
+                title="修改个人信息"
+                :visible.sync="dialogVisible"
+                width="30%">
+                <span></span>
+                <span slot="footer" class="dialog-footer">
+                    <el-button @click="dialogVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+                </span>
+            </el-dialog>
+
+            <!-- 右侧登录页面设计 -->
+            <el-dropdown>
+                <span class="el-dropdown-link">
+                <el-button icon=el-icon-s-custom circle> </el-button>  <!--登录图表按钮-->
+                    <span class="text">用户信息</span>
+                    <i class="el-icon-arrow-down el-icon--right"></i> <!--下拉-->
+                    </span>
+
+                <el-dropdown-menu slot="dropdown">
+<!--                    <el-dropdown-item>-->
+<!--                        &lt;!&ndash; 点击后改变弹出框生效情况 &ndash;&gt;-->
+<!--                        <el-button  style='width: 150px;' @click="dialogVisible = true">修改个人信息</el-button>-->
+<!--                    </el-dropdown-item>-->
+
+<!--                    <el-dropdown-item> -->
+<!--                        <el-button style='width: 150px;' @click = "UserManagement">用户管理</el-button>-->
+<!--                   </el-dropdown-item>-->
+
+                   <el-dropdown-item>
+                        <el-button style='width: 150px;' @click="logout">退出登录</el-button>
+                   </el-dropdown-item>
+                
+                </el-dropdown-menu>
+                </el-dropdown>
+            
+        </div>
+    </div>
+    
+</template>
+
+<script>
+import {mapState,mapMutations} from 'vuex'
+import http from "@/utils/request";
+  export default {
+    name: "CommonTag",
+    data(){
+        return{
+            dialogVisible:false,//用户登录页面
+            // 折叠按钮
+            icon:"el-icon-arrow-left",
+
+        };
+    },
+    computed: {
+        ...mapState({//mapState返回一个对象，表示扩展运算符，起到解构的作用...
+            tags: state => state.tab.tabsList
+        })
+        
+    },
+    methods:{
+
+         // 折叠方法
+         handleMenu(){
+        this.$store.commit('collapseMenu')
+        this.icon = this.icon === 'el-icon-arrow-left' ? 'el-icon-arrow-right' : 'el-icon-arrow-left';
+        },
+
+      logout(){
+        this.$store.commit('logout')
+        this.$notify.info({
+          title: '注意',
+          message: '已退出'
+        })
+        this.$router.push('/login')
+        location.reload();
+      },
+
+        //调用Mutations,获取closeTag，并添加到当前页面中（讲解34）
+        ...mapMutations(['closeTag']),
+        //点击tag跳转的功能
+        changeMenu(item){
+            // console.log(item)
+            this.$router.push({name: item.name})//点击一个，新增一个，面包屑tab增加一个
+        },
+        //点击tag x删除
+        handledClose(item,index){  //index是获取的索引
+            //点击tag删除 tabsList里面的数据
+            // 方法1
+            // this.$store.commit('closeTag')
+            // 方法2,调用store中的Mutations
+            this.closeTag(item)
+            const length=this.tags.length
+            // console.log("tags长度：",this.tags.length)
+            // console.log( this.$router)
+            
+            //删除之后的跳转逻辑
+            //一）当前页与删除页不同（item.name和当前展示路由不一致），直接删除路由列表里面的对于name，就不能再打开，没有人性化调整的必要
+            if(item.name!== this.$route.name){
+                return
+            }
+            //二）当前页=删除页——删除的是最后一页(页面转到路由列表中的前一个)
+            if(index===length){
+                if(length===0){
+                    item={
+                        path: "/market_entities",
+                        name: "market_entities",
+                        label: "市场主体分析",
+                    }
+                    this.$router.push(item)
+                    this.$store.commit('selectMenu', item)//点击获取新路由对象,store在这里不用import  
+                }
+                else{ 
+                    this.$router.push({
+                        name:this.tags[index-1].name
+                    })
+                }
+            }
+
+            //三）当前页=删除页——删除的是中间一页(跳转后一个，因为已经删除了，跳转的还是后面那个)
+            else{
+                this.$router.push({
+                    name:this.tags[index].name
+                })
+            }
+            
+
+        },
+
+        // 跳转用户管理
+        UserManagement(){//点击标题跳转大屏
+            this.$router.push('/UserManagement');
+        },
+
+    
+
+
+        
+
+
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+
+.header-container{
+    padding: 0 30px;
+    background-color: #33333325;
+    height: 60px;
+    display: flex;//相邻的两个内容一行显示
+    justify-content: space-between;
+   
+   .text{
+    color:rgba(0, 0, 0, 0.719);
+    font-size: 13px;
+    margin-left: 5px;//左间距
+    margin-bottom: 10px;//下间距
+
+   }
+   .l-content{
+    display: flex;
+    justify-content: space-between;
+    align-items: end; // 中间
+   }
+   .r-content{
+    margin-top: 5px;//下间距
+    align-items: top; // 中间
+    .el-button.is-circle {
+        border-radius: 100%;
+        padding: 3px;//边框和内部距离
+    }
+
+    .el-button {//按钮边框
+        background: #ffffff00; 
+        border: 1px solid #00040e;
+        color: #000104; 
+        font-size: 16px;
+        border-radius: 20px;
+    }
+   }
+  
+}
+</style>

src/components/EmphasizedText.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="emphasized-text">
+    <el-tag type="success" effect="dark">{{ emphasizedText }}</el-tag>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EmphasizedText',
+  props: {
+    emphasizedText: {
+      type: String,
+      required: true
+    }
+  }
+};
+</script>
+
+<style scoped>
+.emphasized-text {
+  font-size: 1.2em;
+  margin: 10px 0;
+}
+
+.el-tag {
+  background-color: #409eff !important;
+  color: #fff !important;
+  border-radius: 5px;
+  padding: 5px 10px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>

src/components/QiPao.vue

@@ -0,0 +1,189 @@
+<template>
+  <div ref="QiPao" style="width: 1000px; height: 800px"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import * as d3 from 'd3';
+export default {
+  data() {
+    return {
+        option: {},
+        colorList: ['#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+    };
+  },
+  mounted() {
+    let that = this
+    let seriesData = [
+      {
+        depth: 0,
+        id: 'option',
+        index: 0,
+        value: 0
+      },
+      {
+        depth: 1,
+        id: 'option.大连商品交易所',
+        index: 1,
+        value: 1
+      },
+      {
+        depth: 1,
+        id: 'option.上海期货交易所',
+        index: 2,
+        value: 1
+      },
+      {
+        depth: 1,
+        id: 'option.郑州商品交易所',
+        index: 3,
+        value: 2
+      },
+      {
+        depth: 0,
+        id: 'option.广州期货交易所',
+        index: 4,
+        value: 1
+      },
+      {
+        depth: 1,
+        id: 'option.上海国际能源交易中心',
+        index: 5,
+        value: 1
+      },
+    ];
+    let displayRoot = stratify1();
+
+    function stratify1() {
+      return d3
+        .stratify()
+        .parentId(function (d) {
+
+          return d.id.substring(0, d.id.lastIndexOf('.'));
+        })(seriesData)
+        .sum(function (d) {
+
+          return d.value || 0;
+        })
+        .sort(function (a, b) {
+          return b.value - a.value;
+        });
+    }
+
+    function overallLayout(params, api) {
+      let context = params.context;
+      d3
+        .pack()
+        .size([api.getWidth() - 2, api.getHeight() - 2])
+        .padding(0)(displayRoot);
+      context.nodes = {};
+
+      displayRoot.descendants().forEach(function (node) {
+
+        context.nodes[node.id] = node;
+      });
+    }
+
+    function renderItem(params, api) {
+      let context = params.context;
+      let idx = params.dataIndex;
+      
+      // Only do that layout once in each time `setOption` called.
+      // 每次调用“setOption”时，只能进行一次布局。
+      if (!context.layout) {
+        context.layout = true;
+
+        overallLayout(params, api);
+      }
+      let nodePath = api.value('id');
+      let nodeName = nodePath
+        .slice(nodePath.lastIndexOf('.') + 1)
+        .split(/(?=[A-Z][^A-Z])/g)
+        .join('')
+      let node = context.nodes[nodePath];
+      if (node.id === 'option') {
+        node.r = 0
+      }
+      if (!node) {
+        // Reder nothing.
+        return;
+      }
+
+      let z2 = api.value('depth') * 2;
+      return {
+        type: 'circle',
+        shape: {
+          cx: node.x,
+          cy: node.y,
+          r: node.r
+        },
+        // transition: ['shape'],
+        z2: z2,
+        textContent: {
+          type: 'text',
+          style: {
+            // transition: isLeaf ? 'fontSize' : null,
+            text: nodeName,
+            fill: '#fff',
+            fontFamily: 'Arial',
+            width: node.r,
+            overflow: 'truncate',
+            fontSize: 13
+          },
+          emphasis: {
+            style: {
+              overflow: null,
+              fontSize: Math.max(node.r / 3, 12)
+            }
+          }
+        },
+        textConfig: {
+          position: 'inside'
+        },
+        style: {
+          fill: that.colorList[idx % that.colorList.length]
+        },
+        emphasis: {
+          style: {
+            fontFamily: 'Arial',
+            fontSize: 6,
+            shadowBlur: 20,
+            shadowOffsetX: 3,
+            shadowOffsetY: 5,
+            shadowColor: 'rgba(0,0,0,0.3)'
+          }
+        }
+      };
+    }
+
+    this.option = {
+      dataset: {
+        source: seriesData
+      },
+      tooltip: {},
+      hoverLayerThreshold: Infinity,
+      series: [{
+        type: 'custom',
+        colorBy: 'data',
+        renderItem: renderItem,
+        progressive: 0,
+        coordinateSystem: 'none',
+        encode: {
+          tooltip: 'value',
+          itemName: 'id'
+        },
+      }]
+    }
+    this.initEcharts()
+  },
+  methods: {
+      initEcharts() {
+        let myChart = echarts.init(this.$refs.QiPao)
+        myChart.setOption(this.option)
+      }
+  },
+};
+</script>
+
+<style>
+</style>

src/components/addline.vue

@@ -0,0 +1,154 @@
+<template>
+    <div>
+      <div class="form">
+                                                          <!-- inline="true"表单域在一行 -->
+            <el-form :inline="true"  :model="formInline" class="demo-form-inline">
+              <el-form-item label="公司名称">
+                <el-input  v-model="formInline.company_str" placeholder="公司名称：" size="mini"></el-input>
+              </el-form-item>
+  
+              <el-form-item>
+                <el-button type="primary" @click="onSubmit" icon="el-icon-search" size="mini">查询</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+      <div id='echarts' ref="echarts_1" style="height:300px;width:600px;margin-left: 200px;"></div>
+    </div>
+  </template>
+  <script>
+  
+  import * as echarts from "echarts"
+  export default {
+    data() {
+        return {
+          // 新数据
+          x:['2000/6/5','2000/6/6','2000/6/7','2000/6/8','2000/6/9','2000/6/10','2000/6/11','2000/6/12','2000/6/13','2000/6/14','2000/6/15','2000/6/16','2000/6/17','2000/6/18','2000/6/19','2000/6/20','2000/6/21','2000/6/22','2000/6/23','2000/6/24','2000/6/25','2000/6/26','2000/6/27','2000/6/28','2000/6/29','2000/6/30','2000/7/1','2000/7/2','2000/7/3','2000/7/4','2000/7/5','2000/7/6','2000/7/7','2000/7/8','2000/7/9','2000/7/10','2000/7/11','2000/7/12','2000/7/13','2000/7/14','2000/7/15','2000/7/16','2000/7/17','2000/7/18','2000/7/19','2000/7/20','2000/7/21','2000/7/22','2000/7/23','2000/7/24'],
+          y1:[200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
+          y2:[319,162,213,69,167,337,171,283,285,203,322,81,185,259,212,305,206,236,70,224,309,254,86,107,334,153,243,141,251,306,306,317,271,290,254,220,154,156,54,70,133,223,265,51,339,270,184,332,163,197],
+          y3:[329,113,251,118,324,328,140,284,231,189,192,275,73,311,313,299,199,300,249,160,263,272,159,245,222,104,203,283,332,147,278,339,207,159,66,106,338,63,258,191,246,141,243,90,290,330,93,76,134,86],
+          y4:[284,265,335,75,234,121,66,258,104,291,197,248,56,340,120,327,328,81,179,282,211,90,147,320,150,200,236,210,205,192,318,184,98,228,55,66,231,151,63,149,329,127,111,57,64,55,119,137,247,270],
+          
+          formInline: {
+            company_str: '',
+          },
+          legend_1:['银行'],
+          series_1:[{
+                name: '银行',
+                type: 'line',
+                data: [200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
+              }],
+
+  
+          option_1 : {
+            title: [{
+              x :'center',
+              y:'bottom',
+                
+                text: '各行业风险价值（机构处于极端困难情况时）的时序变化'
+              },
+            ],
+            tooltip: {
+              trigger: 'axis'
+            },
+            legend:  {data:
+              this.series_1
+            },
+            grid: {
+              left: '3%',
+              right: '4%',
+              bottom: '3%',
+              containLabel: true
+            },
+            toolbox: {
+              feature: {
+                saveAsImage: {}
+              }
+            },
+            xAxis: {
+              type: 'category',
+              boundaryGap: false,
+              data:  this.x,//其中的一个数据
+            },
+            yAxis: {
+              type: 'value'
+            },
+            series: [{
+                name: '银行',
+                type: 'line',
+                // stack: 'Total',
+                data: [200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
+              }],
+             
+        },
+  
+        linedata_1:[
+              {
+                name: '银行',
+                type: 'line',
+                data: [200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
+              },
+              {
+                name: '北京银行',
+                type: 'line',
+                data: [319,162,213,69,167,337,171,283,285,203,322,81,185,259,212,305,206,236,70,224,309,254,86,107,334,153,243,141,251,306,306,317,271,290,254,220,154,156,54,70,133,223,265,51,339,270,184,332,163,197],
+
+              },
+              {
+                name: '中国银行',
+                type: 'line',
+                data: [329,113,251,118,324,328,140,284,231,189,192,275,73,311,313,299,199,300,249,160,263,272,159,245,222,104,203,283,332,147,278,339,207,159,66,106,338,63,258,191,246,141,243,90,290,330,93,76,134,86],
+              },
+              {
+                name: 'Direct',
+                type: 'line',
+                data: [284,265,335,75,234,121,66,258,104,291,197,248,56,340,120,327,328,81,179,282,211,90,147,320,150,200,236,210,205,192,318,184,98,228,55,66,231,151,63,149,329,127,111,57,64,55,119,137,247,270],
+              },
+              {
+                name: 'Search Engine',
+                type: 'line',
+                data: [820, 932, 901, 934, 1290, 1330, 1320]
+              }
+            ],
+        
+        }
+      },
+      mounted(){
+        //  风险价值动态变化
+        this.onSubmit()
+  
+      },
+  
+      methods: {
+        onSubmit() {
+            if (this.formInline.company_str!==''){
+              console.log(this.formInline.company_str)
+              let tmp=this.linedata_1.find(item => item.name === this.formInline.company_str)  //es6
+              this.option_1.series.push(tmp)
+              console.log(this.option_1.series)
+  
+            }
+            let echarts1 = echarts.init(this.$refs.echarts_1)
+            echarts1.setOption(this.option_1)
+  
+        },
+  
+  
+  
+      }
+  
+  
+  
+  
+  };
+  </script>
+  
+  <style lang="less" scoped>
+  
+  
+  // 第一层
+  
+  </style>
+  
+  
+  
+  

src/components/dimensionComponent.vue

@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <div ref="dimension"  style="width: 1200px; height: 450px;margin-left: 0px;margin-top: 0px;"></div>
+    <div class="warning-component">
+      <div class="warning-dates">
+        <button class="button" @click="changeState">
+          <span class="text">{{ state }}</span>
+          <svg class="arrow" viewBox="0 0 448 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg>
+        </button>
+        <div class="date-item">前日：<span>{{ prevDayDim }}</span></div>
+        <div class="date-item">昨日：<span>{{ yesterdayDim }}</span></div>
+        <div class="date-item">今日：<span>{{ todayDim }}</span></div>
+        <div class="date-item">明日：<span>{{ tomorrowDim }}</span></div>
+
+      </div>
+    </div>
+  </div>
+
+
+
+</template>
+
+<script>
+import * as echarts from "echarts";
+import http from "@/utils/request";
+
+export default {
+  props: {
+    // xData:[],
+    // yData: [],
+    // legend:String,
+    title:String,
+    zoom:{
+      type:Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data(){
+    return {
+      datazoom:[],
+      state:'个体风险状态',
+      individualRisk:[],
+      structureRisk:[],
+      spillRisk:[],
+      volatilityRisk:[],
+      markArea:[],
+      date:[],
+      detail:'',
+      prevDayDim:'',
+      yesterdayDim:'',
+      todayDim:'',
+      tomorrowDim:'',
+    }
+  },
+
+  mounted: function () {
+
+    http.get('/risk/dimension/').then((res)=>{
+      this.date=res.data.date
+      this.individualRisk=res.data.individual
+      this.structureRisk=res.data.structure
+      this.spillRisk=res.data.spill
+      this.volatilityRisk=res.data.volatility
+      this.detail=res.data.detail
+      this.markArea=res.data.markarea
+      this.prevDayDim=res.data.detail[this.state][0]
+      this.yesterdayDim=res.data.detail[this.state][1]
+      this.todayDim=res.data.detail[this.state][2]
+      this.tomorrowDim=res.data.detail[this.state][3]
+      this.initChart()
+
+        }
+    )
+
+
+  },
+  watch:{
+    // prevDayDim(){
+    //   return this.detail[this.state][0]
+    // },
+    // yesterdayDim(){
+    //   return this.detail[this.state][1]
+    // },
+    // todayDim(){
+    //   return this.detail[this.state][2]
+    // },
+    // tomorrowDim(){
+    //   return this.detail[this.state][3]
+    // },
+    zoom(newVal){
+      this.datazoom=newVal
+
+    },
+    state(){
+
+      this.prevDayDim=this.detail[this.state][0]
+      this.yesterdayDim=this.detail[this.state][1]
+      this.todayDim=this.detail[this.state][2]
+      this.tomorrowDim=this.detail[this.state][3]
+
+    }
+
+  },
+  methods:{
+    changeState(){
+      let lis=['个体风险状态','风险关联与溢出','市场系统结构','市场波动和趋势']
+      this.state=lis.indexOf(this.state)+1>3? '个体风险状态':lis[lis.indexOf(this.state)+1]
+    },
+    initChart(){
+      /*
+      示例参考如下
+      * https://echarts.apache.org/v4/examples/zh/editor.html?c=line-aqi
+      *
+      * https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json
+      *
+      * */
+      var myChart = echarts.init(this.$refs["dimension"])
+      let option = {
+        title: {
+          text: '系统性风险指数维度分析',
+          left: 'center',
+        },
+        // grid:{
+        //   show:true,
+        //   backgroundColor:'#eee'
+        // },
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.date
+        },
+        legend: {
+          top:30,
+          data: ['个体风险状态', '风险关联与溢出', '市场系统结构', '市场波动和趋势']
+        },
+        yAxis: {
+          scale: true,
+          splitLine: {
+            show: false
+          }
+        },
+
+        toolbox: {
+          right: 80,
+          feature: {
+            // dataZoom: {
+            //   yAxisIndex: 'none'
+            // },
+            dataView: {
+              show: true,
+              title: '查看数据',
+            },
+            restore: {},
+            saveAsImage: {}
+          }
+        },
+        //以下是时间轴
+        dataZoom: [{
+          //也应该是动态的
+          start:80,
+          end:100
+        }, {
+          type: 'inside'
+        }],
+        //以上是时间轴
+
+        series: [{
+          name: '个体风险状态',
+          type: 'line',
+          smooth:0.8,
+          data: this.individualRisk
+        },
+          {
+            name: '风险关联与溢出',
+            type: 'line',
+            smooth:0.8,
+            data: this.spillRisk
+          },
+          {
+            name: '市场系统结构',
+            type: 'line',
+            smooth:0.8,
+            data: this.structureRisk
+          },
+          {
+            name: '市场波动和趋势',
+            type: 'line',
+            smooth:0.8,
+            data: this.volatilityRisk,
+            markArea:{
+              label: { // 分界线上的文字标签
+                // position: 'end',
+                formatter: '预测值'
+              },
+              data:[[{
+                xAxis:this.markArea[0]},
+                {
+                  xAxis:this.markArea[1]},
+              ]]
+
+
+
+            }
+          },
+        ],
+
+
+
+
+      }
+      myChart.setOption(option);
+      // this.$nextTick(()=>{
+      //   myChart.dispatchAction({
+      //     type: 'dataZoom',
+      //     batch: [{
+      //       // 第一个 dataZoom 组件
+      //       start: this.datazoom[0],
+      //       end: this.datazoom[1]
+      //     }]
+      //   })
+      // })
+
+    }
+
+  },
+
+}
+</script>
+
+<style scoped>
+
+.button {
+  border-radius: 7px;
+  width: 160px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  cursor: pointer;
+  border: 3px solid rgb(94, 255, 209);
+  background-color: rgb(94, 255, 209);
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.137);
+}
+
+.text {
+
+  width: 70%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+//background-color: rgb(255, 255, 255);
+  color: black;
+}
+
+.arrow path {
+  fill: rgb(19, 19, 19);
+}
+
+.button:hover .arrow {
+  animation: slide-in-left 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+@keyframes slide-in-left {
+  0% {
+    transform: translateX(-8px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(0px);
+    opacity: 1;
+  }
+}
+
+.button:active {
+  transform: scale(0.97);
+}
+.warning-component {
+  background-color: #ffffff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  max-width: 100%;
+  text-align: center;
+
+  margin: auto;
+}
+
+.warning-dates {
+  display: flex;
+  justify-content: space-between;
+//margin-bottom: 10px;
+}
+
+.date-item {
+  margin: 0 10px;
+  font-weight: bold;
+}
+
+.warning-recent {
+  color: #ff4d4f;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+
+</style>

src/components/echarts/AreaChart.vue

@@ -0,0 +1,124 @@
+<!-- 直方图和折线图的结合图 -->
+<template>
+     <div ref="AreaChart" style="height:300px;width:1000px; border: 1px solid #e0e0e0;margin:20px"></div>
+
+  </template>
+  
+<script>
+import * as echarts from "echarts";
+
+  export default {
+    props:['myHalfData'],
+    data () {
+    return {
+        myData:this.myHalfData
+    }
+  },
+    mounted() {
+        const echarts2 = echarts.init(this.$refs.AreaChart)
+        const option_2={
+            // 右上角存图
+            toolbox: {
+              feature: {
+                saveAsImage: {}
+              }
+            },
+              title: {
+                text: '事件热度分析'
+              },
+              tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                  type: 'cross',
+                  label: {
+                    backgroundColor: '#6a7985'
+                  }
+                }
+              },
+              legend: {
+                data: ['渠道1', '渠道2', '渠道3']
+              },
+              grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+              },
+              xAxis: [
+                {
+                  type: 'category',
+                  boundaryGap: false,
+                  data: ['0', '1', '2', '3', '4', '5', '6'],
+                  name: '天'
+                }
+              ],
+              yAxis: [
+                {
+                  type: 'value'
+                }
+              ],
+              series: [
+                {
+                  name: '渠道1',
+                  type: 'line',
+                  stack: 'Total',
+                  areaStyle: {},
+                  emphasis: {
+                    focus: 'series'
+                  },
+                  data: [120, 132, 101, 134, 90, 230, 210]
+                },
+                {
+                  name: '渠道2',
+                  type: 'line',
+                  stack: 'Total',
+                  areaStyle: {},
+                  emphasis: {
+                    focus: 'series'
+                  },
+                  data: [220, 182, 191, 234, 290, 330, 310]
+                },
+                {
+                  name: '渠道3',
+                  type: 'line',
+                  stack: 'Total',
+                  areaStyle: {},
+                  emphasis: {
+                    focus: 'series'
+                  },
+                  data: [150, 232, 201, 154, 190, 330, 410]
+                },
+                {
+                  name: 'Direct',
+                  type: 'line',
+                  stack: 'Total',
+                  areaStyle: {},
+                  emphasis: {
+                    focus: 'series'
+                  },
+                  data: [320, 332, 301, 334, 390, 330, 320]
+                },
+                {
+                  name: 'Search Engine',
+                  type: 'line',
+                  stack: 'Total',
+                  label: {
+                    show: true,
+                    position: 'top'
+                  },
+                  areaStyle: {},
+                  emphasis: {
+                    focus: 'series'
+                  },
+                  data: [820, 932, 901, 934, 1290, 1330, 1200]
+                }
+              ]
+            }
+          echarts2.setOption(option_2)
+     
+    },
+  };
+  </script>
+  
+  <style>
+  </style>

src/components/echarts/DifferentialChart.vue

@@ -0,0 +1,104 @@
+<!-- line chart动态数据变化趋势图 -->
+<template>
+  <div>
+  <el-empty description="暂无数据" v-show="!show"></el-empty>
+  <div ref="lines" style="width: 800px; height: 300px;padding-left:250px" v-show="show"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props:{
+    datelis:[],
+    asset:[],
+    held_num:[],
+  },
+  data() {
+    return {
+      show:false
+
+    };
+  },
+  watch:{
+    datelis(){
+      //不为空字符串列表
+      console.log(this.held_num)
+      if (this.asset.findIndex((value) => value!=='' )!== -1 || this.held_num.findIndex((value) => value!=='')!== -1) {
+        console.log(1)
+        this.show = true
+        this.initChart()
+      }
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    initChart(){
+      var myChart = echarts.init(this.$refs.lines);
+      // 绘制图表
+      var option = {
+        title: {
+          text: "资产和持股规模",
+          left: "center",
+          textStyle: {
+            fontSize: 17,
+            lineHeight: 10,
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["资产","持股"],
+          padding:[25,0,0,0],
+          //orient: 'vertical',
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: this.datelis,
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            name: "资产",
+            type: "line",
+            stack: "Total",
+            data: this.asset,
+          },
+          {
+            name: "持股",
+            type: "line",
+            stack: "Total",
+            data: this.held_num,
+            // [4500, 5000, 5020, 4900, 4300, 6000, 6600,6200,7000,5500,4900,6100,
+            //     6700,7050,8000,9000,11000,12000,8600,8200,9500
+            //   ],
+          },
+        ],
+      }
+      myChart.setOption(option);
+
+    }
+
+  },
+};
+</script>
+
+<style>
+</style>

src/components/echarts/DynamicLine.vue

@@ -0,0 +1,155 @@
+<template>
+  <div ref="changetrend" style="width: 800px; height: 320px;margin-left: 100px;margin-top: 0px;"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import http from "@/utils/request";
+export default {
+  data() {
+    return {
+      time:[],
+      riskData:[],
+      len:Number,
+    };
+  },
+  mounted() {
+    http.get('/warning/get_warning_count/?need=1').then((res)=>{
+
+      for (let i in res.data) {
+        this.time.push(res.data[i]["time"].replace('_','-'))
+        this.riskData.push(res.data[i]["综合风险水平"])
+      }
+      this.len=this.time.length
+      let selectedTime=this.time.slice(0,40)
+      let selectedRisk=this.riskData.slice(0,40)
+      var myChart = echarts.init(this.$refs.changetrend);
+      // 绘制图表
+      // function randomData() {
+      //   now = new Date(+now + oneDay);
+      //   value = value + Math.random() * 21 - 10;
+      //   return {
+      //     name: now.toString(),
+      //     value: [
+      //       [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
+      //       Math.round(value),
+      //     ],
+      //   };
+      // }
+      // let data = [];
+      // let now = new Date(1997, 9, 3);
+      // let oneDay = 24 * 3600 * 1000;
+      // let value = Math.random() * 1000;
+      // for (var i = 0; i < 1000; i++) {
+      //   data.push(randomData());
+      // }
+      // console.log(data)
+      var option = {
+        title: {
+          text: "系统性风险整体变化趋势",
+          left:'center',
+          textStyle: {//主标题文本样式
+            fontSize: 15,
+            color:'#696969',
+          },
+          padding:[ 5,0,5,0],//[5,10] | [ 5,6, 7, 8] ,标题内边距[上，x，下，x]
+
+        },
+
+        grid: {
+          left: '20%',//离左边远一点
+          right: '4%',
+          // bottom: '10%',
+          top:'5%',//如果不填，会默认一个特别大的值，导致图的上面留白特别大
+          // containLabel: true
+        },
+
+        tooltip: {
+          trigger: "axis",
+          // formatter:
+          //     function (params) {
+          //   params = params[0];
+          //   var date = new Date(params.name);
+          //   return (
+          //     date.getDate() +
+          //     "/" +
+          //     (date.getMonth() + 1) +
+          //     "/" +
+          //     date.getFullYear() +
+          //     " : " +
+          //     params.value[1]
+          //   );
+          // },
+          axisPointer: {
+            animation: false,
+          },
+        },
+        xAxis: {
+          type: "category",
+          splitLine: {
+            show: false,
+          },
+          data:selectedTime
+        },
+        yAxis: {
+          type: "value",
+          boundaryGap: [0, "100%"],
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "综合风险",
+            type: "line",
+            showSymbol: true,
+            data: selectedRisk
+            // data,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      var that=this
+      let i =0
+      setInterval(function () {
+        // for (var i = 0; i < 5; i++) {
+        //   data.shift();
+        //   data.push(randomData());
+        // }
+          if (i===that.time.length-50)
+            i=0
+          selectedRisk=that.riskData.slice(i,50+i)
+          selectedTime=that.time.slice(i,50+i)
+          i++
+        myChart.setOption({
+          series: [
+            {
+              name: "综合风险",
+              type: "line",
+              showSymbol: true,
+              data: selectedRisk,
+            },
+          ],
+          xAxis: {
+
+            type: "category",
+            splitLine: {
+              show: false,
+            },
+            data:selectedTime
+          },
+        });
+      }, 1500);
+
+    })
+
+  },
+  methods: {
+
+
+  },
+};
+</script>
+
+<style>
+</style>