1.修改了综合风险模型表格数据的获取 2.修改了时间选择器

zmc

2023-11-16 73cb3ec2b1660610e3621d7614ad308f2c19331d

 src/views/risk_assessment/DataRiskModel.vue

copy from src/views/line_graph/DataRiskModel.vue
copy to src/views/risk_assessment/DataRiskModel.vue
Îļþ´Ó src/views/line_graph/DataRiskModel.vue ¸´ÖÆ
@@ -10,6 +10,9 @@
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'
export default {
  components: {
    LineChart,
@@ -37,15 +40,14 @@
        // ç«™ç‚¹åç§°
        name: '',
        // è®¾å¤‡ç¼–号
        number: '',
        number: '3234',
        // å¼€å§‹æ—¶é—´
        beginTime: '',
        // ç»“束时间
        endTime: ''
      },
      month: '',
      // ä¼ é€’给月份组件的值
      sfc_month: '',

      // æŠ˜çº¿å›¾é…ç½®é¡¹
      option: {},
      // æ•°æ®æ¸…单
@@ -62,40 +64,27 @@
        // å¼‚常类型据聚集度
        exceptionTypeAggregation: 0
      },
      status: {
        isHasData: false
      },

      // æŸ¥è¯¢æŒ‰é’®åŠ è½½æ•ˆæžœ
      queryButton: false,

      // é£Žé™©å€¼æŽ’名前十的站点
      top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }],
      // é£Žé™©å€¼
      weight: ''
      weight: '',
      // æ— æ•°æ®é…ç½®æ—¶é—´æ®µ
      areaColor: []
    }
  },

  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()
  },
  computed: {
    // é£Žé™©ç­‰çº§
    riskGradeAndAdvice() {
      return riskApi.getRiskAdvice(this.weight)
    }
  },

  methods: {
@@ -153,8 +142,11 @@
    async updateOriginPage() {
      this.screenLoading = true
      // æ›´æ–°æŽ’名清单，并得到风险值最高站点
      this.form.name = await this.getRiskRank()
      let arr = await this.getRiskRank()
      this.form.name = arr[0]
      this.form.number = arr[1]
      this.screenLoading = false

      // æ›´æ–°æ—¥ç»Ÿè®¡æ•°æ®
      this.getAnalysisData()
      // è®¡ç®—风险值
@@ -163,29 +155,8 @@

    // è®¡ç®—风险值
    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
          })
      riskApi.queryRiskValue(this.form.number, this.month, 'month').then((response) => {
        this.weight = riskValue.calRiskValue(response.data.data[0]).toFixed(2)
      })
    },

@@ -213,14 +184,22 @@
            this.isNoData = true
            return
          }
          this.begin = this.chartData[0].lst
          this.end = this.chartData[this.chartData.length - 1].lst
          // åˆ†æžæ•°æ®ä¸­çš„最早时间
          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)
          console.log('区域', this.areaColor)
          this.setChart()
          //  æŠ˜çº¿å›¾æ•°æ®
          let temp = index.calBillData(this.chartData, this.begin, this.end)
          let temp = index.calBillData(this.chartData, begin, end)
          this.bill.min = temp['min']
          this.bill.max = temp['max']

@@ -248,69 +227,53 @@
    // é€‰æ‹©å…¶ä»–值类型时
    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))
        })
        // æž„建折线图x,y数据
        let obj = lineChart.getLineChartXYData(
          this.chartData,
          this.form.beginTime,
          this.form.endTime
        )

        this.chartData1 = {
          x: dateList,
          y: dayAvg
          x: obj.xData,
          y: obj.yAvg
        }
        this.chartData2 = {
          x: dateList,
          y: dataOnline
          x: obj.xData,
          y: obj.yOnline
        }
        this.chartData3 = {
          x: dateList,
          y: dataValid
          x: obj.xData,
          y: obj.yValid
        }
        this.chartData4 = {
          x: dateList,
          y: dataExceed
          x: obj.xData,
          y: obj.yExceed
        }
      }
    },

    // å¾—到前10风险排名清单
    async getRiskRank() {
      let staticsData = await exceptionApi.analysisdataByType(this.month, 'month')
      let response = await riskApi.queryRiskValue('', this.month, 'month')

      let exceptionData = await exceptionApi.exceptiondata1({
        siteName: '',
        beginTime: this.form.beginTime,
        endTime: this.form.endTime
      })
      let tableData = riskValue.backComprehensiveRiskTableData(response.data.data)

      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)
      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')
        })
        // Promise
        return this.top_10_sites_with_risk_values[0].siteName
        // ä¿å­˜é£Žé™©å€¼æœ€é«˜çš„站点名称和设备编号
        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： å¯¹è±¡æ•°ç»„，返回的数量
@@ -335,11 +298,12 @@
        :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 :month="this.month_1" @submit-value="giveMonth"></MonthSelect>
      <MonthSelect  @submit-value="giveMonth"></MonthSelect>
    </el-form-item>

    <el-form-item>
@@ -355,7 +319,7 @@
  <div v-loading="screenLoading" class="wait-name">
    <div class="chart-container" v-show="!isNoData && !screenLoading">
      <div class="time-text">
        <span>数据统计时段：{{ begin }} ~ {{ end }}</span>
        <span>数据统计时段：{{ form.beginTime }} ~ {{ form.endTime }}</span>
        <span class="site-name">{{ form.name }}</span>
      </div>

@@ -364,15 +328,16 @@
          <el-card shadow="never" class="table-class">
            <el-table
              ref="table"
              highlight-current-row="true"
              :highlight-current-row="true"
              :data="top_10_sites_with_risk_values"
              :default-sort="{ prop: 'riskValue', order: 'descending' }"
              height="540"
            >
                <!-- :index="indexMethod" -->

              <el-table-column
                type="index"
                label="序号"
                :index="indexMethod"
                fixed
                width="52"
                show-overflow-tooltip
@@ -401,22 +366,11 @@
                show-overflow-tooltip
                align="center"
              />
              <!-- <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-col :span="11">
          <el-card shadow="never" class="table-class">
            <DustRadarChart
              :name="[
@@ -437,8 +391,8 @@
          </el-card>
        </el-col>

        <el-col :span="3">
          <el-card shadow="never" class="card-height">
        <el-col :span="4">
          <el-card shadow="never" class="card-height risk-card">
            <template #header>
              <h1
                :class="{
@@ -450,19 +404,20 @@
                é£Žé™©å€¼(0~1)：{{ weight }}
              </h1>
            </template>
            <div class="risk-text-container">

            <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>
              <h1 class="sub-title">风险等级：</h1>
              <span class="sub-title">{{ riskGradeAndAdvice.riskGrade }} </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>
              <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>
@@ -477,12 +432,16 @@
                <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>
            <template #header>
              <span class="title-16">风险详情</span>
            </template>

            <el-form>
              <el-form-item label="最大值："> {{ bill.max }} mg/m³ </el-form-item>
@@ -504,14 +463,26 @@
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="never" class="card-value">
            <LineChart title="日均值" :chartData="chartData1" yName="mg/m³" seriesName="日均值">
            <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="日在线率">
            <LineChart
              title="日在线率"
              :chartData="chartData2"
              yName="%"
              seriesName="日在线率"
              :areaColor="areaColor"
            >
            </LineChart>
          </el-card>
        </el-col>
@@ -519,14 +490,26 @@
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="never" class="card-value">
            <LineChart title="日有效率" :chartData="chartData3" yName="%" seriesName="日有效率">
            <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="日超标率">
            <LineChart
              title="日超标率"
              :chartData="chartData4"
              yName="%"
              seriesName="日超标率"
              :areaColor="areaColor"
            >
            </LineChart>
          </el-card>
        </el-col>
@@ -559,10 +542,7 @@
  width: 98%;
  /* height: 600px; */
}
.card-value {
  /* min-width:900px; */
  /* padding:0px */
}

.card-height {
  height: 570px;
}
@@ -572,14 +552,14 @@
  line-height: 60px;
}
.risk-advice {
  margin: 40px 0px;
  /* margin: 20px 0px; */
}
.container {
  display: flex;
  margin-bottom: 10px;
}
.grade-instance {
  margin-top: 80px;
  /* margin-top: 50px; */
}
.block-color {
  width: 1em;
@@ -612,16 +592,18 @@
}
.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;
  margin-top: 10px;
}
:deep().el-table__header-wrapper {
  color: red;
@@ -644,4 +626,21 @@
.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;
}
</style>