commit
d5a3a78819
Binary file not shown.
@ -0,0 +1,12 @@
|
||||
/*
|
||||
*代码由框架生成,任何更改都可能导致被代码生成器覆盖
|
||||
*/
|
||||
using VOL.Core.BaseProvider;
|
||||
using VOL.Entity.DomainModels;
|
||||
|
||||
namespace VOL.Data.IServices
|
||||
{
|
||||
public partial interface IData_ConfigService : IService<Data_Config>
|
||||
{
|
||||
}
|
||||
}
|
@ -0,0 +1,19 @@
|
||||
/*
|
||||
*所有关于Data_Config类的业务代码接口应在此处编写
|
||||
*/
|
||||
using VOL.Core.BaseProvider;
|
||||
using VOL.Entity.DomainModels;
|
||||
using VOL.Core.Utilities;
|
||||
using System.Linq.Expressions;
|
||||
namespace VOL.Data.IServices
|
||||
{
|
||||
public partial interface IData_ConfigService
|
||||
{
|
||||
// 获取设备配置列表
|
||||
List<Data_Config> getConfigList();
|
||||
|
||||
// 根据主键查询设备
|
||||
|
||||
Data_Config GetConfigById(int id);
|
||||
}
|
||||
}
|
@ -0,0 +1,12 @@
|
||||
/*
|
||||
*代码由框架生成,任何更改都可能导致被代码生成器覆盖
|
||||
*/
|
||||
using VOL.Core.BaseProvider;
|
||||
using VOL.Entity.DomainModels;
|
||||
|
||||
namespace VOL.Data.IServices
|
||||
{
|
||||
public partial interface IData_MachineService : IService<Data_Machine>
|
||||
{
|
||||
}
|
||||
}
|
@ -0,0 +1,15 @@
|
||||
/*
|
||||
*所有关于Data_Machine类的业务代码接口应在此处编写
|
||||
*/
|
||||
using VOL.Core.BaseProvider;
|
||||
using VOL.Entity.DomainModels;
|
||||
using VOL.Core.Utilities;
|
||||
using System.Linq.Expressions;
|
||||
namespace VOL.Data.IServices
|
||||
{
|
||||
public partial interface IData_MachineService
|
||||
{
|
||||
// 查询设备列表数据
|
||||
Dictionary<int, Data_Machine> GetMachineData();
|
||||
}
|
||||
}
|
@ -0,0 +1,12 @@
|
||||
/*
|
||||
*代码由框架生成,任何更改都可能导致被代码生成器覆盖
|
||||
*/
|
||||
using VOL.Core.BaseProvider;
|
||||
using VOL.Entity.DomainModels;
|
||||
|
||||
namespace VOL.Data.IServices
|
||||
{
|
||||
public partial interface IData_ProduceService : IService<Data_Produce>
|
||||
{
|
||||
}
|
||||
}
|
@ -0,0 +1,23 @@
|
||||
/*
|
||||
*所有关于Data_Produce类的业务代码接口应在此处编写
|
||||
*/
|
||||
using VOL.Entity.DomainModels;
|
||||
|
||||
|
||||
namespace VOL.Data.IServices
|
||||
{
|
||||
public partial interface IData_ProduceService
|
||||
{
|
||||
// 根据查询对象获取最新的一条记录
|
||||
Data_Produce getLastProduceData(Func<Data_Produce, bool> query);
|
||||
|
||||
|
||||
// 最近一周生产加工数
|
||||
Dictionary<string, object> produceDataGroupByWeekDays();
|
||||
|
||||
|
||||
// 近一周工单走势数据
|
||||
Dictionary<string, object> workDataGroupByWeekDays(int configId, string target);
|
||||
|
||||
}
|
||||
}
|
@ -0,0 +1,23 @@
|
||||
<Project Sdk="Microsoft.NET.Sdk">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net6.0</TargetFramework>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
<Nullable>enable</Nullable>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<ProjectReference Include="..\VOL.Core\VOL.Core.csproj" />
|
||||
<ProjectReference Include="..\VOL.Entity\VOL.Entity.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Folder Include="IRepositories\" />
|
||||
<Folder Include="Repositories\" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="NModbus" Version="3.0.80" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
@ -0,0 +1,16 @@
|
||||
using VOL.Entity.MappingConfiguration;
|
||||
using VOL.Entity.DomainModels;
|
||||
using Microsoft.EntityFrameworkCore.Metadata.Builders;
|
||||
|
||||
namespace VOL.Entity.MappingConfiguration
|
||||
{
|
||||
public class Data_ConfigMapConfig : EntityMappingConfiguration<Data_Config>
|
||||
{
|
||||
public override void Map(EntityTypeBuilder<Data_Config>
|
||||
builderTable)
|
||||
{
|
||||
//b.Property(x => x.StorageName).HasMaxLength(45);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -0,0 +1,16 @@
|
||||
using VOL.Entity.MappingConfiguration;
|
||||
using VOL.Entity.DomainModels;
|
||||
using Microsoft.EntityFrameworkCore.Metadata.Builders;
|
||||
|
||||
namespace VOL.Entity.MappingConfiguration
|
||||
{
|
||||
public class Data_MachineMapConfig : EntityMappingConfiguration<Data_Machine>
|
||||
{
|
||||
public override void Map(EntityTypeBuilder<Data_Machine>
|
||||
builderTable)
|
||||
{
|
||||
//b.Property(x => x.StorageName).HasMaxLength(45);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -0,0 +1,16 @@
|
||||
using VOL.Entity.MappingConfiguration;
|
||||
using VOL.Entity.DomainModels;
|
||||
using Microsoft.EntityFrameworkCore.Metadata.Builders;
|
||||
|
||||
namespace VOL.Entity.MappingConfiguration
|
||||
{
|
||||
public class Data_ProduceMapConfig : EntityMappingConfiguration<Data_Produce>
|
||||
{
|
||||
public override void Map(EntityTypeBuilder<Data_Produce>
|
||||
builderTable)
|
||||
{
|
||||
//b.Property(x => x.StorageName).HasMaxLength(45);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -0,0 +1,21 @@
|
||||
/*
|
||||
*代码由框架生成,任何更改都可能导致被代码生成器覆盖
|
||||
*如果要增加方法请在当前目录下Partial文件夹Data_ConfigController编写
|
||||
*/
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using VOL.Core.Controllers.Basic;
|
||||
using VOL.Entity.AttributeManager;
|
||||
using VOL.Data.IServices;
|
||||
namespace VOL.Data.Controllers
|
||||
{
|
||||
[Route("api/Data_Config")]
|
||||
[PermissionTable(Name = "Data_Config")]
|
||||
public partial class Data_ConfigController : ApiBaseController<IData_ConfigService>
|
||||
{
|
||||
public Data_ConfigController(IData_ConfigService service)
|
||||
: base(service)
|
||||
{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -0,0 +1,21 @@
|
||||
/*
|
||||
*代码由框架生成,任何更改都可能导致被代码生成器覆盖
|
||||
*如果要增加方法请在当前目录下Partial文件夹Data_MachineController编写
|
||||
*/
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using VOL.Core.Controllers.Basic;
|
||||
using VOL.Entity.AttributeManager;
|
||||
using VOL.Data.IServices;
|
||||
namespace VOL.Data.Controllers
|
||||
{
|
||||
[Route("api/Data_Machine")]
|
||||
[PermissionTable(Name = "Data_Machine")]
|
||||
public partial class Data_MachineController : ApiBaseController<IData_MachineService>
|
||||
{
|
||||
public Data_MachineController(IData_MachineService service)
|
||||
: base(service)
|
||||
{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -0,0 +1,21 @@
|
||||
/*
|
||||
*代码由框架生成,任何更改都可能导致被代码生成器覆盖
|
||||
*如果要增加方法请在当前目录下Partial文件夹Data_ProduceController编写
|
||||
*/
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using VOL.Core.Controllers.Basic;
|
||||
using VOL.Entity.AttributeManager;
|
||||
using VOL.Data.IServices;
|
||||
namespace VOL.Data.Controllers
|
||||
{
|
||||
[Route("api/Data_Produce")]
|
||||
[PermissionTable(Name = "Data_Produce")]
|
||||
public partial class Data_ProduceController : ApiBaseController<IData_ProduceService>
|
||||
{
|
||||
public Data_ProduceController(IData_ProduceService service)
|
||||
: base(service)
|
||||
{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -0,0 +1 @@
|
||||
作业启动:西门子设备采集(5s一次)
|
After Width: | Height: | Size: 454 KiB |
After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 4.0 KiB |
After Width: | Height: | Size: 21 KiB |
@ -0,0 +1,159 @@
|
||||
|
||||
<template>
|
||||
<div class="gauge" ref="vgauge"></div>
|
||||
</template>
|
||||
<script>
|
||||
var echarts = require("echarts");
|
||||
export default {
|
||||
name: "Gauge",
|
||||
props: {
|
||||
option: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartGauge: null,
|
||||
defaultOption: {
|
||||
series: [{
|
||||
radius: '130%',
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 1,
|
||||
splitNumber: 10,
|
||||
center: ["50%", "80%"], // 圆心坐标
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: [
|
||||
[0.2, '#FF6E76'],
|
||||
[0.4, '#FF9F7F'],
|
||||
[0.6, '#FDDD60'],
|
||||
[0.8, '#58D9F9'],
|
||||
[1.0, '#7CFFB2']
|
||||
]
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
|
||||
length: '12%',
|
||||
width: 20,
|
||||
offsetCenter: [0, '-60%'],
|
||||
itemStyle: {
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
length: 12,
|
||||
lineStyle: {
|
||||
color: 'auto',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
length: 20,
|
||||
lineStyle: {
|
||||
color: 'auto',
|
||||
width: 5
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 20,
|
||||
// distance: -60,
|
||||
rotate: 'tangential',
|
||||
formatter: function (value) {
|
||||
switch(value) {
|
||||
case 0.20:
|
||||
return "差";
|
||||
case 0.50:
|
||||
return "中";
|
||||
case 0.80:
|
||||
return "良";
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
offsetCenter: [0, '-20%'],
|
||||
fontSize: 20,
|
||||
color: '#fff'
|
||||
},
|
||||
detail: {
|
||||
fontSize: 30,
|
||||
offsetCenter: [0, '0%'],
|
||||
valueAnimation: true,
|
||||
formatter: function (value) {
|
||||
return Math.round(value * 100) + '%';
|
||||
},
|
||||
color: 'auto'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: '西门子828D-1',
|
||||
value: 0.99,
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log("gauge loaded...");
|
||||
this.defaultOption = (this.option || this.defaultOption);
|
||||
},
|
||||
mounted() {
|
||||
this.initGauge(this.defaultOption);
|
||||
},
|
||||
methods: {
|
||||
initGauge(option) {
|
||||
if (!this.chartGauge) {
|
||||
this.chartGauge = echarts.init(this.$refs.vgauge);
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
// this.chartGauge.clear(); // 清除上一步历史,会使得变化很突兀
|
||||
this.chartGauge.setOption(option, true);
|
||||
});
|
||||
}
|
||||
},
|
||||
// watch:{
|
||||
// 'option.series.0.data': {
|
||||
// handler: function(newVal, oldVal) {
|
||||
// console.log(newVal, oldVal);
|
||||
// this.defaultOption.series[0].data = newVal;
|
||||
// // console.log(this.defaultOption);
|
||||
// this.initGauge(this.defaultOption);
|
||||
// },
|
||||
// deep: true
|
||||
// },
|
||||
// option: { // 复杂类型直接监听的是地址变化
|
||||
// handler: function(newVal, oldVal) {
|
||||
// console.log(newVal, oldVal);
|
||||
// },
|
||||
// deep: true
|
||||
// }
|
||||
// },
|
||||
destroyed() {
|
||||
this.chartGauge = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.gauge {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -0,0 +1,181 @@
|
||||
|
||||
<template>
|
||||
<div class="line" ref="vline"></div>
|
||||
</template>
|
||||
<script>
|
||||
var echarts = require("echarts");
|
||||
import { markRaw } from 'vue'
|
||||
export default {
|
||||
name: "Line",
|
||||
props: {
|
||||
option: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartLine: {
|
||||
chart: null
|
||||
},
|
||||
defaultOption: {
|
||||
title: {
|
||||
text: '产量折线图',
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: "#fff"
|
||||
},
|
||||
left: 20
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['工单1', '工单2', '工单3'],
|
||||
itemGap: 20, // 标签间距
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
// 自定义切换按钮,只能以 my 开头
|
||||
mySwitch: {
|
||||
show: true,
|
||||
title: '更多',
|
||||
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
|
||||
onclick: function () {
|
||||
alert('暂未实现!')
|
||||
}
|
||||
},
|
||||
dataView: { show: true, readOnly: false },
|
||||
magicType: { show: true, type: ['line', 'bar'] }
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false, // 坐标轴两边不留白
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
axisLine: { // 坐标轴
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
}
|
||||
},
|
||||
axisTick: { // 坐标轴刻度线
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '产量',
|
||||
position: 'left',
|
||||
alignTicks: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value} 次'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '工单1',
|
||||
type: 'line',
|
||||
// stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '工单2',
|
||||
type: 'line',
|
||||
// stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: '工单3',
|
||||
type: 'line',
|
||||
// stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log("line loaded...");
|
||||
this.defaultOption = this.option || this.defaultOption;
|
||||
},
|
||||
mounted() {
|
||||
this.initLine(this.defaultOption);
|
||||
},
|
||||
methods: {
|
||||
initLine(option) {
|
||||
// console.log(option);
|
||||
if (!this.chartLine.chart) {
|
||||
let chart = markRaw(echarts.init(this.$refs.vline));
|
||||
chart.setOption(option, true);
|
||||
this.chartLine.chart = chart;
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.chartLine.chart.setOption(option, true);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
this.chartLine.chart = null;
|
||||
// console.log("========line destroyed========");
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -0,0 +1,80 @@
|
||||
|
||||
<template>
|
||||
<div class="number">
|
||||
<dv-digital-flop :config="config" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
var echarts = require("echarts");
|
||||
let $chartBar;
|
||||
export default {
|
||||
name: "Number",
|
||||
props: {
|
||||
number: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 10000
|
||||
},
|
||||
unity: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
toFixed: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
toFormat: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
number: [this.number],
|
||||
content: '{nt} ',
|
||||
toFixed: this.toFixed
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.config.content += this.unity;
|
||||
if (this.toFormat) {
|
||||
this.config.formatter = this.formatter;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 千分位分隔符格式化
|
||||
formatter(number) {
|
||||
const numbers = number.toString().split('').reverse();
|
||||
const segs = [];
|
||||
while (numbers.length) segs.push(numbers.splice(0, 3).join(''));
|
||||
return segs.join(',').split('').reverse().join('');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
number: {
|
||||
handler(newVal, oldVal) {
|
||||
this.config.number = [newVal];
|
||||
this.config = {...this.config}; // 解决dataV组件视图不更新问题
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.number {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 7.7 KiB |
@ -0,0 +1,297 @@
|
||||
.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;
|
||||
|
||||
.title {
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
|
||||
.chart {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&::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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.oee {
|
||||
height: 250px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.machine {
|
||||
height: 150px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
|
||||
.status-item {
|
||||
flex: 1;
|
||||
|
||||
.tagbox {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
|
||||
.taglist {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.tag {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 5px 0;
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
flex: 1;
|
||||
|
||||
.item {
|
||||
margin: 5px;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.target {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 10px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.devicebox {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 10px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
|
||||
.output {
|
||||
margin-top: 10px;
|
||||
padding: 10px 0;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
|
||||
.statbox {
|
||||
height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.device {
|
||||
font-size: 20px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.name {
|
||||
margin-left: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-info {
|
||||
flex: 3;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.digital {
|
||||
flex: 1;
|
||||
.head {
|
||||
margin-top: 30px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
@ -0,0 +1,62 @@
|
||||
|
||||
<template>
|
||||
<div class="test">
|
||||
<Gauge :option="machineinfo" ref="vgauge"></Gauge>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Gauge from "@/components/echarts/Gauge.vue";
|
||||
import { MachineInfo, WorkData, WeekProcess } from "./chart-options";
|
||||
export default {
|
||||
components: {
|
||||
Gauge,
|
||||
// Bar,
|
||||
// Line,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
machineinfo: MachineInfo
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.$refs.vgauge);
|
||||
console.log("数据测试...");
|
||||
this.onLoading();
|
||||
window.addEventListener('beforeunload', this.clearTimer); // 监听页面刷新或关闭
|
||||
},
|
||||
methods: {
|
||||
getMachineInfo(){
|
||||
this.machineinfo = this.base.deepClone(MachineInfo);
|
||||
},
|
||||
onLoading() {
|
||||
this.timer = setInterval(() => {
|
||||
// this.machineinfo.series[0].data[0].value += 0.01;
|
||||
this.getMachineInfo();
|
||||
console.log(123456);
|
||||
}, 10000);
|
||||
},
|
||||
clearTimer() { //清除定时器
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.timer && this.clearTimer();
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('beforeunload', this.clearTimer) // 卸载监听事件
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
// vue3 改写dv-loading样式
|
||||
.test {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue