Compare commits
7 Commits
71bcd14c72
...
c600d14f8f
| Author | SHA1 | Date | |
|---|---|---|---|
| c600d14f8f | |||
| 8ad84a4d61 | |||
| 928258e509 | |||
| a12530b835 | |||
| b3db8dcae8 | |||
| 24a0857808 | |||
| e0cc022e34 |
@ -98,7 +98,7 @@ export default {
|
||||
return h(
|
||||
'el-button',
|
||||
{
|
||||
props: { type: 'text', size: 'mini' },
|
||||
props: { type: 'text' },
|
||||
on: {
|
||||
click: function () {
|
||||
console.log('inejctdata', _this.injectData);
|
||||
|
||||
@ -98,7 +98,7 @@ export default {
|
||||
return h(
|
||||
'el-button',
|
||||
{
|
||||
props: { type: 'text', size: 'mini' },
|
||||
props: { type: 'text' },
|
||||
on: {
|
||||
click: function () {
|
||||
console.log('inejctdata', _this.injectData);
|
||||
|
||||
@ -41,7 +41,7 @@ export default {
|
||||
opt.push([eq.equipmentName, eq.okQuantity, eq.nokQuantity]);
|
||||
});
|
||||
return {
|
||||
color: ['#8EF0AB', '#288AFF'],
|
||||
color: ['#288AFF', '#8EF0AB'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
@ -51,7 +51,7 @@ export default {
|
||||
legend: {
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
right: 0,
|
||||
right: 0
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
@ -90,13 +90,6 @@ export default {
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '不合格数量',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
stack: 's',
|
||||
data: opt.map((item) => item[2]),
|
||||
},
|
||||
{
|
||||
name: '合格数量',
|
||||
type: 'bar',
|
||||
@ -104,6 +97,13 @@ export default {
|
||||
stack: 's',
|
||||
data: opt.map((item) => item[1]),
|
||||
},
|
||||
{
|
||||
name: '不合格数量',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
stack: 's',
|
||||
data: opt.map((item) => item[2]),
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
v-model="activeName"
|
||||
:stretch="true"
|
||||
@tab-click="handleTabClick">
|
||||
<el-tab-pane label="数据列表" name="table">
|
||||
<el-tab-pane :label="'数据列表'" name="table">
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
@ -28,7 +28,7 @@
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun"></base-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="柱状图" name="graph">
|
||||
<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph">
|
||||
<div v-if="activeName == 'graph'" class="graph" style="height: 40vh; display: flex; flex-direction: column;">
|
||||
<div class="blue-title">各设备加工数量</div>
|
||||
<LineChart :list="list" />
|
||||
@ -373,8 +373,8 @@ export default {
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
padding-left: 8px !important;
|
||||
padding-right: 8px !important;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
line-height: 36px !important;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
@ -21,7 +21,14 @@ export default {
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
config: {
|
||||
handler(value) {
|
||||
if (value != null) this.setOption(value);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
@ -32,9 +39,11 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
console.log('thsi el', this.$el);
|
||||
if (!this.chart) this.chart = echarts.init(this.$el);
|
||||
this.chart.setOption(this.config);
|
||||
this.setOption(this.config);
|
||||
},
|
||||
setOption(option) {
|
||||
if (this.chart) this.chart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -6,25 +6,44 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<h1>设备产量时序图</h1>
|
||||
<!-- 搜索工作栏 -->
|
||||
<SearchBar
|
||||
:formConfigs="searchBarFormConfig"
|
||||
ref="search-bar"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
<div
|
||||
class="production-timegraph-container"
|
||||
style="background: #f2f4f9; flex: 1">
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
border-radius: 8px;
|
||||
">
|
||||
<div class="blue-title">生产节拍时序图</div>
|
||||
<!-- <h1>设备状态时序图</h1> -->
|
||||
<!-- 搜索工作栏 -->
|
||||
<SearchBar
|
||||
:formConfigs="searchBarFormConfig"
|
||||
ref="search-bar"
|
||||
:remove-blue="true"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
</el-row>
|
||||
|
||||
<div class="main-area">
|
||||
<div class="graphs" v-if="graphList.length">
|
||||
<div class="graph" v-for="(eq, index) in graphList" :key="eq.key">
|
||||
<h2 class="graph-title">{{ eq.key }}</h2>
|
||||
<LineChart
|
||||
:key="eq.key + '__linechart'"
|
||||
:config="getRealConfig(index)" />
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 16px 16px 24px;
|
||||
border-radius: 8px;
|
||||
">
|
||||
<div class="blue-title">设备产量时序图</div>
|
||||
|
||||
<div class="main-area">
|
||||
<div class="graphs" v-if="graphList.length">
|
||||
<LineChart :config="templateConfig" />
|
||||
</div>
|
||||
<div class="no-data-bg" v-else></div>
|
||||
</div>
|
||||
<h2 v-else>请添加设备</h2>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<base-dialog
|
||||
@ -58,6 +77,7 @@ export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
accumulators: new Map(),
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
@ -77,15 +97,16 @@ export default {
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间段',
|
||||
dateType: 'daterange', // datetimerange
|
||||
dateType: 'date', // datetimerange
|
||||
// format: 'yyyy-MM-dd HH:mm:ss',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
// valueFormat: 'timestamp',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始日期',
|
||||
endPlaceholder: '结束日期',
|
||||
defaultTime: ['00:00:00', '23:59:59'],
|
||||
// rangeSeparator: '-',
|
||||
// startPlaceholder: '开始日期',
|
||||
// endPlaceholder: '结束日期',
|
||||
// defaultTime: ['00:00:00', '23:59:59'],
|
||||
placeholder: '选择日期',
|
||||
param: 'recordTime',
|
||||
},
|
||||
{
|
||||
@ -99,9 +120,9 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '设备对比',
|
||||
btnName: '添加对比',
|
||||
name: 'compare',
|
||||
color: 'warning',
|
||||
color: 'primary',
|
||||
plain: true,
|
||||
},
|
||||
],
|
||||
@ -115,30 +136,47 @@ export default {
|
||||
eqList: [],
|
||||
graphList: [],
|
||||
templateConfig: {
|
||||
color: ['#283D68', '#FFB61F', '#4481FF', '#5AD8A6', '#E97466'],
|
||||
grid: {
|
||||
top: 88,
|
||||
left: 56,
|
||||
right: 56,
|
||||
bottom: 56,
|
||||
top: 48,
|
||||
left: 48,
|
||||
right: 24,
|
||||
bottom: 24,
|
||||
},
|
||||
legend: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
padding: 5,
|
||||
icon: 'roundRect',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
right: 12,
|
||||
padding: 6,
|
||||
itemWidth: 16,
|
||||
itemHeight: 8,
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
lineHeight: 14,
|
||||
fontSize: 12,
|
||||
lineHeight: 12,
|
||||
color: '#0007',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array(24)
|
||||
.fill(1)
|
||||
.map((item, index) => `${index}:00`),
|
||||
boundaryGap: true,
|
||||
axisTick: {
|
||||
// show: false,
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
color: '#0003',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#0007',
|
||||
},
|
||||
data: [],
|
||||
// data: Array(24)
|
||||
// .fill(1)
|
||||
// .map((item, index) => `${index}:00`),
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
@ -146,19 +184,41 @@ export default {
|
||||
nameLocation: 'end',
|
||||
nameTextStyle: {
|
||||
fontSize: 14,
|
||||
align: 'right',
|
||||
align: 'center',
|
||||
},
|
||||
nameGap: 26,
|
||||
max: function (value) {
|
||||
return value.max + Math.floor(value.max / 5);
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '产线1',
|
||||
data: Array(24)
|
||||
.fill(1)
|
||||
.map(() => Math.random() * 100),
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
},
|
||||
// {
|
||||
// name: '产线1',
|
||||
// data: Array(24)
|
||||
// .fill(1)
|
||||
// .map(() => Math.random() * 100),
|
||||
// type: 'line',
|
||||
// symbol: 'circle',
|
||||
// // smooth: true,
|
||||
// },
|
||||
// {
|
||||
// name: '产线2',
|
||||
// data: Array(24)
|
||||
// .fill(1)
|
||||
// .map(() => Math.random() * 100),
|
||||
// type: 'line',
|
||||
// symbol: 'circle',
|
||||
// // smooth: true,
|
||||
// },
|
||||
// {
|
||||
// name: '产线3',
|
||||
// data: Array(24)
|
||||
// .fill(1)
|
||||
// .map(() => Math.random() * 100),
|
||||
// type: 'line',
|
||||
// symbol: 'circle',
|
||||
// // smooth: true,
|
||||
// },
|
||||
],
|
||||
},
|
||||
};
|
||||
@ -176,7 +236,12 @@ export default {
|
||||
this.queryParams.lineId = payload.lineId || null;
|
||||
this.queryParams.sectionId = payload.sectionId || null;
|
||||
this.queryParams.equipmentId = payload.equipmentId || null;
|
||||
this.queryParams.recordTime = payload.recordTime || null;
|
||||
this.queryParams.recordTime = payload.recordTime
|
||||
? [
|
||||
payload.recordTime,
|
||||
payload.recordTime.replace('00:00:00', '23:59:59'),
|
||||
]
|
||||
: null;
|
||||
this.getList();
|
||||
break;
|
||||
case 'compare':
|
||||
@ -230,10 +295,41 @@ export default {
|
||||
// ];
|
||||
// eq2.key = 'SS2';
|
||||
// this.graphList = [eq1, eq2];
|
||||
console.log('graph list', this.graphList);
|
||||
|
||||
this.graphList.forEach(this.setSeries);
|
||||
} else {
|
||||
this.graphList = [];
|
||||
this.graphList.forEach(this.setSeries);
|
||||
}
|
||||
},
|
||||
|
||||
setSeries(eqArr) {
|
||||
if (eqArr.length == 0) {
|
||||
this.templateConfig.series = [];
|
||||
return;
|
||||
}
|
||||
|
||||
let isInit = false;
|
||||
if (this.accumulators.has(eqArr.key) == false) {
|
||||
this.accumulators.set(eqArr.key, 0);
|
||||
isInit = true;
|
||||
}
|
||||
|
||||
let accumulator = this.accumulators.get(eqArr.key);
|
||||
if ((accumulator && !isInit) || (accumulator == 0 && isInit == false)) {
|
||||
accumulator++;
|
||||
this.accumulators.set(eqArr.key, accumulator);
|
||||
}
|
||||
|
||||
this.templateConfig.series.push({
|
||||
name: eqArr.key + (accumulator == 0 ? '' : '-' + accumulator),
|
||||
// name: Math.random(),
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
data: this.getEquipmentQuantity(eqArr),
|
||||
});
|
||||
},
|
||||
|
||||
/** 获得设备产量 */
|
||||
getEquipmentQuantity(equipmentArr) {
|
||||
return equipmentArr.map((item) => item.totalQuantity);
|
||||
@ -246,19 +342,6 @@ export default {
|
||||
);
|
||||
},
|
||||
|
||||
getRealConfig(index) {
|
||||
// if (!this.graphList || this.graphList.length == 0) return;
|
||||
const config = JSON.parse(JSON.stringify(this.templateConfig));
|
||||
// config.legend.data = this.graphList[index].key;
|
||||
config.series[0].name = this.graphList[index]?.key;
|
||||
// console.log("this.graphList?.[index]", this.graphList?.[index]);
|
||||
config.series[0].data = this.getEquipmentQuantity(
|
||||
this.graphList?.[index] || []
|
||||
);
|
||||
config.xAxis.data = this.getTimeinfo(this.graphList?.[index] || []);
|
||||
return config;
|
||||
},
|
||||
|
||||
/** 准备设备数据 */
|
||||
async initEquipment() {
|
||||
const { code, data } = await this.$axios({
|
||||
@ -313,18 +396,42 @@ export default {
|
||||
method: 'get',
|
||||
params: this.queryParams,
|
||||
});
|
||||
|
||||
this.queryParams.equipmentId = null; // 清空一下
|
||||
if (code == 0) {
|
||||
const newEqlist = this.objectToArray(data);
|
||||
if (!newEqlist || newEqlist.length == 0) {
|
||||
this.$message.error('该设备没有产量数据');
|
||||
return;
|
||||
}
|
||||
this.graphList.push(newEqlist[0]);
|
||||
this.graphList.push(...newEqlist);
|
||||
newEqlist.forEach(this.setSeries);
|
||||
}
|
||||
this.open = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
.blue-title {
|
||||
position: relative;
|
||||
padding: 4px 0;
|
||||
padding-left: 12px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
height: 16px;
|
||||
width: 4px;
|
||||
border-radius: 1px;
|
||||
background: #0b58ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,29 +6,51 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<h1>设备状态时序图</h1>
|
||||
<!-- 搜索工作栏 -->
|
||||
<SearchBar
|
||||
:formConfigs="searchBarFormConfig"
|
||||
ref="search-bar"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
<div class="status-timegraph-container" style="background: #f2f4f9; flex: 1">
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
border-radius: 8px;
|
||||
">
|
||||
<div class="blue-title">生产节拍时序图</div>
|
||||
<!-- <h1>设备状态时序图</h1> -->
|
||||
<!-- 搜索工作栏 -->
|
||||
<SearchBar
|
||||
:formConfigs="searchBarFormConfig"
|
||||
ref="search-bar"
|
||||
:remove-blue="true"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
</el-row>
|
||||
|
||||
<div class="main-area">
|
||||
<div class="legend-row">
|
||||
<div class="legend">
|
||||
<div class="icon running"></div>
|
||||
<div>运行中</div>
|
||||
</div>
|
||||
<!-- <div class="legend">
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 16px 16px 32px;
|
||||
border-radius: 8px;
|
||||
">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="blue-title">设备状态时序图</div>
|
||||
</el-col>
|
||||
<el-col :span="18" class="legend-row">
|
||||
<div class="legend">
|
||||
<div class="icon running"></div>
|
||||
<div>运行中</div>
|
||||
</div>
|
||||
<!-- <div class="legend">
|
||||
<div class="icon waiting"></div>
|
||||
<div>待机</div>
|
||||
</div> -->
|
||||
<div class="legend">
|
||||
<div class="icon fault"></div>
|
||||
<div>故障</div>
|
||||
</div>
|
||||
<!-- <div class="legend">
|
||||
<div class="legend">
|
||||
<div class="icon fault"></div>
|
||||
<div>故障</div>
|
||||
</div>
|
||||
<!-- <div class="legend">
|
||||
<div class="icon lack"></div>
|
||||
<div>缺料</div>
|
||||
</div>
|
||||
@ -36,83 +58,51 @@
|
||||
<div class="icon full"></div>
|
||||
<div>满料</div>
|
||||
</div> -->
|
||||
<div class="legend">
|
||||
<div class="icon stop"></div>
|
||||
<div>计划停机</div>
|
||||
<div class="legend">
|
||||
<div class="icon stop"></div>
|
||||
<div>计划停机</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="main-area">
|
||||
<div class="graphs" v-if="graphList.length">
|
||||
<div class="graph" v-for="eq in graphList" :key="eq.key">
|
||||
<h2 class="graph-title">{{ eq.key }}</h2>
|
||||
|
||||
<div class="graph-content">
|
||||
<el-popover
|
||||
trigger="hover"
|
||||
v-for="blc in eq"
|
||||
:key="blc.startTime"
|
||||
:title="
|
||||
blc.status == 0
|
||||
? '运行'
|
||||
: blc.status == 2
|
||||
? '故障'
|
||||
: '计划停机'
|
||||
"
|
||||
placement="top"
|
||||
:content="new Date(blc.startTime).toLocaleTimeString()">
|
||||
<div
|
||||
slot="reference"
|
||||
:key="blc.startTime + '__div'"
|
||||
class="graph-item-fixed tick"
|
||||
:class="{
|
||||
running: blc.status == 0,
|
||||
fault: blc.status == 2,
|
||||
stop: blc.status == 1,
|
||||
}"
|
||||
:style="{ height: '32px', width: blc.duration * 2 + 'px' }"
|
||||
:data-time="
|
||||
new Date(blc.startTime).toLocaleTimeString()
|
||||
"></div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 v-else>请添加设备</h2>
|
||||
</div>
|
||||
<div class="graphs" v-if="graphList.length">
|
||||
<!-- <div class="graph">
|
||||
<h2 class="graph-title">设备1</h2>
|
||||
<div class="graph-item running tick" data-time="00:00"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item lack tick" data-time="03:00"></div>
|
||||
<div class="graph-item full tick" data-time="04:00"></div>
|
||||
<div class="graph-item waiting tick" data-time="05:00"></div>
|
||||
<div class="graph-item running tick" data-time="06:00"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item fault tick" data-time="08:00"></div>
|
||||
<div class="graph-item waiting tick" data-time="09:00"></div>
|
||||
<div class="graph-item running tick" data-time="10:00"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item lack tick" data-time="13:00"></div>
|
||||
<div class="graph-item full tick" data-time="14:00"></div>
|
||||
<div class="graph-item running tick" data-time="15:00"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item fault tick" data-time="18:00"></div>
|
||||
<div class="graph-item running tick" data-time="19:00"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item running"></div>
|
||||
<div class="graph-item stop tick" data-time="23:00"></div>
|
||||
</div> -->
|
||||
<div class="graph" v-for="eq in graphList" :key="eq.key">
|
||||
<h2 class="graph-title">{{ eq.key }}</h2>
|
||||
<div
|
||||
v-for="blc in eq"
|
||||
:key="blc.startTime"
|
||||
class="graph-item-fixed tick"
|
||||
:class="{
|
||||
running: blc.status == 0,
|
||||
fault: blc.status == 2,
|
||||
stop: blc.status == 1,
|
||||
}"
|
||||
:style="{ width: blc.duration * 2 + 'px' }"
|
||||
:data-time="new Date(blc.startTime).toLocaleTimeString()"></div>
|
||||
</div>
|
||||
<!-- <div class="graph">
|
||||
<h2 class="graph-title">设备3</h2>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
<div class="graph-item"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
<h2 v-else>请添加设备</h2>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<base-dialog
|
||||
@ -185,9 +175,9 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '设备对比',
|
||||
btnName: '添加对比',
|
||||
name: 'compare',
|
||||
color: 'warning',
|
||||
color: 'primary',
|
||||
plain: true,
|
||||
},
|
||||
],
|
||||
@ -344,26 +334,52 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.graph {
|
||||
border: 1px solid #ccc;
|
||||
padding: 12px 12px 28px 12px;
|
||||
margin: 64px 0;
|
||||
// border: 1px solid #ccc;
|
||||
// padding: 12px 12px 28px 12px;
|
||||
// margin: 64px 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.graph-title {
|
||||
position: absolute;
|
||||
top: -64px;
|
||||
left: -1px;
|
||||
padding: 8px 18px;
|
||||
background: #ccc;
|
||||
font-size: 18px;
|
||||
// position: absolute;
|
||||
// top: -64px;
|
||||
// left: -1px;
|
||||
// padding: 8px 18px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.graph-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 22px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom-width: 2px;
|
||||
border-top: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.graph-content::after,
|
||||
.graph-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 80%;
|
||||
background: #fff;
|
||||
right: -1px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.graph-content::before {
|
||||
right: unset;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
.graph-item,
|
||||
.graph-item-fixed {
|
||||
height: 88px;
|
||||
// height: 88px;
|
||||
// width: 24px;
|
||||
flex: 1;
|
||||
// border: 1px solid #ccc;
|
||||
@ -405,32 +421,40 @@ export default {
|
||||
}
|
||||
|
||||
.running {
|
||||
background-color: #84f04e;
|
||||
background-color: #5ad8a6;
|
||||
// background-color: #84f04e;
|
||||
}
|
||||
|
||||
.waiting {
|
||||
background-color: #409eff;
|
||||
background-color: #5ad8a6;
|
||||
// background-color: #409eff;
|
||||
}
|
||||
|
||||
.fault {
|
||||
background-color: #ea5b5b;
|
||||
// background-color: #ea5b5b;
|
||||
background-color: #fc9c91;
|
||||
}
|
||||
|
||||
.full {
|
||||
background-color: #e6a23c;
|
||||
// background-color: #e6a23c;
|
||||
background-color: #598fff;
|
||||
}
|
||||
|
||||
.lack {
|
||||
background-color: #a69c8d;
|
||||
// background-color: #a69c8d;
|
||||
background-color: #7585a2;
|
||||
}
|
||||
|
||||
.stop {
|
||||
background-color: #000c;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.legend-row {
|
||||
margin: 12px 0;
|
||||
margin: 6px 0;
|
||||
padding-right: 12px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
> .legend:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
@ -441,9 +465,32 @@ export default {
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
margin-right: 4px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.blue-title {
|
||||
position: relative;
|
||||
padding: 4px 0;
|
||||
padding-left: 12px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
width: 4px;
|
||||
border-radius: 1px;
|
||||
background: #0b58ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -124,7 +124,7 @@ export default {
|
||||
return h(
|
||||
'el-button',
|
||||
{
|
||||
props: { type: 'text', size: 'mini' },
|
||||
props: { type: 'text' },
|
||||
on: {
|
||||
click: function () {
|
||||
console.log('inejctdata', _this.injectData);
|
||||
|
||||
@ -82,18 +82,22 @@ export default {
|
||||
computed: {
|
||||
config() {
|
||||
return {
|
||||
color: ['#fde19a', '#8be2b9', '#288aff', '#7164ff'],
|
||||
// title: {
|
||||
// text: '折线图',
|
||||
// },
|
||||
grid: {
|
||||
top: '24%',
|
||||
left: '3%',
|
||||
top: '12%',
|
||||
left: '2%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: this.legend,
|
||||
@ -107,13 +111,145 @@ export default {
|
||||
// },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
boundaryGap: true,
|
||||
onZero: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
// color: 'red'
|
||||
},
|
||||
},
|
||||
data: this.xProps,
|
||||
// data: [
|
||||
// '设备1',
|
||||
// '设备2',
|
||||
// '设备3',
|
||||
// '设备4',
|
||||
// '设备5',
|
||||
// '设备6',
|
||||
// '设备7',
|
||||
// '设备8',
|
||||
// '设备9',
|
||||
// '设备10',
|
||||
// '设备11',
|
||||
// '设备12',
|
||||
// '设备13',
|
||||
// '设备14',
|
||||
// '设备15',
|
||||
// '设备16',
|
||||
// '设备17',
|
||||
// '设备18',
|
||||
// '设备19',
|
||||
// '设备20',
|
||||
// ],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '单位/片',
|
||||
nameTextStyle: {
|
||||
color: '#999',
|
||||
fontSize: 14,
|
||||
align: 'right',
|
||||
},
|
||||
max: function (value) {
|
||||
return value.max + Math.floor(value.max / 5);
|
||||
},
|
||||
},
|
||||
// 缩放 - 滑动
|
||||
dataZoom: {
|
||||
type: 'inside',
|
||||
},
|
||||
series: this.series,
|
||||
// series: [
|
||||
// {
|
||||
// name: '上片数',
|
||||
// type: 'bar',
|
||||
// // barWidth: 12,
|
||||
// data: [
|
||||
// 10,
|
||||
// 12,
|
||||
// 43,
|
||||
// 4,
|
||||
// 22,
|
||||
// 32,
|
||||
// 12,
|
||||
// 8,
|
||||
// 122,
|
||||
// 0,
|
||||
// ,
|
||||
// 43,
|
||||
// 4,
|
||||
// 22,
|
||||
// 32,
|
||||
// 12,
|
||||
// 8,
|
||||
// 122,
|
||||
// 77,
|
||||
// 99,
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: '下片数',
|
||||
// type: 'bar',
|
||||
// // barWidth: 12,
|
||||
// data: [
|
||||
// 10,
|
||||
// 12,
|
||||
// 43,
|
||||
// 4,
|
||||
// 22,
|
||||
// 32,
|
||||
// 12,
|
||||
// 8,
|
||||
// 122,
|
||||
// 0,
|
||||
// 4,
|
||||
// 22,
|
||||
// 32,
|
||||
// 12,
|
||||
// 8,
|
||||
// 122,
|
||||
// 0,
|
||||
// ,
|
||||
// 43,
|
||||
// 4,
|
||||
// 22,
|
||||
// 32,
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: '检测数',
|
||||
// type: 'bar',
|
||||
// // barWidth: 12,
|
||||
// barCategoryGap: 12,
|
||||
// data: [
|
||||
// 10,
|
||||
// 12,
|
||||
// 43,
|
||||
// 4,
|
||||
// 22,
|
||||
// 4,
|
||||
// 22,
|
||||
// 32,
|
||||
// 12,
|
||||
// 8,
|
||||
// 122,
|
||||
// 0,
|
||||
// ,
|
||||
// 43,
|
||||
// 4,
|
||||
// 22,
|
||||
// 32,
|
||||
// 32,
|
||||
// 12,
|
||||
// 8,
|
||||
// 122,
|
||||
// 0,
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
@ -7,9 +7,9 @@
|
||||
|
||||
<template>
|
||||
<!-- 列表 -->
|
||||
<!-- height="35vh" -->
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
height="35vh"
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"></base-table>
|
||||
|
||||
@ -7,14 +7,20 @@
|
||||
|
||||
<template>
|
||||
<div class="graph-page">
|
||||
<DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
|
||||
<!-- <DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
|
||||
<TotalGraph :summary-list="summaryList" />
|
||||
</DetailGraph>
|
||||
<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据">
|
||||
</DetailGraph> -->
|
||||
<!-- <DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据">
|
||||
<LineGraph :x-props="lineData.xProps" :legend="legend" :series="series" />
|
||||
</DetailGraph>
|
||||
</DetailGraph> -->
|
||||
<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
|
||||
<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
|
||||
<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
|
||||
<div v-if="!series || series.length == 0" style="color: #777; font-size: 16px; letter-spacing: 1px; text-align: center; padding-top: 56px; text-decoration: underline;">暂无数据</div>
|
||||
<LineGraph
|
||||
v-else
|
||||
:x-props="lineData.xProps"
|
||||
:legend="legend"
|
||||
:series="series" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -55,7 +61,8 @@ export default {
|
||||
console.log('this.list', this.lineData.list, this.lineData.xProps);
|
||||
const seriesItem = {
|
||||
name: item.inspectionContent,
|
||||
type: 'line',
|
||||
type: 'bar',
|
||||
barCategoryGap: 12,
|
||||
data: [],
|
||||
};
|
||||
|
||||
|
||||
@ -6,33 +6,84 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索工作栏 -->
|
||||
<SearchBar
|
||||
:formConfigs="searchBarFormConfig"
|
||||
ref="search-bar"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
<div class="quality-container" style="background: #f2f4f9; flex: 1">
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
border-radius: 8px;
|
||||
">
|
||||
<!-- 搜索工作栏 -->
|
||||
<SearchBar
|
||||
:formConfigs="searchBarFormConfig"
|
||||
ref="search-bar"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
</el-row>
|
||||
|
||||
<transition mode="out-in" name="fade-down">
|
||||
<template v-if="mode == 'table'">
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
v-if="mode == 'table'"
|
||||
:table-props="tableProps"
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun"></base-table>
|
||||
</template>
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 12px 16px 16px;
|
||||
border-radius: 8px;
|
||||
">
|
||||
<div class="blue-title">产线检测总览</div>
|
||||
<summaryTable :list="summaryList" />
|
||||
</el-row>
|
||||
|
||||
<GraphPage
|
||||
v-else
|
||||
:summary-list="summaryList"
|
||||
:line-data="{ list: list, xProps: dynamicProps.map((v) => v.prop) }" />
|
||||
</transition>
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 12px 16px 16px;
|
||||
border-radius: 8px;
|
||||
">
|
||||
<el-row style="display: flex; align-items: center">
|
||||
<div class="blue-title">产线检测详细</div>
|
||||
<div class="custom-tabs">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
:stretch="true"
|
||||
@tab-click="handleTabClick">
|
||||
<el-tab-pane
|
||||
:label="'\u2002数据列表\u2002'"
|
||||
name="table"></el-tab-pane>
|
||||
<el-tab-pane
|
||||
:label="'\u3000柱状图\u3000'"
|
||||
name="graph"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<transition mode="out-in" name="fade-down">
|
||||
<template v-if="mode == 'table'">
|
||||
<base-table
|
||||
v-if="mode == 'table'"
|
||||
:table-props="tableProps"
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun"></base-table>
|
||||
</template>
|
||||
|
||||
<GraphPage
|
||||
v-else
|
||||
:summary-list="summaryList"
|
||||
:line-data="{
|
||||
list: list,
|
||||
xProps: dynamicProps.map((v) => v.prop),
|
||||
}" />
|
||||
</transition>
|
||||
</el-row>
|
||||
|
||||
<!-- todo: 数据总览，用弹窗包裹的 table 实现 -->
|
||||
<base-dialog
|
||||
<!-- <base-dialog
|
||||
dialogTitle="数据总览"
|
||||
:dialogVisible="summaryOpen"
|
||||
width="50%"
|
||||
@ -40,7 +91,7 @@
|
||||
@cancel="handleSummaryClose"
|
||||
@confirm="handleSummaryClose">
|
||||
<summaryTable :list="summaryList" />
|
||||
</base-dialog>
|
||||
</base-dialog> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -48,13 +99,58 @@
|
||||
import GraphPage from './graphPage.vue';
|
||||
import summaryTable from './components/summaryTable.vue';
|
||||
|
||||
class DateGetter {
|
||||
constructor() {
|
||||
this.today = new Date();
|
||||
this.y = this.today.getFullYear();
|
||||
this.m = this.today.getMonth();
|
||||
this.d = this.today.getDate();
|
||||
}
|
||||
getWeekRange() {
|
||||
const weekStart = new Date(this.y, this.m, this.d - this.today.getDay());
|
||||
const weekEnd = new Date(
|
||||
this.y,
|
||||
this.m,
|
||||
this.d + (6 - this.today.getDay()),
|
||||
23,
|
||||
59,
|
||||
59
|
||||
);
|
||||
// console.log('week', [weekStart, weekEnd]);
|
||||
return [weekStart, weekEnd];
|
||||
}
|
||||
|
||||
getMonthRange() {
|
||||
const monthStart = new Date(this.y, this.m, 1);
|
||||
const monthEnd = new Date(this.y, this.m + 1, 0, 23, 59, 59);
|
||||
// console.log('month', [monthStart, monthEnd]);
|
||||
return [monthStart, monthEnd];
|
||||
}
|
||||
|
||||
getQuarterRange() {
|
||||
const quarterStart = new Date(this.y, this.m - (this.m % 3), 1);
|
||||
const quarterEnd = new Date(
|
||||
this.y,
|
||||
this.m - (this.m % 3) + 3,
|
||||
0,
|
||||
23,
|
||||
59,
|
||||
59
|
||||
);
|
||||
// console.log('quarter', [quarterStart, quarterEnd]);
|
||||
return [quarterStart, quarterEnd];
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'QualityStatistics',
|
||||
components: { GraphPage, summaryTable },
|
||||
props: {},
|
||||
data() {
|
||||
const dateGetter = new DateGetter();
|
||||
return {
|
||||
mode: 'table', // defaults to 'table'
|
||||
// mode: 'table', // defaults to 'table'
|
||||
activeName: 'table', // defaults to 'table'
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
type: 'datePicker',
|
||||
@ -69,6 +165,28 @@ export default {
|
||||
endPlaceholder: '结束日期',
|
||||
defaultTime: ['00:00:00', '23:59:59'],
|
||||
param: 'timerange',
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: '本周',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', dateGetter.getWeekRange());
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '本月',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', dateGetter.getMonthRange());
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '本季',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', dateGetter.getQuarterRange());
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@ -76,33 +194,33 @@ export default {
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '数据总览',
|
||||
name: 'summary',
|
||||
color: 'text',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '表格版',
|
||||
name: 'tableVersion',
|
||||
color: 'text btn-table',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '图形版',
|
||||
name: 'graphVersion',
|
||||
color: 'text btn-graph',
|
||||
},
|
||||
// {
|
||||
// type: 'separate',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '数据总览',
|
||||
// name: 'summary',
|
||||
// color: 'text',
|
||||
// },
|
||||
// {
|
||||
// type: 'separate',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '表格版',
|
||||
// name: 'tableVersion',
|
||||
// color: 'text btn-table',
|
||||
// },
|
||||
// {
|
||||
// type: 'separate',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '图形版',
|
||||
// name: 'graphVersion',
|
||||
// color: 'text btn-graph',
|
||||
// },
|
||||
],
|
||||
// 动态的 props
|
||||
dynamicProps: [],
|
||||
@ -165,6 +283,9 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
mode() {
|
||||
return this.activeName;
|
||||
},
|
||||
tableProps() {
|
||||
return [
|
||||
{
|
||||
@ -287,6 +408,14 @@ export default {
|
||||
};
|
||||
});
|
||||
},
|
||||
handleTabClick(tab, event) {
|
||||
const { name } = tab;
|
||||
if (name == 'graph') {
|
||||
// 展示柱状图
|
||||
} else {
|
||||
// 展示表格
|
||||
}
|
||||
},
|
||||
/** 总览关闭 */
|
||||
handleSummaryClose() {
|
||||
this.summaryOpen = false;
|
||||
@ -371,6 +500,42 @@ export default {
|
||||
.fade-down-leave {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.blue-title {
|
||||
position: relative;
|
||||
padding: 4px 0;
|
||||
padding-left: 12px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
height: 16px;
|
||||
width: 4px;
|
||||
border-radius: 1px;
|
||||
background: #0b58ff;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.custom-tabs) {
|
||||
.el-tabs__header {
|
||||
margin-left: 12px;
|
||||
margin-bottom: 8px;
|
||||
display: inline-block;
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--
|
||||
|
||||
Loading…
Reference in New Issue
Block a user