堡座demo
This commit is contained in:
parent
7f96d4c43c
commit
8142e2ebcd
File diff suppressed because it is too large
Load Diff
|
|
@ -10,7 +10,7 @@
|
|||
"dependencies": {
|
||||
"@jiaminghi/data-view": "^2.4.4",
|
||||
"axios": "^1.6.2",
|
||||
"echarts": "^5.5.0",
|
||||
"echarts": "^5.5.1",
|
||||
"less": "^3.9.0",
|
||||
"less-loader": "^5.0.0",
|
||||
"vue": "^2.6.10",
|
||||
|
|
|
|||
|
|
@ -5,7 +5,12 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import datav from './components/datav/index.vue'
|
||||
|
||||
//永盛版本
|
||||
//import datav from './components/datav/index.vue'
|
||||
|
||||
//堡座demo版本
|
||||
import datav from './components/baozuo-demo/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
|
|
|
|||
10
src/api.js
10
src/api.js
|
|
@ -4,8 +4,14 @@ const api = {
|
|||
// 定义API接口地址
|
||||
// baseURL: process.env.NODE_ENV === 'production' ? '/api/' : 'http://localhost:3000/',
|
||||
// GET请求示例
|
||||
baseURL: 'http://39.99.224.120:9196',
|
||||
baseURL2: 'http://123.207.37.67:9001',
|
||||
baseURL: 'http://39.101.165.228:9001',
|
||||
baseURL2: 'http://39.101.165.228:9001',
|
||||
|
||||
//永盛
|
||||
_baseURL: 'http://123.207.37.67:9001',
|
||||
_baseURL2: 'http://123.207.37.67:9001',
|
||||
|
||||
|
||||
get (url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
axios({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,125 @@
|
|||
<template>
|
||||
<div class="bottom-charts">
|
||||
<div class="bc-chart-item">
|
||||
<div class="bcci-header">机芯派工单执行进度</div>
|
||||
<dv-scroll-board :config="config1" style="height:90%;margin-left: 2%;width:96%" />
|
||||
</div>
|
||||
<dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" />
|
||||
|
||||
<div class="bc-chart-item">
|
||||
<div class="bcci-header">盖板派工单执行进度</div>
|
||||
<dv-scroll-board :config="config2" style="height:90%;margin-left: 2%;width:96%" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LabelTag from './LabelTag'
|
||||
|
||||
export default {
|
||||
name: 'BottomCharts',
|
||||
components: {
|
||||
LabelTag
|
||||
},
|
||||
data() {
|
||||
function generateRandomData(N, title) {
|
||||
const data = [];
|
||||
let date = new Date(); // 从今天的日期开始
|
||||
for (let i = 1; i <= N; i++) {
|
||||
// 格式化日期为'YYYY-MM-DD'
|
||||
const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||||
const formattedDate2 = `${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, '0')}${String(date.getDate()).padStart(2, '0')}`;
|
||||
|
||||
// 订单量随机在20到200之间，步长为10
|
||||
const orderQuantity = Math.floor(Math.random() * 19 + 2) * 10;
|
||||
|
||||
// 完成数量随机但不超过订单量
|
||||
const completedQuantity = Math.floor(Math.random() * (orderQuantity / 10)) * 10;
|
||||
|
||||
// 计算完成百分比
|
||||
const completionRate = ((completedQuantity / orderQuantity) * 100).toFixed(2) + '%';
|
||||
|
||||
// 创建新的数据项
|
||||
const newDataItem = [
|
||||
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||||
title, // 固定值
|
||||
formattedDate, // 日期
|
||||
orderQuantity, // 订单量
|
||||
completionRate, // 完成率
|
||||
completedQuantity // 完成数量
|
||||
];
|
||||
|
||||
data.push(newDataItem);
|
||||
|
||||
// 更新日期至下一天
|
||||
date.setDate(date.getDate() + 1);
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
config1: {
|
||||
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '剩下数量'],
|
||||
data: generateRandomData(60, 'U1机芯'),
|
||||
index: true,
|
||||
columnWidth: [50],
|
||||
align: ['center']
|
||||
},
|
||||
|
||||
config2: {
|
||||
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '剩下数量'],
|
||||
data: generateRandomData(30, 'U1盖板'),
|
||||
index: true,
|
||||
columnWidth: [50],
|
||||
align: ['center']
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.bottom-charts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.bc-chart-item {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bcci-header {
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.dv-active-ring-chart {
|
||||
height: calc(~"100% - 80px");
|
||||
}
|
||||
|
||||
.label-tag {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.active-ring-name {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.decoration-1,
|
||||
.decoration-2,
|
||||
.decoration-3 {
|
||||
display: absolute;
|
||||
left: 0%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<template>
|
||||
<div class="center-cmp">
|
||||
<div class="cc-header" v-if="false">
|
||||
<dv-decoration-1 style="width:200px;height:50px;" />
|
||||
</div>
|
||||
|
||||
<div class="cc-details">
|
||||
<div>本月总产量</div>
|
||||
<div class="card">1</div>
|
||||
<div class="card">1</div>
|
||||
<div class="card">3</div>
|
||||
<div class="card">7</div>
|
||||
</div>
|
||||
|
||||
<div class="cc-main-container">
|
||||
<div class="ccmc-left">
|
||||
<div class="station-info">
|
||||
本月派工数<span>1120</span>
|
||||
</div>
|
||||
<div class="station-info">
|
||||
本月未完成派工数<span>600</span>
|
||||
</div>
|
||||
<div class="station-info">
|
||||
本月派工完成率<span>60%</span>
|
||||
</div>
|
||||
<div class="station-info">
|
||||
保养台数<span>32/40</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dv-active-ring-chart class="ccmc-middle" :config="config" />
|
||||
|
||||
<div class="ccmc-right">
|
||||
<div class="station-info">
|
||||
<span>60</span>今天产量
|
||||
</div>
|
||||
<div class="station-info">
|
||||
<span>20%</span>直通率
|
||||
</div>
|
||||
<div class="station-info">
|
||||
<span>4</span>今日不良数
|
||||
</div>
|
||||
<div class="station-info">
|
||||
<span>5</span>返工数
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LabelTag :config="labelConfig" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LabelTag from './LabelTag'
|
||||
|
||||
export default {
|
||||
name: 'CenterCmp',
|
||||
components: {
|
||||
LabelTag
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
config: {
|
||||
data: [
|
||||
{
|
||||
name: '机芯缺陷占比',
|
||||
value: 42
|
||||
},
|
||||
{
|
||||
name: '盖板缺陷占比',
|
||||
value: 58
|
||||
}
|
||||
],
|
||||
color: ['#00baff', '#3de7c9', '#ffc530', '#469f4b'],
|
||||
lineWidth: 30,
|
||||
radius: '55%',
|
||||
activeRadius: '60%'
|
||||
},
|
||||
|
||||
labelConfig: {
|
||||
data: ['机芯缺陷占比', '盖板缺陷占比' ]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.center-cmp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.cc-header {
|
||||
height: 70px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.cc-details {
|
||||
height: 120px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 32px;
|
||||
align-items: center;
|
||||
|
||||
.card {
|
||||
background-color: rgba(4,49,128,.6);
|
||||
color: #08e5ff;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
font-size: 45px;
|
||||
font-weight: bold;
|
||||
line-height: 70px;
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.cc-main-container {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
.ccmc-middle {
|
||||
width: 50%;
|
||||
height: 90%;
|
||||
|
||||
.active-ring-name {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ccmc-left, .ccmc-right {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
|
||||
span {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.station-info {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ccmc-left {
|
||||
align-items: flex-end;
|
||||
|
||||
span {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.ccmc-right {
|
||||
align-items: flex-start;
|
||||
|
||||
span {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-tag {
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: 30px;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<div class="label-tag">
|
||||
<template v-if="mergedConfig">
|
||||
<div class="label-item" v-for="(label, i) in mergedConfig.data" :key="label">
|
||||
{{ label }} <div :style="`background-color: ${mergedConfig.colors[i % mergedConfig.colors.length]};`" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
export default {
|
||||
name: 'LabelTag',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ([])
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
defaultConfig: {
|
||||
/**
|
||||
* @description Label data
|
||||
* @type {Array<String>}
|
||||
* @default data = []
|
||||
* @example data = ['label1', 'label2']
|
||||
*/
|
||||
data: [],
|
||||
colors: ['#00baff', '#3de7c9', '#ffc530', '#469f4b']
|
||||
},
|
||||
|
||||
mergedConfig: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config () {
|
||||
const { mergeConfig } = this
|
||||
|
||||
mergeConfig()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
mergeConfig () {
|
||||
let { config, defaultConfig } = this
|
||||
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { mergeConfig } = this
|
||||
|
||||
mergeConfig()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.label-tag {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.label-item {
|
||||
margin: 5px;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<template>
|
||||
<div id="rose-chart">
|
||||
<div :id="pieId" class="pie-chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
name: 'RoseChart',
|
||||
props: {
|
||||
pieId: {
|
||||
type: String,
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createData() {
|
||||
|
||||
var myChart = echarts.init(document.getElementById(this.pieId));
|
||||
console.log(myChart)
|
||||
this.option = {
|
||||
title: {
|
||||
text: '近一周产量趋势'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['机芯1线', '机芯2线', '盖板线', '整机线']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['12-06', '12-07', '12-08', '12-09', '12-10', '12-11', '12-12']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '机芯1线',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '机芯2线',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [150, 142, 111, 114, 120, 120, 110]
|
||||
},
|
||||
{
|
||||
name: '盖板线',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [130, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: '整机线',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [133, 162, 191, 134, 130, 230, 310]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
// randomExtend (minNum, maxNum) {
|
||||
// if (arguments.length === 1) {
|
||||
// return parseInt(Math.random() * minNum + 1, 10)
|
||||
// } else {
|
||||
// return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
|
||||
// }
|
||||
// }
|
||||
},
|
||||
mounted() {
|
||||
const { createData } = this
|
||||
|
||||
createData()
|
||||
|
||||
// setInterval(createData, 100000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#rose-chart {
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
|
||||
.pie-chart-container {
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<div id="rose-chart2">
|
||||
<div :id="pieId" class="pie-chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
name: 'RoseChart',
|
||||
props: {
|
||||
pieId: {
|
||||
type: String,
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createData() {
|
||||
|
||||
var myChart = echarts.init(document.getElementById(this.pieId));
|
||||
console.log(myChart)
|
||||
this.option = {
|
||||
title: {
|
||||
text: '月生产情况',
|
||||
subtext: '完成率'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['机芯1线', '机芯2线', '盖板线']
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
dataView: { show: true, readOnly: false },
|
||||
magicType: { show: true, type: ['line', 'bar'] },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true }
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
// prettier-ignore
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '机芯1线',
|
||||
type: 'bar',
|
||||
data: [
|
||||
80, 85, 98, 95, 87, 75, 65, 68, 69, 40, 82, 83
|
||||
],
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [{ type: 'average', name: 'Avg' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '机芯2线',
|
||||
type: 'bar',
|
||||
data: [
|
||||
70, 75, 88, 85, 97, 85, 75, 78, 59, 80, 82, 63
|
||||
],
|
||||
markPoint: {
|
||||
data: [
|
||||
{ name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
|
||||
{ name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [{ type: 'average', name: 'Avg' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '盖板线',
|
||||
type: 'bar',
|
||||
data: [
|
||||
80, 85, 78, 75, 67, 45, 55, 68, 49, 50, 72, 93
|
||||
],
|
||||
markPoint: {
|
||||
data: [
|
||||
{ name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
|
||||
{ name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [{ type: 'average', name: 'Avg' }]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
// randomExtend (minNum, maxNum) {
|
||||
// if (arguments.length === 1) {
|
||||
// return parseInt(Math.random() * minNum + 1, 10)
|
||||
// } else {
|
||||
// return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
|
||||
// }
|
||||
// }
|
||||
},
|
||||
mounted() {
|
||||
const { createData } = this
|
||||
|
||||
createData()
|
||||
|
||||
// setInterval(createData, 100000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#rose-chart2 {
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
|
||||
.pie-chart-container {
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<div class="right-chart-1">
|
||||
<div class="rc1-header">备料计划</div>
|
||||
<dv-scroll-board :config="config" style="height:90%;margin-left: 2%;width:96%" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RightChart1',
|
||||
data () {
|
||||
function generateRandomData(N, title) {
|
||||
const data = [];
|
||||
let date = new Date(); // 从今天的日期开始
|
||||
for (let i = 1; i <= N; i++) {
|
||||
// 格式化日期为'YYYY-MM-DD'
|
||||
const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||||
const formattedDate2 = `${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, '0')}${String(date.getDate()).padStart(2, '0')}`;
|
||||
|
||||
// 订单量随机在20到200之间，步长为10
|
||||
const orderQuantity = Math.floor(Math.random() * 19 + 2) * 10;
|
||||
|
||||
// 完成数量随机但不超过订单量
|
||||
const completedQuantity = Math.floor(Math.random() * (orderQuantity / 10)) * 10;
|
||||
|
||||
|
||||
// 创建新的数据项
|
||||
const newDataItem = [
|
||||
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||||
title, // 固定值
|
||||
orderQuantity, // 订单量
|
||||
completedQuantity // 完成数量
|
||||
];
|
||||
|
||||
data.push(newDataItem);
|
||||
|
||||
// 更新日期至下一天
|
||||
date.setDate(date.getDate() + 1);
|
||||
}
|
||||
return data;
|
||||
}
|
||||
return {
|
||||
config: {
|
||||
header: ['工单号', '物料名称', '备料数', '欠数料'],
|
||||
data: generateRandomData(60, 'U1电源线压板'),
|
||||
index: true,
|
||||
columnWidth: [50],
|
||||
align: ['center']
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.right-chart-1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.rc1-header {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin-top: 2%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rc1-chart-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 30%;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.number {
|
||||
font-size: 34px;
|
||||
color: #096dd9;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
padding-bottom: 20px;
|
||||
padding-right: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
|
|
@ -0,0 +1,161 @@
|
|||
<template>
|
||||
<div id="data-view">
|
||||
<dv-full-screen-container>
|
||||
|
||||
|
||||
<top-header Name="堡座生产看板" style="height:5%;" />
|
||||
|
||||
|
||||
<dv-border-box-1 class="main-container" style="height: 50%;">
|
||||
|
||||
|
||||
<div class="rmc-top-container">
|
||||
|
||||
<dv-border-box-3 class="rmctc-left-container" style="height:100%" >
|
||||
<Left-Chart-1 :pieId="'leftchar1'" style="height:50%" />
|
||||
<Left-Chart-2 :pieId="'leftchar2'" style="height:40%;margin-top: 10%;" />
|
||||
</dv-border-box-3>
|
||||
<dv-border-box-3 class="rmctc-middle-container">
|
||||
|
||||
<Center-Cmp />
|
||||
|
||||
</dv-border-box-3>
|
||||
|
||||
<div class="rmctc-right-container">
|
||||
<dv-border-box-3 class="rmctc-chart-1">
|
||||
|
||||
<Right-Chart-1 />
|
||||
|
||||
</dv-border-box-3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</dv-border-box-1>
|
||||
|
||||
|
||||
<dv-border-box-4 class="rmc-bottom-container" style="height: 45%;">
|
||||
|
||||
<Bottom-Charts />
|
||||
|
||||
</dv-border-box-4>
|
||||
|
||||
</dv-full-screen-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topHeader from './topHeader'
|
||||
import LeftChart1 from './LeftChart1'
|
||||
import LeftChart2 from './LeftChart2'
|
||||
|
||||
import CenterCmp from './CenterCmp'
|
||||
|
||||
import RightChart1 from './RightChart1'
|
||||
|
||||
import BottomCharts from './BottomCharts'
|
||||
|
||||
export default {
|
||||
name: 'DataView',
|
||||
components: {
|
||||
topHeader,
|
||||
LeftChart1,
|
||||
LeftChart2,
|
||||
CenterCmp,
|
||||
RightChart1,
|
||||
BottomCharts
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#data-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #030409;
|
||||
color: #fff;
|
||||
|
||||
#dv-full-screen-container {
|
||||
background-image: url('./img/bg.png');
|
||||
background-size: 100% 100%;
|
||||
box-shadow: 0 0 3px blue;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
.mh-left {
|
||||
font-size: 20px;
|
||||
color: rgb(1, 134, 187);
|
||||
|
||||
a:visited {
|
||||
color: rgb(1, 134, 187);
|
||||
}
|
||||
}
|
||||
|
||||
.mh-middle {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.mh-left,
|
||||
.mh-right {
|
||||
width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-container {
|
||||
|
||||
|
||||
.border-box-content {
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.right-main-container {
|
||||
width: 75%;
|
||||
padding-left: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.rmc-top-container {
|
||||
height: 100%;
|
||||
width:100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.rmctc-left-container {
|
||||
width: 25%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.border-box-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.rmctc-middle-container {
|
||||
width: 50%;
|
||||
}
|
||||
.rmctc-right-container {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.rmc-bottom-container {
|
||||
height: 35%;
|
||||
|
||||
}
|
||||
|
||||
.rmctc-chart-1 {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<div id="top-header">
|
||||
<dv-decoration-8 class="header-left-decoration" />
|
||||
<dv-decoration-5 class="header-center-decoration" />
|
||||
<dv-decoration-8 class="header-right-decoration" :reverse="false" />
|
||||
<div class="center-title" :style="'font-size:'+$fontSize(0.3)+'px'">{{Name}}</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TopHeader',
|
||||
props: ['Name', 'Times']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#top-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
|
||||
.header-center-decoration {
|
||||
width: 40%;
|
||||
height: 0.6rem;
|
||||
}
|
||||
|
||||
.header-left-decoration, .header-right-decoration {
|
||||
width: 25%;
|
||||
height: 0.6rem;
|
||||
}
|
||||
|
||||
.center-title {
|
||||
position: absolute;
|
||||
// font-size: 30px;
|
||||
font-weight: bold;
|
||||
left: 50%;
|
||||
top: 0.15rem;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,13 +1,12 @@
|
|||
<template>
|
||||
<div id="rose-chart">
|
||||
<div class="rose-chart-title">---{{chartData?chartData.title:''}}---</div>
|
||||
<!-- <dv-charts :option="option" /> -->
|
||||
<div class="rose-chart-title">---{{chartData?chartData.title:''}}---</div>
|
||||
<div :id="pieId" class="pie-chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
name: 'RoseChart',
|
||||
props:{
|
||||
|
|
@ -25,8 +24,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
createData () {
|
||||
const { randomExtend } = this
|
||||
|
||||
|
||||
var myChart = echarts.init(document.getElementById(this.pieId));
|
||||
this.option = {
|
||||
|
||||
|
|
@ -67,21 +65,14 @@ export default {
|
|||
]
|
||||
};
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
// randomExtend (minNum, maxNum) {
|
||||
// if (arguments.length === 1) {
|
||||
// return parseInt(Math.random() * minNum + 1, 10)
|
||||
// } else {
|
||||
// return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
|
||||
// }
|
||||
// }
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log(this.pieId)
|
||||
const { createData } = this
|
||||
|
||||
createData()
|
||||
|
||||
// setInterval(createData, 100000)
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue