分险排名页面增加站点清单 辅助审核增加了选择日期以及查看详情页面的样式调整

zmc

2023-10-26 73b40d54554307ced5aab5b89dff6e1980e8a242

 src/views/line_graph/DataRiskModel.vue

@@ -1,6 +1,7 @@
<!-- 日均值 -->

<script>
import DateSelectWithShortCuts from '@/sfc/DateSelectWithShortCuts.vue'
// import DateSelectWithShortCuts from '@/sfc/DateSelectWithShortCuts.vue'
import InputSearch from '@/sfc/InputSearch.vue'
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'

@@ -12,14 +13,16 @@
import ButtonClick from '@/sfc/ButtonClick.vue'
import dayjs from 'dayjs'
import rank from '@/utils/risk_estimate_common_function/rank.js'
import MonthSelect from '@/sfc/MonthSelect.vue';
export default {
  components: {
    LineChart,
    DateSelectWithShortCuts,
    // DateSelectWithShortCuts,
    InputSearch,
    AreaAndmonitorType,
    DustRadarChart,
    ButtonClick
    ButtonClick,
    MonthSelect
  },
  data() {
    return {
@@ -40,6 +43,8 @@
        name: '',
        // 设备编号
        number: '',

        month:'',
        // 开始时间
        beginTime: '',
        // 结束时间
@@ -65,19 +70,19 @@
        isHasData: false
      },
      // 查询按钮加载效果
      queryButton: false
      queryButton: false,

      // 风险值排名前十的站点
      top_10_sites_with_risk_values:[
        {name:'金山区金山新城JSC1-0401单元1-11-01地块项目09',
        riskValue:0.2
      }
    ]
    }
  },
  
  watch:{
    // form:{
    //   name(){
    //     if(this.form.name!=''){
    //       this.fetch()
    //       this.screenLoading = false
    //     }
    //   },
    //   deep: true
    // }

  },
  computed: {
    weight() {
@@ -99,11 +104,20 @@
  },
  mounted() {
    // 页面加载显示风险最高的站点
    this.getRiskWeightName()
    // this.getRiskWeightName()
    

    this.fetch()
    // 计算风险排名清单
    this.getRiskRank()
  },
  methods: {

    // 查询站点统计信息
    querySiteStaticsInfo(row){
      this.form.name = row.siteName
      this.riskDetails()
    },

    async getRiskWeightName() {
      this.screenLoading = true
        this.form.name = await rank.fetchData(this.form.beginTime, this.form.endTime);
@@ -112,6 +126,17 @@
        this.fetch()
        this.screenLoading = false
    },

    giveMonth(val){
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
      this.form.month = dayjs(val).format('YYYY-MM-DD');
      // 同时更新开始和结束时间 
      this.form.beginTime = dayjs(this.form.month).startOf().format('YYYY-MM-DD HH:mm:ss')
      this.form.endTime = dayjs(this.form.month).endOf('month').format('YYYY-MM-DD HH:mm:ss')
      console.log(this.form.beginTime,this.form.endTime);

     },

    /**
     * 将中国标准时间转为指定格式
     * @param：
@@ -128,6 +153,17 @@
     * @returns：
     */
    fetch() {
      // 计算风险排名清单,获取风险最高的站点名字
      this.getRiskRank()

      // 分析数据
      this.fetchData()
      // 异常数据
      this.exceptiondataCount()

      
    },
    riskDetails() {
      // 分析数据
      this.fetchData()
      // 异常数据
@@ -149,7 +185,7 @@
      this.loading = true
      this.queryButton = true
      exceptionApi
        .analysisdata(this.form.name, this.form.beginTime, this.form.endTime)
        .analysisdata(this.form.name, this.form.beginTime, this.form.endTime,'day')
        .then((response) => {
          this.chartData = response.data.data
          this.loading = false
@@ -228,7 +264,53 @@
          this.bill.exceptionRecurrence = obj['exceptionRecurrence']
          this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation']
        })
    }
    },

    // 点击风险排名按钮
    getRiskRank() {
      exceptionApi
        .analysisdataByType(this.form.month, 'month')
        .then((response) => {
          let staticsData = response.data.data

          exceptionApi
            .exceptiondata1({
              siteName: this.form.name,
              beginTime: this.form.beginTime,
              endTime: this.form.endTime
            })
            .then((res) => {
              const riskValueSite = index.merge(
                staticsData,
                res.data.data,
                this.form.beginTime,
                this.form.endTime
              )
              // 获取排名前10的风险值站点
              
              this.top_10_sites_with_risk_values = this.getTopriskData(riskValueSite,10)
              this.form.name = this.top_10_sites_with_risk_values[0].siteName
              
              this.$nextTick(()=>{
              this.$refs.table.sort('riskValue','descending')
              console.log('表格数据为：',this.top_10_sites_with_risk_values);
            })

            })
            
        })
    },
/**
 * 降序排列，返回降序前num的元素
 * @param： 对象数组，返回的数量
 */
getTopriskData(arr,num) {
     // 按照riskValue降序排列
     arr.sort((a, b) => b.riskValue - a.riskValue); 
     // 获取前num个元素 
     return arr.slice(0,num); 
 } 

  }
}
</script>
@@ -236,15 +318,20 @@

<template>
  <el-form :inline="true" :model="form">
    <el-form-item>
    <el-form-item class="form-item">
      <AreaAndmonitorType></AreaAndmonitorType>
    </el-form-item>
    <el-form-item>
      <InputSearch isNeedDefaultSite="0" @submit-value="(n) => (form.name = n)" :siteName="form.name"></InputSearch>
    <el-form-item class="form-item">
      <!-- <InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" :siteName="form.name"></InputSearch> -->
      <InputSearch :site-name="form.name" isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" ></InputSearch>
    </el-form-item>

    <el-form-item>
    <!-- <el-form-item>
      <DateSelectWithShortCuts @submit-time="giveTime"></DateSelectWithShortCuts>
    </el-form-item> -->

    <el-form-item>
      <MonthSelect @submit-value="giveMonth"></MonthSelect>
    </el-form-item>

    
@@ -261,7 +348,47 @@
  <div class="chart-container" v-show="!isNoData && !screenLoading " >
    <div class="time-text">数据统计时段：{{ begin }} ~ {{ end }}</div>

    <el-row :gutter="20">
    <el-row :gutter="10">
      <el-col :span="5">
        <div 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
              show-overflow-tooltip
            />
            <el-table-column
              prop="siteName"
              label="站点名称"
              show-overflow-tooltip
            />
            <el-table-column
              prop="riskValue"
              label="风险值"
              sortable
              width="70"
              show-overflow-tooltip
            />
            <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>
      </div>
      
      </el-col>


      <el-col :span="12">
        <el-card shadow="never">
          <DustRadarChart
@@ -283,7 +410,7 @@
        </el-card>
      </el-col>

      <el-col :span="6">
      <el-col :span="3">
        <el-card shadow="never" class="card-height">
          <template #header>
            <h1
@@ -293,7 +420,7 @@
                'weightColor-heigh': weight >= 0.6
              }"
            >
              风险值：{{ weight }}
              风险值(0~1)：{{ weight }}
            </h1>
          </template>
          <div class="risk-grade">
@@ -326,7 +453,7 @@
        </el-card>
      </el-col>

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

@@ -347,6 +474,8 @@
      </el-col>
    </el-row>



    <el-row :gutter="20">
      <el-col :span="12"> 
        <el-card shadow="never" class="card-value">
@@ -362,8 +491,10 @@
        </el-card>
        </el-col>

    </el-row>



    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="never" class="card-value">
@@ -388,6 +519,9 @@
.el-form {
  margin: 10px;
}
.form-item {
  margin-top:10px;
}
.chart-container {
  margin-left: 10px;
}
@@ -399,7 +533,7 @@
  border-radius: 9px;
}
.chart-container {
  width: 95%;
  width: 98%;
  /* height: 600px; */
}
.card-value {
@@ -473,4 +607,12 @@
  width: 500px;
  height: 600px;
} */
.table-class {
  border: 1px solid blue;
  margin: 20px 0px 20px 0px;
}
.table-button {
  letter-spacing: 1px;
  text-decoration: underline;
}
</style>