From a61623f7887a78170e5ab91d1fbf7929ce0e82fd Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 02 十一月 2023 11:40:44 +0800
Subject: [PATCH] “去掉点击站点时页面上的搜索框和排名清单”
---
src/views/line_graph/RiskTest.vue | 633 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 633 insertions(+), 0 deletions(-)
diff --git a/src/views/line_graph/RiskTest.vue b/src/views/line_graph/RiskTest.vue
new file mode 100644
index 0000000..cf8d53e
--- /dev/null
+++ b/src/views/line_graph/RiskTest.vue
@@ -0,0 +1,633 @@
+<!-- 鏃ュ潎鍊� -->
+
+<script>
+ 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 MonthSelect from '@/sfc/MonthSelect.vue'
+ export default {
+ components: {
+ LineChart,
+ InputSearch,
+ AreaAndmonitorType,
+ DustRadarChart,
+ ButtonClick,
+ MonthSelect
+ },
+ data() {
+ return {
+ isNoData: false,
+ loading: false,
+ screenLoading: false,
+ parentDataFlag:false,
+ chartData: [],
+ chartData1: {}, //淇濆瓨鏌ヨ鐨勭粨鏋�
+ chartData2: {},
+ chartData3: {},
+ chartData4: {},
+ begin: '', //寮�濮嬫椂闂�
+ end: '', //缁撴潫鏃堕棿
+
+ form: {
+ // 绔欑偣鍚嶇О
+ name: '',
+ // 璁惧缂栧彿
+ number: '',
+ // 寮�濮嬫椂闂�
+ beginTime: '',
+ // 缁撴潫鏃堕棿
+ endTime: ''
+ },
+ month: '',
+ // 浼犻�掔粰鏈堜唤缁勪欢鐨勫��
+ sfc_month: '',
+ // 鎶樼嚎鍥鹃厤缃」
+ option: {},
+ // 鏁版嵁娓呭崟
+ bill: {
+ min: '',
+ max: '',
+ avg: '',
+ online: 100,
+ valid: 100,
+ exceeding: 0,
+
+ // 鍏稿瀷寮傚父澶嶇幇鐜�
+ exceptionRecurrence: 0,
+ // 寮傚父绫诲瀷鎹仛闆嗗害
+ exceptionTypeAggregation: 0
+ },
+ status: {
+ isHasData: false
+ },
+ // 鏌ヨ鎸夐挳鍔犺浇鏁堟灉
+ queryButton: false,
+
+ // 椋庨櫓鍊兼帓鍚嶅墠鍗佺殑绔欑偣
+ top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }],
+ // 椋庨櫓鍊�
+ weight: ''
+ }
+ },
+
+ 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.ShowDefaultData()
+ },
+
+ methods: {
+ // 鏌ヨ绔欑偣缁熻淇℃伅
+ querySiteStaticsInfo(row) {
+ this.form.name = row.siteName
+ // 鏇存柊缁熻鏁版嵁
+ this.getAnalysisData()
+ // 璁＄畻椋庨櫓鍊�
+ this.calRiskValue()
+ },
+
+ // 鏍煎紡鍖栨湀浠�
+ giveMonth(val) {
+ //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
+ 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锛�
+ */
+ riskAssessment() {
+ // 鏇存柊鎺掑悕娓呭崟
+ this.getRiskRank()
+ // 鏇存柊鍒嗘瀽鏁版嵁
+ this.getAnalysisData()
+ // 璁＄畻椋庨櫓鍊�
+ this.calRiskValue()
+ },
+
+ // 鏇存柊鍒嗘瀽鏁版嵁
+ 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
+ }
+ if (this.form.beginTime) {
+ params['beginTime'] = this.form.beginTime
+ }
+ if (this.form.endTime) {
+ params['endTime'] = this.form.endTime
+ }
+ this.loading = true
+ this.queryButton = true
+ exceptionApi
+ .analysisdata(this.form.name, this.form.beginTime, this.form.endTime, 'day')
+ .then((response) => {
+ this.chartData = response.data.data
+ this.loading = false
+ this.queryButton = false
+ if (response.data.data.length == 0) {
+ 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.begin, this.end)
+ this.bill.min = temp['min']
+ this.bill.max = temp['max']
+
+ this.bill.avg = temp['avg']
+ this.bill.online = temp['online']
+ this.bill.valid = temp['valid']
+ this.bill.exceeding = temp['exceeding']
+ })
+ },
+ // 浼佷笟寮傚父缁熻鏁版嵁
+ 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) {
+ // x杞存棩鏈熸椂闂�
+ let dateList = []
+ //棰楃矑鐗╁钩鍧囨祿搴�
+ let dayAvg = []
+ let dataOnline = []
+ let dataValid = []
+ let dataExceed = []
+ this.chartData.forEach((item) => {
+ //x杞存棩鏈�
+ dateList.push(item.lst)
+ // 鍘嗗彶娌圭儫娴撳害
+ dayAvg.push(item.dayAvg)
+ dataOnline.push(item.dayOnline.slice(0, -1))
+ dataValid.push(item.dayValid.slice(0, -1))
+ dataExceed.push(item.dayExceeding.slice(0, -1))
+ })
+
+ this.chartData1 = {
+ x: dateList,
+ y: dayAvg
+ }
+ this.chartData2 = {
+ x: dateList,
+ y: dataOnline
+ }
+ this.chartData3 = {
+ x: dateList,
+ y: dataValid
+ }
+ this.chartData4 = {
+ x: dateList,
+ y: dataExceed
+ }
+ }
+ },
+
+ // 寰楀埌鍓�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')
+ })
+ // Promise
+ return this.top_10_sites_with_risk_values[0].siteName
+ }
+ },
+
+ /**
+ * 闄嶅簭鎺掑垪锛岃繑鍥為檷搴忓墠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">
+ <el-form-item class="form-item">
+ <AreaAndmonitorType></AreaAndmonitorType>
+ </el-form-item>
+ <el-form-item class="form-item">
+ <InputSearch
+ :site-name="form.name"
+ isNeedDefaultSite="0"
+ @submit-value="(n) => (form.name = n)"
+ ></InputSearch>
+ </el-form-item>
+
+
+
+ <el-form-item>
+ <MonthSelect :month="this.month_1" @submit-value="giveMonth"></MonthSelect>
+ </el-form-item>
+
+ <el-form-item>
+ <ButtonClick
+ content="椋庨櫓璇勪及"
+ type="primary"
+ :loading="queryButton"
+ @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">
+ <span>鏁版嵁缁熻鏃舵锛歿{ begin }} ~ {{ end }}</span>
+ <span class="site-name">{{ form.name }}</span>
+ </div>
+
+ <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"
+ >
+ <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">
+ <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-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-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>
+ <el-empty description="鏆傛棤鏁版嵁" v-show="isNoData" :image-size="200" />
+ </template>
+
+ <style scoped>
+ .el-form {
+ margin: 10px;
+ }
+ .form-item {
+ margin-top: 10px;
+ }
+ .chart-container {
+ margin-left: 10px;
+ }
+ .time-text {
+ letter-spacing: 2px;
+ }
+ .el-card {
+ margin-top: 15px;
+ border-radius: 9px;
+ }
+ .chart-container {
+ width: 98%;
+ /* height: 600px; */
+ }
+ .card-value {
+ /* min-width:900px; */
+ /* padding:0px */
+ }
+ .card-height {
+ height: 540px;
+ }
+ .el-header {
+ background-color: #010408;
+ color: #333;
+ line-height: 60px;
+ }
+ .risk-advice {
+ margin: 40px 0px;
+ }
+ .container {
+ display: flex;
+ margin-bottom: 10px;
+ }
+ .grade-instance {
+ margin-top: 80px;
+ }
+ .block-color {
+ width: 1em;
+ height: 1em;
+ margin-right: 10px;
+ margin-top: 3px;
+ }
+ .heigh {
+ background-color: red;
+ }
+ .medium {
+ background-color: #fadc19;
+ }
+ .low {
+ background-color: #9fdb1d;
+ }
+
+ .el-text {
+ align-self: left;
+ }
+ .el-form-item {
+ margin-bottom: 20px;
+ }
+ :deep().el-form-item__content {
+ justify-content: flex-end;
+ }
+ .title-16 {
+ font-size: 16px;
+ font-weight: bold;
+ }
+ .weightColor-low {
+ color: #9fdb1d;
+ }
+ .weightColor-medium {
+ color: #dabe09;
+ }
+ .weightColor-heigh {
+ color: red;
+ }
+ .risk-grade {
+ display: flex;
+ margin-top: 10px;
+ }
+ :deep().el-table__header-wrapper {
+ color: red;
+ }
+ /* .wait-name {
+ width: 500px;
+ height: 600px;
+ } */
+ .table-class {
+ /* border: 1px solid blue; */
+ /* margin: 20px 0px 20px 0px; */
+ height: 540px;
+ }
+
+ .table-button {
+ letter-spacing: 1px;
+ text-decoration: underline;
+ border-radius: 0px;
+ }
+ .site-name {
+ margin-left: 120px;
+ }
+ </style>
+
\ No newline at end of file
--
Gitblit v1.9.3