From 71b1532d5a3609f3125e15fbe65e4b34bb6c4e8b Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 29 八月 2023 15:36:41 +0800
Subject: [PATCH] 数据风险模型模块修改
---
src/views/line_graph/dayMonthAvgData.vue | 323 +++++++++++++++++++++++------------------------------
1 files changed, 143 insertions(+), 180 deletions(-)
diff --git a/src/views/line_graph/dayMonthAvgData.vue b/src/views/line_graph/dayMonthAvgData.vue
index 05988ea..696b539 100644
--- a/src/views/line_graph/dayMonthAvgData.vue
+++ b/src/views/line_graph/dayMonthAvgData.vue
@@ -1,17 +1,17 @@
<!-- 鏃ュ潎鍊� -->
<script>
import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue';
-import InputSearch from '../../sfc/InputSearch.vue'
-import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue'
+import InputSearch from '../../sfc/InputSearch.vue';
+import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue';
import DustRadarChart from '../../sfc/DustRadarChart.vue';
-// 寮傛缁勪欢
-const LineChart = defineAsyncComponent(() =>
- import('../../sfc/LineChart.vue')
-)
+import exceptionApi from '@/api/exceptionApi.js';
-import dayjs from 'dayjs'
+// 寮傛缁勪欢
+const LineChart = defineAsyncComponent(() => import('../../sfc/LineChart.vue'));
+
+import dayjs from 'dayjs';
export default {
- components :{
+ components: {
LineChart,
TimeSelectWithShortCuts,
InputSearch,
@@ -20,12 +20,16 @@
},
data() {
return {
- isNoData:false,
- loading:false,
- chartData: [], //淇濆瓨鏌ヨ鐨勭粨鏋�
+ isNoData: false,
+ loading: false,
+ chartData: [],
+ chartData1: {}, //淇濆瓨鏌ヨ鐨勭粨鏋�
+ chartData2: {},
+ chartData3: {},
+ chartData4: {},
//devId:'', //璁惧缂栧彿
- begin:'2023-05-01', //寮�濮嬫椂闂�
- end:'2023-05-15', //缁撴潫鏃堕棿
+ begin: '2023-05-01', //寮�濮嬫椂闂�
+ end: '2023-05-15', //缁撴潫鏃堕棿
form: {
// 绔欑偣鍚嶇О
@@ -38,15 +42,14 @@
endTime: ''
},
// 鎶樼嚎鍥鹃厤缃」
- option:{},
+ option: {},
// 澶嶉�夋缁�
- radio:1
- }
+ radio: 1
+ };
},
- mounted(){
-
- this.fetchData()
+ mounted() {
+ this.fetch();
},
methods: {
giveTime(val) {
@@ -55,209 +58,170 @@
this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
},
+ fetch() {
+ this.fetchData();
+ this.exceptiondataCount();
+ },
+
// 鐐瑰嚮灞曠ず鎸夐挳
fetchData() {
if (
- this.form.beginTime >= this.form.endTime &&
- (this.form.beginTime != null || this.form.endTime != null) &&
- (this.form.beginTime != '' || tthis.form.endTime != '')
- )
- {
- alert('璇疯緭鍏ユ湁鏁堢殑鏃堕棿娈�');
- return;
- }
- let params = {}
+ this.form.beginTime >= this.form.endTime &&
+ (this.form.beginTime != null || this.form.endTime != null) &&
+ (this.form.beginTime != '' || tthis.form.endTime != '')
+ ) {
+ alert('璇疯緭鍏ユ湁鏁堢殑鏃堕棿娈�');
+ return;
+ }
+ let params = {};
if (this.form.name) {
params['siteName'] = this.form.name;
}
- if(this.form.beginTime){
- params['beginTime'] = this.form.beginTime
+ if (this.form.beginTime) {
+ params['beginTime'] = this.form.beginTime;
}
- if(this.form.endTime){
- params['endTime'] = this.form.endTime
+ if (this.form.endTime) {
+ params['endTime'] = this.form.endTime;
}
- this.loading=true
- this.$http.get('/dust/analysisdata',{params:params})
- .then(response => {
- this.chartData = response.data.data
- console.log('鍒嗘瀽鏁版嵁涓猴細',this.chartData);
- this.loading=false
- if(response.data.data.length==0){
- alert('璇ユ椂娈垫棤鏁版嵁')
- this.isNoData = true
- return
- }
- // 绉婚櫎绌烘暟鎹姸鎬�
- this.isNoData = false
- this.drawChart()
- })
- },
- // 鎶樼嚎鍥鹃厤缃」
- drawChart() {
- if(this.chartData.length!=0){
- let xdate=[]
- let ydata=[]
- this.chartData.map(item=>{
- xdate.push(item['lst'])
- ydata.push(item['dayAvg'])
- })
- console.log('閰嶇疆椤逛负锛�',xdate,ydata);
- this.option ={
- xAxis: {
- name: '鏃堕棿',
- data: xdate
- },
- yAxis: {
- type: 'value',
- axisLabel: {
- show: true,
- interval: 'auto'
- },
- name: '棰楃矑鐗╂祿搴�'
- },
- series: [
- {
- name: 'fume',
- type: 'line',
- data: ydata
- }
- ]
- }
- }
+ this.loading = true;
+ exceptionApi
+ .analysisdata(this.form.name, this.form.beginTime, this.form.endTime)
+ .then((response) => {
+ this.chartData = response.data.data;
+ this.loading = false;
+ if (response.data.data.length == 0) {
+ this.isNoData = true;
+ return;
+ }
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false;
+ this.setChart();
+ });
},
// 閫夋嫨鍏朵粬鍊肩被鍨嬫椂
- setChart(){
- if(this.chartData.length){
- if (this.radio == 1) {
+ setChart() {
+ if (this.chartData.length) {
// x杞存棩鏈熸椂闂�
let dateList = [];
//棰楃矑鐗╁钩鍧囨祿搴�
let dayAvg = [];
- this.chartData.forEach(item => {
+ let dataOnline = [];
+ let dataValid = [];
+ let dataExceed = [];
+ this.chartData.forEach((item) => {
//x杞存棩鏈�
dateList.push(item.lst);
// 鍘嗗彶娌圭儫娴撳害
dayAvg.push(item.dayAvg);
- })
- this.option={}
- this.option = {
- xAxis: {
- name: '鏃堕棿',
- data: dateList,
- },
+ dataOnline.push(item.dayOnline.slice(0, -1));
+ dataValid.push(item.dayValid.slice(0, -1));
+ dataExceed.push(item.dayExceeding.slice(0, -1));
+ });
- yAxis: {
- type: 'value',
- axisLabel: {
- show: true,
- interval: 'auto'
- },
- name: 'mg/m鲁'
- },
- series: [
- {
- name: '棰楃矑鐗╂祿搴�',
- type: 'line',
- data: dayAvg
- }
- ]
- }
+ this.chartData1 = {
+ x: dateList,
+ y: dayAvg
+ };
+ this.chartData2 = {
+ x: dateList,
+ y: dataOnline
+ };
+ this.chartData3 = {
+ x: dateList,
+ y: dataValid
+ };
+ this.chartData4 = {
+ x: dateList,
+ y: dataExceed
+ };
}
- else if (this.radio == 2) {
- // x杞存棩鏈熸椂闂�
- let dateList = [];
- // 鍘嗗彶椋庢満鐢�
- let dataOnline = [];
- let dataValid = [];
- let dataExceed = [];
- this.chartData.forEach(item => {
- //x杞存棩鏈�
- dateList.push(item.lst);
- // 鍘嗗彶椋庢満鐢�
- dataOnline.push(item.dayOnline.slice(0,-1));
- dataValid.push(item.dayValid.slice(0,-1));
- dataExceed.push(item.dayExceeding.slice(0,-1));
- })
- this.option={}
- this.option = {
- legend: {
- data: ['鏃ユ暟鎹湪绾跨巼','鏃ユ暟鎹湁鏁堢巼','鏃ユ暟鎹秴鏍囩巼']
- },
- xAxis: {
- data: dateList,
- name: '鏃堕棿'
- },
- yAxis: {
- type: 'value',
- axisLabel: {
- show: true,
- interval: 'auto'
- },
- name: '%'
- },
- series: [
- {
- name: '鏃ユ暟鎹湪绾跨巼',
- type: 'line',
- data: dataOnline
- },
- {
- name: '鏃ユ暟鎹湁鏁堢巼',
- type: 'line',
- data: dataValid
- },
- {
- name: '鏃ユ暟鎹秴鏍囩巼',
- type: 'line',
- data: dataExceed
- },
+ },
- ]
- }
- }
+ // 浼佷笟寮傚父璇︽儏
+ exceptiondataCount() {
+ exceptionApi
+ .exceptiondata1({
+ siteName: this.form.name,
+ beginTime: this.form.beginTime,
+ endTime: this.form.endTime
+ })
+ .then((res) => {
+ // 鎵�鏈夊紓甯�
+ });
}
}
- }
-}
+};
</script>
<template>
<div class="search-container">
<el-container>
<el-main>
-
- <el-form :inline="true" :model="form" class="demo-form-inline">
+ <el-form :inline="true" :model="form">
<el-form-item>
- <AreaAndmonitorType ></AreaAndmonitorType>
- </el-form-item>
- <el-form-item >
- <InputSearch :isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)"></InputSearch>
+ <AreaAndmonitorType></AreaAndmonitorType>
</el-form-item>
<el-form-item>
- <TimeSelectWithShortCuts @submit-time="giveTime"></TimeSelectWithShortCuts>
+ <InputSearch
+ :isNeedDefaultSite="1"
+ @submit-value="(n) => (form.name = n)"
+ ></InputSearch>
+ </el-form-item>
+ <el-form-item>
+ <TimeSelectWithShortCuts
+ @submit-time="giveTime"
+ ></TimeSelectWithShortCuts>
</el-form-item>
<el-form-item>
- <el-button type="primary" @click="fetchData">灞曠ず鎶樼嚎鍥�</el-button>
+ <el-button type="primary" @click="fetch">灞曠ず鎶樼嚎鍥�</el-button>
</el-form-item>
- <div>
- <el-form-item>
- <el-radio-group v-model="radio" @change="setChart">
- <el-radio :label="1">棰楃矑鐗╂祿搴﹀钩鍧囧��</el-radio>
- <el-radio :label="2">鏁版嵁鍦ㄧ嚎/鏈夋晥/瓒呮爣鐜�</el-radio>
- </el-radio-group>
- </el-form-item>
- </div>
+ <!-- <div>
+ <el-form-item>
+ <el-radio-group v-model="radio" @change="setChart">
+ <el-radio :label="1">棰楃矑鐗╂祿搴﹀钩鍧囧��</el-radio>
+ <el-radio :label="2">鏁版嵁鍦ㄧ嚎/鏈夋晥/瓒呮爣鐜�</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ </div> -->
</el-form>
+ <div>鏁版嵁缁熻鏃舵锛氬疄闄呰幏鍙栨暟鎹殑鏃舵</div>
+ <el-card> 寮傚父鏁伴噺缁熻 </el-card>
+ <el-card> 瓒呮爣澶嶇幇鐜� </el-card>
<el-card>
<el-empty v-show="isNoData" :image-size="200" />
- <LineChart :chartData="option"> </LineChart>
+ <LineChart
+ title="鏃ュ潎鍊�"
+ :chartData="chartData1"
+ yName="娴撳害"
+ seriesName="鏃ュ潎鍊�"
+ >
+ </LineChart>
+ <LineChart
+ title="鏃ュ湪绾跨巼"
+ :chartData="chartData2"
+ yName="鐧惧垎姣�"
+ seriesName="鏃ュ湪绾跨巼"
+ >
+ </LineChart>
+ <LineChart
+ title="鏃ユ湁鏁堢巼"
+ :chartData="chartData3"
+ yName="鐧惧垎姣�"
+ seriesName="鏃ユ湁鏁堢巼"
+ >
+ </LineChart>
+ <LineChart
+ title="鏃ヨ秴鏍囩巼"
+ :chartData="chartData4"
+ yName="鐧惧垎姣�"
+ seriesName="鏃ヨ秴鏍囩巼"
+ >
+ </LineChart>
<DustRadarChart></DustRadarChart>
</el-card>
-
-
</el-main>
</el-container>
</div>
@@ -277,5 +241,4 @@
color: #333;
line-height: 60px;
}
-
</style>
--
Gitblit v1.9.3