update ui

src/views/equipment/analysis/efficiency/components/pieChart.vue

@@ -6,10 +6,11 @@
 -->
 
 <template>
-	<div class="chart-grid-item" style="">
+	<div class="chart-grid-item" style="overflow: inherit">
 		<div
 			class="pie-chart"
 			ref="pieChart"
+			style="overflow: inherit;"
 			:data-eqname="value.equipmentName || 'Default'"></div>
 		<div class="data-view">
 			<div class="data-view__item">
@@ -93,7 +94,7 @@ export default {
 						name: '',
 						type: 'pie',
 						radius: ['75%', '90%'],
-						center: ['50%', '45%'],
+						center: ['50%', '48%'],
 						label: {
 							show: false,
 						},
@@ -108,7 +109,7 @@ export default {
 						// 内环
 						name: '',
 						type: 'pie',
-						center: ['50%', '45%'],
+						center: ['50%', '48%'],
 						radius: ['60%', '75%'],
 						itemStyle: {
 							borderRadius: 10,

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

@@ -6,7 +6,7 @@
 -->
 
 <template>
-	<div class="app-container">
+	<div class="app-container allow-overflow">
 		<!-- 搜索工作栏 -->
 		<SearchBar
 			:formConfigs="searchBarFormConfig"
@@ -29,11 +29,19 @@
 							:table-data="list"
 							@emitFun="handleEmitFun"></base-table>
 					</el-tab-pane>
-					<el-tab-pane :label="'\u3000可视化\u3000'" name="graph">
+					<el-tab-pane
+						:label="'\u3000可视化\u3000'"
+						name="graph"
+						style="overflow: inherit">
 						<div
 							v-if="activeName == 'graph'"
 							class="graph"
-							style="display: flex; flex-direction: column; position: relative">
+							style="
+								overflow: inherit;
+								display: flex;
+								flex-direction: column;
+								position: relative;
+							">
 							<div class="blue-title">各设备加工数量</div>
 							<div class="legend">
 								<div class="legend-item">
@@ -429,6 +437,10 @@ export default {
 		transform: translateY(-12px);
 	}
 
+	.el-tabs__content {
+		overflow: visible;
+	}
+
 	.el-tabs__item {
 		padding-left: 0 !important;
 		padding-right: 0 !important;
@@ -462,6 +474,7 @@ export default {
 	border-radius: 12px;
 	border: 1px solid #ccc;
 	// background: #0003;
+	overflow: inherit;
 }
 .bg-grid {
 	display: grid;
@@ -469,7 +482,7 @@ export default {
 	grid-template-columns: repeat(4, minmax(280px, 1fr));
 	grid-auto-columns: 280px;
 	grid-auto-rows: 290px;
-	overflow: hidden;
+	overflow: inherit;
 	position: relative;
 }
 

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

@@ -76,13 +76,18 @@ export default class GanttGraph {
             type: 'none',
         },
         formatter: (params) => {
+            // debugger;
             return `
-                <div style="display: flex; align-items: center; justify-content: space-between">
-                <h1 style="font-size: 18px; font-weight: 600;">${params.seriesName}</h1>
-                <h2 style="font-size: 18px; font-weight: 400; letter-spacing: 1px;">${params.name} <span style="display: inline-block; margin-left: 8px; width: 12px; height: 12px; border-radius: 50%; background: ${params.color} "></span></h2>
-                </div>
-                <div>${new Date(params.value[1]).toLocaleString()} ~ ${new Date(params.value[2]).toLocaleString()}</div>
-                `
+            <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.seriesName}</span>
+                    </div>
+                    <span class="run-status" style="margin-left: 8px; opacity: 0.6">${params.name}</span>
+            </div>            
+            `
         }
     }
     grid = []
@@ -137,6 +142,11 @@ export default class GanttGraph {
                             .join(':');
                     },
                 },
+                axisLine: {
+                    lineStyle: {
+                        color: '#0005',
+                    },
+                },
                 boundaryGap: false,
                 // data: getXaxisRange(getTodayStart(new Date())),
             },
@@ -166,10 +176,13 @@ export default class GanttGraph {
                 nameRotate: 0,
                 nameTextStyle: {
                     fontSize: 16,
+                    color: '#000A'
                 },
                 axisLine: {
                     show: true,
-                    lineStyle: {},
+                    lineStyle: {
+                        color: '#0005',
+                    },
                 },
                 axisLabel: { show: false },
                 axisTick: { show: false },
@@ -180,6 +193,12 @@ export default class GanttGraph {
                 gridIndex: this.gridIndex,
                 type: 'value',
                 splitLine: { show: false },
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#0005',
+                    },
+                },
                 axisLabel: { show: false },
                 axisTick: { show: false },
             },
@@ -213,7 +232,7 @@ export default class GanttGraph {
                         tooltip: { show: false },
                         itemStyle: {
                             color: '#F2F4F9',
-                            // opacity: 0.3,
+                            opacity: 0.3,
                         }
                     },
                 ]