From fd934f83afae1e3fce46db8610837d0e0f4d9393 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 02 十一月 2023 10:44:56 +0800
Subject: [PATCH] 按开发清单已修改
---
src/views/line_graph/SiteComprehensiveRskRanking.vue | 318 ++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 304 insertions(+), 14 deletions(-)
diff --git a/src/views/line_graph/SiteComprehensiveRskRanking.vue b/src/views/line_graph/SiteComprehensiveRskRanking.vue
index fccc0d1..e0c2597 100644
--- a/src/views/line_graph/SiteComprehensiveRskRanking.vue
+++ b/src/views/line_graph/SiteComprehensiveRskRanking.vue
@@ -1,25 +1,315 @@
<script>
- export default {
- data() {
- return{
+import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
+import exceptionApi from '@/api/exceptionApi.js'
+import { useCommonFunction } from '../../utils/common.js'
+import index from '@/utils/risk_estimate_common_function/index.js'
+import dayjs from 'dayjs'
+import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
+import ButtonClick from '@/sfc/ButtonClick.vue'
+import { ElMessage } from 'element-plus'
+import MonthSelect from '@/sfc/MonthSelect.vue';
+import SiteDetail from '@/views/line_graph/components/SiteDetail.vue'
+import { useLoadingStore } from '@/stores/loadingStore';
+import { mapStores } from 'pinia';
+export default {
+ components: {
+ AreaAndmonitorType,
+ ButtonExportExcel,
+ ButtonClick,
+ MonthSelect,
+ SiteDetail,
+ },
+ data() {
+ return {
+ // 琛ㄦ牸鏁版嵁
+ tableData: [],
+ isNoData: true,
+ loading: false,
+ // 缁熻鍒嗘瀽鎸夐挳鍔犺浇涓�
+ queryButton: false,
+ // 瀵煎嚭鎸夐挳鍔犺浇涓�
+ exportButton: false,
+ form: {
+ // 绔欑偣鍚嶇О
+ name: '',
+ // 寮�濮嬫椂闂�
+ beginTime: '',
+ // // 缁撴潫鏃堕棿
+ endTime: '',
+ // 閫夋嫨鐨勬湀浠�
+ month:''
+ },
+ bill: {
+ min: '',
+ max: '',
+ avg: '',
+ online: '',
+ valid: '',
+ exceeding: '',
+
+ // 鍏稿瀷寮傚父澶嶇幇鐜�
+ exceptionRecurrence: '',
+ // 寮傚父绫诲瀷鎹仛闆嗗害
+ exceptionTypeAggregation: ''
+ },
+
+ // 琛ㄦ牸鏁版嵁
+ table: [],
+ // 琛ㄦ牸楂樺害
+ tableHeight: 600,
+ currentRow:[]
+ }
+ },
+ setup() {
+ // 寮曞叆 鐧惧垎鍙锋瘮杈冨ぇ灏� 瀵煎嚭鍔熻兘
+ const { exportToExcel } = useCommonFunction()
+ return { exportToExcel }
+ },
+ computed: {
+ ...mapStores(useLoadingStore),
+ },
+ mounted(){
+ //
+ this.fetch()
+ this.calTableHeight()
+ },
+ methods: {
+
+ /**
+ * 灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�
+ * @param锛�
+ * @returns锛�
+ */
+ giveMonth(val){
+ //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
+ this.form.month = dayjs(val).format('YYYY-MM-DD');
+ // 鍚屾椂鏇存柊寮�濮嬪拰缁撴潫鏃堕棿
+ this.form.beginTime = dayjs(this.form.month).startOf().format('YYYY-MM-DD HH:mm:ss')
+ this.form.endTime = dayjs(this.form.month).endOf('month').format('YYYY-MM-DD HH:mm:ss')
+ console.log(this.form.beginTime,this.form.endTime);
+
+ },
+
+ // 鍔熻兘锛氭敼鍙樿〃鏍兼煇涓崟鍏冩牸鐨勯鑹�
+ tableCellClassName({ row, columnIndex }) {
+ // 骞冲潎鍊间笉婊¤冻鏍囧噯鏃�
+ if (columnIndex == 4) {
+ if (row.riskValue >= 0.8) {
+ return 'warning-row';
+ }
+ }
+
+
+ },
+ // 鍔熻兘锛氳〃鏍奸珮搴︽牴鎹唴瀹硅嚜閫傚簲
+ calTableHeight() {
+ const h1 = this.$refs.h1.$el.offsetHeight
+ // 鍏朵腑涓�涓�40鏄洅瀛愮殑鎬诲杈硅窛
+ this.tableHeight = `calc(100vh - ${h1}px - 40px - 40px - var(--el-main-padding) * 2`
+ },
+ // 鐐瑰嚮椋庨櫓鎺掑悕鎸夐挳
+ fetchData() {
+ this.loading = true
+ this.queryButton = true
+ exceptionApi
+ .analysisdataByType(this.form.month, 'month')
+ .then((response) => {
+ this.chartData = response.data.data
+ this.queryButton = false
+ this.isNoData = false
+
+ if (response.data.data.length == 0) {
+ this.isNoData = true
+ return
+ }
+
+ exceptionApi
+ .exceptiondata1({
+ siteName: '',
+ beginTime: this.form.beginTime,
+ endTime: this.form.endTime
+ })
+ .then((res) => {
+ this.isNoData = false
+
+ this.table = index.merge(
+ this.chartData,
+ res.data.data,
+ this.form.beginTime,
+ this.form.endTime
+ )
+ this.loading = false
+
+ this.$nextTick(()=>{
+ this.$refs.table.sort('riskValue','descending')
+
+ })
+
+ })
+
+ })
+ },
+
+ /**
+ * 鍒濆鍔犺浇鍑芥暟
+ */
+ fetch() {
+ // 鍒嗘瀽鏁版嵁
+ this.fetchData()
+ // 寮傚父鏁版嵁
+ // this.exceptiondataCount()
+ },
+
+ /**
+ * 瀵煎嚭涓篍xcel
+
+ */
+ exportData() {
+ if (this.table.length != 0) {
+ const tableColumns = [
+ 'siteName',
+ 'region',
+ 'monitorType',
+ 'riskValue',
+ 'riskGrage',
+ 'riskAdvice',
+ 'beginTime',
+ 'endTime'
+ ]
+ const excelColumns = [
+ ['A1', '绔欑偣鍚嶇О'],
+ ['B1', '鍖哄煙'],
+ ['C1', '鐩戞祴绫诲瀷'],
+ ['D1', '椋庨櫓鍊�'],
+ ['E1', '椋庨櫓绛夌骇'],
+ ['F1', '绠℃帶鎺柦'],
+ ['G1', '寮�濮嬫棩鏈�'],
+ ['H1', '缁撴潫鏃ユ湡']
+ ]
+ this.exportButton = true
+ this.exportToExcel(this.table, tableColumns, excelColumns, '缁煎悎椋庨櫓鎺掑悕.xlsx')
+ this.exportButton = false
+ } else {
+ ElMessage('鏃犳暟鎹渶瑕佸鍑�')
}
},
- mounted() {
-
- },
- methods: {
-
- }
+ openDetail(row){
+ this.$router.push(`/detail/${row.siteName}/${this.form.month}`)
+ }
+ }
}
</script>
<template>
- <div>
-绔欑偣缁煎悎椋庨櫓鎺掑悕
- </div>
+ <el-row ref="h1">
+ <el-row>
+ <el-form :inline="true" :model="form">
+ <el-form-item>
+ <AreaAndmonitorType></AreaAndmonitorType>
+ </el-form-item>
+
+ <el-form-item>
+ <MonthSelect @submit-value="giveMonth"></MonthSelect>
+ </el-form-item>
+
+ <el-form-item>
+ <ButtonClick
+ style="margin-right: 12px"
+ content="椋庨櫓鎺掑悕"
+ type="primary"
+ :loading="queryButton"
+ @do-search="fetch"
+ ></ButtonClick>
+ <ButtonExportExcel
+ content="瀵煎嚭鏁版嵁"
+ type="success"
+ :loading="exportButton"
+ @do-export="exportData"
+ ></ButtonExportExcel>
+ </el-form-item>
+ </el-form>
+ </el-row>
+ </el-row>
+
+ <el-table
+ ref="table"
+ :data="table"
+ :height="tableHeight"
+ v-loading="loading"
+ element-loading-text="鍚庡彴鍒嗘瀽涓�..."
+ style="width: 98%"
+ :cell-class-name="tableCellClassName"
+ :default-sort="{ prop: 'riskValue', order: 'descending' }"
+ v-show="!isNoData"
+ border
+ >
+ <el-table-column
+ type="index"
+ prop="name"
+ label="搴忓彿"
+ :index="indexMethod"
+ fixed
+ align="center"
+ width="55"
+ show-overflow-tooltip
+ />
+ <el-table-column prop="siteName" label="绔欑偣鍚嶇О" align="center" show-overflow-tooltip >
+ <template #default="{ row }">
+ <el-button type="primary" text class="table-button" @click="openDetail(row)"
+ >{{row.siteName}}</el-button
+ >
+ </template>
+ </el-table-column>
+ <el-table-column prop="region" label="鍖哄煙" align="center" width="80" show-overflow-tooltip />
+ <el-table-column prop="monitorType" label="妫�娴嬬被鍨�" align="center" width="80" show-overflow-tooltip />
+ <el-table-column
+ prop="riskValue"
+ label="椋庨櫓鍊�"
+ sortable
+ align="center"
+ width="100"
+ show-overflow-tooltip
+ />
+ <el-table-column prop="riskGrage" label="椋庨櫓绛夌骇" align="center" width="100" show-overflow-tooltip />
+ <el-table-column prop="riskAdvice" label="绠℃帶鎺柦" align="center" show-overflow-tooltip />
+ <el-table-column
+ prop="beginTime"
+ label="寮�濮嬫棩鏈�"
+ sortable
+ align="center"
+ width="160"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="endTime"
+ label="缁撴潫鏃ユ湡"
+ sortable
+ align="center"
+ width="160"
+ show-overflow-tooltip
+ />
+ </el-table>
+ <el-empty v-show="isNoData" :image-size="200" />
+
+
+
</template>
-<style scoped>
+<style scoped>
+.el-row,
+.el-table {
+ margin: 10px 0px 0px 10px;
+}
-</style>
\ No newline at end of file
+:deep(.el-table__row .warning-row){
+ background-color: red;
+ /* color: rgb(241, 236, 236); */
+}
+.table-button {
+ letter-spacing: 1px;
+ text-decoration: underline;
+ border-radius: 0px;
+}
+
+</style>
--
Gitblit v1.9.3