Merge pull request 'projects/mescc/dy' (#27) from projects/mescc/dy into projects/mescc/develop

Reviewed-on: #27

.env.dev

@@ -1,8 +1,8 @@
 ###
  # @Author: zhp
  # @Date: 2024-04-28 13:42:51
- # @LastEditTime: 2024-05-31 08:31:32
+ # @LastEditTime: 2024-06-03 08:50:41
- # @LastEditors: zhp
+ # @LastEditors: DY
  # @Description:
 ###
 # 开发环境配置
@@ -12,8 +12,12 @@ ENV = 'development'
 VUE_APP_TITLE = 芋道管理系统
 
 # 芋道管理系统/开发环境
-# VUE_APP_BASE_API = 'http://192.168.1.61:48080'
+# VUE_APP_BASE_API = 'http://192.168.1.70:30307'
-VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
+# VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
+# sara
+# VUE_APP_BASE_API = 'http://192.168.1.63:48080'
+# 张一丁
+VUE_APP_BASE_API = 'http://192.168.4.139:48080'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

package.json

@@ -51,10 +51,14 @@
     "crypto-js": "^4.0.0",
     "echarts": "5.4.0",
     "element-ui": "2.15.12",
+    "exceljs": "^4.4.0",
+    "file-saver": "^2.0.5",
     "fuse.js": "6.6.2",
     "highlight.js": "^11.9.0",
+    "html2canvas": "^1.4.1",
     "js-beautify": "^1.15.1",
     "jsencrypt": "3.3.1",
+    "jspdf": "^2.5.1",
     "lodash": "^4.17.21",
     "mockjs": "^1.1.0",
     "moment": "^2.30.1",
@@ -69,7 +73,8 @@
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.2"
+    "vuex": "3.6.2",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.5.18",

src/api/produceData/index.js

@@ -1,13 +1,13 @@
 /*
  * @Author: zhp
  * @Date: 2024-05-07 08:54:59
- * @LastEditTime: 2024-05-31 09:33:50
+ * @LastEditTime: 2024-06-03 08:52:02
- * @LastEditors: zhp
+ * @LastEditors: DY
  * @Description:
  */
 import request from '@/utils/request'
 
-// 查询部门列表
+// 查询生产数据管理分页
 export function getProduceDataPage(data) {
   return request({
     url: 'ip/prod-output/prodOutputDataPage',
@@ -33,6 +33,15 @@ export function exportOutPutExcel(data) {
   })
 }
 
+// 获取生产数据管理列表
+export function prodOutputDataList(data) {
+  return request({
+    url: '/ip/prod-output/prodOutputDataList',
+    method: 'post',
+    data: data
+  })
+}
+
 // 获取生产管理生产目标管理碲化镉工厂分页
 export function prodTargetDiPage(data) {
   return request({
@@ -110,7 +119,7 @@ export function importToTarget(data) {
   return request({
     url: '/ip/prod-target/to-target-import-excel',
     method: 'post',
-    data
+    data: data
   })
 }
 
@@ -119,7 +128,7 @@ export function importDiTarget(data) {
   return request({
     url: '/ip/prod-target/di-target-import-excel',
     method: 'post',
-    data
+    data: data
   })
 }
 

src/api/produceData/order.js

@@ -0,0 +1,52 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-05-07 08:54:59
+ * @LastEditTime: 2024-05-31 15:08:27
+ * @LastEditors: DY
+ * @Description:
+ */
+import request from '@/utils/request'
+
+// 查询工单分页
+export function getWorkOrderPage(data) {
+  return request({
+    url: '/ip/prod-work-order/page',
+    method: 'post',
+    data: data
+  })
+}
+
+// 查询工单趋势数据
+export function getDailyTrend(data) {
+  return request({
+    url: '/ip/prod-work-order/getDailyTrend',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获得工单
+export function getWorkOrderDetail(id){
+  return request({
+     url: '/ip/prod-work-order/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得工单设备加工数量
+export function getEqNum(id){
+  return request({
+     url: '/ip/prod-work-order/getEqNum?workOrderId=' + id,
+    method: 'get'
+  })
+}
+
+// 导出工单数据
+export function exportExcel(data) {
+  return request({
+    url: '/ip/prod-work-order/export-excel',
+    method: 'post',
+    data: data,
+    responseType: 'blob'
+  })
+}

src/utils/constants.js

@@ -74,9 +74,9 @@ export const SystemDataScopeEnum = {
 /**
  * 工厂名称
  */
-export const factoryList =['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司']
+// export const factoryList =['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司']
 
-export const dhgfactoryList =[
+export const factoryArray1 =[
   {
     name: '瑞昌中建材光电材料有限公司',
     id: 0
@@ -97,12 +97,43 @@ export const dhgfactoryList =[
     name: '成都中建材光电材料有限公司',
     id: 4
   },
+  {
+    name: '凯盛光伏材料有限公司',
+    id: 5
+  },
   {
     name: '蚌埠兴科玻璃有限公司',
     id: 6
   }
 ]
 
+// export const dhgfactoryList =[
+//   {
+//     name: '瑞昌中建材光电材料有限公司',
+//     id: 0
+//   },
+//   {
+//     name: '邯郸中建材光电材料有限公司',
+//     id: 1
+//   },
+//   {
+//     name: '中建材株洲光电材料有限公司',
+//     id: 2
+//   },
+//   {
+//     name: '佳木斯中建材光电材料有限公司',
+//     id: 3
+//   },
+//   {
+//     name: '成都中建材光电材料有限公司',
+//     id: 4
+//   },
+//   {
+//     name: '蚌埠兴科玻璃有限公司',
+//     id: 6
+//   }
+// ]
+
 export const tyjxfactoryList =[
   {
     name: '凯盛光伏材料有限公司',
@@ -110,6 +141,30 @@ export const tyjxfactoryList =[
   }
 ]
 
+// 暂时只有瑞昌邯郸数据
+export const factoryList =['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司']
+export const factoryArray =[
+  {
+    name: '瑞昌中建材光电材料有限公司',
+    id: 0
+  },
+  {
+    name: '邯郸中建材光电材料有限公司',
+    id: 1
+  }
+]
+
+export const dhgfactoryList =[
+  {
+    name: '瑞昌中建材光电材料有限公司',
+    id: 0
+  },
+  {
+    name: '邯郸中建材光电材料有限公司',
+    id: 1
+  }
+]
+
 /**
  * 代码生成模板类型
  */

src/views/produce/data/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-05-22 15:25:11
+ * @LastEditTime: 2024-05-31 19:14:05
  * @LastEditors: DY
  * @Description:
 -->
@@ -10,17 +10,17 @@
     <div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;">
       <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
         <el-form-item label="时间维度" prop="date">
-          <el-select size="small" clearable v-model="listQuery.date" placeholder="请选择">
+          <el-select size="small" clearable v-model="listQuery.mode" placeholder="请选择">
             <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item v-show="listQuery.date === 0 || listQuery.date === ''" label="时间范围" prop="reportTime">
+        <el-form-item v-show="listQuery.mode === 0 || listQuery.mode === ''" label="时间范围" prop="reportTime">
           <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
-            start-placeholder="开始日期" value-format="timestamp" @change="changeDayTime" end-placeholder="结束日期">
+            start-placeholder="开始日期" value-format="timestamp" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期">
           </el-date-picker>
         </el-form-item>
-        <el-form-item v-show="listQuery.date === 1" label="时间范围" prop="reportTime">
+        <el-form-item v-show="listQuery.mode === 1" label="时间范围" prop="reportTime">
           <el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
             style="width: 180px" @change="onValueChange">
           </el-date-picker>
@@ -32,12 +32,12 @@
             {{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
           </span>
         </el-form-item>
-        <el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime">
+        <el-form-item v-show="listQuery.mode === 2" label="时间范围" prop="reportTime">
           <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="monthrange" value-format="timestamp" range-separator="至"
             start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
           </el-date-picker>
         </el-form-item>
-        <el-form-item v-show="listQuery.date === 3" label="时间范围" prop="reportTime">
+        <el-form-item v-show="listQuery.mode === 3" label="时间范围" prop="reportTime">
           <el-date-picker size="small" clearable v-model="listQuery.start" format="yyyy-MM-dd" value-format="timestamp" type="year"
             placeholder="开始时间">
           </el-date-picker>
@@ -48,7 +48,7 @@
         </el-form-item>
         <el-form-item label="工厂名称" prop="factorys">
           <el-select size="small" clearable v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple >
-            <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id">
+            <el-option v-for="item in factoryArray" :key="item.id" :label="item.name" :value="item.id">
             </el-option>
           </el-select>
         </el-form-item>
@@ -59,7 +59,7 @@
           </el-select>
         </el-form-item> -->
         <el-form-item label="玻璃类型" prop="type">
-          <el-select size="small" clearable v-model="listQuery.type" placeholder="请选择玻璃类型">
+          <el-select size="small" clearable v-model="listQuery.type" multiple placeholder="请选择玻璃类型">
             <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
             </el-option>
           </el-select>
@@ -94,7 +94,7 @@
         @pagination="getDataList"
       />
     </div>
-    <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
+    <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.mode" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
     <!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
       :type="listQuery.reportType" @refreshDataList="getDataList" /> -->
     <!-- <pagination
@@ -107,27 +107,29 @@
 
 <script>
 // import { parseTime } from '../../core/mixins/code-filter';
-import { getProduceDataPage, exportOutPutExcel } from '@/api/produceData';
+import { getProduceDataPage, prodOutputDataList, exportOutPutExcel } from '@/api/produceData';
 // import inputTable from './inputTable.vue';
 import lineChart from './lineChart';
 import moment from 'moment'
 import ButtonNav from '@/components/ButtonNav'
 import basicPage from '@/mixins/basic-page'
-import AddOrUpdate from './add-or-updata';
+import AddOrUpdate from './add-or-updata'
+import { factoryList, factoryArray, factoryArray1 } from "@/utils/constants";
 
-// import FileSaver from 'file-saver'
-// import * as XLSX from 'xlsx'
 export default {
   components: { lineChart, ButtonNav, AddOrUpdate },
   mixins: [basicPage],
 	data() {
     return {
+      factoryList,
+      factoryArray,
+      factoryArray1,
       listQuery: {
         size: 20,
         current: 1,
-        factorys: [],
+        factorys: undefined,
         total: 0,
-        date: 1,
+        mode: 0,
         type:undefined,
         // reportType: 2,
         beginTime: undefined,
@@ -163,31 +165,6 @@ export default {
           id: 2,
         },
       ],
-      // weekNum: undefined,
-      dataList: [
-        {
-          id:'first',
-        },
-         {
-          id: 'second',
-        },
-         {
-          id: 'third',
-        },
-         {
-          id: 'fourth',
-        },
-         {
-          id: 'fifth',
-        },
-         {
-          id: 'sixth',
-        },
-      ],
-			urlOptions: {
-				// getDataListURL: getGlassPage,
-				// exportURL: exportGlasscExcel
-      },
       formConfig: [
         {
           type: 'title',
@@ -218,36 +195,6 @@ export default {
           label: '年'
         }
       ],
-      factoryList: [
-        {
-          name: '瑞昌中建材光电材料有限公司',
-          id: 0
-        },
-        {
-          name: '邯郸中建材光电材料有限公司',
-          id: 1
-        },
-        {
-          name: '中建材株洲光电材料有限公司',
-          id: 2
-        },
-        {
-          name:  '佳木斯中建材光电材料有限公司',
-          id: 3
-        },
-        {
-          name:  '成都中建材光电材料有限公司',
-          id: 4
-        },
-        {
-          name:  '凯盛光伏材料有限公司',
-          id: 5
-        },
-        {
-          name:  '蚌埠兴科玻璃有限公司',
-          id: 6
-        }
-      ],
       tableProps: [
         {
           prop: 'tableTime',
@@ -258,7 +205,7 @@ export default {
         {
           prop: 'factory',
           label: '工厂名称',
-          filter: (val) => ['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司'][val],
+          filter: (val) => factoryList[val],
           minWidth: 200,
           showOverflowtooltip: true
         },
@@ -282,21 +229,30 @@ export default {
         {
           prop: 'yieldRate',
           label: '良品率%',
+          filter: (val) => val + '%'
         },
       ],
       tableData: [],
-      xAxis: []
+      lineData: [],
+      chart: null,
+      seriesList: []
 			// proLineList: [],
 			// all: {}
-		};
+		}; 
   },
   computed: {
     weekNum() {
       return Math.round((this.listQuery.end - this.listQuery.start) / (24 * 60 * 60 * 1000 * 7)) + 1
     },
   },
+  created() {
+    const today = new Date()
+    const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
+    this.listQuery.beginTime = sevenDaysAgo.getTime()
+    this.listQuery.endTime = today.getTime()
+    this.listQuery.reportTime = [this.listQuery.beginTime, this.listQuery.endTime]
+	},
 	mounted() {
-    this.getDataList()
 	},
   methods: {
     otherMethods(val) {
@@ -306,9 +262,6 @@ export default {
         this.$refs.detailOrUpdate.init(val.data.id);
       });
     },
-    // buttonClick() {
-
-    // },
     getYear(e) {
       if (this.listQuery.end - this.listQuery.start > 10*365*24*60*60*1000) {
         this.$message({
@@ -380,75 +333,100 @@ export default {
         console.log(this.listQuery.reportTime[0])
       }
     },
-    // async getDict() {
-			// 产线列表
-			// const res = await getCorePLList();
-			// this.proLineList = res.data;
-		// },
-    // 获取数据列表
-    multipliedByHundred(str) {
-      console.log(str);
-      // console.log(str)
-      if ( str != 0) {
-        let floatVal = parseFloat(str);
-        if (isNaN(floatVal)) {
-          return 0;
-        }
-        floatVal = Math.round(str * 10000) / 100;
-        let strVal = floatVal.toString();
-        let searchVal = strVal.indexOf('.');
-        if (searchVal < 0) {
-          searchVal = strVal.length;
-          strVal += '.';
-        }
-        while (strVal.length <= searchVal + 2) {
-          strVal += '0';
-        }
-        return parseFloat(strVal);
-      }
-
-    },
     async getDataList() {
-      const res = await getProduceDataPage(this.listQuery)
+      // const res = await getProduceDataPage(this.listQuery)
-      console.log(res)
+      // console.log(res)
-      this.tableData = res.data.records
+      // if (res.code === 0) {
-      this.tableData.forEach(item => {
+      //   this.tableData = res.data.records
-        item.tableTime = item?.reportDate?.length > 0 ? item.reportDate[0] + '-' + item.reportDate[1] + '-' + item.reportDate[2] : '--'
+      //   this.listQuery.total = res.data.total
+      //   if (this.listQuery.total > 0) {
+      //     this.tableData.forEach(item => {
+      //       item.tableTime = item?.reportDate?.length > 0 ? item.reportDate[0] + '-' + item.reportDate[1] + '-' + item.reportDate[2] : '--'
+      //     })
+      //   }
+      // }
+
+      // 图表
+      await prodOutputDataList({
+        current: 1,
+        size: 99,
+        beginTime: this.listQuery.beginTime,
+        endTime: this.listQuery.endTime,
+        factorys: this.listQuery.factorys,
+        mode: this.listQuery.mode,
+        type: this.listQuery.type
+      }).then(resp => {
+        console.log('Aaa', resp.data)
+        this.lineData = resp?.data || []
+        if (this.lineData.length > 0) {
+          this.buildChart(this.lineData)
+        }
       })
-      this.listQuery.total = res.data.total
+      // this.buildChart(this.tableData)
-      this.buildChart(this.tableData)
     },
     buildChart(list) {
-      const chartList = Object.groupBy(list, (item) => item.tableTime)
+      let temp = []
-      this.xAxis = []
+      let xAxisData = []
-      this.seriesList = []
+      list.forEach(item => {
-      for (const keyIndex in chartList) {
+        temp.push(item.groupTime)
-        // X坐标轴数据
+      })
-        this.xAxis.push(keyIndex)
+      // x轴数据
-      }
+      xAxisData = Array.from(new Set(temp))
+      
       // y轴数据
-      for (const y of this.factoryList) {
+      for (const y of this.factoryArray1) {
-        // y: {name: , id: }
+        for (const type of this.typeList) {
-        const seriesItem = {
+          const seriesItem = {
-          name: y.name,
+            name: y.name,
+            record: type.name,
             type: 'bar',
             emphasis: {
               focus: 'series'
             },
-          data: Array(this.xAxis.length).fill(0)
+            data: Array(xAxisData.length).fill(0)
-        }
+          }
-        for (const a in chartList) {
+          list.forEach(data => {
-          for (const z of chartList[a]) {
+            xAxisData.forEach((x, index) => {
-            this.xAxis.forEach((item, index) => {
+              if (x === data.groupTime && y.id === data.factory && type.id === data.glassType) {
-              if (z.factory === y.id && a === item) {
+                seriesItem.data[index] = data.goodNumber
-                seriesItem.data[index] = z.goodNumber
               }
             })
-          }
+          })
+          this.seriesList.push(seriesItem)
         }
-        this.seriesList.push(seriesItem)
       }
-      this.$refs.lineChart.initChart(this.xAxis, this.seriesList)
+      console.log('啊啊', this.seriesList)
+      this.$refs.lineChart.initChart(xAxisData, this.seriesList)
+      // const chartList = Object.groupBy(list, (item) => item.tableTime)
+      // this.xAxis = []
+      // this.seriesList = []
+      // for (const keyIndex in chartList) {
+      //   // X坐标轴数据
+      //   this.xAxis.push(keyIndex)
+      // }
+      // // y轴数据
+      // for (const y of this.factoryArray) {
+      //   // y: {name: , id: }
+      //   const seriesItem = {
+      //     name: y.name,
+      //       type: 'bar',
+      //       emphasis: {
+      //         focus: 'series'
+      //       },
+      //     data: Array(this.xAxis.length).fill(0)
+      //   }
+      //   for (const a in chartList) {
+      //     for (const z of chartList[a]) {
+      //       this.xAxis.forEach((item, index) => {
+      //         if (z.factory === y.id && a === item) {
+      //           seriesItem.data[index] = z.goodNumber
+      //         }
+      //       })
+      //     }
+      //   }
+      //   this.seriesList.push(seriesItem)
+      // }
+      // this.$refs.lineChart.initChart(this.xAxis, this.seriesList)
     },
 		buttonClick(val) {
 			this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;

src/views/produce/data/lineChart.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2022-01-21 14:43:06
  * @LastEditors: DY
- * @LastEditTime: 2024-05-22 13:48:58
+ * @LastEditTime: 2024-05-30 14:52:05
  * @Description:
 -->
 <template>

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-17 16:31:51
- * @LastEditTime: 2024-05-20 18:09:09
+ * @LastEditTime: 2024-05-29 14:06:16
  * @LastEditors: DY
  * @Description:
 -->
@@ -29,20 +29,30 @@
           </el-col>
           <el-col :span="8">
             <el-form-item label="时间维度" prop="targetType">
-              <el-select v-model="dataForm.targetType" placeholder="请选择时间维度" clearable @change="clearTime">
+              <el-select v-model="dataForm.targetType" placeholder="请选择时间维度" clearable>
                 <!-- <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"> -->
-                <el-option label="月" :value="0" />
+                <el-option label="日" :value="0" />
-                <el-option label="年" :value="1" />
+                <el-option label="周" :value="1" />
+                <el-option label="月" :value="2" />
+                <el-option label="年" :value="3" />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item v-show="dataForm.targetType !== 1" label="时间" prop="reportTime">
+            <el-form-item v-show="dataForm.targetType === 0 || dataForm.targetType === ''" label="时间" prop="reportTime">
-              <el-date-picker v-model="dataForm.reportTime" value-format="yyyy-MM" type="month" placeholder="选择月份">
+              <el-date-picker v-model="reportTime" value-format="yyyyMMdd" type="date" placeholder="选择日">
               </el-date-picker>
             </el-form-item>
-            <el-form-item v-show="dataForm.targetType === 1" label="时间" prop="targetYear">
+            <el-form-item v-show="dataForm.targetType === 1" label="时间" prop="week">
-              <el-date-picker clearable v-model="dataForm.showYear" value-format="yyyy" type="year" placeholder="开始时间">
+              <el-date-picker v-model="week" type="week" format="yyyy 第 WW 周" placeholder="选择周">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item v-show="dataForm.targetType === 2" label="时间" prop="reportTime">
+              <el-date-picker v-model="reportTime" value-format="yyyyMM" type="month" placeholder="选择月份">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item v-show="dataForm.targetType === 3" label="时间" prop="reportTime">
+              <el-date-picker clearable v-model="reportTime" value-format="yyyy" type="year" placeholder="开始时间">
               </el-date-picker>
             </el-form-item>
           </el-col>
@@ -225,6 +235,7 @@
 import SmallTitle from './SmallTitle';
 import { createProduce, getProduceTargetDetail, updateProduceTarget } from '@/api/produceData';
 import { factoryList, tyjxfactoryList, dhgfactoryList } from "@/utils/constants";
+import moment from 'moment'
 
 export default {
   components: {
@@ -247,57 +258,16 @@ export default {
       workOrderList: [],
       detList: [],
       teamList: [],
-      sourceList: [
-        {
-          id: 1,
-          name: '手动',
-        },
-        {
-          id: 2,
-          name: '自动',
-        }
-      ],
-      // factoryList: [
-      //   {
-      //     name: '瑞昌中建材光电材料有限公司',
-      //     id: 0
-      //   },
-      //   {
-      //     name: '邯郸中建材光电材料有限公司',
-      //     id: 1
-      //   },
-      //   {
-      //     name: '中建材株洲光电材料有限公司',
-      //     id: 2
-      //   },
-      //   {
-      //     name: '佳木斯中建材光电材料有限公司',
-      //     id: 3
-      //   },
-      //   {
-      //     name: '成都中建材光电材料有限公司',
-      //     id: 4
-      //   },
-      //   {
-      //     name: '凯盛光伏材料有限公司',
-      //     id: 5
-      //   },
-      //   {
-      //     name: '蚌埠兴科玻璃有限公司',
-      //     id: 6
-      //   }
-      // ],
       sectionList: [],
       visible: false,
+      reportTime: undefined,
+      week: undefined,
       dataForm: {
         factoryType: 0,
         id: undefined,
-        reportTime: undefined, // 月时间
         factory: undefined,
-        targetType: undefined,
+        targetTime: undefined,
-        targetYear: undefined,
+        targetType: 0,
-        showYear: undefined,
-        targetMonth: undefined,
         chipYield: undefined,
         chipYieldRate: undefined,
         chipBom: undefined,
@@ -345,31 +315,20 @@ export default {
         this.$refs.dataForm.resetFields()
       }
     },
-    clearTime() {
+    // clearTime() {
-      this.dataForm.targetYear = undefined
+    //   this.dataForm.targetTime = undefined
-      this.dataForm.targetMonth = undefined
+    // }, 
-    },
     handleClose() {
       // 新增
-      if (this.dataForm.targetType === 0) {
-        const timeArray = this.dataForm.reportTime.split('-')
-        this.dataForm.targetYear = Number(timeArray[0])
-        this.dataForm.targetMonth = Number(timeArray[1])
-      }
       if (this.dataForm.targetType === 1) {
-        this.dataForm.targetYear = Number(this.dataForm.showYear)
+        this.dataForm.targetTime = this.week ? Number(moment(this.week.getTime()).format('YYYYWW')) : undefined
+      } else {
+        this.dataForm.targetTime = this.reportTime ? Number(this.reportTime) : undefined
       }
-      // if (this.dataForm.factory === 5) {
-      //   this.dataForm.factoryType = 1
-      // } else {
-      //   this.dataForm.factoryType = 0
-      // }
       if (this.dataForm.id) {
         // 修改
         updateProduceTarget({
-          ...this.dataForm,
+          ...this.dataForm
-          showYear: undefined,
-          reportTime: undefined
         }).then(res => {
           if (res.code === 0) {
             this.$message.success('修改成功！')
@@ -380,9 +339,7 @@ export default {
       } else {
         // 新增
         createProduce({
-          ...this.dataForm,
+          ...this.dataForm
-          showYear: undefined,
-          reportTime: undefined
         }).then(res => {
           if (res.code === 0) {
             this.$message.success('新增成功！')
@@ -399,19 +356,16 @@ export default {
       if (this.dataForm.id) {
         getProduceTargetDetail(this.dataForm.id).then(res => {
           this.dataForm = res.data
-          if (this.dataForm.targetType === 1) {
+          if (this.dataForm.targetType === 0 || this.dataForm.targetType === 2 || this.dataForm.targetType === 3) {
-            if (this.dataForm.targetYear) {
+            this.reportTime = String(this.dataForm.targetTime)
-              this.$set(this.dataForm, 'showYear', String(this.dataForm.targetYear))
-            }
           }
-          if (this.dataForm.targetType === 0) {
+          if (this.dataForm.targetType === 1) {
-            if (this.dataForm.targetYear && this.dataForm.targetMonth !== null) {
+            const date = new Date()
-              if (this.dataForm.targetMonth < 10) {
+            date.setFullYear(String(this.dataForm.targetTime).slice(0, 4))
-                this.$set(this.dataForm, 'reportTime', String(this.dataForm.targetYear) + '-0' + String(this.dataForm.targetMonth))
+            date.setMonth(0)
-              } else {
+            date.setDate((Number(String(this.dataForm.targetTime).slice(4)) - 1)* 7 + 1)
-                this.$set(this.dataForm, 'reportTime', String(this.dataForm.targetYear) + '-' + String(this.dataForm.targetMonth))
+            // console.log('你好', date, moment(date).format('yyyyWW'), String(this.dataForm.targetTime).slice(4))
-              }
+            this.week = date
-            }
           }
         })
       }
@@ -424,6 +378,7 @@ export default {
   position: absolute;
   bottom: 1%;
   right: 2%;
+  z-index: 999;
 }
 .drawer-footer {
   width: 100%;

src/views/produce/target/index.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-05-22 16:22:57
+ * @LastEditTime: 2024-05-31 16:41:12
  * @LastEditors: DY
  * @Description:
 -->
 <template>
   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)">
-    <ButtonNav :menus="['碲化镉工厂', '铜铟镓硒工厂']" :button-mode="true" @change="changeFactory" style="margin-top: -10px">
+    <ButtonNav v-show="false" :menus="['碲化镉工厂', '铜铟镓硒工厂']" :button-mode="true" @change="changeFactory" style="margin-top: -10px">
     </ButtonNav>
     <div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;">
       <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
@@ -29,34 +29,34 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <!-- <el-form-item v-show="timeSelect === 'day'" label="时间范围" prop="reportTime">
+        <el-form-item v-show="listQuery.date === 1 || listQuery.date === ''" label="时间范围" prop="reportTime">
-          <el-date-picker v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
+          <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
-            start-placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDayTime" end-placeholder="结束日期">
+            start-placeholder="开始日期" value-format="yyyyMMdd" @change="changeDayTime" end-placeholder="结束日期">
           </el-date-picker>
-        </el-form-item> -->
+        </el-form-item>
-        <!-- <el-form-item v-show="timeSelect === 'week'" label="时间范围" prop="reportTime">
+        <el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime">
-          <el-date-picker v-model="listQuery.reportTime[0]" type="week" format="yyyy 第 WW 周" placeholder="选择周"
+          <el-date-picker size="small" clearable v-model="start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
             style="width: 180px" @change="onValueChange">
           </el-date-picker>
           至
-          <el-date-picker v-model="listQuery.reportTime[1]" type="week" format="yyyy 第 WW 周" placeholder="选择周"
+          <el-date-picker size="small" clearable v-model="end" type="week" format="yyyy 第 WW 周"  placeholder="选择周"
             style="width: 180px" @change="onValueChange">
           </el-date-picker>
-          <span v-if="listQuery.reportTime[0] && listQuery.reportTime[1]" style="margin-left: 10px">
+          <span v-if="start && end" style="margin-left: 10px">
             {{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
           </span>
-        </el-form-item> -->
+        </el-form-item>
-        <el-form-item v-show="listQuery.date !== 4" label="时间值" prop="reportTime">
+        <el-form-item v-show="listQuery.date === 3" label="时间值" prop="reportTime">
-          <el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="timestamp" range-separator="至" start-placeholder="开始月份"
+          <el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="yyyyMM" range-separator="至" start-placeholder="开始月份"
             end-placeholder="结束月份" @change="changeTime">
           </el-date-picker>
         </el-form-item>
         <el-form-item v-show="listQuery.date === 4" label="时间值" prop="reportTime">
-          <el-date-picker size="small" clearable v-model="start" value-format="timestamp" type="year"
+          <el-date-picker size="small" clearable v-model="start" value-format="yyyy" type="year"
             placeholder="开始时间">
           </el-date-picker>
           ~
-          <el-date-picker size="small" clearable v-model="end" value-format="timestamp" type="year" placeholder="结束时间"
+          <el-date-picker size="small" clearable v-model="end" value-format="yyyy" type="year" placeholder="结束时间"
             @change="getYear">
           </el-date-picker>
         </el-form-item>
@@ -173,7 +173,7 @@ export default {
         current: 1,
         factorys: null,
         total: 0,
-        date: undefined,
+        date: 1,
         beginTime: undefined,
         endTime: undefined,
         reportTime: []
@@ -314,9 +314,17 @@ export default {
         },
       ],
       timeList: [
+        {
+          value: 1,
+          label: '日'
+        },
+        {
+          value: 2,
+          label: '周'
+        },
         {
           value: 3,
-          label:'月'
+          label: '月'
         },
         {
           value: 4,
@@ -332,13 +340,13 @@ export default {
           showOverflowtooltip: true
         },
         {
-          prop: 'tagertTime',
+          prop: 'targetTime',
           label: '目标时间',
           minWidth: 150,
           showOverflowtooltip: true
         },
         {
-          prop: 'createTime',
+          prop: 'updateTime',
           label: '提交时间',
           filter: parseTime,
           minWidth: 150,
@@ -418,11 +426,11 @@ export default {
 			// all: {}
 		};
   },
-  // computed: {
+  computed: {
-  //   weekNum() {
+    weekNum() {
-  //     return Math.round((this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 60 * 60 * 1000 * 7)) + 1
+      return Math.round((this.end - this.start) / (24 * 60 * 60 * 1000 * 7)) + 1
-  //   },
+    },
-  // },
+  },
   watch: {
     facType(value) {
       if (value === 0) {
@@ -569,36 +577,75 @@ export default {
       this.$nextTick(() => {
         this.$refs.detailOrUpdate.init(val.data.id);
       });
-    },
-    buttonClick() {
-
     },
     getYear(e) {
-      if (this.end && e - this.start > 10 * 365*24*60*60*1000) {
+      if (this.end && Number(this.end) - Number(this.start) > 10) {
         this.$message({
           message: '年份起止时间不能超过十年',
           type: 'warning'
         });
+        this.start = undefined
+        this.end = undefined
         // console.log();
       } else {
-        if (this.end < this.start) {
+        if (Number(this.end) < Number(this.start)) {
           this.$message({
             message: '结束年份不能小于开始年份',
             type: 'warning'
           });
+          this.start = undefined
+          this.end = undefined
+        } else {
+          this.listQuery.beginTime = Number(this.start)
+          this.listQuery.endTime = Number(this.end)
         }
       }
       // console.log(e);
     },
     changeTime() {
       if (this.listQuery.reportTime) {
-        const numDays = this.listQuery.reportTime[1] - this.listQuery.reportTime[0]
+        const numDays = Number(this.listQuery.reportTime[1]) - Number(this.listQuery.reportTime[0])
-        if (numDays > 2*365*24*60*60*1000) {
+        if (numDays > 24) {
           this.$message({
             message: '时间范围不能超过24个月',
             type: 'warning'
           });
           this.listQuery.reportTime = [];
+        } else {
+          this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
+          this.listQuery.endTime = Number(this.listQuery.reportTime[1])
+        }
+      }
+    },
+    onValueChange(picker, k) { // 选中近k周后触发的操作
+      if (this.start && this.end) {
+        this.date1 = moment(this.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
+        this.date2 = moment(this.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
+        const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
+        if (numDays > 168) {
+          console.log(numDays)
+          this.$message({
+            message: '周范围不能超过24周',
+            type: 'warning'
+          });
+        } else {
+          this.listQuery.beginTime = Number(moment(this.start.getTime()).format('YYYYWW'))
+          this.listQuery.endTime = Number(moment(this.end.getTime()).format('YYYYWW'))
+        }
+      }
+    },
+    changeDayTime() {
+      if (this.listQuery.reportTime) {
+        const numDays = Number(this.listQuery.reportTime[1]) - Number(this.listQuery.reportTime[0])
+        if (numDays > 30) {
+          this.$message({
+            message: '时间范围不能超过30天',
+            type: 'warning'
+          });
+          this.listQuery.reportTime = [];
+        } else {
+          this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
+          this.listQuery.endTime = Number(this.listQuery.reportTime[1])
         }
       }
     },
@@ -626,27 +673,22 @@ export default {
 
     },
     async getDataList() {
-      if (this.listQuery.date === 3) {
+      // if (this.listQuery.date === 3) {
-        if (this.listQuery.reportTime?.length > 0) {
+      //   if (this.listQuery.reportTime?.length > 0) {
-          this.listQuery.beginTime = this.listQuery.reportTime[0] ? this.listQuery.reportTime[0] : undefined
+      //     this.listQuery.beginTime = this.listQuery.reportTime[0] ? Number(this.listQuery.reportTime[0]) : undefined
-          this.listQuery.endTime = this.listQuery.reportTime[1] ? this.listQuery.reportTime[1] : undefined
+      //     this.listQuery.endTime = this.listQuery.reportTime[1] ? this.listQuery.reportTime[1] : undefined
-        }
+      //   }
-      }
+      // }
-      if (this.listQuery.date === 4) {
+      // if (this.listQuery.date === 4) {
-        if (this.listQuery.reportTime?.length > 0) {
+      //   if (this.listQuery.reportTime?.length > 0) {
-          this.listQuery.beginTime = this.start ? this.start : undefined
+      //     this.listQuery.beginTime = this.start ? this.start : undefined
-          this.listQuery.endTime = this.end ? this.end : undefined
+      //     this.listQuery.endTime = this.end ? this.end : undefined
-        }
+      //   }
-      }
+      // }
       if (this.currentMenu === '碲化镉工厂') {
         await prodTargetDiPage(this.listQuery).then(res => {
           if (res.code === 0) {
             this.tableData = res.data.records
-            this.tableData.forEach(item => {
-                const year = item.targetYear ? item.targetYear + '年' : ''
-                const month = item.targetMonth ? item.targetMonth + '月' : ''
-                item.tagertTime = year + month
-            })
             this.listQuery.total = res.data.total
           }
         })

src/views/produce/workOrder/SmallTitle.vue

@@ -0,0 +1,65 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-08-01 15:27:31
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-08-01 16:25:54
+ * @Description:
+-->
+<template>
+	<div :class="[className, { 'p-0': noPadding }]">
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		size: {
+			// 取值范围:  xl lg md sm
+			type: String,
+			default: 'de',
+			validator: function (val) {
+				return ['xl', 'lg', 'de', 'md', 'sm'].indexOf(val) !== -1;
+			},
+		},
+		noPadding: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	computed: {
+		className: function () {
+			return `${this.size}-title`;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+$pxls: (xl, 28px) (lg, 24px) (de, 20px) (md, 18px) (sm, 16px);
+$mgr: 8px;
+@each $size, $height in $pxls {
+	.#{$size}-title {
+		font-size: 18px;
+		line-height: $height;
+		color: #000;
+		font-weight: 500;
+		font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
+
+		&::before {
+			content: '';
+			display: inline-block;
+			vertical-align: top;
+			width: 4px;
+			height: $height + 2px;
+			border-radius: 1px;
+			margin-right: $mgr;
+			background-color: #0b58ff;
+		}
+	}
+}
+
+.p-0 {
+	padding: 0;
+}
+</style>

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

@@ -0,0 +1,399 @@
+<!--
+ * @Author: zhp
+ * @Date: 2023-11-06 15:15:30
+ * @LastEditTime: 2024-05-31 16:13:22
+ * @LastEditors: DY
+ * @Description:
+-->
+<template>
+  <el-drawer class="drawer" :visible.sync="visible" size="85%" @closed="$emit('destroy')">
+    <small-title slot="title" :no-padding="true">
+      {{ '详情' }}
+      <el-button type="primary" plain size="small" style="float: right" @click="exportDetail">导出</el-button>
+    </small-title>
+    <div ref="detail" class="detailBox">
+      <el-row :gutter="20">
+        <el-col :span="3">
+          <p class="title">工单号</p>
+          <p class="text">{{ dataForm.workOrderNumber }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">订单号</p>
+          <p class="text">{{ dataForm.orderNumber }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">工单类型</p>
+          <p class="text">{{ ['', '芯片订单', '组件类型', 'bipv类型'][dataForm.workOrderType] }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">工单来源</p>
+          <p class="text">{{ ['', '手动', 'ERP'][dataForm.source] }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">工艺流程</p>
+          <p class="text">{{ dataForm.process }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">BOM</p>
+          <p class="text">{{ dataForm.bom }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">工单状态</p>
+          <p class="text">{{ ['未开始', '生产中', '已完成'][dataForm.orderStatus] }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">投入状态</p>
+          <p class="text">{{ dataForm.inStatus }}</p>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="3">
+          <p class="title">计划投入量</p>
+          <p class="text">{{ dataForm.plannedInvestment }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">目标产量</p>
+          <p class="text">{{ dataForm.targetProduction }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">实际投入</p>
+          <p class="text">{{ dataForm.actualInvestment }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">实际产出</p>
+          <p class="text">{{ dataForm.actualProduction }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">创建时间</p>
+          <p class="text">{{ parseTime(dataForm.createTime) }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">开始时间</p>
+          <p class="text">{{ dataForm.startDate?.length > 0 ? dataForm.startDate[0] + '-' + dataForm.startDate[1] + '-' + dataForm.startDate[2] : '' }}</p>
+        </el-col>
+        <el-col :span="3">
+          <p class="title">完成时间</p>
+          <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 class="chartDiv">
+        <div ref="bar" :style="{ height: '30vh', width: '40vw' }" />
+        <div ref="pie" :style="{ height: '30vh', width: '40vw' }" />
+      </div>
+      <div class="chartDiv">
+        <div ref="equipmentLine" :style="{ height: '30vh', width: '40vw' }" />
+        <div ref="line" v-show="dataForm.orderStatus === 1" :style="{ height: '30vh', width: '40vw' }" />
+      </div>
+    </div>
+  </el-drawer>
+
+</template>
+
+<script>
+// import basicAdd from './basic-add';
+import * as echarts from 'echarts'
+import resize from '@/mixins/resize'
+import { getWorkOrderDetail, getEqNum, getDailyTrend } from '@/api/produceData/order';
+import SmallTitle from './SmallTitle';
+import jsPDF from 'jspdf';
+import html2canvas from 'html2canvas';
+
+export default {
+  components: {
+    SmallTitle,
+  },
+  mixins: [resize],
+  props: {
+    date: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      lineChart: null,
+      pieChart: null,
+      barChart: null,
+      equipmentLineChart: null,
+      visible: false,
+      dataForm: {}
+    }
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  mounted() {
+    // this.getCurrentTime()
+  },
+  methods: {
+    exportDetail() {
+      // 导出
+      const pdf = new jsPDF('l', 'pt', 'a4');
+      const options = {
+        scale: 2
+      };
+      const element = this.$refs['detail'];
+
+      html2canvas(element, options).then((canvas) => {
+        const imgData = canvas.toDataURL('image/png');
+        pdf.addImage(imgData, 'PNG', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());
+        pdf.save(this.dataForm.workOrderNumber + '详情.pdf');
+      });
+    },
+    init(id) {
+      this.visible = true
+      this.$nextTick(() => {
+        this.initLineChart()
+      })
+      if (id) {
+        getWorkOrderDetail(id).then(res => {
+          this.dataForm = res.data
+          this.buildChart(this.dataForm)
+          if (this.dataForm.orderStatus === 1) {
+            this.trend()
+          }
+        })
+        getEqNum(id).then(response => {
+          if (response.code === 0) {
+            const xAxisList = Object.keys(response.data)
+            const yAxisList = Object.values(response.data)
+            this.initEqLineChart(xAxisList, yAxisList)
+          }
+        })
+        
+      }
+    },
+    trend() {
+      // 趋势图
+      getDailyTrend({ factory: this.dataForm.id }).then(trendRes => {
+        if (trendRes?.data.length > 0) {
+          const seriesList = []
+          const dateList = []
+          trendRes.data.forEach(element => {
+            seriesList.push(element.actualProduction)
+            dateList.push(element.recordTime[0] + '-' + element.recordTime[1] + '-' + element.recordTime[2])
+          })
+          this.initLineChart(dateList, seriesList)
+        }
+      })
+    },
+    buildChart(data) {
+      // 生产明细
+      const barList = [data.targetProduction, data.plannedInvestment, data.actualInvestment, data.actualProduction, data.wasteNum, data.reworkNum]
+      this.initChart(barList)
+      // 良品率
+      const pieList = [
+        { value: data.actualProduction, name: '实际产出' },
+        { value: data.wasteNum, name: '废品数量' },
+        { value: data.reworkNum, name: '待再加工数量' }
+      ]
+      this.initPieChart(pieList)
+    },
+    initChart(barData) {
+      this.barChart = echarts.init(this.$refs['bar'])
+      this.barChart.setOption({
+        title: {
+          text: '生产明细',
+          left: 'center'
+          // subtext: 'Fake Data'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
+        calculable: true,
+        grid: {
+          top: '20%',
+          left: "1%",
+          right: "3%",
+          bottom: "1%",
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: ['目标产量', '计划投入量', '实际投入', '实际产出', '废品数量', '待再加工数量'],
+          axisLabel: {
+            rotate:45
+          }
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: barData,
+            type: 'bar',
+            barWidth: '40%'
+          }
+        ]
+      }, true)
+    },
+    initPieChart(pieData) {
+      this.pieChart = echarts.init(this.$refs['pie'])
+      this.pieChart.setOption({
+        title: {
+          text: '产品良率',
+          left: 'center'
+          // subtext: 'Fake Data'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '5%',
+          left: 'right',
+          orient: 'vertical'
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: pieData
+          }
+        ]
+      }, true)
+    },
+    initEqLineChart(xAxisList, yAxisList) {
+      this.equipmentLineChart = echarts.init(this.$refs['equipmentLine'])
+      this.equipmentLineChart.setOption({
+        title: {
+          text: '在制品分布',
+          left: 'center'
+          // subtext: 'Fake Data'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
+        calculable: true,
+        grid: {
+          top: '20%',
+          left: "1%",
+          right: "3%",
+          bottom: "1%",
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisList,
+          axisLabel: {
+            rotate:45,
+            // width: '10%'
+          }
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: yAxisList,
+            type: 'bar',
+            barWidth: '40px'
+          }
+        ]
+      }, true)
+    },
+    initLineChart(xAxisList, seriesList) {
+      this.lineChart = echarts.init(this.$refs['line'])
+      this.lineChart.setOption({
+        title: {
+          text: '历史趋势',
+          left: 'center' // 设置标题居中
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisList,
+          axisLabel: {
+            rotate:45
+          }
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: seriesList,
+            type: 'line'
+          }
+        ]
+      }, true)
+    }
+    // getCurrentTime() {
+    //   // new Date().Format("yyyy-MM-dd HH:mm:ss")
+    //   this.dataForm.logTime = new Date()
+    //   // this.dataForm.logTime = year + "-" + month + "-" + day;
+    //   console.log(this.dataForm.logTime);
+    // },
+  },
+};
+</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;
+}
+
+.drawer >>> .el-form-item__label {
+  padding: 0;
+}
+
+.drawer >>> .el-drawer__header {
+  margin: 0;
+  padding: 32px 32px 24px;
+  border-bottom: 1px solid #dcdfe6;
+  /* margin-bottom: 30px; */
+}
+.detailBox p {
+  margin: 0;
+  padding: 0 32px;
+}
+.detailBox .title {
+  /* width: 56px; */
+  /* height: 14px; */
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 16px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.detailBox .text {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(102,102,102,0.75);
+  padding-bottom: 20px;
+}
+.detailBox {
+  padding-top: 30px;
+  width: 99%;
+}
+</style>

src/views/produce/workOrder/index.vue

@@ -0,0 +1,320 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-04-15 10:49:13
+ * @LastEditTime: 2024-05-31 17:13:56
+ * @LastEditors: DY
+ * @Description:
+-->
+<template>
+  <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)">
+    <div class="app-container" style="margin-top: 8px;padding: 16px; height: auto;">
+      <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
+    </div>
+    <div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto; padding: 16px;">
+      <search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" />
+      <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
+        :table-data="tableData">
+        <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
+          :method-list="tableBtn" @clickBtn="handleClick" />
+      </base-table>
+      <pagination
+        :limit.sync="listQuery.pageSize"
+        :page.sync="listQuery.pageNo"
+        :total="listQuery.total"
+        @pagination="getDataList"
+      />
+    </div>
+    <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
+  </div>
+</template>
+
+<script>
+// import { parseTime } from '../../core/mixins/code-filter';
+import { getWorkOrderPage, exportExcel } from '@/api/produceData/order';
+// import inputTable from './inputTable.vue';
+import lineChart from './lineChart';
+import moment from 'moment'
+// import ButtonNav from '@/components/ButtonNav'
+import basicPage from '@/mixins/basic-page'
+import AddOrUpdate from './add-or-updata';
+import { factoryList, factoryArray } from "@/utils/constants";
+
+// import FileSaver from 'file-saver'
+// import * as XLSX from 'xlsx'
+export default {
+  components: { lineChart, AddOrUpdate },
+  mixins: [basicPage],
+	data() {
+    return {
+      factoryList,
+      factoryArray,
+      listQuery: {
+        pageSize: 20,
+        pageNo: 1,
+        factorys: undefined,
+        total: 0,
+        time: undefined,
+        orderStatus:undefined
+      },
+      detailOrUpdateVisible:false,
+      tableBtn: [
+          {
+            type: 'detail',
+            btnName: '详情',
+        },
+        // {
+        //     type: 'delete',
+        //     btnName: '删除',
+        //   },
+      ].filter((v) => v),
+      typeList: [
+        {
+          name: '芯片',
+          id: 0,
+        },
+        {
+          name: '标准组件',
+          id: 1,
+        },
+        {
+          name: 'BIPV产品',
+          id: 2,
+        },
+      ],
+      formConfig: [
+        {
+          type: "select",
+          label: "工厂名称",
+          selectOptions: factoryArray,
+          labelField: 'name',
+          valueField: 'id',
+          param: "factory",
+          multiple: true,
+					filterable: true
+        },
+        {
+          type: "select",
+          label: "工单状态",
+          selectOptions: [
+            {
+              label: '未开始',
+              value: 0
+            },
+            {
+              label: '生产中',
+              value: 1
+            },
+            {
+              label: '已完成',
+              value: 2
+            }
+          ],
+          labelField: "label",
+          valueField: "value",
+          param: "orderStatus",
+          multiple: true,
+					filterable: true
+        },
+        {
+          type: "datePicker",
+          label: "时间段",
+          dateType: "daterange",
+          format: "yyyy-MM-dd",
+          valueFormat: "yyyy-MM-dd",
+          rangeSeparator: "-",
+          startPlaceholder: "开始日期",
+          endPlaceholder: "结束日期",
+          param: "timeSlot",
+          defaultSelect: [],
+          defaultTime: ["00:00:00", "23:59:59"],
+          width: 250,
+        },
+        {
+          type: "button",
+          btnName: "查询",
+          name: "search",
+          color: "primary",
+        },
+        {
+          type: "separate",
+        },
+        {
+          type: "button",
+          btnName: "导出",
+          name: "export",
+          color: "primary",
+          plain: true
+        },
+      ],
+      formConfig2: [
+        {
+          type: 'title',
+          label: '工厂信息',
+        },
+      ],
+      formConfig1: [
+        {
+          type: 'title',
+          label: '良品数量',
+        },
+      ],
+      tableProps: [
+        {
+          prop: 'factory',
+          label: '工厂名称',
+          filter: (val) => factoryList[val],
+          minWidth: 200,
+          showOverflowtooltip: true
+        },
+        {
+          prop: 'workOrderNumber',
+          label: '工单号',
+          // filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
+        },
+        {
+          prop: 'workOrderType',
+          label: '工单类型',
+          filter: (val) => ['', '芯片订单', '组件类型', 'bipv类型'][val],
+        },
+        {
+          prop: 'plannedInvestment',
+          label: '计划投入',
+        },
+        {
+          prop: 'actualInvestment',
+          label: '实际投入',
+        },
+        {
+          prop: 'targetProduction',
+          label: '目标产量',
+        },
+        {
+          prop: 'actualProduction',
+          label: '实际产量',
+        },
+        {
+          prop: 'productionProgress',
+          label: '生产进度',
+          filter: (val) => (val * 100) + '%'
+        },
+        {
+          prop: 'orderStatus',
+          label: '工单状态',
+          filter: (val) => ['未开始', '生产中', '已完成'][val],
+        },
+        {
+          prop: 'startTime',
+          label: '开始时间',
+          minWidth: 100,
+          showOverflowtooltip: true
+        },
+        {
+          prop: 'endTime',
+          label: '完成时间',
+          minWidth: 100,
+          showOverflowtooltip: true
+        }
+      ],
+      tableData: [],
+      xAxis: [],
+      lineData: {}
+			// proLineList: [],
+			// all: {}
+		};
+  },
+	created() {
+    const today = new Date()
+    const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
+    this.listQuery.time = [moment(sevenDaysAgo).format('yyyy-MM-DD'), moment(today).format('yyyy-MM-DD')]
+    this.formConfig[2].defaultSelect = this.listQuery.time
+	},
+  methods: {
+    otherMethods(val) {
+      this.detailOrUpdateVisible = true;
+      // this.addOrEditTitle = "详情";
+      this.$nextTick(() => {
+        this.$refs.detailOrUpdate.init(val.data.id);
+      });
+    },
+    async getDataList() {
+      const res = await getWorkOrderPage(this.listQuery)
+      this.tableData = res.data.list
+      this.listQuery.total = res.data.total
+      if (this.listQuery.total > 0) {
+        this.tableData.forEach(item => {
+          item.startTime = item.startDate ? item.startDate[0] + '-' + item.startDate[1] + '-' + item.startDate[2] : '--'
+          item.endTime = item.endDate ? item.endDate[0] + '-' + item.endDate[1] + '-' + item.endDate[2] : '--'
+        })
+      }
+    },
+		buttonClick(val) {
+			this.listQuery.factorys = val.factory?.length > 0 ? val.factory : undefined
+      this.listQuery.orderStatus = val.orderStatus?.length > 0 ? val.orderStatus : undefined
+      this.listQuery.time = val.timeSlot?.length > 0 ? val.timeSlot : undefined
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 20;
+          if (this.listQuery.time) {
+            this.getDataList();
+          } else {
+            this.$message.warning('请选择时间范围！')
+          }
+					break;
+				case 'export':
+          if (this.listQuery.time) {
+            this.handleExport();
+          } else {
+            this.$message.warning('请选择时间范围！')
+          }
+					break;
+				default:
+					console.log(val);
+			}
+		},
+		/** 导出按钮操作 */
+    handleExport() {
+      this.$modal.confirm('是否确认导出工单数据?').then(() => {
+        // 处理查询参数
+        // let params = {...this.listQuery};
+        // params.current = 1;
+        // params.size = 999;
+        this.exportLoading = true;
+        return exportExcel({
+          factorys: this.listQuery.factorys,
+          orderStatus: this.listQuery.orderStatus,
+          time: this.listQuery.time
+        });
+      }).then(response => {
+        this.$download.excel(response, '工单数据.xls');
+        this.exportLoading = false;
+      }).catch(() => {})
+    },
+	},
+};
+</script>
+
+<style scoped>
+/* .blueTip { */
+	/* padding-bottom: 10px; */
+/* } */
+/* .blueTi */
+.blueTip::before{
+  display: inline-block;
+  content: '';
+  width: 4px;
+  height: 18px;
+  background: #0B58FF;
+  border-radius: 1px;
+  margin-right: 8PX;
+  margin-top: 8px;
+}
+.app-container {
+  margin: 0 0px 0;
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 16px 16px 0;
+  height: calc(100vh - 134px);
+  overflow: auto;
+}
+</style>

src/views/produce/workOrder/lineChart.vue

@@ -0,0 +1,169 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-01-21 14:43:06
+ * @LastEditors: DY
+ * @LastEditTime: 2024-05-30 09:51:16
+ * @Description:
+-->
+<template>
+  <!-- <div> -->
+  <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+  <!-- </div> -->
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import 'echarts/theme/macarons' // echarts theme
+import resize from '@/mixins/resize'
+export default {
+  name: 'LineChart',
+  mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'reportChart'
+    },
+    className: {
+      type: String,
+      default: 'reportChart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: String,
+      default: '30vh'
+    },
+    legendPosition: {
+      type: String,
+      default: 'center'
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    legendData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  // mounted() {
+  //   this.$nextTick(() => {
+  //     this.initChart()
+  //   })
+  // },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart(xAxis, seriesList) {
+      this.chart = echarts.init(document.getElementById(this.id))
+      console.log(this.$parent);
+      this.chart.setOption({
+        title: {
+          text: '',
+          // subtext: 'Fake Data'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
+        legend: {
+          // data: ['工厂1', '工厂2'],
+          right: '90px',
+          top: '0%',
+          icon: 'rect',
+          itemWidth: 10,
+          itemHeight: 10,
+          itemGap: 40,
+        },
+        // toolbox: {
+        //   show: true,
+        //   feature: {
+        //     dataView: { show: true, readOnly: false },
+        //     magicType: { show: true, type: ['line', 'bar'] },
+        //     restore: { show: true },
+        //     saveAsImage: { show: true }
+        //   }
+        // },
+        calculable: true,
+        xAxis: [
+          {
+            type: 'category',
+            // prettier-ignore
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        grid: {
+          top: '20%',
+          left: "1%",
+          right: "3%",
+          bottom: "1%",
+          containLabel: true
+        },
+        series: [
+          {
+            name: 'Email',
+            type: 'line',
+            stack: 'Total',
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: 'Union Ads',
+            type: 'line',
+            stack: 'Total',
+            data: [220, 182, 191, 234, 290, 330, 310]
+          },
+          {
+            name: 'Video Ads',
+            type: 'line',
+            stack: 'Total',
+            data: [150, 232, 201, 154, 190, 330, 410]
+          },
+          {
+            name: 'Direct',
+            type: 'line',
+            stack: 'Total',
+            data: [320, 332, 301, 334, 390, 330, 320]
+          },
+          {
+            name: 'Search Engine',
+            type: 'line',
+            stack: 'Total',
+            data: [820, 932, 901, 934, 1290, 1330, 1320]
+          }
+        ]
+      }, true)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* .reportChart {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 10px;
+} */
+</style>