From d404f7f0ffb8b7b8b930a2b583afe2037cffc3f8 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期五, 01 十二月 2023 13:58:03 +0800
Subject: [PATCH] 修改LineChart.vue位置
---
src/views/risk_assessment/DataRiskModel.vue | 729 -------------------------------------------------------
1 files changed, 12 insertions(+), 717 deletions(-)
diff --git a/src/views/risk_assessment/DataRiskModel.vue b/src/views/risk_assessment/DataRiskModel.vue
index d0bd569..b66e641 100644
--- a/src/views/risk_assessment/DataRiskModel.vue
+++ b/src/views/risk_assessment/DataRiskModel.vue
@@ -1,732 +1,27 @@
-<!-- 鏃ュ潎鍊� -->
-
<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'
-import riskApi from '@/api/risk/riskApi.js'
-import riskValue from '@/utils/risk_estimate_common_function/riskValue.js'
-import lineChart from '@/utils/chartFunction/lineChart.js'
-import siteInfo from '@/api/site/siteInfo.js'
-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: '3234',
- // 寮�濮嬫椂闂�
- beginTime: '',
- // 缁撴潫鏃堕棿
- endTime: ''
- },
- month: '',
-
- // 鎶樼嚎鍥鹃厤缃」
- option: {},
- // 鏁版嵁娓呭崟
- bill: {
- min: '',
- max: '',
- avg: '',
- online: 100,
- valid: 100,
- exceeding: 0,
-
- // 鍏稿瀷寮傚父澶嶇幇鐜�
- exceptionRecurrence: 0,
- // 寮傚父绫诲瀷鎹仛闆嗗害
- exceptionTypeAggregation: 0
- },
-
- // 鏌ヨ鎸夐挳鍔犺浇鏁堟灉
- queryButton: false,
-
- // 椋庨櫓鍊兼帓鍚嶅墠鍗佺殑绔欑偣
- top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }],
- // 椋庨櫓鍊�
- weight: '',
- // 鏃犳暟鎹厤缃椂闂存
- areaColor: [],
- // 鏌愮珯鐐圭殑鍩烘湰淇℃伅
- siteInfo:{}
- }
- },
- mounted() {
- // // 鍔犺浇椋庨櫓鍊兼渶楂樼殑绔欑偣鏁版嵁
- this.ShowDefaultData()
- },
- computed: {
- // 椋庨櫓绛夌骇
- riskGradeAndAdvice() {
- return riskApi.getRiskAdvice(this.weight)
- }
- },
-
- methods: {
- // 鏌ヨ绔欑偣缁熻淇℃伅
- async querySiteStaticsInfo(row) {
- this.form.name = row.siteName
- // 鏇存柊缁熻鏁版嵁
- await this.getAnalysisData()
- // 璁＄畻椋庨櫓鍊�
- this.calRiskValue()
+ import CompDataRiskModel from '@/views/risk_assessment/components/CompDataRiskModel.vue'
+ export default {
+ components:{
+ CompDataRiskModel
},
+ data() {
+ return{
- // 鏍煎紡鍖栨湀浠�
- 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.getSiteInfo(this.form.number)
- // 鏇存柊鍒嗘瀽鏁版嵁
- 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
- // 鏇存柊鎺掑悕娓呭崟锛屽苟寰楀埌椋庨櫓鍊兼渶楂樼珯鐐�
- let arr = await this.getRiskRank()
- this.form.name = arr[0]
- this.form.number = arr[1]
- this.screenLoading = false
-
- // 鏇存柊璇ョ珯鐐圭殑鎵�灞炲満鏅拰杩愮淮鍟�
- this.getSiteInfo(this.form.number)
- // 鏇存柊鏃ョ粺璁℃暟鎹�
- this.getAnalysisData()
- // 璁＄畻椋庨櫓鍊�
- this.calRiskValue()
-
- },
-
- // 璁＄畻椋庨櫓鍊�
- calRiskValue() {
- console.log('璁惧缂栫爜锛�',this.form.number)
- riskApi.queryRiskValue(this.form.number, this.month, 'month').then((response) => {
- this.weight = riskValue.calRiskValue(response.data.data[0]).toFixed(2)
- })
- },
-
- // 鏍规嵁鐩墠绔欑偣锛屾湀浠斤紝鏌ユ姌绾垮浘鏃ョ粺璁℃暟鎹�
- 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
- }
- // 鍒嗘瀽鏁版嵁涓殑鏈�鏃╂椂闂�
- let begin = this.chartData[0].lst
- // 鍒嗘瀽鏁版嵁涓殑鏈�鏅氭椂闂�
- let end = this.chartData[this.chartData.length - 1].lst
-
- // 绉婚櫎绌烘暟鎹姸鎬�
- this.isNoData = false
-
- // 鏃犳暟鎹殑鏃堕棿娈�
- let noDataTimeInteval = lineChart.backNoDataInteval(begin, end)
- // 鏃犳暟鎹厤缃椂闂存
- this.areaColor = lineChart.getMarkArea(noDataTimeInteval)
- this.setChart()
- // 鎶樼嚎鍥炬暟鎹�
- let temp = index.calBillData(this.chartData, begin, 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) {
- // 鏋勫缓鎶樼嚎鍥緓,y鏁版嵁
- let obj = lineChart.getLineChartXYData(
- this.chartData,
- this.form.beginTime,
- this.form.endTime
- )
-
- this.chartData1 = {
- x: obj.xData,
- y: obj.yAvg
- }
- this.chartData2 = {
- x: obj.xData,
- y: obj.yOnline
- }
- this.chartData3 = {
- x: obj.xData,
- y: obj.yValid
- }
- this.chartData4 = {
- x: obj.xData,
- y: obj.yExceed
- }
}
},
+ mounted() {
- // 寰楀埌鍓�10椋庨櫓鎺掑悕娓呭崟
- async getRiskRank() {
- let response = await riskApi.queryRiskValue('', this.month, 'month')
-
- let tableData = riskValue.backComprehensiveRiskTableData(response.data.data)
-
- this.top_10_sites_with_risk_values = this.getTopRiskData(tableData, 10)
- if (this.top_10_sites_with_risk_values.length != 0) {
- // 琛ㄦ牸鎸夐闄╁�煎�掑彊鎺掑垪
- this.$nextTick(() => {
- this.$refs.table.sort('riskValue', 'descending')
- })
- // 淇濆瓨椋庨櫓鍊兼渶楂樼殑绔欑偣鍚嶇О鍜岃澶囩紪鍙�
- let temp = []
- temp.push(
- this.top_10_sites_with_risk_values[0].siteName,
- this.top_10_sites_with_risk_values[0].mnCode
- )
- return temp
- }
},
- /**
- * 闄嶅簭鎺掑垪锛岃繑鍥為檷搴忓墠num鐨勫厓绱�
- * @param锛� 瀵硅薄鏁扮粍锛岃繑鍥炵殑鏁伴噺
- */
- getTopRiskData(arr, num) {
- // 鎸夌収riskValue闄嶅簭鎺掑垪
- arr.sort((a, b) => b.riskValue - a.riskValue)
- // 鑾峰彇鍓峮um涓厓绱�
- return arr.slice(0, num)
- },
- /**
- * 鏍规嵁璁惧缂栧彿鏌ヨ绔欑偣鍩烘湰淇℃伅
- * @param锛� 璁惧缂栧彿
- */
- getSiteInfo(mnCode) {
- siteInfo.querySiteInfoByMnCode(mnCode).then(response => {
- this.siteInfo = response.data.data[0]
- })
- },
+ methods: {
- openDetail() {
- const encodedSiteName = encodeURIComponent(this.form.name)
- this.$router.push(`/exceptionDetail/${encodedSiteName}/${this.month}`)
- }
- }
+ }
}
</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)"
- @submit-mncode="(n) => (form.number = n)"
- ></InputSearch>
- </el-form-item>
-
- <el-form-item>
- <MonthSelect @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>
-
- <!-- <el-card class="site-info time-text" >
- <span>{{form.name}}</span>
- <br/>
- <br/>
- <span>鏁版嵁缁熻鏃舵锛歿{ form.beginTime }} ~ {{ form.endTime }}</span>
- <el-tag class="mx-1" >鍦烘櫙</el-tag>{{siteInfo.typename}}
-
- <el-tag class="mx-1">杩愮淮鍟�</el-tag>{{siteInfo.dutyCompany}}
- <el-button type="primary" size="small" class="exception-button" @click="openDetail()">
- 寮傚父璇︽儏
- </el-button>
- </el-card> -->
-
- <div v-loading="screenLoading" class="wait-name">
- <div class="chart-container" v-show="!isNoData && !screenLoading">
- <!-- <div class="time-text">
- <span>鏁版嵁缁熻鏃舵锛歿{ form.beginTime }} ~ {{ form.endTime }}</span>
- <span class="site-name">
- <el-button type="primary" text class="exception-button" @click="openDetail()">
- 寮傚父璇︽儏
- </el-button>
-
- </span>
- <el-tag class="mx-1" >鍦烘櫙</el-tag>{{siteInfo.typename}}
- <el-tag class="mx-2">杩愮淮鍟�</el-tag>{{siteInfo.dutyCompany}}
- </div> -->
-
- <el-card class="time-text" >
- <span>{{form.name}}</span>
- <br/>
- <br/>
- <span>鏁版嵁缁熻鏃舵锛歿{ form.beginTime }} ~ {{ form.endTime }}</span>
- <el-tag class="mx-1" >鍦烘櫙</el-tag>{{siteInfo.typename}}
-
- <el-tag class="mx-1">杩愮淮鍟�</el-tag>{{siteInfo.dutyCompany}}
- <el-button type="primary" size="small" class="exception-button" @click="openDetail">
- 寮傚父璇︽儏
- </el-button>
- </el-card>
-
- <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="搴忓彿"
- fixed
- width="52"
- show-overflow-tooltip
- align="center"
- />
- <el-table-column
- prop="siteName"
- label="鐐逛綅鍚嶇О"
- show-overflow-tooltip
- width="97"
- align="center"
- >
- <template #default="{ row }">
- <el-button
- type="primary"
- text
- class="table-button"
- @click="querySiteStaticsInfo(row)"
- >
- <span class="risk-rank-site">
- {{ row.siteName }}
- </span>
- </el-button
- >
- </template>
- </el-table-column>
- <el-table-column
- prop="riskValue"
- label="椋庨櫓鍊�"
- sortable
- show-overflow-tooltip
- align="center"
- />
- </el-table>
- </el-card>
- </el-col>
-
- <el-col :span="11">
- <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="4">
- <el-card shadow="never" class="card-height risk-card">
- <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-text-container">
-
- <div class="risk-grade">
- <h1 class="sub-title">椋庨櫓绛夌骇锛�</h1>
- <span class="sub-title">{{ riskGradeAndAdvice.riskGrade }} </span>
- </div>
-
- <div class="risk-advice">
- <h1 class="sub-title">绠℃帶寤鸿锛�</h1>
- <div v-for="item in riskGradeAndAdvice.riskAdvice" :key="item" class="risk-advice-text">
- {{ item }}
- </div>
- </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>
-
- </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="鏃ュ潎鍊�"
- :areaColor="areaColor"
- >
- </LineChart>
- </el-card>
- </el-col>
-
- <el-col :span="12">
- <el-card shadow="never" class="card-value">
- <LineChart
- title="鏃ュ湪绾跨巼"
- :chartData="chartData2"
- yName="%"
- seriesName="鏃ュ湪绾跨巼"
- :areaColor="areaColor"
- >
- </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="鏃ユ湁鏁堢巼"
- :areaColor="areaColor"
- >
- </LineChart>
- </el-card>
- </el-col>
-
- <el-col :span="12">
- <el-card shadow="never" class="card-value">
- <LineChart
- title="鏃ヨ秴鏍囩巼"
- :chartData="chartData4"
- yName="%"
- seriesName="鏃ヨ秴鏍囩巼"
- :areaColor="areaColor"
- >
- </LineChart>
- </el-card>
- </el-col>
- </el-row>
- </div>
- </div>
- <el-empty description="鏆傛棤鏁版嵁" v-show="isNoData" :image-size="200" />
+ <CompDataRiskModel :show-all="true"/>
</template>
-<style scoped>
-.el-form {
- margin: 10px;
-}
-.form-item {
- margin-top: 10px;
-}
-.chart-container {
- margin-left: 10px;
-}
-.time-text {
- font-size: 14px;
- color: #333333;
- letter-spacing: 1px;
-
-}
-.el-card {
- margin-top: 15px;
- border-radius: 9px;
-}
-.chart-container {
- width: 98%;
- /* height: 600px; */
-}
+<style scoped>
-.card-height {
- height: 570px;
-}
-.el-header {
- background-color: #010408;
- color: #333;
- line-height: 60px;
-}
-.risk-advice {
- /* margin: 20px 0px; */
-}
-.container {
- display: flex;
- margin-bottom: 10px;
-}
-.grade-instance {
- /* margin-top: 50px; */
-}
-.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;
- font-size: 16px;
-}
-.weightColor-medium {
- color: #dabe09;
- font-size: 16px;
-}
-.weightColor-heigh {
- color: red;
- font-size: 16px;
-}
-.risk-grade {
- display: flex;
-}
-: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: 570px;
-}
-
-.table-button {
- letter-spacing: 1px;
- text-decoration: underline;
- /* border-radius: 0px; */
-
-}
-.risk-rank-site {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- width: 80px;
-}
-.site-name {
- margin-left: 20px;
-}
-.risk-advice-text {
- font-size: 14px;
- color: #333333;
- letter-spacing: 1.5px;
- margin-top: 10px;
-}
-.sub-title {
- font-size: 14px;
- color: #333333;
-}
-
-.risk-text-container{
- height: 490px;
- display: flex;
- flex-direction: column;
- justify-content: space-around;
-}
-
-.el-tag{
- margin-left: 25px;
- font-size: 14px;
- vertical-align: baseline;
-}
-.exception-button {
- vertical-align: baseline;
- margin-left: 150px;
-}
-
-.site-info-detail{
- display: flex;
- justify-content: space-between;
-}
-.mx-1{
- margin-left: 100px;
-}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.3