From b8b2820d1a0a55a5555434a3ec95f8bbec1db06d Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 14 十二月 2023 15:22:54 +0800
Subject: [PATCH] 1.飞行巡检和审核辅助页面中的对话框写成组件 2.增加了数据请求和异常分析配置参数的可视化页面 3.修改了站点输入框，使能够模糊匹配
---
src/views/data_management/HistoryData.vue | 400 +++++++++++++++++++++++++++++++++++----------------------
1 files changed, 246 insertions(+), 154 deletions(-)
diff --git a/src/views/data_management/HistoryData.vue b/src/views/data_management/HistoryData.vue
index 19f4f5d..18869d3 100644
--- a/src/views/data_management/HistoryData.vue
+++ b/src/views/data_management/HistoryData.vue
@@ -1,19 +1,19 @@
<script>
-import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue';
-import ScenarioType from '@/sfc/ScenarioType.vue';
-import InputSearch from '@/sfc/InputSearch.vue';
-
+import TimeShortCuts from '@/sfc/TimeShortCuts.vue'
+import ScenarioType from '@/sfc/ScenarioType.vue'
+import InputSearch from '@/sfc/InputSearch.vue'
+import { ElMessage } from 'element-plus'
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
-import { useCommonFunction } from '../../utils/common.js';
+import { useCommonFunction } from '../../utils/common.js'
import requetsApi from '@/api/exportExcel/requetsApi.js'
import ButtonClick from '@/sfc/ButtonClick.vue'
import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
-import dayjs from 'dayjs';
+import dayjs from 'dayjs'
export default {
components: {
- TimeSelectWithShortCuts,
+ TimeShortCuts,
ScenarioType,
InputSearch,
ButtonClick,
@@ -32,6 +32,8 @@
// 缁撴潫鏃堕棿
endTime: ''
},
+ // 鎼滅储妗嗕紶閫掍笂鏉ョ殑璁惧缂栧彿
+ tempMnCode: '',
// 杩斿洖鐨勬暟鎹�
tableData: [],
// 琛ㄦ牸鏁版嵁
@@ -44,42 +46,43 @@
// 鍔犺浇涓�
loading: false,
queryButton: false,
- exportButton:false,
+ exportButton: false,
// 绌虹姸鎬�
isNoData: false,
// 宸查�変腑鐨勫満鏅被鍨�
scenarioType: [],
// 琛ㄦ牸楂樺害
- tableHeight: '500'
- };
+ tableHeight: '500',
+ // 绔欑偣鎬绘暟閲�
+ siteNums: 0
+ }
},
setup() {
const { isExceedOneMonth, exportToExcel } = useCommonFunction()
return { isExceedOneMonth, exportToExcel }
},
mounted() {
- this.backMinuteDataAWeekAgo();
- this.calTableHeight();
+ this.backMinuteDataAWeekAgo()
+ this.calTableHeight()
},
methods: {
exportDom() {
-
let params = {
- 'beginTime': this.form.beginTime,
- 'endTime': this.form.endTime,
+ beginTime: this.form.beginTime,
+ endTime: this.form.endTime
}
if (this.form.name) {
- params['siteName'] = this.form.name;
+ params['siteName'] = this.form.name
}
if (this.form.number) {
- params['mnCode'] = this.form.numbe;
+ params['mnCode'] = this.form.numbe
}
if (this.scenarioType.length != 0) {
- params['scenarioType'] = this.scenarioType;
+ params['scenarioType'] = this.scenarioType
}
this.exportButton = true
- requetsApi.fetchAlSiteData(params).then(res => {
+ requetsApi.fetchAlSiteData(params).then((res) => {
const data = res.data.data
if (data.length != 0) {
const tableColumns = [
@@ -92,15 +95,22 @@
'noiseValue',
'lst',
'quality',
- 'groupName',
-
+ 'groupName'
]
- const excelColumns = [['A1', '绔欑偣鍚嶇О'],
- ['B1', '鍦板潃'], ['C1', '渚涘簲鍟�'], ['D1', '璁惧缂栧彿'],
- ['E1', '绫诲瀷'], ['F1', '鎵皹娴撳害(mg/m鲁)'], ['G1', '鍣０(dB)'],
- ['H1', '閲囬泦鏃堕棿'], ['I1', '绛夌骇'], ['J1', '鎵�鍦ㄥ尯鍘�']]
+ const excelColumns = [
+ ['A1', '绔欑偣鍚嶇О'],
+ ['B1', '鍦板潃'],
+ ['C1', '渚涘簲鍟�'],
+ ['D1', '璁惧缂栧彿'],
+ ['E1', '绫诲瀷'],
+ ['F1', '鎵皹娴撳害(mg/m鲁)'],
+ ['G1', '鍣０(dB)'],
+ ['H1', '閲囬泦鏃堕棿'],
+ ['I1', '绛夌骇'],
+ ['J1', '鎵�鍦ㄥ尯鍘�']
+ ]
this.exportToExcel(data, tableColumns, excelColumns, '鍘嗗彶鏁版嵁琛�.xlsx')
- }else{
+ } else {
ElMessage('鏃犳暟鎹渶瑕佸鍑�')
}
this.exportButton = false
@@ -108,193 +118,264 @@
},
// 鍔熻兘锛氳〃鏍奸珮搴︽牴鎹唴瀹硅嚜閫傚簲
calTableHeight() {
- const h1 = this.$refs.h1.$el.offsetHeight;
- const h2 = this.$refs.h2.$el.offsetHeight;
+ const h1 = this.$refs.h1.$el.offsetHeight
+ const h2 = this.$refs.h2.$el.offsetHeight
// 鍏朵腑涓�涓�40鏄洅瀛愮殑鎬诲杈硅窛
- this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 40px - 40px - var(--el-main-padding) * 2`;
+ this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 40px - 40px - var(--el-main-padding) * 2`
},
giveTime(val) {
//灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
- 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');
+ 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')
},
// 椤靛ぇ灏忔敼鍙樻椂瑙﹀彂
handleSizeChange(val) {
- this.pageSize = val;
+ this.pageSize = val
// 鏀瑰彉姣忛〉鏄剧ず鏁扮洰鏃惰烦鍒板綋鍓嶉〉
- this.handleCurrentChange(1);
+ this.handleCurrentChange(1)
},
// 椤靛彿鏀瑰彉鏃惰Е鍙�
handleCurrentChange(val) {
- console.log('褰撳墠椤典负锛�', val);
// 灏嗗綋鍓嶉〉鍙风粰currentPage
- this.currentPage = val;
+ this.currentPage = val
// 椤甸潰鍙樺寲鏃惰皟鐢� 鏌ヨ鏁版嵁鍑芥暟
- this.handleSubmit();
+ this.handleSubmit()
},
//搴忓彿閫掑
indexMethod(index) {
- return index + 1 + (this.currentPage - 1) * this.pageSize;
+ return index + 1 + (this.currentPage - 1) * this.pageSize
},
// 鏌ヨ鏁版嵁
handleSubmit() {
- // if (this.isExceedOneMonth(this.form.beginTime, this.form.endTime)) {
- // alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀');
- // return;
- // }
- this.loading = true;
+ this.loading = true
this.queryButton = true
- let params = {};
- params['page'] = this.currentPage;
- params['pageSize'] = this.pageSize;
+ let params = {}
+ params['page'] = this.currentPage
+ params['pageSize'] = this.pageSize
if (this.form.name) {
- params['siteName'] = this.form.name;
+ params['siteName'] = this.form.name
}
if (this.form.number) {
- params['mnCode'] = this.form.number;
+ params['mnCode'] = this.form.number
}
- params['beginTime'] = this.form.beginTime;
- params['endTime'] = this.form.endTime;
+ params['beginTime'] = this.form.beginTime
+ params['endTime'] = this.form.endTime
if (this.scenarioType.length != 0) {
- params['scenarioType'] = this.scenarioType.join();
+ params['scenarioType'] = this.scenarioType.join()
}
-
this.$http.get('/dust/history1', { params: params }).then((response) => {
// 淇濆瓨杩斿洖鐨�
- this.tableData = response.data.data.rows;
- this.displayData = this.tableData;
- this.loading = false;
+ this.tableData = response.data.data.rows
+ this.displayData = this.tableData
+ this.loading = false
this.queryButton = false
if (response.data.data.total == 0) {
- ElMessage('璇ユ椂娈垫棤鏁版嵁');
- this.loading = false;
+ ElMessage('璇ユ椂娈垫棤鏁版嵁')
+ this.loading = false
this.queryButton = false
- this.isNoData = true;
- return;
+ this.isNoData = true
+ return
}
- this.total = response.data.data.total;
+ this.total = response.data.data.total
// 绉婚櫎绌烘暟鎹姸鎬�
- this.isNoData = false;
- });
+ this.isNoData = false
+ })
},
backMinuteDataAWeekAgo() {
// 鎵撳紑椤甸潰鍔犺浇鏈�杩戜竴鍛ㄧ殑鏁版嵁
- this.loading = true;
+ this.loading = true
// 缁欒緭鍏ユ璁剧疆榛樿鐨勯�夋嫨椤�
- let params = {};
- params['siteName'] = this.form.name;
- params['beginTime'] = this.form.beginTime;
- params['endTime'] = this.form.endTime;
+ let params = {}
+ params['siteName'] = this.form.name
+ params['beginTime'] = this.form.beginTime
+ params['endTime'] = this.form.endTime
this.$http.get('/dust/history1', { params: params }).then((response) => {
// 淇濆瓨杩斿洖鐨�
- this.tableData = response.data.data.rows;
- this.displayData = this.tableData;
+ this.tableData = response.data.data.rows
+ this.displayData = this.tableData
if (response.data.data.total == 0) {
- ElMessage('璇ユ椂娈垫棤鏁版嵁');
- this.isNoData = true;
- return;
+ ElMessage('璇ユ椂娈垫棤鏁版嵁')
+ this.isNoData = true
+ return
}
- this.total = response.data.data.total;
- this.loading = false;
- });
- }
+ this.total = response.data.data.total
+ this.loading = false
+ })
+ }
}
-};
+}
</script>
<template>
- <el-row>
- <el-col ref="h1" class="head-row">
- <el-card>
- <el-form :inline="true">
- <div class="demo-form-inline">
- <el-row>
- <el-col>
+ <div class="history-container">
+ <el-row>
+ <el-col ref="h1" class="head-row">
+ <el-card>
+ <el-form :inline="true">
+ <div class="demo-form-inline">
+ <el-row>
+ <el-col>
+ <el-form-item>
+ <AreaAndmonitorType></AreaAndmonitorType>
+ </el-form-item>
- <el-form-item>
- <AreaAndmonitorType></AreaAndmonitorType>
- </el-form-item>
- <el-form-item>
- <template #label> </template>
- <InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)">
- </InputSearch>
- </el-form-item>
- <el-form-item>
- <template #label>
- <span class="font-label">璁惧缂栧彿:</span>
- </template>
- <el-input v-model="form.number" clearable placeholder="璇疯緭鍏�"></el-input>
- </el-form-item>
- <el-form-item>
- <ScenarioType @submitScenarioType="(val) => (scenarioType = val)">
- </ScenarioType>
- </el-form-item>
- </el-col>
+ <el-form-item>
+ <InputSearch
+ isNeedDefaultSite="1"
+ @submit-value="(n) => (form.name = n)"
+ @submit-site-nums="(n) => (siteNums = n)"
+ >
+ </InputSearch>
+ </el-form-item>
+
+ <el-form-item>
+ <template #label>
+ <span class="font-label">璁惧缂栫爜:</span>
+ </template>
+ <el-input v-model="form.number" clearable placeholder="璇疯緭鍏�"></el-input>
+ </el-form-item>
+ </el-col>
+
+ <el-col>
+ <el-form-item>
+ <TimeShortCuts time-type="week" @submit-time="giveTime"></TimeShortCuts>
+ </el-form-item>
+
+ <el-form-item>
+ <ScenarioType @submitScenarioType="(val) => (scenarioType = val)">
+ </ScenarioType>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </div>
+ <div class="button-and-export">
<el-form-item>
- <TimeSelectWithShortCuts @submit-time="giveTime"></TimeSelectWithShortCuts>
+ <el-tag class="ml-2" type="success" size="large">鐐逛綅鎬绘暟</el-tag>
+ <span class="tag-text">{{ siteNums }}</span>
</el-form-item>
- </el-row>
- </div>
- <div class="button-and-export">
- <el-form-item>
- <!-- <el-button
- type="primary"
- @click="handleSubmit"
- style="margin-left: 10px"
- ><el-icon style="margin-right: 6px;font-size: 1.2em;"><i-ep-Search/></el-icon>鏌ヨ</el-button
- >
- <el-button type="success" @click="exportDom" round><el-icon style="margin-right: 6px;margin-bottom:2px;font-size: 1.2em;"><i-ep-Download ></i-ep-Download></el-icon>瀵煎嚭鏁版嵁</el-button> -->
- <ButtonClick style="margin-right: 12px;" content="鎼滅储" type="primary" :loading="queryButton" @do-search="handleSubmit"></ButtonClick>
- <ButtonExportExcel content="瀵煎嚭鏁版嵁" type="success" :loading="exportButton" @do-export="exportDom"></ButtonExportExcel>
- </el-form-item>
- </div>
- </el-form>
- </el-card>
- </el-col>
- </el-row>
- <el-row>
- <el-col v-show="!isNoData">
+ <el-form-item>
+ <ButtonClick
+ style="margin-right: 12px"
+ content="鎼滅储"
+ type="primary"
+ :loading="queryButton"
+ @do-search="handleSubmit"
+ ></ButtonClick>
+ <ButtonExportExcel
+ content="瀵煎嚭鏁版嵁"
+ type="success"
+ :loading="exportButton"
+ @do-export="exportDom"
+ ></ButtonExportExcel>
+ </el-form-item>
+ </div>
+ </el-form>
+ </el-card>
+ </el-col>
+ <el-col> </el-col>
+ </el-row>
- <el-table border size="default" :highlight-current-row="true" :data="displayData" :height="tableHeight"
- v-loading="loading">
- <!--缁戝畾涓�涓柟娉曪紝灏嗚繑鍥炲�艰祴缁檌ndex,鍗宠〃鏍兼瘡琛屾暟鎹殑涓嬫爣-->
- <el-table-column type="index" label="搴忓彿" align="center" fixed :index="indexMethod"></el-table-column>
- <el-table-column prop="name" label="绔欑偣鍚嶇О" show-overflow-tooltip></el-table-column>
- <el-table-column prop="address" label="鍦板潃" align="center" show-overflow-tooltip></el-table-column>
- <el-table-column prop="dutyCompany" label="渚涘簲鍟�" align="center" show-overflow-tooltip></el-table-column>
- <el-table-column prop="mnCode" label="璁惧缂栧彿" show-overflow-tooltip></el-table-column>
- <el-table-column prop="typeName" label="绫诲瀷" align="center" show-overflow-tooltip></el-table-column>
- <el-table-column prop="dustValue" label="鎵皹娴撳害(mg/m鲁)" align="center" sortable
- show-overflow-tooltip></el-table-column>
- <el-table-column prop="noiseValue" label="鍣０(dB)" align="center" sortable show-overflow-tooltip></el-table-column>
- <el-table-column prop="lst" label="閲囬泦鏃堕棿" sortable align="center" show-overflow-tooltip></el-table-column>
- <el-table-column prop="quality" label="绛夌骇" align="center" show-overflow-tooltip></el-table-column>
- <el-table-column prop="groupName" label="鎵�鍦ㄥ尯鍘�" align="center" show-overflow-tooltip>
- </el-table-column>
- </el-table>
- <!--size-change 鏄痯ageSize 鏀瑰彉鏃朵細瑙﹀彂鐨勪簨浠�,handleSizeChange鏄簨浠跺鐞嗗嚱鏁�
+ <el-row>
+ <el-col v-show="!isNoData">
+ <el-table
+ border
+ size="default"
+ :highlight-current-row="true"
+ :data="displayData"
+ :height="tableHeight"
+ v-loading="loading"
+ >
+ <!--缁戝畾涓�涓柟娉曪紝灏嗚繑鍥炲�艰祴缁檌ndex,鍗宠〃鏍兼瘡琛屾暟鎹殑涓嬫爣-->
+ <el-table-column
+ type="index"
+ label="搴忓彿"
+ align="center"
+ fixed
+ :index="indexMethod"
+ ></el-table-column>
+ <el-table-column prop="name" label="鐐逛綅鍚嶇О" show-overflow-tooltip></el-table-column>
+ <el-table-column
+ prop="address"
+ label="鍦板潃"
+ align="center"
+ show-overflow-tooltip
+ ></el-table-column>
+ <el-table-column
+ prop="dutyCompany"
+ label="杩愮淮鍟�"
+ align="center"
+ show-overflow-tooltip
+ ></el-table-column>
+ <el-table-column prop="mnCode" label="璁惧缂栫爜" show-overflow-tooltip></el-table-column>
+ <el-table-column
+ prop="typeName"
+ label="绫诲瀷"
+ align="center"
+ show-overflow-tooltip
+ ></el-table-column>
+ <el-table-column
+ prop="dustValue"
+ label="TSP(mg/m鲁)"
+ align="center"
+ sortable
+ show-overflow-tooltip
+ ></el-table-column>
+ <el-table-column
+ prop="noiseValue"
+ label="鍣０(dB)"
+ align="center"
+ sortable
+ show-overflow-tooltip
+ ></el-table-column>
+ <el-table-column
+ prop="lst"
+ label="閲囬泦鏃堕棿"
+ sortable
+ align="center"
+ show-overflow-tooltip
+ ></el-table-column>
+ <el-table-column
+ prop="quality"
+ label="绛夌骇"
+ align="center"
+ show-overflow-tooltip
+ ></el-table-column>
+ <el-table-column prop="groupName" label="鎵�鍦ㄥ尯鍘�" align="center" show-overflow-tooltip>
+ </el-table-column>
+ </el-table>
+ <!--size-change 鏄痯ageSize 鏀瑰彉鏃朵細瑙﹀彂鐨勪簨浠�,handleSizeChange鏄簨浠跺鐞嗗嚱鏁�
current-change 鏄痗urrentPage 鏀瑰彉鏃朵細瑙﹀彂鐨勪簨浠� -->
- <el-pagination ref="h2" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
- :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total"
- layout="total,sizes, prev, pager, next, jumper" :current-page="currentPage"></el-pagination>
-
- </el-col>
- <el-empty v-show="isNoData" :image-size="200" />
-
- </el-row>
+ <el-pagination
+ ref="h2"
+ background
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :page-sizes="[10, 20, 50, 100]"
+ :page-size="pageSize"
+ :total="total"
+ layout="total,sizes, prev, pager, next, jumper"
+ :current-page="currentPage"
+ ></el-pagination>
+ </el-col>
+ <el-empty v-show="isNoData" :image-size="200" />
+ </el-row>
+ </div>
</template>
-<style lang="scss" scoped>
-// 鏁翠綋宸﹀杈硅窛
+<style scoped>
+.history-container {
+ min-width: 1200px;
+}
+/* // 鏁翠綋宸﹀杈硅窛 */
.el-row {
margin-left: 10px;
}
@@ -310,6 +391,8 @@
.font-label {
margin-top: 3px;
font-weight: bold;
+ font-size: 14px;
+ color: #333333;
}
.demo-form-inline {
@@ -318,11 +401,20 @@
.button-and-export {
display: flex;
- justify-content: flex-end;
+ /* justify-content: flex-end; */
+ justify-content: space-between;
/* 浠庤灏句綅缃紑濮嬫帓鍒� */
}
+.el-table {
+ /* color: #303133 */
+ color: rgb(59, 60, 63);
+}
.el-pagination {
- margin: 10px 0px;
+ margin: 10px 10px;
+}
+.tag-text {
+ margin-left: 10px;
+ font-size: 14px;
}
</style>
--
Gitblit v1.9.3