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

zmc

2023-10-26 73b40d54554307ced5aab5b89dff6e1980e8a242

 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
      // // 处于表格的最后一条数据 设置‘上一条’按钮不可点
      // 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) {
@@ -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;