数据总看板添加,功能为测试功能

This commit is contained in:
2024-05-16 17:31:14 +08:00
parent b6313d085d
commit 11dd405159
11 changed files with 1024 additions and 42 deletions

View File

@@ -76,3 +76,12 @@ export function changeSort(data) {
params: data
})
}
export function getDataBySql(data) {
return request({
url: '/mes/sql/getData',
method: 'post',
data: data,
})
}

View File

@@ -0,0 +1,70 @@
<template>
<div class="box-full">
<dv-loading v-if="loading">加载中~</dv-loading>
<dv-border-box-7 v-else backgroundColor="rgba(255, 255, 255, 0.1)">
<dv-border-box-6 :color="['#E27878', '#ce4040']" backgroundColor="rgba(226, 120, 120, 0.1)" style="height: 33%;">
<div class="number-box">
<span class="text-t2 font-size3">{{countNumConfig.num1.title}}</span>
<dv-digital-flop :config="countNumConfig.num1" style="width:200px;height:50px;" />
</div>
</dv-border-box-6>
<dv-border-box-6 :color="['#44EBEA', '#27e2eb']" backgroundColor="rgba(68, 235, 234, 0.1)" style="height: 33%;">
<div class="number-box">
<span class="text-t2 font-size3">{{countNumConfig.num2.title}}</span>
<dv-digital-flop :config="countNumConfig.num2" style="width:200px;height:50px;" />
</div>
</dv-border-box-6>
<dv-border-box-6 :color="['#EFBB65', '#efb339']" backgroundColor="rgba(239, 187, 101, 0.1)" style="height: 33%;">
<div class="number-box">
<span class="text-t2 font-size3">{{countNumConfig.num3.title}}</span>
<dv-digital-flop :config="countNumConfig.num3" style="width:200px;height:50px;" />
</div>
</dv-border-box-6>
</dv-border-box-7>
</div>
</template>
<script>
import * as ChartApi from '@/api/business/demo'
export default {
data() {
return {
loading:false,
// 统计数据配置
countNumConfig: {
num1: {
title: '库存箱数',
number: [100],
content: '{nt}箱',
},
num2: {
title: '库存零件数',
number: [110],
content: '{nt}个'
},
num3: {
title: '零件种类',
number: [120],
content: '{nt}种'
},
},
}
},
created() {
this.init();
},
methods: {
init() {
// const data = {
// sql:"select count(*) from wm_goods_now_production"
// }
// ChartApi.getDataBySql(data).then(res=>{
// console.log(res);
// })
}
},
}
</script>
<style>
</style>

View File

@@ -0,0 +1,63 @@
<template>
<div class="box-full">
<v-charts :loading="loading" :option="option" />
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
// 统计数据配置
option: {
darkMode: true,
title: {
text: '出库入库统计(日)',
textStyle: {
color: '#f4f6f9'
}
},
tooltip: {
trigger: 'axis',
},
// legend: {
// data: ['入库', '出库']
// },
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: '入库',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '出库',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
}, ]
}
}
},
created() {
this.init();
},
methods: {
init() {
}
},
}
</script>
<style>
</style>

View File

@@ -0,0 +1,60 @@
<template>
<div class="box-full">
<dv-loading v-if="loading">加载中~</dv-loading>
<dv-scroll-ranking-board :config="config" />
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
// 统计数据配置
config: {
data: [
{
name: '周口',
value: 55
},
{
name: '南阳',
value: 120
},
{
name: '西峡',
value: 78
},
{
name: '驻马店',
value: 66
},
{
name: '新乡',
value: 80
},
{
name: '信阳',
value: 45
},
{
name: '漯河',
value: 29
}],
unit: '个'
},
}
},
created() {
this.init();
},
methods: {
init() {
}
},
}
</script>
<style>
</style>

View File

@@ -0,0 +1,64 @@
<template>
<div class="box-full">
<v-charts :loading="loading" :option="option" />
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
// 统计数据配置
option: {
darkMode: true,
title: {
text: '出库入库统计(月)',
textStyle: {
color: '#f4f6f9'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// legend: {
// data: ['入库', '出库']
// },
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
name:'入库'
},
{
data: [20, 100, 110, 180, 170, 100, 30],
type: 'bar',
name:'出库'
}]
}
}
},
created() {
this.init();
},
methods: {
init() {
}
},
}
</script>
<style>
</style>

View File

@@ -0,0 +1,50 @@
<template>
<div class="box-full">
<dv-loading v-if="loading">加载中~</dv-loading>
<dv-scroll-board :config="config" />
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
// 统计数据配置
config: {
header: ['批次号', '描述', '时间'],
data: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
],
},
}
},
created() {
this.init();
},
methods: {
init() {
this.config = {
header: ['批次号', '描述', '时间'],
data: [
['行1列1', '行1列2', '行1列3'],
],
}
}
},
}
</script>
<style>
</style>

View File

@@ -0,0 +1,58 @@
<template>
<div class="box-full">
<v-charts :loading="loading" :option="option" />
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
// 统计数据配置
option: {
darkMode: true,
title: {
text: '仓库零件分布',
textStyle: {
color: '#f4f6f9'
}
},
tooltip: {
trigger: 'item'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '8104' },
{ value: 735, name: '4100' },
{ value: 580, name: '111' },
{ value: 484, name: '2222' },
{ value: 300, name: '333' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
}
}
},
created() {
this.init();
},
methods: {
init() {}
},
}
</script>
<style>
</style>

View File

@@ -0,0 +1,414 @@
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory);
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'));
} else {
// Browser globals
factory({}, root.echarts);
}
}(this, function (exports, echarts) {
var log = function (msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg);
}
};
if (!echarts) {
log('ECharts is not Loaded');
return;
}
echarts.registerTheme('customed', {
"color": [
"#44a9eb",
"#2d9bf8",
"#44ebea",
"#efbb65",
"#8fb2c9",
"#e27878",
"#fc8452",
"#9a60b4",
"#ea7ccc"
],
"backgroundColor": "#121f2a",
"textStyle": {},
"title": {
"textStyle": {
"color": "#ffffff"
},
"subtextStyle": {
"color": "#f4f6f9"
}
},
"line": {
"itemStyle": {
"borderWidth": 1
},
"lineStyle": {
"width": 2
},
"symbolSize": 4,
"symbol": "emptyCircle",
"smooth": false
},
"radar": {
"itemStyle": {
"borderWidth": 1
},
"lineStyle": {
"width": 2
},
"symbolSize": 4,
"symbol": "emptyCircle",
"smooth": false
},
"bar": {
"itemStyle": {
"barBorderWidth": "0",
"barBorderColor": "#f4f6f9"
}
},
"pie": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#f4f6f9"
}
},
"scatter": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#f4f6f9"
}
},
"boxplot": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#f4f6f9"
}
},
"parallel": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#f4f6f9"
}
},
"sankey": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#f4f6f9"
}
},
"funnel": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#f4f6f9"
}
},
"gauge": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#f4f6f9"
}
},
"candlestick": {
"itemStyle": {
"color": "#eb5454",
"color0": "#47b262",
"borderColor": "#eb5454",
"borderColor0": "#47b262",
"borderWidth": 1
}
},
"graph": {
"itemStyle": {
"borderWidth": "0",
"borderColor": "#f4f6f9"
},
"lineStyle": {
"width": 1,
"color": "#aaa"
},
"symbolSize": 4,
"symbol": "emptyCircle",
"smooth": false,
"color": [
"#44a9eb",
"#2d9bf8",
"#44ebea",
"#efbb65",
"#8fb2c9",
"#e27878",
"#fc8452",
"#9a60b4",
"#ea7ccc"
],
"label": {
"color": "#f4f6f9"
}
},
"map": {
"itemStyle": {
"areaColor": "#eee",
"borderColor": "#444",
"borderWidth": 0.5
},
"label": {
"color": "#000"
},
"emphasis": {
"itemStyle": {
"areaColor": "rgba(255,215,0,0.8)",
"borderColor": "#444",
"borderWidth": 1
},
"label": {
"color": "rgb(100,0,0)"
}
}
},
"geo": {
"itemStyle": {
"areaColor": "#eee",
"borderColor": "#444",
"borderWidth": 0.5
},
"label": {
"color": "#000"
},
"emphasis": {
"itemStyle": {
"areaColor": "rgba(255,215,0,0.8)",
"borderColor": "#444",
"borderWidth": 1
},
"label": {
"color": "rgb(100,0,0)"
}
}
},
"categoryAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#8ca3b6"
}
},
"axisTick": {
"show": true,
"lineStyle": {
"color": "#8ca3b6"
}
},
"axisLabel": {
"show": true,
"color": "#8ca3b6"
},
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#E0E6F1"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.2)",
"rgba(210,219,238,0.2)"
]
}
}
},
"valueAxis": {
"axisLine": {
"show": false,
"lineStyle": {
"color": "#6E7079"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#6E7079"
}
},
"axisLabel": {
"show": true,
"color": "#8ca3b6"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#8ca3b6"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.2)",
"rgba(210,219,238,0.2)"
]
}
}
},
"logAxis": {
"axisLine": {
"show": false,
"lineStyle": {
"color": "#6E7079"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#6E7079"
}
},
"axisLabel": {
"show": true,
"color": "#8ca3b6"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#8ca3b6"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.2)",
"rgba(210,219,238,0.2)"
]
}
}
},
"timeAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#8ca3b6"
}
},
"axisTick": {
"show": true,
"lineStyle": {
"color": "#8ca3b6"
}
},
"axisLabel": {
"show": true,
"color": "#8ca3b6"
},
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#E0E6F1"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.2)",
"rgba(210,219,238,0.2)"
]
}
}
},
"toolbox": {
"iconStyle": {
"borderColor": "#999"
},
"emphasis": {
"iconStyle": {
"borderColor": "#666"
}
}
},
"legend": {
"textStyle": {
"color": "#f4f6f9"
}
},
"tooltip": {
"axisPointer": {
"lineStyle": {
"color": "#ccc",
"width": "1"
},
"crossStyle": {
"color": "#ccc",
"width": "1"
}
}
},
"timeline": {
"lineStyle": {
"color": "#DAE1F5",
"width": 2
},
"itemStyle": {
"color": "#A4B1D7",
"borderWidth": "1"
},
"controlStyle": {
"color": "#A4B1D7",
"borderColor": "#A4B1D7",
"borderWidth": 1
},
"checkpointStyle": {
"color": "#316bf3",
"borderColor": "fff"
},
"label": {
"color": "#A4B1D7"
},
"emphasis": {
"itemStyle": {
"color": "#FFF"
},
"controlStyle": {
"color": "#A4B1D7",
"borderColor": "#A4B1D7",
"borderWidth": 1
},
"label": {
"color": "#A4B1D7"
}
}
},
"visualMap": {
"color": [
"#bf444c",
"#d88273",
"#f6efa6"
]
},
"dataZoom": {
"handleSize": "undefined%",
"textStyle": {}
},
"markPoint": {
"label": {
"color": "#f4f6f9"
},
"emphasis": {
"label": {
"color": "#f4f6f9"
}
}
}
});
}));

View File

@@ -0,0 +1,165 @@
{
"version": 1,
"themeName": "customed",
"theme": {
"seriesCnt": 3,
"backgroundColor": "#121f2a",
"titleColor": "#ffffff",
"subtitleColor": "#f4f6f9",
"textColorShow": false,
"textColor": "#333",
"markTextColor": "#f4f6f9",
"color": [
"#44a9eb",
"#2d9bf8",
"#44ebea",
"#efbb65",
"#8fb2c9",
"#e27878",
"#fc8452",
"#9a60b4",
"#ea7ccc"
],
"borderColor": "#f4f6f9",
"borderWidth": "0",
"visualMapColor": [
"#bf444c",
"#d88273",
"#f6efa6"
],
"legendTextColor": "#f4f6f9",
"kColor": "#eb5454",
"kColor0": "#47b262",
"kBorderColor": "#eb5454",
"kBorderColor0": "#47b262",
"kBorderWidth": 1,
"lineWidth": 2,
"symbolSize": 4,
"symbol": "emptyCircle",
"symbolBorderWidth": 1,
"lineSmooth": false,
"graphLineWidth": 1,
"graphLineColor": "#aaa",
"mapLabelColor": "#000",
"mapLabelColorE": "rgb(100,0,0)",
"mapBorderColor": "#444",
"mapBorderColorE": "#444",
"mapBorderWidth": 0.5,
"mapBorderWidthE": 1,
"mapAreaColor": "#eee",
"mapAreaColorE": "rgba(255,215,0,0.8)",
"axes": [
{
"type": "all",
"name": "通用坐标轴",
"axisLineShow": true,
"axisLineColor": "#6E7079",
"axisTickShow": true,
"axisTickColor": "#6E7079",
"axisLabelShow": true,
"axisLabelColor": "#6E7079",
"splitLineShow": true,
"splitLineColor": [
"#E0E6F1"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.2)",
"rgba(210,219,238,0.2)"
]
},
{
"type": "category",
"name": "类目坐标轴",
"axisLineShow": true,
"axisLineColor": "#8ca3b6",
"axisTickShow": true,
"axisTickColor": "#8ca3b6",
"axisLabelShow": true,
"axisLabelColor": "#8ca3b6",
"splitLineShow": false,
"splitLineColor": [
"#E0E6F1"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.2)",
"rgba(210,219,238,0.2)"
]
},
{
"type": "value",
"name": "数值坐标轴",
"axisLineShow": false,
"axisLineColor": "#6E7079",
"axisTickShow": false,
"axisTickColor": "#6E7079",
"axisLabelShow": true,
"axisLabelColor": "#8ca3b6",
"splitLineShow": true,
"splitLineColor": [
"#8ca3b6"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.2)",
"rgba(210,219,238,0.2)"
]
},
{
"type": "log",
"name": "对数坐标轴",
"axisLineShow": false,
"axisLineColor": "#6E7079",
"axisTickShow": false,
"axisTickColor": "#6E7079",
"axisLabelShow": true,
"axisLabelColor": "#8ca3b6",
"splitLineShow": true,
"splitLineColor": [
"#8ca3b6"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.2)",
"rgba(210,219,238,0.2)"
]
},
{
"type": "time",
"name": "时间坐标轴",
"axisLineShow": true,
"axisLineColor": "#8ca3b6",
"axisTickShow": true,
"axisTickColor": "#8ca3b6",
"axisLabelShow": true,
"axisLabelColor": "#8ca3b6",
"splitLineShow": false,
"splitLineColor": [
"#E0E6F1"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.2)",
"rgba(210,219,238,0.2)"
]
}
],
"axisSeperateSetting": true,
"toolboxColor": "#999",
"toolboxEmphasisColor": "#666",
"tooltipAxisColor": "#ccc",
"tooltipAxisWidth": "1",
"timelineLineColor": "#DAE1F5",
"timelineLineWidth": 2,
"timelineItemColor": "#A4B1D7",
"timelineItemColorE": "#FFF",
"timelineCheckColor": "#316bf3",
"timelineCheckBorderColor": "fff",
"timelineItemBorderWidth": "1",
"timelineControlColor": "#A4B1D7",
"timelineControlBorderColor": "#A4B1D7",
"timelineControlBorderWidth": 1,
"timelineLabelColor": "#A4B1D7"
}
}

View File

@@ -1,6 +1,10 @@
.border {
border: 1px solid #0055ff;
}
.box-full{
width: 100%;
height: 100%;
}
/* 主背景框 */
.container{
margin: 0;
@@ -36,13 +40,33 @@
}
/* 文字颜色 */
.text-t1{
font-weight: bold;
color: #ffffff;
}
.text-t2{
font-weight: bold;
color: #f4f6f9;
}
.text-t3{
color: #8CA386;
font-weight: bold;
color: #8CA3B6;
}
/* 文字大小 */
.font-size1{
font-size: 48px;
}
.font-size2{
font-size: 36px;
}
.font-size3{
font-size: 22px;
}
.font-size4{
/* 小标题常会用 */
font-size: 18px;
}
.font-size5{
font-size: 14px;
}
/* 主要颜色 */
.main-color{
@@ -77,14 +101,24 @@
.chart-out-box {
width: 100%;
height: 340px;
padding: 10px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.chart-box1 {
width: 480px;
height: 380px;
.chart-box {
width: 100%;
height: 100%;
background-color: ;
}
.number-box{
width: 100%;
height: 33%;
height: 100%;
padding: 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

View File

@@ -1,6 +1,6 @@
<template>
<div class="container main-background-color">
<dv-border-box-11 title="仓库数据总看板">
<dv-border-box-11 :title="title">
<div class="header-out-box">
<!-- <dv-decoration-1 style="width:200px;height:50px;" /> -->
</div>
@@ -8,39 +8,39 @@
<!-- 第一层 -->
<el-row type="flex" justify="space-around">
<el-col :span="8">
<dv-border-box-13 class="chart-out-box">
<Chart1></Chart1>
</dv-border-box-13>
</el-col>
<el-col :span="8">
<dv-border-box-8 class="chart-out-box">
<dv-border-box-7>
<dv-border-box-10 class="number-box">dv-border-box-9</dv-border-box-10>
<dv-border-box-10 class="number-box">dv-border-box-9</dv-border-box-10>
<dv-border-box-10 class="number-box">dv-border-box-9</dv-border-box-10>
</dv-border-box-7>
<TheCountNumBox></TheCountNumBox>
</dv-border-box-8>
</el-col>
<el-col :span="8">
<dv-border-box-13 class="chart-out-box">
<span class="text-t2 font-size4">各零件库存</span>
<Chart3></Chart3>
</dv-border-box-13>
</el-col>
</el-row>
<!-- 第二层 -->
<el-row type="flex" justify="space-around">
<el-col :span="8">
<dv-border-box-13 class="chart-out-box">
<dv-border-box-13 class="chart-out-box ">
<Chart4></Chart4>
</dv-border-box-13>
</el-col>
<el-col :span="8">
<dv-border-box-13 class="chart-out-box ">
<Chart5></Chart5>
</dv-border-box-13>
</el-col>
<el-col :span="8">
<dv-border-box-13 class="chart-out-box">
</dv-border-box-13>
</el-col>
<el-col :span="8">
<dv-border-box-13 class="chart-out-box">
<span class="text-t2 font-size4">近期入库</span>
<Chart6></Chart6>
</dv-border-box-13>
</el-col>
</el-row>
@@ -57,32 +57,27 @@
</template>
<script>
import TheCountNumBox from './components/TheCountNumBox/index.vue';
import Chart1 from './components/饼图'
import Chart3 from './components/排序轮播'
import Chart4 from './components/折线图'
import Chart5 from './components/柱状图'
import Chart6 from './components/轮播列表'
export default {
name: 'PatchSearch1',
components: {
Chart1,
Chart3,
Chart4,
Chart5,
Chart6,
TheCountNumBox,
},
data() {
return {
loading1: false,
title: '看板标题',
options1: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
}
title: '仓库数据总看板',
}
},
created() {},