lb #36
@ -303,7 +303,7 @@ export default {
|
||||
handleDelete(row) {
|
||||
const id = row.id;
|
||||
this.$modal
|
||||
.confirm('是否确认删除设备与分组绑定编号为"' + id + '"的数据项?')
|
||||
.confirm('是否确认删除该分组绑定?')
|
||||
.then(function () {
|
||||
return deleteEquipmentBindGroup(id);
|
||||
})
|
||||
|
||||
@ -118,12 +118,12 @@ export default {
|
||||
{
|
||||
width: 128,
|
||||
prop: 'workTime',
|
||||
label: '工作时长',
|
||||
label: '工作时长[h]',
|
||||
},
|
||||
{
|
||||
width: 128,
|
||||
prop: 'workRate',
|
||||
label: '百分比',
|
||||
label: '百分比[%]',
|
||||
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
||||
},
|
||||
],
|
||||
@ -134,9 +134,9 @@ export default {
|
||||
{
|
||||
width: 128,
|
||||
prop: 'stopTime',
|
||||
label: '停机时长',
|
||||
label: '停机时长[h]',
|
||||
},
|
||||
{ width: 128, prop: 'stopRate', label: '百分比' },
|
||||
{ width: 128, prop: 'stopRate', label: '百分比[%]' },
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -145,10 +145,10 @@ export default {
|
||||
{
|
||||
width: 128,
|
||||
prop: 'downTime',
|
||||
label: '故障时长',
|
||||
label: '故障时长[h]',
|
||||
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
||||
},
|
||||
{ width: 128, prop: 'downRate', label: '百分比' },
|
||||
{ width: 128, prop: 'downRate', label: '百分比[%]' },
|
||||
{
|
||||
width: 128,
|
||||
prop: 'timeEfficiency',
|
||||
|
||||
@ -155,7 +155,7 @@ export default {
|
||||
async getList() {
|
||||
this.loading = true;
|
||||
// 执行查询
|
||||
const { data } = await this.$axios({
|
||||
const { code, data } = await this.$axios({
|
||||
url: '/analysis/equipment-analysis/efficiency',
|
||||
method: 'get',
|
||||
params: {
|
||||
@ -163,6 +163,11 @@ export default {
|
||||
recordTime: this.queryParams.recordTime || null,
|
||||
},
|
||||
});
|
||||
if (code === 0) {
|
||||
this.list = data;
|
||||
} else {
|
||||
this.list.splice(0);
|
||||
}
|
||||
},
|
||||
|
||||
handleSearchBarBtnClick(btn) {
|
||||
|
||||
@ -43,7 +43,7 @@ export default {
|
||||
eq.okQuantity,
|
||||
eq.nokQuantity,
|
||||
eq.totalQuantity,
|
||||
eq.passRate.toFixed(2),
|
||||
eq.passRate.toFixed(4),
|
||||
]);
|
||||
});
|
||||
return {
|
||||
@ -53,6 +53,30 @@ export default {
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
formatter: (params) => {
|
||||
const name = params[0].name;
|
||||
const goodRate = opt.find((item) => item[0] == name)[4];
|
||||
return `
|
||||
<h1 style="font-size: 18px; letter-spacing: 1px;">${
|
||||
params[0].axisValue
|
||||
} <small>${goodRate}%</small></h1>
|
||||
<ul style="margin: 0; padding: 0; min-width: 128px;">
|
||||
${params
|
||||
.map(
|
||||
(item, index) => `
|
||||
<li style="list-style: none; display: flex; justify-content: space-between; align-items: center;">
|
||||
<div>
|
||||
<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${item.color}; margin-right: 5px;"></span>
|
||||
${item.seriesName}
|
||||
</div>
|
||||
${item.value}
|
||||
</li>
|
||||
`
|
||||
)
|
||||
.join('')}
|
||||
</ul>
|
||||
`;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 12,
|
||||
@ -110,17 +134,17 @@ export default {
|
||||
stack: 's',
|
||||
data: opt.map((item) => item[2]),
|
||||
},
|
||||
{
|
||||
name: '加工数量',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: opt.map((item) => item[3]),
|
||||
},
|
||||
{
|
||||
name: '合格率',
|
||||
type: 'line',
|
||||
data: opt.map((item) => item[4]),
|
||||
},
|
||||
// {
|
||||
// name: '加工数量',
|
||||
// type: 'bar',
|
||||
// barWidth: 20,
|
||||
// data: opt.map((item) => item[3]),
|
||||
// },
|
||||
// {
|
||||
// name: '合格率',
|
||||
// type: 'line',
|
||||
// data: opt.map((item) => item[4]),
|
||||
// },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
@ -31,7 +31,8 @@
|
||||
<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" />
|
||||
<LineChart v-if="list && list.length" :list="list" />
|
||||
<div v-else class="no-data-bg"></div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<template>
|
||||
<div
|
||||
class="production-timegraph-container"
|
||||
style="background: #f2f4f9; flex: 1">
|
||||
style="background: #f2f4f9; flex: 1; display: flex; flex-direction: column">
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
@ -24,12 +24,16 @@
|
||||
:formConfigs="searchBarFormConfig"
|
||||
ref="search-bar"
|
||||
:remove-blue="true"
|
||||
@select-changed="handleSearchBarChanged"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
</el-row>
|
||||
|
||||
<el-row
|
||||
class=""
|
||||
style="
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 16px 16px 24px;
|
||||
@ -37,7 +41,7 @@
|
||||
">
|
||||
<div class="blue-title">设备产量时序图</div>
|
||||
|
||||
<div class="main-area">
|
||||
<div class="main-area" style="flex: 1">
|
||||
<div class="graphs" v-if="graphList.length">
|
||||
<LineChart :config="templateConfig" />
|
||||
</div>
|
||||
@ -70,6 +74,7 @@
|
||||
|
||||
<script>
|
||||
import LineChart from './components/lineChart.vue';
|
||||
import response from './response.json';
|
||||
|
||||
export default {
|
||||
name: 'SGProduction',
|
||||
@ -77,6 +82,7 @@ export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
startTime: null, // new Date(2023, 8, 26, 0, 0, 0, 0).getTime(),
|
||||
accumulators: new Map(),
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
@ -85,6 +91,7 @@ export default {
|
||||
placeholder: '请选择产线',
|
||||
selectOptions: [],
|
||||
param: 'lineId',
|
||||
onchange: true,
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
@ -108,6 +115,7 @@ export default {
|
||||
// defaultTime: ['00:00:00', '23:59:59'],
|
||||
placeholder: '选择日期',
|
||||
param: 'recordTime',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@ -136,7 +144,18 @@ export default {
|
||||
eqList: [],
|
||||
graphList: [],
|
||||
templateConfig: {
|
||||
color: ['#283D68', '#FFB61F', '#4481FF', '#5AD8A6', '#E97466'],
|
||||
color: [
|
||||
'#283D68',
|
||||
'#FFB61F',
|
||||
'#4481FF',
|
||||
'#5AD8A6',
|
||||
'#E97466',
|
||||
'#ccc', //<=== 需按情况更新
|
||||
'#ccc',
|
||||
'#ccc',
|
||||
'#ccc',
|
||||
'#ccc',
|
||||
],
|
||||
grid: {
|
||||
top: 48,
|
||||
left: 48,
|
||||
@ -159,25 +178,30 @@ export default {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisTick: {
|
||||
// show: false,
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
color: '#0003',
|
||||
},
|
||||
formatter: function (params) {
|
||||
return `
|
||||
<div style="margin-bottom: 8px;">${new Date(
|
||||
+params[0].name
|
||||
).toLocaleTimeString()}</div>
|
||||
${params
|
||||
.map(({ seriesName, color, data }) =>
|
||||
data != null
|
||||
? `
|
||||
<div style="min-width: 160px; display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="display: flex; align-items: center;">
|
||||
<span style="display: inline-block; margin-right: 8px; width: 12px; height: 12px; background: ${color}"></span>
|
||||
<span style="">${seriesName}</span>
|
||||
</span>
|
||||
<span style="color: #c7c7c7; text-align: right;">${data}</span>
|
||||
</div>
|
||||
`
|
||||
: ''
|
||||
)
|
||||
.join('')}
|
||||
`;
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#0007',
|
||||
},
|
||||
data: [],
|
||||
// data: Array(24)
|
||||
// .fill(1)
|
||||
// .map((item, index) => `${index}:00`),
|
||||
},
|
||||
xAxis: null,
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '产量',
|
||||
@ -186,9 +210,12 @@ export default {
|
||||
fontSize: 14,
|
||||
align: 'center',
|
||||
},
|
||||
nameGap: 26,
|
||||
axisLine: {
|
||||
show: true,
|
||||
},
|
||||
max: function (value) {
|
||||
return value.max + Math.floor(value.max / 5);
|
||||
return value.max + Math.ceil(value.max / 4);
|
||||
// return value.max + 50
|
||||
},
|
||||
},
|
||||
series: [
|
||||
@ -223,16 +250,29 @@ export default {
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
timeArr() {
|
||||
return Array(24)
|
||||
.fill(this.startTime)
|
||||
.map((time, index) => time + index * 3600000);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.initProductline();
|
||||
this.initWorksection();
|
||||
this.initEquipment();
|
||||
this.getList();
|
||||
// this.getList();
|
||||
},
|
||||
methods: {
|
||||
handleSearchBarBtnClick({ btnName, ...payload }) {
|
||||
switch (btnName) {
|
||||
case 'search':
|
||||
if (!payload.recordTime || payload.recordTime.length <= 0) {
|
||||
this.$message.error('请选择时间段');
|
||||
return;
|
||||
}
|
||||
this.startTime = new Date(payload.recordTime).getTime();
|
||||
|
||||
this.queryParams.lineId = payload.lineId || null;
|
||||
this.queryParams.sectionId = payload.sectionId || null;
|
||||
this.queryParams.equipmentId = payload.equipmentId || null;
|
||||
@ -250,6 +290,18 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
handleSearchBarChanged({ param, value }) {
|
||||
if (!value) {
|
||||
this.searchBarFormConfig[1].selectOptions = [];
|
||||
return;
|
||||
}
|
||||
switch (param) {
|
||||
case 'lineId':
|
||||
this.getWorksectionById(value);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
/** 重置查询条件 */
|
||||
initQuery() {
|
||||
this.queryParams.lineId = null;
|
||||
@ -267,43 +319,74 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
initState() {
|
||||
this.accumulators = new Map();
|
||||
this.templateConfig.series = [];
|
||||
},
|
||||
|
||||
async getList() {
|
||||
this.initState();
|
||||
|
||||
const { code, data } = await this.$axios({
|
||||
url: '/analysis/equipment-analysis/quantity',
|
||||
method: 'get',
|
||||
params: this.queryParams,
|
||||
});
|
||||
|
||||
// const { code, data } = response;
|
||||
if (code == 0) {
|
||||
this.graphList = this.objectToArray(data);
|
||||
// const eq1 = [
|
||||
// { totalQuantity: 20, startTime: 1693964578000 },
|
||||
// { totalQuantity: 43, startTime: 1693964678000 },
|
||||
// { totalQuantity: 12, startTime: 1693964778000 },
|
||||
// { totalQuantity: 11, startTime: 1693964878000 },
|
||||
// { totalQuantity: 98, startTime: 1693965478000 },
|
||||
// { totalQuantity: 87, startTime: 1693965578000 },
|
||||
// ];
|
||||
// eq1.key = 'SS1';
|
||||
// const eq2 = [
|
||||
// { totalQuantity: 23, startTime: 1693961578000 },
|
||||
// { totalQuantity: 42, startTime: 1693964578000 },
|
||||
// { totalQuantity: 51, startTime: 1693965578000 },
|
||||
// { totalQuantity: 18, startTime: 1693966578000 },
|
||||
// { totalQuantity: 77, startTime: 1693966778000 },
|
||||
// { totalQuantity: 38, startTime: 1693967578000 },
|
||||
// { totalQuantity: 57, startTime: 1693969578000 },
|
||||
// ];
|
||||
// eq2.key = 'SS2';
|
||||
// this.graphList = [eq1, eq2];
|
||||
|
||||
this.setXaxis();
|
||||
this.graphList.forEach(this.setSeries);
|
||||
} else {
|
||||
this.graphList = [];
|
||||
this.graphList.forEach(this.setSeries);
|
||||
}
|
||||
},
|
||||
|
||||
setSeries(eqArr) {
|
||||
setXaxis() {
|
||||
const xaxis = {
|
||||
type: 'category',
|
||||
// interval: 12,
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
color: '#0003',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: function (value, index) {
|
||||
return new Date(+value)
|
||||
.toLocaleTimeString()
|
||||
.split(':')
|
||||
.slice(0, 2)
|
||||
.join(':');
|
||||
},
|
||||
},
|
||||
data: this.timeArr,
|
||||
};
|
||||
this.templateConfig.xAxis = xaxis;
|
||||
},
|
||||
|
||||
setYaxis() {},
|
||||
|
||||
setSeries(list) {
|
||||
const data = Array(24).fill(null);
|
||||
list.map((item, index) => {
|
||||
const idx = this.timeArr.indexOf(item.startTime);
|
||||
if (idx != -1) {
|
||||
data[idx] = item.totalQuantity;
|
||||
}
|
||||
});
|
||||
const seriesItem = {
|
||||
name: list.key,
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
data,
|
||||
};
|
||||
this.templateConfig.series.push(seriesItem);
|
||||
},
|
||||
|
||||
setSeriesOld(eqArr) {
|
||||
if (eqArr.length == 0) {
|
||||
this.templateConfig.series = [];
|
||||
return;
|
||||
@ -330,18 +413,6 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/** 获得设备产量 */
|
||||
getEquipmentQuantity(equipmentArr) {
|
||||
return equipmentArr.map((item) => item.totalQuantity);
|
||||
},
|
||||
|
||||
/** 获得设备产量的时间 */
|
||||
getTimeinfo(equipmentArr) {
|
||||
return equipmentArr.map((item) =>
|
||||
new Date(item.startTime).toLocaleTimeString()
|
||||
);
|
||||
},
|
||||
|
||||
/** 准备设备数据 */
|
||||
async initEquipment() {
|
||||
const { code, data } = await this.$axios({
|
||||
@ -390,6 +461,25 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/** 根据产线获取工段 */
|
||||
async getWorksectionById(lineId) {
|
||||
const { code, data } = await this.$axios({
|
||||
url: '/base/workshop-section/listByParentId',
|
||||
method: 'get',
|
||||
params: {
|
||||
id: lineId,
|
||||
},
|
||||
});
|
||||
if (code == 0) {
|
||||
this.searchBarFormConfig[1].selectOptions = data.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
async submitForm() {
|
||||
const { code, data } = await this.$axios({
|
||||
url: '/analysis/equipment-analysis/quantity',
|
||||
|
||||
333
src/views/equipment/timing-diagram/output/response.json
Normal file
333
src/views/equipment/timing-diagram/output/response.json
Normal file
@ -0,0 +1,333 @@
|
||||
{
|
||||
"code": 0,
|
||||
"data": {
|
||||
"上片机": [
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 199,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 199,
|
||||
"nokQuantity": 1,
|
||||
"recordTime": 1695657600000,
|
||||
"startTime": 1695657600000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 189,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 189,
|
||||
"nokQuantity": 11,
|
||||
"recordTime": 1695661200000,
|
||||
"startTime": 1695661200000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 198,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 198,
|
||||
"nokQuantity": 2,
|
||||
"recordTime": 1695664800000,
|
||||
"startTime": 1695664800000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 197,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 197,
|
||||
"nokQuantity": 3,
|
||||
"recordTime": 1695668400000,
|
||||
"startTime": 1695668400000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 200,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 200,
|
||||
"nokQuantity": 0,
|
||||
"recordTime": 1695672000000,
|
||||
"startTime": 1695672000000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 170,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 170,
|
||||
"nokQuantity": 30,
|
||||
"recordTime": 1695675600000,
|
||||
"startTime": 1695675600000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 199,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 199,
|
||||
"nokQuantity": 1,
|
||||
"recordTime": 1695679200000,
|
||||
"startTime": 1695679200000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 199,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 199,
|
||||
"nokQuantity": 1,
|
||||
"recordTime": 1695682800000,
|
||||
"startTime": 1695682800000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 195,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 195,
|
||||
"nokQuantity": 5,
|
||||
"recordTime": 1695686400000,
|
||||
"startTime": 1695686400000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 198,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 198,
|
||||
"nokQuantity": 2,
|
||||
"recordTime": 1695690000000,
|
||||
"startTime": 1695690000000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 199,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 199,
|
||||
"nokQuantity": 1,
|
||||
"recordTime": 1695693600000,
|
||||
"startTime": 1695693600000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 197,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 197,
|
||||
"nokQuantity": 3,
|
||||
"recordTime": 1695697200000,
|
||||
"startTime": 1695697200000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 197,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 197,
|
||||
"nokQuantity": 3,
|
||||
"recordTime": 1695700800000,
|
||||
"startTime": 1695700800000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 196,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 196,
|
||||
"nokQuantity": 4,
|
||||
"recordTime": 1695704400000,
|
||||
"startTime": 1695704400000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 193,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 193,
|
||||
"nokQuantity": 7,
|
||||
"recordTime": 1695708000000,
|
||||
"startTime": 1695708000000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 190,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 190,
|
||||
"nokQuantity": 10,
|
||||
"recordTime": 1695711600000,
|
||||
"startTime": 1695711600000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 199,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 199,
|
||||
"nokQuantity": 1,
|
||||
"recordTime": 1695715200000,
|
||||
"startTime": 1695715200000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 200,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 200,
|
||||
"nokQuantity": 0,
|
||||
"recordTime": 1695718800000,
|
||||
"startTime": 1695718800000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 200,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 200,
|
||||
"nokQuantity": 0,
|
||||
"recordTime": 1695722400000,
|
||||
"startTime": 1695722400000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 198,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 198,
|
||||
"nokQuantity": 2,
|
||||
"recordTime": 1695726000000,
|
||||
"startTime": 1695726000000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 199,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 199,
|
||||
"nokQuantity": 1,
|
||||
"recordTime": 1695729600000,
|
||||
"startTime": 1695729600000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 189,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 189,
|
||||
"nokQuantity": 11,
|
||||
"recordTime": 1695733200000,
|
||||
"startTime": 1695733200000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 179,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 179,
|
||||
"nokQuantity": 21,
|
||||
"recordTime": 1695736800000,
|
||||
"startTime": 1695736800000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 200,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 200,
|
||||
"nokQuantity": 0,
|
||||
"recordTime": 1695740400000,
|
||||
"startTime": 1695740400000
|
||||
}
|
||||
],
|
||||
"下片机": [
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 190,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 190,
|
||||
"nokQuantity": 10,
|
||||
"recordTime": 1695672000000,
|
||||
"startTime": 1695672000000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 177,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 177,
|
||||
"nokQuantity": 23,
|
||||
"recordTime": 1695675600000,
|
||||
"startTime": 1695675600000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 198,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 198,
|
||||
"nokQuantity": 2,
|
||||
"recordTime": 1695679200000,
|
||||
"startTime": 1695679200000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 200,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 200,
|
||||
"nokQuantity": 0,
|
||||
"recordTime": 1695682800000,
|
||||
"startTime": 1695682800000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 185,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 185,
|
||||
"nokQuantity": 15,
|
||||
"recordTime": 1695686400000,
|
||||
"startTime": 1695686400000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 198,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 198,
|
||||
"nokQuantity": 2,
|
||||
"recordTime": 1695690000000,
|
||||
"startTime": 1695690000000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 200,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 200,
|
||||
"nokQuantity": 0,
|
||||
"recordTime": 1695693600000,
|
||||
"startTime": 1695693600000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 193,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 193,
|
||||
"nokQuantity": 7,
|
||||
"recordTime": 1695697200000,
|
||||
"startTime": 1695697200000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 200,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 200,
|
||||
"nokQuantity": 0,
|
||||
"recordTime": 1695700800000,
|
||||
"startTime": 1695700800000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 200,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 200,
|
||||
"nokQuantity": 0,
|
||||
"recordTime": 1695704400000,
|
||||
"startTime": 1695704400000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 192,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 192,
|
||||
"nokQuantity": 8,
|
||||
"recordTime": 1695708000000,
|
||||
"startTime": 1695708000000
|
||||
},
|
||||
{
|
||||
"inQuantity": 200,
|
||||
"totalQuantity": 199,
|
||||
"outQuantity": 200,
|
||||
"okQuantity": 199,
|
||||
"nokQuantity": 1,
|
||||
"recordTime": 1695711600000,
|
||||
"startTime": 1695711600000
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
280
src/views/equipment/timing-diagram/status/demo.html
Normal file
280
src/views/equipment/timing-diagram/status/demo.html
Normal file
@ -0,0 +1,280 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="app"
|
||||
style="width: 100vw; height: 80vh; background: #ccc3; margin: 24px"></div>
|
||||
|
||||
<script src="./echarts.js"></script>
|
||||
<script>
|
||||
function getStartTime(timestamp) {
|
||||
return new Date(new Date(timestamp).toLocaleDateString()).getTime();
|
||||
}
|
||||
|
||||
function renderItem(params, api) {
|
||||
var categoryIndex = api.value(0);
|
||||
var start = api.coord([api.value(1), categoryIndex]);
|
||||
var end = api.coord([api.value(2), categoryIndex]);
|
||||
console.log(`
|
||||
categoryIndex: ${categoryIndex},
|
||||
start: ${start},
|
||||
end: ${end},
|
||||
api.value0: ${api.value(0)}
|
||||
api.value1: ${api.value(1)}
|
||||
api.value2: ${api.value(2)}
|
||||
params.coordSys: ${JSON.stringify(params.coordSys)}
|
||||
api.size: ${api.size([0, 1])}
|
||||
api.style(): ${JSON.stringify(api.style())}
|
||||
`);
|
||||
|
||||
var height = api.size([0, 1])[1] * 2;
|
||||
// 用一个矩形去截取另一个矩形
|
||||
var rectShape = echarts.graphic.clipRectByRect(
|
||||
// 被截取矩形
|
||||
{
|
||||
x: start[0],
|
||||
y: start[1] - height / 2,
|
||||
width: end[0] - start[0],
|
||||
height: height,
|
||||
},
|
||||
// 截取矩形
|
||||
{
|
||||
// 截取掉grid以外的部分，实质是计算方块的偏移量
|
||||
x: params.coordSys.x, // {number} grid rect 的 x
|
||||
// y: params.coordSys.y, // {number} grid rect 的 y
|
||||
y: params.coordSys.y - 16, // {number} grid rect 的 y，并多减掉 16 个单位
|
||||
width: params.coordSys.width, // {number} grid rect 的 width
|
||||
height: params.coordSys.height, // {number} grid rect 的 height
|
||||
}
|
||||
);
|
||||
console.log(`------------- ${JSON.stringify(rectShape)} -------------- `)
|
||||
return (
|
||||
rectShape && {
|
||||
type: 'rect',
|
||||
transition: ['shape'],
|
||||
shape: rectShape,
|
||||
style: api.style(),
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function getXaxisRange(startTime) {
|
||||
return Array(24)
|
||||
.fill(startTime)
|
||||
.map((item, index) => {
|
||||
return new Date(item + index * 3600 * 1000)
|
||||
.toLocaleTimeString()
|
||||
.split(':')
|
||||
.slice(0, 2)
|
||||
.join(':');
|
||||
});
|
||||
}
|
||||
|
||||
function getTodayStart(today) {
|
||||
const [y, m, d] = [
|
||||
today.getFullYear(),
|
||||
today.getMonth(),
|
||||
today.getDate(),
|
||||
];
|
||||
return new Date(y, m, d).getTime();
|
||||
}
|
||||
|
||||
/** 颜色配置 */
|
||||
const types = [
|
||||
{ name: '运行', color: '#288AFF' },
|
||||
{ name: '故障', color: '#FC9C91' },
|
||||
{ name: '计划停机', color: '#FFDC94' },
|
||||
{ name: '空白', color: '#F2F4F9' },
|
||||
];
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'none',
|
||||
// label: {
|
||||
// backgroundColor: '#6a7985',
|
||||
// },
|
||||
},
|
||||
formatter: (params) => {
|
||||
// console.log('formatter', params)
|
||||
// return `
|
||||
// <div>${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}</div>
|
||||
// <div style="display: flex; justify-content: space-between; min-width: 128px; align-items: center;">
|
||||
// <span>${params[0].seriesName}</span>
|
||||
// <span>${params[0].name}</span>
|
||||
// </div>
|
||||
// `
|
||||
return `
|
||||
<h1 style="font-size: 18px; font-weight: 600; letter-spacing: 1px;">${params[0].name} <span style="display: inline-block; margin-left: 8px; width: 12px; height: 12px; border-radius: 50%; background: ${params[0].color} "></span></h1>
|
||||
<div>${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}</div>
|
||||
`
|
||||
}
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
id: 0,
|
||||
top: 10,
|
||||
left: 128,
|
||||
right: 64,
|
||||
height: 56,
|
||||
},
|
||||
// {
|
||||
// id: 1,
|
||||
// top: 80,
|
||||
// height: 56,
|
||||
// },
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
id: 0,
|
||||
gridIndex: 0,
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
inside: true,
|
||||
},
|
||||
type: 'time',
|
||||
min: getTodayStart(new Date()), // <===
|
||||
max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <===
|
||||
splitNumber: 10,
|
||||
axisLabel: {
|
||||
margin: 12,
|
||||
// rotate: -15,
|
||||
formatter: function (val) {
|
||||
return new Date(val)
|
||||
.toLocaleTimeString()
|
||||
.split(':')
|
||||
.slice(0, 2)
|
||||
.join(':');
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
// data: getXaxisRange(getTodayStart(new Date())),
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
gridIndex: 0,
|
||||
axisLabel: { show: false },
|
||||
axisLine: { show: false },
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
// 主y轴
|
||||
{
|
||||
id: 0,
|
||||
gridIndex: 0,
|
||||
type: 'value',
|
||||
splitLine: { show: false },
|
||||
name: '设备1',
|
||||
nameLocation: 'center',
|
||||
nameGap: 56,
|
||||
nameRotate: 0,
|
||||
nameTextStyle: {
|
||||
fontSize: 18,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {},
|
||||
},
|
||||
axisLabel: { show: false },
|
||||
axisTick: { show: false },
|
||||
},
|
||||
// 辅y轴
|
||||
{
|
||||
id: 1,
|
||||
gridIndex: 0,
|
||||
type: 'value',
|
||||
splitLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
axisTick: { show: false },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '设备1',
|
||||
xAxisIndex: 0,
|
||||
yAxisIndex: 0,
|
||||
type: 'custom',
|
||||
renderItem: renderItem,
|
||||
itemStyle: {
|
||||
opacity: 0.8,
|
||||
},
|
||||
encode: {
|
||||
x: [1, 2],
|
||||
y: 0,
|
||||
},
|
||||
//function getTimestamp(point) {
|
||||
// const t = new Date();
|
||||
// const [y,m,d] = [t.getFullYear(),t.getMonth(),t.getDate()]
|
||||
// const [h,M] = point.split(':')
|
||||
// return new Date(y,m,d,h,M,0,0).getTime()
|
||||
//}
|
||||
data: [
|
||||
{
|
||||
// 01:00 ~ 05:00
|
||||
name: '运行',
|
||||
value: [0, 1695747600000, 1695762000000, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[0].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
// 5:00 ~ 8:00
|
||||
name: '故障',
|
||||
value: [0, 1695762000000, 1695772800000, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[1].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
// 8:00 ~ 8:39
|
||||
name: '计划停机',
|
||||
value: [0, 1695772800000, 1695775140000, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[2].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
// 08:39 ~ 18:00
|
||||
name: '运行',
|
||||
value: [0, 1695775140000, 1695808800000, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[0].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
// 18:00 ~ 23:30
|
||||
name: '计划停机',
|
||||
value: [0, 1695808800000, 1695828600000, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[2].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const el = document.getElementById('app');
|
||||
const myChart = echarts.init(el);
|
||||
|
||||
console.log('mychart', myChart);
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
0
src/views/equipment/timing-diagram/status/demo.js
Normal file
0
src/views/equipment/timing-diagram/status/demo.js
Normal file
235
src/views/equipment/timing-diagram/status/gantt.js
Normal file
235
src/views/equipment/timing-diagram/status/gantt.js
Normal file
@ -0,0 +1,235 @@
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
|
||||
function renderItem(params, api) {
|
||||
var categoryIndex = api.value(0);
|
||||
var start = api.coord([api.value(1), categoryIndex]);
|
||||
var end = api.coord([api.value(2), categoryIndex]);
|
||||
var height = api.size([0, 1])[1] * 1;
|
||||
// var height = api.size([0, 1])[1] * 0.8;
|
||||
// var height = 56;
|
||||
var rectShape = echarts.graphic.clipRectByRect(
|
||||
{
|
||||
x: start[0],
|
||||
y: start[1] - height / 2,
|
||||
width: end[0] - start[0],
|
||||
height: height,
|
||||
},
|
||||
{
|
||||
x: params.coordSys.x,
|
||||
y: params.coordSys.y,
|
||||
width: params.coordSys.width,
|
||||
height: params.coordSys.height,
|
||||
}
|
||||
);
|
||||
return (
|
||||
rectShape && {
|
||||
type: 'rect',
|
||||
transition: ['shape'],
|
||||
shape: rectShape,
|
||||
style: api.style(),
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/** 颜色配置 */
|
||||
const types = [
|
||||
{ name: '运行', color: '#5ad8a6' },
|
||||
{ name: '故障', color: '#fc9c91' },
|
||||
{ name: '计划停机', color: '#000' },
|
||||
];
|
||||
|
||||
|
||||
/** 从时间戳获取 startTime */
|
||||
function getStartTime(timestamp) {
|
||||
return new Date(new Date(timestamp).toLocaleDateString()).getTime();
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default class GanttGraph {
|
||||
constructor(el) {
|
||||
this.chart = null;
|
||||
this.el = el;
|
||||
/** 默认配置 */
|
||||
this.grid = {
|
||||
top: 32,
|
||||
left: 128,
|
||||
right: 128,
|
||||
bottom: 64,
|
||||
}
|
||||
this.tooltip = {
|
||||
formatter: function (params) {
|
||||
return (
|
||||
params.marker +
|
||||
params.name +
|
||||
': ' +
|
||||
new Date(params.value[1]).toLocaleTimeString() +
|
||||
' - ' +
|
||||
new Date(params.value[2]).toLocaleTimeString()
|
||||
);
|
||||
},
|
||||
}
|
||||
this.xAxis = {
|
||||
type: 'time',
|
||||
min: getStartTime(1691568181000), // <===
|
||||
max: getStartTime(1691568181000 + 3600 * 24 * 1000), // <===
|
||||
splitNumber: 10,
|
||||
axisLabel: {
|
||||
// rotate: -15,
|
||||
formatter: function (val) {
|
||||
return new Date(val).toLocaleTimeString();
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
}
|
||||
this.yAxis = [
|
||||
{
|
||||
interval: 40,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 18,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
},
|
||||
// data: [], // <====
|
||||
data: ['设备1', '设备2', '设备3', '设备4'],
|
||||
},
|
||||
{
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '',
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
]
|
||||
this.series = [
|
||||
{
|
||||
type: 'custom',
|
||||
renderItem: renderItem,
|
||||
itemStyle: {
|
||||
opacity: 0.8,
|
||||
},
|
||||
encode: {
|
||||
x: [1, 2],
|
||||
y: 0,
|
||||
},
|
||||
// data: [], // <===
|
||||
data: [
|
||||
{
|
||||
name: '运行',
|
||||
value: [
|
||||
0,
|
||||
1691568181000,
|
||||
1691568181000 + 60 * 60 * 1000,
|
||||
60 * 10 * 1000,
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[0].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '计划停机',
|
||||
value: [
|
||||
0,
|
||||
1691578581000,
|
||||
1691578581000 + 10 * 60 * 1000,
|
||||
60 * 10 * 1000,
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[2].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '运行',
|
||||
value: [
|
||||
1,
|
||||
1691568181000,
|
||||
1691568181000 + 60 * 60 * 1000,
|
||||
60 * 10 * 1000,
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[0].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '故障',
|
||||
value: [
|
||||
2,
|
||||
1691538181000,
|
||||
1691538181000 + 60 * 60 * 1000,
|
||||
60 * 10 * 1000,
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[1].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '运行',
|
||||
value: [
|
||||
2,
|
||||
1691578181000,
|
||||
1691578181000 + 90 * 60 * 1000,
|
||||
90 * 10 * 1000,
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[0].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '计划停机',
|
||||
value: [
|
||||
3,
|
||||
1691528181000,
|
||||
1691528181000 + 240 * 60 * 1000,
|
||||
240 * 10 * 1000,
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[2].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
init() {
|
||||
this.chart = echarts.init(this.el);
|
||||
this.chart.setOption(this.getOption())
|
||||
}
|
||||
|
||||
getOption() {
|
||||
const { grid, xAxis, yAxis, series, tooltip } = this;
|
||||
return {
|
||||
grid, xAxis, yAxis, series, tooltip
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -24,6 +24,7 @@
|
||||
:formConfigs="searchBarFormConfig"
|
||||
ref="search-bar"
|
||||
:remove-blue="true"
|
||||
@select-changed="handleSearchBarSelectChange"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
</el-row>
|
||||
|
||||
@ -77,41 +78,7 @@
|
||||
class="graphs"
|
||||
v-show="graphList.length"
|
||||
id="status-chart"
|
||||
style="height: 1px; flex: 1">
|
||||
<!-- <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>
|
||||
style="height: 1px; flex: 1"></div>
|
||||
<h2 v-if="!graphList || graphList.length == 0" class="no-data-bg"></h2>
|
||||
</div>
|
||||
</el-row>
|
||||
@ -140,46 +107,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
var types = [
|
||||
{ name: '运行', color: '#5ad8a6' },
|
||||
{ name: '故障', color: '#fc9c91' },
|
||||
{ name: '计划停机', color: '#000' },
|
||||
];
|
||||
function getStartTime(timestamp) {
|
||||
return new Date(new Date(timestamp).toLocaleDateString()).getTime();
|
||||
}
|
||||
function renderItem(params, api) {
|
||||
var categoryIndex = api.value(0);
|
||||
var start = api.coord([api.value(1), categoryIndex]);
|
||||
var end = api.coord([api.value(2), categoryIndex]);
|
||||
var height = api.size([0, 1])[1] * 1;
|
||||
// var height = api.size([0, 1])[1] * 0.8;
|
||||
// var height = 56;
|
||||
var rectShape = echarts.graphic.clipRectByRect(
|
||||
{
|
||||
x: start[0],
|
||||
y: start[1] - height / 2,
|
||||
width: end[0] - start[0],
|
||||
height: height,
|
||||
},
|
||||
{
|
||||
x: params.coordSys.x,
|
||||
y: params.coordSys.y,
|
||||
width: params.coordSys.width,
|
||||
height: params.coordSys.height,
|
||||
}
|
||||
);
|
||||
return (
|
||||
rectShape && {
|
||||
type: 'rect',
|
||||
transition: ['shape'],
|
||||
shape: rectShape,
|
||||
style: api.style(),
|
||||
}
|
||||
);
|
||||
}
|
||||
// import * as echarts from 'echarts';
|
||||
import Gantt from './gantt';
|
||||
|
||||
export default {
|
||||
name: 'SGStatus',
|
||||
@ -195,6 +124,7 @@ export default {
|
||||
placeholder: '请选择产线',
|
||||
selectOptions: [],
|
||||
param: 'lineId',
|
||||
onchange: true,
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
@ -207,18 +137,13 @@ export default {
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间段',
|
||||
// dateType: 'daterange', // datetimerange
|
||||
dateType: 'date',
|
||||
// format: 'yyyy-MM-dd HH:mm:ss',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
// valueFormat: 'timestamp',
|
||||
rangeSeparator: '-',
|
||||
// startPlaceholder: '开始日期',
|
||||
// endPlaceholder: '结束日期',
|
||||
placeholder: '选择日期',
|
||||
// defaultTime: ['00:00:00', '23:59:59'],
|
||||
param: 'recordTime',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@ -246,6 +171,8 @@ export default {
|
||||
graphList: [],
|
||||
open: false,
|
||||
eqList: [],
|
||||
startTime: null,
|
||||
gantt: null
|
||||
// demo: [
|
||||
// [
|
||||
// {
|
||||
@ -266,176 +193,6 @@ export default {
|
||||
// },
|
||||
// ],
|
||||
// ],
|
||||
chartOption: {
|
||||
grid: {
|
||||
top: 32,
|
||||
left: 128,
|
||||
right: 128,
|
||||
bottom: 64,
|
||||
},
|
||||
tooltip: {
|
||||
// show: false,
|
||||
formatter: function (params) {
|
||||
return (
|
||||
params.marker +
|
||||
params.name +
|
||||
': ' +
|
||||
new Date(params.value[1]).toLocaleTimeString() +
|
||||
' - ' +
|
||||
new Date(params.value[2]).toLocaleTimeString()
|
||||
);
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
min: getStartTime(1691568181000), // <===
|
||||
max: getStartTime(1691568181000 + 3600 * 24 * 1000), // <===
|
||||
splitNumber: 10,
|
||||
axisLabel: {
|
||||
// rotate: -15,
|
||||
formatter: function (val) {
|
||||
return new Date(val).toLocaleTimeString();
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
interval: 40,
|
||||
axisLine: {
|
||||
// show: false,
|
||||
lineStyle: {
|
||||
color: '',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 18,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
},
|
||||
// data: [], // <====
|
||||
data: ['设备1', '设备2', '设备3', '设备4'],
|
||||
},
|
||||
{
|
||||
axisLine: {
|
||||
// show: false,
|
||||
lineStyle: {
|
||||
color: '',
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'custom',
|
||||
renderItem: renderItem,
|
||||
itemStyle: {
|
||||
opacity: 0.8,
|
||||
},
|
||||
encode: {
|
||||
x: [1, 2],
|
||||
y: 0,
|
||||
},
|
||||
// data: [], // <===
|
||||
data: [
|
||||
{
|
||||
name: '运行',
|
||||
value: [
|
||||
0,
|
||||
1691568181000,
|
||||
1691568181000 + 60 * 60 * 1000,
|
||||
60 * 10 * 1000,
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[0].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '计划停机',
|
||||
value: [
|
||||
0,
|
||||
1691578581000,
|
||||
1691578581000 + 10 * 60 * 1000,
|
||||
60 * 10 * 1000,
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[2].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '运行',
|
||||
value: [
|
||||
1,
|
||||
1691568181000,
|
||||
1691568181000 + 60 * 60 * 1000,
|
||||
60 * 10 * 1000,
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[0].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '故障',
|
||||
value: [
|
||||
2,
|
||||
1691538181000,
|
||||
1691538181000 + 60 * 60 * 1000,
|
||||
60 * 10 * 1000,
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[1].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '运行',
|
||||
value: [
|
||||
2,
|
||||
1691578181000,
|
||||
1691578181000 + 90 * 60 * 1000,
|
||||
90 * 10 * 1000,
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[0].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '计划停机',
|
||||
value: [
|
||||
3,
|
||||
1691528181000,
|
||||
1691528181000 + 240 * 60 * 1000,
|
||||
240 * 10 * 1000,
|
||||
],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[2].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
@ -443,7 +200,7 @@ export default {
|
||||
this.initProductline();
|
||||
this.initWorksection();
|
||||
this.initEquipment();
|
||||
this.getList();
|
||||
// this.getList();
|
||||
},
|
||||
mounted() {},
|
||||
watch: {
|
||||
@ -512,7 +269,8 @@ export default {
|
||||
|
||||
initChart() {
|
||||
const el = document.getElementById('status-chart');
|
||||
this.chart = echarts.init(el);
|
||||
this.gantt = new Gantt(el);
|
||||
this.gantt.init();
|
||||
},
|
||||
|
||||
/** 重置查询条件 */
|
||||
@ -592,9 +350,42 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
handleSearchBarSelectChange({ param, value }) {
|
||||
if (!value) {
|
||||
this.searchBarFormConfig[1].selectOptions = [];
|
||||
return;
|
||||
}
|
||||
switch (param) {
|
||||
case 'lineId':
|
||||
this.$axios({
|
||||
url: '/base/workshop-section/listByParentId',
|
||||
method: 'get',
|
||||
params: {
|
||||
id: value,
|
||||
},
|
||||
}).then(({ code, data }) => {
|
||||
if (code == 0) {
|
||||
this.searchBarFormConfig[1].selectOptions = data.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
handleSearchBarBtnClick({ btnName, ...payload }) {
|
||||
switch (btnName) {
|
||||
case 'search':
|
||||
if (!payload.recordTime || payload.recordTime.length <= 0) {
|
||||
this.$message.error('请选择时间段');
|
||||
return;
|
||||
}
|
||||
|
||||
this.startTime = new Date(payload.recordTime).getTime();
|
||||
|
||||
this.queryParams.lineId = payload.lineId || null;
|
||||
this.queryParams.sectionId = payload.sectionId || null;
|
||||
this.queryParams.equipmentId = payload.equipmentId || null;
|
||||
|
||||
@ -0,0 +1,270 @@
|
||||
<!--
|
||||
filename: dialogForm.vue
|
||||
author: liubin
|
||||
date: 2023-09-11 15:55:13
|
||||
description: DialogForm for qualityInspectionRecord only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="innerDataForm"
|
||||
label-width="100px"
|
||||
v-loading="formLoading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="检测内容"
|
||||
prop="inspectionDetId"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-select
|
||||
v-model="innerDataForm.inspectionDetId"
|
||||
placeholder="请选择检测内容"
|
||||
filterable
|
||||
clearable
|
||||
@change="handleInspectionDetChange">
|
||||
<el-option
|
||||
v-for="opt in inspectionDetList"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="来源"
|
||||
prop="source"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-select
|
||||
v-model="innerDataForm.source"
|
||||
placeholder="请选择来源"
|
||||
filterable
|
||||
clearable
|
||||
@change="$emit('update', innerDataForm)">
|
||||
<el-option
|
||||
v-for="opt in [
|
||||
{ label: '手动', value: 1 },
|
||||
{ label: '自动', value: 2 },
|
||||
]"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="产线"
|
||||
prop="productionLineId"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-select
|
||||
v-model="innerDataForm.productionLineId"
|
||||
placeholder="请选择产线"
|
||||
filterable
|
||||
clearable
|
||||
@change="handleProductlineChange">
|
||||
<el-option
|
||||
v-for="opt in productionLineList"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="工段"
|
||||
prop="sectionId"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-select
|
||||
v-model="innerDataForm.sectionId"
|
||||
placeholder="请选择工段"
|
||||
clearable
|
||||
filterable
|
||||
@change="$emit('update', innerDataForm)">
|
||||
<el-option
|
||||
v-for="opt in sectionList"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="检测人员" prop="checkPerson">
|
||||
<el-input
|
||||
v-model="innerDataForm.checkPerson"
|
||||
clearable
|
||||
@change="$emit('update', innerDataForm)"
|
||||
placeholder="请输入检测人员" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="检测时间"
|
||||
prop="checkTime"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-date-picker
|
||||
v-model="innerDataForm.checkTime"
|
||||
type="datetime"
|
||||
placeholder="请选择检测时间"
|
||||
value-format="timestamp"
|
||||
@change="$emit('update', innerDataForm)"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col>
|
||||
<el-form-item label="描述" prop="explainText">
|
||||
<el-input
|
||||
v-model="innerDataForm.explainText"
|
||||
placeholder="请输入描述信息"
|
||||
@change="$emit('update', innerDataForm)"
|
||||
type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="innerDataForm.remark"
|
||||
@change="$emit('update', innerDataForm)"
|
||||
placeholder="请输入备注"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DialogForm',
|
||||
model: {
|
||||
prop: 'dataForm',
|
||||
event: 'update',
|
||||
},
|
||||
emits: ['update'],
|
||||
components: {},
|
||||
props: {
|
||||
dataForm: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formLoading: true,
|
||||
inspectionDetList: [],
|
||||
productionLineList: [],
|
||||
sectionList: [],
|
||||
innerDataForm: {},
|
||||
cacheInspectionDetList: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
Promise.all([this.getProductLineList(), this.getInspectionDetList()]).then(
|
||||
() => {
|
||||
this.formLoading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
watch: {
|
||||
// 'innerDataForm.productionLineId': {
|
||||
// handler: async function (plId) {
|
||||
// if (plId) await this.getWorksectionList(plId);
|
||||
// },
|
||||
// immediate: true,
|
||||
// },
|
||||
dataForm: {
|
||||
handler: function (dataForm) {
|
||||
this.innerDataForm = Object.assign({}, dataForm);
|
||||
|
||||
if (dataForm.productionLineId)
|
||||
this.getWorksectionList(dataForm.productionLineId);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/** 模拟透传 ref */
|
||||
validate(cb) {
|
||||
return this.$refs.form.validate(cb);
|
||||
},
|
||||
resetFields(args) {
|
||||
return this.$refs.form.resetFields(args);
|
||||
},
|
||||
|
||||
handleInspectionDetChange(value) {
|
||||
const { id, content } = this.cacheInspectionDetList.find(
|
||||
(item) => item.id == value
|
||||
);
|
||||
this.innerDataForm.inspectionDetId = id;
|
||||
this.innerDataForm.inspectionDetContent = content;
|
||||
this.$emit('update', this.innerDataForm);
|
||||
},
|
||||
|
||||
async handleProductlineChange(id) {
|
||||
// await this.getWorksectionList(id);
|
||||
this.innerDataForm.sectionId = null;
|
||||
this.$emit('update', this.innerDataForm);
|
||||
},
|
||||
|
||||
// getCode
|
||||
async getCode(url) {
|
||||
const response = await this.$axios(url);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// 获取产线列表
|
||||
async getProductLineList() {
|
||||
const response = await this.$axios('/base/production-line/listAll');
|
||||
this.productionLineList = response.data.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
},
|
||||
|
||||
// 获取检测内容列表
|
||||
async getInspectionDetList() {
|
||||
const response = await this.$axios(
|
||||
'/base/quality-inspection-det/listAll'
|
||||
);
|
||||
this.cacheInspectionDetList = response.data;
|
||||
this.inspectionDetList = response.data.map((item) => ({
|
||||
label: item.content,
|
||||
value: item.id,
|
||||
}));
|
||||
},
|
||||
|
||||
// 获取工段列表
|
||||
async getWorksectionList(plId) {
|
||||
const response = await this.$axios(
|
||||
'/base/workshop-section/listByParentId',
|
||||
{
|
||||
params: {
|
||||
id: plId,
|
||||
},
|
||||
}
|
||||
);
|
||||
this.sectionList = response.data.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-date-editor,
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -39,7 +39,7 @@
|
||||
@close="cancel"
|
||||
@cancel="cancel"
|
||||
@confirm="submitForm">
|
||||
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||
<DialogForm v-if="open" ref="form" v-model="form" />
|
||||
</base-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@ -53,14 +53,15 @@ import {
|
||||
getQualityInspectionRecordPage,
|
||||
exportQualityInspectionRecordExcel,
|
||||
} from '@/api/monitoring/qualityInspectionRecord';
|
||||
import Editor from '@/components/Editor';
|
||||
// import Editor from '@/components/Editor';
|
||||
import moment from 'moment';
|
||||
import DialogForm from './dialogForm.vue';
|
||||
|
||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||
export default {
|
||||
name: 'QualityInspectionRecord',
|
||||
components: {
|
||||
Editor,
|
||||
DialogForm,
|
||||
},
|
||||
mixins: [basicPageMixin],
|
||||
data() {
|
||||
@ -272,32 +273,38 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getProductLineList();
|
||||
// this.getProductLineList();
|
||||
},
|
||||
watch: {
|
||||
// 注册弹窗里产线改变时的监听事件
|
||||
'form.productionLineId': {
|
||||
form: {
|
||||
handler: function (val) {
|
||||
if (val == null) return;
|
||||
this.$axios('/base/workshop-section/listByParentId', {
|
||||
params: {
|
||||
id: val,
|
||||
},
|
||||
}).then((response) => {
|
||||
this.$set(
|
||||
this.rows[1][1], // 这里索引是硬编码，所以当 this.rows 里数据顺序改变时，此处也要改
|
||||
'options',
|
||||
response.data.map((item) => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
};
|
||||
})
|
||||
);
|
||||
});
|
||||
console.log('form change:', val);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
// 注册弹窗里产线改变时的监听事件
|
||||
// 'form.productionLineId': {
|
||||
// handler: function (val) {
|
||||
// if (val == null) return;
|
||||
// this.$axios('/base/workshop-section/listByParentId', {
|
||||
// params: {
|
||||
// id: val,
|
||||
// },
|
||||
// }).then((response) => {
|
||||
// this.$set(
|
||||
// this.rows[1][1], // 这里索引是硬编码，所以当 this.rows 里数据顺序改变时，此处也要改
|
||||
// 'options',
|
||||
// response.data.map((item) => {
|
||||
// return {
|
||||
// label: item.name,
|
||||
// value: item.id,
|
||||
// };
|
||||
// })
|
||||
// );
|
||||
// });
|
||||
// },
|
||||
// immediate: true,
|
||||
// },
|
||||
},
|
||||
methods: {
|
||||
/** 获取搜索栏的产线列表 */
|
||||
@ -366,7 +373,11 @@ export default {
|
||||
const id = row.id;
|
||||
getQualityInspectionRecord(id).then((response) => {
|
||||
/** 因为后端返回的时间是时间戳格式，需转换 */
|
||||
this.form = this.filterData(response.data, Object.keys(this.form));
|
||||
const info = {}
|
||||
Object.keys(this.form).forEach(key => {
|
||||
info[key] = response.data[key]
|
||||
});
|
||||
this.form = info;
|
||||
this.open = true;
|
||||
this.title = '修改质量检查信息记录表';
|
||||
});
|
||||
|
||||
@ -147,7 +147,7 @@ export default {
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '单位/片',
|
||||
name: '检测数量',
|
||||
nameTextStyle: {
|
||||
color: '#999',
|
||||
fontSize: 14,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user