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() + + /// + /// 采集西门子设备 + /// + /// IActionResult + //[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!"); } - - } - - - /// - /// 测试定时接口 - /// - /// IActionResult - //[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")); - } - - - - /// - /// 测试采集接口 - /// - /// IActionResult - //[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 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 +{ + /// + /// 数据采集API类 + /// + [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!"); + } + } + + + /// + /// 测试定时接口 + /// + /// IActionResult + [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")); + } + + + + /// + /// 测试采集接口 + /// + /// IActionResult + //[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 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 0000000..a2e45f6 Binary files /dev/null and b/vol-vue3/src/views/data/bigscreen/head_bg.png differ 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 @@ + + + + + + + + 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"