扬尘Vue

zmc

2023-08-30 b7b35d8bd8f0ff7fe4e1aa6c69a877551bed81a3

 src/views/exception/FlightInspection.vue

@@ -1,10 +1,11 @@
<script>
import InputSearch from '../../sfc/InputSearch.vue';
import ExceptionType from '../../sfc/ExceptionType.vue';
import TimeSelect from '../../sfc/TimeSelect.vue';
import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue';
import DustExceptionText from '../../sfc/DustExceptionText.vue';
import { useFetch } from '../../utils/fetch.js';
import { useCommonFunction } from '../../utils/common.js';
import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue'

//  异常图形异步组件
const DustLineChart = defineAsyncComponent(() =>
@@ -16,9 +17,10 @@
  components: {
    ExceptionType,
    InputSearch,
    TimeSelect,
    TimeSelectWithShortCuts,
    DustExceptionText,
    DustLineChart
    DustLineChart,
    AreaAndmonitorType
  },
  data() {
    return {
@@ -37,7 +39,7 @@
      // 表格展示的数据
      displayData: [],
      // 表格高度
      tableHeight: 300,
      tableHeight: 400,
      // 表格数据
      // 当前页
      currentPage: 1,
@@ -59,12 +61,25 @@
        exception2: [],
        // 数据长时段无波动
        exception3: [],
        // 量级突变异常
        exception4: [],
        // 临近超标异常
        exception5: [],
        // 单日超标次数临界异常
        exception6: [],
        // 滑动平均值异常
        exception7: [],
        

        // 该时段的异常数量
        exception0Num: 0,
        exception1Num: 0,
        exception2Num: 0,
        exception3Num: 0
        exception3Num: 0,
        exception4Num: 0,
        exception5Num: 0,
        exception6Num: 0,
        exception7Num: 0,
      },
      // 站点总数量
      siteTotal: 0,
@@ -176,29 +191,15 @@
    // console.log('历史数据为：', this.backData.value);

    this.backExceptionDataAWeekAgo();
    this.calTableHeight();
    // this.calTableHeight();
    // 查询时间段的各异常的站点，查询该时间区间的各异常数量
    this.getShopNames();
    this.test()
    // this.exception.exception0 = this.getSiteNameByExceptionType('0',this.beginTime,this.endTime)
    // console.log('异常数据为：',this.exception.exception0);
  },

  methods: {
    test(){
    const  data = [0.084, 0.073, 0.062, 0.1];
    const  threshold = 0.2;  // 设定的变化率阈值

for (let i = 1; i < data.length; i++) {
  const rateOfChange = Math.abs((data[i] - data[i-1]) / data[i-1]);
  
  console.log('变化率为：',data[i], data[i-1],rateOfChange);
  if (rateOfChange > threshold) {
    console.log(`数据 ${data[i-1]} 到 ${data[i]} 的变化率超过阈值 ${threshold}`);
    // 进行相应的处理
  }
}
    },

    // getExceptionSiteNum(){
    //   this.$http.get('/dust/exceptionsitenum').then(result => {
@@ -797,8 +798,83 @@
            }
          };
          break;
        case '4':
        this.dialog.option = {
            tooltip: {},
            toolbox: {
              // 工具栏
              feature: {
                //     dataZoom: {
                //   yAxisIndex: 'none'
                // },
                // 保存为图片
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              data: xData,
              name: '时间',
              axisLabel: {
                formatter: function (value) {
                  return value.slice(11, -3);
                }
              }
            },
            yAxis: {
              type: 'value',
              name: 'mg/m³'
            },
            series: [
              {
                name: '颗粒物浓度',
                type: 'line',
                data: yData,
                // 变换指定时间区间的背景颜色
                markArea: {
                  itemStyle: {
                    color: 'rgba(255, 173, 177, 0.4)'
                  },
                  data: [
                    [
                      {
                        name: '异常时间段',
                        xAxis: exceptionBeginTime
                      },
                      {
                        xAxis: exceptionEndTime
                      }
                    ]
                  ]
                },
           
              }
            ],
            // 指定时间区间的线段变颜色
            visualMap: {
              show: false,
              dimension: 0,
              pieces: [
                {
                  lte: beginIndex,
                  color: 'green'
                },
                {
                  gt: beginIndex,
                  lte: endIndex,
                  color: 'red'
                },
                {
                  gt: endIndex,
                  lte: xData.length - 1,
                  color: 'green'
                }
              ]
            }
          };
          break;
        default:
          return 'error';
          console.log('没有设置该异常类型！');;
      }
      this.flag.banTouch = 0
    },
@@ -960,6 +1036,40 @@
          this.exception.exception3 = result.data.data;
        });

        this.$http
        .get('/dust/sitenamecode', {
          params: {
            exceptionType: '4',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception.exception4 = result.data.data;
        });
        this.$http
        .get('/dust/sitenamecode', {
          params: {
            exceptionType: '5',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception.exception5 = result.data.data;
        });
        this.$http
        .get('/dust/sitenamecode', {
          params: {
            exceptionType: '6',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception.exception6 = result.data.data;
        });



      /* 异常异常数量 */
@@ -1007,6 +1117,40 @@
        })
        .then((result) => {
          this.exception.exception3Num = result.data.data;
        });
        
        this.$http
        .get('/dust/exceptionnum', {
          params: {
            exceptionType: '4',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception.exception4Num = result.data.data;
        });
        this.$http
        .get('/dust/exceptionnum', {
          params: {
            exceptionType: '5',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception.exception5Num = result.data.data;
        });
        this.$http
        .get('/dust/exceptionnum', {
          params: {
            exceptionType: '6',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception.exception6Num = result.data.data;
        });
    },

@@ -1194,8 +1338,12 @@
      }
    },
    // 表格序号递增
    indexMethod(index) {
    indexMethod1(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize;
    },
    // 表格序号递增
    indexMethod2(index) {
      return index + 1;
    }
  }
};
@@ -1208,6 +1356,9 @@
      <el-form :inline="true">
        <div class="head-container-text">
          <el-form-item>
          <AreaAndmonitorType ></AreaAndmonitorType>
          </el-form-item>
          <el-form-item>
            <InputSearch
              :isNeedDefaultSite="0"
              @submit-value="(n) => (form.name = n)"
@@ -1216,14 +1367,16 @@
            </InputSearch>
          </el-form-item>

          

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

          <el-form-item>
            <ExceptionType
              @submit-value="(n) => form.exceptionName = n"
            ></ExceptionType>
          </el-form-item>

          <el-form-item>
            <TimeSelect @submit-time="giveTime"></TimeSelect>
          </el-form-item>
        </div>

@@ -1248,13 +1401,286 @@
        <template #header>
          <div class="card-header">异常分析</div>
        </template>
        <el-row :gutter="20">

        
      <el-row :gutter="20" class="card-row" > 
          <el-col :span="6">
            <div class="card-content">
            <div class="card-content-unnormal">
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
                <span class="card-header-text">超标</span>
                <span class="card-header-text">量级突变异常</span>
              </div>

              <div class="card-content-text">
                <el-scrollbar>
             
                <span class="card-exceptionname-text1">异常站点占比:</span>
                <span>{{ exception.exception4.length }} /{{ siteTotal }}</span>
                <span>
                  ({{
                    ((exception.exception4.length / siteTotal) * 100).toFixed(
                      1
                    )
                  }}%)</span
                >
         
                <div class="card-exceptionname-text2"
                  >异常数占比:{{
                    (
                      (exception.exception4Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num
                          )) *
                      100
                    ).toFixed(1)
                  }}%</div
                >
           
            </el-scrollbar>
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="4"
                  :begin-time="beginTime"
                  :end-time="endTime"
                    @submit-exception-data="getAbnormalDataByClick"

                    v-for="(item, index) in exception.exception4"
                    :key="item"
                    >{{ item.name }}
                    <span
                      v-if="index < exception.exception4.length - 1"
                      class="text-blank"
                      >,</span
                    >
                  </DustExceptionText>
                </el-scrollbar>
              </div>
              <!-- 结束 -->
            </div>
          </el-col>

          <el-col :span="6">
            <div class="card-content-unnormal">
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
                <span class="card-header-text">临近超标异常</span>
              </div>

              <div class="card-content-text">
                <el-scrollbar>
             
                <span class="card-exceptionname-text1">异常站点占比:</span>
                <span>{{ exception.exception5.length }} /{{ siteTotal }}</span>
                <span>
                  ({{
                    ((exception.exception5.length / siteTotal) * 100).toFixed(
                      1
                    )
                  }}%)</span
                >
         
                <div class="card-exceptionname-text2"
                  >异常数占比:{{
                    (
                      (exception.exception5Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num
                          )) *
                      100
                    ).toFixed(1)
                  }}%</div
                >
           
            </el-scrollbar>
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="5"
                  :begin-time="beginTime"
                  :end-time="endTime"
                    @submit-exception-data="getAbnormalDataByClick"

                    v-for="(item, index) in exception.exception5"
                    :key="item"
                    >{{ item.name }}
                    <span
                      v-if="index < exception.exception5.length - 1"
                      class="text-blank"
                      >,</span
                    >
                  </DustExceptionText>
                </el-scrollbar>
              </div>
              <!-- 结束 -->
            </div>
          </el-col>

          <el-col :span="6">
            <div class="card-content-unnormal">
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
                <span class="card-header-text">单日超标次数临界异常</span>
              </div>

              <div class="card-content-text">
                <el-scrollbar>
             
                <span class="card-exceptionname-text1">异常站点占比:</span>
                <span>{{ exception.exception6.length }} /{{ siteTotal }}</span>
                <span>
                  ({{
                    ((exception.exception6.length / siteTotal) * 100).toFixed(
                      1
                    )
                  }}%)</span
                >
         
                <div class="card-exceptionname-text2"
                  >异常数占比:{{
                    (
                      (exception.exception6Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num
                          )) *
                      100
                    ).toFixed(1)
                  }}%</div
                >
           
            </el-scrollbar>
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="6"
                  :begin-time="beginTime"
                  :end-time="endTime"
                    @submit-exception-data="getAbnormalDataByClick"

                    v-for="(item, index) in exception.exception6"
                    :key="item"
                    >{{ item.name }}
                    <span
                      v-if="index < exception.exception6.length - 1"
                      class="text-blank"
                      >,</span
                    >
                  </DustExceptionText>
                </el-scrollbar>
              </div>
              <!-- 结束 -->
            </div>
          </el-col>

          <el-col :span="6">
            <div class="card-content-unnormal">
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
                <span class="card-header-text">变化趋势异常</span>
              </div>

              <div class="card-content-text">
                <el-scrollbar>
             
                <span class="card-exceptionname-text1">异常站点占比:</span>
                <span>{{ exception.exception7.length }} /{{ siteTotal }}</span>
                <span>
                  ({{
                    ((exception.exception7.length / siteTotal) * 100).toFixed(
                      1
                    )
                  }}%)</span
                >
         
                <div class="card-exceptionname-text2"
                  >异常数占比:{{
                    (
                      (exception.exception7Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num
                          )) *
                      100
                    ).toFixed(1)
                  }}%</div
                >
           
            </el-scrollbar>
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="7"
                  :begin-time="beginTime"
                  :end-time="endTime"
                    @submit-exception-data="getAbnormalDataByClick"

                    v-for="(item, index) in exception.exception7"
                    :key="item"
                    >{{ item.name }}
                    <span
                      v-if="index < exception.exception7.length - 1"
                      class="text-blank"
                      >,</span
                    >
                  </DustExceptionText>
                </el-scrollbar>
              </div>
              <!-- 结束 -->
            </div>
          </el-col>
        </el-row>


        <el-row :gutter="20" >
          <el-col :span="6">
            <div class="card-content-normal">
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
                <span class="card-header-text">浓度超标</span>
              </div>

              <div class="card-content-text">
@@ -1270,17 +1696,23 @@
                  }}%)</span
                >
         
                <span class="card-exceptionname-text2"
                <div class="card-exceptionname-text2"
                  >异常数占比:{{
                    (
                      (exception.exception2Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num)) *
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num
                          
                          )) *
                      100
                    ).toFixed(1)
                  }}%</span
                  }}%</div
                >
           
            </el-scrollbar>
@@ -1288,7 +1720,7 @@
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="100px">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="2"
@@ -1311,11 +1743,11 @@
            </div>
          </el-col>
          <el-col :span="6"
            ><div class="card-content">
            ><div class="card-content-normal">
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
                <span class="card-header-text">断电或断网</span>
                <span class="card-header-text">数据缺失异常</span>
              </div>

              <div class="card-content-text">
@@ -1329,24 +1761,28 @@
                    )
                  }}%)</span
                >
                <span class="card-exceptionname-text2"
                <div class="card-exceptionname-text2"
                  >异常数占比:{{
                    (
                      (exception.exception0Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num)) *
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    ).toFixed(1)
                  }}%</span
                  }}%</div
                >
                </el-scrollbar>
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="100px">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="0"
@@ -1369,7 +1805,7 @@
            </div>
          </el-col>
          <el-col :span="6">
            <div class="card-content">
            <div class="card-content-normal">
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
@@ -1387,24 +1823,28 @@
                    )
                  }}%)</span
                >
                <span class="card-exceptionname-text2"
                <div class="card-exceptionname-text2"
                  >异常数占比:{{
                    (
                      (exception.exception1Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num)) *
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    ).toFixed(1)
                  }}%</span
                  }}%</div
                >
                </el-scrollbar>
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="100px">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="1"
@@ -1427,7 +1867,7 @@
            </div></el-col
          >
          <el-col :span="6"
            ><div class="card-content">
            ><div class="card-content-normal">
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
@@ -1445,40 +1885,97 @@
                    )
                  }}%)</span
                >
                <span class="card-exceptionname-text2"
                <div class="card-exceptionname-text2"
                  >异常数占比:{{(100-
                    
                      ((exception.exception0Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num)) *
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    ) - 
                    ((exception.exception1Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num)) *
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    ) - 
                    ((exception.exception2Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num)) *
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    ) - 
                    ((exception.exception4Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    )- 
                    ((exception.exception5Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    )- 
                    ((exception.exception6Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    )- 
                    ((exception.exception7Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    )


                    ).toFixed(1)
                  }}%</span
                  }}%</div
                >
               </el-scrollbar>
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="100px">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="3"
@@ -1501,6 +1998,9 @@
            </div>
          </el-col>
        </el-row>



      </el-card>
    </el-col>
  </el-row>
@@ -1522,7 +2022,7 @@
          width="60px"
          align="center"
          fixed
          :index="indexMethod"
          :index="indexMethod1"
        />
        <el-table-column prop="name" label="站点名称" show-overflow-tooltip />
        <el-table-column
@@ -1607,8 +2107,12 @@
    <template #header>
      <div class="diag-head">
        <div class="diag-head-text">
          <div>
          <span class="diag-head-text1">站点名称：</span
          >{{ tableCurrentRowData.name }}
          </div>

          <div>
          <span class="diag-head-text1">异常类型：</span>
          <span v-if="tableCurrentRowData.exceptionType == '0'"
            >断电或断网</span
@@ -1620,6 +2124,17 @@
          <span v-else-if="tableCurrentRowData.exceptionType == '3'"
            >数据长时间无波动</span
          >
          <span v-else-if="tableCurrentRowData.exceptionType == '4'"
            >量级突变异常</span
          > <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>
            <span class="diag-head-text1">异常时间段：</span
            >{{ tableCurrentRowData.beginTime }} ~
@@ -1664,7 +2179,7 @@
          width="60px"
          align="center"
          fixed
          :index="indexMethod"
          :index="indexMethod2"
        ></el-table-column>
        <el-table-column
          fixed
@@ -1709,7 +2224,8 @@
          v-show="
            tableCurrentRowData.exceptionType == '1' ||
            tableCurrentRowData.exceptionType == '2' ||
            tableCurrentRowData.exceptionType == '3'
            tableCurrentRowData.exceptionType == '3' ||
            tableCurrentRowData.exceptionType == '4' 
          "
          >异常数据：</span
        >
@@ -1746,6 +2262,8 @@
}
/* 条件查询模块结束 */



/* 异常分析模块的样式 */
.card-text1 {
  // 黑体的异常名字部分
@@ -1764,9 +2282,14 @@
  font-size: 18px;
  font-weight: bold;
}
.card-content {
.card-content-unnormal {
  min-height: 200px;
  border: 2px solid #9fdb1d;
  border: 2px solid #FFCF8B;
  border-radius: 20px;
}
.card-content-normal {
  min-height: 200px;
  border: 2px solid red;
  border-radius: 20px;
}
.card-header-image {
@@ -1788,7 +2311,7 @@

.card-exceptionname-text2 {
  // 异常数占比的外边距
  margin-left: 50px;
  // margin-left: 50px;
  font-size: 14px;
  white-space: nowrap;
}
@@ -1797,11 +2320,19 @@
  margin-right: 10px;
  color: #000000;
}
.card-row {
  margin-bottom: 10px;
}

/* 异常分析模块结束 */

/* 表格模块的样式 */

/* 表格模块结束 */





/* 查看详情对话框模块的样式 */
:deep(.el-dialog) {
@@ -1818,7 +2349,7 @@
}
.diag-head-text span:nth-child(2) {
  // 对话框头部‘异常类型’属性
  margin-left: 150px;
  // margin-left: 150px;
}
.diag-head-text > div {
  // 对话框异常时间段
@@ -1845,5 +2376,11 @@
  margin-bottom: 20px;
  min-width: 600px;
}
.mx-1 {
  position: absolute;
  left: 10px;
  bottom: 10px;

}
/* 查看详情对话框模块结束 */
</style>