From 2ec3250c83921ba91836ef8af129a74fef9d3c6a Mon Sep 17 00:00:00 2001
From: lzhe <181968431@qq.com>
Date: 星期日, 01 十二月 2024 23:30:47 +0800
Subject: [PATCH] 1
---
src/views/mdc/first-workpiece-detail.vue | 174 ++++++++++++++++++++--------------
src/views/mdc/processParam/index.vue | 1
src/views/mdc/first-workpiece-process.vue | 2
src/views/mdc/components/process-charts.vue | 91 +++++++++++------
4 files changed, 162 insertions(+), 106 deletions(-)
diff --git a/src/views/mdc/components/process-charts.vue b/src/views/mdc/components/process-charts.vue
index 1e375d7..145050a 100644
--- a/src/views/mdc/components/process-charts.vue
+++ b/src/views/mdc/components/process-charts.vue
@@ -5,21 +5,24 @@
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/TimeAlarm.vue
-->
<template>
- <div ref="processCharts" style="width: 100%;height:32px;" id="record"></div>
+ <div ref="processCharts" style="width: 100%;height:40px;" id="record"></div>
</template>
<script>
import * as echarts from 'echarts';
+import T from '@/components/scEcharts/echarts-theme-T.js';
+import moment from 'moment'
export default {
data() {
return {
option: {
- // tooltip: {
- // trigger: 'axis',
- // axisPointer: {
- // type: 'shadow'
- // }
- // },
+ tooltip: {
+ position: ['50%','50%']
+ // trigger: 'axis',
+ // axisPointer: {
+ // type: 'shadow'
+ // }
+ },
grid: {
left: 0,
right: 0,
@@ -27,8 +30,7 @@
},
xAxis: {
type: 'value',
- min: 0,
- max: 24, // 鏍规嵁闇�瑕佽皟鏁存渶澶у��
+ interval: 0.05,
axisLabel: {
show: false,
margin: 0
@@ -44,41 +46,66 @@
},
axisTick: {
show: false
- },
- boundaryGap: false, // 鐣欏嚭涓�鐐圭┖闂�
+ }
+ // "type": "value",
+ // "interval": 0.05,
+ // "axisLabel": {
+
+ // }
},
yAxis: {
type: 'category',
- data: ['鏌卞瓙'],
+ data: [''],
show: false
},
series: []
}
}
},
+ props: ['index','tableData'],
methods: {
-
+ getTableData(id) {
+ this.$HTTP.get(`/api/workinghour/working-process`, {id}).then(res => {
+ if (res.code === 200) {
+ if(res.data.length == 0) return;
+ var timeRange = {};
+ console.log(res.data,1111111)
+ timeRange.startTime = res.data[0].startTime;
+ timeRange.endTime = res.data[res.data.length - 1].endTime;
+ var total = Math.abs(moment(timeRange.startTime).diff(moment(timeRange.endTime)));
+ var start = timeRange.startTime;
+ var arr = [];
+ res.data.map((item, i) => {
+ var current = Math.abs(moment(start).diff(moment(item.endTime)))
+ start = item.endTime;
+ //console.log(current / total,'鐧惧垎姣�')
+ if(item.deviceStatus == "2") {
+ item.deviceStatusName = "杩愯";
+ item.color = "#307f45";
+ }else {
+ item.deviceStatusName = "寰呮満";
+ item.color = "#fdff85";
+ }
+ var obj = {name: item.deviceStatusName,type: 'bar',stack: 'total',barWidth: "20px",data: [current / total],itemStyle: {color: item.color},"tooltip": {
+ "show": true,
+ "trigger": "item",
+ formatter: (value, ticket) => {
+ return `${item.deviceStatusName}: ${item.startTime} - ${item.endTime}`
+ }
+ }};
+ arr.push(obj);
+ })
+ this.option.series = arr;
+ var recordDom = this.$refs.processCharts;
+ var myChart = echarts.init(recordDom);
+ myChart.setOption(this.option);
+ }
+ })
+ }
},
mounted() {
- // this.option.series = [
- // {name: '绌洪棽鏃堕棿',type: 'bar',stack: 'total',itemStyle: {color: '#fdff85'},data: [2]},
- // {name: '宸ヤ綔鏃堕棿',type: 'bar',stack: 'total',itemStyle: {color: '#307f45'},data: [3]}
- // ]
- var arr = [];
- for(var i=0;i<24;i++) {
- var obj = {name: '绌洪棽鏃堕棿',type: 'bar',stack: 'total',barCategoryGap: '0',barGap: '-100%',itemStyle: {color: '#fdff85'},data: [1]};
- if(Math.random() >= 0.5) {
- obj.itemStyle.color = "#fdff85";
- }else {
- obj.itemStyle.color = "#307f45";
- }
- arr.push(obj)
- }
- this.option.series = arr;
- //console.log(this.option.series)
- var recordDom = this.$refs.processCharts;
- var myChart = echarts.init(recordDom);
- myChart.setOption(this.option);
+ var id = this.tableData[this.index - 1].id;
+ this.getTableData(id);
},
}
</script>
diff --git a/src/views/mdc/first-workpiece-detail.vue b/src/views/mdc/first-workpiece-detail.vue
index 7f90678..e6c7a69 100644
--- a/src/views/mdc/first-workpiece-detail.vue
+++ b/src/views/mdc/first-workpiece-detail.vue
@@ -8,76 +8,39 @@
-->
<template>
<el-main style="height: 100%;" class="timeAnalysis">
- <el-card shadow="never" body-style="height: 100%;padding: 0;" style="margin-bottom: 12px;">
- <div class="detailModel" v-for="item in detailModelList">
- <div>
- <div class="">闆朵欢鍚嶇О</div><div><process-charts></process-charts></div>
- </div>
- <div>
- <div>寮�濮嬫椂闂�</div><div><process-charts></process-charts></div>
- </div>
- <div>
- <div>缁撴潫鏃堕棿</div><div><process-charts></process-charts></div>
- </div>
- <div>
- <div>鍔犲伐鏈哄簥</div><div><process-charts></process-charts></div>
- </div>
- <div class="modelBtn">
- <el-button type="primary" @click="goFirstWorkProcess(item)">杩囩▼鍒嗘瀽</el-button>
+ <el-card body-style="height: 100%;padding: 0;" style="margin-bottom: 12px;">
+ <div class="tableOuter">
+ <div class="tableAll">
+ <div class="tableHeader">
+ <span v-for="item in tableHeader" :style="{'width': item.width}"> {{item.title}} </span>
+ </div>
+ <div v-for="(item,index) in tableData" class="tableBody">
+ <span style="width:60px;" v-if="item.id">{{item.index}}</span>
+ <span style="width:80px;" v-if="item.id">{{item.partNo}}</span>
+ <span style="width:80px;" v-if="item.id">{{item.processNo}}</span>
+ <span style="width:60px;" v-if="item.id">{{item.version}}</span>
+ <span style="width:100px;" v-if="item.id">{{item.workstationName}}</span>
+ <span style="width:145px;" v-if="item.id">{{item.startTime}}</span>
+ <span style="width:145px;" v-if="item.id">{{item.endTime}}</span>
+ <span style="width:100px;" v-if="item.id">{{ convertSeconds(item.occupancySecs || 0) }}</span>
+ <span style="width:100px;" v-if="item.id">{{ convertSeconds(item.clampingSecs || 0) }}</span>
+ <span style="width:100px;" v-if="item.id">{{ convertSeconds(item.firstWorkingSecs || 0) }}</span>
+ <span style="width:100px;" v-if="item.id">{{ convertSeconds(item.firstMeasureSecs || 0) }}</span>
+ <span style="width:100px;" v-if="item.id">{{ convertSeconds(item.lastRemoveSecs || 0) }}</span>
+ <span style="width:80px;" v-if="item.id">{{ convertSeconds(item.processingSecs || 0) }}</span>
+ <span style="width:80px;" v-if="item.id">{{ convertSeconds(item.prepareSecs || 0) }}</span>
+ <span style="width:80px;" v-if="item.id">{{ convertSeconds(item.singleProcessSecs || 0) }}</span>
+ <span style="width:60px;" v-if="item.id">{{item.amount}}</span>
+ <!-- 鍥捐〃 -->
+ <el-card v-if="!item.id" shadow="never" body-style="padding: 0;" class="chartsDiv">
+ <process-charts :index="index" :tableData="tableData"></process-charts>
+ <div class="modelBtn">
+ <el-button type="primary" @click="goFirstWorkProcess(item,index)">杩囩▼鍒嗘瀽</el-button>
+ </div>
+ </el-card>
+ </div>
</div>
</div>
- </el-card>
- <el-card body-style="height: 100%;padding: 0;" style="margin-bottom: 12px;">
- <el-table :data="tableData" border>
- <el-table-column prop="index" label="搴忓彿" width="60"></el-table-column>
- <el-table-column prop="partNo" label="闆朵欢鍙�" width="80"></el-table-column>
- <el-table-column prop="processNo" label="宸ュ簭鍙�" width="80"></el-table-column>
- <el-table-column prop="version" label="鐗堟" width="60"></el-table-column>
- <el-table-column prop="workstationName" label="鏈哄簥" width="100"></el-table-column>
- <el-table-column prop="startTime" label="寮�鏈烘椂闂�" width="145"></el-table-column>
- <el-table-column prop="endTime" label="缁撴潫鏃堕棿" width="145"></el-table-column>
- <el-table-column prop="occupancySecs" label="鍗犳満鏃堕棿" width="100">
- <template #default="scope">
- {{ convertSeconds(scope.row.occupancySecs || 0) }}
- </template>
- </el-table-column>
- <el-table-column prop="clampingSecs" label="瑁呭す璋冭瘯鏃堕棿" width="100">
- <template #default="scope">
- {{ convertSeconds(scope.row.clampingSecs || 0) }}
- </template>
- </el-table-column>
- <el-table-column prop="firstWorkingSecs" label="棣栦欢鍒囧墛鏃堕棿" width="100">
- <template #default="scope">
- {{ convertSeconds(scope.row.firstWorkingSecs || 0) }}
- </template>
- </el-table-column>
- <el-table-column prop="firstMeasureSecs" label="棣栦欢璁￠噺鏃堕棿" width="100">
- <template #default="scope">
- {{ convertSeconds(scope.row.firstMeasureSecs || 0) }}
- </template>
- </el-table-column>
- <el-table-column prop="lastRemoveSecs" label="鏈欢鎷嗗嵏鏃堕棿" width="100">
- <template #default="scope">
- {{ convertSeconds(scope.row.lastRemoveSecs || 0) }}
- </template>
- </el-table-column>
- <el-table-column prop="processingSecs" label="鍔犲伐鏃堕棿" width="80">
- <template #default="scope">
- {{ convertSeconds(scope.row.processingSecs || 0) }}
- </template>
- </el-table-column>
- <el-table-column prop="prepareSecs" label="鍑嗗鏃堕棿" width="80">
- <template #default="scope">
- {{ convertSeconds(scope.row.prepareSecs || 0) }}
- </template>
- </el-table-column>
- <el-table-column prop="singleProcessSecs" label="鍗曚欢宸ユ椂" width="80">
- <template #default="scope">
- {{ convertSeconds(scope.row.singleProcessSecs || 0) }}
- </template>
- </el-table-column>
- <el-table-column prop="amount" label="鏁伴噺" width="60"></el-table-column>
- </el-table>
<el-footer>
<el-button type="primary">杈撳嚭</el-button>
</el-footer>
@@ -100,7 +63,25 @@
data() {
return {
detailModelList: [],
- tableData: []
+ tableData: [],
+ tableHeader: [
+ {title:'搴忓彿',width: '60px'},
+ {title:'闆朵欢鍙�',width: '80px'},
+ {title:'宸ュ簭鍙�',width: '80px'},
+ {title:'鐗堟',width: '60px'},
+ {title:'鏈哄簥',width: '100px'},
+ {title:'寮�鏈烘椂闂�',width: '145px'},
+ {title:'缁撴潫鏃堕棿',width: '145px'},
+ {title:'鍗犳満鏃堕棿',width: '100px'},
+ {title:'瑁呭す璋冭瘯鏃堕棿',width: '100px'},
+ {title:'棣栦欢鍒囧墛鏃堕棿',width: '100px'},
+ {title:'棣栦欢璁￠噺鏃堕棿',width: '100px'},
+ {title:'鏈欢鎷嗗嵏鏃堕棿',width: '100px'},
+ {title:'鍔犲伐鏃堕棿',width: '80px'},
+ {title:'鍑嗗鏃堕棿',width: '80px'},
+ {title:'鍗曚欢宸ユ椂',width: '80px'},
+ {title:'鏁伴噺',width: '60px'}
+ ]
}
},
created() {
@@ -155,8 +136,9 @@
// 杩斿洖鏍煎紡鍖栧悗鐨勫瓧绗︿覆
return result.join(' ');
},
- goFirstWorkProcess(item) {
- sthis.$router.push({path: `/mdc/first-workpiece-process`,query: {id:item.id}})
+ goFirstWorkProcess(item,index) {
+ var id = this.tableData[index - 1].id;
+ this.$router.push({path: `/mdc/first-workpiece-process`,query: {id}})
},
getTableData() {
this.$HTTP.post(`/api/workinghour/listByIds`, {ids: this.$route.query.ids.split(',')}).then(res => {
@@ -164,7 +146,14 @@
res.data.forEach((item,index)=> {
item.index = index + 1;
})
- this.tableData = res.data;
+ // 浣跨敤 reduce 鏂规硶鏉ユ瀯寤烘柊鐨勬暟缁�
+ var newArray = res.data.reduce((acc, curr) => {
+ acc.push(curr); // 灏嗗綋鍓嶅璞℃坊鍔犲埌绱Н鍣ㄤ腑
+ acc.push({}); // 鍦ㄥ綋鍓嶅璞″悗娣诲姞涓�涓┖瀵硅薄
+ return acc;
+ }, []);
+ this.tableData = newArray;
+ //console.log(this.tableData,111)
}
})
}
@@ -173,6 +162,47 @@
</script>
<style scoped>
+ .tableOuter {
+ width: 100%;
+ overflow: hidden;
+ }
+ .tableAll {
+ overflow-x: scroll;
+ white-space: nowrap;
+ border: 1px solid #e4e7ed;
+ }
+ .tableHeader,.tableBody {
+ width:1470px;
+ border-top: 1px solid #e4e7ed;
+ display: flex;
+ }
+ .tableHeader span {
+ padding: 8px 12px;
+ display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: normal;
+ word-break: break-all;
+ line-height: 23px;
+ color: #909399;
+ font-weight: bold;
+ border-right: 1px solid #e4e7ed;
+ }
+ .tableBody span {
+ padding: 8px 12px;
+ display: inline-block;
+ white-space: normal;
+ word-break: break-all;
+ color: #909399;
+ border-right: 1px solid #e4e7ed;
+ }
+ .chartsDiv {
+ padding-bottom: 12px;
+ width: 100%;
+ padding-top: 12px;
+ padding-left: 12px;
+ padding-right: 12px;
+ }
.detailModel > div {
height: 32px;
display: flex;
diff --git a/src/views/mdc/first-workpiece-process.vue b/src/views/mdc/first-workpiece-process.vue
index e4ce2ff..8741dfe 100644
--- a/src/views/mdc/first-workpiece-process.vue
+++ b/src/views/mdc/first-workpiece-process.vue
@@ -64,7 +64,7 @@
})
})
this.tableData = res.data;
- console.log(res.data,111)
+ console.log(JSON.stringify(res.data),111)
}
})
},
diff --git a/src/views/mdc/processParam/index.vue b/src/views/mdc/processParam/index.vue
index 8d7781c..d0d7983 100644
--- a/src/views/mdc/processParam/index.vue
+++ b/src/views/mdc/processParam/index.vue
@@ -325,7 +325,6 @@
showPie: false
})
}
-
},
setDeviceStatusOptions(data, myname) {
debugger
--
Gitblit v1.9.3