From 013ed9283200da41902835f9fd679df13299d436 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 31 八月 2023 12:53:53 +0800
Subject: [PATCH] 扬尘Vue
---
src/views/exception/FlightInspection.vue | 293 ++++++++++++++++++++++++++++++++++++++---
src/views/line_graph/DataRiskModel.vue | 29 ++-
src/views/line_graph/components/DustRadarChart.vue | 30 ++-
src/sfc/DustLineChart.vue | 31 ++-
4 files changed, 323 insertions(+), 60 deletions(-)
diff --git a/src/sfc/DustLineChart.vue b/src/sfc/DustLineChart.vue
index 99ec58e..4f2880e 100644
--- a/src/sfc/DustLineChart.vue
+++ b/src/sfc/DustLineChart.vue
@@ -5,7 +5,10 @@
-->
<template>
- <div id="main" class="line-chart"></div>
+
+ <div id="main" class="line-chart-exception"></div>
+
+
</template>
<script>
@@ -38,8 +41,6 @@
},
watch: {
option(){
- // this.chart.dispose;
- // this.initChart();
// this.chart.clear
// 涓嶄笌涔嬪墠鐨刼ption杩涜鍚堝苟
this.chart.setOption(this.option,true)
@@ -48,11 +49,11 @@
window.addEventListener('resize', this.resizeChart);
},
},
- beforeUnmount() {
- if (this.chart) {
- this.chart.dispose;
- }
- },
+ // beforeUnmount() {
+ // if (this.chart) {
+ // this.chart.dispose;
+ // }
+ // },
methods: {
initChart() {
// 鍒涘缓echarts瀹炰緥
@@ -98,19 +99,23 @@
// 璺熼〉闈㈠搷搴斿紡鍙樺寲
resizeChart() {
- this.chart.resize();
+ this.$nextTick(() => {
+ if (this.chart) {
+ this.chart.resize();
+ }
+ });
}
}
};
</script>
- <style>
- .line-chart {
- width:920px;
+ <style scoped>
+ .line-chart-exception {
+ width: 700px;
height: 250px;
margin-bottom: 20px;
- min-width: 600px;
+ min-width: 500px;
}
</style>
\ No newline at end of file
diff --git a/src/views/exception/FlightInspection.vue b/src/views/exception/FlightInspection.vue
index 61e9267..1e3ac41 100644
--- a/src/views/exception/FlightInspection.vue
+++ b/src/views/exception/FlightInspection.vue
@@ -15,8 +15,11 @@
import dayjs from 'dayjs';
export default {
components: {
+ ExceptionType,
+ InputSearch,
TimeSelectWithShortCuts,
DustExceptionText,
+ DustLineChart,
AreaAndmonitorType
},
data() {
@@ -100,8 +103,6 @@
afterButton: false,
// 鎶樼嚎鍥�
lineChart: false,
- // 寮傚父绔欑偣鍚嶅瓙鏂囨湰
- text:false
},
@@ -1357,11 +1358,24 @@
<el-form-item >
<AreaAndmonitorType ></AreaAndmonitorType>
</el-form-item>
+ <el-form-item>
+ <InputSearch
+ :isNeedDefaultSite="0"
+ @submit-value="(n) => (form.name = n)"
+ @submit-site-Nums="(n) => (siteTotal = n)"
+ >
+ </InputSearch>
+ </el-form-item>
+
+ <el-form-item>
+ <ExceptionType
+ @submit-value="(n) => form.exceptionName = n"
+ ></ExceptionType>
+ </el-form-item>
<el-form-item>
<TimeSelectWithShortCuts @submit-time="giveTime"></TimeSelectWithShortCuts>
</el-form-item>
-
</div>
<div class="head-container-search">
@@ -1431,7 +1445,7 @@
</div>
<hr />
<!-- 寮傚父鐨勫簵閾哄悕瀛� -->
- <div class="card-exception-buttom" v-loading="loading.text" >
+ <div class="card-exception-buttom">
<el-scrollbar max-height="90px">
<DustExceptionText
:site-name="item.name"
@@ -1439,7 +1453,7 @@
:begin-time="beginTime"
:end-time="endTime"
@submit-exception-data="getAbnormalDataByClick"
- @subloading="(n)=>loading.text=n"
+
v-for="(item, index) in exception.exception4"
:key="item"
>{{ item.name }}
@@ -1498,7 +1512,7 @@
</div>
<hr />
<!-- 寮傚父鐨勫簵閾哄悕瀛� -->
- <div class="card-exception-buttom" v-loading="loading.text">
+ <div class="card-exception-buttom">
<el-scrollbar max-height="90px">
<DustExceptionText
:site-name="item.name"
@@ -1565,7 +1579,7 @@
</div>
<hr />
<!-- 寮傚父鐨勫簵閾哄悕瀛� -->
- <div class="card-exception-buttom" v-loading="loading.text">
+ <div class="card-exception-buttom">
<el-scrollbar max-height="90px">
<DustExceptionText
:site-name="item.name"
@@ -1594,7 +1608,7 @@
<!-- 鏍囧ご -->
<div class="card-text1">
<image class="card-header-image"></image>
- <span class="card-header-text">鍙樺寲瓒嬪娍寮傚父</span>
+ <span class="card-header-text">婊戝姩骞冲潎鍊煎紓甯�</span>
</div>
<div class="card-content-text">
@@ -1632,7 +1646,7 @@
</div>
<hr />
<!-- 寮傚父鐨勫簵閾哄悕瀛� -->
- <div class="card-exception-buttom" v-loading="loading.text">
+ <div class="card-exception-buttom">
<el-scrollbar max-height="90px">
<DustExceptionText
:site-name="item.name"
@@ -1703,7 +1717,7 @@
</div>
<hr />
<!-- 寮傚父鐨勫簵閾哄悕瀛� -->
- <div class="card-exception-buttom" v-loading="loading.text">
+ <div class="card-exception-buttom">
<el-scrollbar max-height="90px">
<DustExceptionText
:site-name="item.name"
@@ -1731,7 +1745,7 @@
<!-- 鏍囧ご -->
<div class="card-text1">
<image class="card-header-image"></image>
- <span class="card-header-text">鏁版嵁缂哄け寮傚父</span>
+ <span class="card-header-text">鏂數鎴栨柇缃�</span>
</div>
<div class="card-content-text">
@@ -1765,7 +1779,7 @@
</div>
<hr />
<!-- 寮傚父鐨勫簵閾哄悕瀛� -->
- <div class="card-exception-buttom" v-loading="loading.text">
+ <div class="card-exception-buttom">
<el-scrollbar max-height="90px">
<DustExceptionText
:site-name="item.name"
@@ -1827,7 +1841,7 @@
</div>
<hr />
<!-- 寮傚父鐨勫簵閾哄悕瀛� -->
- <div class="card-exception-buttom" v-loading="loading.text">
+ <div class="card-exception-buttom">
<el-scrollbar max-height="90px">
<DustExceptionText
:site-name="item.name"
@@ -1958,7 +1972,7 @@
</div>
<hr />
<!-- 寮傚父鐨勫簵閾哄悕瀛� -->
- <div class="card-exception-buttom" v-loading="loading.text">
+ <div class="card-exception-buttom">
<el-scrollbar max-height="90px">
<DustExceptionText
:site-name="item.name"
@@ -1989,6 +2003,241 @@
</el-col>
</el-row>
+ <el-row>
+ <el-col v-show="!isNoData">
+ <el-table
+ ref="table"
+ :data="displayData"
+ :height="tableHeight"
+ highlight-current-row="true"
+ size="default"
+ v-loading="loading.tableLoading"
+ border
+ >
+ <el-table-column
+ type="index"
+ label="搴忓彿"
+ width="60px"
+ align="center"
+ fixed
+ :index="indexMethod1"
+ />
+ <el-table-column prop="name" label="绔欑偣鍚嶇О" show-overflow-tooltip />
+ <el-table-column
+ prop="mnCode"
+ label="璁惧缂栧彿"
+ align="center"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="exception"
+ label="寮傚父绫诲瀷"
+ align="center"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="region"
+ label="鍖哄煙"
+ align="center"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="beginTime"
+ label="寮�濮嬫椂闂�"
+ align="center"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="endTime"
+ label="缁撴潫鏃堕棿"
+ align="center"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="typename"
+ label="鍦烘櫙"
+ align="center"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="address"
+ label="鍦板潃"
+ align="center"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="dutyCompany"
+ label="杩愮淮鍟�"
+ align="center"
+ show-overflow-tooltip
+ />
+ <el-table-column label="鎿嶄綔" align="center">
+ <template #default="{ row }">
+ <el-button
+ type="primary"
+ class="table-button"
+ @click="showDialog(row)"
+ >鏌ョ湅璇︽儏</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <el-pagination
+ ref="h4"
+ background
+ layout="total, sizes, prev, pager, next, jumper"
+ v-model:current-page="currentPage"
+ v-model:page-size="pageSize"
+ :total="total"
+ :page-sizes="[10, 20, 50, 100]"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ >
+ </el-pagination>
+ </el-col>
+ </el-row>
+
+ <el-empty v-show="isNoData" :image-size="200" />
+
+ <el-dialog v-model="dialogTableVisible" draggable align-center height="300px">
+ <!-- 澶� -->
+ <template #header>
+ <div class="diag-head">
+ <div class="diag-head-text">
+ <div>
+ <span class="diag-head-text1">绔欑偣鍚嶇О锛�</span
+ >{{ tableCurrentRowData.name }}
+ </div>
+
+ <div>
+ <span class="diag-head-text1">寮傚父绫诲瀷锛�</span>
+ <span v-if="tableCurrentRowData.exceptionType == '0'"
+ >鏂數鎴栨柇缃�</span
+ >
+ <span v-else-if="tableCurrentRowData.exceptionType == '1'"
+ >鏁版嵁瓒呬綆</span
+ >
+ <span v-else-if="tableCurrentRowData.exceptionType == '2'">瓒呮爣</span>
+ <span v-else-if="tableCurrentRowData.exceptionType == '3'"
+ >鏁版嵁闀挎椂闂存棤娉㈠姩</span
+ >
+ <span v-else-if="tableCurrentRowData.exceptionType == '4'"
+ >閲忕骇绐佸彉寮傚父</span
+ > <span v-else-if="tableCurrentRowData.exceptionType == '5'"
+ >涓磋繎瓒呮爣寮傚父</span
+ > <span v-else-if="tableCurrentRowData.exceptionType == '6'"
+ >鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父</span
+ > <span v-else-if="tableCurrentRowData.exceptionType == '7'"
+ >婊戝姩骞冲潎鍊煎紓甯�</span
+ >
+ </div>
+
+ <div>
+ <span class="diag-head-text1">寮傚父鏃堕棿娈碉細</span
+ >{{ tableCurrentRowData.beginTime }} ~
+ {{ tableCurrentRowData.endTime }}
+ </div>
+ </div>
+
+ <div class="chart-jump-button">
+ <el-button
+ type="danger"
+ :loading="loading.preButton"
+ :disabled="dialog.isPreCantouch || flag.banTouch"
+ @click="getPreviousRowData"
+ >涓婃潯寮傚父</el-button
+ >
+ <el-button
+ type="danger"
+ :loading="loading.afterButton"
+ :disabled="dialog.isNextCantouch || flag.banTouch"
+ @click="getNextRowData"
+ >涓嬫潯寮傚父</el-button
+ >
+ </div>
+ </div>
+ </template>
+
+ <!-- :option="dialog.option" -->
+
+ <!-- 鍥惧舰 -->
+ <DustLineChart
+ :option="dialog.option"
+ :is-open-dialog="dialogTableVisible"
+ v-loading="loading.lineChart"
+ ></DustLineChart>
+
+ <!-- 琛ㄦ牸 -->
+ <div>
+ <el-table :data="dialog.historyData" size="default" height="200" border>
+ <el-table-column
+ type="index"
+ label="搴忓彿"
+ width="60px"
+ align="center"
+ fixed
+ :index="indexMethod2"
+ ></el-table-column>
+ <el-table-column
+ fixed
+ prop="name"
+ label="绔欑偣鍚嶇О"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="mnCode"
+ label="璁惧缂栧彿"
+ align="center"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="dutyCompany"
+ label="杩愮淮鍟�"
+ align="center"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="lst"
+ label="閲囬泦鏃堕棿"
+ align="center"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="dustValue"
+ label="棰楃矑鐗╂祿搴�(mg/m鲁)"
+ align="center"
+ show-overflow-tooltip
+ />
+ </el-table>
+ </div>
+ <template #footer>
+ <el-tag type="success" class="mx-1" effect="dark" round
+ ><span
+ class="table-line-lable"
+ v-show="tableCurrentRowData.exceptionType == '0'"
+ >缂哄け鏁版嵁锛�
+ </span>
+ <span
+ v-show="
+ tableCurrentRowData.exceptionType == '1' ||
+ tableCurrentRowData.exceptionType == '2' ||
+ tableCurrentRowData.exceptionType == '3' ||
+ tableCurrentRowData.exceptionType == '4'
+ "
+ >寮傚父鏁版嵁锛�</span
+ >
+ <span class="table-line-num">{{ dialog.exceptionTotal }}鏉�</span>
+ <span
+ v-show="
+ tableCurrentRowData.exceptionType === '0'
+ "
+ >
+ (閫昏緫璁＄畻)</span
+ >
+ </el-tag>
+ </template>
+ </el-dialog>
</template>
<style lang="scss" scoped>
@@ -2086,6 +2335,7 @@
/* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃殑鏍峰紡 */
:deep(.el-dialog) {
// 瀵硅瘽妗嗛珮搴�
+
}
.diag-head {
// 瀵硅瘽妗嗗ご閮ㄥ尯鍩�
@@ -2113,18 +2363,13 @@
.chart-jump-button {
// 鈥樹笂涓�鏉♀�欙紝鈥樹笅涓�鏉♀�� 鎸夐挳
// border: 1px solid #fdc2db;
- min-height: 30px;
- width: 200px;
- float: right;
+ // min-height: 30px;
+ // width: 200px;
+ // float: right;
+ display: flex;
+ justify-content: right;
}
-.line-chart {
- // 寮傚父鎶樼嚎鍥�
- width: 920px;
- height: 300px;
- margin-bottom: 20px;
- min-width: 600px;
-}
.mx-1 {
position: absolute;
left: 10px;
diff --git a/src/views/line_graph/DataRiskModel.vue b/src/views/line_graph/DataRiskModel.vue
index ceb7659..8f32e7c 100644
--- a/src/views/line_graph/DataRiskModel.vue
+++ b/src/views/line_graph/DataRiskModel.vue
@@ -4,16 +4,16 @@
import InputSearch from '../../sfc/InputSearch.vue';
import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue';
-// import DustRadarChart from './components/DustRadarChart.vue';
+import DustRadarChart from './components/DustRadarChart.vue';
import exceptionApi from '@/api/exceptionApi.js';
import { useWindowSize } from '@vueuse/core';
import LineChart from './components/LineChart.vue'
-const DustRadarChart = defineAsyncComponent(() =>
- import('./components/DustRadarChart.vue')
-)
+// const DustRadarChart = defineAsyncComponent(() =>
+// import('./components/DustRadarChart.vue')
+// )
import dayjs from 'dayjs';
export default {
@@ -381,20 +381,20 @@
<div class="time-text">鏁版嵁缁熻鏃舵锛歿{ begin}} ~ {{ end }}</div>
+ <el-row :gutter="20">
+ <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="16" >
+
<el-card
shadow="never"
>
- <el-row :gutter="20">
-
- <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
-
<DustRadarChart :name="['鏁版嵁鏈夋晥鐜�','鍏稿瀷寮傚父澶嶇幇鐜�','寮傚父绫诲瀷鑱氶泦搴�','鏁版嵁瓒呮爣鐜�','鏁版嵁鍦ㄧ嚎鐜�']" :yData="[bill.valid,bill.exceptionRecurrence,bill.exceptionTypeAggregation,bill.exceeding,bill.online]" ></DustRadarChart>
-
+ </el-card>
</el-col>
- <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
+ <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="4">
<el-card
shadow="never"
+ style="width: 200px;min-width: 200px;"
>
<template #header><span class="title-16">椋庨櫓璇︽儏</span></template>
<el-form >
@@ -432,10 +432,11 @@
</el-card>
</el-col>
- <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
+ <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="4">
<el-card
shadow="never"
-
+
+ style="width:200px; min-width: 200px;"
>
<template #header>
<span class="title-16">椋庨櫓绛夌骇</span>
@@ -459,7 +460,7 @@
</el-card>
</el-col>
</el-row>
- </el-card>
+
<el-row :gutter="24">
@@ -586,4 +587,6 @@
font-size: 16px;
font-weight: bold;
}
+.el-row {
+}
</style>
diff --git a/src/views/line_graph/components/DustRadarChart.vue b/src/views/line_graph/components/DustRadarChart.vue
index 3541676..b0e5748 100644
--- a/src/views/line_graph/components/DustRadarChart.vue
+++ b/src/views/line_graph/components/DustRadarChart.vue
@@ -32,6 +32,7 @@
},
mounted() {
this.initRadarChart();
+ window.addEventListener('resize', this.resizeChart);
},
methods: {
initRadarChart() {
@@ -45,14 +46,6 @@
},
tooltip: {},
radar: {
- // 杞�
- // axisLine: {
- // show:true,
- // lineStyle: {
- // color: '#F53F3F' ,// 璁剧疆杈规绾跨殑棰滆壊涓洪粦鑹�
- // type:'dashed',
- // }
- // },
// 杈规棰滆壊
splitLine: {
@@ -95,20 +88,37 @@
(this.yData[3] / 100).toFixed(4),
(this.yData[4] / 100).toFixed(4)
],
+ // value: [
+ // this.yData[0],
+ // this.yData[1],
+ // this.yData[2],
+ // this.yData[3] ,
+ // this.yData[4]
+ // ],
name: '寮傚父鍒嗘瀽'
}
],
label: {
show: true,
formatter: function (params) {
- return params.value;
+
+ return params.value*100+'%';
}
}
}
]
};
this.chart.setOption(option);
- }
+ },
+ // 璺熼〉闈㈠搷搴斿紡鍙樺寲
+ resizeChart() {
+ // this.chart.resize();
+ this.$nextTick(() => {
+ if (this.chart) {
+ this.chart.resize();
+ }
+ });
+ }
}
};
</script>
--
Gitblit v1.9.3