更新汝阳bug

src/views/equipment/analysis/efficiency/index.vue

@@ -1,4 +1,4 @@
-<!-- 
+<!--
     filename: index.vue
     author: liubin
     date: 2023-09-04 09:34:52
@@ -25,8 +25,9 @@
 							class="base-table__margin"
 							:table-props="tableProps"
 							:page="1"
-							:limit="10"
+							:limit="999"
 							:table-data="list"
+							:max-height="tableH"
 							@emitFun="handleEmitFun"></base-table>
 					</el-tab-pane>
 					<el-tab-pane
@@ -88,11 +89,12 @@
 <script>
 // import moment from 'moment';
 import basicPageMixin from '@/mixins/lb/basicPageMixin';
+import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
 import PieChart from './components/pieChart.vue';
 
 export default {
 	name: 'EfficiencyAnalysis',
-	mixins: [basicPageMixin],
+	mixins: [basicPageMixin,tableHeightMixin],
 	components: { PieChart },
 	props: {},
 	data() {
@@ -118,8 +120,8 @@ export default {
 			tableProps: [
 				{ prop: 'factoryName', label: '工厂' },
 				{ prop: 'lineName', label: '产线' },
-				{ prop: 'sectionName', label: '工段' },
-				{ prop: 'equipmentName', label: '设备' },
+				{ prop: 'sectionName', width:120,showOverflowtooltip :true,label: '工段' },
+				{ prop: 'equipmentName',width:150,showOverflowtooltip :true, label: '设备' },
 				{
 					label: '有效时间',
 					children: [
@@ -127,12 +129,13 @@ export default {
 							width: 128,
 							prop: 'workTime',
 							label: '工作时长[h]',
+							filter: (val) => (val != null ? val.toFixed(2) : '-'),
 						},
 						{
 							width: 128,
 							prop: 'workRate',
 							label: '百分比[%]',
-							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
+							filter: (val) => (val != null ? val.toFixed(2) : '-'),
 						},
 					],
 				},
@@ -143,8 +146,11 @@ export default {
 							width: 128,
 							prop: 'stopTime',
 							label: '停机时长[h]',
+							filter: (val) => (val != null ? val.toFixed(2) : '-'),
 						},
-						{ width: 128, prop: 'stopRate', label: '百分比[%]' },
+						{ width: 128, prop: 'stopRate', label: '百分比[%]',
+            filter: (val) => (val != null ? val.toFixed(2) : '-'),
+          },
 					],
 				},
 				{
@@ -154,14 +160,16 @@ export default {
 							width: 128,
 							prop: 'downTime',
 							label: '故障时长[h]',
-							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
+							filter: (val) => (val != null ? val.toFixed(2) : '-'),
 						},
-						{ width: 128, prop: 'downRate', label: '百分比[%]' },
+						{ width: 128, prop: 'downRate', label: '百分比[%]' ,
+            filter: (val) => (val != null ? val.toFixed(2) : '-'),
+          },
 						{
 							width: 128,
 							prop: 'timeEfficiency',
 							label: '时间开动率',
-							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
+							filter: (val) => (val != null ? val.toFixed(2) : '-'),
 						},
 					],
 				},
@@ -172,29 +180,31 @@ export default {
 							width: 128,
 							prop: 'realProcSpeed',
 							label: '实际加工速度',
+              filter: (val) => (val != null ? val.toFixed(2) : '-'),
 						},
 						{
 							width: 128,
 							prop: 'designProcSpeed',
 							label: '理论加工速度',
+              filter: (val) => (val != null ? val.toFixed(2) : '-'),
 						},
 						{
 							width: 128,
 							prop: 'peEfficiency',
 							label: '速度开动率',
-							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
+							filter: (val) => (val != null ? val.toFixed(2) : '-'),
 						},
 					],
 				},
 				{
 					prop: 'oee',
 					label: 'OEE',
-					filter: (val) => (val != null ? +val.toFixed(3) : '-'),
+					filter: (val) => (val != null ? val.toFixed(2) : '-'),
 				},
 				{
 					prop: 'teep',
 					label: 'TEEP',
-					filter: (val) => (val != null ? +val.toFixed(3) : '-'),
+					filter: (val) => (val != null ? val.toFixed(2) : '-'),
 				},
 				// {
 				// 	_action: 'view-trend',

src/views/equipment/analysis/exception/index.vue

@@ -1,4 +1,4 @@
-<!-- 
+<!--
     filename: index.vue
     author: liubin
     date: 2023-09-04 09:34:52
@@ -19,6 +19,7 @@
 			:page="queryParams.pageNo"
 			:limit="queryParams.pageSize"
 			:table-data="list"
+			:max-height="tableH"
 			@emitFun="handleEmitFun">
 			<!-- <method-btn
 				v-if="tableBtn.length"
@@ -41,10 +42,11 @@
 <script>
 import moment from 'moment';
 import basicPageMixin from '@/mixins/lb/basicPageMixin';
+import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
 
 export default {
 	name: 'ExceptionAnalysis',
-	mixins: [basicPageMixin],
+	mixins: [basicPageMixin, tableHeightMixin],
 	components: {},
 	props: {},
 	data() {

src/views/equipment/analysis/quality/components/lineChart.vue

@@ -1,8 +1,8 @@
-<!-- 
+<!--
     filename: lineChart.vue
     author: liubin
     date: 2023-09-04 13:45:00
-    description: 
+    description:
 -->
 
 <template>
@@ -11,6 +11,7 @@
 
 <script>
 import * as echarts from 'echarts';
+import edata from './data';
 
 export default {
 	name: 'LineChart',
@@ -43,7 +44,7 @@ export default {
 					eq.okQuantity,
 					eq.nokQuantity,
 					eq.totalQuantity,
-					eq.passRate?.toFixed(4),
+					typeof eq.passRate === "number" ? eq.passRate.toFixed(4) : "0.0000"
 				]);
 			});
 			return {

src/views/equipment/analysis/quality/index.vue

@@ -1,4 +1,4 @@
-<!-- 
+<!--
     filename: index.vue
     author: liubin
     date: 2023-09-04 09:34:52
@@ -26,6 +26,7 @@
 							:page="queryParams.pageNo"
 							:limit="queryParams.pageSize"
 							:table-data="list"
+							:max-height="tableH"
 							@emitFun="handleEmitFun"></base-table>
 					</el-tab-pane>
 					<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph">
@@ -47,10 +48,13 @@
 <script>
 import moment from 'moment';
 import LineChart from './components/lineChart.vue';
+import { parseTime } from '@/filter/code-filter';
+import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
 
 export default {
 	name: 'QualityAnalysis',
 	components: { LineChart },
+	mixins: [tableHeightMixin],
 	props: {},
 	data() {
 		const now = new Date();
@@ -92,24 +96,6 @@ export default {
 					endPlaceholder: '结束日期',
 					defaultTime: ['00:00:00', '23:59:59'],
 					param: 'recordTime',
-					defaultSelect: [
-						new Date(y, m, d)
-							.toLocaleString()
-							.split('/')
-							.map((item, index) => {
-								if (index == 1 || index == 2) return item.padStart(2, '0');
-								return item;
-							})
-							.join('-'),
-						new Date(y, m, d, 23, 59, 59)
-							.toLocaleString()
-							.split('/')
-							.map((item, index) => {
-								if (index == 1 || index == 2) return item.padStart(2, '0');
-								return item;
-							})
-							.join('-'),
-					],
 				},
 				{
 					type: 'button',
@@ -156,22 +142,23 @@ export default {
 				{
 					// width: 160,
 					prop: 'inQuantity',
-					label: '进片数量',
+					label: '进片数量[片]',
 				},
 				{
 					// width: 160,
 					prop: 'outQuantity',
-					label: '出片数量',
+					label: '出片数量[片]',
 				},
 				{
 					// width: 160,
 					prop: 'nokQuantity',
-					label: '破损/不合格数',
+					label: '破损/不合格数[片]',
 				},
 				{
 					// width: 160,
 					prop: 'passRate',
 					label: '合格率',
+          filter: (val) => (val != null ? val.toFixed(2) : '-'),
 				},
 			],
 			lineChartConfig: {
@@ -248,11 +235,23 @@ export default {
 	},
 	computed: {},
 	created() {
+		const end = new Date();
+		const start = new Date();
+		this.queryParams.recordTime = [
+			parseTime(start).substr(0, 10) + ' 00:00:00',
+			parseTime(end).substr(0, 10) + ' 23:59:59',
+		];
+		this.searchBarFormConfig[2].startPlaceholder = parseTime(start).substr(
+			0,
+			10
+		);
+		this.searchBarFormConfig[2].endPlaceholder = parseTime(end).substr(0, 10);
 		this.fillLineOptions();
 		this.fillProductOptions();
+		this.getList();
 	},
 	mounted() {
-		this.$refs['search-bar'].headBtnClick('search');
+		//this.$refs['search-bar'].headBtnClick('search');
 	},
 	methods: {
 		handleTabClick(tab, event) {

src/views/equipment/timing-diagram/output/components/lineChart.vue

@@ -1,8 +1,15 @@
-<!-- 
+<!--
+ * @Author: zwq
+ * @Date: 2024-10-29 09:47:40
+ * @LastEditors: zwq
+ * @LastEditTime: 2024-11-26 14:41:52
+ * @Description:
+-->
+<!--
     filename: lineChart.vue
     author: liubin
     date: 2023-09-04 13:45:00
-    description: 
+    description:
 -->
 
 <template>
@@ -32,6 +39,12 @@ export default {
 	mounted() {
 		this.init();
 	},
+  activated() {
+    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
+    if (this.chart) {
+      this.echart.resize();
+    }
+  },
 	beforeDestroy() {
 		if (this.chart) {
 			this.chart.dispose();
@@ -43,7 +56,10 @@ export default {
 			this.setOption(this.config);
 		},
 		setOption(option) {
-			if (this.chart) this.chart.setOption(option);
+			if (this.chart) this.chart.setOption(option,true);
+      window.addEventListener("resize", () => {
+        this.chart.resize();
+      });
 		},
 	},
 };

src/views/equipment/timing-diagram/output/index.vue

@@ -144,28 +144,18 @@ export default {
 			eqList: [],
 			graphList: [],
 			templateConfig: {
-				color: [
-					'#283D68',
-					'#FFB61F',
-					'#4481FF',
-					'#5AD8A6',
-					'#E97466',
-					'#ccc', //<=== 需按情况更新
-					'#ccc',
-					'#ccc',
-					'#ccc',
-					'#ccc',
-				],
 				grid: {
 					top: 48,
 					left: 48,
-					right: 24,
+					right: 90,
 					bottom: 24,
 				},
 				legend: {
-					top: 0,
-					right: 12,
-					padding: 6,
+					type: 'scroll',
+					orient: 'vertical',
+					right: 10,
+					top: 20,
+					bottom: 20,
 					itemWidth: 16,
 					itemHeight: 8,
 					itemGap: 20,
@@ -495,6 +485,7 @@ export default {
 					return;
 				}
 				this.graphList.push(...newEqlist);
+        this.templateConfig.series = [];
 				newEqlist.forEach(this.setSeries);
 			}
 			this.open = false;

src/views/equipment/timing-diagram/status/chart.js

@@ -86,7 +86,7 @@ export default class GanttGraph {
                         <span class="eq-name" style="margin-left: 4px;">${params.seriesName}</span>
                     </div>
                     <span class="run-status" style="margin-left: 8px; opacity: 0.6">${params.name}</span>
-            </div>            
+            </div>
             `
         }
     }
@@ -112,7 +112,7 @@ export default class GanttGraph {
             // top: 12 + 128 * this.gridIndex,
             top: 12 + 104 * this.gridIndex,
             right: 48,
-            left: 88,
+            left: 100,
             height: 56
         }
     }
@@ -175,7 +175,7 @@ export default class GanttGraph {
                 nameGap: 14,
                 nameRotate: 0,
                 nameTextStyle: {
-                    fontSize: 16,
+                    fontSize: 12,
                     color: '#000A'
                 },
                 axisLine: {
@@ -325,4 +325,4 @@ export default class GanttGraph {
         console.log(JSON.stringify(this.option, null, 2));
     }
 
-}
+}

src/views/equipment/timing-diagram/status/gantt.js

@@ -0,0 +1,302 @@
+import * as echarts from 'echarts'
+
+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] * 0.5;
+  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 - 16,
+      width: params.coordSys.width,
+      height: params.coordSys.height,
+    }
+  );
+
+  return (
+    rectShape && {
+      type: 'rect',
+      transition: ['shape'],
+      shape: rectShape,
+      style: api.style(),
+    }
+  );
+}
+
+// unused
+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(),
+  ];
+  // debugger;
+  return new Date(y, m, d).getTime();
+}
+
+
+/** 颜色配置 */
+const types = [
+  { name: '运行', color: '#288AFF' },
+  { name: '故障', color: '#FC9C91' },
+  { name: '计划停机', color: '#FFDC94' },
+  { name: '空白', color: '#F2F4F9' },
+];
+
+
+export default class GanttGraph {
+  // tooltip - 基本是固定的
+  tooltip = {
+    trigger: 'item',
+    axisPointer: {
+      type: 'none',
+    },
+    formatter: (params) => {
+      // debugger;
+      return `
+            <div style="display: flex; flex-direction: column;">
+                <span>${new Date(params.value[1]).toLocaleTimeString()} ~ ${new Date(params.value[2]).toLocaleTimeString()}</span>
+                <div style="display: flex; align-items: center; justify-content: space-between;">
+                    <div style="display: flex; align-items: center;">
+                        <span class="icon" style="width: 8px; height: 8px; border-radius: 2px; background: ${params.color}"></span>
+                        <span class="eq-name" style="margin-left: 4px;">${params.data.showName}</span>
+                    </div>
+                    <span class="run-status" style="margin-left: 8px; opacity: 0.6">${params.name}</span>
+            </div>
+            `
+    }
+  }
+  grid = []
+  xAxis = []
+  yAxis = []
+  series = []
+
+  constructor(el, startTime) {
+    this.el = el;
+    this.startTime = new Date(startTime);
+    // this.startTime = new Date(new Date('2023/10/8').toLocaleDateString());
+    // console.log('<> Gantt Created', this.startTime);
+  }
+  // 构造一个新的 grid
+  makeGrid() {
+    return {
+      top: 0,
+      right: 20,
+      left: 100,
+      bottom: 50,
+    }
+  }
+
+  // 构造一个 xAxis
+  makeXaxis() {
+    return [
+      {
+        axisTick: {
+          alignWithLabel: true,
+          inside: true,
+        },
+        type: 'time',
+        min: getTodayStart(this.startTime),
+        max: getStartTime(this.startTime.getTime() + 3600 * 24 * 1000),
+        splitNumber: 10,
+        axisLabel: {
+          margin: 12,
+          formatter: function (val) {
+            return new Date(val)
+              .toLocaleTimeString()
+              .split(':')
+              .slice(0, 2)
+              .join(':');
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#0005',
+          },
+        },
+        boundaryGap: false,
+        // data: getXaxisRange(getTodayStart(new Date())),
+      },
+    ]
+  }
+
+
+  // 构造一个 yAxis
+  makeYaxis(equipmentName) {
+    return [
+      // 主y轴
+      {
+        data: equipmentName,
+      }
+    ]
+  }
+
+  // 构造一个 series
+  makeSeries(xdata) {
+    const bgStartTime = this.startTime.getTime();
+    const bgEndTime = bgStartTime + 3600 * 24 * 1000;
+    return [
+      {
+        type: 'custom',
+        renderItem: renderItem,
+        itemStyle: {
+          opacity: 0.8,
+        },
+        encode: {
+          x: [1, 2],
+          y: 0,
+        },
+        data: xdata,
+      },
+    ]
+  }
+
+  init(data) {
+    if (!this.el) throw new Error('没有可供echarts初始化的容器')
+    if (typeof this.el == 'string') {
+      this.el = document.querySelector(this.el);
+    }
+    this.chart = echarts.init(this.el);
+    this.handleProps(data);
+
+    setTimeout(() => {
+      // debugger;
+      this.chart.setOption(this.option);
+    }, 200);
+  }
+
+  update(data) {
+    this.clear();
+    this.init(data);
+  }
+
+  resize() {
+    this.chart.resize();
+  }
+
+  get option() {
+    return {
+      tooltip: this.tooltip,
+      grid: this.grid,
+      xAxis: this.xAxis,
+      yAxis: this.yAxis,
+      series: this.series,
+      dataZoom: [
+        {
+          type: 'slider',
+          xAxisIndex: 0,
+          filterMode: 'weakFilter',
+          height: 20,
+          bottom: 0,
+          start: 0,
+          end: 80,
+          handleIcon:
+            'path://M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+          handleSize: '80%',
+          showDetail: false
+        },
+        {
+          type: 'inside',
+          id: 'insideX',
+          xAxisIndex: 0,
+          filterMode: 'weakFilter',
+          start: 0,
+          end: 80,
+          zoomOnMouseWheel: true,
+          moveOnMouseMove: true
+        },
+        {
+          type: 'slider',
+          yAxisIndex: 0,
+          zoomLock: true,
+          width: 10,
+          right: 10,
+          top: 70,
+          bottom: 20,
+          start: 0,
+          end: 100,
+          handleSize: 0,
+          showDetail: false
+        },
+        {
+          type: 'inside',
+          id: 'insideY',
+          yAxisIndex: 0,
+          start: 0,
+          end: 100,
+          zoomOnMouseWheel: true,
+          moveOnMouseMove: true,
+          moveOnMouseWheel: true
+        }
+      ],
+    }
+  }
+
+  // 每次 graphList 刷新都会重新渲染整个所有图表
+  // 可以改进的地方：添加一个 handleAdd() 方法，一次添加一个新的
+  handleProps(props) {
+    // props 是父组件的 graphList
+    console.log('props: ', props);
+    let ylist = []
+    let xdata = []
+    props.forEach((eqArr, index) => {
+      ylist.push(eqArr.key)
+      eqArr.forEach(item => {
+        xdata.push({
+          name: ['运行', '故障', '计划停机'][item.status],
+          showName: eqArr.key,
+          value: [index, item.startTime, item.startTime + item.duration * 60 * 1000, 0],
+          itemStyle: {
+            color: types[item.status].color,
+          }
+        }
+        )
+      })
+    });
+    this.grid.push(this.makeGrid());
+    this.xAxis.push(...this.makeXaxis());
+    this.yAxis.push(...this.makeYaxis(ylist));
+    this.series.push(...this.makeSeries(xdata))
+  }
+
+  // handleAdd
+  handleAdd() { }
+
+  clear() {
+    this.grid = [];
+    this.xAxis = [];
+    this.yAxis = [];
+    this.series = [];
+    this.chart.dispose();
+  }
+
+  // print option
+  print() {
+    console.log(JSON.stringify(this.option, null, 2));
+  }
+
+}

src/views/equipment/timing-diagram/status/index.vue

@@ -47,8 +47,8 @@
 					</div>
 				</el-col>
 			</el-row>
-			<div class="main-area" style="flex: 1; display: flex; flex-direction: column">
-				<div class="graphs" v-show="graphList.length" id="status-chart" style="height: 1px; flex: 1"></div>
+			<div class="main-area" style="flex: 1; display: flex; flex-direction: column;">
+				<div class="graphs" v-show="graphList.length" id="status-chart" style="height: 1px; flex: 1;"></div>
 				<h2 v-if="!graphList || graphList.length == 0" class="no-data-bg"></h2>
 			</div>
 		</el-row>
@@ -64,7 +64,7 @@
 </template>
 
 <script>
-import Gantt from './chart';
+import Gantt from './gantt';
 
 export default {
 	name: 'SGStatus',