工单管理详情ui

src/views/produce/data/add-or-updata.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-11-06 15:15:30
- * @LastEditTime: 2024-06-25 08:59:33
+ * @LastEditTime: 2024-06-26 13:39:22
  * @LastEditors: DY
  * @Description:
 -->
@@ -116,6 +116,8 @@
             <p class="title">标准组件平均功率(W)</p>
             <p class="text">{{ dataForm.componentAveragePower }}</p>
           </el-col>
+        </el-row>
+        <el-row :gutter="24">
           <el-col :span="6">
             <p class="title">标准组件转化效率</p>
             <p class="text">{{ dataForm.componentTransRate }}</p>

src/views/produce/workOrder/add-or-updata.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-11-06 15:15:30
- * @LastEditTime: 2024-06-17 17:03:17
+ * @LastEditTime: 2024-06-27 14:50:21
  * @LastEditors: DY
  * @Description:
 -->
@@ -76,15 +76,44 @@
           <p class="text">{{ dataForm.endDate?.length > 0 ? dataForm.endDate[0] + '-' + dataForm.endDate[1] + '-' + dataForm.endDate[2] : '' }}</p>
         </el-col>
       </el-row>
-      <el-divider></el-divider>
+      <div style="width: 100%; padding: 0 32px"><el-divider style="margin: 0"></el-divider></div>
-      <div class="chartDiv">
+      <el-row :gutter="0" style="margin: 20px 32px">
-        <div ref="bar" :style="{ height: '30vh', width: '40vw' }" />
+        <el-col :span="8">
-        <div ref="pie" :style="{ height: '30vh', width: '40vw' }" />
+          <div>
+            <small-title slot="title" :no-padding="true">
+              产品良率
+            </small-title>
+            <div ref="pie" :style="{ height: '40vh', width: '100%' }" />
           </div>
-      <div class="chartDiv">
+        </el-col>
-        <div ref="equipmentLine" :style="{ height: '30vh', width: '40vw' }" />
+        <el-col :span="16">
-        <div ref="line" v-show="dataForm.orderStatus === 2" :style="{ height: '30vh', width: '40vw' }" />
+          <div style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
+            <small-title slot="title" :no-padding="true">
+              历史趋势
+            </small-title>
+            <div ref="line" v-show="dataForm.orderStatus === 2" :style="{ height: '40vh', width: '50vw' }" />
           </div>
+        </el-col>
+      </el-row>
+      <div style="width: 100%; padding: 0 32px"><el-divider style="margin: 0"></el-divider></div>
+      <el-row :gutter="0" style="margin: 20px 32px">
+        <el-col :span="8">
+          <div>
+            <small-title slot="title" :no-padding="true">
+              生产明细
+            </small-title>
+            <div ref="bar" :style="{ height: '40vh', width: '100%' }" />
+          </div>
+        </el-col>
+        <el-col :span="16">
+          <div style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
+            <small-title slot="title" :no-padding="true">
+              待制品分布
+            </small-title>
+            <div ref="equipmentLine" :style="{ height: '40vh', width: '50vw' }" />
+          </div>
+        </el-col>
+      </el-row>
     </div>
   </el-drawer>
 
@@ -118,7 +147,8 @@ export default {
       barChart: null,
       equipmentLineChart: null,
       visible: false,
-      dataForm: {}
+      dataForm: {},
+      colorList: ['#3E8EF7', '#69E6D8', '#F7C739'] // pie颜色
     }
   },
   beforeDestroy() {
@@ -227,38 +257,47 @@ export default {
     initChart(barData) {
       this.barChart = echarts.init(this.$refs['bar'])
       this.barChart.setOption({
-        title: {
+        // title: {
-          text: '生产明细',
+        //   text: '生产明细',
-          left: 'center'
+        //   left: 'center'
-          // subtext: 'Fake Data'
+        //   // subtext: 'Fake Data'
-        },
+        // },
+        color: ['#3E8EF7'],
         tooltip: {
           trigger: 'axis'
         },
         grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
         calculable: true,
         grid: {
-          top: '20%',
+          top: '15%',
-          left: "1%",
+          left: 0,
-          right: "3%",
+          right: '10%',
-          bottom: "1%",
+          bottom: 0,
           containLabel: true
         },
         xAxis: {
           type: 'category',
           data: ['目标产量', '计划投入量', '实际投入', '实际产出', '废品数量', '待再加工数量'],
           axisLabel: {
-            rotate:45
+            rotate: 25
           }
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          name: '单位/片',
+          axisLine: {
+            show: true
+          }
         },
         series: [
           {
             data: barData,
             type: 'bar',
-            barWidth: '40%'
+            barWidth: '40%',
+            label: {
+              show: true,
+              position: 'top'
+            }
           }
         ]
       }, true)
@@ -266,8 +305,9 @@ export default {
     initPieChart(pieData) {
       this.pieChart = echarts.init(this.$refs['pie'])
       this.pieChart.setOption({
+        color: ['#3E8EF7', '#69E6D8', '#F7C739'],
         title: {
-          text: !isNaN((pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100) ? ( '产品良率 ' + (pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100 + '%') : '产品良率 -',
+          // text: !isNaN((pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100) ? ( '产品良率 ' + (pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100 + '%') : '产品良率 -',
           left: 'center'
           // subtext: 'Fake Data'
         },
@@ -275,31 +315,31 @@ export default {
           trigger: 'item'
         },
         legend: {
-          top: '5%',
+          bottom: 0,
-          left: 'right',
+          left: 'center'
-          orient: 'vertical'
         },
         series: [
           {
             // name: 'Access From',
             type: 'pie',
-            radius: ['40%', '70%'],
+            radius: ['50%', '70%'],
             avoidLabelOverlap: false,
+            data: pieData,
             label: {
-              show: false,
+              show: true,
-              position: 'center'
+              position: 'outside',
+              formatter: '{d|{d}%} \n {b|{b}}',
+              rich: {
+                d: {
+                  color: 'inherit', // 系列色
+                  verticalAlign: 'top'
                 },
-            emphasis: {
+                b: {
-              label: {
+                  color: '#8C8C8C',
-                show: false,
+                  verticalAlign: 'top'
-                fontSize: 40,
+                }
-                fontWeight: 'bold'
+              }
             }
-            },
-            labelLine: {
-              show: false
-            },
-            data: pieData
           }
         ]
       }, true)
@@ -307,39 +347,48 @@ export default {
     initEqLineChart(xAxisList, yAxisList) {
       this.equipmentLineChart = echarts.init(this.$refs['equipmentLine'])
       this.equipmentLineChart.setOption({
-        title: {
+        // title: {
-          text: '待制品分布',
+        //   text: '待制品分布',
-          left: 'center'
+        //   left: 'center'
-          // subtext: 'Fake Data'
+        //   // subtext: 'Fake Data'
-        },
+        // },
+        color: ['#3E8EF7'],
         tooltip: {
           trigger: 'axis'
         },
         grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
         calculable: true,
         grid: {
-          top: '20%',
+          top: '15%',
-          left: "1%",
+          left: 0,
-          right: "3%",
+          right: 0,
-          bottom: "1%",
+          bottom: 0,
           containLabel: true
         },
         xAxis: {
           type: 'category',
           data: xAxisList,
           axisLabel: {
-            rotate:45,
+            rotate: 25
             // width: '10%'
           }
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          name: '单位/片',
+          axisLine: {
+            show: true
+          }
         },
         series: [
           {
             data: yAxisList,
             type: 'bar',
-            barWidth: '50%'
+            barWidth: '50%',
+            label: {
+              show: true,
+              position: 'top'
+            }
           }
         ]
       }, true)
@@ -347,27 +396,39 @@ export default {
     initLineChart(xAxisList, seriesList) {
       this.lineChart = echarts.init(this.$refs['line'])
       this.lineChart.setOption({
-        title: {
+        color: ['#3E8EF7'],
-          text: '历史趋势',
-          left: 'center' // 设置标题居中
-        },
         tooltip: {
           trigger: 'item'
         },
+        grid: {
+          top: '15%',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
         xAxis: {
           type: 'category',
           data: xAxisList,
           axisLabel: {
-            rotate:45
+            rotate: 25
           }
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          name: '单位/片',
+          axisLine: {
+            show: true
+          }
         },
         series: [
           {
             data: seriesList,
-            type: 'line'
+            type: 'line',
+            label: {
+              show: true,
+              position: 'top'
+            }
           }
         ]
       }, true)
@@ -381,14 +442,8 @@ export default {
   },
 };
 </script>
+
 <style scoped>
-.chartDiv {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  padding: 5px;
-  padding-left: 30px;
-}
   .drawer >>> .el-drawer {
   border-radius: 8px 0 0 8px;
 }
@@ -405,7 +460,8 @@ export default {
 }
 .detailBox p {
   margin: 0;
-  padding: 0 32px;
+  padding-left: 32px;
+  /* padding: 0 32px; */
 }
 .detailBox .title {
   /* width: 56px; */
@@ -427,6 +483,8 @@ export default {
 }
 .detailBox {
   padding-top: 30px;
-  width: 99%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  /* width: 99%; */
 }
 </style>