按开发清单已修改

zmc

2023-11-02 fd934f83afae1e3fce46db8610837d0e0f4d9393

 src/views/line_graph/DataRiskModel.vue

@@ -1,23 +1,18 @@
<!-- 日均值 -->

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

import DustRadarChart from './components/DustRadarChart.vue'
import exceptionApi from '@/api/exceptionApi.js'

import LineChart from './components/LineChart.vue'
import index from '@/utils/risk_estimate_common_function/index.js'
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';
import MonthSelect from '@/sfc/MonthSelect.vue'
export default {
  components: {
    LineChart,
    // DateSelectWithShortCuts,
    InputSearch,
    AreaAndmonitorType,
    DustRadarChart,
@@ -29,12 +24,12 @@
      isNoData: false,
      loading: false,
      screenLoading:false,
      parentDataFlag:false,
      chartData: [],
      chartData1: {}, //保存查询的结果
      chartData2: {},
      chartData3: {},
      chartData4: {},
      //devId:'',          //设备编号
      begin: '', //开始时间
      end: '', //结束时间

@@ -43,13 +38,14 @@
        name: '',
        // 设备编号
        number: '',

        month:'',
        // 开始时间
        beginTime: '',
        // 结束时间
        endTime: ''
      },
      month: '',
      // 传递给月份组件的值
      sfc_month: '',
      // 折线图配置项
      option: {},
      // 数据清单
@@ -73,105 +69,128 @@
      queryButton: false,

      // 风险值排名前十的站点
      top_10_sites_with_risk_values:[
        {name:'金山区金山新城JSC1-0401单元1-11-01地块项目09',
        riskValue:0.2
      }
    ]
      top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }],
      // 风险值
      weight: ''
    }
  },
  
  watch:{

  },
  computed: {
    weight() {
      let singleOnline = ((100 - this.bill.online) / 100) * 0.1
      let singleValid = ((100 - this.bill.valid) / 100) * 0.2
      let singleExceeding = (this.bill.exceeding / 100) * 0.2
      let singleAggregation = this.bill.exceptionTypeAggregation * 0.2
      let singleRecurrence = this.bill.exceptionRecurrence * 0.3
      let allWeight = (
        singleOnline +
        singleValid +
        singleExceeding +
        singleAggregation +
        singleRecurrence
      ).toFixed(2)

      return allWeight
    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.getRiskWeightName()
    
    this.fetch()
    // 计算风险排名清单
    this.getRiskRank()
    // // 加载风险值最高的站点数据
    this.ShowDefaultData()
  },
  methods: {

  methods: {
    // 查询站点统计信息
    querySiteStaticsInfo(row){
      this.form.name = row.siteName
      this.riskDetails()
      // 更新统计数据
      this.getAnalysisData()
      // 计算风险值
      this.calRiskValue()
    },

    async getRiskWeightName() {
      this.screenLoading = true
        this.form.name = await rank.fetchData(this.form.beginTime, this.form.endTime);

        // 加载该风险清单
        this.fetch()
        this.screenLoading = false
    },

    // 格式化月份
    giveMonth(val){
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
      this.form.month = dayjs(val).format('YYYY-MM-DD');
      this.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);

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

    /**
     * 将中国标准时间转为指定格式
     * 风险评估按钮
     * @param：
     * @returns：
     */
    giveTime(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
      this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD')
      this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD')
    },
    /**
     * 初始加载函数
     * @param：
     * @returns：
     */
    fetch() {
      // 计算风险排名清单,获取风险最高的站点名字
    riskAssessment() {
      // 更新排名清单
      this.getRiskRank()

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

      
    },
    riskDetails() {
      // 分析数据
      this.fetchData()
      // 异常数据
      this.exceptiondataCount()
      // 更新分析数据
      this.getAnalysisData()
      // 计算风险值
      this.calRiskValue()
    },

    // 点击展示按钮
    fetchData() {
    // 更新分析数据
    getAnalysisData() {
      // 日统计数据
      this.fetchDayAnalysisData()
      // 异常数据
      this.fetchExceptionAnalysisData()
    },

    findObjectByPropertyValue(array, property, value) {
      return array.find((obj) => obj[property] === value)
    },

    // 此页面打开时
    ShowDefaultData() {
      // 默认加载展示的内容
      this.updateOriginPage()
    },

    // 加载默认展示的内容
    async updateOriginPage() {
      this.screenLoading = true
      // 更新排名清单，并得到风险值最高站点
      this.form.name = await this.getRiskRank()
      this.screenLoading = false
      // 更新日统计数据
      this.getAnalysisData()
      // 计算风险值
      this.calRiskValue()
    },

    // 计算风险值
    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
          })
      })
    },

    //  根据目前站点，月份，查折线图日统计数据
    fetchDayAnalysisData() {
      let params = {}
      if (this.form.name) {
        params['siteName'] = this.form.name
@@ -194,11 +213,14 @@
            this.isNoData = true
            return
          }
          this.begin = this.chartData[0].lst
          this.end = this.chartData[this.chartData.length - 1].lst

          // 移除空数据状态
          this.isNoData = false
          this.setChart()

          let temp = index.calBillData(this.chartData, this.form.beginTime, this.form.endTime)
          //  折线图数据
          let temp = index.calBillData(this.chartData, this.begin, this.end)
          this.bill.min = temp['min']
          this.bill.max = temp['max']

@@ -206,9 +228,20 @@
          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
        })
    },
    // 企业异常统计数据
    fetchExceptionAnalysisData() {
      exceptionApi
        .exceptiondata1({
          siteName: this.form.name,
          beginTime: this.form.beginTime,
          endTime: this.form.endTime
        })
        .then((res) => {
          let obj = index.calRecur(res.data.data)
          this.bill.exceptionRecurrence = obj['exceptionRecurrence']
          this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation']
        })
    },

@@ -251,70 +284,46 @@
      }
    },

    // 企业异常详情
    exceptiondataCount() {
      exceptionApi
        .exceptiondata1({
          siteName: this.form.name,
    // 得到前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
        })
        .then((res) => {
          let obj = index.calRecur(res.data.data)
          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,
      const riskValueSites = index.merge(
        staticsData.data.data,
        exceptionData.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.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')
              console.log('表格数据为：',this.top_10_sites_with_risk_values);
            })

            })
            
        })
        // Promise
        return this.top_10_sites_with_risk_values[0].siteName
      }
    },

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

  }
}
</script>


<template>
  <el-form :inline="true" :model="form">
@@ -322,72 +331,76 @@
      <AreaAndmonitorType></AreaAndmonitorType>
    </el-form-item>
    <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>
      <InputSearch
        :site-name="form.name"
        isNeedDefaultSite="0"
        @submit-value="(n) => (form.name = n)"
      ></InputSearch>
    </el-form-item>

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


    <el-form-item>
      <MonthSelect @submit-value="giveMonth"></MonthSelect>
      <MonthSelect :month="this.month_1" @submit-value="giveMonth"></MonthSelect>
    </el-form-item>

    
    <el-form-item>
      <ButtonClick
        content="风险评估"
        type="primary"
        :loading="queryButton"
        @do-search="fetch"
        @do-search="riskAssessment"
      ></ButtonClick>
    </el-form-item>
  </el-form>

  <div v-loading="screenLoading" class="wait-name">  
  <div class="chart-container" v-show="!isNoData && !screenLoading " >
    <div class="time-text">数据统计时段：{{ begin }} ~ {{ end }}</div>
      <div class="time-text">
        <span>数据统计时段：{{ begin }} ~ {{ end }}</span>
        <span class="site-name">{{ form.name }}</span>
      </div>

    <el-row :gutter="10">
      <el-col :span="5">
        <div class="table-class">
          <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">
              height="540"
            >
          <el-table-column
              type="index"
              label="序号"
              :index="indexMethod"
              fixed
                width="25"
              show-overflow-tooltip
            />
            <el-table-column
              prop="siteName"
              label="站点名称"
              show-overflow-tooltip
            />
              <el-table-column prop="siteName" label="站点名称" show-overflow-tooltip />
            <el-table-column
              prop="riskValue"
              label="风险值"
              sortable
              width="70"
                width="67"
              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
                    type="primary"
                    text
                    class="table-button"
                    @click="querySiteStaticsInfo(row)"
              >风险详情</el-button
            >
          </template>
        </el-table-column>
        </el-table>
      </div>
      
          </el-card>
      </el-col>


      <el-col :span="12">
        <el-card shadow="never">
@@ -474,8 +487,6 @@
      </el-col>
    </el-row>



    <el-row :gutter="20">
      <el-col :span="12"> 
        <el-card shadow="never" class="card-value">
@@ -490,10 +501,6 @@
          </LineChart>
        </el-card>
        </el-col>




    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
@@ -526,7 +533,9 @@
  margin-left: 10px;
}
.time-text {
  letter-spacing: 2px;
  font-size: 14px;
  color: #333333;
  letter-spacing: 1px;
}
.el-card {
  margin-top: 15px;
@@ -608,11 +617,17 @@
  height: 600px;
} */
.table-class {
  border: 1px solid blue;
  margin: 20px 0px 20px 0px;
  /* border: 1px solid blue; */
  /* margin: 20px 0px 20px 0px; */
  height: 540px;
}

.table-button {
  letter-spacing: 1px;
  text-decoration: underline;
  border-radius: 0px;
}
.site-name {
  margin-left: 20px;
}
</style>