src/views/risk_assessment/DataRiskModel.vue
@@ -13,6 +13,7 @@
import riskApi from '@/api/risk/riskApi.js'
import riskValue from '@/utils/risk_estimate_common_function/riskValue.js'
import lineChart from '@/utils/chartFunction/lineChart.js'
import siteInfo from '@/api/site/siteInfo.js'
export default {
  components: {
    LineChart,
@@ -73,7 +74,9 @@
      // 风险值
      weight: '',
      // 无数据配置时间段
      areaColor: []
      areaColor: [],
      // 某站点的基本信息
      siteInfo:{}
    }
  },
  mounted() {
@@ -89,10 +92,10 @@
  methods: {
    // 查询站点统计信息
    querySiteStaticsInfo(row) {
    async querySiteStaticsInfo(row) {
      this.form.name = row.siteName
      // 更新统计数据
      this.getAnalysisData()
      await this.getAnalysisData()
      // 计算风险值
      this.calRiskValue()
    },
@@ -114,6 +117,8 @@
    riskAssessment() {
      // 更新排名清单
      this.getRiskRank()
      // 更新该站点的所属场景和运维商
      this.getSiteInfo(this.form.number)
      // 更新分析数据
      this.getAnalysisData()
      // 计算风险值
@@ -147,14 +152,18 @@
      this.form.number = arr[1]
      this.screenLoading = false
      // 更新该站点的所属场景和运维商
      this.getSiteInfo(this.form.number)
      // 更新日统计数据
      this.getAnalysisData()
      // 计算风险值
      this.calRiskValue()
    },
    // 计算风险值
    calRiskValue() {
      console.log('设备编码:',this.form.number)
      riskApi.queryRiskValue(this.form.number, this.month, 'month').then((response) => {
        this.weight = riskValue.calRiskValue(response.data.data[0]).toFixed(2)
      })
@@ -196,7 +205,6 @@
          let noDataTimeInteval = lineChart.backNoDataInteval(begin, end)
          // 无数据配置时间段
          this.areaColor = lineChart.getMarkArea(noDataTimeInteval)
          console.log('区域', this.areaColor)
          this.setChart()
          //  折线图数据
          let temp = index.calBillData(this.chartData, begin, end)
@@ -283,6 +291,20 @@
      arr.sort((a, b) => b.riskValue - a.riskValue)
      // 获取前num个元素
      return arr.slice(0, num)
    },
    /**
     * 根据设备编号查询站点基本信息
     * @param: 设备编号
     */
    getSiteInfo(mnCode) {
      siteInfo.querySiteInfoByMnCode(mnCode).then(response => {
        this.siteInfo = response.data.data[0]
      })
    },
    openDetail() {
      const encodedSiteName = encodeURIComponent(this.form.name)
      this.$router.push(`/exceptionDetail/${encodedSiteName}/${this.month}`)
    }
  }
}
@@ -316,12 +338,45 @@
    </el-form-item>
  </el-form>
  <!-- <el-card class="site-info time-text" >
   <span>{{form.name}}</span>
   <br/>
   <br/>
    <span>数据统计时段:{{ form.beginTime }} ~ {{ form.endTime }}</span>
    <el-tag class="mx-1" >场景</el-tag>{{siteInfo.typename}}
    <el-tag class="mx-1">运维商</el-tag>{{siteInfo.dutyCompany}}
    <el-button type="primary"  size="small" class="exception-button" @click="openDetail()">
      异常详情
    </el-button>
  </el-card> -->
  <div v-loading="screenLoading" class="wait-name">
    <div class="chart-container" v-show="!isNoData && !screenLoading">
      <div class="time-text">
      <!-- <div class="time-text">
        <span>数据统计时段:{{ form.beginTime }} ~ {{ form.endTime }}</span>
        <span class="site-name">{{ form.name }}</span>
      </div>
        <span class="site-name">
              <el-button type="primary" text class="exception-button" @click="openDetail()">
               异常详情
              </el-button>
        </span>
        <el-tag class="mx-1" >场景</el-tag>{{siteInfo.typename}}
        <el-tag class="mx-2">运维商</el-tag>{{siteInfo.dutyCompany}}
      </div> -->
      <el-card class="time-text" >
        <span>{{form.name}}</span>
        <br/>
        <br/>
         <span>数据统计时段:{{ form.beginTime }} ~ {{ form.endTime }}</span>
         <el-tag class="mx-1" >场景</el-tag>{{siteInfo.typename}}
         <el-tag class="mx-1">运维商</el-tag>{{siteInfo.dutyCompany}}
         <el-button type="primary"  size="small" class="exception-button" @click="openDetail">
           异常详情
         </el-button>
       </el-card>
      <el-row :gutter="10">
        <el-col :span="5">
@@ -333,7 +388,6 @@
              :default-sort="{ prop: 'riskValue', order: 'descending' }"
              height="540"
            >
                <!-- :index="indexMethod" -->
              <el-table-column
                type="index"
@@ -345,8 +399,9 @@
              />
              <el-table-column
                prop="siteName"
                label="站点名称"
                label="点位名称"
                show-overflow-tooltip
                width="97"
                align="center"
              >
                <template #default="{ row }">
@@ -355,7 +410,11 @@
                    text
                    class="table-button"
                    @click="querySiteStaticsInfo(row)"
                    >{{ row.siteName }}</el-button
                    >
                  <span class="risk-rank-site">
                    {{ row.siteName }}
                  </span>
                    </el-button
                  >
                </template>
              </el-table-column>
@@ -436,6 +495,7 @@
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="never" class="card-height">
@@ -533,6 +593,7 @@
  font-size: 14px;
  color: #333333;
  letter-spacing: 1px;
}
.el-card {
  margin-top: 15px;
@@ -621,7 +682,14 @@
.table-button {
  letter-spacing: 1px;
  text-decoration: underline;
  border-radius: 0px;
  /* border-radius: 0px; */
}
.risk-rank-site {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 80px;
}
.site-name {
  margin-left: 20px;
@@ -643,4 +711,22 @@
  flex-direction: column;
  justify-content: space-around;
}
.el-tag{
  margin-left: 25px;
  font-size: 14px;
  vertical-align: baseline;
}
.exception-button {
  vertical-align: baseline;
  margin-left: 150px;
}
.site-info-detail{
  display: flex;
  justify-content: space-between;
}
.mx-1{
  margin-left: 100px;
}
</style>