From 2fd7b502110d916d7bc43ab1e88f6586fa2cd3c3 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期五, 03 十一月 2023 11:27:21 +0800
Subject: [PATCH] 修改风险模型页面 排名清单卡片高度
---
src/views/line_graph/DataRiskModel.vue | 669 ++++++++++++++++++++++++++++---------------------------
1 files changed, 342 insertions(+), 327 deletions(-)
diff --git a/src/views/line_graph/DataRiskModel.vue b/src/views/line_graph/DataRiskModel.vue
index 91100fb..c1207bf 100644
--- a/src/views/line_graph/DataRiskModel.vue
+++ b/src/views/line_graph/DataRiskModel.vue
@@ -1,23 +1,18 @@
<!-- 鏃ュ潎鍊� -->
<script>
-// import DateSelectWithShortCuts from '@/sfc/DateSelectWithShortCuts.vue'
import InputSearch from '@/sfc/InputSearch.vue'
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
-
import DustRadarChart from './components/DustRadarChart.vue'
import exceptionApi from '@/api/exceptionApi.js'
-
import LineChart from './components/LineChart.vue'
import index from '@/utils/risk_estimate_common_function/index.js'
import ButtonClick from '@/sfc/ButtonClick.vue'
import dayjs from 'dayjs'
-import rank from '@/utils/risk_estimate_common_function/rank.js'
-import MonthSelect from '@/sfc/MonthSelect.vue';
+import MonthSelect from '@/sfc/MonthSelect.vue'
export default {
components: {
LineChart,
- // DateSelectWithShortCuts,
InputSearch,
AreaAndmonitorType,
DustRadarChart,
@@ -28,13 +23,13 @@
return {
isNoData: false,
loading: false,
- screenLoading:false,
+ screenLoading: false,
+ parentDataFlag:false,
chartData: [],
chartData1: {}, //淇濆瓨鏌ヨ鐨勭粨鏋�
chartData2: {},
chartData3: {},
chartData4: {},
- //devId:'', //璁惧缂栧彿
begin: '', //寮�濮嬫椂闂�
end: '', //缁撴潫鏃堕棿
@@ -43,13 +38,14 @@
name: '',
// 璁惧缂栧彿
number: '',
-
- month:'',
// 寮�濮嬫椂闂�
beginTime: '',
// 缁撴潫鏃堕棿
endTime: ''
},
+ month: '',
+ // 浼犻�掔粰鏈堜唤缁勪欢鐨勫��
+ sfc_month: '',
// 鎶樼嚎鍥鹃厤缃」
option: {},
// 鏁版嵁娓呭崟
@@ -73,105 +69,128 @@
queryButton: false,
// 椋庨櫓鍊兼帓鍚嶅墠鍗佺殑绔欑偣
- top_10_sites_with_risk_values:[
- {name:'閲戝北鍖洪噾灞辨柊鍩嶫SC1-0401鍗曞厓1-11-01鍦板潡椤圭洰09',
- riskValue:0.2
- }
- ]
+ top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }],
+ // 椋庨櫓鍊�
+ weight: ''
}
},
-
- watch:{
- },
- computed: {
- weight() {
- let singleOnline = ((100 - this.bill.online) / 100) * 0.1
- let singleValid = ((100 - this.bill.valid) / 100) * 0.2
- let singleExceeding = (this.bill.exceeding / 100) * 0.2
- let singleAggregation = this.bill.exceptionTypeAggregation * 0.2
- let singleRecurrence = this.bill.exceptionRecurrence * 0.3
- let allWeight = (
- singleOnline +
- singleValid +
- singleExceeding +
- singleAggregation +
- singleRecurrence
- ).toFixed(2)
-
- return allWeight
+ watch: {
+ sName() {
+ // 褰撳埆鐨勯〉闈㈣皟鐢ㄦ椂
+ if (this.sName != ''|| this.month_1 != '') {
+ // 鏇存柊绔欑偣鍚嶅瓧鍜屾椂闂�
+ this.form.name = this.sName
+ this.month = this.month_1
+ this.parentDataFlag = true
+ // 鏇存柊鎺掓竻鍗�
+ this.getRiskRank()
+ // 鏇存柊缁熻鏁版嵁
+ this.getAnalysisData()
+ // 璁＄畻椋庨櫓鍊�
+ this.calRiskValue()
+ }
}
},
+
mounted() {
- // 椤甸潰鍔犺浇鏄剧ず椋庨櫓鏈�楂樼殑绔欑偣
- // this.getRiskWeightName()
-
- this.fetch()
- // 璁＄畻椋庨櫓鎺掑悕娓呭崟
- this.getRiskRank()
+ // // 鍔犺浇椋庨櫓鍊兼渶楂樼殑绔欑偣鏁版嵁
+ this.ShowDefaultData()
},
+
methods: {
-
// 鏌ヨ绔欑偣缁熻淇℃伅
- querySiteStaticsInfo(row){
+ querySiteStaticsInfo(row) {
this.form.name = row.siteName
- this.riskDetails()
+ // 鏇存柊缁熻鏁版嵁
+ this.getAnalysisData()
+ // 璁＄畻椋庨櫓鍊�
+ this.calRiskValue()
},
- async getRiskWeightName() {
- this.screenLoading = true
- this.form.name = await rank.fetchData(this.form.beginTime, this.form.endTime);
-
- // 鍔犺浇璇ラ闄╂竻鍗�
- this.fetch()
- this.screenLoading = false
- },
-
- giveMonth(val){
+ // 鏍煎紡鍖栨湀浠�
+ 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);
-
- },
+ this.month = dayjs(val).format('YYYY-MM-DD')
+ // 鍚屾椂鏇存柊寮�濮嬪拰缁撴潫鏃堕棿
+ this.form.beginTime = dayjs(this.month).startOf().format('YYYY-MM-DD HH:mm:ss')
+ this.form.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss')
+ },
/**
- * 灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�
+ * 椋庨櫓璇勪及鎸夐挳
* @param锛�
* @returns锛�
*/
- giveTime(val) {
- //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
- this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD')
- this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD')
- },
- /**
- * 鍒濆鍔犺浇鍑芥暟
- * @param锛�
- * @returns锛�
- */
- fetch() {
- // 璁＄畻椋庨櫓鎺掑悕娓呭崟,鑾峰彇椋庨櫓鏈�楂樼殑绔欑偣鍚嶅瓧
+ riskAssessment() {
+ // 鏇存柊鎺掑悕娓呭崟
this.getRiskRank()
-
- // 鍒嗘瀽鏁版嵁
- this.fetchData()
- // 寮傚父鏁版嵁
- this.exceptiondataCount()
-
-
- },
- riskDetails() {
- // 鍒嗘瀽鏁版嵁
- this.fetchData()
- // 寮傚父鏁版嵁
- this.exceptiondataCount()
+ // 鏇存柊鍒嗘瀽鏁版嵁
+ this.getAnalysisData()
+ // 璁＄畻椋庨櫓鍊�
+ this.calRiskValue()
},
- // 鐐瑰嚮灞曠ず鎸夐挳
- fetchData() {
+ // 鏇存柊鍒嗘瀽鏁版嵁
+ getAnalysisData() {
+ // 鏃ョ粺璁℃暟鎹�
+ this.fetchDayAnalysisData()
+ // 寮傚父鏁版嵁
+ this.fetchExceptionAnalysisData()
+ },
+
+ findObjectByPropertyValue(array, property, value) {
+ return array.find((obj) => obj[property] === value)
+ },
+
+ // 姝ら〉闈㈡墦寮�鏃�
+ ShowDefaultData() {
+ // 榛樿鍔犺浇灞曠ず鐨勫唴瀹�
+ this.updateOriginPage()
+ },
+
+ // 鍔犺浇榛樿灞曠ず鐨勫唴瀹�
+ async updateOriginPage() {
+ this.screenLoading = true
+ // 鏇存柊鎺掑悕娓呭崟锛屽苟寰楀埌椋庨櫓鍊兼渶楂樼珯鐐�
+ this.form.name = await this.getRiskRank()
+ this.screenLoading = false
+ // 鏇存柊鏃ョ粺璁℃暟鎹�
+ this.getAnalysisData()
+ // 璁＄畻椋庨櫓鍊�
+ this.calRiskValue()
+ },
+
+ // 璁＄畻椋庨櫓鍊�
+ calRiskValue() {
+ exceptionApi.analysisdataByType(this.month, 'month').then((response) => {
+ const chartData = response.data.data
+
+ if (response.data.data.length == 0) {
+ return
+ }
+ // 浠庡璞℃暟缁勬壘鍒拌绔欑偣鎵�鍦ㄧ殑鍏冪礌
+ let siteItem = this.findObjectByPropertyValue(chartData, 'name', this.form.name)
+ if (Object.keys(siteItem).length === 0) {
+ return
+ }
+ let arr = []
+ arr.push(siteItem)
+ exceptionApi
+ .exceptiondata1({
+ siteName: this.form.name,
+ beginTime: this.form.beginTime,
+ endTime: this.form.endTime
+ })
+ .then((res) => {
+ let table = index.merge(arr, res.data.data, this.form.beginTime, this.form.endTime)
+ this.weight = table[0].riskValue
+ })
+ })
+ },
+
+ // 鏍规嵁鐩墠绔欑偣锛屾湀浠斤紝鏌ユ姌绾垮浘鏃ョ粺璁℃暟鎹�
+ fetchDayAnalysisData() {
let params = {}
if (this.form.name) {
params['siteName'] = this.form.name
@@ -185,7 +204,7 @@
this.loading = true
this.queryButton = true
exceptionApi
- .analysisdata(this.form.name, this.form.beginTime, this.form.endTime,'day')
+ .analysisdata(this.form.name, this.form.beginTime, this.form.endTime, 'day')
.then((response) => {
this.chartData = response.data.data
this.loading = false
@@ -194,11 +213,14 @@
this.isNoData = true
return
}
+ this.begin = this.chartData[0].lst
+ this.end = this.chartData[this.chartData.length - 1].lst
+
// 绉婚櫎绌烘暟鎹姸鎬�
this.isNoData = false
this.setChart()
-
- let temp = index.calBillData(this.chartData, this.form.beginTime, this.form.endTime)
+ // 鎶樼嚎鍥炬暟鎹�
+ let temp = index.calBillData(this.chartData, this.begin, this.end)
this.bill.min = temp['min']
this.bill.max = temp['max']
@@ -206,12 +228,23 @@
this.bill.online = temp['online']
this.bill.valid = temp['valid']
this.bill.exceeding = temp['exceeding']
-
- this.begin = this.chartData[0].lst
- this.end = this.chartData[this.chartData.length - 1].lst
})
},
-
+ // 浼佷笟寮傚父缁熻鏁版嵁
+ fetchExceptionAnalysisData() {
+ exceptionApi
+ .exceptiondata1({
+ siteName: this.form.name,
+ beginTime: this.form.beginTime,
+ endTime: this.form.endTime
+ })
+ .then((res) => {
+ let obj = index.calRecur(res.data.data)
+ this.bill.exceptionRecurrence = obj['exceptionRecurrence']
+ this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation']
+ })
+ },
+
// 閫夋嫨鍏朵粬鍊肩被鍨嬫椂
setChart() {
if (this.chartData.length) {
@@ -251,70 +284,46 @@
}
},
- // 浼佷笟寮傚父璇︽儏
- exceptiondataCount() {
- exceptionApi
- .exceptiondata1({
- siteName: this.form.name,
- beginTime: this.form.beginTime,
- endTime: this.form.endTime
+ // 寰楀埌鍓�10椋庨櫓鎺掑悕娓呭崟
+ async getRiskRank() {
+ let staticsData = await exceptionApi.analysisdataByType(this.month, 'month')
+
+ let exceptionData = await exceptionApi.exceptiondata1({
+ siteName: '',
+ beginTime: this.form.beginTime,
+ endTime: this.form.endTime
+ })
+
+ const riskValueSites = index.merge(
+ staticsData.data.data,
+ exceptionData.data.data,
+ this.form.beginTime,
+ this.form.endTime
+ )
+ this.top_10_sites_with_risk_values = this.getTopRiskData(riskValueSites, 10)
+ if (this.top_10_sites_with_risk_values.length != 0) {
+ // 琛ㄦ牸鎸夐闄╁�煎�掑彊鎺掑垪
+ this.$nextTick(() => {
+ this.$refs.table.sort('riskValue', 'descending')
})
- .then((res) => {
- let obj = index.calRecur(res.data.data)
- this.bill.exceptionRecurrence = obj['exceptionRecurrence']
- this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation']
- })
+ // Promise
+ return this.top_10_sites_with_risk_values[0].siteName
+ }
},
- // 鐐瑰嚮椋庨櫓鎺掑悕鎸夐挳
- getRiskRank() {
- exceptionApi
- .analysisdataByType(this.form.month, 'month')
- .then((response) => {
- let staticsData = response.data.data
-
- exceptionApi
- .exceptiondata1({
- siteName: this.form.name,
- beginTime: this.form.beginTime,
- endTime: this.form.endTime
- })
- .then((res) => {
- const riskValueSite = index.merge(
- staticsData,
- res.data.data,
- this.form.beginTime,
- this.form.endTime
- )
- // 鑾峰彇鎺掑悕鍓�10鐨勯闄╁�肩珯鐐�
-
- this.top_10_sites_with_risk_values = this.getTopriskData(riskValueSite,10)
- this.form.name = this.top_10_sites_with_risk_values[0].siteName
-
- this.$nextTick(()=>{
- this.$refs.table.sort('riskValue','descending')
- console.log('琛ㄦ牸鏁版嵁涓猴細',this.top_10_sites_with_risk_values);
- })
-
- })
-
- })
- },
-/**
- * 闄嶅簭鎺掑垪锛岃繑鍥為檷搴忓墠num鐨勫厓绱�
- * @param锛� 瀵硅薄鏁扮粍锛岃繑鍥炵殑鏁伴噺
- */
-getTopriskData(arr,num) {
- // 鎸夌収riskValue闄嶅簭鎺掑垪
- arr.sort((a, b) => b.riskValue - a.riskValue);
- // 鑾峰彇鍓峮um涓厓绱�
- return arr.slice(0,num);
- }
-
+ /**
+ * 闄嶅簭鎺掑垪锛岃繑鍥為檷搴忓墠num鐨勫厓绱�
+ * @param锛� 瀵硅薄鏁扮粍锛岃繑鍥炵殑鏁伴噺
+ */
+ getTopRiskData(arr, num) {
+ // 鎸夌収riskValue闄嶅簭鎺掑垪
+ arr.sort((a, b) => b.riskValue - a.riskValue)
+ // 鑾峰彇鍓峮um涓厓绱�
+ return arr.slice(0, num)
+ }
}
}
</script>
-
<template>
<el-form :inline="true" :model="form">
@@ -322,197 +331,195 @@
<AreaAndmonitorType></AreaAndmonitorType>
</el-form-item>
<el-form-item class="form-item">
- <!-- <InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" :siteName="form.name"></InputSearch> -->
- <InputSearch :site-name="form.name" isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" ></InputSearch>
+ <InputSearch
+ :site-name="form.name"
+ isNeedDefaultSite="0"
+ @submit-value="(n) => (form.name = n)"
+ ></InputSearch>
</el-form-item>
- <!-- <el-form-item>
- <DateSelectWithShortCuts @submit-time="giveTime"></DateSelectWithShortCuts>
- </el-form-item> -->
+
<el-form-item>
- <MonthSelect @submit-value="giveMonth"></MonthSelect>
+ <MonthSelect :month="this.month_1" @submit-value="giveMonth"></MonthSelect>
</el-form-item>
-
<el-form-item>
<ButtonClick
content="椋庨櫓璇勪及"
type="primary"
:loading="queryButton"
- @do-search="fetch"
+ @do-search="riskAssessment"
></ButtonClick>
</el-form-item>
</el-form>
- <div v-loading="screenLoading" class="wait-name">
- <div class="chart-container" v-show="!isNoData && !screenLoading " >
- <div class="time-text">鏁版嵁缁熻鏃舵锛歿{ begin }} ~ {{ end }}</div>
- <el-row :gutter="10">
- <el-col :span="5">
- <div class="table-class">
- <el-table
- ref="table"
- highlight-current-row="true"
- :data="top_10_sites_with_risk_values"
- :default-sort="{ prop: 'riskValue', order: 'descending' }"
- height="540">
- <el-table-column
- type="index"
- label="搴忓彿"
- :index="indexMethod"
- fixed
- show-overflow-tooltip
- />
- <el-table-column
- prop="siteName"
- label="绔欑偣鍚嶇О"
- show-overflow-tooltip
- />
- <el-table-column
- prop="riskValue"
- label="椋庨櫓鍊�"
- sortable
- width="70"
- show-overflow-tooltip
- />
- <el-table-column label="鎿嶄綔" align="center">
- <template #default="{ row }">
- <el-button type="primary" text class="table-button" @click="querySiteStaticsInfo(row)"
- >椋庨櫓璇︽儏</el-button
- >
- </template>
- </el-table-column>
- </el-table>
+ <div v-loading="screenLoading" class="wait-name">
+ <div class="chart-container" v-show="!isNoData && !screenLoading">
+ <div class="time-text">
+ <span>鏁版嵁缁熻鏃舵锛歿{ begin }} ~ {{ end }}</span>
+ <span class="site-name">{{ form.name }}</span>
</div>
-
- </el-col>
-
- <el-col :span="12">
- <el-card shadow="never">
- <DustRadarChart
- :name="[
- '鏁版嵁鏈夋晥椋庨櫓',
- '鍏稿瀷寮傚父澶嶇幇椋庨櫓',
- '寮傚父绫诲瀷鑱氶泦椋庨櫓',
- '鏁版嵁瓒呮爣椋庨櫓',
- '鏁版嵁鍦ㄧ嚎椋庨櫓'
- ]"
- :yData="[
- bill.valid,
- bill.exceptionRecurrence,
- bill.exceptionTypeAggregation,
- bill.exceeding,
- bill.online
- ]"
- ></DustRadarChart>
- </el-card>
- </el-col>
-
- <el-col :span="3">
- <el-card shadow="never" class="card-height">
- <template #header>
- <h1
- :class="{
- 'weightColor-low': weight < 0.2,
- 'weightColor-medium': weight >= 0.2 && weight < 0.6,
- 'weightColor-heigh': weight >= 0.6
- }"
+ <el-row :gutter="10">
+ <el-col :span="5">
+ <el-card shadow="never" class="table-class">
+ <el-table
+ ref="table"
+ highlight-current-row="true"
+ :data="top_10_sites_with_risk_values"
+ :default-sort="{ prop: 'riskValue', order: 'descending' }"
+ height="540"
>
- 椋庨櫓鍊�(0~1)锛歿{ weight }}
- </h1>
- </template>
- <div class="risk-grade">
- <strong>椋庨櫓绛夌骇锛�</strong>
- <span v-if="weight >= 0.6"> 楂橀闄�</span>
- <span v-else-if="weight >= 0.2 && weight < 0.6"> 涓闄�</span>
- <span v-else> 浣庨闄�</span>
- </div>
-
- <div class="risk-advice">
- <strong>绠℃帶寤鸿锛�</strong>
- <span v-if="weight >= 0.6"> 寤鸿瀵硅绔欑偣杩涜绾夸笅鎵ф硶妫�鏌ワ紝涓撻」鏁版嵁瀵规瘮</span>
- <span v-else-if="weight >= 0.2 && weight < 0.6"> 寤鸿寮�灞曞父鎬佽拷韪垎鏋�</span>
- <span v-else> 寤鸿寮曞浼佷笟闀挎�佷繚鎸�</span>
- </div>
- <div class="grade-instance">
- <div class="container">
- <div class="block-color heigh"></div>
- <div>楂橀闄�(鈮�0.6)</div>
- </div>
- <div class="container">
- <div class="block-color medium"></div>
- <div>涓闄�(0.2~0.6)</div>
- </div>
- <div class="container">
- <div class="block-color low"></div>
- <div>浣庨闄�(锛�0.2)</div>
- </div>
- </div>
- </el-card>
- </el-col>
-
- <el-col :span="4">
- <el-card shadow="never" class="card-height">
- <template #header><span class="title-16">椋庨櫓璇︽儏</span></template>
-
- <el-form>
- <el-form-item label="鏈�澶у�硷細"> {{ bill.max }} mg/m鲁 </el-form-item>
- <el-form-item label="鏈�灏忓�硷細"> {{ bill.min }} mg/m鲁 </el-form-item>
- <el-form-item label="鏁版嵁鏈夋晥鐜囷細"> {{ bill.online }}% </el-form-item>
- <el-form-item label="鏁版嵁鍦ㄧ嚎鐜囷細"> {{ bill.valid }}% </el-form-item>
- <el-form-item label="鏁版嵁瓒呮爣鐜囷細"> {{ bill.exceeding }}% </el-form-item>
- <el-form-item label="寮傚父绫诲瀷鑱氶泦搴︼細">
- {{ bill.exceptionTypeAggregation * 100 }}%
- </el-form-item>
- <el-form-item label="鍏稿瀷寮傚父澶嶇幇鐜囷細">
- {{ bill.exceptionRecurrence * 100 }}%
- </el-form-item>
- </el-form>
- </el-card>
- </el-col>
- </el-row>
-
-
-
- <el-row :gutter="20">
- <el-col :span="12">
- <el-card shadow="never" class="card-value">
- <LineChart title="鏃ュ潎鍊�" :chartData="chartData1" yName="mg/m鲁" seriesName="鏃ュ潎鍊�">
- </LineChart>
- </el-card>
- </el-col>
-
- <el-col :span="12">
- <el-card shadow="never" class="card-value">
- <LineChart title="鏃ュ湪绾跨巼" :chartData="chartData2" yName="%" seriesName="鏃ュ湪绾跨巼">
- </LineChart>
- </el-card>
+ <el-table-column
+ type="index"
+ label="搴忓彿"
+ :index="indexMethod"
+ fixed
+ width="25"
+ show-overflow-tooltip
+ />
+ <el-table-column prop="siteName" label="绔欑偣鍚嶇О" show-overflow-tooltip />
+ <el-table-column
+ prop="riskValue"
+ label="椋庨櫓鍊�"
+ sortable
+ width="67"
+ show-overflow-tooltip
+ />
+ <el-table-column label="鎿嶄綔" align="center">
+ <template #default="{ row }">
+ <el-button
+ type="primary"
+ text
+ class="table-button"
+ @click="querySiteStaticsInfo(row)"
+ >椋庨櫓璇︽儏</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-card>
</el-col>
+ <el-col :span="12">
+ <el-card shadow="never" class="table-class">
+ <DustRadarChart
+ :name="[
+ '鏁版嵁鏈夋晥椋庨櫓',
+ '鍏稿瀷寮傚父澶嶇幇椋庨櫓',
+ '寮傚父绫诲瀷鑱氶泦椋庨櫓',
+ '鏁版嵁瓒呮爣椋庨櫓',
+ '鏁版嵁鍦ㄧ嚎椋庨櫓'
+ ]"
+ :yData="[
+ bill.valid,
+ bill.exceptionRecurrence,
+ bill.exceptionTypeAggregation,
+ bill.exceeding,
+ bill.online
+ ]"
+ ></DustRadarChart>
+ </el-card>
+ </el-col>
+ <el-col :span="3">
+ <el-card shadow="never" class="card-height">
+ <template #header>
+ <h1
+ :class="{
+ 'weightColor-low': weight < 0.2,
+ 'weightColor-medium': weight >= 0.2 && weight < 0.6,
+ 'weightColor-heigh': weight >= 0.6
+ }"
+ >
+ 椋庨櫓鍊�(0~1)锛歿{ weight }}
+ </h1>
+ </template>
+ <div class="risk-grade">
+ <strong>椋庨櫓绛夌骇锛�</strong>
+ <span v-if="weight >= 0.6"> 楂橀闄�</span>
+ <span v-else-if="weight >= 0.2 && weight < 0.6"> 涓闄�</span>
+ <span v-else> 浣庨闄�</span>
+ </div>
+ <div class="risk-advice">
+ <strong>绠℃帶寤鸿锛�</strong>
+ <span v-if="weight >= 0.6"> 寤鸿瀵硅绔欑偣杩涜绾夸笅鎵ф硶妫�鏌ワ紝涓撻」鏁版嵁瀵规瘮</span>
+ <span v-else-if="weight >= 0.2 && weight < 0.6"> 寤鸿寮�灞曞父鎬佽拷韪垎鏋�</span>
+ <span v-else> 寤鸿寮曞浼佷笟闀挎�佷繚鎸�</span>
+ </div>
+ <div class="grade-instance">
+ <div class="container">
+ <div class="block-color heigh"></div>
+ <div>楂橀闄�(鈮�0.6)</div>
+ </div>
+ <div class="container">
+ <div class="block-color medium"></div>
+ <div>涓闄�(0.2~0.6)</div>
+ </div>
+ <div class="container">
+ <div class="block-color low"></div>
+ <div>浣庨闄�(锛�0.2)</div>
+ </div>
+ </div>
+ </el-card>
+ </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-card shadow="never" class="card-value">
- <LineChart title="鏃ユ湁鏁堢巼" :chartData="chartData3" yName="%" seriesName="鏃ユ湁鏁堢巼">
- </LineChart>
- </el-card>
- </el-col>
+ <el-col :span="4">
+ <el-card shadow="never" class="card-height">
+ <template #header><span class="title-16">椋庨櫓璇︽儏</span></template>
- <el-col :span="12">
- <el-card shadow="never" class="card-value">
- <LineChart title="鏃ヨ秴鏍囩巼" :chartData="chartData4" yName="%" seriesName="鏃ヨ秴鏍囩巼">
- </LineChart>
- </el-card>
- </el-col>
- </el-row>
+ <el-form>
+ <el-form-item label="鏈�澶у�硷細"> {{ bill.max }} mg/m鲁 </el-form-item>
+ <el-form-item label="鏈�灏忓�硷細"> {{ bill.min }} mg/m鲁 </el-form-item>
+ <el-form-item label="鏁版嵁鏈夋晥鐜囷細"> {{ bill.online }}% </el-form-item>
+ <el-form-item label="鏁版嵁鍦ㄧ嚎鐜囷細"> {{ bill.valid }}% </el-form-item>
+ <el-form-item label="鏁版嵁瓒呮爣鐜囷細"> {{ bill.exceeding }}% </el-form-item>
+ <el-form-item label="寮傚父绫诲瀷鑱氶泦搴︼細">
+ {{ bill.exceptionTypeAggregation * 100 }}%
+ </el-form-item>
+ <el-form-item label="鍏稿瀷寮傚父澶嶇幇鐜囷細">
+ {{ bill.exceptionRecurrence * 100 }}%
+ </el-form-item>
+ </el-form>
+ </el-card>
+ </el-col>
+ </el-row>
+
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-card shadow="never" class="card-value">
+ <LineChart title="鏃ュ潎鍊�" :chartData="chartData1" yName="mg/m鲁" seriesName="鏃ュ潎鍊�">
+ </LineChart>
+ </el-card>
+ </el-col>
+
+ <el-col :span="12">
+ <el-card shadow="never" class="card-value">
+ <LineChart title="鏃ュ湪绾跨巼" :chartData="chartData2" yName="%" seriesName="鏃ュ湪绾跨巼">
+ </LineChart>
+ </el-card>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-card shadow="never" class="card-value">
+ <LineChart title="鏃ユ湁鏁堢巼" :chartData="chartData3" yName="%" seriesName="鏃ユ湁鏁堢巼">
+ </LineChart>
+ </el-card>
+ </el-col>
+
+ <el-col :span="12">
+ <el-card shadow="never" class="card-value">
+ <LineChart title="鏃ヨ秴鏍囩巼" :chartData="chartData4" yName="%" seriesName="鏃ヨ秴鏍囩巼">
+ </LineChart>
+ </el-card>
+ </el-col>
+ </el-row>
+ </div>
</div>
-</div>
- <el-empty description="鏆傛棤鏁版嵁" v-show="isNoData " :image-size="200" />
+ <el-empty description="鏆傛棤鏁版嵁" v-show="isNoData" :image-size="200" />
</template>
<style scoped>
@@ -520,13 +527,15 @@
margin: 10px;
}
.form-item {
- margin-top:10px;
+ margin-top: 10px;
}
.chart-container {
margin-left: 10px;
}
.time-text {
- letter-spacing: 2px;
+ font-size: 14px;
+ color: #333333;
+ letter-spacing: 1px;
}
.el-card {
margin-top: 15px;
@@ -541,7 +550,7 @@
/* padding:0px */
}
.card-height {
- height: 540px;
+ height: 570px;
}
.el-header {
background-color: #010408;
@@ -604,15 +613,21 @@
color: red;
}
/* .wait-name {
- width: 500px;
- height: 600px;
-} */
+ width: 500px;
+ height: 600px;
+ } */
.table-class {
- border: 1px solid blue;
- margin: 20px 0px 20px 0px;
+ /* border: 1px solid blue; */
+ /* margin: 20px 0px 20px 0px; */
+ height: 570px;
}
+
.table-button {
letter-spacing: 1px;
text-decoration: underline;
+ border-radius: 0px;
+}
+.site-name {
+ margin-left: 20px;
}
</style>
--
Gitblit v1.9.3