扬尘Vue

zmc

2023-08-31 17388fa7ecd1f3ebadad470a463573a1cfe4468f

 src/views/exception/SiteAuditAssistance.vue

ÎļþÃû´Ó src/views/exception/ExceptionTest.vue ÐÞ¸Ä
@@ -2,7 +2,6 @@
import InputSearch from '../../sfc/InputSearch.vue';
import ExceptionType from '../../sfc/ExceptionType.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'
@@ -18,7 +17,7 @@
    ExceptionType,
    InputSearch,
    TimeSelectWithShortCuts,
    DustExceptionText,
  
    DustLineChart,
    AreaAndmonitorType
  },
@@ -181,31 +180,17 @@
    }
  },
  mounted() {
    // æµ‹è¯•ç»„合式函数
    // let param = {
    //   siteName: '金山区金山新城JSC1-0401单元1-11-01地块项目09',
    //   beginTime: '2023-07-01 00:00:00',
    //   endTime: '2023-07-10 00:00:00'
    // };
    // this.backData = this.request('/dust/history1', param);
    // console.log('历史数据为：', this.backData.value);


    this.backExceptionDataAWeekAgo();
    // this.calTableHeight();
    this.calTableHeight();
    // æŸ¥è¯¢æ—¶é—´æ®µçš„各异常的站点，查询该时间区间的各异常数量
    this.getShopNames();
    // this.exception.exception0 = this.getSiteNameByExceptionType('0',this.beginTime,this.endTime)
    // console.log('异常数据为：',this.exception.exception0);

  },

  methods: {


    // getExceptionSiteNum(){
    //   this.$http.get('/dust/exceptionsitenum').then(result => {
    //     this.exceptionSiteNum = result.data.data.length 
    //   })
    // },
    /**
     * description：点击异常站点名字时 è¿”回的数据
     * @param： 
@@ -1300,10 +1285,9 @@
    calTableHeight() {
      const h1 = this.$refs.h1.$el.offsetHeight;
      const h2 = this.$refs.h2.$el.offsetHeight;
      const h3 = this.$refs.h3.$el.offsetHeight;
      const h4 = this.$refs.h4.$el.offsetHeight;
      // å…¶ä¸­ä¸€ä¸ª40是盒子的总外边距
      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - ${h3}px - ${h4}px - 40px - var(--el-main-padding) * 2)`;
      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px  - ${h4}px - 100px - var(--el-main-padding) * 2)`;
    },

    // é¡µå¤§å°æ”¹å˜æ—¶è§¦å‘
@@ -1395,615 +1379,6 @@
    </el-row>
  </el-row>

  <el-row ref="h3">
    <el-col>
      <el-card>
        <template #header>
          <div class="card-header">异常分析</div>
        </template>

        
      <el-row :gutter="20" class="card-row" > 
          <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.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">
                <el-scrollbar>
             
                <span class="card-exceptionname-text1">异常站点占比:</span>
                <span>{{ exception.exception2.length }} /{{ siteTotal }}</span>
                <span>
                  ({{
                    ((exception.exception2.length / siteTotal) * 100).toFixed(
                      1
                    )
                  }}%)</span
                >
         
                <div class="card-exceptionname-text2"
                  >异常数占比:{{
                    (
                      (exception.exception2Num /
                        (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="2"
                  :begin-time="beginTime"
                  :end-time="endTime"
                    @submit-exception-data="getAbnormalDataByClick"

                    v-for="(item, index) in exception.exception2"
                    :key="item"
                    >{{ item.name }}
                    <span
                      v-if="index < exception.exception2.length - 1"
                      class="text-blank"
                      >,</span
                    >
                  </DustExceptionText>
                </el-scrollbar>
              </div>
              <!-- ç»“束 -->
            </div>
          </el-col>
          <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">
                <el-scrollbar>
                <span class="card-exceptionname-text1">异常站点占比:</span>
                <span>{{ exception.exception0.length }} /{{ siteTotal }}</span>
                <span>
                  ({{
                    ((exception.exception0.length / siteTotal) * 100).toFixed(
                      1
                    )
                  }}%)</span
                >
                <div class="card-exceptionname-text2"
                  >异常数占比:{{
                    (
                      (exception.exception0Num /
                        (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="0"
                  :begin-time="beginTime"
                  :end-time="endTime"
                    @submit-exception-data="getAbnormalDataByClick"

                    v-for="(item, index) in exception.exception0"
                    :key="item"
                    >{{ item.name }}
                    <span
                      v-if="index < exception.exception0.length - 1"
                      class="text-blank"
                      >,</span
                    >
                  </DustExceptionText>
                </el-scrollbar>
              </div>
              <!-- ç»“束 -->
            </div>
          </el-col>
          <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">
                <el-scrollbar>
                <span class="card-exceptionname-text1">异常站点占比:</span>
                <span>{{ exception.exception1.length }} /{{ siteTotal }}</span>
                <span>
                  ({{
                    ((exception.exception1.length / siteTotal) * 100).toFixed(
                      1
                    )
                  }}%)</span
                >
                <div class="card-exceptionname-text2"
                  >异常数占比:{{
                    (
                      (exception.exception1Num /
                        (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="1"
                  :begin-time="beginTime"
                  :end-time="endTime"
                    @submit-exception-data="getAbnormalDataByClick"

                    v-for="(item, index) in exception.exception1"
                    :key="item"
                    >{{ item.name }}
                    <span
                      v-if="index < exception.exception1.length - 1"
                      class="text-blank"
                      >,</span
                    >
                  </DustExceptionText>
                </el-scrollbar>
              </div>
              <!-- ç»“束 -->
            </div></el-col
          >
          <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">
                <el-scrollbar>
                <span class="card-exceptionname-text1">异常站点占比:</span>
                <span>{{ exception.exception3.length }} /{{ siteTotal }}</span>
                <span>
                  ({{
                    ((exception.exception3.length / siteTotal) * 100).toFixed(
                      1
                    )
                  }}%)</span
                >
                <div class="card-exceptionname-text2"
                  >异常数占比:{{(100-
                    
                      ((exception.exception0Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    ) - 
                    ((exception.exception1Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    ) - 
                    ((exception.exception2Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          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)
                  }}%</div
                >
               </el-scrollbar>
              </div>
              <hr />
              <!-- å¼‚常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="3"
                  :begin-time="beginTime"
                  :end-time="endTime"
                    @submit-exception-data="getAbnormalDataByClick"

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



      </el-card>
    </el-col>
  </el-row>

  <el-row>
    <el-col v-show="!isNoData">