src/views/risk_assessment/components/CompDataRiskModel.vue
@@ -418,6 +418,7 @@
    <el-form-item v-show="showAll">
      <MonthSelect @submit-value="giveMonth"></MonthSelect>
    </el-form-item>
    <el-form-item v-show="showAll">
      <ButtonClick
@@ -445,7 +446,7 @@
        </el-button>
      </el-card>
      <el-row :gutter="10">
      <el-row :gutter="10" >
        <el-col :span="5" v-show="showAll">
          <el-card shadow="never" class="table-class">
            <el-table
@@ -494,7 +495,7 @@
          </el-card>
        </el-col>
        <el-col :span="11">
        <el-col :span="showAll ?11:14" >
          <el-card shadow="never" class="table-class">
            <DustRadarChart
              :name="[
@@ -509,23 +510,28 @@
          </el-card>
        </el-col>
        <el-col :span="4">
        <el-col :span="showAll ?4: 5" >
          <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
                }"
              <span
              class="title-16"
              >
                风险值(0~1):{{ weight }}
              </h1>
                风险值(0~1):
              </span>
              <span  :class="{
                'weightColor-low': weight < 0.15,
                'weightColor-medium': weight >= 0.15 && weight <= 0.6,
                'weightColor-heigh': weight > 0.6
              }"> {{ weight }}</span>
            </template>
            <div class="risk-text-container">
              <div class="risk-grade">
                <h1 class="sub-title">风险等级:</h1>
                <span class="sub-title">{{ riskGradeAndAdvice.riskGrade }} </span>
                <span  :class="{
                  'weightColor-low': weight < 0.15,
                  'weightColor-medium': weight >= 0.15 && weight <= 0.6,
                  'weightColor-heigh': weight > 0.6
                }" >{{ riskGradeAndAdvice.riskGrade }} </span>
              </div>
              <div class="risk-advice">
@@ -557,7 +563,7 @@
          </el-card>
        </el-col>
        <el-col :span="4">
        <el-col :span="showAll ?4: 5"  >
          <el-card shadow="never" class="card-height">
            <template #header>
              <span class="title-16">风险详情</span>
@@ -566,26 +572,29 @@
            <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.online*100 }}% </el-form-item>
              <el-form-item label="数据在线率:"> {{ bill.valid*100 }}% </el-form-item>
              <el-form-item label="数据超标率:"> {{ bill.exceeding*100 }}% </el-form-item>
              <el-form-item label="异常类型聚集度:">
                {{ exceptionRisk.exceptionTypeAggregation * 100 }}%
              </el-form-item>
              <el-tag :size="small">共出现了{{ bill.exception.length }}类异常</el-tag>
              <el-tag :size="small" v-show="bill.exception.length">共出现了{{ bill.exception.length }}类异常</el-tag>
              <el-form-item label="典型异常复现率:">
                {{ exceptionRisk.typicalExceptionRepetitionRate * 100 }}%
              </el-form-item>
              <div>
                <el-tag :size="small">量级突变异常:{{ bill.mutationCount }}条</el-tag>
                <el-tag :size="small" v-show="bill.mutationCount">量级突变异常:{{ bill.mutationCount }}条</el-tag>
              </div>
              <div>
                <el-tag :size="small">临近超标异常:{{ bill.exceedingNearCount }}条</el-tag>
                <el-tag :size="small" v-show="bill.exceedingNearCount">临近超标异常:{{ bill.exceedingNearCount }}条</el-tag>
              </div>
              <div>
                <el-tag :size="small"
                v-show="bill.exceedingCriticalDegree"
                  >单日超标次数临界异常:{{ bill.exceedingCriticalDegree }}条</el-tag
                >
              </div>
@@ -678,7 +687,7 @@
  background-color: red;
}
.medium {
  background-color: #fadc19;
  background-color: #dabe09;
}
.low {
  background-color: #9fdb1d;