新增模块

src/views/report/report/reportChart.vue

@@ -1,7 +0,0 @@
-<!--
- * @Author: zhp
- * @Date: 2024-04-12 10:10:26
- * @LastEditTime: 2024-04-12 10:10:26
- * @LastEditors: zhp
- * @Description:
--->

src/views/report/yearData/index.vue

@@ -1,41 +1,43 @@
 <!--
  * @Author: zhp
  * @Date: 2024-01-24 15:15:24
- * @LastEditTime: 2024-04-12 16:50:32
+ * @LastEditTime: 2024-04-17 16:15:23
  * @LastEditors: zhp
  * @Description:
 -->
 <template>
-  <div class="app-container">
-    <div>
-      <!-- <el-alert title="自定义 close-text" type="warning" close-text="知道了">
-      </el-alert> -->
-      <el-form :model="listQuery" :inline="true" ref="dataForm"  class="blueTip">
+  <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)">
+    <div class="app-container" style="padding: 16px 24px 0; max-height: 45vh; flex-grow: 1;">
+      <!-- <div style="position: relative;z-index: 999;"> -->
+      <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
         <el-form-item label="时间维度" prop="reportTime">
-          <el-select v-model="timeSelect" placeholder="请选择">
+          <el-select clearable v-model="timeSelect" 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="timeSelect === 'month'" label="时间范围" prop="reportTime">
-          <el-date-picker v-model="listQuery.reportTime" type="monthrange" range-separator="至" start-placeholder="开始月份"
-            end-placeholder="结束月份">
+          <el-date-picker clearable v-model="listQuery.reportTime" type="monthrange" range-separator="至"
+            start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
           </el-date-picker>
         </el-form-item>
-        <el-form-item v-if="timeSelect === 'year'" label="时间范围" prop="reportTime">
-          <el-date-picker v-model="listQuery.reportTime" type="year" @change="changeTime"
-            :picker-options="{firstDayOfWeek: 1}" :format="'yyyy 年' + '\u3000' + startTimeStamp + '-' + endTimeStamp"
-            placeholder="选择年">
+        <el-form-item v-show="timeSelect === 'year'" label="时间范围" prop="reportTime">
+          <el-date-picker clearable v-model="listQuery.reportTime[0]" value-format="yyyy" type="year"
+            placeholder="开始时间">
+          </el-date-picker>
+          ~
+          <el-date-picker v-model="listQuery.reportTime[1]" value-format="yyyy" type="year" placeholder="结束时间"
+            @change="getYear">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="工厂名称" prop="factoryId">
-          <el-select v-model="listQuery.factoryId" placeholder="请选择工厂名称">
+          <el-select clearable v-model="listQuery.factoryId" placeholder="请选择工厂名称">
             <el-option v-for="item in factoryList" :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-select clearable 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>
@@ -45,20 +47,21 @@
           <el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
         </el-form-item>
       </el-form>
+      <!-- </div> -->
+      <!-- <el-row style="height: 500px;"> -->
+      <!-- <div> -->
+      <line-chart class="yearChart" ref="lineChart" style="height: 35vh;width: 100%"></line-chart>
+      <!-- </div> -->
+      <!-- </el-row> -->
+    </div>
+    <!-- <el-row style="height: 400px;"> -->
+    <!-- </el-row> -->
+    <div class="app-container" style="margin-top: 18px; height: unset; flex-grow: 1; padding: 16px;">
+      <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
+      <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
+        :table-data="tableData">
+      </base-table>
     </div>
-    <el-row style="height: 400px;">
-      <line-chart class="chart" ref="lineChart" style="height: 400px;width: 50%;margin-top: 50px;"></line-chart>
-    </el-row>
-    <el-divider></el-divider>
-    <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData">
-    </base-table>
-    <!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
-      :type="listQuery.reportType" @refreshDataList="getDataList" /> -->
-    <!-- <pagination
-			:limit.sync="listQuery.pageSize"
-			:page.sync="listQuery.pageNo"
-			:total="listQuery.total"
-			@pagination="getDataList" /> -->
   </div>
 </template>
 
@@ -66,6 +69,7 @@
 // import { parseTime } from '../../core/mixins/code-filter';
 // import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
 // import inputTable from './inputTable.vue';
+import { report } from 'process';
 import lineChart from './lineChart';
 import moment from 'moment'
 // import FileSaver from 'file-saver'
@@ -83,6 +87,10 @@ export default {
         // reportType: 2,
         reportTime: []
       },
+      // startDatePicker: this.beginDate(),
+      // endDatePicker: this.processDate(),
+      yeartsStart: '',
+      yeartsEnd: '',
 			urlOptions: {
 				// getDataListURL: getGlassPage,
 				// exportURL: exportGlasscExcel
@@ -117,6 +125,12 @@ export default {
           id: 2,
         },
       ],
+      formConfig: [
+        {
+          type: 'title',
+          label: '报表管理',
+        },
+      ],
       tableProps: [
         // {
         // 	prop: 'createTime',
@@ -184,31 +198,32 @@ export default {
     // this.getDataList()
 	},
   methods: {
-    // handleTime() {
-    //   this.$forceUpdate()
-    //   // this.$nextTick(() => [
-
-    //   // ])
-    // },
-    // getCurrentYearFirst() {
-    //   let date = new Date();
-    //   date.setDate(1);
-    //   date.setMonth(0);
-    //   this.reportTime = date;
-    //   this.startTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()); //开始时间
-    //   this.endTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()); //结束时间
-    //   this.listQuery.reportTime[0] = parseTime(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
-    //   this.listQuery.reportTime[1] = parseTime(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 100
-    // },
-    changeTime(val) {
-      if (val) {
-        // let timeStamp = val.getTime(); //标准时间转为时间戳，毫秒级别
-        // this.endTimeStamp = this.timeFun(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()); //开始时间
-        // this.startTimeStamp = this.timeFun(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()); //结束时间
-        // this.listQuery.reportTime[0] = parseTime(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
-        // this.listQuery.reportTime[1] = parseTime(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
+    getYear(e) {
+      if (this.listQuery.reportTime[0] && e - this.listQuery.reportTime[0] > 10) {
+        this.$message({
+          message: '年份起止时间不能超过十年',
+          type: 'warning'
+        });
+        // console.log();
+      }
+      // console.log(e);
+    },
+    changeTime() {
+      if (this.listQuery.reportTime) {
+        this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss');
+        this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss');
+        const numDays = (new Date(this.listQuery.reportTime[1]).getTime() - new Date(this.listQuery.reportTime[0]).getTime()) / (24 * 3600 * 1000); if (numDays > 730) {
+          this.$message({
+            message: '时间范围不能超过24个月',
+            type: 'warning'
+          });
+          this.listQuery.reportTime = [];
+          this.createStartDate = '';
+          this.createEndDate = '';
+        }
       } else {
-        this.listQuery.reportTime = []
+        this.createStartDate = '';
+        this.createEndDate = '';
       }
     },
     async getDict() {
@@ -257,22 +272,22 @@ export default {
       // var s = time.getSeconds();
       return time
     },
-		changeTime(val) {
-      if (val) {
-        // console.log(val)
-        // console.log(val.setHours(7, 0, 0))
-        // console.log(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000)
-        // let time = this.format(val.setHours(7, 0, 0))
-        this.endTimeStamp = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
-        this.startTimeStamp  = this.format(val.setHours(7, 0, 1) - 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
-        // console.log(this.listQuery.reportTime);
-        this.listQuery.reportTime[0] = this.format(val.setHours(7, 0, 1)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
-        this.listQuery.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
-        console.log(this.listQuery.reportTime);
-			} else {
-					this.listQuery.reportTime = []
-			}
-		},
+		// changeTime(val) {
+    //   if (val) {
+    //     // console.log(val)
+    //     // console.log(val.setHours(7, 0, 0))
+    //     // console.log(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000)
+    //     // let time = this.format(val.setHours(7, 0, 0))
+    //     this.endTimeStamp = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
+    //     this.startTimeStamp  = this.format(val.setHours(7, 0, 1) - 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
+    //     // console.log(this.listQuery.reportTime);
+    //     this.listQuery.reportTime[0] = this.format(val.setHours(7, 0, 1)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
+    //     this.listQuery.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
+    //     console.log(this.listQuery.reportTime);
+		// 	} else {
+		// 			this.listQuery.reportTime = []
+		// 	}
+		// },
 
 		//时间戳转为yy-mm-dd hh:mm:ss
 		timeFun(unixtimestamp) {
@@ -336,9 +351,6 @@ export default {
 </script>
 
 <style scoped>
-/* .blueTip { */
-	/* padding-bottom: 10px; */
-/* } */
 .blueTip::before{
   display: inline-block;
   content: '';
@@ -349,10 +361,12 @@ export default {
   margin-right: 8PX;
   margin-top: 8px;
 }
-.chart{
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+.app-container {
+  margin: 0 16px 0;
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 16px 16px 0;
+  height: calc(100vh - 134px);
+  overflow: auto;
 }
 </style>

src/views/report/yearData/lineChart.vue

@@ -2,32 +2,31 @@
  * @Author: zwq
  * @Date: 2022-01-21 14:43:06
  * @LastEditors: zhp
- * @LastEditTime: 2024-04-12 16:50:42
+ * @LastEditTime: 2024-04-16 09:58:08
  * @Description:
 -->
 <template>
-  <div>
+  <!-- <div> -->
     <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
-    <div :id="id" :class="className" :style="{  height: '400px', width: width }" />
-  </div>
+    <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'
-
+import resize from '@/mixins/resize'
 export default {
   name: 'OverviewBar',
-  // mixins: [resize],
+  mixins: [resize],
   props: {
     id: {
       type: String,
-      default: 'OverviewLine'
+      default: 'reportChart'
     },
     className: {
       type: String,
-      default: 'chart'
+      default: 'reportChart'
     },
     width: {
       type: String,
@@ -39,7 +38,7 @@ export default {
     },
     height: {
       type: String,
-      default: '300px'
+      default: '30vh'
     },
     legendPosition: {
       type: String,
@@ -60,9 +59,9 @@ export default {
     }
   },
   mounted() {
-    // this.$nextTick(() => {
-    //   this.initChart()
-    // })
+    this.$nextTick(() => {
+      this.initChart()
+    })
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -75,6 +74,7 @@ export default {
     initChart() {
       console.log(1111)
       this.chart = echarts.init(document.getElementById(this.id))
+      console.log(this.$parent);
       this.chart.setOption({
         title: {
           text: '',
@@ -83,8 +83,15 @@ export default {
         tooltip: {
           trigger: 'axis'
         },
+        grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
         legend: {
-          data: ['Rainfall', 'Evaporation']
+          data: ['FTO投入', '封装材料成本', '人均产量', '产品产量'],
+          right: '90px',
+          top: '0%',
+          icon: 'rect',
+          itemWidth: 10,
+          itemHeight: 10,
+          itemGap: 40,
         },
         // toolbox: {
         //   show: true,
@@ -109,44 +116,72 @@ export default {
           }
         ],
         grid: {
-          top: '100px',
-          left: "3%",
-          right: "10%",
-          bottom: "3%",
+          top: '20%',
+          left: "1%",
+          right: "3%",
+          bottom: "1%",
           containLabel: true
         },
         series: [
           {
-            name: 'Rainfall',
+            name: 'FTO投入',
             type: 'bar',
+            itemStyle: {
+              normal: {
+                color: 'rgba(99, 189, 255, 1)', //改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(99, 189, 255, 1)' //改变折线颜色
+                }
+              }
+            },
             data: [
               2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
             ],
-            markPoint: {
-              data: [
-                { type: 'max', name: 'Max' },
-                { type: 'min', name: 'Min' }
-              ]
-            },
-            markLine: {
-              data: [{ type: 'average', name: 'Avg' }]
-            }
           },
           {
-            name: 'Evaporation',
+            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
             ],
-            markPoint: {
-              data: [
-                { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
-                { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
-              ]
+          },
+          {
+            name: '人均产量',
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: 'rgba(40, 138, 255, 1)', //改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(40, 138, 255, 1)' //改变折线颜色
+                }
+              }
             },
-            markLine: {
-              data: [{ type: 'average', name: 'Avg' }]
-            }
+            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: 'rgba(113, 100, 255, 1)', //改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(113, 100, 255, 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
+            ],
           }
         ]
       })
@@ -156,7 +191,10 @@ export default {
 </script>
 
 <style scoped>
-.chart {
-  margin-top: -3em
-}
+/* .reportChart {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 10px;
+} */
 </style>