Преглед изворни кода

2022-10-11 update

1. 编辑导出word的模板html
2. 调整考培档案页的下方表格自适应功能
3. 调整首页底部部门/职工 图表自适应高度功能
moccus пре 2 година
родитељ
комит
18b01c943d

+ 2 - 2
exam-06173-vue/src/utils/export-word.js

@@ -1,7 +1,7 @@
-const Export2Word = (element, filename = '') => {
+const Export2Word = (elementStr, filename = '') => {
   var preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>";
   var postHtml = "</body></html>";
-  var html = preHtml + document.getElementById(element).innerHTML + postHtml;
+  var html = preHtml + elementStr + postHtml;
 
   var blob = new Blob(['\ufeff', html], {
     type: 'application/msword'

+ 5 - 1
exam-06173-vue/src/views/admin/stat/total/archives.vue

@@ -44,7 +44,7 @@
           ref="archivesTableRef-bm"
           :data="bmTableData"
           border
-          height="250"
+          :height="tableHeight"
           style="width: 100%"
         >
           <el-table-column fixed="left" label="名称" align="center">
@@ -193,11 +193,15 @@ export default {
       zgTableData: [],
       selectDeptCode: "",
       selectDeptName: "",
+      tableHeight: 280,
     };
   },
 
   mounted() {
     this.resetDate(this.radio);
+    window.addEventListener('resize', () => {
+      this.tableHeight = (window.innerHeight - 657) <= 280 ? 280 : window.innerHeight - 657
+    })
   },
 
   methods: {

+ 133 - 7
exam-06173-vue/src/views/dashboard/index.vue

@@ -141,12 +141,12 @@
 
       <el-tabs v-model="tabActive" @tab-click="reLayoutTable">
         <el-tab-pane class="chartItem" label="部门" name="bm">
-          <div id="bmPxChartDom" style="width: 48%; height: 280px"></div>
-          <div id="bmKsChartDom" style="width: 48%; height: 280px"></div>
+          <div id="bmPxChartDom" style="width: 48%; height: 30vh"></div>
+          <div id="bmKsChartDom" style="width: 48%; height: 30vh"></div>
         </el-tab-pane>
         <el-tab-pane class="chartItem" label="职工" name="zg">
-          <div id="zgPxChartDom" style="width: 48%; height: 280px"></div>
-          <div id="zgKsChartDom" style="width: 48%; height: 280px"></div>
+          <div id="zgPxChartDom" style="width: 48%; height: 30vh"></div>
+          <div id="zgKsChartDom" style="width: 48%; height: 30vh"></div>
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -179,13 +179,131 @@ export default {
       getPassedRate,
       getUserRank,
       getUserRate,
+      chart1: null,
+      chart2: null,
+      chart3: null,
+      chart4: null
     };
   },
   mounted() {
     this.initChart();
     this.getCttTotal();
     this.getCurrentExam();
-    // exportWord('app', 'app')
+    setTimeout(() => {
+      window.addEventListener('resize', () => {
+        if (this.chart1 && this.chart3) {
+          this.chart1.getDom().style.height = (window.innerHeight - 650)> 281 ? (window.innerHeight - 650) + 'px' : '281px'
+          this.chart1.resize()
+          this.chart3.getDom().style.height = (window.innerHeight - 650)> 281 ? (window.innerHeight - 650) + 'px' : '281px'
+          this.chart3.resize()
+        }
+        if (this.chart2 && this.chart4) {
+          this.chart2.getDom().style.height = (window.innerHeight - 650)> 281 ? (window.innerHeight - 650) + 'px' : '281px'
+          this.chart2.resize()
+          this.chart4.getDom().style.height = (window.innerHeight - 650)> 281 ? (window.innerHeight - 650) + 'px' : '281px'
+          this.chart4.resize()
+        }
+      })
+    }, 1000)
+    const htmlStr = `<style>table {border: none;width: 100%; text-align: center;border-collapse: collapse;} tr {height: 30px;} td {border: 1px solid black;}</style><div>档案编号:</div>
+	<table>
+		<tr>
+			<td width="10%">姓名</td>
+			<td width="20%">${this.$store.state.user.realName}</td>
+			<td width="20%">性别</td>
+			<td width="20%"></td>
+			<td width="20%">年龄</td>
+			<td width="10%"></td>
+		</tr>
+		<tr>
+			<td>参加工作时间</td>
+			<td colspan="2"></td>
+			<td>进入公司时间</td>
+			<td colspan="2"></td>
+		</tr>
+		<tr>
+			<td>工种</td>
+			<td colspan="2"></td>
+			<td>从业资格证书</td>
+			<td colspan="2"></td>
+		</tr>
+		<tr>
+			<td colspan="6">三级安全培训记录</td>
+		</tr>
+		<tr>
+			<td>序号</td>
+			<td>培训时间</td>
+			<td>培训内容</td>
+			<td>培训级别</td>
+			<td>培训评价</td>
+			<td>备注</td>
+		</tr>
+		<tr>
+			<td>1</td>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+		</tr>
+		<tr>
+			<td>2</td>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+		</tr>
+		<tr>
+			<td>3</td>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+		</tr>
+		<tr>
+			<td>4</td>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+		</tr>
+		<tr>
+			<td>5</td>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+		</tr>
+		<tr>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+		</tr>
+		<tr>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+		</tr>
+		<tr>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+			<td></td>
+		</tr>
+	</table>`
+    // exportWord(htmlStr, 'app')
   },
   methods: {
     // 获取统计数值
@@ -253,7 +371,11 @@ export default {
         statDateR: endDate
       }).then((res) => {
         let myChart = echarts.init(pxChartDom);
-
+        if (tabActive === 'bm') {
+          this.chart1 = myChart
+        } else {
+          this.chart2 = myChart
+        }
         let option;
 
         let xAxisData = [];
@@ -327,7 +449,11 @@ export default {
         statDateR: endDate,
       }).then((res) => {
         let myChart = echarts.init(ksChartDom);
-
+        if (tabActive === 'bm') {
+          this.chart3 = myChart
+        } else {
+          this.chart4 = myChart
+        }
         let option;
 
         let xAxisData = [];