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

zmc

2023-10-26 73b40d54554307ced5aab5b89dff6e1980e8a242

 src/views/exception/FlightInspection.vue

@@ -146,15 +146,36 @@
  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) {
@@ -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 {