From d123189e1ac39b0d05fb3e4658627bb36b92b836 Mon Sep 17 00:00:00 2001
From: hcong <1050828145@qq.com>
Date: 星期三, 23 十月 2024 13:40:45 +0800
Subject: [PATCH] 数据产品-日报
---
src/views/fysp/data-product/ProdDailyReport.vue | 607 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 606 insertions(+), 1 deletions(-)
diff --git a/src/views/fysp/data-product/ProdDailyReport.vue b/src/views/fysp/data-product/ProdDailyReport.vue
index 78b8c00..209e2ff 100644
--- a/src/views/fysp/data-product/ProdDailyReport.vue
+++ b/src/views/fysp/data-product/ProdDailyReport.vue
@@ -1,9 +1,614 @@
<template>
- <div>DailyReport</div>
+ <!-- 涓诲唴瀹� -->
+ <div class="m-task container">
+ <!--澶撮儴淇℃伅-->
+ <div class="h-top col-md-12">
+ <div class="options">
+ <!-- <input type="date" class="c-time c-check" /> -->
+ <!-- 鏃堕棿 -->
+ <el-form-item label="鏃堕棿" :prop="prop" style="margin-left: 10px">
+ <el-date-picker
+ v-model="formSearch.time"
+ type="date"
+ placeholder="閫夋嫨鏃堕棿"
+ start-placeholder="閫夋嫨寮�濮嬫椂闂�"
+ end-placeholder="閫夋嫨缁撴潫鏃堕棿"
+ style="width: 180px"
+ />
+ </el-form-item>
+ <el-form-item label="鍖哄煙" :prop="prop" style="margin-left: 10px">
+ <el-select
+ placeholder="Select"
+ v-model="formSearch.districtCode"
+ class="c-area c-check"
+ style="width: 100px"
+ >
+ <el-option label="閲戝北鍖�" value="310116"></el-option>
+ <el-option label="闈欏畨鍖�" value="310106"></el-option>
+ <el-option label="寰愭眹鍖�" value="310104"></el-option>
+ <el-option label="闀垮畞鍖�" value="310105"></el-option>
+ </el-select>
+ </el-form-item>
+
+ <el-button
+ style="margin-left: 10px"
+ class="check-msg"
+ @click="search"
+ type="primary"
+ >鏌ヨ</el-button
+ >
+ <el-button type="primary" class="" @click="exportToExcel()">
+ 鐢熸垚鎶ュ憡
+ </el-button>
+ </div>
+ <div class="m-top">
+ <span class="title-input"> {{ reportName }} </span>
+ <!-- <input
+ type="text"
+ class="title-input"
+ value="绉嬪啲姹℃煋瀛ｆ湡闂村緪姹囧尯鎵皹姹℃煋杈呭姪鐩戠宸ヤ綔鏃ユ姤"
+ /> -->
+ </div>
+ </div>
+
+ <div class="m-msg col-md-12">
+ <span
+ name="desc"
+ class="desc-textarea"
+ rows="5"
+ value=""
+ cols=""
+ disabled
+ ></span>
+ <div class="report-table row">
+ <table id="table_subtask" class="" border="1"></table>
+ </div>
+ </div>
+
+ <div class="dark-screen">
+ <i class="fa fa-spinner fa-spin fa-3x" style="color: white"></i>
+ </div>
+ </div>
</template>
<script>
+import taskApi from '@/api/fysp/taskApi';
+import dayjs from 'dayjs';
+import * as XLSX from 'xlsx';
+import FileSaver from 'file-saver';
+import analysisApi from '@/api/fysp/analysisApi.js';
export default {
name: 'DailyReport',
+ computed: {
+ reportName() {
+ var city = '';
+ switch (this.formSearch.districtCode) {
+ case '310116':
+ city = '閲戝北鍖�';
+ break;
+ case '310106':
+ city = '闈欏畨鍖�';
+ break;
+ case '310104':
+ city = '寰愭眹鍖�';
+ break;
+ case '310105':
+ city = '闀垮畞鍖�';
+ break;
+ }
+
+ let title = `${city}鎵皹姹℃煋杈呭姪鐩戠宸ヤ綔鏃ユ姤`;
+ return title;
+ }
+ },
+ data() {
+ return {
+ CompTable: {
+ title: [],
+ content: [],
+ tableStyleClass: 'comp-table',
+ rowStyleClss: 'oddrowcolor',
+
+ init: function (title, content) {
+ this.title = title;
+ this.content = content;
+ },
+
+ /**
+ * 灞曠ず琛ㄦ牸
+ * @param {*} elementId table鐨刬d
+ */
+ show: function (elementId) {
+ const table = document.getElementById(elementId);
+ if (table) {
+ table.innerHTML = '';
+ table.classList.add(this.tableStyleClass);
+ this.createHead(elementId);
+ this.createContents(elementId);
+ }
+ },
+
+ /**
+ * 鐢熸垚琛ㄥご
+ * @param {*} elementId
+ */
+ createHead: function (elementId) {
+ const element = document.getElementById(elementId);
+ if (element) {
+ const row = document.createElement('tr');
+ for (let index = 0; index < this.title.length; index++) {
+ const th = document.createElement('th');
+ th.setAttribute('align', 'center');
+ th.textContent =
+ this.title[index] === undefined ? '' : this.title[index];
+ row.appendChild(th);
+ }
+ element.appendChild(row);
+ }
+ },
+
+ /**
+ * 鐢熸垚琛ㄥ唴瀹�
+ * @param {*} elementId
+ */
+ createContents: function (elementId) {
+ const element = document.getElementById(elementId);
+ if (element) {
+ for (let index = 0; index < this.content.length; index++) {
+ if (index % 2 === 0) {
+ this.rowStyleClss = 'evenrowcolor';
+ } else {
+ this.rowStyleClss = 'oddrowcolor';
+ }
+ const rowArray = this.content[index];
+ this.createRow(rowArray, elementId);
+ }
+ }
+ },
+
+ /**
+ * 鐢熸垚涓�琛岋紙鍖呮嫭鍚堝苟鍗曞厓鏍硷級
+ * @param {*} rowArray
+ */
+ createRow: function (rowArray, elementId) {
+ const maxRows = this.getMaxRow(rowArray);
+ const leftArray = [];
+
+ const tr = document.createElement('tr');
+ for (let i = 0; i < rowArray.length; i++) {
+ let cell = rowArray[i];
+ if (Array.isArray(cell)) {
+ const rowspan = maxRows / cell.length;
+ const td = document.createElement('td');
+ td.setAttribute('rowspan', rowspan);
+ td.classList.add(this.rowStyleClss);
+ td.textContent = cell[0] === undefined ? '' : cell[0];
+ tr.appendChild(td);
+ leftArray.push(cell.slice(1)); // Save the rest of the cell contents
+ } else {
+ const td = document.createElement('td');
+ td.setAttribute('rowspan', maxRows);
+ td.classList.add(this.rowStyleClss);
+ td.textContent = cell === undefined ? '' : cell;
+ tr.appendChild(td);
+ }
+ }
+ document.getElementById(elementId).appendChild(tr);
+
+ for (let i = 1; i < maxRows; i++) {
+ const tr = document.createElement('tr');
+ leftArray.forEach((cell, y) => {
+ if (i < cell.length) {
+ const td = document.createElement('td');
+ td.setAttribute('rowspan', maxRows / (cell.length - i));
+ td.classList.add(this.rowStyleClss);
+ td.textContent = cell[i] === undefined ? '' : cell[i];
+ tr.appendChild(td);
+ }
+ });
+ document.getElementById(elementId).appendChild(tr);
+ }
+ },
+
+ /**
+ * 鑾峰彇杩欎竴琛屼腑闇�瑕佸悎骞剁殑琛屾暟
+ * @param {*} rowArray
+ */
+ getMaxRow: function (rowArray) {
+ let maxRows = 1;
+ rowArray.forEach((element) => {
+ if (Array.isArray(element) && element.length > maxRows) {
+ maxRows = element.length;
+ }
+ });
+ return maxRows;
+ }
+ },
+
+ canClickDay: [],
+ excelConfig: {
+ title: '',
+ data: [],
+ fields: []
+ },
+ table: {
+ headers: [],
+ data: []
+ },
+ formSearch: {
+ time: [],
+ districtCode: '310116'
+ }
+ };
+ },
+ watch: {
+ formSearch: {
+ handler(nV, oV) {
+ // this.getCanClickDay();
+ },
+ deep: true,
+ // immediate: true
+ }
+ },
+ mounted() {
+ this.formSearch.time = new Date();
+ },
+ methods: {
+ disabledDate(time) {
+ this.getCanClickDay()
+ let disabled =
+ this.canClickDay.filter((item) => {
+ let date = dayjs(time)
+ let itemDay = new Date(item)
+ console.log("curr preview time canClickDay", itemDay.getFullYear(), itemDay.getMonth(), itemDay.getDate());
+ console.log("curr preview time date", date.year(), date.month(), date.date());
+ return date.year() == itemDay.getFullYear() && date.month() == itemDay.getMonth() && date.date() == itemDay.getDate()
+ })
+ .length == 0;
+ return !disabled;
+ },
+ getSelectedCityname() {
+ let city = '';
+
+ switch (this.formSearch.districtCode) {
+ case '310116':
+ city = '閲戝北鍖�';
+ break;
+ case '310106':
+ city = '闈欏畨鍖�';
+ break;
+ case '310104':
+ city = '寰愭眹鍖�';
+ break;
+ case '310105':
+ city = '闀垮畞鍖�';
+ break;
+ }
+ return city;
+ },
+ getCanClickDay() {
+ taskApi.getTopTask().then((res) => {
+ this.canClickDay = [];
+ let city = this.getSelectedCityname();
+ res
+ .filter((r) => {
+ return (
+ r.districtname == city &&
+ dayjs(this.formSearch.time).year() == dayjs(r.starttime).year() &&
+ dayjs(this.formSearch.time).month() == dayjs(r.starttime).month()
+ );
+ })
+ .map((topTask) => {
+ taskApi.fetchDayTasks(topTask.tguid).then((res) => {
+ res.forEach((r) => {
+ let formSearchDate = dayjs(this.formSearch.time)
+ let date = new Date()
+ dayjs(date).year(formSearchDate.year()).month(formSearchDate.month()).date(Number(r.date.slice(8, 10)))
+ this.canClickDay.push(date);
+ });
+ console.log("this.canClickDay", this.canClickDay);
+
+ });
+ });
+ });
+ },
+ exportToExcel() {
+ // 鍒涘缓宸ヤ綔绨�
+ const wb = XLSX.utils.book_new();
+
+ var wsData = [];
+ for (let index = 0; index < this.table.data.length; index++) {
+ const dataItem = this.table.data[index];
+ var row = {};
+ wsData.push(row);
+ for (let index = 0; index < dataItem.length; index++) {
+ row[this.table.headers[index]] = dataItem[index];
+ }
+ }
+ console.log('data', wsData);
+
+ // 鍒涘缓宸ヤ綔琛�
+ const ws = XLSX.utils.json_to_sheet(wsData);
+
+ // 灏嗗伐浣滆〃娣诲姞鍒板伐浣滅翱
+ XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
+
+ // 鐢熸垚Excel鏂囦欢
+ const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
+
+ // 瀛楃涓茶浆ArrayBuffer
+ function s2ab(s) {
+ const buf = new ArrayBuffer(s.length);
+ const view = new Uint8Array(buf);
+ for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
+ return buf;
+ }
+
+ // 淇濆瓨鏂囦欢
+ FileSaver.saveAs(
+ new Blob([s2ab(wbout)], { type: 'application/octet-stream' }),
+ `${this.reportName}.xlsx`
+ );
+ },
+ downloadFile() {
+ // 鏂囦欢鏍囬
+ let title = this.reportName;
+ // 琛ㄥご鎻忚堪
+ let desc = document.querySelector('.desc-textarea').textContent;
+ // 鏃堕棿
+ let time = document
+ .querySelector('.desc-textarea')
+ .textContent.split('锛�')[0];
+
+ // 鑾峰彇鏁版嵁
+ let thData = Array.from(document.getElementsByTagName('th')).map(
+ (th) => th.innerText
+ );
+ let tdData = Array.from(document.getElementsByTagName('td')).map(
+ (td) => td.innerText
+ );
+ let totalList = [];
+ let subList = [];
+ let index = 2;
+
+ let inputStatus = true;
+ for (let j = 0; j < thData.length; j++) {
+ subList.push(thData[j]);
+ }
+ totalList.push(subList);
+ subList = [];
+
+ for (let i = 0; i < tdData.length; i++) {
+ if (tdData[i] !== String(index)) {
+ if (tdData[i] !== '') {
+ subList.push(tdData[i]);
+ } else {
+ if (inputStatus) {
+ let inputList = document.querySelectorAll(`.input-${subList[0]}`);
+ for (let j = 0; j < inputList.length; j++) {
+ subList.push(inputList[j].value);
+ }
+ inputStatus = false;
+ } else {
+ inputStatus = true;
+ }
+ }
+ } else {
+ totalList.push(subList);
+ subList = [String(index)];
+ index += 1;
+ }
+ }
+ totalList.push(subList);
+
+ // index: 0 head
+ // other: data
+ // title
+
+ let fileData = {
+ title: title,
+ time: time,
+ desc: desc,
+ data: totalList
+ };
+
+ // if (fileData.title && fileData.time && fileData.desc && fileData.data.length) {
+ // fetch("http://47.100.191.150:9002/dustmonitor/report", {
+ // method: "POST",
+ // headers: {
+ // "Content-Type": "application/json"
+ // },
+ // body: JSON.stringify(fileData)
+ // })
+ // .then(response => response.json())
+ // .then(res => {
+ // if (res.status === 200) {
+ // let name = res.name.split("./")[1];
+ // setTimeout(() => {
+ // let a = document.createElement("a");
+ // a.href = appConfig.downloadUrl + name;
+ // a.download = name; // 璁剧疆涓嬭浇鏂囦欢鍚�
+ // document.body.appendChild(a);
+ // a.click();
+ // document.body.removeChild(a);
+ // }, 1000);
+ // }
+ // })
+ // .catch(error => console.error("Error:", error));
+ // }
+ },
+ search() {
+ let sTime = dayjs(this.formSearch.time).hour(0).minute(0).second(0);
+ let eTime = dayjs(this.formSearch.time).hour(23).minute(59).second(59);
+ eTime = eTime.toISOString();
+ sTime = sTime.toISOString();
+
+ let config = {
+ startTime: sTime,
+ endTime: eTime,
+ districtCode: this.formSearch.districtCode
+ };
+ analysisApi.checkProblem(config).then((res) => {
+ this.table.headers = res.tableTitle[0];
+ this.table.data = res.tableContent;
+
+ this.CompTable.init(res.tableTitle[0], res.tableContent);
+ this.CompTable.show('table_subtask');
+
+ const countMap = new Map(); //鍚勫満鏅暟閲�
+ let proCount = 0; //鎬昏闂鏁伴噺
+ let changeCount = 0; //鎬昏鏁存敼鏁伴噺
+
+ res.tableContent.forEach((cList) => {
+ const sceneType = cList[2];
+ if (!(sceneType in countMap)) {
+ countMap[sceneType] = 0;
+ }
+ countMap[sceneType] += 1;
+ proCount += Number(cList[10]);
+ changeCount += Number(cList[13]);
+ });
+
+ let countStr = '';
+ for (const key in countMap) {
+ const e = countMap[key];
+ if (countStr != '') {
+ countStr += '銆�';
+ }
+ countStr += `${key}${e}涓猔;
+ }
+
+ var descMsg = `鍏卞贰鏌�${res.tableContent.length}涓壃灏樺満鏅紙${countStr}锛夛紝鍏卞彂鐜伴棶棰�${proCount}椤癸紝鐫ｄ績鏁存敼浜�${changeCount}椤癸紱鍓嶆湡浣欑暀闂鍧囧凡閿�椤广�俙;
+ console.log('descMsg', descMsg);
+
+ // 鑾峰彇鎵�鏈夌被鍚嶄负 'desc-textarea' 鐨勫厓绱�
+ const textareas = document.querySelectorAll('.desc-textarea');
+
+ // 閬嶅巻杩欎簺鍏冪礌骞惰缃叾 HTML 鍐呭
+ textareas.forEach(function (textarea) {
+ textarea.innerHTML = descMsg;
+ });
+ // $('.desc-textarea').html('');
+ // $('.desc-textarea').html(descMsg);
+ });
+ }
+ }
};
</script>
+<style>
+.options {
+ display: flex;
+}
+.c-time {
+ width: 12rem;
+ height: 3rem;
+ border-radius: 3px;
+
+ font-size: 1rem;
+}
+.download-div {
+}
+.download-btn {
+ background-color: #5599cc;
+ width: 10rem;
+ height: 2.6rem;
+ color: #ffffff;
+ border-radius: 3px;
+ margin-right: 2rem;
+}
+.h-top .m-top {
+ /* width: 100%; */
+ padding-right: 8rem;
+ /* padding: 0 7% 0 0%; */
+ /* min-height: 8rem; */
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+}
+.title-input {
+ margin-top: -20px;
+ border-radius: 6px;
+ color: #000;
+ width: 80%;
+ font-size: 1.5rem;
+ line-height: 5rem;
+ text-align: center;
+ border: none;
+}
+.report-desc {
+ width: 80%;
+ margin-top: 5rem;
+}
+.desc-textarea {
+ width: 100%;
+ text-indent: 6rem;
+ font-size: 1rem;
+ margin-left: 5px;
+}
+.report-table {
+ width: 100%;
+ margin-top: 2rem;
+ table-layout: fixed;
+}
+.r-table {
+ width: 100%;
+ font-size: 2rem;
+}
+.r-table tr {
+ height: auto;
+}
+.r-table th {
+ height: 100%;
+ text-align: center;
+}
+.r-table td {
+ border-width: 1px;
+ min-width: 6rem;
+}
+.render-html {
+ cursor: pointer;
+}
+.h-top .m-top .task-div {
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ height: 2.6rem;
+ margin-bottom: 1rem;
+}
+
+/******************************琛ㄦ牸鏍峰紡*******************************/
+table.comp-table {
+ font-family: verdana, arial, sans-serif;
+ font-size: 11px;
+ color: #333333;
+ border-width: 1px;
+ border-color: #666666;
+ border-collapse: collapse;
+ margin: 4px;
+ width: 87vw;
+}
+table.comp-table th {
+ border-width: 1px;
+ padding: 8px;
+ border-style: solid;
+ border-color: #666666;
+ background-color: #dedede;
+ text-align: center; /** 璁剧疆姘村钩鏂瑰悜灞呬腑 */
+ vertical-align: middle; /** 璁剧疆鍨傜洿鏂瑰悜灞呬腑 */
+}
+table.comp-table td {
+ border-width: 1px;
+ padding: 8px;
+ border-style: solid;
+ border-color: #666666;
+ /* background-color: #ffffff; */
+}
+.oddrowcolor {
+ background-color: #d9f2f5;
+}
+.evenrowcolor {
+ background-color: #eff6f8;
+}
+/**********************************************************************/
+</style>
--
Gitblit v1.9.3