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

---
 package.json                            |   1 +
 src/main.js                             |  11 +-
 src/views/report/report/reportChart.vue |   7 +
 src/views/report/yearData/index.vue     | 358 ++++++++++++++++++++++++
 src/views/report/yearData/lineChart.vue | 162 +++++++++++
 5 files changed, 537 insertions(+), 2 deletions(-)
 create mode 100644 src/views/report/report/reportChart.vue
 create mode 100644 src/views/report/yearData/index.vue
 create mode 100644 src/views/report/yearData/lineChart.vue

diff --git a/package.json b/package.json
index 45a2630..efe8720 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "^1.6.8",
     "clipboard": "2.0.8",
+    "code-brick-zj": "^1.1.0",
     "core-js": "^3.26.0",
     "crypto-js": "^4.0.0",
     "echarts": "5.4.0",
diff --git a/src/main.js b/src/main.js
index 764dace..9e61108 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,10 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-04-12 11:13:06
+ * @LastEditTime: 2024-04-12 16:20:31
+ * @LastEditors: zhp
+ * @Description:
+ */
 import Vue from 'vue'
 import Element from 'element-ui'
 
@@ -23,7 +30,7 @@ import RightToolbar from "@/components/RightToolbar"
 // import hljs from 'highlight.js'
 // import 'highlight.js/styles/github-gist.css'
 import { DICT_TYPE, getDictDataLabel, getDictDatas, getDictDatas2 } from "@/utils/dict";
-
+import CodeBrickZj from 'code-brick-zj';
 import './theme/index.css'; // 自定义主题包 - code-brick-zj
 
 // 全局方法挂载
@@ -50,7 +57,7 @@ import VueMeta from 'vue-meta'
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
-
+Vue.use(CodeBrickZj);
 // Form Generator 组件需要使用到 tinymce
 import Tinymce from '@/components/tinymce/index.vue'
 Vue.component('tinymce', Tinymce)
diff --git a/src/views/report/report/reportChart.vue b/src/views/report/report/reportChart.vue
new file mode 100644
index 0000000..a14c786
--- /dev/null
+++ b/src/views/report/report/reportChart.vue
@@ -0,0 +1,7 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-04-12 10:10:26
+ * @LastEditTime: 2024-04-12 10:10:26
+ * @LastEditors: zhp
+ * @Description:
+-->
diff --git a/src/views/report/yearData/index.vue b/src/views/report/yearData/index.vue
new file mode 100644
index 0000000..d989194
--- /dev/null
+++ b/src/views/report/yearData/index.vue
@@ -0,0 +1,358 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-01-24 15:15:24
+ * @LastEditTime: 2024-04-12 16:50:32
+ * @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">
+        <el-form-item label="时间维度" prop="reportTime">
+          <el-select 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>
+        </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-date-picker>
+        </el-form-item>
+        <el-form-item label="工厂名称" prop="factoryId">
+          <el-select 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-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-button type="primary" size="small" plain @click="handleExport">导出</el-button>
+        </el-form-item>
+      </el-form>
+    </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>
+
+<script>
+// import { parseTime } from '../../core/mixins/code-filter';
+// import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
+// import inputTable from './inputTable.vue';
+import lineChart from './lineChart';
+import moment from 'moment'
+// import FileSaver from 'file-saver'
+// import * as XLSX from 'xlsx'
+export default {
+  components: { lineChart },
+	data() {
+    return {
+      listQuery: {
+        pageSize: 10,
+        pageNo: 1,
+        factoryId: null,
+        total: 0,
+        type: null,
+        // reportType: 2,
+        reportTime: []
+      },
+			urlOptions: {
+				// getDataListURL: getGlassPage,
+				// exportURL: exportGlasscExcel
+      },
+      timeList: [
+        {
+          value: 'month',
+          label:'月'
+        },
+        {
+          value: 'year',
+          label: '年'
+        }
+      ],
+      factoryList: [
+        {
+          name: '测试',
+          id:1
+        }
+      ],
+      typeList: [
+        {
+          name: '芯片',
+          id:0,
+        },
+        {
+          name: '标准组件',
+          id: 1,
+        },
+        {
+          name: 'BIPV产品',
+          id: 2,
+        },
+      ],
+      tableProps: [
+        // {
+        // 	prop: 'createTime',
+        // 	label: '添加时间',
+        // 	fixed: true,
+        // 	width: 180,
+        // 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+        // },
+        {
+          prop: 'userName',
+          label: '科目',
+        },
+        {
+          prop: 'nickName',
+          label: '类别',
+        },
+        {
+          prop: 'datas',
+          label: '数值',
+          // subcomponent: row
+        },
+        {
+          prop: 'unit',
+          label: '单位',
+          // subcomponent: row
+        },
+        {
+          prop: 'remark',
+          label: '备注',
+          // subcomponent: row
+        }
+      ],
+      timeSelect:'month',
+      startTimeStamp:null, //开始时间
+      endTimeStamp:null, //结束时间
+      date:'凯盛玻璃控股成员企业2024生产数据',
+			// reportTime: '',
+			startTimeStamp: '',
+			endTimeStamp: '',
+      tableData: [
+        {
+          userName: 'userName',
+          nickName: '用户名',
+          datas:'111111'
+        },
+        {
+          userName: 'userName',
+          nickName: '用户名',
+          datas: '111111'
+        },
+        {
+          userName: 'userName',
+          nickName: '用户名',
+          datas: '111111'
+          // subcomponent: row
+        }
+      ],
+			// proLineList: [],
+			// all: {}
+		};
+	},
+	mounted() {
+    this.getDict()
+    // this.getCurrentYearFirst()
+    // 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
+      } else {
+        this.listQuery.reportTime = []
+      }
+    },
+    async getDict() {
+      this.$refs.lineChart.initChart()
+			// 产线列表
+			// 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() {
+    },
+    add0(m) {
+      return m < 10 ? '0' + m : m
+    },
+    format(shijianchuo) {
+      //shijianchuo是整数，否则要parseInt转换
+      var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss')
+      // console.log(time)
+      // var y = time.getFullYear();
+      // var m = time.getMonth() + 1;
+      // var d = time.getDate();
+      // var h = time.getHours();
+      // var mm = time.getMinutes();
+      // 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 = []
+			}
+		},
+
+		//时间戳转为yy-mm-dd hh:mm:ss
+		timeFun(unixtimestamp) {
+				var unixtimestamp = new Date(unixtimestamp);
+				var year = 1900 + unixtimestamp.getYear();
+				var month = "0" + (unixtimestamp.getMonth() + 1);
+				var date = "0" + unixtimestamp.getDate();
+				return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
+		},
+		buttonClick(val) {
+			this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 10;
+					this.getDataList();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+		/** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      // var xlsxParam = { raw: true };
+      // /* 从表生成工作簿对象 */
+      // import('xlsx').then(excel => {
+      //   var wb = excel.utils.table_to_book(
+      //     document.querySelector("#exportTable"),
+      //     xlsxParam
+      //   );
+      //   /* 获取二进制字符串作为输出 */
+      //   var wbout = excel.write(wb, {
+      //     bookType: "xlsx",
+      //     bookSST: true,
+      //     type: "array",
+      //   });
+      //   try {
+      //     FileSaver.saveAs(
+      //       //Blob 对象表示一个不可变、原始数据的类文件对象。
+      //       //Blob 表示的不一定是JavaScript原生格式的数据。
+      //       //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
+      //       //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
+      //       new Blob([wbout], { type: "application/octet-stream" }),
+      //       //设置导出文件名称
+      //       "许昌安彩日原片生产汇总.xlsx"
+      //     );
+      //   } catch (e) {
+      //     if (typeof console !== "undefined") console.log(e, wbout);
+      //   }
+      //   return wbout;
+      //   //do something......
+      // })
+
+    },
+	},
+};
+</script>
+
+<style scoped>
+/* .blueTip { */
+	/* padding-bottom: 10px; */
+/* } */
+.blueTip::before{
+  display: inline-block;
+  content: '';
+  width: 4px;
+  height: 18px;
+  background: #0B58FF;
+  border-radius: 1px;
+  margin-right: 8PX;
+  margin-top: 8px;
+}
+.chart{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>
diff --git a/src/views/report/yearData/lineChart.vue b/src/views/report/yearData/lineChart.vue
new file mode 100644
index 0000000..c44a3dc
--- /dev/null
+++ b/src/views/report/yearData/lineChart.vue
@@ -0,0 +1,162 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-01-21 14:43:06
+ * @LastEditors: zhp
+ * @LastEditTime: 2024-04-12 16:50:42
+ * @Description:
+-->
+<template>
+  <div>
+    <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
+    <div :id="id" :class="className" :style="{  height: '400px', width: width }" />
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import 'echarts/theme/macarons' // echarts theme
+// import resize from './mixins/resize'
+
+export default {
+  name: 'OverviewBar',
+  // mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'OverviewLine'
+    },
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    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() {
+      console.log(1111)
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart.setOption({
+        title: {
+          text: '',
+          // subtext: 'Fake Data'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['Rainfall', 'Evaporation']
+        },
+        // 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'
+          }
+        ],
+        grid: {
+          top: '100px',
+          left: "3%",
+          right: "10%",
+          bottom: "3%",
+          containLabel: true
+        },
+        series: [
+          {
+            name: 'Rainfall',
+            type: 'bar',
+            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',
+            type: 'bar',
+            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 }
+              ]
+            },
+            markLine: {
+              data: [{ type: 'average', name: 'Avg' }]
+            }
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart {
+  margin-top: -3em
+}
+</style>
-- 
2.45.2