From fad60284695b571373c5c0fdec6a27da84bd1146 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98937886381=E2=80=99?= <‘937886381@qq.com’>
Date: Tue, 11 Jun 2024 14:08:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=8A=A5=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.dev                                    |   8 +-
 src/views/report/components/chartButton.vue | 148 +++++++
 src/views/report/components/lineChart.vue   | 218 ++++++++++
 src/views/report/comprehensiveData.vue      | 460 ++++++++++++++++++++
 src/views/report/produceConversion.vue      | 450 +++++++++++++++++++
 5 files changed, 1280 insertions(+), 4 deletions(-)
 create mode 100644 src/views/report/components/chartButton.vue
 create mode 100644 src/views/report/components/lineChart.vue
 create mode 100644 src/views/report/comprehensiveData.vue
 create mode 100644 src/views/report/produceConversion.vue

diff --git a/.env.dev b/.env.dev
index 1f48230..7f1c133 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1,8 +1,8 @@
 ###
  # @Author: zhp
  # @Date: 2024-04-28 13:42:51
- # @LastEditTime: 2024-06-07 10:32:24
- # @LastEditors: DY
+ # @LastEditTime: 2024-06-11 08:33:19
+ # @LastEditors: zhp
  # @Description:
 ###
 # 开发环境配置
@@ -13,9 +13,9 @@ VUE_APP_TITLE = 发电玻璃智能管控平台
 
 # 芋道管理系统/开发环境
 # 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.1.63:48080'
 # 张一丁
 # VUE_APP_BASE_API = 'http://192.168.4.139:48080'
 
diff --git a/src/views/report/components/chartButton.vue b/src/views/report/components/chartButton.vue
new file mode 100644
index 0000000..a2c4b1e
--- /dev/null
+++ b/src/views/report/components/chartButton.vue
@@ -0,0 +1,148 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-07 08:37:17
+ * @LastEditTime: 2024-06-07 11:04:41
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <button
+    class="chart-btn"
+    :class="[active ? 'active' : '']"
+    @click="$emit('click', label)"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script>
+export default {
+  name: "CopilotButton",
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  mounted() {
+  },
+};
+</script>
+
+<style>
+button {
+  appearance: none;
+  outline: none;
+  border: none;
+  background: none;
+}
+</style>
+
+<style scoped>
+.skate {
+  /* flex: 1; */
+  position: relative;
+  width: 88px;
+  height: 32px;
+  background: #01306C;
+  /* border-radius: 4px 0px 0px 4px; */
+  backdrop-filter: blur(3px);
+  /* text-align: center;
+  padding: 12px;
+  padding-left: 20px;
+  color: #fff;
+  font-size: 18px; */
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 12px;
+  color: #FFFFFF;
+  line-height: 22px;
+  letter-spacing: 5px;
+  text-align: center;
+  font-style: normal;
+  /* margin-right: 1px; */
+  /* letter-spacing: 10px; */
+  cursor: pointer;
+}
+
+.chart-btn:nth-child(6)::after {
+  content: '';
+  width: 0;
+  height: 0;
+  display: none;
+}
+.chart-btn {
+  /* flex: 1; */
+  position: relative;
+  width: 88px;
+  height: 32px;
+  background: #01306C;
+  /* border-radius: 4px 0px 0px 4px; */
+  backdrop-filter: blur(3px);
+  /* text-align: center;
+  padding: 12px;
+  padding-left: 20px;
+  color: #fff;
+  font-size: 18px; */
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 12px;
+  color: #FFFFFF;
+  line-height: 22px;
+  letter-spacing: 5px;
+  text-align: center;
+  font-style: normal;
+  /* margin-right: 1px; */
+  /* letter-spacing: 10px; */
+  cursor: pointer;
+}
+.chart-btn::after {
+  /* flex: 1; */
+  /* position: relative; */
+  content: "";
+  position: absolute;
+    /* width: 16px; */
+    /* height: 16px; */
+  top: px;
+  right: -1px;
+  width: 1px;
+  height: 23px;
+  border: 1px solid #010D18;
+}
+.chart-btn.active {
+  background: #1D74D8;
+  /* border-radius: 4px;; */
+}
+.chart-btn.active::after {
+  display: none;
+  /* border-radius: 4px;; */
+}
+/* .copilot-btn::before,
+.copilot-btn::after {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 0;
+  background: transparent;
+  border-style: solid;
+  border-width: 2px;
+  border-color: transparent;
+  border-top-color: #007be4;
+}
+
+.copilot-btn::before {
+  left: 0;
+  border-left-color: #007be4;
+}
+
+.copilot-btn::after {
+  right: 0;
+  border-right-color: #007be4;
+} */
+</style>
diff --git a/src/views/report/components/lineChart.vue b/src/views/report/components/lineChart.vue
new file mode 100644
index 0000000..01eec9d
--- /dev/null
+++ b/src/views/report/components/lineChart.vue
@@ -0,0 +1,218 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-11 09:48:40
+ * @LastEditTime: 2024-06-11 10:22:05
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <!-- <div> -->
+    <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
+    <div :id="id" :class="className" style="height: 100%,width: 100%;;" />
+  <!-- </div> -->
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { debounce } from "@/utils/debounce";
+export default {
+  name: 'OverviewBar',
+  // 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: '100%'
+    },
+    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
+  },
+  mounted() {
+    // if (screenfull.isEnabled) {
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      console.log(1111)
+      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: ['芯片总功率', '标准组件总功率', '转化效率'],
+          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: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          },
+          {
+            type: 'value',
+            // name: 'Temperature',
+            min: 0,
+            max: 100,
+            interval: 20,
+            axisLabel: {
+              formatter: '{value}%'
+            }
+          }
+        ],
+        grid: {
+          top: '20%',
+          left: "1%",
+          right: "3%",
+          bottom: "1%",
+          containLabel: true
+        },
+        series: [
+          {
+            name: '芯片总功率',
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: 'rgba(142, 240, 171, 1)', //改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(142, 240, 171, 1)' //改变折线颜色
+                }
+              }
+            },
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+            ],
+          },
+          {
+            name: '标准组件总功率',
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: '#288AFF', //改变折线点的颜色
+                lineStyle: {
+                  color: '#288AFF' //改变折线颜色
+                }
+              }
+            },
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+            ],
+          },
+          {
+            name: '转化效率',
+            type: 'bar',
+            type: 'line',
+            yAxisIndex: 1,
+            itemStyle: {
+              normal: {
+                color: '#FFCE6A', //改变折线点的颜色
+                lineStyle: {
+                  color: '#FFCE6A' //改变折线颜色
+                }
+              }
+            },
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
+            ],
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* .reportChart {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 10px;
+} */
+</style>
diff --git a/src/views/report/comprehensiveData.vue b/src/views/report/comprehensiveData.vue
new file mode 100644
index 0000000..b3a181d
--- /dev/null
+++ b/src/views/report/comprehensiveData.vue
@@ -0,0 +1,460 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-04-15 10:49:13
+ * @LastEditTime: 2024-06-07 16:22:57
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)">
+    <!-- <div class="app-container"
+      style="margin-top: 8px; padding: 0 16px; height: auto; font-size: 20px; text-align: center;">
+      <p style="margin-bottom: 0">数据概览</p>
+      <div class="view">
+        <div v-for="(item, index) in data" :key="index">
+          <p style="color: rgb(194,128,255)">{{ item }}</p>
+          <p>{{ index }}</p>
+        </div>
+      </div>
+    </div> -->
+    <div class="" style="height: auto;">
+      <ButtonNav style="padding: 0;" :menus="['邯郸', '瑞昌']" :button-mode="true" @change="currentMenu = $event">
+        <!-- <template v-slot:tab1>
+          <div style="margin: 20px; background: #f001;">
+            Page1: 状态时序图
+          </div>
+        </template>
+        <template v-slot:tab2>
+          <div style="margin: 20px">
+            Page2: 产量时序图
+          </div>
+        </template> -->
+      </ButtonNav>
+    </div>
+    <div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto;">
+      <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-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 === 1 || listQuery.date === ''" label="时间范围" prop="reportTime">
+          <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
+            start-placeholder="开始日期" value-format="yyyyMMdd" @change="changeDayTime" end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime">
+          <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 size="small" clearable v-model="end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
+            style="width: 180px" @change="onValueChange">
+          </el-date-picker>
+          <!-- <span v-if="start && end" style="margin-left: 10px">
+            {{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
+          </span> -->
+        </el-form-item>
+        <el-form-item v-show="listQuery.date === 3" label="时间值" prop="reportTime">
+          <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="yyyy" type="year" placeholder="开始时间">
+          </el-date-picker>
+          ~
+          <el-date-picker size="small" clearable v-model="end" value-format="yyyy" type="year" placeholder="结束时间"
+            @change="getYear">
+          </el-date-picker>
+        </el-form-item>
+        <!-- <el-form-item label="玻璃类型" prop="type">
+          <el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
+            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item> -->
+        <!-- <el-form-item label="玻璃类型" prop="type">
+          <el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
+            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item> -->
+        <el-form-item>
+          <el-button type="primary" size="small" @click="getDataList">查询</el-button>
+          <el-divider direction="vertical"></el-divider>
+          <!-- <el-button type="primary" size="small" plain @click="handleImport">导入</el-button> -->
+          <el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
+          <!-- <el-button type="success" size="small" plain @click="addFactory">新增</el-button> -->
+        </el-form-item>
+      </el-form>
+      <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, getOverView } from '@/api/produceData/order';
+// import { getWorkOrderPage, exportExcel, getOverView } from '@/components/buttonNav'
+// 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 { publicFormatter } from "@/utils/dict";
+
+// import FileSaver from 'file-saver'
+// import * as XLSX from 'xlsx'
+export default {
+  components: { ButtonNav },
+  mixins: [basicPage],
+  data() {
+    return {
+      factoryList,
+      factoryArray,
+      start: undefined,
+      end: undefined,
+      listQuery: {
+        size: 10,
+        current: 1,
+        factorys: null,
+        total: 0,
+        date: 3,
+        beginTime: undefined,
+        endTime: undefined,
+        reportTime: []
+      },
+      timeList: [
+        {
+          value: 1,
+          label: '日'
+        },
+        {
+          value: 2,
+          label: '周'
+        },
+        {
+          value: 3,
+          label: '月'
+        },
+        {
+          value: 4,
+          label: '年'
+        }
+      ],
+      detailOrUpdateVisible: false,
+      tableBtn: [
+        {
+          type: 'detail',
+          btnName: '详情',
+        },
+        // {
+        //     type: 'delete',
+        //     btnName: '删除',
+        //   },
+      ].filter((v) => v),
+      typeList: [
+        {
+          name: '芯片',
+          id: 0,
+        },
+        {
+          name: '标准组件',
+          id: 1,
+        },
+        {
+          name: 'BIPV产品',
+          id: 2,
+        },
+      ],
+      tableProps: [
+        {
+          prop: 'factory',
+          label: '玻璃类型',
+          fixed:true,
+          // filter: (val) => factoryList[val],
+          // minWidth: 200,
+          // showOverflowtooltip: true
+        },
+        {
+          prop: 'workOrderNumber',
+          label: '科目/日期',
+          fixed: true,
+          // filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
+        },
+        {
+          prop: 'workOrderType',
+          label: '单位',
+          fixed: true,
+          // filter: publicFormatter('workorder_status')
+          // 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: publicFormatter('workorder_status')
+          // filter: (val) => ['未开始', '生产中', '已完成'][val],
+        },
+        {
+          prop: 'startTime',
+          label: '开始时间',
+          minWidth: 100,
+          showOverflowtooltip: true
+        },
+        {
+          prop: 'endTime',
+          label: '完成时间',
+          minWidth: 100,
+          showOverflowtooltip: true
+        }
+      ],
+      tableData: [],
+      xAxis: [],
+      lineData: {},
+      data: {}
+      // proLineList: [],
+      // all: {}
+    };
+  },
+  computed: {
+    weekNum() {
+      return Math.round((this.end - this.start) / (24 * 60 * 60 * 1000 * 7)) + 1
+    },
+  },
+  created() {
+    const currentMonth = new Date()
+    this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
+    this.changeTime()
+  },
+  mounted() {
+    this.getOverView()
+    const currentMonth = new Date()
+    this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
+    this.changeTime()
+  },
+  methods: {
+    getYear(e) {
+      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 (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)
+        }
+      }
+      if (!this.start && !this.end) {
+        this.listQuery.beginTime = undefined
+        this.listQuery.endTime = undefined
+      }
+      // console.log(e);
+    },
+    changeTime() {
+      if (this.listQuery.reportTime) {
+        const years = Number(this.listQuery.reportTime[1].slice(0, 4)) - Number(this.listQuery.reportTime[0].slice(0, 4))
+        const months = Number(this.listQuery.reportTime[1].slice(4)) - Number(this.listQuery.reportTime[0].slice(4))
+        if (years * 12 + months > 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])
+        }
+      } else {
+        this.listQuery.beginTime = undefined
+        this.listQuery.endTime = undefined
+      }
+    },
+    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'))
+        }
+      }
+      if (!this.start && !this.end) {
+        this.listQuery.beginTime = undefined
+        this.listQuery.endTime = undefined
+      }
+    },
+    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])
+        }
+      } else {
+        this.listQuery.beginTime = undefined
+        this.listQuery.endTime = undefined
+      }
+    },
+    getOverView() {
+      // getOverView().then(res => {
+      //   this.data = res.data
+      //   console.log('aa', res.data)
+      // })
+    },
+    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 */
+.view {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex: 1;
+}
+
+.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;
+}
+.noBack{
+  background-color:black;
+}
+</style>
diff --git a/src/views/report/produceConversion.vue b/src/views/report/produceConversion.vue
new file mode 100644
index 0000000..8fa9c14
--- /dev/null
+++ b/src/views/report/produceConversion.vue
@@ -0,0 +1,450 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-11 08:45:34
+ * @LastEditTime: 2024-06-11 11:08:27
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)">
+    <!-- <div class="app-container"
+      style="margin-top: 8px; padding: 0 16px; height: auto; font-size: 20px; text-align: center;">
+      <p style="margin-bottom: 0">数据概览</p>
+      <div class="view">
+        <div v-for="(item, index) in data" :key="index">
+          <p style="color: rgb(194,128,255)">{{ item }}</p>
+          <p>{{ index }}</p>
+        </div>
+      </div>
+    </div> -->
+    <div class="app-container" style="flex: 1;min-height: 40vh;">
+      <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-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 === 1 || listQuery.date === ''" label="时间范围" prop="reportTime">
+          <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
+            start-placeholder="开始日期" value-format="yyyyMMdd" @change="changeDayTime" end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime">
+          <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 size="small" clearable v-model="end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
+            style="width: 180px" @change="onValueChange">
+          </el-date-picker>
+          <!-- <span v-if="start && end" style="margin-left: 10px">
+            {{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
+          </span> -->
+        </el-form-item>
+        <el-form-item v-show="listQuery.date === 3" label="时间值" prop="reportTime">
+          <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="yyyy" type="year" placeholder="开始时间">
+          </el-date-picker>
+          ~
+          <el-date-picker size="small" clearable v-model="end" value-format="yyyy" type="year" placeholder="结束时间"
+            @change="getYear">
+          </el-date-picker>
+        </el-form-item>
+        <!-- <el-form-item label="玻璃类型" prop="type">
+          <el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
+            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item> -->
+        <!-- <el-form-item label="玻璃类型" prop="type">
+          <el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
+            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item> -->
+        <el-form-item>
+          <el-button type="primary" size="small" @click="getDataList">查询</el-button>
+          <el-divider direction="vertical"></el-divider>
+          <!-- <el-button type="primary" size="small" plain @click="handleImport">导入</el-button> -->
+          <el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
+          <!-- <el-button type="success" size="small" plain @click="addFactory">新增</el-button> -->
+        </el-form-item>
+      </el-form>
+      <line-chart  ref="lineChart" style="height: 90%; width: 100%"></line-chart>
+    </div>
+    <div class="app-container" style="margin-top: 8px;flex: 1">
+      <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, getOverView } from '@/api/produceData/order';
+// import { getWorkOrderPage, exportExcel, getOverView } from '@/components/buttonNav'
+// 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 { publicFormatter } from "@/utils/dict";
+import lineChart from "./components/lineChart";
+
+// import FileSaver from 'file-saver'
+// import * as XLSX from 'xlsx'
+export default {
+  components: { ButtonNav, lineChart },
+  mixins: [basicPage],
+  data() {
+    return {
+      factoryList,
+      factoryArray,
+      start: undefined,
+      end: undefined,
+      listQuery: {
+        size: 10,
+        current: 1,
+        factorys: null,
+        total: 0,
+        date: 3,
+        beginTime: undefined,
+        endTime: undefined,
+        reportTime: []
+      },
+      timeList: [
+        {
+          value: 1,
+          label: '日'
+        },
+        {
+          value: 2,
+          label: '周'
+        },
+        {
+          value: 3,
+          label: '月'
+        },
+        {
+          value: 4,
+          label: '年'
+        }
+      ],
+      detailOrUpdateVisible: false,
+      tableBtn: [
+        {
+          type: 'detail',
+          btnName: '详情',
+        },
+        // {
+        //     type: 'delete',
+        //     btnName: '删除',
+        //   },
+      ].filter((v) => v),
+      typeList: [
+        {
+          name: '芯片',
+          id: 0,
+        },
+        {
+          name: '标准组件',
+          id: 1,
+        },
+        {
+          name: 'BIPV产品',
+          id: 2,
+        },
+      ],
+      tableProps: [
+        {
+          prop: 'factory',
+          label: '玻璃类型',
+          fixed:true,
+          // filter: (val) => factoryList[val],
+          // minWidth: 200,
+          // showOverflowtooltip: true
+        },
+        {
+          prop: 'workOrderNumber',
+          label: '科目/日期',
+          fixed: true,
+          // filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
+        },
+        {
+          prop: 'workOrderType',
+          label: '单位',
+          fixed: true,
+          // filter: publicFormatter('workorder_status')
+          // 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: publicFormatter('workorder_status')
+          // filter: (val) => ['未开始', '生产中', '已完成'][val],
+        },
+        {
+          prop: 'startTime',
+          label: '开始时间',
+          minWidth: 100,
+          showOverflowtooltip: true
+        },
+        {
+          prop: 'endTime',
+          label: '完成时间',
+          minWidth: 100,
+          showOverflowtooltip: true
+        }
+      ],
+      tableData: [],
+      xAxis: [],
+      lineData: {},
+      data: {}
+      // proLineList: [],
+      // all: {}
+    };
+  },
+  computed: {
+    weekNum() {
+      return Math.round((this.end - this.start) / (24 * 60 * 60 * 1000 * 7)) + 1
+    },
+  },
+  created() {
+    const currentMonth = new Date()
+    this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
+    this.changeTime()
+  },
+  mounted() {
+    this.getOverView()
+    const currentMonth = new Date()
+    this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
+    this.changeTime()
+  },
+  methods: {
+    getYear(e) {
+      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 (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)
+        }
+      }
+      if (!this.start && !this.end) {
+        this.listQuery.beginTime = undefined
+        this.listQuery.endTime = undefined
+      }
+      // console.log(e);
+    },
+    changeTime() {
+      if (this.listQuery.reportTime) {
+        const years = Number(this.listQuery.reportTime[1].slice(0, 4)) - Number(this.listQuery.reportTime[0].slice(0, 4))
+        const months = Number(this.listQuery.reportTime[1].slice(4)) - Number(this.listQuery.reportTime[0].slice(4))
+        if (years * 12 + months > 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])
+        }
+      } else {
+        this.listQuery.beginTime = undefined
+        this.listQuery.endTime = undefined
+      }
+    },
+    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'))
+        }
+      }
+      if (!this.start && !this.end) {
+        this.listQuery.beginTime = undefined
+        this.listQuery.endTime = undefined
+      }
+    },
+    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])
+        }
+      } else {
+        this.listQuery.beginTime = undefined
+        this.listQuery.endTime = undefined
+      }
+    },
+    getOverView() {
+      // getOverView().then(res => {
+      //   this.data = res.data
+      //   console.log('aa', res.data)
+      // })
+    },
+    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 */
+.view {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex: 1;
+}
+
+.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;
+}
+.noBack{
+  background-color:black;
+}
+</style>