扬尘Vue

zmc

2023-08-30 b7b35d8bd8f0ff7fe4e1aa6c69a877551bed81a3

 src/views/line_graph/DataRiskModel.vue

@@ -29,8 +29,8 @@
      chartData3: {},
      chartData4: {},
      //devId:'',          //设备编号
      // begin: '2023-05-01', //开始时间
      // end: '2023-05-15', //结束时间
      begin: '', //开始时间
      end: '', //结束时间

      form: {
        // 站点名称
@@ -278,6 +278,9 @@
          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
        });
    },

@@ -361,18 +364,64 @@
          <el-form-item>
            <el-button type="primary" @click="fetch">展示折线图</el-button>
          </el-form-item>

          <!-- <div>
            <el-form-item>
              <el-radio-group v-model="radio" @change="setChart">
                <el-radio :label="1">颗粒物浓度平均值</el-radio>
                <el-radio :label="2">数据在线/有效/超标率</el-radio>
              </el-radio-group>
            </el-form-item>
          </div> -->
        </el-form>

        <div>数据统计时段：{{}}</div>
        <div>数据统计时段：{{ begin}} ~ {{ end }}</div>

        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
            >
              <DustRadarChart :name="['数据有效率','典型异常复现率','异常类型聚集度','数据超标率','数据在线率']" :data="[bill.valid,bill.exceptionRecurrence,bill.exceptionTypeAggregation,bill.exceeding,bill.online]" ></DustRadarChart>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
            >
              <template #header>风险详情</template>
              <el-space direction="vertical">
                <div>最大值:{{ bill.max }} mg/m³</div>
                <div>最小值:{{ bill.min }} mg/m³</div>
                <div>均值:{{ bill.avg }} mg/m³</div>
                <div>数据有效率:{{ bill.online }}%</div>
                <div>数据在线率:{{ bill.valid }}%</div>
                <div>数据超标率:{{ bill.exceeding }}%</div>
                <div>异常类型聚集度:{{ bill.exceptionTypeAggregation*100 }}%</div>
                <div>典型异常复现率:{{ bill.exceptionRecurrence*100 }}%</div>
              </el-space>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
            >
              <template #header>风险等级</template>
              <template #default>
                <el-space direction="vertical" :size="15">
                  <div class="container">
                    <div class="block heigh"></div> <div>高风险(≥0.6)</div>
                  </div>
                  <div class="container">
                    <div class="block medium" ></div> <div>中风险(0.2~0.6)</div>
                  </div>
                  <div class="container">
                    <div class="block low"></div><div>低风险(＜0.2)</div>
                  </div>
                  
                  
                  
                </el-space>
              </template>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
@@ -384,7 +433,7 @@
                <LineChart
                  title="日均值"
                  :chartData="chartData1"
                  yName="浓度"
                  yName="mg/m³"
                  seriesName="日均值"
                >
                </LineChart>
@@ -401,7 +450,7 @@
                <LineChart
                  title="日在线率"
                  :chartData="chartData2"
                  yName="百分比"
                  yName="%"
                  seriesName="日在线率"
                >
                </LineChart>
@@ -416,7 +465,7 @@
                <LineChart
                  title="日有效率"
                  :chartData="chartData3"
                  yName="百分比"
                  yName="%"
                  seriesName="日有效率"
                >
                </LineChart>
@@ -430,7 +479,7 @@
                <LineChart
                  title="日超标率"
                  :chartData="chartData4"
                  yName="百分比"
                  yName="%"
                  seriesName="日超标率"
                >
                </LineChart>
@@ -439,51 +488,8 @@
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
            >
              <DustRadarChart :name="['数据有效率','典型异常复现率','异常类型聚集度','数据超标率','数据在线率']" :data="[bill.valid,bill.exceptionRecurrence,bill.exceptionTypeAggregation,bill.exceeding,bill.online]" ></DustRadarChart>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
            >
              <template #header>异常数量统计</template>
              <el-space direction="vertical">
                <div>最大值:{{ bill.max }} mg/m³</div>
                <div>最小值:{{ bill.min }} mg/m³</div>
                <div>均值:{{ bill.avg }} mg/m³</div>
                <div>数据有效率:{{ bill.online }}%</div>
                <div>数据在线率:{{ bill.valid }}%</div>
                <div>数据超标率:{{ bill.exceeding }}%</div>
                <div>异常类型聚集度:{{ bill.exceptionTypeAggregation*100 }}%</div>
                <div>典型异常复现率:{{ bill.exceptionRecurrence*100 }}%</div>
              </el-space>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
            >
              <template #header>风险等级</template>
              <template #default>
                <el-space direction="vertical">
                  <el-text>高风险(≥0.6)</el-text>
                  <el-text>中风险(0.2~0.6)</el-text>
                  <el-text>低风险(＜0.2)</el-text>
                </el-space>
              </template>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
@@ -503,4 +509,26 @@
  color: #333;
  line-height: 60px;
}
.container {
  display: flex;
  justify-content: space-between;
}
.block {
  width: 1em;
  height: 1em;
  margin-right: 10px;
}
.heigh {
  background-color: red;
}
.medium {
  background-color: #FADC19;
}
.low {
  background-color: #9FDB1D;
}

.el-text {
  align-self: left;
}
</style>