更新bigscreen2的数据

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.html

@@ -7,22 +7,74 @@
 
 <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;
 
-  <script>
     // Random tree
-    const N = 200;
+    // const N = 300;
-    const gData = {
+    // const gData = {
-      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+    //   nodes: [...Array(N).keys()].map(i => ({ id: i,group:Math.floor(i/7) })),
-      links: [...Array(N).keys()]
+    //   links: [...Array(N).keys()]
-        .filter(id => id)
+    //     .filter(id => id)
-        .map(id => ({
+    //     .map(id => ({
-          source: id,
+    //       source: id,
-          target: Math.round(Math.random() * (id-1))
+    //       target: Math.round(Math.random() * (id-1))
-        }))
+    //     }))
-    };
+    // };
-
     const Graph = ForceGraph3D()
       (document.getElementById('3d-graph'))
-        .graphData(gData);
+        // .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/assets/css/index.css

@@ -3,6 +3,10 @@
     margin: 0;
     padding: 0;
 }
+::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+
 html {
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
@@ -61,7 +65,7 @@ html {
 
   .module-box {
     display:flex;
-    justify-self: space-between;
+    justify-content: space-evenly;
     margin:10px;
   }
   .d-flex {

src/bigscreen/ModuleHeader.vue

@@ -26,7 +26,7 @@
     <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>
+       <iframe src="/static/3d-force-graph/index0.html" ref="iframe" width="100%" height="600px" scrolling="no"></iframe>
       </dv-border-box-1>
     </div>
 

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/router/index.js

@@ -28,6 +28,12 @@ import 	事件图谱	from       '../views/事件图谱.vue'
 import graphViewV4 from "@/views/graphViewV4";
 import 风险传导 from "@/views/风险传导"
 import 	大屏	from       '../bigscreen/大屏.vue'
+import 	大屏1	from       '../bigscreen1/大屏.vue'
+import 	大屏2	from       '../bigscreen2/大屏.vue'
+import 	widerscreen	from       '../widerscreen/index.vue'
+import 	widerscreen1	from       '../widerscreen/index1.vue'
+import 	widerscreen2	from       '../widerscreen/index2.vue'
+import 	widerscreen0	from       '../widerscreen/index0.vue'
 import 	UserManagement	from     '../views/UserManagement.vue'
 
 import SSE from "@/views/SSE";
@@ -153,6 +159,12 @@ const routes = [
 
   //大屏
   {path:'/bigscreen',name :'bigscreen',component: 大屏,},
+  {path:'/bigscreen1',name :'bigscreen1',component: 大屏1,},
+  {path:'/bigscreen2',name :'bigscreen2',component: 大屏2},
+  {path:'/widerscreen',name :'widerscreen',component: widerscreen},
+  {path:'/widerscreen1',name :'widerscreen1',component: widerscreen1},
+  {path:'/widerscreen2',name :'widerscreen1',component: widerscreen2},
+  {path:'/widerscreen0',name :'widerscreen0',component: widerscreen0},
   {path:'/test',name :'test',component: test,},
   {path:'/sse',name :'sse',component: SSE,},
   {path:'/systemrisk',name :'systemrisk',component: systemRiskV2,}
@@ -173,7 +185,7 @@ export  const isLogin=false;
 router.beforeEach(async(to,from,next) => {
   const allowedRoutes = ['/systematic_risk', '/market_entities','/individual_risk','/influential_entities'
     ,'/warning','/risk_warning','/abnormal_detection','/health','/diffus','/pressure','/quotation','/event_analysis',
-    '/event_graph','/knowladgeGraph','/UserManagement','/login','/register','/bigscreen','/test','/sse','/systemrisk'];
+    '/event_graph','/knowladgeGraph','/UserManagement','/login','/register','/bigscreen','/bigscreen1','/bigscreen2','/widerscreen',,'/widerscreen2','/widerscreen1','/widerscreen0','/test','/sse','/systemrisk'];
   const name=sessionStorage.getItem('user')
   // if (allowedRoutes.includes(to.path)) {
   //   next();

src/widerscreen/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/widerscreen/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/widerscreen/components/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/widerscreen/components/RadarChart.vue

@@ -0,0 +1,93 @@
+<template>
+    <!-- 雷达图 -->
+    <div>
+      <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>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           // 健康指数 雷达图
+            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 : [57.17727272727273,40,27.6,62.900000000000006,10,75,50],
+                            name : '郑州银行'
+                        },
+                        {
+                            value : [48.81363636363636,50,44,61.56999999999999,10,75,50],
+                            name : '宁波银行'
+                        },
+                        {
+                            value : [46.2,25,38.4,58.91,10,75,50],
+                            name : '苏州银行'
+                        }
+                    ]
+                }]
+            };
+            echarts3.setOption(option)
+       },
+       methods:{
+       }
+   }
+   </script>

src/widerscreen/components/dimensionComponent.vue

@@ -0,0 +1,322 @@
+<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";
+import dimension from "../data/dimension.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:{
+    // 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(){
+      // dimension json
+      this.date=dimension.date
+      this.individualRisk=dimension.individual
+      this.structureRisk=dimension.structure
+      this.spillRisk=dimension.spill
+      this.volatilityRisk=dimension.volatility
+      this.detail=dimension.detail
+      this.markArea=dimension.markarea
+      this.prevDayDim=dimension.detail[this.state][0]
+      this.yesterdayDim=dimension.detail[this.state][1]
+      this.todayDim=dimension.detail[this.state][2]
+      this.tomorrowDim=dimension.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/widerscreen/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";
+import geti from "../data/tabs-geti.json"
+
+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
+      // tabs geti json
+      that.date=geti.date
+      that.result=geti.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/widerscreen/components/riskIndexComponent1.vue

@@ -0,0 +1,168 @@
+<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";
+import guanlian from "../data/tabs-guanlian.json"
+import shichang from "../data/tabs-shichang.json"
+import bodong from "../data/tabs-bodong.json"
+
+export default {
+  props: {
+    date:[],
+    result:[],
+    title:String,
+    zoom:{
+      type:Array,
+      default: function () {
+        return []
+      }
+    },
+  },
+  data(){
+    return {
+    titleMap:{
+      '风险关联与溢出':guanlian,
+      '市场系统结构':shichang,
+      '市场波动和趋势':bodong,
+    },
+      //数据库结构映射
+    mapTable:{'个体风险状态':["经营风险","信用风险","流动性风险","市场风险","非流动性"],'风险关联与溢出':["条件在险价值差额","Coplua","协整关系","吸收率"],'市场系统结构':['聚类系数','密度变化','同配性'],
+      '市场波动和趋势':['vixPlus指数','市场受损性']},
+      datazoom:[],
+    state:'个体风险状态'
+    }
+  },
+watch:{
+    title(newValue){
+    this.state=newValue
+    },
+  zoom(newVal){
+    this.datazoom=newVal
+  }
+},
+  mounted() {
+    this.getData()
+  },
+
+  methods:{
+    getData(){
+      var that=this
+      let title = that.title
+      console.log('title',title);
+      console.log('titleMap',that.titleMap);
+      
+      const data = that.titleMap[title]
+      // tabs xxx  json
+      that.date=data.date
+      that.result=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/widerscreen/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/widerscreen/data/hangyeyujing.json

@@ -0,0 +1,16 @@
+{
+  "信息传输、软件和信息技术服务业-电信、广播电视和卫星传输服务": 3,
+  "制造业-农副食品加工业": 1,
+  "制造业-医药制造业": 6,
+  "制造业-汽车制造业": 2,
+  "制造业-纺织服装、服饰业": 1,
+  "制造业-计算机、通信和其他电子设备制造业": 2,
+  "制造业-酒、饮料和精制茶制造业": 1,
+  "制造业-金属制品业": 1,
+  "制造业-非金属矿物制品业": 1,
+  "房地产业-房地产业": 1,
+  "批发和零售业-批发业": 2,
+  "采矿业-有色金属矿采选业": 1,
+  "金融业-货币金融服务": 12,
+  "金融业-资本市场服务": 3
+}

src/widerscreen/data/stockRisk.json

@@ -0,0 +1,7 @@
+{
+  "低风险": 1100,
+  "中风险": 1184,
+  "高风险": 1254,
+  "综合风险水平": 396.2488397196951,
+  "time": "2023_3"
+}

src/widerscreen/data/tabs-shichang.json

@@ -0,0 +1,168 @@
+{
+  "date": [
+      "2015-04-01",
+      "2015-07-01",
+      "2015-10-01",
+      "2016-01-01",
+      "2016-04-01",
+      "2016-07-01",
+      "2016-10-01",
+      "2017-01-01",
+      "2017-04-01",
+      "2017-07-01",
+      "2017-10-01",
+      "2018-01-01",
+      "2018-04-01",
+      "2018-07-01",
+      "2018-10-01",
+      "2019-01-01",
+      "2019-04-01",
+      "2019-07-01",
+      "2019-10-01",
+      "2020-01-01",
+      "2020-04-01",
+      "2020-07-01",
+      "2020-10-01",
+      "2021-01-01",
+      "2021-04-01",
+      "2021-07-01",
+      "2021-10-01",
+      "2022-01-01",
+      "2022-04-01",
+      "2022-07-01",
+      "2022-10-01",
+      "2023-01-01",
+      "2023-04-01",
+      "2023-07-01",
+      "2023-10-01",
+      "2024-01-01"
+  ],
+  "result": [
+      {
+          "name": "同配性",
+          "type": "line",
+          "data": [
+              0.4985,
+              0.2985,
+              0.2319,
+              0.4506,
+              0.5392,
+              0.6333,
+              0.7169,
+              0.7459,
+              0.042,
+              0.9029,
+              0.3071,
+              0.8063,
+              0.2468,
+              0.949,
+              0.3416,
+              0.0806,
+              0.4001,
+              0,
+              0.2062,
+              0.1758,
+              0.4168,
+              0.5231,
+              0.4925,
+              0.6429,
+              0.2692,
+              0.6903,
+              0.2667,
+              0.4596,
+              0.1904,
+              0.322,
+              0.2009,
+              0.396,
+              0.26,
+              0.2573,
+              0.3491,
+              0.1518
+          ]
+      },
+      {
+          "name": "密度变化",
+          "type": "line",
+          "data": [
+              0.3902,
+              0.6051,
+              0.3781,
+              0.5526,
+              0.2318,
+              0.5384,
+              0.1158,
+              0,
+              0.2995,
+              0.4364,
+              0.3556,
+              0.6869,
+              0.3709,
+              0.6738,
+              0.3697,
+              0.5522,
+              0.3703,
+              0.5199,
+              0.372,
+              0.5106,
+              0.3853,
+              0.3365,
+              0.3768,
+              0.3294,
+              0.3586,
+              0.3214,
+              0.3672,
+              0.4708,
+              0.375,
+              0.593,
+              0.3759,
+              0.5206,
+              0.3823,
+              0.4553,
+              0.3963,
+              0.3862
+          ]
+      },
+      {
+          "name": "聚类系数",
+          "type": "line",
+          "data": [
+              0.372,
+              0.4272,
+              0.422,
+              0.4679,
+              0.1678,
+              0.4082,
+              0.2555,
+              0.4204,
+              0.9374,
+              1,
+              0.5736,
+              0.36,
+              0.2301,
+              0.2503,
+              0.1429,
+              0.3658,
+              0.1854,
+              0.4307,
+              0.4965,
+              0.3533,
+              0.4599,
+              0.4534,
+              0.4034,
+              0.4552,
+              0.0888,
+              0.3441,
+              0.2778,
+              0.3663,
+              0.406,
+              0.4589,
+              0.3206,
+              0.5127,
+              0.3964,
+              0.6401,
+              0.3115,
+              0.6732
+          ]
+      }
+  ]
+}

src/widerscreen/index.vue

@@ -0,0 +1,819 @@
+<template>
+  <!-- 节点是文字 -->
+  <div class="container bg ScaleBox" ref="ScaleBox" 
+    :style="{
+      width: width + 'px',
+      height: height + 'px',
+    }">
+    <div class="header" style="padding-top: 20px;">
+      <div class="header-left" style="padding-left: 180px; display: flex;">
+        <img class="logo" src="./assets/logo.png" style="width: 331px;height: 60px;padding-left: 60px;">
+      </div>
+      <div class="header-title" style="display:flex;justify-self: space-between;margin:10px;">
+        <div style="flex:0 1 25%">
+        <dv-decoration-10 style="height:5px;"/>
+        </div>
+
+        <div style="flex:0 1 50%">
+          <div class="d-flex">
+            <dv-decoration-8 style="height:50px;flex:1;" />
+            <h2 style="width: 260px;">大规模泛金融知识图谱系统</h2>
+            <!-- <div style="font-size: large;">大规模泛金融知识图谱系统</div> -->
+            <dv-decoration-8 :reverse="true" style="height:50px;flex:1;" />
+          </div>
+          
+        </div>
+
+        <div style="flex:0 1 25%">
+          <dv-decoration-10 style="height:5px;transform:rotateY(180deg)" />
+        </div>
+      </div>
+      <div class="header-right">
+
+      </div>
+    </div>
+    <div class="main">
+      <!-- 第一块 -->
+      <div class="box">
+        <div class="box-header" style="">
+          <span style=""></span>
+          板块1
+        </div>
+        <div class=" box-body">
+          <!-- 第一行 -->
+          <div class="charts-row" style="">
+            <div style="flex:0 1 33%">
+              <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-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>
+            </div>
+            <div style="flex:0 1 34%">
+              <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-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>
+            </div>
+            <div style="flex:0 1 33%">
+              <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-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>
+            </div>
+          </div>
+
+          <!-- 第二行 -->
+          <div class="charts-row" style="">
+            <div style="flex:0 1 33%">
+              <dv-border-box-13 style="width:100%;height:300px;">
+                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
+                <RadarChart/>
+              </dv-border-box-13>
+            </div>
+            <div style="flex:0 1 34%">
+              <dv-border-box-13 style="width:100%;height:300px;">
+                <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 33%">
+              <dv-border-box-13 style="width:100%;height:300px;">
+                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
+                <RadarChart/>
+              </dv-border-box-13>
+            </div>
+          </div>
+
+          <!-- 第三行 -->
+          <div class="charts-row" style="">
+            <div style="flex:0 1 33%">
+              <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 34%">
+              <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 33%">
+              <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>
+        </div>
+        <!-- <div class="box-footer">
+          <span style=""></span>
+        </div> -->
+      </div>
+      <!-- 第二块 -->
+      <div class="box">
+        <div class="box-header" style="">
+          <span style=""></span>
+          板块2
+        </div>
+        <div class="box-body">
+          <!-- 第一行 一列 课程概览 -->
+          <div class="charts-row">
+            <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-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="charts-row" style="">
+            <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="config11" 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>
+                <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="config22" style="width:95%;height:220px;" />
+                </div>
+                
+              </dv-border-box-13>
+            </div>
+          </div>
+        </div>
+        <!-- <div class="box-footer">
+          <span style=""></span>
+        </div> -->
+      </div>
+      <!-- 第三块 -->
+      <div class="box">
+        <div class="box-header" style="">
+          <span style=""></span>
+          板块1
+        </div>
+        <div class=" box-body">
+          <!-- 第一行 -->
+          <div class="charts-row" style="">
+            <div style="flex:0 1 33%">
+              <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-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>
+            </div>
+            <div style="flex:0 1 34%">
+              <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-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>
+            </div>
+            <div style="flex:0 1 33%">
+              <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-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>
+            </div>
+          </div>
+
+          <!-- 第二行 -->
+          <div class="charts-row" style="">
+            <div style="flex:0 1 33%">
+              <dv-border-box-13 style="width:100%;height:300px;">
+                <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 34%">
+              <dv-border-box-13 style="width:100%;height:300px;">
+                <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 33%">
+              <dv-border-box-13 style="width:100%;height:300px;">
+                <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>
+
+          <!-- 第三行 -->
+          <div class="charts-row" style="">
+            <div style="flex:0 1 33%">
+              <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 34%">
+              <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 33%">
+              <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>
+        </div>
+        <!-- <div class="box-footer">
+          <span style=""></span>
+        </div> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import Map from './components/Map.vue'
+import RadarChart from './components/RadarChart.vue'
+import CapsuleChart from './components/CapsuleChart.vue';
+import LineChart from './components/LineChart.vue'
+export default {
+  name: 'App',
+  components: {
+    Map,
+    RadarChart,
+    CapsuleChart,
+    LineChart
+  },
+  data() {
+    return {
+      scale: 0,
+      width: 5760,
+      height: 1080,
+      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/1st.png'),
+          require('./assets/2st.png'),
+          require('./assets/3st.png'),
+          require('./assets/4st.png'),
+          require('./assets/5st.png'),
+          require('./assets/6st.png'),
+          require('./assets/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/map.jpg'),
+        centerPointImg: {
+          url: require('./assets/mapCenterPoint.png')
+        },
+        pointsImg: {
+          url: require('./assets/mapPoint.png')
+        }
+      },
+
+      // 表格设置
+      config11 : { 
+        header: ['主体代码&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
+          },
+      ]
+    }
+  },
+  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);
+      };
+    },
+  },
+  mounted() {
+      this.setScale();
+      window.removeEventListener("resize",this.debounce(this.setScale))
+      window.addEventListener("resize", this.debounce(this.setScale));
+  }
+}
+</script>
+<style lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body,
+input,
+button,
+a,
+textarea,
+select {
+  margin: 0;
+  font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
+
+}
+
+div {
+  box-sizing: border-box;
+}
+
+ul li {
+  list-style: none;
+}
+.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);
+  }
+.bg {
+    padding:0;
+    background:url('./assets/pageBg.png') center center;
+    /* background-size:cover; */
+  }
+.container {
+  color: aliceblue;
+  // width: 5760px;
+  // height: 1080px;
+  // background-color: #18478F;
+
+  >.header {
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    height: 100px; //
+
+    
+    .header-left,
+    .header-right {
+      flex: 0 1 20%;
+
+      .el-button {
+        border: none;
+        transform: skewX(45deg);
+        width: 180px;
+        height: 50px;
+        margin-left: 30px;
+      }
+
+      .el-button--primary {
+        background-color: rgba(0, 102, 172, 0.4);
+        border-color: #0066AC;
+      }
+
+      .el-button--primary:focus {
+        background-color: #BDA158;
+      }
+    }
+
+    .header-title {
+      flex: 0 1 32%
+    }
+  }
+  .main {
+  width: 100%;
+  height: 980px; //
+  display: flex;
+  justify-content: space-evenly;
+
+  .box {
+    flex: 0 1 32%;
+    height: 940px; //
+    // background-color: #0C2B61;
+    
+    .box-header {
+      // background-color: #18478F;
+      text-align: center;
+      height: 40px; //
+      line-height: 40px;
+      border: 1px solid rgb(40, 110, 216);
+
+      span {
+        float: left;
+        width: 0;
+        height: 0;
+        // border-top: 30px solid #1596ca;
+        // border-right: 30px solid transparent;
+      }
+    }
+
+    .box-body {
+      height: 850px; //
+
+      .charts-row {
+        display: flex;
+
+        .chart-container {
+          width: 50%;
+          padding-right: 40px;
+        }
+
+        .chart-title {
+          text-align: left;
+          height: 10%; //
+          padding-top: 8px;
+
+          .icon {
+            width: 15px;
+            height: 15px;
+            padding-left: 8px;
+          }
+        }
+
+        .chart {
+          height: 90%; //
+        }
+      }
+    }
+
+    .box-footer {
+      height: 30px;
+      position: relative;
+
+      span {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 0;
+        height: 0;
+        border-bottom: 25px solid #1596ca;
+        border-left: 25px solid transparent;
+      }
+    }
+  }
+  }
+
+}
+</style>

src/widerscreen/index0.vue

@@ -0,0 +1,819 @@
+<template>
+  <!-- 原始3d -->
+  <div class="container bg ScaleBox" ref="ScaleBox" 
+    :style="{
+      width: width + 'px',
+      height: height + 'px',
+    }">
+    <div class="header" style="padding-top: 20px;">
+      <div class="header-left" style="padding-left: 180px; display: flex;">
+        <img class="logo" src="./assets/logo.png" style="width: 331px;height: 60px;padding-left: 60px;">
+      </div>
+      <div class="header-title" style="display:flex;justify-self: space-between;margin:10px;">
+        <div style="flex:0 1 25%">
+        <dv-decoration-10 style="height:5px;" />
+        </div>
+
+        <div style="flex:0 1 50%">
+          <div class="d-flex">
+            <dv-decoration-8 style="height:50px;flex:1;" />
+            <h2 style="width: 260px;">大规模泛金融知识图谱系统</h2>
+            <!-- <div style="font-size: large;">大规模泛金融知识图谱系统</div> -->
+            <dv-decoration-8 :reverse="true" style="height:50px;flex:1;" />
+          </div>
+          
+        </div>
+
+        <div style="flex:0 1 25%">
+          <dv-decoration-10 style="height:5px;transform:rotateY(180deg)" />
+        </div>
+      </div>
+      <div class="header-right">
+
+      </div>
+    </div>
+    <div class="main">
+      <!-- 第一块 -->
+      <div class="box">
+        <div class="box-header" style="">
+          <span style=""></span>
+          板块1
+        </div>
+        <div class=" box-body">
+          <!-- 第一行 -->
+          <div class="charts-row" style="">
+            <div style="flex:0 1 33%">
+              <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-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>
+            </div>
+            <div style="flex:0 1 34%">
+              <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-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>
+            </div>
+            <div style="flex:0 1 33%">
+              <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-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>
+            </div>
+          </div>
+
+          <!-- 第二行 -->
+          <div class="charts-row" style="">
+            <div style="flex:0 1 33%">
+              <dv-border-box-13 style="width:100%;height:300px;">
+                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
+                <RadarChart/>
+              </dv-border-box-13>
+            </div>
+            <div style="flex:0 1 34%">
+              <dv-border-box-13 style="width:100%;height:300px;">
+                <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 33%">
+              <dv-border-box-13 style="width:100%;height:300px;">
+                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
+                <RadarChart/>
+              </dv-border-box-13>
+            </div>
+          </div>
+
+          <!-- 第三行 -->
+          <div class="charts-row" style="">
+            <div style="flex:0 1 33%">
+              <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 34%">
+              <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 33%">
+              <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>
+        </div>
+        <!-- <div class="box-footer">
+          <span style=""></span>
+        </div> -->
+      </div>
+      <!-- 第二块 -->
+      <div class="box">
+        <div class="box-header" style="">
+          <span style=""></span>
+          板块2
+        </div>
+        <div class="box-body">
+          <!-- 第一行 一列 课程概览 -->
+          <div class="charts-row">
+            <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-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="charts-row" style="">
+            <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="config11" 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>
+                <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="config22" style="width:95%;height:220px;" />
+                </div>
+                
+              </dv-border-box-13>
+            </div>
+          </div>
+        </div>
+        <!-- <div class="box-footer">
+          <span style=""></span>
+        </div> -->
+      </div>
+      <!-- 第三块 -->
+      <div class="box">
+        <div class="box-header" style="">
+          <span style=""></span>
+          板块1
+        </div>
+        <div class=" box-body">
+          <!-- 第一行 -->
+          <div class="charts-row" style="">
+            <div style="flex:0 1 33%">
+              <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-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>
+            </div>
+            <div style="flex:0 1 34%">
+              <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-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>
+            </div>
+            <div style="flex:0 1 33%">
+              <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-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>
+            </div>
+          </div>
+
+          <!-- 第二行 -->
+          <div class="charts-row" style="">
+            <div style="flex:0 1 33%">
+              <dv-border-box-13 style="width:100%;height:300px;">
+                <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 34%">
+              <dv-border-box-13 style="width:100%;height:300px;">
+                <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 33%">
+              <dv-border-box-13 style="width:100%;height:300px;">
+                <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>
+
+          <!-- 第三行 -->
+          <div class="charts-row" style="">
+            <div style="flex:0 1 33%">
+              <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 34%">
+              <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 33%">
+              <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>
+        </div>
+        <!-- <div class="box-footer">
+          <span style=""></span>
+        </div> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import Map from './components/Map.vue'
+import RadarChart from './components/RadarChart.vue'
+import CapsuleChart from './components/CapsuleChart.vue';
+import LineChart from './components/LineChart.vue'
+export default {
+  name: 'App',
+  components: {
+    Map,
+    RadarChart,
+    CapsuleChart,
+    LineChart
+  },
+  data() {
+    return {
+      scale: 0,
+      width: 5760,
+      height: 1080,
+      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/1st.png'),
+          require('./assets/2st.png'),
+          require('./assets/3st.png'),
+          require('./assets/4st.png'),
+          require('./assets/5st.png'),
+          require('./assets/6st.png'),
+          require('./assets/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/map.jpg'),
+        centerPointImg: {
+          url: require('./assets/mapCenterPoint.png')
+        },
+        pointsImg: {
+          url: require('./assets/mapPoint.png')
+        }
+      },
+
+      // 表格设置
+      config11 : { 
+        header: ['主体代码&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
+          },
+      ]
+    }
+  },
+  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);
+      };
+    },
+  },
+  mounted() {
+      this.setScale();
+      window.removeEventListener("resize",this.debounce(this.setScale))
+      window.addEventListener("resize", this.debounce(this.setScale));
+  }
+}
+</script>
+<style lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body,
+input,
+button,
+a,
+textarea,
+select {
+  margin: 0;
+  font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
+
+}
+
+div {
+  box-sizing: border-box;
+}
+
+ul li {
+  list-style: none;
+}
+.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);
+  }
+.bg {
+    padding:0;
+    background:url('./assets/pageBg.png') center center;
+    /* background-size:cover; */
+  }
+.container {
+  color: aliceblue;
+  // width: 5760px;
+  // height: 1080px;
+  // background-color: #18478F;
+
+  >.header {
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    height: 100px; //
+
+    
+    .header-left,
+    .header-right {
+      flex: 0 1 20%;
+
+      .el-button {
+        border: none;
+        transform: skewX(45deg);
+        width: 180px;
+        height: 50px;
+        margin-left: 30px;
+      }
+
+      .el-button--primary {
+        background-color: rgba(0, 102, 172, 0.4);
+        border-color: #0066AC;
+      }
+
+      .el-button--primary:focus {
+        background-color: #BDA158;
+      }
+    }
+
+    .header-title {
+      flex: 0 1 32%
+    }
+  }
+  .main {
+  width: 100%;
+  height: 980px; //
+  display: flex;
+  justify-content: space-evenly;
+
+  .box {
+    flex: 0 1 32%;
+    height: 940px; //
+    // background-color: #0C2B61;
+    
+    .box-header {
+      // background-color: #18478F;
+      text-align: center;
+      height: 40px; //
+      line-height: 40px;
+      border: 1px solid rgb(40, 110, 216);
+
+      span {
+        float: left;
+        width: 0;
+        height: 0;
+        // border-top: 30px solid #1596ca;
+        // border-right: 30px solid transparent;
+      }
+    }
+
+    .box-body {
+      height: 850px; //
+
+      .charts-row {
+        display: flex;
+
+        .chart-container {
+          width: 50%;
+          padding-right: 40px;
+        }
+
+        .chart-title {
+          text-align: left;
+          height: 10%; //
+          padding-top: 8px;
+
+          .icon {
+            width: 15px;
+            height: 15px;
+            padding-left: 8px;
+          }
+        }
+
+        .chart {
+          height: 90%; //
+        }
+      }
+    }
+
+    .box-footer {
+      height: 30px;
+      position: relative;
+
+      span {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 0;
+        height: 0;
+        border-bottom: 25px solid #1596ca;
+        border-left: 25px solid transparent;
+      }
+    }
+  }
+  }
+
+}
+</style>

src/widerscreen/index2.vue

@@ -0,0 +1,918 @@
+<template>
+  <!-- 历史数据宽屏 未完成 -->
+  <div class="container bg ScaleBox" ref="ScaleBox" 
+    :style="{
+      width: width + 'px',
+      height: height + 'px',
+    }">
+    <div class="header" style="padding-top: 20px;">
+      <div class="header-left" style="padding-left: 180px; display: flex;">
+        <img class="logo" src="./assets/logo.png" style="width: 331px;height: 60px;padding-left: 60px;">
+      </div>
+      <div class="header-title" style="display:flex;justify-self: space-between;margin:10px;">
+        <div style="flex:0 1 25%">
+        <dv-decoration-10 style="height:5px;" />
+        </div>
+
+        <div style="flex:0 1 50%">
+          <div class="d-flex">
+            <dv-decoration-8 style="height:50px;flex:1;" />
+            <h2 style="width: 260px;font-size: 17px;" @click="$router.push('/login');">资本市场系统风险监测与预警平台</h2>
+            <!-- <div style="font-size: large;">大规模泛金融知识图谱系统</div> -->
+            <dv-decoration-8 :reverse="true" style="height:50px;flex:1;" />
+          </div>
+          
+        </div>
+
+        <div style="flex:0 1 25%">
+          <dv-decoration-10 style="height:5px;transform:rotateY(180deg)" />
+        </div>
+      </div>
+      <div class="header-right">
+
+      </div>
+    </div>
+    <div class="main">
+      <!-- 第一块 -->
+      <div class="box">
+        <div class="box-header" style="">
+          <span style=""></span>
+          预警监测
+        </div>
+        <div class=" box-body">
+          <!-- 第一行 -->
+          <div class="charts-row" style="">
+            <div style="flex:0 1 33.33%">
+              <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;margin-top: 50px;">
+                  <dv-decoration-9 style="width:120px;height:120px;margin-right:30px;" dur=5><h1 style="color: rgba(255,215,0);">1100</h1></dv-decoration-9>
+                  <dv-decoration-9 style="width:120px;height:120px;margin-right: 30px;" dur=5><h1 style="color: rgba(255,215,0);">1184</h1></dv-decoration-9>
+                  <dv-decoration-9 style="width:120px;height:120px;margin-right: 30px;" dur=5><h1 style="color: rgba(255,215,0);">1254</h1></dv-decoration-9>
+                </div> 
+                <div style="display: flex;justify-content: center;align-items: center;text-align: center;margin-top: 40px;">
+                  <span style="width:120px;height:120px;margin-right:30px;">低风险</span>
+                  <span style="width:120px;height:120px;margin-right:30px;">中风险</span>
+                  <span style="width:120px;height:120px;margin-right:30px;">高风险</span>
+                </div>  
+              </dv-border-box-13>
+            </div>
+            <div style="flex:0 1 33.33%">
+              <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;margin-top: 50px;">
+                  <dv-decoration-9 style="width:120px;height:120px;margin-right:30px;" dur=5><h1 style="color: rgba(255,215,0);">1862</h1></dv-decoration-9>
+                  <dv-decoration-9 style="width:120px;height:120px;margin-right: 30px;" dur=5><h1 style="color: rgba(255,215,0);">441</h1></dv-decoration-9>
+                  <dv-decoration-9 style="width:120px;height:120px;margin-right: 30px;" dur=5><h1 style="color: rgba(255,215,0);">87</h1></dv-decoration-9>
+                </div> 
+                <div style="display: flex;justify-content: center;align-items: center;text-align: center;margin-top: 40px;">
+                  <span style="width:120px;height:120px;margin-right:30px;">低风险</span>
+                  <span style="width:120px;height:120px;margin-right:30px;">中风险</span>
+                  <span style="width:120px;height:120px;margin-right:30px;">高风险</span>
+                </div>  
+              </dv-border-box-13>
+            </div>
+            <div style="flex:0 1 33.33%">
+              <!-- 饼图 -->
+              <!-- <dv-border-box-13 style="width:100%;height:300px;">
+                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">个体风险预警</h3>
+                <div ref="echarts_1" style="height:80%;width:100%; "></div>
+              </dv-border-box-13> -->
+              <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;margin-top: 50px;">
+                  <dv-decoration-9 style="width:120px;height:120px;margin-right:30px;" dur=5><h1 style="color: rgba(255,215,0);">2035</h1></dv-decoration-9>
+                  <dv-decoration-9 style="width:120px;height:120px;margin-right: 30px;" dur=5><h1 style="color: rgba(255,215,0);">766</h1></dv-decoration-9>
+                  <dv-decoration-9 style="width:120px;height:120px;margin-right: 30px;" dur=5><h1 style="color: rgba(255,215,0);">145</h1></dv-decoration-9>
+                </div> 
+                <div style="display: flex;justify-content: center;align-items: center;text-align: center;margin-top: 40px;">
+                  <span style="width:120px;height:120px;margin-right:30px;">低风险</span>
+                  <span style="width:120px;height:120px;margin-right:30px;">中风险</span>
+                  <span style="width:120px;height:120px;margin-right:30px;">高风险</span>
+                </div>  
+              </dv-border-box-13>
+            </div>
+          </div>
+
+          <!-- 第二行 -->
+          <div class="charts-row" style="">
+            <div style="flex:0 1 33.33%" v-for="item in 3" :key="item">
+              <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: 100%;margin: 1px"></div>
+              </dv-border-box-13>
+            </div>
+            <!-- <div style="flex:0 1 34%">
+              <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 style="flex:0 1 33%">
+              <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 class="charts-row" style="">
+            <div style="flex:0 1 33.33%">
+              <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 33.33%">
+              <dv-border-box-13 style="width:100%;height:300px;padding-top: 10px;">
+                <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>
+            <div style="flex:0 1 33.33%">
+              <dv-border-box-13 style="width:100%;height:300px;">
+                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">行业预警排行</h3>
+                <div ref="echarts_2" style="height:90%;width:100%"></div> 
+              </dv-border-box-13>
+            </div>
+          </div>
+        </div>
+        <!-- <div class="box-footer">
+          <span style=""></span>
+        </div> -->
+      </div>
+      <!-- 第二块 -->
+      <div class="box">
+        <div class="box-header" style="">
+          <span style=""></span>
+          市场主体概况
+        </div>
+        <div class="box-body">
+          <!-- 第一行 一列 课程概览 -->
+          <div class="charts-row">
+            <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>
+                <RadarChart/>
+            </div>
+
+            <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: 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-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="charts-row" style="">
+            <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="config11" 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>
+                <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="config22" style="width:95%;height:220px;" />
+                </div>
+                
+              </dv-border-box-13>
+            </div>
+          </div>
+        </div>
+        <!-- <div class="box-footer">
+          <span style=""></span>
+        </div> -->
+      </div>
+      <!-- 第三块 -->
+      <div class="box">
+        <div class="box-header" style="">
+          <span style=""></span>
+          系统性风险分析
+        </div>
+        <div class=" box-body">
+          <!-- 第一行 -->
+          <div class="charts-row" style="">
+            <div style="flex:0 1 100%">
+              <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"/>
+                <!-- 系统性风险指数 -->
+                <!-- <systemRiskComponent :zoom="datazoom" @datazoom="changeComp" ref="systemRisk"></systemRiskComponent> -->
+              </dv-border-box-13>
+            </div>
+          </div>
+
+          <!-- 第二行 -->
+          <div class="charts-row" style="">
+            <div style="flex:0 1 100%">
+              <dv-border-box-13 style="width:100%;height:300px;padding-top: 4px">
+                <!-- <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3> -->
+                <el-tabs type="border-card" style='height: 90%;' @tab-click="handleClick">
+                  <!-- 收益率传染 -->
+                  <el-tab-pane label="个体风险状态" :lazy='true' style="height: 100%;">
+                  <market-risk-component :zoom="datazoom" :title="'个体风险状态'" ref="marketRisk"/>
+                  </el-tab-pane>
+                  <!-- 波动传染 -->
+                  <el-tab-pane label="风险关联与溢出" :lazy='true' style="height: 100%;">
+                    <market-risk-component1 :zoom="datazoom" :title="'风险关联与溢出'" ref="marketRisk"/>
+                  </el-tab-pane>
+                  <el-tab-pane label="市场系统结构" :lazy='true' style="height: 100%;">
+                    <market-risk-component1 :zoom="datazoom" :title="'市场系统结构'" ref="marketRisk"/>
+                  </el-tab-pane>
+                  <el-tab-pane label="市场波动和趋势" :lazy='true' style="height: 100%;">
+                    <market-risk-component1 :zoom="datazoom" :title="'市场波动和趋势'" ref="marketRisk"/>
+                  </el-tab-pane>
+                </el-tabs>
+                <!-- <market-risk-component :zoom="datazoom" :title="'个体风险状态'"/> -->
+                <!-- <dimension-component :zoom="datazoom"/> -->
+              </dv-border-box-13>
+            </div>
+            <!-- <div style="flex:0 1 34%">
+              <dv-border-box-13 style="width:100%;height:300px;">
+                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
+                <RadarChart/>
+              </dv-border-box-13>
+            </div>
+            <div style="flex:0 1 33%">
+              <dv-border-box-13 style="width:100%;height:300px;">
+                <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
+                <RadarChart/>
+              </dv-border-box-13>
+            </div> -->
+          </div>
+
+          <!-- 第三行 -->
+          <div class="charts-row" style="">
+            <div style="flex:0 1 33.33%" v-for="item in 3" :key="item">
+              <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>
+        <!-- <div class="box-footer">
+          <span style=""></span>
+        </div> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import Map from './components/Map.vue'
+import RadarChart from './components/RadarChart.vue'
+import CapsuleChart from './components/CapsuleChart.vue';
+import LineChart from './components/LineChart.vue'
+import http from "@/utils/request";
+import * as echarts from "echarts";
+import { color } from 'd3';
+import systemRiskComponent from './components/systemRiskComponent';// 系统风险折线大图
+import dimensionComponent from "./components/dimensionComponent";
+import marketRiskComponent from "./components/riskIndexComponent";
+import marketRiskComponent1 from "./components/riskIndexComponent1";
+// data
+import hongguanfenxi from "./data/hongguanfenxi.json"
+import lunbo from "./data/lunbo.json"
+import hangyeyujing from "./data/hangyeyujing.json"
+
+export default {
+  name: 'App',
+  components: {
+    Map,
+    RadarChart,
+    CapsuleChart,
+    LineChart,
+    systemRiskComponent,
+    dimensionComponent,
+    marketRiskComponent,
+    marketRiskComponent1
+  },
+  data() {
+    return {
+      compName:'systemRiskComponent',
+      datazoom:[],
+      scale: 0,
+      width: 5760,
+      height: 1080,
+      // 表格设置
+      config11 : { 
+        header: ['主体代码&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}`;
+    },
+    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);
+      };
+    },
+    changeComp(mesg){
+        this.datazoom=mesg
+        console.log(mesg)
+    },
+    // handleClick(){
+    //   console.log('jinru');
+    //   this.$refs.marketRisk.getData()
+    // }
+  },
+  created() {
+    
+  },
+  mounted() {
+    // 大屏自适应部分
+    this.setScale();
+    window.removeEventListener("resize",this.debounce(this.setScale))
+    window.addEventListener("resize", this.debounce(this.setScale));
+
+    // 获取股票风险 圆圈类饼图部分
+    //http.get('/warning/get_warning_count/').then((res)=> {
+        // 股票风险json
+    //})
+
+    // 宏观分析 6个折线图
+        // hongguanfenxi json
+        this.date=hongguanfenxi.date
+        this.rate=hongguanfenxi.rate
+        this.macro=hongguanfenxi.macro
+        this.montary=hongguanfenxi.montary
+        this.income=hongguanfenxi.income
+        this.investment=hongguanfenxi.investment
+        this.loan=hongguanfenxi.loan
+        this.lever=hongguanfenxi.lever
+        this.other=hongguanfenxi.other
+        this.whole.push(this.rate)
+        this.whole.push(this.montary)
+        this.whole.push(this.lever)
+        // this.whole.push(this.loan)
+        this.whole.push(this.macro)
+        this.whole.push(this.income)
+        this.whole.push(this.investment)
+        this.whole.push(this.other)
+  
+        for(let i = 0; i < 6; i++) {
+        // let chartContainer = 'chartContainer' + i
+        let echart = echarts.init(this.$refs.chartContainer[i])
+
+        const option1 = {
+          title:{
+            text:this.title[i],
+            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[i]
+        };
+        echart.setOption(option1)
+      }
+
+    // 轮播图
+      // lunbo json
+      const nearestWeekday = this.getNearestWeekday()
+      // console.log('nearestWeekday',nearestWeekday);
+      
+      const formatData = lunbo.data.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
+
+
+    // 健康指数 雷达图
+    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 echarts2 = echarts.init(this.$refs.echarts_2)
+      // hangyeyujing json
+      let xData=[],yData=[]
+      let tmp=hangyeyujing
+      for(let key in tmp)
+      {
+        if(key.length < 16){
+          xData.push(tmp[key])
+          yData.push(key)
+        }
+      }
+      const option_2 = {
+        grid: {
+          left: '34%',//离左边远一点
+          right: '4%',
+          bottom: '15%',
+          top:'5%',//如果不填，会默认一个特别大的值，导致图的上面留白特别大
+        },
+        xAxis: {
+          type: 'value',
+          axisLine:{
+            lineStyle:{
+              color:'#fff'
+            }
+          },
+        },
+        yAxis: {
+          type: 'category',
+          data: yData,
+          axisLine:{
+            lineStyle:{
+              color:'#fff'
+            }
+          },
+        },
+        series: [
+          {
+            // color:'#6d7d87',
+            type: 'bar',
+            data: xData
+          },
+        ]
+      }
+      echarts2.setOption(option_2)
+
+
+  
+    this.$refs.dimension.getData()
+    // 第三屏中间
+    this.$refs.marketRisk.getData()
+    }
+}
+</script>
+<style lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body,
+input,
+button,
+a,
+textarea,
+select {
+  margin: 0;
+  font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
+
+}
+
+div {
+  box-sizing: border-box;
+}
+
+ul li {
+  list-style: none;
+}
+// 大屏自适应
+.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;
+  }
+.bg {
+    padding:0;
+    background:url('./assets/pageBg.png') center center;
+    /* background-size:cover; */
+  }
+.container {
+  color: aliceblue;
+  // width: 5760px;
+  // height: 1080px;
+  // background-color: #18478F;
+
+  >.header {
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    height: 100px; //
+
+    
+    .header-left,
+    .header-right {
+      flex: 0 1 20%;
+
+      .el-button {
+        border: none;
+        transform: skewX(45deg);
+        width: 180px;
+        height: 50px;
+        margin-left: 30px;
+      }
+
+      .el-button--primary {
+        background-color: rgba(0, 102, 172, 0.4);
+        border-color: #0066AC;
+      }
+
+      .el-button--primary:focus {
+        background-color: #BDA158;
+      }
+    }
+
+    .header-title {
+      flex: 0 1 32%
+    }
+  }
+  .main {
+  width: 100%;
+  height: 980px; //
+  display: flex;
+  justify-content: space-evenly;
+
+  .box {
+    flex: 0 1 32%;
+    height: 940px; //
+    // background-color: #0C2B61;
+    
+    .box-header {
+      // background-color: #18478F;
+      text-align: center;
+      height: 40px; //
+      line-height: 40px;
+      border: 1px solid rgb(40, 110, 216);
+
+      span {
+        float: left;
+        width: 0;
+        height: 0;
+        // border-top: 30px solid #1596ca;
+        // border-right: 30px solid transparent;
+      }
+    }
+
+    .box-body {
+      height: 850px; //
+
+      .charts-row {
+        display: flex;
+
+        .chart-container {
+          width: 50%;
+          padding-right: 40px;
+        }
+
+        .chart-title {
+          text-align: left;
+          height: 10%; //
+          padding-top: 8px;
+
+          .icon {
+            width: 15px;
+            height: 15px;
+            padding-left: 8px;
+          }
+        }
+
+        .chart {
+          height: 90%; //
+        }
+      }
+      .el-tabs__content{
+        height: 100%;
+        padding: 0;
+      }
+      .el-tabs--border-card{
+        background-color: transparent !important;
+        border: transparent !important;
+      }
+      .el-tabs__header{
+        background-color: transparent !important;
+        border-bottom: transparent !important;
+      }
+      .el-tabs__item.is-active{
+        background-color: transparent !important;
+        border-right-color: transparent !important;
+        border-left-color: transparent !important;
+      }
+    }
+
+    .box-footer {
+      height: 30px;
+      position: relative;
+
+      span {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 0;
+        height: 0;
+        border-bottom: 25px solid #1596ca;
+        border-left: 25px solid transparent;
+      }
+    }
+  }
+  }
+
+}
+</style>