From 71b1532d5a3609f3125e15fbe65e4b34bb6c4e8b Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 29 八月 2023 15:36:41 +0800
Subject: [PATCH] 数据风险模型模块修改
---
src/api/exceptionApi.js | 40 ++
src/sfc/DustExceptionText.vue | 30 -
components.d.ts | 42 ---
src/views/line_graph/dayMonthAvgData.vue | 323 ++++++++++------------
src/views/line_graph/components/Compont1.vue | 10
src/api/historyApi.js | 5
src/sfc/LineChart.vue | 216 ++++++++-------
src/main.ts | 2
src/api/index.js | 16 +
src/views/line_graph/components/Compont2.vue | 11
src/App.vue | 9
src/api/config.js | 82 +++++
src/components/layout/AppLayout.vue | 2
13 files changed, 443 insertions(+), 345 deletions(-)
diff --git a/components.d.ts b/components.d.ts
index 1e7e436..34308c9 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -12,27 +12,16 @@
AppLayout: typeof import('./src/components/layout/AppLayout.vue')['default']
ElAside: typeof import('element-plus/es')['ElAside']
ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
- ElAutoResizer: typeof import('element-plus/es')['ElAutoResizer']
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElButton: typeof import('element-plus/es')['ElButton']
- ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
ElCard: typeof import('element-plus/es')['ElCard']
- ElCascader: typeof import('element-plus/es')['ElCascader']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
- ElCion: typeof import('element-plus/es')['ElCion']
ElCol: typeof import('element-plus/es')['ElCol']
- ElCollapse: typeof import('element-plus/es')['ElCollapse']
- ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElContainer: typeof import('element-plus/es')['ElContainer']
- ElCountdown: typeof import('element-plus/es')['ElCountdown']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog']
- ElDivided: typeof import('element-plus/es')['ElDivided']
- ElDivider: typeof import('element-plus/es')['ElDivider']
- ElDivItem: typeof import('element-plus/es')['ElDivItem']
- ElDrawer: typeof import('element-plus/es')['ElDrawer']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@@ -46,34 +35,19 @@
ElMain: typeof import('element-plus/es')['ElMain']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
- ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
- ElPanel: typeof import('element-plus/es')['ElPanel']
- ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSpace: typeof import('element-plus/es')['ElSpace']
- ElStatistic: typeof import('element-plus/es')['ElStatistic']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
- ElSubMenuItem: typeof import('element-plus/es')['ElSubMenuItem']
- ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
- ElTableColum: typeof import('element-plus/es')['ElTableColum']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
- ElTableColumns: typeof import('element-plus/es')['ElTableColumns']
- ElTableV2: typeof import('element-plus/es')['ElTableV2']
ElTag: typeof import('element-plus/es')['ElTag']
ElText: typeof import('element-plus/es')['ElText']
- ElTimeline: typeof import('element-plus/es')['ElTimeline']
- ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
- ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
- ElTon: typeof import('element-plus/es')['ElTon']
- ElTooltip: typeof import('element-plus/es')['ElTooltip']
- HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
@@ -82,29 +56,13 @@
IEpArrowDown: typeof import('~icons/ep/arrow-down')['default']
IEpBell: typeof import('~icons/ep/bell')['default']
IEpDataLine: typeof import('~icons/ep/data-line')['default']
- IEpDownload: typeof import('~icons/ep/download')['default']
IEpExpand: typeof import('~icons/ep/expand')['default']
IEpFold: typeof import('~icons/ep/fold')['default']
- IEpGrid: typeof import('~icons/ep/grid')['default']
IEpHistogram: typeof import('~icons/ep/histogram')['default']
- IEpInfoFilled: typeof import('~icons/ep/info-filled')['default']
- IEpList: typeof import('~icons/ep/list')['default']
- IEpLock: typeof import('~icons/ep/lock')['default']
IEpMonitor: typeof import('~icons/ep/monitor')['default']
- IEpNotebook: typeof import('~icons/ep/notebook')['default']
- IEpSearch: typeof import('~icons/ep/search')['default']
- IEpSeting: typeof import('~icons/ep/seting')['default']
- IEpSetting: typeof import('~icons/ep/setting')['default']
- IEpShop: typeof import('~icons/ep/shop')['default']
IEpStopwatch: typeof import('~icons/ep/stopwatch')['default']
- IEpSunrise: typeof import('~icons/ep/sunrise')['default']
- IEpSunset: typeof import('~icons/ep/sunset')['default']
- IEpTrendCharts: typeof import('~icons/ep/trend-charts')['default']
- IEpUser: typeof import('~icons/ep/user')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
- TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
- WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
}
export interface ComponentCustomProperties {
vLoading: typeof import('element-plus/es')['ElLoadingDirective']
diff --git a/src/App.vue b/src/App.vue
index ac0d733..a7dc922 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,12 @@
-<script setup lang="ts">
-import { RouterView } from 'vue-router'
+<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
-
+const locale = ref(zhCn);
</script>
<template>
- <el-config-provider :locale="zhCn">
- <RouterView />
+ <el-config-provider :locale="locale">
+ <router-view />
</el-config-provider>
</template>
diff --git a/src/api/config.js b/src/api/config.js
new file mode 100644
index 0000000..c322f3f
--- /dev/null
+++ b/src/api/config.js
@@ -0,0 +1,82 @@
+import { ElMessage } from 'element-plus';
+
+/**
+ * 璁剧疆缃戣矾璇锋眰鐩戝惉
+ */
+function setInterceptors(...instance) {
+ instance.forEach((i) => {
+ // 娣诲姞璇锋眰鎷︽埅鍣�
+ i.interceptors.request.use(
+ function (config) {
+ // 鍦ㄥ彂閫佽姹備箣鍓�, 娣诲姞璇锋眰澶�
+ // config.headers = addHeaders(config.headers);
+
+ console.log('==>璇锋眰寮�濮�');
+ console.log(`${config.baseURL}${config.url}`);
+ if (config.data) {
+ console.log('==>璇锋眰鏁版嵁', config.data);
+ }
+ return config;
+ },
+ function (error) {
+ // 瀵硅姹傞敊璇仛浜涗粈涔�
+ console.log('==>璇锋眰寮�濮�');
+ console.log(error);
+ ElMessage({
+ message: error,
+ type: 'error'
+ });
+ return Promise.reject(error);
+ }
+ );
+
+ // 娣诲姞鍝嶅簲鎷︽埅鍣�
+ i.interceptors.response.use(
+ function (response) {
+ // 2xx 鑼冨洿鍐呯殑鐘舵�佺爜閮戒細瑙﹀彂璇ュ嚱鏁般��
+ // 瀵瑰搷搴旀暟鎹仛鐐逛粈涔�
+ console.log(response);
+ console.log('==>璇锋眰缁撴潫');
+ if (response.status == 200) {
+ if (
+ response.data.success != undefined &&
+ response.data.success != null
+ ) {
+ if (response.data.success == true) {
+ // if (response.data.message && response.data.message != '') {
+ // ElMessage({
+ // message: response.data.message,
+ // type: 'success'
+ // });
+ // }
+ return response.data.data;
+ } else {
+ ElMessage({
+ message: response.data.message,
+ type: 'error'
+ });
+ return Promise.reject(response.data.message);
+ }
+ } else {
+ return response;
+ }
+ } else {
+ return Promise.reject(response);
+ }
+ },
+ function (error) {
+ // 瓒呭嚭 2xx 鑼冨洿鐨勭姸鎬佺爜閮戒細瑙﹀彂璇ュ嚱鏁般��
+ // 瀵瑰搷搴旈敊璇仛鐐逛粈涔�
+ console.log(error);
+ console.log('==>璇锋眰缁撴潫');
+ ElMessage({
+ message: error,
+ type: 'error'
+ });
+ return Promise.reject(error);
+ }
+ );
+ });
+}
+
+export { setInterceptors };
diff --git a/src/api/exceptionApi.js b/src/api/exceptionApi.js
new file mode 100644
index 0000000..e061235
--- /dev/null
+++ b/src/api/exceptionApi.js
@@ -0,0 +1,40 @@
+import { $http } from './index';
+
+export default {
+ /**
+ *
+ * @param {*} siteName
+ * @param {*} beginTime
+ * @param {*} endTime
+ * @returns
+ */
+ analysisdata(siteName, beginTime, endTime) {
+ return $http.get('/dust/analysisdata', {
+ params: {
+ siteName: siteName,
+ beginTime: beginTime,
+ endTime: endTime
+ }
+ });
+ },
+
+ /**
+ *
+ * @param {*} siteName
+ * @param {*} exceptionType
+ * @param {*} beginTime
+ * @param {*} endTime
+ * @returns
+ */
+ exceptiondata1({ siteName, exceptionType, beginTime, endTime }) {
+ const _params = {
+ siteName: siteName,
+ beginTime: beginTime,
+ endTime: endTime
+ };
+ if (exceptionType) {
+ _params.exceptionType = exceptionType;
+ }
+ return $http.get('/dust/exceptiondata1', { params: _params });
+ }
+};
diff --git a/src/api/historyApi.js b/src/api/historyApi.js
new file mode 100644
index 0000000..30b5bc3
--- /dev/null
+++ b/src/api/historyApi.js
@@ -0,0 +1,5 @@
+import { $http } from './index';
+
+export default {
+
+};
diff --git a/src/api/index.js b/src/api/index.js
new file mode 100644
index 0000000..81af872
--- /dev/null
+++ b/src/api/index.js
@@ -0,0 +1,16 @@
+import axios from 'axios';
+import { setInterceptors } from './config';
+
+// const url = 'http://47.100.191.150:9031/';
+const url = 'http://192.168.1.4:8081/';
+
+//椋炵窘鐩戠
+const $http = axios.create({
+ baseURL: url,
+ timeout: 10000
+});
+
+//娣诲姞鎷︽埅鍣�
+setInterceptors($http);
+
+export { $http };
diff --git a/src/components/layout/AppLayout.vue b/src/components/layout/AppLayout.vue
index a18bca2..4c2e72a 100644
--- a/src/components/layout/AppLayout.vue
+++ b/src/components/layout/AppLayout.vue
@@ -39,7 +39,7 @@
.el-main {
background-color: #f4f4f5;
padding: 0;
- overflow-y: hidden;
+ // overflow-y: hidden;
}
</style>
diff --git a/src/main.ts b/src/main.ts
index 65c587c..3cdc444 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,7 +14,7 @@
const app = createApp(App)
-axios.defaults.baseURL = 'http://localhost:8081'
+axios.defaults.baseURL = 'http://192.168.1.4:8081'
app.config.globalProperties.$http = axios
app.use(createPinia())
diff --git a/src/sfc/DustExceptionText.vue b/src/sfc/DustExceptionText.vue
index a1e66ca..67cd5f8 100644
--- a/src/sfc/DustExceptionText.vue
+++ b/src/sfc/DustExceptionText.vue
@@ -4,12 +4,13 @@
灏嗚绔欑偣鏌愭椂娈电殑寮傚父鏁版嵁杩斿洖缁欑埗缁勪欢锛岀埗缁勪欢鍐嶈繑鍥炵粰绁栧厛缁勪欢
-->
<script>
+import exceptionApi from '@/api/exceptionApi.js';
export default {
props: {
- siteName:String,
- exceptionType:String,
- beginTime:String,
- endTime:String,
+ siteName: String,
+ exceptionType: String,
+ beginTime: String,
+ endTime: String
},
emits: ['submitExceptionData'],
data() {
@@ -22,21 +23,16 @@
methods: {
requestExceptionData() {
// 涓嶅垎椤�
- this.$http
- .get('/dust/exceptiondata1', {
- params: {
- siteName: this.siteName,
- exceptionType: this.exceptionType,
- beginTime: this.beginTime,
- endTime: this.endTime
- }
- })
+ exceptionApi
+ .exceptiondata1(
+ this.siteName,
+ this.exceptionType,
+ this.beginTime,
+ this.endTime
+ )
.then((result) => {
//灏嗚繑鍥炵殑缁撴灉浼犻�掔粰鐖剁粍浠�
- this.$emit(
- 'submitExceptionData',
- result.data.data
- );
+ this.$emit('submitExceptionData', result.data.data);
});
}
}
diff --git a/src/sfc/LineChart.vue b/src/sfc/LineChart.vue
index 21be7dc..38fd58f 100644
--- a/src/sfc/LineChart.vue
+++ b/src/sfc/LineChart.vue
@@ -2,108 +2,126 @@
瀛愮粍浠舵湁鍩烘湰鐨勬牱寮�
浣跨敤鍚屼竴涓浘褰㈠疄渚嬶紝鎺ュ彈鐖剁粍浠朵紶鍏ョ殑鎶樼嚎鍥緊ption
-->
- <template>
- <div ref="chart" class="line-chart"></div>
+<template>
+ <div ref="chart" class="line-chart"></div>
</template>
-
+
<script>
- import * as echarts from 'echarts';
-
- export default {
- props: {
- chartData: {
- type: Object,
- required: true,
- }
- },
- data() {
- return {
- chart: null
- };
- },
- mounted() {
- this.renderChart();
- // this.chart.setOption(this.chartData)
- window.addEventListener('resize',this.resizeChart)
- },
- watch: {
- chartData() {
- // option鍙樺寲鏃讹紝鍥惧舰鍐嶆鍒濆鍖�
- // this.renderChart();
- this.chart.dispose();
- this.renderChart();
- this.chart.setOption(this.chartData)
- }
-
- },
- beforeUnmount() {
- if (this.chart) {
- this.chart.dispose();
- }
- },
- methods: {
- renderChart() {
- // 鍒涘缓echarts瀹炰緥
- this.chart = echarts.init(this.$refs.chart);
-
- // 瀹氫箟鍥捐〃鐨勯厤缃」鍜屾暟鎹�
- const option = {
- title: {
- // text: '寮傛鏁版嵁鍔犺浇绀轰緥'
- },
- tooltip: {},
-
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- dataZoom: {
- // 鍖哄煙缂╂斁
- yAxisIndex: 'none'
- },
-
- // 淇濆瓨涓哄浘鐗�
- saveAsImage: {}
- }
- },
- xAxis: {
- name: '鏃堕棿',
- data: []
- },
- yAxis: {
- type: 'value',
- axisLabel: {
- show: true,
- interval: 'auto'
- },
- name: '鐧惧垎姣�'
- },
- series: [
- {
- name: 'fume',
- type: 'line',
- data: []
- }
- ]
+import * as _echarts from 'echarts';
+
+export default {
+ props: {
+ chartData: {
+ type: Object,
+ required: true,
+ default: () => {
+ return {
+ x: [],
+ y: []
};
-
- // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃
- this.chart.setOption(option, true);
- },
-
- // 璺熼〉闈㈠搷搴斿紡鍙樺寲
- resizeChart(){
- this.chart.resize()
}
+ },
+ title: {
+ type: String
+ },
+ xName: {
+ type: String,
+ default: '鏃堕棿'
+ },
+ yName: {
+ type: String,
+ default: '鐧惧垎姣�'
+ },
+ seriesName: {
+ type: String,
+ default: '绯诲垪涓�'
}
- };
- </script>
-
- <style>
- .line-chart {
- width: 100%;
- height: 500px;
- margin-top: 25px;
+ },
+ data() {
+ return {
+ chart: null
+ };
+ },
+ mounted() {
+ this.intiChart();
+ // this.chart.setOption(this.chartData)
+ window.addEventListener('resize', this.resizeChart);
+ },
+ watch: {
+ chartData() {
+ // option鍙樺寲鏃讹紝鍥惧舰鍐嶆鍒濆鍖�
+ this.setOption();
+ }
+ },
+ beforeUnmount() {
+ if (this.chart) {
+ this.chart.dispose();
+ }
+ },
+ methods: {
+ intiChart() {
+ // 鍒涘缓echarts瀹炰緥
+ this.chart = _echarts.init(this.$refs.chart);
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃
+ // this.chart.setOption(option, true);
+ },
+
+ setOption() {
+ // 瀹氫箟鍥捐〃鐨勯厤缃」鍜屾暟鎹�
+ const option = {
+ title: {
+ text: this.title
+ },
+ tooltip: {},
+
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ dataZoom: {
+ // 鍖哄煙缂╂斁
+ yAxisIndex: 'none'
+ },
+
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ name: this.xName,
+ data: this.chartData.x
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ show: true,
+ interval: 'auto'
+ },
+ name: this.yName
+ },
+ series: [
+ {
+ name: this.seriesName,
+ type: 'line',
+ data: this.chartData.y
+ }
+ ]
+ };
+ this.chart.setOption(option);
+ },
+
+ // 璺熼〉闈㈠搷搴斿紡鍙樺寲
+ resizeChart() {
+ this.chart.resize();
+ }
}
-
- </style>
-
\ No newline at end of file
+};
+</script>
+
+<style>
+.line-chart {
+ width: 100%;
+ height: 500px;
+ margin-top: 25px;
+}
+</style>
diff --git a/src/views/line_graph/components/Compont1.vue b/src/views/line_graph/components/Compont1.vue
new file mode 100644
index 0000000..1d29a91
--- /dev/null
+++ b/src/views/line_graph/components/Compont1.vue
@@ -0,0 +1,10 @@
+<template>
+ <div>HomePage</div>
+</template>
+
+<script>
+// 寮傚父澶嶇幇鐜�
+export default {
+
+};
+</script>
diff --git a/src/views/line_graph/components/Compont2.vue b/src/views/line_graph/components/Compont2.vue
new file mode 100644
index 0000000..bd4c4d9
--- /dev/null
+++ b/src/views/line_graph/components/Compont2.vue
@@ -0,0 +1,11 @@
+<template>
+ <el-radio-group v-model="radio" @change="setChart">
+ <!-- 寮傚父绫诲瀷 -->
+ </el-radio-group>
+ <el-table></el-table>
+</template>
+
+<script>
+// 鍚屾椂娈靛悓绫诲紓甯稿鐜版儏鍐�
+export default {};
+</script>
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