From 0825e9e96a6f2d4b71a51d32dae1302f2496c4d1 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 23 十一月 2023 16:58:27 +0800
Subject: [PATCH] 1.增加了风险模型的跳转逻辑 2.增加了风险模型的组件
---
src/views/risk_assessment/components/CompDataRiskModel.vue | 778 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 778 insertions(+), 0 deletions(-)
diff --git a/src/views/risk_assessment/components/CompDataRiskModel.vue b/src/views/risk_assessment/components/CompDataRiskModel.vue
new file mode 100644
index 0000000..0c1fc5b
--- /dev/null
+++ b/src/views/risk_assessment/components/CompDataRiskModel.vue
@@ -0,0 +1,778 @@
+<!-- 鏃ュ潎鍊� -->
+
+<script>
+import InputSearch from '@/sfc/InputSearch.vue'
+import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
+import exceptionApi from '@/api/exceptionApi.js'
+
+import DustRadarChart from '@/views/risk_assessment/components/DustRadarChart.vue'
+import LineChart from '@/views/risk_assessment/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 {
+ props: {
+ // 鐐逛綅鍚嶅瓧
+ siteName: {
+ type: String,
+ default: ''
+ },
+ // 鏈堜唤
+ time: {
+ type: String,
+ default: ''
+ },
+ // 灞曠ず椤甸潰鐨勫叏閮�
+ showAll: {
+ type: Boolean,
+ default: true
+ }
+ },
+ 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,
+
+ exception: 0,
+ mutationCount: 0,
+ exceedingNearCount: 0,
+ exceedingCriticalDegree: 0
+ },
+
+ // 鏌ヨ鎸夐挳鍔犺浇鏁堟灉
+ queryButton: false,
+
+ // 椋庨櫓鍊兼帓鍚嶅墠鍗佺殑绔欑偣
+ top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }],
+ // 椋庨櫓鍊�
+ weight: '',
+ // 鏃犳暟鎹厤缃椂闂存
+ areaColor: [],
+ // 鏌愮珯鐐圭殑鍩烘湰淇℃伅
+ siteInfo: {},
+
+ // 寮傚父椋庨櫓鐨勫��
+ exceptionRisk: {
+ // 鍦ㄧ嚎鐜囬闄�
+ onlineRisk: '',
+ // 鏈夋晥鐜囬闄�
+ validRisk: '',
+ // 瓒呮爣椋庨櫓
+ exceedRisk: '',
+ // 寮傚父绫诲瀷鑱氶泦搴�
+ exceptionTypeAggregation: '',
+ // 鍏稿瀷寮傚父澶嶇幇鐜�
+ typicalExceptionRepetitionRate: ''
+ }
+ }
+ },
+ watch: {
+ // showAll() {
+ // console.log('1111')
+ // // 椤甸潰鍔犺浇鏃秙howAll鎵嶄細鍙樺寲涓�娆�
+ // // 涓簍rue琛ㄧず鐨勯闄╂ā鍨嬮〉闈�
+ // if (this.showAll) {
+ // // 鍔犺浇椋庨櫓鍊兼渶楂樼殑绔欑偣鏁版嵁
+ // this.ShowDefaultData()
+ // }
+ // },
+ siteName() {
+ if(this.siteName!= ''){
+ // 鏇存柊绔欑偣鍚嶅瓧鍜屾椂闂�
+ this.form.name = this.siteName
+ this.screenLoading = true
+ siteInfo.queryMnCode(this.siteName).then((response) => {
+ this.form.number = response.data.data[0].mnCode
+ this.month = this.time
+ // 鍚屾椂鏇存柊鏈堣捣濮嬫椂闂�
+ 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')
+
+ // 鏇存柊璇ョ珯鐐圭殑鎵�灞炲満鏅拰杩愮淮鍟�
+ this.getSiteInfo(this.form.number)
+ // 鏇存柊缁熻鏁版嵁
+ this.getAnalysisData()
+ // 璁＄畻椋庨櫓鍊�
+ this.calRiskValue()
+ this.screenLoading = false
+ })
+ }
+
+ }
+ },
+
+ computed: {
+ // 椋庨櫓绛夌骇
+ riskGradeAndAdvice() {
+ return riskApi.getRiskAdvice(this.weight)
+ }
+ },
+mounted(){
+ if(this.showAll){
+ // 鍔犺浇椋庨櫓鍊兼渶楂樼殑绔欑偣鏁版嵁
+ this.ShowDefaultData()
+ }
+},
+ methods: {
+ // 鏌ヨ绔欑偣缁熻淇℃伅
+ async querySiteStaticsInfo(row) {
+ this.form.name = row.siteName
+ // 鏇存柊缁熻鏁版嵁
+ await 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.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()
+ },
+
+ /**
+ * 寰楀埌鏁版嵁椋庨櫓鍊� 锛屽苟璁＄畻椋庨櫓鍊�
+ * @param锛�
+ * @returns锛�
+ */
+ calRiskValue() {
+ riskApi.queryRiskValue(this.form.number, this.month, 'month').then((response) => {
+ const rValue = response.data.data[0]
+ this.exceptionRisk.onlineRisk = rValue.onlineRisk
+ this.exceptionRisk.validRisk = rValue.validRisk
+ this.exceptionRisk.exceedRisk = rValue.exceedRisk
+ this.exceptionRisk.exceptionTypeAggregation = rValue.exceptionTypeAggregation
+ this.exceptionRisk.typicalExceptionRepetitionRate = rValue.typicalExceptionRepetitionRate
+
+ this.weight = riskValue.calRiskValue(rValue).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']
+ this.bill.exception = obj['exception']
+ this.bill.mutationCount = obj['mutationCount']
+ this.bill.exceedingNearCount = obj['exceedingNearCount']
+ this.bill.exceedingCriticalDegree = obj['exceedingCriticalDegree']
+ })
+ },
+
+ // 閫夋嫨鍏朵粬鍊肩被鍨嬫椂
+ 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
+ }
+ }
+ },
+
+ // 寰楀埌鍓�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]
+ })
+ },
+
+ openDetail() {
+ const encodedSiteName = encodeURIComponent(this.form.name)
+ const timeType = '1'
+ const jumpPage = '2'
+ this.$router.push(`/exceptionDetail/${encodedSiteName}/${this.month}/${timeType}/${jumpPage}`)
+ }
+ }
+}
+</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 v-show="showAll">
+ <MonthSelect @submit-value="giveMonth"></MonthSelect>
+ </el-form-item>
+
+
+ <el-form-item v-show="showAll">
+ <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">
+ <el-card class="time-text">
+ <h4>{{ form.name }}</h4>
+
+ <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="default" class="exception-button" v-show="showAll" @click="openDetail">
+ 鏁版嵁寮傚父璇︽儏
+ </el-button>
+ </el-card>
+
+ <el-row :gutter="10">
+ <el-col :span="5" v-show="showAll">
+ <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="99"
+ 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="exceptionRisk"
+ ></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.15,
+ 'weightColor-medium': weight >= 0.15 && 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.15~0.6)</div>
+ </div>
+ <div class="container">
+ <div class="block-color low"></div>
+ <div>浣庨闄�(锛�0.15)</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="寮傚父绫诲瀷鑱氶泦搴︼細">
+ {{ exceptionRisk.exceptionTypeAggregation * 100 }}%
+ </el-form-item>
+ <el-tag :size="small">鍏卞嚭鐜颁簡{{ bill.exception.length }}绫诲紓甯�</el-tag>
+ <el-form-item label="鍏稿瀷寮傚父澶嶇幇鐜囷細">
+ {{ exceptionRisk.typicalExceptionRepetitionRate * 100 }}%
+ </el-form-item>
+ <div>
+ <el-tag :size="small">閲忕骇绐佸彉寮傚父:{{ bill.mutationCount }}鏉�</el-tag>
+ </div>
+
+ <div>
+ <el-tag :size="small">涓磋繎瓒呮爣寮傚父:{{ bill.exceedingNearCount }}鏉�</el-tag>
+ </div>
+
+ <div>
+ <el-tag :size="small"
+ >鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父:{{ bill.exceedingCriticalDegree }}鏉�</el-tag
+ >
+ </div>
+ </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="chartData3"
+ yName="%"
+ seriesName="鏃ユ湁鏁堢巼"
+ :areaColor="areaColor"
+ >
+ </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 {
+ font-size: 14px;
+ color: #333333;
+ letter-spacing: 1px;
+}
+.el-card {
+ margin-top: 15px;
+ border-radius: 9px;
+}
+.chart-container {
+ width: 98%;
+ /* height: 600px; */
+}
+
+.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>
--
Gitblit v1.9.3