数据总看板添加,功能为测试功能
This commit is contained in:
@@ -76,3 +76,12 @@ export function changeSort(data) {
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function getDataBySql(data) {
|
||||
return request({
|
||||
url: '/mes/sql/getData',
|
||||
method: 'post',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}));
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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() {},
|
||||
|
||||
Reference in New Issue
Block a user