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

zmc

2023-11-16 73cb3ec2b1660610e3621d7614ad308f2c19331d

 src/views/risk_assessment/components/subRiskModel.vue

ÎļþÃû´Ó src/views/line_graph/DataRiskModel.vue ÐÞ¸Ä
@@ -1,19 +1,34 @@
<!-- æ—¥å‡å€¼ -->
<!-- é£Žé™©æ¨¡åž‹çš„页面  
区别：
1.接受父组件传参
2.无初始加载数据（无mounted）
-->

<script>
import InputSearch from '@/sfc/InputSearch.vue'
// import InputSearch from '@/sfc/InputSearch.vue'
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import DustRadarChart from './components/DustRadarChart.vue'
import DustRadarChart from '@/views/risk_assessment/components/DustRadarChart.vue'
import exceptionApi from '@/api/exceptionApi.js'
import LineChart from './components/LineChart.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'
export default {
  props: {
    sName: {
      type: String,
      default: ''
    },
    month_1: {
      type: String,
      default: ''
    }
  },
  components: {
    LineChart,
    InputSearch,
    // DateSelectWithShortCuts,
    // InputSearch,
    AreaAndmonitorType,
    DustRadarChart,
    ButtonClick,
@@ -30,6 +45,7 @@
      chartData2: {},
      chartData3: {},
      chartData4: {},
      //devId:'',          //设备编号
      begin: '', //开始时间
      end: '', //结束时间

@@ -38,6 +54,8 @@
        name: '',
        // è®¾å¤‡ç¼–号
        number: '',

        // month:'',
        // å¼€å§‹æ—¶é—´
        beginTime: '',
        // ç»“束时间
@@ -82,9 +100,12 @@
        // æ›´æ–°ç«™ç‚¹åå­—和时间
        this.form.name = this.sName
        this.month = this.month_1
        // åŒæ—¶æ›´æ–°æœˆèµ·å§‹æ—¶é—´
        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.parentDataFlag = true
        // æ›´æ–°æŽ’清单
        this.getRiskRank()

        // æ›´æ–°ç»Ÿè®¡æ•°æ®
        this.getAnalysisData()
        // è®¡ç®—风险值
@@ -93,10 +114,7 @@
    }
  },

  mounted() {
    // // åŠ è½½é£Žé™©å€¼æœ€é«˜çš„站点数据
    this.ShowDefaultData()
  },
  mounted() {},

  methods: {
    // æŸ¥è¯¢ç«™ç‚¹ç»Ÿè®¡ä¿¡æ¯
@@ -115,6 +133,7 @@
      // åŒæ—¶æ›´æ–°å¼€å§‹å’Œç»“束时间
      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')
      console.log(this.form.beginTime, this.form.endTime)
    },

    /**
@@ -151,10 +170,9 @@

    // åŠ è½½é»˜è®¤å±•ç¤ºçš„内容
    async updateOriginPage() {
      this.screenLoading = true
      // æ›´æ–°æŽ’名清单，并得到风险值最高站点
      this.form.name = await this.getRiskRank()
      this.screenLoading = false

      // æ›´æ–°æ—¥ç»Ÿè®¡æ•°æ®
      this.getAnalysisData()
      // è®¡ç®—风险值
@@ -201,6 +219,7 @@
      if (this.form.endTime) {
        params['endTime'] = this.form.endTime
      }
      this.screenLoading = true
      this.loading = true
      this.queryButton = true
      exceptionApi
@@ -218,6 +237,7 @@

          // ç§»é™¤ç©ºæ•°æ®çŠ¶æ€
          this.isNoData = false
          this.screenLoading = false
          this.setChart()
          //  æŠ˜çº¿å›¾æ•°æ®
          let temp = index.calBillData(this.chartData, this.begin, this.end)
@@ -282,44 +302,6 @@
          y: dataExceed
        }
      }
    },

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

      let exceptionData = await exceptionApi.exceptiondata1({
        siteName: '',
        beginTime: this.form.beginTime,
        endTime: this.form.endTime
      })

      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)
      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
      }
    },

    /**
     * é™åºæŽ’列，返回降序前num的元素
     * @param： å¯¹è±¡æ•°ç»„，返回的数量
     */
    getTopRiskData(arr, num) {
      // æŒ‰ç…§riskValue降序排列
      arr.sort((a, b) => b.riskValue - a.riskValue)
      // èŽ·å–前num个元素
      return arr.slice(0, num)
    }
  }
}
@@ -330,26 +312,27 @@
    <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)"
      ></InputSearch>
    </el-form-item>

    <el-form-item>
      <MonthSelect :month="this.month_1" @submit-value="giveMonth"></MonthSelect>
    </el-form-item>
    <!-- <el-form-item class="form-item">
        <InputSearch
          :site-name="form.name"
          isNeedDefaultSite="0"
          @submit-value="(n) => (form.name = n)"
        ></InputSearch>
      </el-form-item> -->

    <el-form-item>
      <ButtonClick
        content="风险评估"
        type="primary"
        :loading="queryButton"
        @do-search="riskAssessment"
      ></ButtonClick>
    </el-form-item>
    <!-- <el-form-item>
        <MonthSelect :month="this.month_1" @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>

  <div v-loading="screenLoading" class="wait-name">
@@ -360,70 +343,14 @@
      </div>

      <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="序号"
                :index="indexMethod"
                fixed
                width="52"
                show-overflow-tooltip
                align="center"
              />
              <el-table-column
                prop="siteName"
                label="站点名称"
                show-overflow-tooltip
                align="center"
              >
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    text
                    class="table-button"
                    @click="querySiteStaticsInfo(row)"
                    >{{ row.siteName }}</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column
                prop="riskValue"
                label="风险值"
                sortable
                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-card shadow="never" class="table-class">
        <el-col :span="14">
          <el-card shadow="never">
            <DustRadarChart
              :name="[
                '数据有效风险',
                '典型异常复现风险',
                '异常类型聚集风险',
                '超标异常风险',
                '数据超标风险',
                '数据在线风险'
              ]"
              :yData="[
@@ -437,7 +364,7 @@
          </el-card>
        </el-col>

        <el-col :span="3">
        <el-col :span="5">
          <el-card shadow="never" class="card-height">
            <template #header>
              <h1
@@ -480,7 +407,7 @@
          </el-card>
        </el-col>

        <el-col :span="4">
        <el-col :span="5">
          <el-card shadow="never" class="card-height">
            <template #header><span class="title-16">风险详情</span></template>

@@ -564,7 +491,7 @@
  /* padding:0px */
}
.card-height {
  height: 570px;
  height: 540px;
}
.el-header {
  background-color: #010408;
@@ -627,13 +554,13 @@
  color: red;
}
/* .wait-name {
    width: 500px;
    height: 600px;
  } */
      width: 500px;
      height: 600px;
    } */
.table-class {
  /* border: 1px solid blue; */
  /* margin: 20px 0px 20px 0px; */
  height: 570px;
  height: 540px;
}

.table-button {