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

zmc

2023-10-26 73b40d54554307ced5aab5b89dff6e1980e8a242

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

 src/api/exceptionApi.js

@@ -8,12 +8,13 @@
   * @param {*} endTime
   * @returns
   */
  analysisdata(siteName, beginTime, endTime) {
  analysisdata(siteName, beginTime, endTime,type) {
    return $http.get('/dust/analysisdata', {
      params: {
        siteName: siteName,
        beginTime: beginTime,
        endTime: endTime
        endTime: endTime,
        type:type
      }
    })
  },

 src/api/index.js

@@ -4,9 +4,9 @@



const url = 'http://localhost:8081/';
// const url = 'http://localhost:8081/';
// éƒ¨ç½²
// const url = 'http://114.215.109.124:8803/';
const url = 'http://114.215.109.124:8803/';

//飞羽监管
const $http = axios.create({

 src/main.js

@@ -25,9 +25,9 @@
  }
})
// æœ¬åœ°
axios.defaults.baseURL = 'http://localhost:8081'
// axios.defaults.baseURL = 'http://localhost:8081'
// éƒ¨ç½²
// axios.defaults.baseURL = 'http://114.215.109.124:8803'
axios.defaults.baseURL = 'http://114.215.109.124:8803'
app.config.globalProperties.$http = axios

app.use(ElMessage)

 src/router/index.js

@@ -11,36 +11,11 @@
      component: () => import('@/components/layout/AppLayout.vue'),
      children: 
            [
              {
                path:'/avalue',
                name:'avalue',
                meta: {title: '风险评估'},
                children:[
                    // æ•°æ®åˆ†é™©æ¨¡åž‹
                {
                  path: "/avgDay",
                  name: 'avgDay',
                  meta: { title: '数据分险模型' },
                  component: () => import('@/views/line_graph/DataRiskModel.vue')
                },
    
                //  æ•°æ®é£Žé™©æŽ’名
                {
                  path: "/analysis",
                  name: 'analysis',
                  meta: { title: '数据风险排名' },
                  component: () => import('@/views/line_graph/DataRiskRank.vue')
                },
                //  æ•°æ®é£Žé™©æŽ’名
                {
                  path: "/riskrank",
                  name: 'riskrank',
                  meta: { title: '综合风险排名' },
                  component: () => import('@/views/line_graph/SiteComprehensiveRskRanking.vue')
                },
                  ]
              },
              
              // {
              //   path:'/avalue',
              //   name:'avalue',
              //   meta: {title: '风险评估'},
              //   children:[
            // // æ•°æ®åˆ†é™©æ¨¡åž‹
            // {
            //   path: "/avgDay",
@@ -63,6 +38,31 @@
            //   meta: { title: '综合风险排名' },
            //   component: () => import('@/views/line_graph/SiteComprehensiveRskRanking.vue')
            // },
              //     ]
              // },
              
            // æ•°æ®åˆ†é™©æ¨¡åž‹
            {
              path: "/avgDay",
              name: 'avgDay',
              meta: { title: '数据分险模型' },
              component: () => import('@/views/line_graph/DataRiskModel.vue')
            },

            //  æ•°æ®é£Žé™©æŽ’名
            {
              path: "/analysis",
              name: 'analysis',
              meta: { title: '数据风险排名' },
              component: () => import('@/views/line_graph/DataRiskRank.vue')
            },
            //  æ•°æ®é£Žé™©æŽ’名
            {
              path: "/riskrank",
              name: 'riskrank',
              meta: { title: '综合风险排名' },
              component: () => import('@/views/line_graph/SiteComprehensiveRskRanking.vue')
            },
       
            // é£žè¡Œå·¡æ£€
            {

 src/sfc/AreaAndmonitorType.vue

@@ -6,6 +6,13 @@

<script>
  export default {
    props:{ 
      isHideArea:{
        type:Number,
        default:0
      }
     
    },
    emits:['submitArea','submitMonitore'],
        
    data() {
@@ -41,7 +48,7 @@

<template>
<div class="container">
  <div class="container-text">
  <div class="container-text" v-show="!isHideArea"> 
    <el-text size="large" class="text">区域：</el-text>
    <el-select v-model="areaValue" disabled placeholder="Select" size="default"  @change="submitAreaValue">
    <el-option
@@ -52,6 +59,7 @@
    />
  </el-select>
</div>

<div>
  <el-text class="text">监测类型：</el-text>
    <el-select v-model="monitorValue"  disabled  placeholder="Select" size="default"  @change="submitMonitorValue">

 src/sfc/DaySelect.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,84 @@
<script>
import dayjs from 'dayjs';
  export default {
    props: {
    dayBegin:{
        type:String,
        default:''
    }
  },
  emits: ['submitTime'],
    data() {
      return{
        day:'',
        shortcuts : [
        {
          text: '前一日',
          value: () => {
            const start = dayjs().subtract(1,'day').format('YYYY-MM-DD')
            return start
          }
        },

        {
          text: '前7天',
          value: () => {
            const start = dayjs().subtract(7,'day').format('YYYY-MM-DD');
            return start
          }
        },
        {
          text: '上一月',
          value: () => {
            const start = dayjs().subtract(1,'month').format('YYYY-MM-DD');
            return start
          }
        }
        ]
      }
    },
    watch:{
        dayBegin(){
            if(this.dayBegin!=''){
                this.day=this.dayBegin
            }
        }
    },
    mounted() {
        this.$emit('submitTime', this.day);
    },
    methods: {
        disabledDate(day) {
        return day.getTime() > Date.now()
        }
     }
}
</script>

<template>
    <div class="block">
        <span class="demonstration">选择日期：</span>
        <el-date-picker
          v-model="day"
          type="date"
          placeholder="选择日期"
          :disabled-date="disabledDate"
          :shortcuts="shortcuts"
          @change="$emit('submitTime', day)"
        
        />
    </div>

</template>

<style  scoped>

.demonstration {
  color: #333333;
  font-weight: bold;
  font-size: 14px;
}
/* :deep(.el-input__inner) {
    width: 50%;
} */
</style>

 src/sfc/ExceptionType.vue

@@ -32,8 +32,8 @@
                // this.exceptionType = response.data.data
                response.data.data.forEach(item => {
                    this.exceptionType.push(item.exceptionType)

                });
                // console.log('获取到的异常类型：',this.exceptionType);
                let a = ['0','1','2','3','4','5','6','7']
                a.forEach(item=>{
                  if(this.exceptionType.indexOf(item) == -1){
@@ -91,7 +91,6 @@
    display: flex; 
}
.exception-text {
  // font-weight: bold;
  font-size: 14px;
  color: #333333;
  margin-top: 5px;

 src/sfc/TimeShortCuts.vue

@@ -18,6 +18,12 @@
import dayjs from 'dayjs';
export default {
  props: {
    beginAndEndTime:{
      type:Object,
      default: ()=>{
        return []
      }
    },
    timeType: {
      type: String,
      default: 'month'
@@ -29,8 +35,19 @@
      //保存开始和结束时间
      // éšä¾¿è®¾ç½®åˆå§‹å€¼ ï¼Œmounted时再设正确的，目的是改变时间了触发change
      time: ['2023-06-01 12:00:00', '2023-06-20 16:00:00'],
      shortcuts: []
      shortcuts: [],
      defaultTime :[
        new Date(2000, 1, 1, 0, 0, 0),
        new Date(2000, 2, 1, 23, 59, 59),
      ]
    };
  },
  watch:{
    beginAndEndTime(){
      if(this.beginAndEndTime.lenth!=0){
        this.time = this.beginAndEndTime
      }
    }
  },
  mounted() {
    this.initShortCuts();
@@ -113,6 +130,7 @@
      end-placeholder="结束时间"
      value-format="YYYY-MM-DD HH:mm:ss"
      @change="$emit('submitTime', time)"
      :default-time = "defaultTime"
      
    />
  </div>

 src/utils/risk_estimate_common_function/rank.js

@@ -18,9 +18,11 @@

  fetchData(beginTime, endTime) {
    return new Promise((resolve, reject) => {
      // èŽ·å–统计分析数据
      exceptionApi.analysisdataByTimeAndType(beginTime, endTime, 'day').then((response) => {
        const chartData = response.data.data
        console.log('fenxi:', chartData)
        // èŽ·å–异常数据
        exceptionApi
          .exceptiondata1({
            siteName: '',

 src/views/exception/FlightInspection.vue

@@ -146,15 +146,36 @@
  watch: {
    selectedRowIndex(newVaue) {
      // å¤„于表格的最后一条数据 è®¾ç½®â€˜ä¸Šä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      if (newVaue === this.displayData.length - 1) {
      // if (newVaue === this.displayData.length - 1) {
      //   this.dialog.isPreCantouch = true
      //   //用户先点了第一条，pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
      //   if (this.dialog.isNextCantouch == true) {
      //     this.dialog.isNextCantouch = false
      //   }
      // }
      // // å¤„于表格第一条数据 è®¾ç½®â€˜ä¸‹ä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      // else if (newVaue === 0) {
      //   this.dialog.isNextCantouch = true
      //   //用户先点了表格最后一条,next为true,然后点击第一条，pre为true。此时两个按钮都被封锁
      //   if (this.dialog.isPreCantouch == true) {
      //     this.dialog.isPreCantouch = false
      //   }
      // }
      // // å¤„于表格的中间行 å°†æŒ‰é’®è®¾ç½®ä¸ºå¯ç‚¹å‡»çŠ¶æ€
      // else {
      //   this.dialog.isPreCantouch = false
      //   this.dialog.isNextCantouch = false
      // }
      // å¤„于表格的最后一条数据 è®¾ç½®â€˜ä¸Šä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      if (newVaue === 0) {
        this.dialog.isPreCantouch = true
        //用户先点了第一条，pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
        if (this.dialog.isNextCantouch == true) {
          this.dialog.isNextCantouch = false
        }
      }
      // å¤„于表格第一条数据 è®¾ç½®â€˜ä¸‹ä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      else if (newVaue === 0) {
      // å¤„于表格第一条数据 è®¾ç½®â€˜ä¸Šä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      else if (newVaue === this.displayData.length - 1) {
        this.dialog.isNextCantouch = true
        //用户先点了表格最后一条,next为true,然后点击第一条，pre为true。此时两个按钮都被封锁
        if (this.dialog.isPreCantouch == true) {
@@ -435,6 +456,13 @@
        // æ–­ç”µæˆ–断网  æ—¶é—´æ®µ
        case '0':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
            tooltip: {},
            toolbox: {
              // å·¥å…·æ 
@@ -489,6 +517,13 @@
        // è¶…æ ‡
        case '2':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
            tooltip: {},
            toolbox: {
              // å·¥å…·æ 
@@ -601,6 +636,13 @@
        // æ•°æ®è¶…低 åªæœ‰æ—¶é—´ç‚¹
        case '1':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
            tooltip: {},
            toolbox: {
              // å·¥å…·æ 
@@ -697,6 +739,13 @@
        // æ•°æ®é•¿æ—¶æ®µæ— æ³¢åŠ¨ 
        case '3':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
            tooltip: {},
            toolbox: {
              // å·¥å…·æ 
@@ -785,6 +834,13 @@
        case '6':
        case '7':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
            tooltip: {},
            toolbox: {
              // å·¥å…·æ 
@@ -1539,9 +1595,10 @@
        <el-table-column prop="region" label="区域" align="center" show-overflow-tooltip />
        <el-table-column prop="beginTime" label="开始时间" align="center" show-overflow-tooltip />
        <el-table-column prop="endTime" label="结束时间" align="center" show-overflow-tooltip />
        <el-table-column prop="typename" label="场景" align="center" show-overflow-tooltip />
        <el-table-column prop="typename" label="场景" align="center" width="82" show-overflow-tooltip />
        <el-table-column prop="address" label="地址" align="center" show-overflow-tooltip />
        <el-table-column prop="dutyCompany" label="运维商" align="center" show-overflow-tooltip />
        
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button type="primary" class="table-button" @click="showDialog(row)"
@@ -1580,8 +1637,9 @@
      <div class="diag-head">
        <div class="diag-head-text">
          <div><span class="diag-head-text1">站点名称：</span>{{ tableCurrentRowData.name }}</div>

          <div>
          <div><span class="diag-head-text1">设备编号：</span>{{ tableCurrentRowData.mnCode }}</div>
          <div><span class="diag-head-text1">运维商：</span>{{ tableCurrentRowData.dutyCompany }}</div>
          <!-- <div>
            <span class="diag-head-text1">异常类型：</span>
            <span v-if="tableCurrentRowData.exceptionType == '0'">数据缺失异常</span>
            <span v-else-if="tableCurrentRowData.exceptionType == '1'">数据超低</span>
@@ -1591,7 +1649,7 @@
            <span v-else-if="tableCurrentRowData.exceptionType == '5'">临近超标异常</span>
            <span v-else-if="tableCurrentRowData.exceptionType == '6'">单日超标次数临界异常</span>
            <span v-else-if="tableCurrentRowData.exceptionType == '7'">滑动平均值异常</span>
          </div>
          </div> -->

          <div>
            <span class="diag-head-text1">异常时间段：</span>{{ tableCurrentRowData.beginTime }} ~
@@ -1599,7 +1657,7 @@
          </div>
        </div>

        <div class="chart-jump-button">
        <!-- <div class="chart-jump-button">
          <el-button
            type="danger"
            :loading="loading.preButton"
@@ -1614,7 +1672,24 @@
            @click="getNextRowData"
            >下条异常</el-button
          >
        </div> -->
        <div class="chart-jump-button">
          <el-button
            type="danger"
            :loading="loading.preButton"
            :disabled="dialog.isPreCantouch || flag.banTouch"
            @click="getNextRowData"
            >上条异常</el-button
          >
          <el-button
            type="danger"
            :loading="loading.afterButton"
            :disabled="dialog.isNextCantouch || flag.banTouch"
            @click="getPreviousRowData"
            >下条异常</el-button
          >
        </div>

      </div>
    </template>

@@ -1638,9 +1713,9 @@
          fixed
          :index="indexMethod2"
        ></el-table-column>
        <el-table-column fixed prop="name" label="站点名称" show-overflow-tooltip />
        <!-- <el-table-column fixed prop="name" label="站点名称" show-overflow-tooltip />
        <el-table-column prop="mnCode" label="设备编号" align="center" show-overflow-tooltip />
        <el-table-column prop="dutyCompany" label="运维商" align="center" show-overflow-tooltip />
        <el-table-column prop="dutyCompany" label="运维商" align="center" show-overflow-tooltip /> -->
        <el-table-column prop="lst" label="采集时间" align="center" show-overflow-tooltip />
        <el-table-column
          prop="dustValue"
@@ -1673,9 +1748,7 @@
</template>

<style lang="scss" scoped>
.all-container{
  // min-width: 1200px;
}

.el-row {
  margin-left: 10px;
}
@@ -1688,8 +1761,7 @@
  margin-right: 5px;
}
.head-container-search {
  // display: flex;
  // justify-content: flex-end;

  float: right;
}

@@ -1709,15 +1781,15 @@


.card-text1 {
  // é»‘体的异常名字部分
  /* é»‘体的异常名字部分 */
  margin: 10px;
}
.card-text1 + div {
  // é»‘体的异常名字下面的
  /* é»‘体的异常名字下面的 */
  margin: 12px;
}
.card-exception-buttom {
  // å¼‚常站点文本按钮区域
  /* å¼‚常站点文本按钮区域 */
  padding: 11px;
}
.card-header {
@@ -1746,19 +1818,18 @@
  white-space: nowrap;
}
.card-exceptionname-text1 {
  // å¼‚常站点占比
  /*  å¼‚常站点占比 */
  font-size: 14px;
  white-space: nowrap;
}

.card-exceptionname-text2 {
  // å¼‚常数占比的外边距
  // margin-left: 50px;
  /* å¼‚常数占比的外边距 */
  font-size: 14px;
  white-space: nowrap;
}
.text-blank {
  // é€—号
   /* é€—号 */
  margin-right: 10px;
  color: #000000;
}
@@ -1788,24 +1859,18 @@
/* è¡¨æ ¼æ¨¡å—结束 */

/* æŸ¥çœ‹è¯¦æƒ…对话框模块的样式 */
// :deep(.exception-dialog) {
//  max-height: 600px;
// }

.diag-head {
  // å¯¹è¯æ¡†å¤´éƒ¨åŒºåŸŸ
  /* å¯¹è¯æ¡†å¤´éƒ¨åŒºåŸŸ */
  min-height: 200px;
  // border: 1px solid #fdc2db;
}
.diag-head-text1 {
  // å¯¹è¯æ¡†å¤´éƒ¨çš„属性字段加粗
  /* å¯¹è¯æ¡†å¤´éƒ¨çš„属性字段加粗 */
  font-weight: bold;
}
.diag-head-text span:nth-child(2) {
  // å¯¹è¯æ¡†å¤´éƒ¨â€˜å¼‚常类型’属性
  // margin-left: 150px;
}

.diag-head-text > div {
  // å¯¹è¯æ¡†å¼‚常时间段
  /*  å¯¹è¯æ¡†å¼‚常时间段 */
  margin-top: 15px;
}
.diag-head-text {

 src/views/exception/SiteAuditAssistance.vue

@@ -12,6 +12,7 @@
import { ElMessage, ElMessageBox } from 'element-plus'
import ButtonClick from '@/sfc/ButtonClick.vue'
import index from '@/utils/exception_common_function/index.js'
import DaySelect from '@/sfc/DaySelect.vue';
export default {
  components: {
    ExceptionType,
@@ -19,7 +20,8 @@
    TimeShortCuts,
    DustLineChart,
    AreaAndmonitorType,
    ButtonClick
    ButtonClick,
    DaySelect
  },
  data() {
    return {
@@ -30,6 +32,9 @@
        // é€‰æ‹©çš„异常类型
        exceptionName: []
      },
      // æ—¥æœŸé€‰æ‹©
      day:'',
      // æ—¥æœŸæ—¶é—´é€‰æ‹©
      beginTime: '',
      endTime: '',
      // è¿”回的数据
@@ -116,16 +121,38 @@
  // ç›‘听  åˆ¤æ–­æŒ‰é’®æ˜¯å¦å¯ç‚¹å‡»
  watch: {
    selectedRowIndex(newVaue) {
      // // å¤„于表格的最后一条数据 è®¾ç½®â€˜ä¸Šä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      // if (newVaue === this.displayData.length - 1) {
      //   this.dialog.isPreCantouch = true
      //   //用户先点了第一条，pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
      //   if (this.dialog.isNextCantouch == true) {
      //     this.dialog.isNextCantouch = false
      //   }
      // }
      // // å¤„于表格第一条数据 è®¾ç½®â€˜ä¸‹ä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      // else if (newVaue === 0) {
      //   this.dialog.isNextCantouch = true
      //   //用户先点了表格最后一条,next为true,然后点击第一条，pre为true。此时两个按钮都被封锁
      //   if (this.dialog.isPreCantouch == true) {
      //     this.dialog.isPreCantouch = false
      //   }
      // }
      // // å¤„于表格的中间行 å°†æŒ‰é’®è®¾ç½®ä¸ºå¯ç‚¹å‡»çŠ¶æ€
      // else {
      //   this.dialog.isPreCantouch = false
      //   this.dialog.isNextCantouch = false
      // }

      // å¤„于表格的最后一条数据 è®¾ç½®â€˜ä¸Šä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      if (newVaue === this.displayData.length - 1) {
        if (newVaue === 0) {
        this.dialog.isPreCantouch = true
        //用户先点了第一条，pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
        if (this.dialog.isNextCantouch == true) {
          this.dialog.isNextCantouch = false
        }
      }
      // å¤„于表格第一条数据 è®¾ç½®â€˜ä¸‹ä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      else if (newVaue === 0) {
      // å¤„于表格第一条数据 è®¾ç½®â€˜ä¸Šä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      else if (newVaue === this.displayData.length - 1) {
        this.dialog.isNextCantouch = true
        //用户先点了表格最后一条,next为true,然后点击第一条，pre为true。此时两个按钮都被封锁
        if (this.dialog.isPreCantouch == true) {
@@ -137,6 +164,7 @@
        this.dialog.isPreCantouch = false
        this.dialog.isNextCantouch = false
      }

    },

    dialogTableVisible() {
@@ -187,6 +215,12 @@
  },

  methods: {
    giveDay(val){
      // å°†ä¸­å›½æ ‡å‡†æ—¶é—´è½¬ä¸ºæŒ‡å®šæ ¼å¼(该组件返回的标准时间的格式，所以必须的加这个函数)

        this.beginTime = dayjs(val).format('YYYY-MM-DD 00:00:00');
        this.endTime = dayjs(val).format('YYYY-MM-DD 23:59:59');
    },
    /**
     * å®¡è®¡å†…容保存为草稿
     * @param：
@@ -544,6 +578,14 @@
        // æ–­ç”µæˆ–断网  æ—¶é—´æ®µ
        case '0':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
         
            tooltip: {},
            toolbox: {
              // å·¥å…·æ 
@@ -598,6 +640,13 @@
        // è¶…æ ‡
        case '2':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
            tooltip: {},
            toolbox: {
              // å·¥å…·æ 
@@ -710,6 +759,13 @@
        // æ•°æ®è¶…低 åªæœ‰æ—¶é—´ç‚¹
        case '1':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
            tooltip: {},
            toolbox: {
              // å·¥å…·æ 
@@ -805,6 +861,13 @@
          break
        case '3':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
            tooltip: {},
            toolbox: {
              // å·¥å…·æ 
@@ -888,14 +951,22 @@
          }
          break
        case '4':
        case '5':
        case '6':
        case '7':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
            tooltip: {},
            toolbox: {
              // å·¥å…·æ 
              feature: {
                //     dataZoom: {
                //   yAxisIndex: 'none'
                // },
    
                // ä¿å­˜ä¸ºå›¾ç‰‡
                saveAsImage: {}
              }
@@ -1245,17 +1316,26 @@
        <el-form :inline="true">
          <div class="head-container-text">
            <el-form-item>
              <AreaAndmonitorType></AreaAndmonitorType>
              <AreaAndmonitorType :isHideArea="1"></AreaAndmonitorType>
            </el-form-item>

            <el-form-item>
              <InputSearch isNeedDefaultSite="0" isNeedRealTimeAdvice="1" :exceptionType="form.exceptionName" :beginTime="beginTime" :endTime="endTime" @submit-value="(n) => (form.name = n)">
              </InputSearch>
            </el-form-item>

            <el-form-item>
              <DaySelect
                @submit-time="giveDay"
                :day-begin="beginTime"
              ></DaySelect>
            </el-form-item>

            <el-form-item>
              <TimeShortCuts
                @submit-time="giveTime"
                timeType="day"
                :begin-and-end-time="[beginTime,endTime]"
              ></TimeShortCuts>
            </el-form-item>

@@ -1335,7 +1415,7 @@
        <el-table-column prop="region" label="区域" align="center" show-overflow-tooltip />
        <el-table-column prop="beginTime" label="开始时间" align="center" show-overflow-tooltip />
        <el-table-column prop="endTime" label="结束时间" align="center" show-overflow-tooltip />
        <el-table-column prop="typename" label="场景" align="center" show-overflow-tooltip />
        <el-table-column prop="typename" label="场景" align="center" width="82" show-overflow-tooltip />
        <el-table-column prop="address" label="地址" align="center" show-overflow-tooltip />
        <el-table-column prop="dutyCompany" label="运维商" align="center" show-overflow-tooltip />
        <el-table-column label="操作" align="center" width="200" fixed="right">
@@ -1472,8 +1552,9 @@
      <div class="diag-head">
        <div class="diag-head-text">
          <div><span class="diag-head-text1">站点名称：</span>{{ tableCurrentRowData.name }}</div>

          <div>
          <div><span class="diag-head-text1">设备编号：</span>{{ tableCurrentRowData.mnCode }}</div>
          <div><span class="diag-head-text1">运维商：</span>{{ tableCurrentRowData.dutyCompany }}</div>
          <!-- <div>
            <span class="diag-head-text1">异常类型：</span>
            <span v-if="tableCurrentRowData.exceptionType == '0'">数据缺失异常</span>
            <span v-else-if="tableCurrentRowData.exceptionType == '1'">数据超低</span>
@@ -1483,7 +1564,7 @@
            <span v-else-if="tableCurrentRowData.exceptionType == '5'">临近超标异常</span>
            <span v-else-if="tableCurrentRowData.exceptionType == '6'">单日超标次数临界异常</span>
            <span v-else-if="tableCurrentRowData.exceptionType == '7'">滑动平均值异常</span>
          </div>
          </div> -->

          <div>
            <span class="diag-head-text1">异常时间段：</span>{{ tableCurrentRowData.beginTime }} ~
@@ -1491,7 +1572,7 @@
          </div>
        </div>

        <div class="chart-jump-button">
        <!-- <div class="chart-jump-button">
          <el-button
            type="danger"
            :loading="loading.preButton"
@@ -1504,6 +1585,22 @@
            :loading="loading.afterButton"
            :disabled="dialog.isNextCantouch || flag.banTouch"
            @click="getNextRowData"
            >下条异常</el-button
          >
        </div> -->
        <div class="chart-jump-button">
          <el-button
            type="danger"
            :loading="loading.preButton"
            :disabled="dialog.isPreCantouch || flag.banTouch"
            @click="getNextRowData"
            >上条异常</el-button
          >
          <el-button
            type="danger"
            :loading="loading.afterButton"
            :disabled="dialog.isNextCantouch || flag.banTouch"
            @click="getPreviousRowData"
            >下条异常</el-button
          >
        </div>
@@ -1529,9 +1626,9 @@
          fixed
          :index="indexMethod2"
        ></el-table-column>
        <el-table-column fixed prop="name" label="站点名称" show-overflow-tooltip />
        <!-- <el-table-column fixed prop="name" label="站点名称" show-overflow-tooltip />
        <el-table-column prop="mnCode" label="设备编号" align="center" show-overflow-tooltip />
        <el-table-column prop="dutyCompany" label="运维商" align="center" show-overflow-tooltip />
        <el-table-column prop="dutyCompany" label="运维商" align="center" show-overflow-tooltip /> -->
        <el-table-column prop="lst" label="采集时间" align="center" show-overflow-tooltip />
        <el-table-column
          prop="dustValue"
@@ -1574,7 +1671,7 @@
.head-container-search {
  display: flex;
  justify-content: space-between;
  // float: right;
  
}
.head-describtion-text {
  justify-content: flex-end;
@@ -1585,9 +1682,7 @@
/* æ¡ä»¶æŸ¥è¯¢æ¨¡å—结束 */

/*分析 */

.checknum {
  // border: 2px solid orange;
  margin: 10px 5px 20px 20px;
  display: flex;
}
@@ -1616,7 +1711,7 @@
:global(.el-table .deep-gray-row) {
  color: #7f9fcf;
}
//对话框标题
/* å¯¹è¯æ¡†æ ‡é¢˜ */
.el-form-item__labe {
  font-weight: bold;
}
@@ -1625,7 +1720,6 @@
  margin-right: 20px;
}
.check-button {
  // justify-content: flex-end;
  float: right;
  margin-top: 10px;
  margin-right: 20px;
@@ -1636,19 +1730,15 @@
/* è¡¨æ ¼æ¨¡å—结束 */

/* æŸ¥çœ‹è¯¦æƒ…对话框模块的样式 */
.diag-head {
  // å¯¹è¯æ¡†å¤´éƒ¨åŒºåŸŸ
  // min-height: 200px;
  // border: 1px solid #fdc2db;
}


.diag-head-text1 {
  // å¯¹è¯æ¡†å¤´éƒ¨çš„属性字段加粗
  /* å¯¹è¯æ¡†å¤´éƒ¨çš„属性字段加粗 */
  font-weight: bold;
}

.diag-head-text > div {
  // å¯¹è¯æ¡†å¼‚常时间段
  /* å¯¹è¯æ¡†å¼‚常时间段 */
  margin-top: 15px;
}

@@ -1660,16 +1750,13 @@
}

.chart-jump-button {
  // â€˜ä¸Šä¸€æ¡â€™ï¼Œâ€˜ä¸‹ä¸€æ¡â€™ æŒ‰é’®
  // min-height: 30px;
  // width: 200px;
  // float: right;
 
  display: flex;
  justify-content: right;
}

.line-chart {
  // å¼‚常折线图
  /*  å¼‚常折线图 */
  width: 920px;
  height: 300px;
  margin-bottom: 20px;

 src/views/exception/components/DustExceptionText.vue

@@ -51,7 +51,5 @@
  color: #333333;
  font-size: 14px;
}
// .text:hover{
//   color: #2876aa;
// }

</style>

 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() {
@@ -102,8 +107,17 @@
    // 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,16 +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>
    <el-form-item class="form-item">
      <!-- <InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" :siteName="form.name"></InputSearch> -->
      <InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" ></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>

    
@@ -262,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
@@ -284,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
@@ -294,7 +420,7 @@
                'weightColor-heigh': weight >= 0.6
              }"
            >
              é£Žé™©å€¼ï¼š{{ weight }}
              é£Žé™©å€¼(0~1)：{{ weight }}
            </h1>
          </template>
          <div class="risk-grade">
@@ -327,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>

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



    <el-row :gutter="20">
      <el-col :span="12"> 
        <el-card shadow="never" class="card-value">
@@ -363,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">
@@ -389,6 +519,9 @@
.el-form {
  margin: 10px;
}
.form-item {
  margin-top:10px;
}
.chart-container {
  margin-left: 10px;
}
@@ -400,7 +533,7 @@
  border-radius: 9px;
}
.chart-container {
  width: 95%;
  width: 98%;
  /* height: 600px; */
}
.card-value {
@@ -474,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>

 src/views/line_graph/DataRiskRank.vue

@@ -44,8 +44,8 @@
  },

  mounted() {
    console.log(this.$route.matched);
    this.form.name = '';
    this.fetchData()
  },
  methods: {
    // åŠŸèƒ½ï¼šå¯¼å‡ºä¸ºExcel
@@ -148,6 +148,7 @@
      }
      this.loading = true;
      this.queryButton = true
      this.isNoData = false
      this.$http
        .get('/dust/analysistime', { params: params })
        .then((response) => {

 src/views/line_graph/SiteComprehensiveRskRanking.vue

@@ -101,7 +101,7 @@
      // å…¶ä¸­ä¸€ä¸ª40是盒子的总外边距
      this.tableHeight = `calc(100vh - ${h1}px  - 40px - 40px - var(--el-main-padding) * 2`
    },
    // ç‚¹å‡»å±•ç¤ºæŒ‰é’®
    // ç‚¹å‡»é£Žé™©æŽ’名按钮
    fetchData() {
      this.loading = true
      this.queryButton = true
@@ -136,6 +136,7 @@

              this.$nextTick(()=>{
              this.$refs.table.sort('riskValue','descending')
              
            })

            })