From e57ac99570a599d9aa66a44764ce7bd3aea7621d Mon Sep 17 00:00:00 2001
From: ccongli <1441652193@qq.com>
Date: Fri, 1 Sep 2023 18:27:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=95=E5=85=A5datav=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E5=8F=AF=E8=A7=86=E5=8C=96=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?v1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Controllers/Data/DataCaptureController.cs | 140 +-------
 .../Controllers/Data/DataTestController.cs    | 190 ++++++++++
 .../VOL.WebApi/quartz/error/2023-08-31.txt    |   1 +
 vol-vue3/package-lock.json                    |  52 +++
 vol-vue3/package.json                         |   1 +
 vol-vue3/src/main.js                          |   4 +-
 vol-vue3/src/mixin/index.js                   |  62 ++++
 vol-vue3/src/router/index.js                  |   9 +
 vol-vue3/src/views/charts/bigdata.vue         |   2 +-
 .../src/views/data/bigscreen/chart-options.js | 128 +++++++
 vol-vue3/src/views/data/bigscreen/head_bg.png | Bin 0 -> 7881 bytes
 vol-vue3/src/views/data/bigscreen/index.less  | 326 ++++++++++++++++++
 vol-vue3/src/views/data/bigscreen/index.vue   | 116 +++++++
 vol-vue3/yarn.lock                            |  57 +++
 14 files changed, 962 insertions(+), 126 deletions(-)
 create mode 100644 vol-net6/VOL.WebApi/Controllers/Data/DataTestController.cs
 create mode 100644 vol-net6/VOL.WebApi/quartz/error/2023-08-31.txt
 create mode 100644 vol-vue3/src/mixin/index.js
 create mode 100644 vol-vue3/src/views/data/bigscreen/chart-options.js
 create mode 100644 vol-vue3/src/views/data/bigscreen/head_bg.png
 create mode 100644 vol-vue3/src/views/data/bigscreen/index.less
 create mode 100644 vol-vue3/src/views/data/bigscreen/index.vue

diff --git a/vol-net6/VOL.WebApi/Controllers/Data/DataCaptureController.cs b/vol-net6/VOL.WebApi/Controllers/Data/DataCaptureController.cs
index 9180f0d..15baa9d 100644
--- a/vol-net6/VOL.WebApi/Controllers/Data/DataCaptureController.cs
+++ b/vol-net6/VOL.WebApi/Controllers/Data/DataCaptureController.cs
@@ -3,17 +3,10 @@ using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Authorization;
 using System;
 using VOL.Core.Filters;
-using VOL.Core.Controllers.Basic;
 using VOL.Data.IServices.modbus;
-using VOL.Data.IServices;
 using VOL.Data.Services.modbus;
 using Microsoft.Extensions.DependencyInjection;
-using Newtonsoft.Json.Linq;
-using static System.Reflection.Metadata.BlobBuilder;
-using System.Linq;
-using System.Collections.Generic;
 using VOL.WebApi.Utils;
-using VOL.Core.Services;
 using VOL.Entity.DomainModels;
 
 namespace VOL.WebApi.Controllers.Data
@@ -25,7 +18,7 @@ namespace VOL.WebApi.Controllers.Data
     [AllowAnonymous]
     public class DataCaptureController : Controller
     {
-        private static ModbusTcpService _service; // 静态字段
+        private ModbusTcpService _service; // 静态字段
 
         private readonly IHttpContextAccessor _httpContextAccessor;
 
@@ -34,80 +27,37 @@ namespace VOL.WebApi.Controllers.Data
 
         [ActivatorUtilitiesConstructor]
         public DataCaptureController(
-            //ModbusTcpService service,  // ModbusTcpService为有参构造，暂时无法注入
             IDataProcessing dataService,
             IHttpContextAccessor httpContextAccessor
         )
         {
-            //_service = service;
             _dataService = dataService;
             _httpContextAccessor = httpContextAccessor;
         }
 
-        // 静态构造器 类实例化前调用，且只调用一次
-        static DataCaptureController()
+
+        /// <summary>
+        /// 采集西门子设备
+        /// </summary>
+        /// <returns>IActionResult</returns>
+        //[ApiTask]
+        [HttpGet, HttpPost, Route("gatherSiemens")]
+        public IActionResult Collection()
         {
             try
             {
                 _service = new ModbusTcpService("127.0.0.1", 502);
-                Console.WriteLine("master modbus tcp created...");
+                Console.WriteLine("master modbus tcp connected...");
             }
             catch (Exception)
             {
                 Console.WriteLine("master modbus tcp connect failed！");
+                return Content("master modbus connect failed!");
             }
-
-        }
-
-
-        /// <summary>
-        /// 测试定时接口
-        /// </summary>
-        /// <returns>IActionResult</returns>
-        //[ApiTask]
-        [HttpGet, HttpPost, Route("test")]
-        public IActionResult Test()
-        {
-            //Logger.Info("log info test...");
-            //Logger.Error("log info error...");
-            Data_Device data_Device = new Data_Device();
-            bool result = _dataService.saveDeviceData(data_Device, out string message);
-            Console.WriteLine(message);
-            Data_Produce data_Produce = new Data_Produce();
-            bool result2 = _dataService.saveProduceData(data_Produce, out string message1);
-            Console.WriteLine(message1);
-            return Content(DateTime.Now.ToString("yyyy-MM-dd HH:mm:sss"));
-        }
-
-
-
-        /// <summary>
-        /// 测试采集接口
-        /// </summary>
-        /// <returns>IActionResult</returns>
-        //[ApiTask]
-        [HttpGet, HttpPost, Route("getData")]
-        public IActionResult Collection()
-        {
-            Console.WriteLine(_service);
-            bool isConnected = _service == null ? false : _service.isConnected;
-            if (!isConnected)
+            if (!_service.isConnected)
             {
-                try
-                {
-                    _service.disConnent();
-                    _service = new ModbusTcpService("127.0.0.1", 502);
-                    Console.WriteLine("master modbus tcp reconnect...");
-                }
-                catch (Exception)
-                {
-                    Console.WriteLine("master modbus tcp reconnect failed！");
-                }
-                isConnected = _service == null ? false : _service.isConnected;
-                if (!isConnected)
-                {
-                    return Content("master modbus connect failed!");
-                }
+                Console.WriteLine("master modbus disconnect!");
+                return Content("master modbus disconnect!");
             }
             try {
                 // 读Int16
@@ -122,77 +72,19 @@ namespace VOL.WebApi.Controllers.Data
                 ushort[] us3 = _service.ReadHoldingRegisters(1, 11, 1);
                 bool[] bs = DataConvertUtil.GetBools(us3,0,1);
                 Console.WriteLine("Bools Data：" + String.Join(",",bs));
-
-                // 写String
-                ushort[] src = new ushort[6];
-                DataConvertUtil.SetString(src, 0, "你好世界"); // UTF8 1个中文字符 = 3Byte
-                _service.WriteMultipleRegisters(1, 30, src);
-
                 // 读String
                 ushort[] target = _service.ReadHoldingRegisters(1, 30, 6);
                 string str = DataConvertUtil.GetString(target,0,6);
                 Console.WriteLine("String Data：" + str.ToString());
             } catch (Exception ex) {
                 Console.WriteLine(ex.Message);
-                _service.disConnent();
                 return Content("read data error!");
+            } finally {
+                _service.disConnent();
             }
             return Content("ok!");
         }
 
 
-
-
-
-        [HttpGet, HttpPost, Route("readTest")]
-        public IActionResult Test01()
-        {
-            if (_service.isConnected)
-            {
-                //Console.WriteLine("=========read0x=========");
-                //bool[] data0x = _service.ReadCoils(1, 0, 5);  // 0x
-                ////bool[] bools = { true, false };
-                //Array.ForEach(data0x, Console.WriteLine);
-                //Console.WriteLine("=========read0x=========");
-
-                //Console.WriteLine("=========read1x=========");
-                //bool[] data1x = _service.ReadInputs(1, 0, 5);
-                //Array.ForEach(data1x, Console.WriteLine);
-                //Console.WriteLine("=========read1x=========");
-
-                Console.WriteLine("=========read4x=========");
-                ushort[] data4xs_int16 = _service.ReadHoldingRegisters(1, 8, 2);
-                short val = DataConvertUtil.GetShort(data4xs_int16, 1);
-                Console.WriteLine(val);
-
-                ushort[] data4xs_int32 = _service.ReadHoldingRegisters(1, 1, 2);
-                int vval = DataConvertUtil.GetInt(data4xs_int32, 0);
-                Console.WriteLine(vval);
-
-                ushort[] data4xs_int64 = _service.ReadHoldingRegisters(1, 4, 4);
-                long vvval = DataConvertUtil.GetLong(data4xs_int64, 0);
-                Console.WriteLine(vvval);
-                Console.WriteLine("=========read4x=========");
-
-                //Console.WriteLine("=========read3x=========");
-                //ushort[] data3xs = _service.ReadInputRegisters(1, 4, 2);
-                //uint[] data3x = data3xs.Select(x => (uint)x).ToArray();
-                //Array.ForEach(data3x, Console.WriteLine);
-                //Console.WriteLine("=========read3x=========");
-
-                _service.disConnent();
-                //List<Object> data = new();
-                //data.Add(data0x);
-                //data.Add(data1x);
-                //data.Add(data3x);
-                //data.Add(data4x);
-                return Content("read ok");
-            }
-            else
-            {
-                return Content("Modbus 从站连接失败！");
-            }
-        }
-
     }
 }
diff --git a/vol-net6/VOL.WebApi/Controllers/Data/DataTestController.cs b/vol-net6/VOL.WebApi/Controllers/Data/DataTestController.cs
new file mode 100644
index 0000000..4e627dc
--- /dev/null
+++ b/vol-net6/VOL.WebApi/Controllers/Data/DataTestController.cs
@@ -0,0 +1,190 @@
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Authorization;
+using System;
+using VOL.Core.Filters;
+using VOL.Data.IServices.modbus;
+using VOL.Data.Services.modbus;
+using Microsoft.Extensions.DependencyInjection;
+using VOL.WebApi.Utils;
+using VOL.Entity.DomainModels;
+
+namespace VOL.WebApi.Controllers.Data
+{
+    /// <summary>
+    /// 数据采集API类
+    /// </summary>
+    [Route("api/Data_Test")]
+    [AllowAnonymous]
+    public class DataTestController : Controller
+    {
+        private static ModbusTcpService _service; // 静态字段
+
+        private readonly IHttpContextAccessor _httpContextAccessor;
+
+        private readonly IDataProcessing _dataService;  // 业务处理
+
+
+        [ActivatorUtilitiesConstructor]
+        public DataTestController(
+            //ModbusTcpService service,  // ModbusTcpService为有参构造，暂时无法注入
+            IDataProcessing dataService,
+            IHttpContextAccessor httpContextAccessor
+        )
+        {
+            //_service = service;
+            _dataService = dataService;
+            _httpContextAccessor = httpContextAccessor;
+        }
+
+        // 静态构造器 类实例化前调用，且只调用一次
+        static DataTestController()
+        {
+            try
+            {
+                _service = new ModbusTcpService("127.0.0.1", 502);
+                Console.WriteLine("master modbus tcp created...");
+            }
+            catch (Exception)
+            {
+                Console.WriteLine("master modbus tcp connect failed！");
+            }
+        }
+
+
+        /// <summary>
+        /// 测试定时接口
+        /// </summary>
+        /// <returns>IActionResult</returns>
+        [ApiTask]
+        [HttpGet, HttpPost, Route("test")]
+        public IActionResult Test()
+        {
+            //Logger.Info("log info test...");
+            //Logger.Error("log info error...");
+            Data_Device data_Device = new Data_Device();
+            bool result = _dataService.saveDeviceData(data_Device, out string message);
+            Console.WriteLine(message);
+            Data_Produce data_Produce = new Data_Produce();
+            bool result2 = _dataService.saveProduceData(data_Produce, out string message1);
+            Console.WriteLine(message1);
+            return Content(DateTime.Now.ToString("yyyy-MM-dd HH:mm:sss"));
+        }
+
+
+
+        /// <summary>
+        /// 测试采集接口
+        /// </summary>
+        /// <returns>IActionResult</returns>
+        //[ApiTask]
+        [HttpGet, HttpPost, Route("getData")]
+        public IActionResult Collection()
+        {
+            Console.WriteLine(_service);
+            bool isConnected = _service == null ? false : _service.isConnected;
+            if (!isConnected)
+            {
+                try
+                {
+                    _service.disConnent();
+                    _service = new ModbusTcpService("127.0.0.1", 502);
+                    Console.WriteLine("master modbus tcp reconnect...");
+                }
+                catch (Exception)
+                {
+                    Console.WriteLine("master modbus tcp reconnect failed！");
+                }
+                isConnected = _service == null ? false : _service.isConnected;
+                if (!isConnected)
+                {
+                    return Content("master modbus connect failed!");
+                }
+            }
+            try {
+                // 读Int16
+                ushort[] us1 = _service.ReadHoldingRegisters(1, 9, 1);
+                short v = DataConvertUtil.GetShort(us1, 0);
+                Console.WriteLine("Short Data：" + v);
+                // 读Float
+                ushort[] us2 = _service.ReadHoldingRegisters(1, 1, 2);
+                float f = DataConvertUtil.GetReal(us2, 0);
+                Console.WriteLine("Real Data：" + f);
+                // 读Bool
+                ushort[] us3 = _service.ReadHoldingRegisters(1, 11, 1);
+                bool[] bs = DataConvertUtil.GetBools(us3,0,1);
+                Console.WriteLine("Bools Data：" + String.Join(",",bs));
+
+                // 写String
+                ushort[] src = new ushort[6];
+                DataConvertUtil.SetString(src, 0, "你好世界"); // UTF8 1个中文字符 = 3Byte
+                _service.WriteMultipleRegisters(1, 30, src);
+
+                // 读String
+                ushort[] target = _service.ReadHoldingRegisters(1, 30, 6);
+                string str = DataConvertUtil.GetString(target,0,6);
+                Console.WriteLine("String Data：" + str.ToString());
+            } catch (Exception ex) {
+                Console.WriteLine(ex.Message);
+                _service.disConnent();
+                return Content("read data error!");
+            }
+            return Content("ok!");
+        }
+
+
+
+
+
+        [HttpGet, HttpPost, Route("readTest")]
+        public IActionResult Test01()
+        {
+            if (_service.isConnected)
+            {
+                //Console.WriteLine("=========read0x=========");
+                //bool[] data0x = _service.ReadCoils(1, 0, 5);  // 0x
+                ////bool[] bools = { true, false };
+                //Array.ForEach(data0x, Console.WriteLine);
+                //Console.WriteLine("=========read0x=========");
+
+                //Console.WriteLine("=========read1x=========");
+                //bool[] data1x = _service.ReadInputs(1, 0, 5);
+                //Array.ForEach(data1x, Console.WriteLine);
+                //Console.WriteLine("=========read1x=========");
+
+                Console.WriteLine("=========read4x=========");
+                ushort[] data4xs_int16 = _service.ReadHoldingRegisters(1, 8, 2);
+                short val = DataConvertUtil.GetShort(data4xs_int16, 1);
+                Console.WriteLine(val);
+
+                ushort[] data4xs_int32 = _service.ReadHoldingRegisters(1, 1, 2);
+                int vval = DataConvertUtil.GetInt(data4xs_int32, 0);
+                Console.WriteLine(vval);
+
+                ushort[] data4xs_int64 = _service.ReadHoldingRegisters(1, 4, 4);
+                long vvval = DataConvertUtil.GetLong(data4xs_int64, 0);
+                Console.WriteLine(vvval);
+                Console.WriteLine("=========read4x=========");
+
+                //Console.WriteLine("=========read3x=========");
+                //ushort[] data3xs = _service.ReadInputRegisters(1, 4, 2);
+                //uint[] data3x = data3xs.Select(x => (uint)x).ToArray();
+                //Array.ForEach(data3x, Console.WriteLine);
+                //Console.WriteLine("=========read3x=========");
+
+                _service.disConnent();
+                //List<Object> data = new();
+                //data.Add(data0x);
+                //data.Add(data1x);
+                //data.Add(data3x);
+                //data.Add(data4x);
+                return Content("read ok");
+            }
+            else
+            {
+                return Content("Modbus 从站连接失败！");
+            }
+        }
+
+    }
+}
diff --git a/vol-net6/VOL.WebApi/quartz/error/2023-08-31.txt b/vol-net6/VOL.WebApi/quartz/error/2023-08-31.txt
new file mode 100644
index 0000000..505044e
--- /dev/null
+++ b/vol-net6/VOL.WebApi/quartz/error/2023-08-31.txt
@@ -0,0 +1 @@
+作业启动:西门子设备采集(5s一次)
\ No newline at end of file
diff --git a/vol-vue3/package-lock.json b/vol-vue3/package-lock.json
index f2ad2c7..3cd97ce 100644
--- a/vol-vue3/package-lock.json
+++ b/vol-vue3/package-lock.json
@@ -8,6 +8,7 @@
       "name": "vol.vue3",
       "version": "0.1.0",
       "dependencies": {
+        "@dataview/datav-vue3": "^0.0.0-test.1672506674342",
         "@element-plus/icons-vue": "^2.1.0",
         "@microsoft/signalr": "^6.0.4",
         "ali-oss": "^6.17.1",
@@ -1680,6 +1681,27 @@
         "node": ">=10"
       }
     },
+    "node_modules/@dataview/datav-vue3": {
+      "version": "0.0.0-test.1672506674342",
+      "resolved": "https://registry.npmmirror.com/@dataview/datav-vue3/-/datav-vue3-0.0.0-test.1672506674342.tgz",
+      "integrity": "sha512-d0oT/msAi592CTvWmQl0umkLpHgMwtTN2+peyo0L2GHNG7b4cKeO9meEF5o28DgFzRwOLeNQW73vKCF4JC+ihw==",
+      "dependencies": {
+        "@jiaminghi/color": "^0.1.1",
+        "classnames": "^2.3.2",
+        "lodash-es": "^4.17.21"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
+    "node_modules/@dataview/datav-vue3/node_modules/@jiaminghi/color": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
+      "integrity": "sha512-M09+Sb5HGqVim0zo+nG5gU1v+6gXT8ptr0BZR6dMGt83XmCJgnZtO8s7llTW4hLFFFM5co6geZvTekqLpSPAAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
     "node_modules/@element-plus/icons-vue": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz",
@@ -4654,6 +4676,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.nlark.com/clean-css/download/clean-css-4.2.3.tgz?cache=0&sync_timestamp=1624616709466&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fclean-css%2Fdownload%2Fclean-css-4.2.3.tgz",
@@ -18556,6 +18583,26 @@
       "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
       "integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
     },
+    "@dataview/datav-vue3": {
+      "version": "0.0.0-test.1672506674342",
+      "resolved": "https://registry.npmmirror.com/@dataview/datav-vue3/-/datav-vue3-0.0.0-test.1672506674342.tgz",
+      "integrity": "sha512-d0oT/msAi592CTvWmQl0umkLpHgMwtTN2+peyo0L2GHNG7b4cKeO9meEF5o28DgFzRwOLeNQW73vKCF4JC+ihw==",
+      "requires": {
+        "@jiaminghi/color": "^0.1.1",
+        "classnames": "^2.3.2",
+        "lodash-es": "^4.17.21"
+      },
+      "dependencies": {
+        "@jiaminghi/color": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
+          "integrity": "sha512-M09+Sb5HGqVim0zo+nG5gU1v+6gXT8ptr0BZR6dMGt83XmCJgnZtO8s7llTW4hLFFFM5co6geZvTekqLpSPAAQ==",
+          "requires": {
+            "@babel/runtime": "^7.5.5"
+          }
+        }
+      }
+    },
     "@element-plus/icons-vue": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz",
@@ -21099,6 +21146,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.nlark.com/clean-css/download/clean-css-4.2.3.tgz?cache=0&sync_timestamp=1624616709466&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fclean-css%2Fdownload%2Fclean-css-4.2.3.tgz",
diff --git a/vol-vue3/package.json b/vol-vue3/package.json
index bee2417..1c11d08 100644
--- a/vol-vue3/package.json
+++ b/vol-vue3/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
+    "@jiaminghi/data-view": "^2.10.0",
     "@microsoft/signalr": "^6.0.4",
     "ali-oss": "^6.17.1",
     "axios": "^0.21.1",
diff --git a/vol-vue3/src/main.js b/vol-vue3/src/main.js
index 25ccdcb..2f9b980 100644
--- a/vol-vue3/src/main.js
+++ b/vol-vue3/src/main.js
@@ -12,7 +12,8 @@ import http from './api/http'
 // import locale from 'element-plus/lib/locale/lang/zh-cn'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
-
+// vue3 引入dataV全局组件
+import dataV from '@jiaminghi/data-view'
 
 import permission from './api/permission'
 import viewgird from './components/basic/ViewGrid';
@@ -59,6 +60,7 @@ app.use(store)
     .use(ElementPlus, { size: 'default' })
     .use(router)
     .use(viewgird)
+    .use(dataV)
     .mount('#app');
 app.config.globalProperties.$Message = app.config.globalProperties.$message;
 
diff --git a/vol-vue3/src/mixin/index.js b/vol-vue3/src/mixin/index.js
new file mode 100644
index 0000000..3e34b94
--- /dev/null
+++ b/vol-vue3/src/mixin/index.js
@@ -0,0 +1,62 @@
+// 屏幕适配 mixin 函数
+// * 默认缩放值
+const scale = {
+    width: '1',
+    height: '1',
+  }
+  
+  // * 设计稿尺寸（px）
+  const baseWidth = 1920
+  const baseHeight = 1080
+  
+  // * 需保持的比例（默认1.77778）
+  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+  
+  export default {
+    data() {
+      return {
+        // * 定时函数
+        drawTiming: null
+      }
+    },
+    mounted () {
+      this.calcRate()
+      window.addEventListener('resize', this.resize)
+    },
+    beforeDestroy () {
+      window.removeEventListener('resize', this.resize)
+    },
+    methods: {
+      calcRate () {
+        const appRef = this.$refs["appRef"]  // 需要在指定节点上添加 ref="appRef"
+       console.log(this);
+        console.log(appRef);
+        if (!appRef) return
+        // 当前宽高比
+        const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
+        if (appRef) {
+          if (currentRate > baseProportion) {
+            // 表示更宽
+            scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
+            scale.height = (window.innerHeight / baseHeight).toFixed(5)
+            appRef.style.transform = `scale(${scale.width}, ${scale.height})`
+            // appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+          } else {
+            // 表示更高
+            scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
+            scale.width = (window.innerWidth / baseWidth).toFixed(5)
+            appRef.style.transform = `scale(${scale.width}, ${scale.height})`
+          }
+        }
+      },
+      resize () {
+        clearTimeout(this.drawTiming)
+        this.drawTiming = setTimeout(() => {
+          this.calcRate()
+          console.log(scale)
+        }, 200)
+      },
+  
+    },
+  }
+  
\ No newline at end of file
diff --git a/vol-vue3/src/router/index.js b/vol-vue3/src/router/index.js
index 4b984ac..b7aa384 100644
--- a/vol-vue3/src/router/index.js
+++ b/vol-vue3/src/router/index.js
@@ -99,6 +99,15 @@ const routes = [
     meta: {
       keepAlive: false
     }
+  },
+  {
+    path: '/dataview',
+    name: 'dataview',
+    component: () => import('@/views/data/bigscreen/index.vue'),
+    meta: {
+      keepAlive: false,
+      anonymous: true   // 路由无需登录访问
+    }
   }
 ]
 
diff --git a/vol-vue3/src/views/charts/bigdata.vue b/vol-vue3/src/views/charts/bigdata.vue
index e75b6f9..f834562 100644
--- a/vol-vue3/src/views/charts/bigdata.vue
+++ b/vol-vue3/src/views/charts/bigdata.vue
@@ -120,7 +120,7 @@ import {
   chartRight1,
   gauge,
 } from "./bigdata/chart-options";
-// import IviewCircle from "./bigdata/IviewCircle";
+// import IviewCircle from "./bigdata/IviewCircle";  // vue2版本使用的IView组件，此处废弃
 import "./bigdata/layout.less";
 export default {
   components: {
diff --git a/vol-vue3/src/views/data/bigscreen/chart-options.js b/vol-vue3/src/views/data/bigscreen/chart-options.js
new file mode 100644
index 0000000..e04698e
--- /dev/null
+++ b/vol-vue3/src/views/data/bigscreen/chart-options.js
@@ -0,0 +1,128 @@
+// 折线图
+let chartLeft1 = {
+  // color: ["#37a2da", "#32c5e9","#67e0e3"],  // 图表折线默认配色
+  title: {
+    text: '周销售额趋势',
+    offset: [-300, -30],  // 标题[左右 上下]偏移
+    style: {
+      fill: '#fff',
+      fontSize: 18,
+      fontWeight: 'bold',
+      textAlign: 'center',
+      textBaseline: 'bpttom'
+    }
+  },
+  legend:{  // 图例标签
+    data: ['图例一', '图例二'],
+    orient: 'horizontal',  // 横向
+    left:"50%", 
+    top: '10%',
+    itemGap: 20,  // 标签间距
+    textStyle: {
+      fontFamily: 'Arial',
+      fontSize: 13,
+      fill: '#fff'
+    }
+  },
+  xAxis: {  // x轴
+    name: '日期',
+    data: ['周一1', '周二2', '周三3', '周四4', '周五5', '周六6', '周日7'],
+    nameTextStyle: {   // 名称样式
+      fill: '#fff',
+      fontSize: 10
+    },
+    axisLine: {   // 坐标轴
+      style: {
+        stroke: '#fff',
+        lineWidth: 2
+      }
+    },
+    axisTick:{  // 坐标轴刻度线
+      style: {
+        stroke: '#fff',
+        lineWidth: 2
+      }
+    },
+    axisLabel: {  // 坐标轴标签
+      style: {
+        fill: '#fff',
+        fontSize: 12,
+        rotate: 10  // 倾斜度
+      }
+    }
+  },
+  yAxis: {
+    name: '销售额',
+    data: 'value',
+    axisLine: {   // 坐标轴
+      style: {
+        stroke: '#fff',
+        lineWidth: 2
+      }
+    },
+    axisTick:{  // 坐标轴刻度线
+      style: {
+        stroke: '#fff',
+        lineWidth: 2
+      }
+    },
+    axisLabel: {  // 坐标轴标签
+      show:true,  // 显示
+      style: {
+        fill: '#fff',
+        fontSize: 12,
+        rotate: 10  // 倾斜度
+      }
+    }
+  },
+  series: [
+    {
+      name: "图例一",
+      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
+      type: 'line',
+      label: {
+        show: true,
+        formatter : '{value}件',
+        style: {
+          fontSize: 16
+        }
+      },
+    },
+    {
+      name: "图例二",
+      data: [2200, 1230, 1900, 2200, 2500, 3200, 2985],
+      type: 'line',
+      smooth: true,
+      label: {
+        show: true
+      }
+    }
+  ],
+  // tooltip:{   // dataV暂不支持此功能
+  //   trigger:'item',
+  //   show:true
+  // }
+};
+
+// 柱状图
+let chartLeft2 = {
+  title: {
+    text: '周销售额趋势'
+  },
+  xAxis: {
+    name: '第一周',
+    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+  },
+  yAxis: {
+    name: '销售额',
+    data: 'value'   //  x或y坐标轴应至少有一个配置为'value'
+  },
+  series: [
+    {
+      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
+      type: 'bar'
+    }
+  ]
+};
+
+export { chartLeft1, chartLeft2 }
diff --git a/vol-vue3/src/views/data/bigscreen/head_bg.png b/vol-vue3/src/views/data/bigscreen/head_bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2e45f6911fa3d1616d0b75a122161a3896aa3c4
GIT binary patch
literal 7881
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
S4ims_pga1edX+aFpZ^cs0d1uK

literal 0
HcmV?d00001

diff --git a/vol-vue3/src/views/data/bigscreen/index.less b/vol-vue3/src/views/data/bigscreen/index.less
new file mode 100644
index 0000000..cc7798b
--- /dev/null
+++ b/vol-vue3/src/views/data/bigscreen/index.less
@@ -0,0 +1,326 @@
+.big-data-container {
+  position: absolute;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  background-color: #1400a8;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230e0077'/%3E%3Cstop offset='1' stop-color='%230e0077' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2314057c'/%3E%3Cstop offset='1' stop-color='%2314057c' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230d0524'/%3E%3Cstop offset='1' stop-color='%230d0524' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231400a8'/%3E%3Cstop offset='1' stop-color='%231400a8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23130733'/%3E%3Cstop offset='1' stop-color='%23130733' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
+
+  .header {
+    height: 80px;
+    // background: url(./head_bg.png) no-repeat center center;
+    // background-size: 100% 100%;
+    position: relative;
+    z-index: 100;
+    display: flex;
+    justify-content: space-between;
+
+    .header-item {
+      flex: 1;
+      position: relative;
+      text-align: center;
+      color: #fff;
+
+      .version {
+        position: absolute;
+        top: 40px;
+        left: 40%;
+        right: 0;
+      }
+
+      .topic {
+        position: relative;
+        top: 15px;
+      }
+
+      .datetime {
+        position: absolute;
+        top: 40px;
+        left: 0;
+        right: 40%;
+      }
+
+      .dv-decoration-8 {
+        width: 100%;
+        height: 60px;
+      }
+
+      .dv-decoration-5 {
+        width: 85%;
+        height: 60px;
+        margin: 0 auto;
+      }
+    }
+  }
+
+  .data-container {
+    height:1000px;
+    margin: 0px 15px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 80px;
+    bottom: 0;
+
+    .border-box-content {
+      width: 100%;
+      padding: 20px;
+      display: flex;
+    }
+
+    
+
+    .data-left,
+    .data-right {
+      flex:1;
+      margin-right: 10px;
+      display: flex;
+      flex-direction: column;
+
+      .data-left-item,
+      .data-right-item {
+        flex: 1;
+        border: 1px solid rgba(25, 186, 139, 0.17);
+        padding: 2px 4px;
+        background: rgba(255, 255, 255, 0.04);
+        background-size: 100% auto;
+        position: relative;
+        margin-bottom: 10px;
+        z-index: 10;
+
+        &::before {
+          border-left: 2px solid #02a6b5;
+          left: 0;
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          content: "";
+          border-top: 2px solid #02a6b5;
+          top: 0;
+        }
+
+        &::after {
+          border-right: 2px solid #02a6b5;
+          right: 0;
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          content: "";
+          border-top: 2px solid #02a6b5;
+          top: 0;
+        }
+      }
+
+      // .title {
+      //   color: #fff;
+      //   font-size: 16px;
+      //   text-align: center;
+      // }
+
+      .data-foot-line {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        left: 0;
+        &::before, &::after {
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          content: "";
+          border-bottom: 2px solid #02a6b5;
+          bottom: 0;
+        }
+
+        &::before {
+          border-left: 2px solid #02a6b5;
+          left: 0;
+        }
+
+        &::after {
+          border-right: 2px solid #02a6b5;
+          right: 0;
+        }
+      }
+    }
+  }
+
+}
+
+// .head h1 {
+//   margin: 0;
+//   color: #fff;
+//   text-align: center;
+//   /* font-size: .4rem; */
+//   /* line-height: .8rem; */
+//   line-height: 71px;
+// }
+
+// .data-container {
+//   /* margin: 5px 15px;
+//         height:100%; */
+
+//   margin: 0px 15px;
+//   position: absolute;
+//   left: 0;
+//   right: 0;
+//   top: 76px;
+//   bottom: 0;
+// }
+
+// .data-container > div {
+//   float: left;
+//   /* border: 1px solid white; */
+//   height: 100%;
+// }
+
+// .data-center {
+//   padding: 0 0.9rem;
+//   width: 40%;
+//   display: flex;
+//   flex-direction: column;
+//   // .center-top{
+//   //   height: 210px;
+//   //   background: red;
+//   // }
+// .chart-center{
+//   flex: 1;
+// }
+// }
+// .chart-center{
+//   width: 100%;
+//   display: flex;
+// //  background: white;
+// }
+// .data-left,
+// .data-right {
+//   width: 30%;
+//   display: flex;
+//   flex-direction: column;
+// }
+
+// .data-left-item,
+// .data-right-item,.center-top,.center-top-num,.chart-center {
+//   border: 1px solid rgba(25, 186, 139, 0.17);
+//   padding: 0 0.2rem 0.4rem 0.15rem;
+//   background: rgba(255, 255, 255, 0.04);
+//   background-size: 100% auto;
+//   position: relative;
+//   margin-bottom: 0.15rem;
+//   z-index: 10;
+// }
+
+// .data-foot-line {
+//   position: absolute;
+//   bottom: 0;
+//   width: 100%;
+//   left: 0;
+// }
+
+// .data-foot-line:before,
+// .data-foot-line:after {
+//   position: absolute;
+//   width: 10px;
+//   height:10px;
+//   content: "";
+//   border-bottom: 2px solid #02a6b5;
+//   bottom: 0;
+// }
+
+// .boxall:before,
+// .data-foot-line:before {
+//   border-left: 2px solid #02a6b5;
+//   left: 0;
+// }
+
+// .boxall:after,
+// .data-foot-line:after {
+//   border-right: 2px solid #02a6b5;
+//   right: 0;
+// }
+
+// .boxall:before,
+// .boxall:after {
+//   position: absolute;
+//   width: 10px;
+//   height: 10px;
+//   content: "";
+//   border-top: 2px solid #02a6b5;
+//   top: 0;
+// }
+
+// .data-left-item:before,
+// .data-right-item:before,
+// .center-top-num:before,
+// .center-top:before{
+//   border-left: 2px solid #02a6b5;
+//   left: 0;
+//   position: absolute;
+//   width: 10px;
+//   height:10px;
+//   content: "";
+//   border-top: 2px solid #02a6b5;
+//   top: 0;
+// }
+
+// .data-left-item:after,
+// .data-right-item:after,
+// .center-top-num:after,
+// .center-top:after {
+//   border-right: 2px solid #02a6b5;
+//   right: 0;
+//   position: absolute;
+//   width: 10px;
+//   height: 10px;
+//   content: "";
+//   border-top: 2px solid #02a6b5;
+//   top: 0;
+// }
+
+// .data-left,
+// .data-right {
+//   /* display: flex; */
+// }
+
+// .data-left > .data-left-item,
+// .data-right > .data-right-item {
+//   flex: 1;
+//   margin-bottom: 0.9rem;
+// }
+
+// .data-center  .title,
+// .data-left > .data-left-item .title,
+// .data-right > .data-right-item .title {
+//   /* font-size: .2rem; */
+//   font-size: 1rem;
+//   padding: 7px 0;
+//   color: #fff;
+//   text-align: center;
+//   /* line-height: .5rem; */
+// }
+
+// .data-center .chart-center{
+//   width: 100%;
+// }
+
+// .center-top-num{
+//   height: 80px;
+//   padding-top: 7px;
+//   margin-bottom: 0.8rem;
+//   display: flex;
+//   .item{
+//     flex: 1;
+//     text-align: center;
+//   }
+//   .text{
+//     color: #fcf0d8;
+//     font-size: 14px;
+//   }
+//   .num{
+//     font-size: 34px;
+//     font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+//     font-weight: bold;
+//     color: #67caca;
+//   }
+// }
\ No newline at end of file
diff --git a/vol-vue3/src/views/data/bigscreen/index.vue b/vol-vue3/src/views/data/bigscreen/index.vue
new file mode 100644
index 0000000..952c968
--- /dev/null
+++ b/vol-vue3/src/views/data/bigscreen/index.vue
@@ -0,0 +1,116 @@
+
+<template>
+  <div id="big-data-container" class="big-data-container">
+    <dv-loading v-if="loading">Loading...</dv-loading>
+    <dv-full-screen-container v-else>
+      <div class="header">
+        <div class="header-item">
+          <h3 class="version">CHANKO V1.0.0</h3>
+          <dv-decoration-8 />
+        </div>
+        <div class="header-item">
+          <h2 class="topic">大屏数据看板</h2>
+          <dv-decoration-5 />
+        </div>
+        <div class="header-item">
+          <h3 class="datetime">{{ datetime }}</h3>
+          <dv-decoration-8 :reverse="true" />
+        </div>
+        <!-- <dv-decoration-10 style="width:100%;height:5px; transform: rotateY(180deg);" /> -->
+      </div>
+      <!-- 四方格样式 -->
+      <div class="data-container">
+        <dv-border-box-13>
+          <div class="data-left">
+            <div class="data-left-item">
+              <!-- <div class="title">商品销量分类</div> -->
+              <dv-charts :option="chartLeft1"></dv-charts>
+              <div class="data-foot-line"></div>
+            </div>
+            <div class="data-left-item">
+              <dv-charts :option="chartLeft1"></dv-charts>
+              <div class="data-foot-line"></div>
+            </div>
+          </div>
+          <div class="data-right">
+            <div class="data-right-item">
+              <dv-charts :option="chartLeft1"></dv-charts>
+              <div class="data-foot-line"></div>
+            </div>
+            <div class="data-right-item">
+              <dv-charts :option="chartLeft1"></dv-charts>
+              <div class="data-foot-line"></div>
+            </div>
+          </div>
+        </dv-border-box-13>
+      </div>
+    </dv-full-screen-container>
+
+  </div>
+</template>
+<script>
+import {
+  chartLeft1,
+  chartLeft2
+} from "./chart-options";
+import myMixin from '@/mixin';
+import "./index.less";
+import { changeDefaultConfig } from '@jiaminghi/charts'
+export default {
+  components: {
+  },
+  mixins: [myMixin],
+  data() {
+    return {
+      loading: true,
+      datetime: '',
+      chartLeft1: {},
+      chartLeft2: {}
+    }
+  },
+  created() {
+    this.onLoading();
+    this.datetime = this.base.getDate(true);
+    setInterval(() => {
+      this.datetime = this.base.getDate(true);
+    });
+  },
+  mounted() {
+    // changeDefaultConfig('color', ['#67e0e3']);  // 修改默认颜色
+    this.chartLeft1 = chartLeft1;
+    this.chartLeft2 = chartLeft2;
+  },
+  methods: {
+    onLoading() {
+      setTimeout(() => {
+        this.loading = false;  // todo
+      }, 1000);
+    },
+  },
+  destroyed() {
+    // $chartLeft1 = null;
+    // $chartLeft2 = null;
+    // $chartLeft3 = null;
+    // $chartCenter = null;
+    // $chartRight1 = null;
+    // $chartGauge1 = null;
+    // $chartGauge2 = null;
+  },
+};
+</script>
+<style lang="less" scoped>
+// vue3 改写dv-loading样式
+:deep(.dv-loading) {
+  justify-content: start;
+  margin-top: 100px;
+  color: #fff;
+
+  .loading-tip {
+    font-size: 16px;
+  }
+}
+</style>
+
+
+
+
diff --git a/vol-vue3/yarn.lock b/vol-vue3/yarn.lock
index f217e2b..9497d17 100644
--- a/vol-vue3/yarn.lock
+++ b/vol-vue3/yarn.lock
@@ -896,6 +896,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.5.5":
+  version "7.22.11"
+  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.11.tgz#7a9ba3bbe406ad6f9e8dd4da2ece453eb23a77a4"
+  integrity sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.0.0", "@babel/template@^7.14.5":
   version "7.14.5"
   resolved "https://registry.nlark.com/@babel/template/download/@babel/template-7.14.5.tgz?cache=0&sync_timestamp=1623280543555&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Ftemplate%2Fdownload%2F%40babel%2Ftemplate-7.14.5.tgz"
@@ -991,6 +998,51 @@
     cssnano-preset-default "^4.0.0"
     postcss "^7.0.0"
 
+"@jiaminghi/bezier-curve@*":
+  version "0.0.9"
+  resolved "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz#5196aca93c8b061a612b4c3eabcedf9490cef6ee"
+  integrity sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+
+"@jiaminghi/c-render@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz#982ebd8f71b443bb9507834227834973ebd9b6d8"
+  integrity sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@jiaminghi/bezier-curve" "*"
+    "@jiaminghi/color" "*"
+    "@jiaminghi/transition" "*"
+
+"@jiaminghi/charts@*":
+  version "0.2.18"
+  resolved "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz#63ded95200789fc1a1fd04b7fd9e56f58d22d90f"
+  integrity sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@jiaminghi/c-render" "^0.4.3"
+
+"@jiaminghi/color@*":
+  version "1.1.3"
+  resolved "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz#a2336750d1266155ffe80375c58c26fdec495611"
+  integrity sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg==
+
+"@jiaminghi/data-view@^2.10.0":
+  version "2.10.0"
+  resolved "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz#2146d8fc71b9f24be808238ca050ddb7a4c8949f"
+  integrity sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@jiaminghi/charts" "*"
+
+"@jiaminghi/transition@*":
+  version "1.1.11"
+  resolved "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz#576d8af092434b34201eba5eaecc79dd33c8ad8c"
+  integrity sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+
 "@microsoft/signalr@^6.0.4":
   version "6.0.4"
   resolved "https://registry.npmmirror.com/@microsoft/signalr/-/signalr-6.0.4.tgz"
@@ -7719,6 +7771,11 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.13.7.tgz"
   integrity sha1-ysLazIoepnX+qrrriugziYrkb1U=
 
+regenerator-runtime@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
 regenerator-transform@^0.14.2:
   version "0.14.5"
   resolved "https://registry.nlark.com/regenerator-transform/download/regenerator-transform-0.14.5.tgz"