From 1e18f0bcee0358e13c0e2cb750d17cd7ef5bf4d6 Mon Sep 17 00:00:00 2001 From: zmc <zmc_li@foxmail.com> Date: 星期一, 07 八月 2023 17:55:21 +0800 Subject: [PATCH] 油烟检测系统 --- src/test/TestWa.vue | 1744 +++++++++++---------------------------------------------- 1 files changed, 335 insertions(+), 1,409 deletions(-) diff --git a/src/test/TestWa.vue b/src/test/TestWa.vue index ffdcc27..9556095 100644 --- a/src/test/TestWa.vue +++ b/src/test/TestWa.vue @@ -1,1456 +1,382 @@ -<!-- app --> -<!-- --> -<template> - <!-- solid #000000 --> - <div style="margin: 20px; padding: 10px; border: 1px; height: 815px"> - <!-- <div style="margin-bottom: 20px; display: flex; white-space: nowrap"> - 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬� - </div> --> - <!-- 鑿滃崟璇绘爣棰� --> - - <div style="display: flex"> - <span class="describe-info">搴楅摵鍚嶉�夋嫨锛�</span> - - <!-- 搴楅摵鍚� 绾ц仈 --> - <ShopNameAndID - @submit-id="(n) => (deviceId[1] = n)" - :devId="鍏ㄩ儴" - ></ShopNameAndID> - <!-- {{ deviceId }} --> - <!-- 鍐欏嚭缁勪欢 --> - <!-- 杩涙潵灏卞姞杞� --> - <!-- <span style="margin-right: 15px"> - <el-cascader - v-model="deviceId" - :options="optionsShop" - :props="{ expandTrigger: 'hover' }" - placeholder="鍏ㄩ儴" - /> - </span> --> - <!-- @visible-change="getDeviceInfo" --> - <!-- 寮傚父绫诲瀷閫夋嫨 --> - <ExceptionType @submitExceptionType="(val) => (exceptionValue = val)"> - </ExceptionType> - - <span class="describe-time-text">璧锋鏃堕棿锛�</span> - <!-- 鏃ユ湡鏃堕棿閫夋嫨鍣� --> - <!-- <el-date-picker - v-model="beginTime" - type="datetime" - placeholder="寮�濮嬫椂闂�" - value-format="YYYY-MM-DD HH:mm:ss" - /> - <span>~ </span> - <el-date-picker - v-model="endTime" - type="datetime" - placeholder="缁撴潫鏃堕棿" - value-format="YYYY-MM-DD HH:mm:ss" - /> --> - <TimeSelect @submit-time="giveTime"></TimeSelect> - - <!-- 鍋氭垚琛ㄥ崟 --> - <el-button - type="primary" - plain - @click="showTable" - style="margin-left: 20px" - >鏌ヨ</el-button - > - <el-button - type="primary" - plain - @click="getAllData" - style="margin-left: 20px" - >鏌ヨ鍏ㄩ儴</el-button - > - - <el-tooltip - class="box-item" - effect="dark" - content="鐐瑰嚮鍙鍑篍xcel鏂囦欢" - placement="top-start" - > - <!-- 鍋氭垚鍑芥暟js鏂囦欢 --> - <el-icon - class="iconExcel clickable" - title="瀵煎嚭Excel鏂囦欢" - @click="exportDom" - > - <i-ep-Download /> - <!-- 瀵煎嚭涓篍xcel --> - </el-icon> - </el-tooltip> - </div> - <br /> - - <el-collapse v-model="activeNames"> - <el-collapse-item name="1"> - <template #title> - <el-tooltip - class="box-item" - effect="dark" - content="鐐瑰嚮鍙姌鍙�" - placement="right-start" - > - <span class="collapse-header"> 寮傚父鐨勫簵閾烘暟閲忓垎鏋�</span> - <el-icon class="header-icon"> - <i-ep-info-filled /> - </el-icon> - </el-tooltip> - - <el-tooltip - class="box-item" - effect="dark" - content="鐐瑰嚮鍙姌鍙�" - placement="right-start" - > - <span class="collapse-header-text"> - 闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span - > - </el-tooltip> - </template> - <el-card class="box-card"> - <el-row :gutter="25"> - <el-col :span="8"> - <el-statistic :value="exception0.length"> - <template #title - ><span style="color: red; font-size: 15px">娌圭儫娴撳害瓒呮爣</span> - </template> - <template #prefix> - <span class="box-card-label">搴楅摵鏁伴噺锛�</span> - </template> - <template #suffix - >/{{ shopsTotal }} - <span style="margin-left: 150px"> - 鍗犳瘮锛歿{ - ((exception0.length / shopsTotal) * 100).toFixed(1) - }}%</span - ></template - > - </el-statistic> - <hr /> - <div class="box-card-butcontainer"> - <el-scrollbar height="130px"> - <!-- <button - v-for="item in this.exception0" - :key="item" - class="scrollbar-demo-item" - > - {{ item.diName }} - - <br /> - </button> --> - - <div v-for="item in exception0" :key="item"> - <ExceptionButton - :devId="item.devId" - exception-value="0" - :begin-time="beginTime" - :end-time="endTime" - @submit-exception-data="getAbnormalDataByClick" - >{{ item.diName }}</ExceptionButton - > - </div> - </el-scrollbar> - </div> - </el-col> - - <el-col :span="8"> - <el-statistic :value="exception1.length"> - <template #title - ><span style="color: rgb(181, 14, 247); font-size: 15px" - >渚涚數寮傚父</span - ></template - > - <template #prefix> - <span class="box-card-label">搴楅摵鏁伴噺锛�</span> - </template> - <template #suffix - >/{{ shopsTotal }} - <span style="margin-left: 150px"> - 鍗犳瘮锛歿{ - ((exception1.length / shopsTotal) * 100).toFixed(1) - }}%</span - ></template - > - </el-statistic> - <hr /> - - <div> - <el-scrollbar height="130px"> - <div v-for="item in exception1" :key="item"> - <ExceptionButton - :devId="item.devId" - exceptionValue="1" - :begin-time="beginTime" - :end-time="endTime" - @submit-exception-data="getAbnormalDataByClick" - >{{ item.diName }}</ExceptionButton - > - </div> - </el-scrollbar> - </div> - </el-col> - - <el-col :span="8"> - <el-statistic :value="exception2.length"> - <template #title - ><span style="color: rgb(185, 96, 11); font-size: 15px" - >鎺夌嚎</span - ></template - > - <template #prefix> - <span class="box-card-label">搴楅摵鏁伴噺锛�</span> - </template> - <template #suffix - >/{{ shopsTotal }} - <span style="margin-left: 150px"> - 鍗犳瘮锛歿{ - ((exception2.length / shopsTotal) * 100).toFixed(1) - }}%</span - ></template - > - </el-statistic> - <hr /> - <div> - <el-scrollbar height="130px"> - <!-- <span - v-for="item in this.exception2" - :key="item" - class="scrollbar-demo-item" - > - {{ item.diName }} - <br /> - </span> --> - - <div v-for="item in exception2" :key="item"> - <ExceptionButton - :devId="item.devId" - exceptionValue="2" - :begin-time="beginTime" - :end-time="endTime" - @submit-exception-data="getAbnormalDataByClick" - >{{ item.diName }}</ExceptionButton - > - </div> - </el-scrollbar> - </div> - </el-col> - </el-row> - </el-card> - </el-collapse-item> - </el-collapse> - - <br /> - <hr /> - <div class="table-page"> - <el-table - v-loading="loading" - :data="displayData" - style="width: 100%" - height="400" - > - <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" width="340"> - <template #default="{ row }"> - <el-tooltip effect="dark" :content="row.diName"> - <div class="cell ellipsis">{{ row.diName }}</div> - </el-tooltip> - </template> - </el-table-column> - - <el-table-column prop="devId" label="璁惧缂栧彿" width="230"> - <template #default="{ row }"> - <el-tooltip effect="dark" :content="row.devId"> - <div class="cell ellipsis">{{ row.devId }}</div> - </el-tooltip> - </template> - </el-table-column> - - <el-table-column prop="exception" label="寮傚父鍒嗙被" width="150"> - <template #default="{ row }"> - <el-tooltip effect="dark" :content="row.exception"> - <div class="cell ellipsis">{{ row.exception }}</div> - </el-tooltip> - </template> - </el-table-column> - <el-table-column label="寮傚父绫诲瀷" width="150"> - <template #default="{ row }"> - <span v-if="row.exceptionType == '0'">娌圭儫鏁版嵁瓒呮爣</span> - <span v-else-if="row.exceptionType == '1'">鐤戜技渚涚數寮傚父</span> - <span v-else-if="row.exceptionType == '2'">鎺夌嚎</span> - </template> - </el-table-column> - <el-table-column prop="region" label="鍦板尯" width="150"> - <template #default="{ row }"> - <el-tooltip effect="dark" :content="row.region"> - <div class="cell ellipsis">{{ row.region }}</div> - </el-tooltip> - </template> - </el-table-column> - - <el-table-column prop="beginTime" label="寮�濮嬫椂闂�"> - <template #default="{ row }"> - <el-tooltip effect="dark" :content="row.beginTime"> - <div class="cell ellipsis">{{ row.beginTime }}</div> - </el-tooltip> - </template> - </el-table-column> - <el-table-column prop="endTime" label="缁撴潫鏃堕棿"> - <template #default="{ row }"> - <el-tooltip effect="dark" :content="row.endTime"> - <div class="cell ellipsis">{{ row.endTime }}</div> - </el-tooltip> - </template> - </el-table-column> - <el-table-column label="鎿嶄綔" width="200"> - <template #default="{ row }"> - <el-button type="warning" @click="showDrawer(row)" - >鏌ョ湅璇︽儏</el-button - > - </template> - </el-table-column> - </el-table> - - <el-pagination - background - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :total="total" - :page-size="pageSize" - layout="total,prev, pager, next, jumper" - /> - </div> - - <!-- 瀵硅瘽妗� --> - <div style="width: 600px;"> - <el-dialog v-model="centerDialogVisible" title="Warning" align-center> - <template #header="{ titleId, titleClass }"> - <div :id="titleId" :class="titleClass" style="font-size: 17px"> - 搴楅摵鍚嶏細{{ rowShopName }} - <span style="margin-left: 40px">寮傚父绫诲瀷锛�</span> - <span v-if="rowExceptionType == '0'">娌圭儫鏁版嵁瓒呮爣</span> - <span v-else-if="rowExceptionType == '1'">渚涚數寮傚父</span> - <span v-else-if="rowExceptionType == '2'">鎺夌嚎</span> - <div style="margin-top: 10px"> - 寮傚父鏃堕棿娈碉細{{ rowBeginTime }} ~ - {{ rowEndTime }} - </div> - </div> - </template> - - <el-button - type="danger" - :disabled="isPreCantouch" - @click="getPreviousRowData" - >涓婁竴鏉�</el-button - > - <el-button - type="danger" - :disabled="isNextCantouch" - @click="getNextRowData" - >涓嬩竴鏉�</el-button - > - <!-- 瓒呮爣鏁版嵁鏃� --> - <!-- 鎶樼嚎鍥� --> - <div - ref="chart" - style=" - width: 800px; - height: 300px; - margin-bottom: 20px; - margin-left: 10px; - " - ></div> - - <!-- v-show="!isAbnormal" --> - <!-- 琛ㄦ牸 --> - <div style="margin-top: 40px;margin-bottom: 5px; border: 1px solid #000000"> - <el-table - :data="exceedingData" - height="360" - border - style="width: 100%; margin-top: 25px" - > - <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" /> - <el-table-column - - prop="mvStatCode" - label="璁惧缂栧彿" - width="240" - /> - - <el-table-column prop="mvDataTime" label="鎶ヨ鏃堕棿" width="220" /> - <el-table-column - prop="mvFumeConcentration2" - label="娌圭儫娴撳害(mg/m鲁)" - width="150" - /> - </el-table> - </div> - - <el-tag - type="success" - class="mx-1" - effect="dark" - round - ><span class="table-line-lable">琛ㄦ牸琛屾暟锛� </span> <span class="table-line-num" >{{exceptionTotal }}</span></el-tag - > - </el-dialog> - </div> - </div> -</template> - +<!-- 鏁版嵁鐖彇 --> <script> -import ExceptionButton from '../sfc/ExceptionButton.vue'; -import ExceptionType from '../sfc/ExceptionType.vue'; -import TimeSelect from '../sfc/TimeSelect.vue'; +// import ShopNameSelect from '../sfc/ShopNameSelect.vue' +import ShopNameCheckBox from '../sfc/ShopNameCheckBox.vue'; +import TimeSelectCrawling from '../sfc/TimeSelectCrawling.vue'; -// import axios from 'axios'; -import * as echarts from 'echarts'; -import * as XLSX from 'xlsx/xlsx.mjs'; +import axios from 'axios'; import dayjs from 'dayjs'; -import axiosInstance from '../utils/request.js'; -const ShopNameAndID = defineAsyncComponent(() => - import('../sfc/../sfc/ShopNameAndID.vue') -); export default { - name: 'TablePage', components: { - ExceptionButton, - ExceptionType, - TimeSelect, - ShopNameAndID + // ShopNameSelect, + ShopNameCheckBox, + TimeSelectCrawling }, data() { return { - // 寮瑰嚭妗嗕腑琛ㄦ牸鏉℃暟 - exceptionTotal:0, - // 鏃犳暟鎹椂鐨勬椂闂存暟缁勶紝鍏冪礌鐩稿樊10鍒嗛挓 - // abnormalTimeTenMinute: [], - // 搴楅摵鎬绘暟 - shopsTotal: 0, - - // 鈥欎笂涓�鏉♀�樻寜閽槸鍚﹀彲浠ヨ鐐瑰嚮鐘舵�� - isPreCantouch: false, - // 鈥欎笅涓�鏉♀�樻寜閽槸鍚﹀彲浠ヨ鐐瑰嚮鐘舵�� - isNextCantouch: false, - - // 瀵硅瘽妗嗘槸鍚﹀睍绀� - centerDialogVisible: false, - - // 鎶藉眽澶撮儴淇℃伅 - // 鎶樼嚎鍥惧搴旂殑褰撳墠琛ㄦ牸琛屾暟鎹� - // 搴楅摵鍚� - rowShopName: '', - // 寮傚父绫诲瀷 - rowExceptionType: '', - // 寮傚父寮�濮嬫椂闂� - rowBeginTime: '', - // 寮傚父缁撴潫鏃堕棿 - rowEndTime: '', - // 寮傚父鐨勮澶囩紪鍙� - rowMvStatCode: '', - - // 琛ㄦ牸鐨勪竴琛屾暟鎹� - rowTable: [], - //鎷兼帴鐨勬墍鏈夋暟鎹� - allExceptionTimeData: [], - // 鏃犳暟鎹椂澧炲姞鐨勫墠30鍒嗛挓鏁版嵁 - beforeData: [], - // 鏃犳暟鎹椂澧炲姞鐨勫悗40鍒嗛挓鏁版嵁 - afterData: [], - - // 鎶樼嚎鍥惧疄渚� - chart: null, - // -1琛ㄧず鏈�夋嫨琛ㄦ牸鐨勮 - selectedRowIndex: -1, - - // 榛樿閫夋嫨鐨勬姌鍙犻潰鏉跨紪鍙� - activeNames: ['1'], - // 寮傚父鏃剁殑琛ㄦ牸 - abnormalTb: [], - // 寮傚父鐨勮捣姝㈡椂闂� - abnormalBt: '', - abnormalEt: '', - // 鏄惁灞曠ず鏃堕棿杞� 鍚� - isAbnormal: false, - // 淇濆瓨鐫�寮傚父绫诲瀷0瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿 - exception0: [], - // 淇濆瓨鐫�寮傚父绫诲瀷1瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿 - exception1: [], - // 淇濆瓨鐫�寮傚父绫诲瀷2瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿 - exception2: [], - // 鍔犺浇鍔ㄧ敾 + iframeSrc: '/api/sys_login.jsp?from=/sys/index.jsp', + isShowIframe: false, + // 宸查�変腑鐨勫簵閾哄悕 + form: { + selectedShopNames: [], + cookie: '', + beginTime: '', + endTime: '' + }, + percentage: Number(60), + countdownTime: Date.now() + 1000 * 60 * 60 * 24 * 2, + // 鐖彇鍙嶉鐨勭粨鏋� + result: '', + // 淇℃伅 + allData: [], + // 閲嶅鐨勬暟鎹� + duplicateData: [], + // 涓嶉噸澶嶇殑鏁版嵁 + newData: [], + // 閲嶅鏁版嵁灞曠ず鐨勮〃鏍� + displayData:[], loading: false, - // 鎶藉眽鍔犺浇鍔ㄧ敾 - loadingDrawer: true, - // 鍒嗛〉灞曠ず鏁版嵁 - // 姣忛〉灞曠ず鐨勬暟鎹� - displayData: [], - // 瀛樻斁鍚庣杩斿洖鐨刯son鏁版嵁 - jsonData: [], - // 鍒嗛〉鐨勮捣濮嬬储寮� - startIndex: 0, - // 褰撳墠椤� - currentPage: 1, - // 姣忛〉鏉℃暟 - pageSize: 10, - total: 0, - // 閫夋嫨搴楅摵鍚� - deviceId: [], - deviceInfo: [], - // 鏃堕棿閫夋嫨鍣ㄥ紑濮嬫椂闂� - beginTime: '', - // 鏃堕棿閫夋嫨鍣ㄧ粨鏉熸椂闂� - endTime: '', - // 寮傚父琛ㄦ暟鎹� - abnormalData: [], - // 璇ユ椂娈电殑璇︾粏瓒呮爣鏁版嵁 - exceedingData: [], - drawerVisible: false, - // 琛ㄦ牸鐨勪竴琛屾暟鎹� - drawerData: {}, - // 鎶藉眽鏂瑰悜锛屼粠鍙冲悜宸︽墦寮� - drawerDirection: 'rtl', - optionsTime: [ - // 鏃堕棿棰楃矑搴� - { - value: '10', - label: '10鍒嗛挓鏁版嵁', - disabled: true - } - ], - // 搴楅摵鍚� 绾ц仈閫夋嫨鍣� - optionsShop: [], - // 寮傚父绫诲瀷閫夋嫨鍣� - exceptionValue: [], - exceptionOptions: [ - { - value: '0', - label: '娌圭儫娴撳害瓒呮爣' - }, - { - value: '1', - label: '鐤戜技渚涚數寮傚父' - }, - { - value: '2', - label: '鎺夌嚎' - } - ] + loadingToMysql:null, + // 浣嗘湁閲嶅鐨勬暟鎹椂锛屼袱涓寜閽彧鑳介�夊叾涓竴涓紝鍙嶄箣鍐嶆閲嶅鍏ュ簱 + buttonFlag:-1 }; }, - // 鐩戝惉 鍒ゆ柇鎸夐挳鏄惁鍙偣鍑� - watch: { - selectedRowIndex(newVaue) { - // 澶勪簬琛ㄦ牸鐨勭涓�鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣 - if (newVaue === 0) { - this.isPreCantouch = true; - //鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿� - if (this.isNextCantouch == true) { - this.isNextCantouch = false; - } + methods: { + openFullScreen () { + this.loadingToMysql = ElLoading.service({ + lock: true, + text: 'Loading', + background: 'rgba(0, 0, 0, 0.7)', + }) +}, + // 鍙戦�佹暟鎹� + sendData() { + this.result = ''; + this.allData = []; + let form = {}; + form['selectedShopNames'] = this.form.selectedShopNames; + form['cookie'] = this.form.cookie; + if (this.form.beginTime) { + form['beginTime'] = dayjs(this.form.beginTime).format('YYYY-MM-DD'); } - // 澶勪簬琛ㄦ牸鏈�鍚庝竴鎻愬摝鍟婃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣 - else if (newVaue === this.displayData.length - 1) { - this.isNextCantouch = true; - //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿� - if (this.isPreCantouch == true) { - this.isPreCantouch = false; - } + if (this.form.endTime) { + form['endTime'] = dayjs(this.form.endTime).format('YYYY-MM-DD'); } - // 澶勪簬琛ㄦ牸鐨勪腑闂磋 灏嗘寜閽缃负鍙偣鍑荤姸鎬� - else { - this.isPreCantouch = false; - this.isNextCantouch = false; - } + this.loading = true; + // 寰楀埌鍙嶉淇℃伅 鎵�鏈夋暟鎹� + axios.post('http://127.0.0.1:5000/hello', form).then((response) => { + console.log(response.data); + response.data.info.forEach((item) => { + // 鎹㈣鏄剧ず + this.result = this.result + item + '\n'; + }); + + // response.data.allData.forEach(item=>{ + // this.allData =this.allData+item+'\n' + // this.allData =this.allData+'\n' + // }); + this.allData = response.data.allData; + this.duplicateData = response.data.duplicate; + console.log('閲嶅鐨勬暟鎹负锛�', this.duplicateData); + this.newData = response.data.newData; + console.log('鏂版暟鎹潯鏁颁负锛�',this.newData.length); + this.loading = false; + + this.displayData = this.arrToObject(this.duplicateData); + console.log('杞崲鍚庣殑瀵硅薄鏁扮粍涓猴細',this.displayData); + + this.result=this.result+'\n閲嶅鐨勬暟閲忎负锛�'+this.duplicateData.length + }); + }, + arrToObject(arr) { + let displayData = []; + arr.forEach((item) => { + let tempObject = {}; + tempObject['渚涘簲鍟�'] = item[0]; + tempObject['椁愰ギ搴�'] = item[1]; + tempObject['璁惧缂栧彿'] = item[2]; + tempObject['绔欑偣鍚嶇О'] = item[3]; + tempObject['杩涚儫娴撳害'] = item[4]; + tempObject['鎺掔儫娴撳害'] = item[5]; + tempObject['椋庢満鐢�'] = item[6]; + tempObject['鍑�鍖栧櫒'] = item[7]; + tempObject['绾у埆'] = item[8]; + tempObject['闇�鎶ヨ'] = item[9]; + tempObject['宸叉姤璀�'] = item[10]; + tempObject['褰掑睘鏃堕棿'] = item[11]; + tempObject['涓婃姤鏃堕棿'] = item[12]; + tempObject['鏁版嵁鏃堕棿'] = item[13]; + tempObject['閲嶅娆℃暟'] = item[14]; + displayData.push(tempObject) + }); + return displayData }, - // 褰撻�夋嫨鐨勬椂闂村彂鐢熷彉鍖栨椂锛屽紓甯稿垎鏋愰儴鍒嗙殑寮傚父搴楅摵鏁伴噺鍚屾鍙樺寲 - beginTime() { - this.getShopNames(); + // 鏃犻噸澶嶆暟鎹椂锛岀粨鏋滃叆搴� + storeAllToMySql() { + if(this.allData.length==0){ + alert('璇峰厛鑾峰彇鏁版嵁') + return + } + this.openFullScreen() + axios.post('http://127.0.0.1:5000/store', {'allData':this.allData}).then((response) => { + console.log(response.data); + ElMessage.success(response.data) + this.loadingToMysql.close() + }) }, - endTime() { - this.getShopNames(); + + // 鍏ュ簱鏂版暟鎹紙鍙啓鍏ユ柊鏁版嵁锛� + storeNewToMySql() { + if(this.buttonFlag != -1){ + alert('宸插叆搴擄紝涓嶈兘鍐嶉噸澶嶅叆搴�') + return + } + this.buttonFlag = 1 + this.openFullScreen() + axios + .post('http://127.0.0.1:5000/store', { 'allData': this.newData }) + .then((response) => { + console.log(response.data); + ElMessage.success(response.data) + this.loadingToMysql.close() + }); + }, + + + // 鍏ㄩ儴鏁版嵁鍏ュ簱锛屽寘鎷噸澶嶇殑锛堝厛鍐欏叆閲嶅鐨勬暟鎹紝閲嶅鐨勬暟鎹彧鍐欏叆鍘嗗彶鏁版嵁琛� + // 鍐嶆妸鏂扮殑鏁版嵁鍐欏叆4寮犺〃涓級 + storeDupAllMySql() { + if(this.buttonFlag != -1){ + alert('宸插叆搴擄紝涓嶈兘鍐嶉噸澶嶅叆搴�') + return + } + this.buttonFlag = 1 + this.openFullScreen() + // 閲嶅鏁版嵁鍐欏叆鍒嗛挓鏁版嵁琛� + axios + .post('http://127.0.0.1:5000/minute', { 'allData': this.duplicateData }) + .then((response) => { + console.log(response.data); + }); + // 鏂版暟鎹啓鍏�4寮犺〃 + if(this.newData.length != 0){ + setTimeout(() => { + axios + .post('http://127.0.0.1:5000/store', { 'allData': this.newData }) + .then((response) => { + console.log(response.data); + ElMessage.success(response.data) + this.loadingToMysql.close() + }); + }, 2000); } - }, - methods: { - // 浠庢椂闂撮�夋嫨鍣ㄧ粍浠舵嬁鍒板紑濮嬪拰缁撴潫鏃堕棿 + else{ + this.loadingToMysql.close() + ElMessage.success('鍐欏叆瀹屾垚锛�') + } + }, giveTime(val) { //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�) - this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss'); - this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss'); + this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss'); + this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss'); }, - - // 寮傚父鐨勫紑濮嬪拰缁撴潫鏃堕棿銆傝繑鍥炴椂闂存暟缁勶紝浠庡紑濮嬫椂闂寸殑鍚�10鍒嗛挓鍒扮粨鏉熸椂闂翠负姝€�� - // 姣斿12:00:00 -13:00:00 鎵�浠ヨ繑鍥炵殑鏁扮粍鍏冪礌鏄� 12:10:00 ,12:20:00,12:30:00....13:00:00 - descTenTime(begin, end) { - // 淇濈暀缁撴灉 - let time = []; - let temp = dayjs(begin).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss'); - while (temp != end) { - time.push(temp); - temp = dayjs(temp).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss'); - } - // 鍔犱笂寮傚父鐨勭粨鏉熸椂闂� - time.push(temp); - - return time; - }, - - // 淇濆瓨褰撳墠閫夋嫨鐨勮鎵�鏈変俊鎭� - setinfo(index) { - this.rowShopName = this.displayData[index].diName; - this.rowExceptionType = this.displayData[index].exceptionType; - this.rowBeginTime = this.displayData[index].beginTime; - this.rowEndTime = this.displayData[index].endTime; - this.rowMvStatCode = this.displayData[index].devId; - console.log('琛屽悕瀛楋細', this.rowShopName); - console.log('琛屽悕瀛楋細', this.rowExceptionType); - console.log('琛屽悕瀛楋細', this.rowBeginTime); - console.log('琛屽悕瀛楋細', this.rowEndTime); - }, - // 渚涚數寮傚父鍜屾帀绾挎椂鐨勮〃鏍兼暟鎹� - setExceptionData() { - // 娓呯┖锛岃鍘嗗彶鏁版嵁鏉℃暟闅愯棌锛屼娇鏃犳暟鎹殑鏍囩鏉℃暟鏄剧ず鍑烘潵 - // this.exceedingData=[] - // 娓呯┖涓婃鐨勬暟鎹紝闃叉褰卞搷鏈鐨勫睍绀烘暟 - // this.abnormalTimeTenMinute = []; - // 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊10鍒嗛挓 - const abnormalTimeTenMinute = this.descTenTime( - this.rowBeginTime, - this.rowEndTime - ); - for (let i = 0; i < abnormalTimeTenMinute.length; i++) { - this.exceedingData.push({ - mvStatCode: this.rowMvStatCode, - diName: this.rowShopName, - mvDataTime: abnormalTimeTenMinute[i], - mvFumeConcentration2: '绌烘暟鎹�' - }); - } - // 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟 - this.exceptionTotal = abnormalTimeTenMinute.length - }, - // 鐐瑰嚮琛ㄦ牸鐨勮鏃� - selectTableRow(row) { - // 鑾峰彇褰撳墠琛岀殑绱㈠紩 - this.selectedRowIndex = this.displayData.indexOf(row); - // 杩涘叆鎶藉眽椤甸潰鏇存柊澶撮儴鏁版嵁 - this.setinfo(this.selectedRowIndex); - console.log('閫夋嫨涓锛�', this.selectedRowIndex); - }, - - // 鑾峰彇鑾峰彇琛ㄦ牸涓婁竴琛屾暟鎹� - getPreviousRowData() { - // 涓嶆槸琛ㄦ牸鐨勭涓�琛� - if (this.selectedRowIndex !== 0) { - // 鈥欎笅涓�鏉♀�樼殑鎸夐挳鎭㈠鐐瑰嚮 - // this.isNextCantouch = false - - //寰楀埌涓婁竴琛屾暟鎹储寮� - this.selectedRowIndex = this.selectedRowIndex - 1; - console.log('涓�', this.selectedRowIndex); - - console.log(this.displayData[this.selectedRowIndex]); - //璇锋眰鏁版嵁 鏀瑰彉exceedingData - this.setinfo(this.selectedRowIndex); - let params = {}; - if (this.drawerData.devId) { - params['devId'] = this.displayData[this.selectedRowIndex].devId; - } - if (this.drawerData.beginTime) { - params['beginTime'] = - this.displayData[this.selectedRowIndex].beginTime; - } - if (this.drawerData.endTime) { - params['endTime'] = this.displayData[this.selectedRowIndex].endTime; - } - - axiosInstance - .get('/fume/exceed', { params: params }) - .then((response) => { - // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹� - this.exceedingData = response.data.data; - this.chart = null; - this.drawChart(); - this.exceptionTotal = this.exceedingData.length - }); - } - //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁 - else if (this.selectedRowIndex === 0) { - console.log(null); - // 璀﹀憡 - // ElMessage.warn('宸叉槸绗竴鏉℃暟鎹�'); - // ElMessage.info('宸叉槸璇ラ〉绗竴鏉℃暟鎹�'); - - // 鈥欎笂涓�鏉♀�樼殑鎸夐挳涓嶅彲鐐瑰嚮 - // this.isPreCantouch = true - } - }, - - // 鑾峰彇鑾峰彇琛ㄦ牸涓嬩竴琛屾暟鎹� - getNextRowData() { - // 涓嶆槸琛ㄦ牸鐨勭涓�琛� - if (this.selectedRowIndex < this.displayData.length - 1) { - // 鈥欎笂涓�鏉♀�樼殑鎸夐挳鎭㈠鐐瑰嚮 - // this.isPreCantouch = false - - //寰楀埌涓婁竴琛屾暟鎹储寮� - this.selectedRowIndex = this.selectedRowIndex + 1; - console.log('涓�', this.selectedRowIndex); - - console.log(this.displayData[this.selectedRowIndex]); - //璇锋眰鏁版嵁 鏀瑰彉exceedingData - this.setinfo(this.selectedRowIndex); - let params = {}; - if (this.drawerData.devId) { - params['devId'] = this.displayData[this.selectedRowIndex].devId; - } - if (this.drawerData.beginTime) { - params['beginTime'] = - this.displayData[this.selectedRowIndex].beginTime; - } - if (this.drawerData.endTime) { - params['endTime'] = this.displayData[this.selectedRowIndex].endTime; - } - axiosInstance - .get('/fume/exceed', { params: params }) - .then((response) => { - // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹� - this.exceedingData = response.data.data; - console.log('杩斿洖鐨勫紓甯告暟鎹负锛�'); - console.log(this.exceedingData); - this.chart = null; - this.drawChart(); - this.exceptionTotal = this.exceedingData.length - }); - } - //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁 - else { - console.log(null); - // 璀﹀憡 - // ElMessage.info('宸叉槸璇ラ〉鏈�鍚庝竴鏉℃暟鎹�'); - - // 鈥欎笅涓�鏉♀�樼殑鎸夐挳涓嶅彲鐐瑰嚮 - // this.isNextCantouch = true - } - }, - - // 鈥樻煡鐪嬭鎯呪�� 寮瑰嚭妗嗛儴鍒� - showDrawer(row) { - // 璁$畻褰撳墠琛岀殑绱㈠紩 - this.selectTableRow(row); - - this.rowTable = row; - console.log('璧嬪�煎悗row', this.rowTable); - console.log('璧嬪�煎悗row', this.rowTable); - // 灞曞紑鎶藉眽 - // 琛ㄦ牸鐨勮鏁版嵁浠ュ璞″舰寮忕粰drawerData - this.drawerData = row; - - this.centerDialogVisible = true; - // this.drawerVisible = true; - console.log(this.drawerData); - // 鏍规嵁琛屾暟鎹姹傝缁嗚秴鏍囨暟鎹覆鏌撴姌绾垮浘 - let params = {}; - if (this.drawerData.devId) { - params['devId'] = this.drawerData.devId; - } - if (this.drawerData.beginTime) { - params['beginTime'] = this.drawerData.beginTime; - } - if (this.drawerData.endTime) { - params['endTime'] = this.drawerData.endTime; - } - axiosInstance.get('/fume/exceed', { params: params }).then((response) => { - // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹� - this.exceedingData = response.data.data; - this.loadingDrawer = !this.loadingDrawer; - // this.total = this.exceedingData.length; - // this.handleCurrentChange(1); // 榛樿鏄剧ず绗竴椤� - console.log('杩斿洖鐨勫紓甯告暟鎹负锛�'); - console.log(this.exceedingData); - this.drawChart(); - this.exceptionTotal = this.exceedingData.length - }); - }, - - // 鐢ㄦ埛鏍规嵁杈撳叆鐨勬潯浠舵煡璇� - showTable() { - if (this.beginTime > this.endTime) { - alert('璇疯緭鍏ユ纭殑鏃堕棿鑼冨洿'); - return; - } - let params = {}; - // params['page'] = this.startIndex - // params['pageSize'] = 10 - if (this.deviceId[1]) { - params['devId'] = this.deviceId[1]; - } - if (this.exceptionValue.length != 0) { - params['exceptionValue'] = this.exceptionValue.join(); - } - console.log('鍘�', this.exceptionValue); - console.log('澶勭悊', this.exceptionValue.join()); - if (this.beginTime) { - params['beginTime'] = this.beginTime; - } - if (this.endTime) { - params['endTime'] = this.endTime; - } - this.loading = true; - axiosInstance - .get('/fume/abnormalthree', { params: params }) - .then((response) => { - this.abnormalData = response.data.data; - this.total = this.abnormalData.length; - this.handleCurrentChange(1); - console.log('杩斿洖鐨勬暟鎹�', this.abnormalData); - console.log('闀垮害', response.data.data.total); - this.loading = false; - }); - }, - handleSizeChange(val) { - this.pageSize = val; - // 鏀瑰彉姣忛〉鏄剧ず鏁扮洰鏃惰烦鍒扮涓�椤� - this.handleCurrentChange(1); - }, - handleCurrentChange(val) { - // this.startIndex = (val - 1) * this.pageSize; - // const endIndex = this.startIndex + this.pageSize; - - const startIndex = (val - 1) * this.pageSize; - const endIndex = startIndex + this.pageSize; - // console.log('璧峰绱㈠紩涓�:',this.startIndex) - // console.log('椤甸潰澶у皬涓�:',this.pageSize) - this.displayData = this.abnormalData.slice(startIndex, endIndex); - // setTimeout(() => { - // this.displayData = this.abnormalData - - // }, 1000); - // console.log(this.displayData); - }, - - //鐩稿樊澶氬皯涓崄鍒嗛挓 璁$畻涓苟涓嶅寘鎷紑濮嬫椂闂达紝浣嗗寘鎷粨鏉熸椂闂淬�� - diffTenMinutesNum(beginNormal, endNormal) { - // 灏嗗紑濮嬫椂闂村拰缁撴潫鏃堕棿杞崲涓篸ayjs瀵硅薄 - const start = dayjs(beginNormal); - const end = dayjs(endNormal); - - // 璁$畻缁撴潫鏃堕棿鍑忓幓寮�濮嬫椂闂翠腑闂寸浉宸灏戜釜鍗佸垎閽� - const diffInMinutes = end.diff(start, 'minute'); - const diffInTenMinutes = Math.floor(diffInMinutes / 10); - console.log('鍑犱釜10鍒嗛挓', diffInTenMinutes); - return diffInTenMinutes; - }, - - // 渚涚數寮傚父鍜屾帀绾跨殑鎶樼嚎鍥� - linechart(xAxisData1, abnormalBeginTime, abnormalEndTime, fumeExceeding) { - this.chart = echarts.init(this.$refs.chart, null, { - width: 800, - height: 300 - }); - this.chart.setOption({ - title: { - // text: '娌圭儫瓒呮爣鏁版嵁', - // left: 'center' - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - tooltip: {}, - // legend: { - // data: ['娌圭儫瓒呮爣鏁版嵁'] - // }, - toolbox: { - // 宸ュ叿鏍� - feature: { - dataZoom: { - // 鍖哄煙缂╂斁 - yAxisIndex: 'none' - }, - - // 淇濆瓨涓哄浘鐗� - saveAsImage: {} - } - }, - xAxis: { - // type: 'time', - // 鍦ㄧ被鐩酱锛坱ype: 'category'锛変腑鏈夋晥銆� - data: xAxisData1, - name: '鏃堕棿' - // axisLabel: { - // interval:3, - // rotate:40 - // } - }, - yAxis: { - type: 'value', - axisLabel: { - show: true, - interval: 'auto' - // formatter:'{value} %' - }, - name: 'mg/m鲁' - }, - series: [ - { - name: '娌圭儫瓒呮爣鏁版嵁', - type: 'line', - data: fumeExceeding, - markLine: { - silent: true, - - data: [ - // 鏍囨敞鏃犳暟鎹椂闂存鐨勬晥鏋滐紝灏嗚繖涓椂闂存鐨勬暟杞撮儴鍒嗗彉涓虹孩鑹� - { - name: '鏃犳暟鎹�', - xAxis: abnormalBeginTime - }, - { - xAxis: abnormalEndTime - } - ], - lineStyle: { - color: 'red' - } - } - } - ] - }); - }, - - // 灞曠ず鎶樼嚎鍥� - drawChart() { - // 褰撳嚭鐜颁緵鐢靛紓甯稿拰鎺夌嚎鏃讹紝鏃舵鏃犳暟鎹� 鍒欐嫾鎺ュ墠鍚庢鏁版嵁 - if ( - this.exceedingData.length === 0 || - this.rowExceptionType === '1' || - this.rowExceptionType === '2' - ) { - // 閲嶆瀯琛ㄦ牸 鎵嬪姩濉厖 - this.setExceptionData(); - - // 灞曠ず - this.isAbnormal = true; - // 鎷兼帴鏃ユ湡 - //寮傚父鐨勫紑濮嬫椂闂� - this.abnormalBt = this.displayData[this.selectedRowIndex].beginTime; - //寮傚父鐨勭粨鏉熸椂闂� - this.abnormalEt = this.displayData[this.selectedRowIndex].endTime; - console.log( - '渚涚數寮�濮�', - this.displayData[this.selectedRowIndex].beginTime - ); - console.log( - '渚涚數缁撴潫', - this.displayData[this.selectedRowIndex].endTime - ); - // 寰�鍓�30鍒嗛挓 - const before30MinBegin = dayjs(this.abnormalBt) - .subtract(30, 'minute') - .format('YYYY-MM-DD HH:mm:ss'); - // 鍚庝竴娈电殑寮�濮嬫椂闂� - const after10MinBegin = dayjs(this.abnormalEt) - .add(10, 'minute') - .format('YYYY-MM-DD HH:mm:ss'); - // 寰�鍚�40鍒嗛挓 - const after40MinEnd = dayjs(this.abnormalEt) - .add(40, 'minute') - .format('YYYY-MM-DD HH:mm:ss'); - - let paramsBefore = { - devId: this.displayData[this.selectedRowIndex].devId, - beginTime: before30MinBegin, - endTime: this.displayData[this.selectedRowIndex].beginTime - }; - let paramsAfter = { - devId: this.displayData[this.selectedRowIndex].devId, - beginTime: after10MinBegin, - endTime: after40MinEnd - }; - // 璇锋眰鍓嶅崐娈� - axiosInstance - .get('http://localhost:8080/fume/history', { params: paramsBefore }) - .then((result) => { - this.beforeData = result.data.data; - }); - - // 璇锋眰鍚庡崐娈� - axiosInstance - .get('http://localhost:8080/fume/history', { params: paramsAfter }) - .then((result) => { - this.afterData = result.data.data; - }); - - //鐢╪ull濉厖涓紓甯告棤鏁版嵁鐨勬椂闂� - //鐩稿樊鍑犱釜10鍒嗛挓 - const TenMinuteNum = this.diffTenMinutesNum( - this.abnormalBt, - this.abnormalEt - ); - //淇濆瓨绌哄�� - let tempArr = []; - for (let i = 0; i < TenMinuteNum; i++) { - tempArr.push(null); - } - console.log('濉厖鏁扮粍涓猴細', tempArr); - - //鍚堝苟鏁扮粍 - setTimeout(() => { - this.allExceptionTimeData = [ - ...this.beforeData, - ...tempArr, - ...this.afterData - ]; - console.log('鍚堝苟鍚庢暟缁勪负', this.allExceptionTimeData); - //灞曠ず鍥惧舰 - // x杞存棩鏈熸椂闂� - let dateList = []; - // y杞� 瓒呮爣娌圭儫娴撳害 - let fumeExceeding = []; - for (let i = 0; i < this.allExceptionTimeData.length; i++) { - if (this.allExceptionTimeData[i] == null) { - //x杞存棩鏈� - //鏃犳暟鎹椂锛� 涓哄墠闈㈡椂闂寸偣澧炲姞10鍒嗛挓 - dateList.push( - dayjs(dateList[dateList.length - 1]) - .add(10, 'minute') - .format('YYYY-MM-DD HH:mm:ss') - ); - // 瓒呮爣娌圭儫娴撳害 - fumeExceeding.push(null); - } else { - //x杞存棩鏈� - dateList.push(this.allExceptionTimeData[i].mvDataTime); - // 瓒呮爣娌圭儫娴撳害 - fumeExceeding.push( - this.allExceptionTimeData[i].mvFumeConcentration2 - ); - } - } - console.log('x:', dateList); - console.log('fume:', fumeExceeding); - - //灞曠ず鎶樼嚎鍥� - this.chart = null; - this.linechart( - dateList, - this.abnormalBt, - this.abnormalEt, - fumeExceeding - ); - }, 500); - - // ---------------------------------------- - } - // 娌圭儫娴撳害瓒呮爣鏃剁殑鎶樼嚎鍥� - else { - // // 娓呯┖锛岃鏃犳暟鎹潯鏁伴殣钘忥紝浣垮巻鍙叉暟鎹殑鏍囩鏉℃暟鏄剧ず鍑烘潵 - // this.abnormalTimeTenMinute = [] - this.isAbnormal = false; - // x杞存棩鏈熸椂闂� - let dateList = []; - // y杞� 瓒呮爣娌圭儫娴撳害 - let fumeExceeding = []; - this.exceedingData.forEach((item) => { - //x杞存棩鏈� - dateList.push(item.mvDataTime); - // 瓒呮爣娌圭儫娴撳害 - fumeExceeding.push(item.mvFumeConcentration2); - }); - // 瀛樻斁璇ユ椂闂存姣忛殧鍗佸垎閽熶竴娆$殑鏃堕棿鐐� - const xAxisData = []; - const xAxisData1 = []; - let beginTime = new Date(dateList[0]); - const endTime = new Date(dateList[dateList.length - 1]); - // console.log(beginTime,endTime); - while (beginTime <= endTime) { - xAxisData.push(beginTime); - // 澧炲姞10鍒嗛挓 - beginTime = new Date(beginTime.getTime() + 10 * 60 * 1000); - } - // console.log(xAxisData); - // 灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮忕殑瀛楃涓� - xAxisData.forEach((item, index) => { - // 鑾峰彇鍒嗛挓鏁� - let M = item.getMinutes(); - // 濡傛灉鍒嗛挓灏忎簬10,鍒欏湪鍓嶉潰鍔�0琛ュ厖涓轰袱浣嶆暟瀛� - M = M > 9 ? M : '0' + M; - xAxisData1[index] = - item.getFullYear() + - '-' + - (item.getMonth() + 1) + - '-' + - item.getDate() + - ' ' + - item.getHours() + - ':' + - M + - ':0' + - item.getSeconds(); - }); - console.log(xAxisData1); - this.chart = echarts.init(this.$refs.chart); - this.chart.setOption({ - title: { - // text: '娌圭儫瓒呮爣鏁版嵁', - // left: 'center' - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - tooltip: {}, - // legend: { - // data: ['娌圭儫瓒呮爣鏁版嵁'] - // }, - toolbox: { - // 宸ュ叿鏍� - feature: { - dataZoom: { - // 鍖哄煙缂╂斁 - yAxisIndex: 'none' - }, - // 淇濆瓨涓哄浘鐗� - saveAsImage: {} - } - }, - xAxis: { - // type: 'time', - // 鍦ㄧ被鐩酱锛坱ype: 'category'锛変腑鏈夋晥銆� - data: xAxisData1, - name: '鏃堕棿' - }, - yAxis: { - type: 'value', - axisLabel: { - show: true, - interval: 'auto' - // formatter:'{value} %' - }, - name: 'mg/m鲁' - }, - series: [ - { - name: '娌圭儫瓒呮爣鏁版嵁', - type: 'line', - data: fumeExceeding, - markLine: { - itemStyle: { - // 鍩虹嚎鍏叡鏍峰紡 - normal: { - lineStyle: { - // 'solid'瀹炵嚎锛�'dashed'铏氱嚎锛�'dotted'鐐圭嚎 - type: 'dashed' - }, - label: { - show: true, - position: 'end', - formatter: '{b}{c}' - } - } - }, - data: [ - { - name: '棰勮', - type: 'average', - yAxis: 1, - lineStyle: { - color: '#ff0000' - } - } - ] - } - } - ] - }); - } - }, - getDeviceInfo() { - // 绾ц仈涓嬫媺妗嗘暟鎹� 浠庢帴鍙d腑鍔ㄦ�佽幏鍙� - axiosInstance.get('/fume/device').then((result) => { - this.deviceInfo = result.data.data; - // 鑾峰彇鍒版�荤殑搴楅摵鏁伴噺 - this.shopsTotal = result.data.data.length; - this.deviceInfo.forEach((item) => { - this.optionsShop[this.optionsShop.length] = { - value: item.diName, - label: item.diName, - children: [ - { - value: item.diCode, - label: item.diCode - } - ] - }; - }); - console.log(this.optionsShop); - }); - }, - exportDom() { - // 瀵煎嚭涓篍xcel鏂囦欢 - const fields = [ - 'devId', - 'exceptionType', - 'region', - 'beginTime', - 'endTime' - ]; - const itemsFormatted = this.abnormalData.map((item) => { - const newItem = {}; - fields.forEach((field) => { - newItem[field] = item[field]; - }); - return newItem; - }); - // 鍒涘缓xlsx瀵硅薄 - const xls = XLSX.utils.json_to_sheet(itemsFormatted); - // 缂栬緫琛ㄥご琛� 淇敼琛ㄥご - xls['A1'].v = '璁惧缂栧彿'; - xls['B1'].v = '寮傚父绫诲瀷'; - xls['C1'].v = '鍦板尯'; - xls['D1'].v = '寮�濮嬫椂闂�'; - xls['E1'].v = '缁撴潫鏃堕棿'; - // 鍒涘缓workbook锛屽苟鎶妔heet娣诲姞杩涘幓 - const wb = XLSX.utils.book_new(); - XLSX.utils.book_append_sheet(wb, xls, 'Sheet1'); - // 灏唚orkbook杞负浜岃繘鍒秞lsx鏂囦欢骞朵笅杞� - XLSX.writeFile(wb, '鍒嗘瀽鏁版嵁.xlsx'); - }, - // 鏌ヨ鍏ㄩ儴寮傚父琛ㄦ暟鎹� - getAllData() { - this.loading = true; - axiosInstance.get('/fume/abnormal').then((result) => { - this.abnormalData = result.data.data; - this.total = this.abnormalData.length; - // 榛樿鏄剧ず绗竴椤� - this.handleCurrentChange(1); - this.loading = false; - }); - - // 寰楀埌寮傚父琛ㄧ殑鏈�鏃╁拰鏈�鏅氭椂闂� - setTimeout(() => { - axiosInstance.get('/fume/time').then((result) => { - this.beginTime = result.data.data[0].beginTime; - this.endTime = result.data.data[0].endTime; - // console.log('be,end',this.beginTime,this.endTime); - }); - }, 500); - }, - - getAbnormalDataByClick(val) { - this.abnormalData = val; - this.total = this.abnormalData.length; - // 榛樿鏄剧ず绗竴椤� - this.handleCurrentChange(1); - }, - - // 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� - // 姣斿娌圭儫瓒呮爣瀵瑰簲鐨勬墍鏈夊簵閾哄悕绉板拰璁惧缂栧彿锛堝凡鍘婚櫎閲嶅鐨勫簵閾哄悕锛� - getShopNames() { - axiosInstance - .get('/fume/shopname', { - params: { - exceptionType: '0', - beginTime: this.beginTime, - endTime: this.endTime - } - }) - .then((result) => { - this.exception0 = result.data.data; - console.log('寮傚父0', this.exception0); - console.log('寮傚父0鏁伴噺', this.exception0.length); - }); - axiosInstance - .get('/fume/shopname', { - params: { - exceptionType: '1', - beginTime: this.beginTime, - endTime: this.endTime - } - }) - .then((result) => { - this.exception1 = result.data.data; - }); - axiosInstance - .get('/fume/shopname', { - params: { - exceptionType: '2', - beginTime: this.beginTime, - endTime: this.endTime - } - }) - .then((result) => { - this.exception2 = result.data.data; - }); - }, - // 椤甸潰鍔犺浇鏃堕粯璁ゅ睍绀�7澶╁紓甯歌〃鏁版嵁 - getRecentSevenDays() { - // 缁欑骇鑱旈�夋嫨鍣ㄨ缃粯璁ょ殑閫夋嫨椤� - this.devId = ['浠樺皬濮愬湪鎴愰兘', 'qinshi_31010320210010']; - // 缁欐椂闂撮�夋嫨鍣ㄨ缃粯璁ゆ椂闂� - // this.beginTime = dayjs() - // .subtract(3, 'week') - // .format('YYYY-MM-DD HH:mm:ss'); - // this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss'); - - // this.currentDateTime = dayjs().format('YYYY-MM-DD HH:mm:ss') - // this.oneWeekAgoDateTime = dayjs().subtract(1,'week').format('YYYY-MM-DD HH:mm:ss') - console.log(this.currentDateTime, this.oneWeekAgoDateTime); - let params = {}; - params['beginTime'] = this.beginTime; - params['endTime'] = this.endTime; - axiosInstance - .get('/fume/abnormalone', { params: params }) - .then((response) => { - // 淇濆瓨杩斿洖鐨� - this.abnormalData = response.data.data; - // 鍒嗛〉 - this.total = this.abnormalData.length; - // 榛樿鏄剧ず绗竴椤� - this.handleCurrentChange(1); - this.loading = false; - }); + cardShow() { + this.isShowIframe = !this.isShowIframe; } - }, - mounted() { - // 浠庢帴鍙h幏鍙栧簵閾哄悕绉� 缁欑骇鑱斾笅鎷夋 - this.getDeviceInfo(); - - // 灞曠ず鏈�杩�7澶╂暟鎹� - this.getRecentSevenDays(); - - // 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� 娓叉煋寮傚父鍒嗘瀽閮ㄥ垎瀵瑰簲鐨勫簵閾哄悕 - this.getShopNames(); } }; </script> -<style scoped> -.ellipsis { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} +<template> + <!-- <el-card > + <span>浣跨敤璇存槑锛�</span> + <br/> + <a href="http://xhhb.senzly.cn/main/sys_login.jsp?from=/sys/index.jsp" target="_blank">鐐瑰嚮姝ょ綉椤�</a> + <div> + 杈撳叆璐﹀彿锛屽瘑鐮侊紝楠岃瘉鐮佷箣鍚庣偣鍑�'绔嬪嵆鐧诲綍' + </div> + <div > + 杩涘叆椤甸潰鍚庯紝鎸夐敭鐩樼殑鈥楩12鈥� + </div> + <div> + 鐐瑰嚮寮瑰嚭鐨勯〉闈㈢殑宸ュ叿鏍忕殑鈥樼綉缁溾�欐垨鑰呪�榥etwork鈥�,閫夋嫨涓嬮潰浠�.jsp缁撳熬鐨勬枃浠� + </div> + <div> + 寰�涓嬫壘璇锋眰琛ㄥご涓殑鈥楥ookie鈥欙紝鍏ㄩ儴澶嶅埗 + </div> + </el-card> --> + <div> + <iframe + :src="iframeSrc" + frameborder="0" + width="100%" + height="500" + v-if="isShowIframe" + v-cloak + ></iframe> -.iconExcel { - font-size: 25px; - margin-left: 20px; - bottom: -6px; -} + <div class="header-button"> + <el-button type="primary" @click="cardShow"> 鎵撳紑缃戦〉 </el-button> + <el-button type="primary" @click="autoLogin"> 妯℃嫙鐧诲綍 </el-button> + </div> -/* 鍙紶鏍囩澶村彉涓哄彲鐐瑰嚮鐘舵�� */ -.clickable { - cursor: pointer; -} -.card-header { - margin: 0; -} + <el-card> + <!-- <ShopNameSelect @submit-shops="(n)=>selectedShopNames=n"></ShopNameSelect> --> + <ShopNameCheckBox + @submit-shops="(n) => (form.selectedShopNames = n)" + ></ShopNameCheckBox> + <!-- {{ selectedShopNames }} --> + </el-card> -/* .el-pagination { - position: fixed; - bottom: 0; - left: 50; - right: 50; - height: 60px; - line-height: 60px; - background-color: #f2f2f2; - text-align: right; - padding-right: 20px; -} */ + <div class="input-cookie"> + <span class="input-cookie-label">cookie</span> + <el-input + v-model="form.cookie" + rows="4" + type="textarea" + class="input-cookie-textarea" + ></el-input> + </div> -body { - margin: 0; + <div class="time-select"> + <TimeSelectCrawling @submit-time="giveTime"> </TimeSelectCrawling> + </div> + + <div class="getdata-button"> + <el-button color="#626aef" :dark="isDark" plain @click="sendData" + >鑾峰彇鏁版嵁</el-button + > + </div> + <div class="result-textarea" element-loading-text="鑾峰彇鏁版嵁涓�..." v-loading="loading" > + <el-input + v-model="result" + rows="6" + type="textarea" + class="result-textarea-textarea" + placeholder="鐖彇缁撴灉" + ></el-input> + </div> + + <!-- <div class="progress-percentage"> +<el-progress :text-inside="true" :percentage="percentage" stroke-width="15" status="warning" striped striped-flow duration="5"></el-progress> +</div> + + +<div class="countdown-time"> + <el-countdown + title="棰勮杩橀渶瑕佺埇鍙栫殑鏃堕棿" + format="HH:mm:ss" + :value="countdownTime" + /> +</div> --> + + <!-- <div class="result-textarea-data" v-loading="loading"> + <div>鏁版嵁</div> + <el-input v-model="allData" rows="6" type="textarea" class="result-textarea-textarea" placeholder="鏁版嵁"></el-input> + <div>鑾峰彇鐨勬暟鎹暟涓猴細{{ allData.length }}</div> +</div> --> + + <div class="result-textarea-duplication"> + <div>閲嶅鐨勬暟鎹�</div> + <!-- <el-input + v-model="duplicateData" + rows="6" + type="textarea" + class="result-textarea-textarea" + placeholder="閲嶅鐨勬暟鎹�" + ></el-input> --> + <el-table :data="displayData" height="250" style="width: 100%"> + <el-table-column prop="椁愰ギ搴�" label="椁愰ギ搴�" width="180" fixed /> + <el-table-column prop="渚涘簲鍟�" label="渚涘簲鍟�" width="180" /> + <el-table-column prop="璁惧缂栧彿" label="璁惧缂栧彿" /> + <el-table-column prop="绔欑偣鍚嶇О" label="璁惧缂栧彿" /> + <el-table-column prop="杩涚儫娴撳害" label="杩涚儫娴撳害(mg/m鲁)" /> + <el-table-column prop="鎺掔儫娴撳害" label="鎺掔儫娴撳害mg/m鲁)" /> + <el-table-column prop="椋庢満搴�" label="椋庢満搴�(A)" /> + <el-table-column prop="鍑�鍖栧櫒" label="鍑�鍖栧櫒(A)" /> + <el-table-column prop="绾у埆" label="绾у埆" /> + <el-table-column prop="闇�鎶ヨ" label="闇�鎶ヨ" /> + <el-table-column prop="宸叉姤璀�" label="宸叉姤璀�" /> + <el-table-column prop="褰掑睘鏃堕棿" label="褰掑睘鏃堕棿" /> + <el-table-column prop="涓婃姤鏃堕棿" label="涓婃姤鏃堕棿" /> + <el-table-column prop="鏁版嵁鏃堕棿" label="鏁版嵁鏃堕棿" /> + <el-table-column prop="閲嶅娆℃暟" label="閲嶅娆℃暟" /> + </el-table> + </div> + + <!-- <div class="result-textarea"> + <span >閲嶅鏁伴噺涓猴細{{ duplicateData.length }}</span> + </div> --> + + <div class="store-button" > + <el-button + type="warning" + @click="storeAllToMySql" + v-if="duplicateData.length == 0" + >缁撴灉鍏ュ簱</el-button + > + <el-button type="warning" @click="storeNewToMySql" v-if="duplicateData.length != 0" + >鍙叆搴撴柊鏁版嵁</el-button + > + <el-button type="warning" @click="storeDupAllMySql" v-if="duplicateData.length != 0" + >鍏ㄩ儴鏁版嵁鍏ュ簱(鍖呮嫭閲嶅鏁版嵁)</el-button + > + </div> + </div> +</template> + +<style lang="scss" scoped> +.header-button { + margin-top: 10px; } -.exception-divider-rowline { - margin: 10px 0px; +.el-card { + width: 60%; + border-radius: 9px; } -/* 寮傚父鍒嗘瀽鏁版嵁涓庢寜閽� */ -.exception-container { +.input-cookie { display: flex; - /* direction: column; */ - /* flex-grow: 2,1; */ + margin-top: 20px; } -.example-showcase .el-loading-mask { - z-index: 9; +.input-cookie-label { + margin-right: 10px; + margin-top: 10px; } - -.scrollbar-demo-item { - display: flex; - align-items: center; - justify-content: center; - height: 20px; - margin: 10px; - text-align: center; - border-radius: 4px; - background: var(--el-color-primary-light-9); - color: var(--el-color-primary); +.input-cookie-textarea { + width: 45%; } -.collapse-header { - font-size: 18px; - color: burlywood; +.time-select { + margin-top: 20px; } -.collapse-header-text { - margin-left: 60px; - font-size: 16px; - color: blue; +.getdata-button { + margin-top: 20px; } -/* .el-dialog { - height: 70%; -} */ - -.box-card-label { - font-size: 17px; +.result-textarea { + margin-top: 20px; } -/* 鈥樻煡鐪嬭鎯呪�� 鐨勫脊鍑烘楂樺害璋冩暣 */ -:deep().el-dialog { - height: 98%; - /* 涓嶅嚭鐜版粴鍔ㄦ潯 */ - overflow-y: hidden +.result-textarea-textarea { + width: 50%; } - -/* 搴楅摵鍚嶉�夋嫨鏂囨湰 */ -.describe-info { - margin-top: 5px; - font-weight: bold; +.progress-percentage { + width: 50%; + margin-top: 20px; } -/* 鏃堕棿閫夋嫨鏂囨湰 */ -.describe-time-text { - margin-left: 30px; - margin-top: 5px; - font-weight: bold; +.countdown-time { + margin-top: 20px; } - -/* 寮傚父鍒嗘瀽鎸夐挳瀹瑰櫒 */ -.box-card-butcontainer { - /* display: flex; - direction: column; */ - width: 68.5%; +.restore-button { + margin-top: 20px; } -.table-line-lable{ - /* color: black; */ +.result-textarea-data { + margin-top: 20px; + width: 2100px; } -/* 寮傚父琛ㄦ牸涓嬫爣绛句腑鐨勬暟缁� */ -.table-line-num { - font-weight: bold; - color: black; +.result-textarea-duplication { + margin-top: 20px; + width: 90%; } -.button_info.el-button_inner { - text-align: left; -} -.box-card { - height: 205px; -} -.mx-1 { - margin-bottom: 0px; +* { + margin-left: 10px; } </style> -- Gitblit v1.9.3