扬尘Vue

zmc

2023-08-31 17388fa7ecd1f3ebadad470a463573a1cfe4468f

 src/views/exception/FlightInspection.vue

@@ -15,11 +15,8 @@
import dayjs from 'dayjs';
export default {
  components: {
    ExceptionType,
    InputSearch,
    TimeSelectWithShortCuts,
    DustExceptionText,
    DustLineChart,
    AreaAndmonitorType
  },
  data() {
@@ -103,6 +100,8 @@
        afterButton: false,
        // 折线图
        lineChart: false,
        // 异常站点名子文本
        text:false
        
      },

@@ -1358,26 +1357,11 @@
          <el-form-item >
          <AreaAndmonitorType ></AreaAndmonitorType>
          </el-form-item>
          <el-form-item>
            <InputSearch
              :isNeedDefaultSite="0"
              @submit-value="(n) => (form.name = n)"
              @submit-site-Nums="(n) => (siteTotal = n)"
            >
            </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>
        </div>

        <div class="head-container-search">
@@ -1447,7 +1431,7 @@
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
              <div class="card-exception-buttom"   v-loading="loading.text" >
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
@@ -1455,7 +1439,7 @@
                  :begin-time="beginTime"
                  :end-time="endTime"
                    @submit-exception-data="getAbnormalDataByClick"

                    @subloading="(n)=>loading.text=n"
                    v-for="(item, index) in exception.exception4"
                    :key="item"
                    >{{ item.name }}
@@ -1514,7 +1498,7 @@
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
              <div class="card-exception-buttom"   v-loading="loading.text">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
@@ -1581,7 +1565,7 @@
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
              <div class="card-exception-buttom"   v-loading="loading.text">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
@@ -1648,7 +1632,7 @@
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
              <div class="card-exception-buttom"   v-loading="loading.text">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
@@ -1719,7 +1703,7 @@
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
              <div class="card-exception-buttom"   v-loading="loading.text">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
@@ -1781,7 +1765,7 @@
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
              <div class="card-exception-buttom"   v-loading="loading.text">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
@@ -1843,7 +1827,7 @@
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
              <div class="card-exception-buttom"   v-loading="loading.text">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
@@ -1974,7 +1958,7 @@
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
              <div class="card-exception-buttom"   v-loading="loading.text">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
@@ -2005,241 +1989,6 @@
    </el-col>
  </el-row>

  <el-row>
    <el-col v-show="!isNoData">
      <el-table
        ref="table"
        :data="displayData"
        :height="tableHeight"
        highlight-current-row="true"
        size="default"
        v-loading="loading.tableLoading"
        border
      >
        <el-table-column
          type="index"
          label="序号"
          width="60px"
          align="center"
          fixed
          :index="indexMethod1"
        />
        <el-table-column prop="name" label="站点名称" show-overflow-tooltip />
        <el-table-column
          prop="mnCode"
          label="设备编号"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="exception"
          label="异常类型"
          align="center"
          show-overflow-tooltip
        />
        <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="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)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        ref="h4"
        background
        layout="total, sizes, prev, pager, next, jumper"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-col>
  </el-row>

  <el-empty v-show="isNoData" :image-size="200" />

  <el-dialog v-model="dialogTableVisible" draggable align-center height="300px">
    <!-- 头 -->
    <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
          >
          <span v-else-if="tableCurrentRowData.exceptionType == '1'"
            >数据超低</span
          >
          <span v-else-if="tableCurrentRowData.exceptionType == '2'">超标</span>
          <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 }} ~
            {{ tableCurrentRowData.endTime }}
          </div>
        </div>

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

    <!-- :option="dialog.option" -->

    <!-- 图形 -->
    <DustLineChart
      :option="dialog.option"
      :is-open-dialog="dialogTableVisible"
      v-loading="loading.lineChart"
    ></DustLineChart>

    <!-- 表格 -->
    <div>
      <el-table :data="dialog.historyData" size="default" height="200" border>
        <el-table-column
          type="index"
          label="序号"
          width="60px"
          align="center"
          fixed
          :index="indexMethod2"
        ></el-table-column>
        <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="lst"
          label="采集时间"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="dustValue"
          label="颗粒物浓度(mg/m³)"
          align="center"
          show-overflow-tooltip
        />
      </el-table>
    </div>
    <template #footer>
      <el-tag type="success" class="mx-1" effect="dark" round
        ><span
          class="table-line-lable"
          v-show="tableCurrentRowData.exceptionType == '0'"
          >缺失数据：
        </span>
        <span
          v-show="
            tableCurrentRowData.exceptionType == '1' ||
            tableCurrentRowData.exceptionType == '2' ||
            tableCurrentRowData.exceptionType == '3' ||
            tableCurrentRowData.exceptionType == '4' 
          "
          >异常数据：</span
        >
        <span class="table-line-num">{{ dialog.exceptionTotal }}条</span>
        <span
          v-show="
            tableCurrentRowData.exceptionType === '0'
          "
        >
          (逻辑计算)</span
        >
      </el-tag>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>