扬尘Vue

zmc

2023-08-31 17388fa7ecd1f3ebadad470a463573a1cfe4468f

扬尘Vue

 src/api/exportExcel/requetsApi.js

@@ -8,5 +8,11 @@
     */
    fetchAllData(argsObj){
        return $http.get('dust/analysisall',{params:argsObj});
    },

    fetchAlSiteData(argsObj){
        
        return $http.get('dust/historyall',{params:argsObj});
    }

}

 src/api/index.js

@@ -2,7 +2,8 @@
import { setInterceptors } from './config';

// const url = 'http://47.100.191.150:9031/';
const url = 'http://192.168.1.4:8081/';
// const url = 'http://192.168.1.4:8081/';
const url = 'http://localhost:8081/';

//飞羽监管
const $http = axios.create({

 src/components/layout/AppAside.vue

@@ -12,6 +12,7 @@
        ' æ•°æ®é£Žé™©æ¨¡åž‹',
        '数据风险排名',
        '飞行巡检',
        '站点审核辅助',
        '历史数据管理',
        '数据接入管理',
        '业务报表',
@@ -50,9 +51,12 @@
        <el-link href="/hdata" class="logo" >
          <!-- <img src="@/assets/companylogo.png" alt="" /> -->
          <h1>在线监测数据质量评估与风险分析</h1>

       
        </el-link>
 
      </el-space>
      <div class="line">
        </div>
    </el-row>

        <el-scrollbar :height="menuHeight">
@@ -84,9 +88,9 @@
          é£žè¡Œå·¡æ£€
          </el-menu-item>

          <el-menu-item index="testdata" @click="selected = optionClick[2]">
          <el-menu-item index="testdata" @click="selected = optionClick[3]">
            <el-icon><i-ep-Bell /></el-icon>
          å¼‚常测试
          ç«™ç‚¹å®¡æ ¸è¾…助
          </el-menu-item>

        </el-sub-menu>
@@ -98,32 +102,32 @@
          </template>
 
         
            <el-menu-item index="hdata" @click="selected = optionClick[3]">
            <el-menu-item index="hdata" @click="selected = optionClick[4]">
            <el-icon><i-ep-Histogram /></el-icon>
          åŽ†å²æ•°æ®ç®¡ç†
          </el-menu-item>
          <el-menu-item index="management" @click="selected = optionClick[4]">
          <!-- <el-menu-item index="management" @click="selected = optionClick[5]">
            <el-icon><i-ep-Histogram /></el-icon>
          æ•°æ®æŽ¥å…¥ç®¡ç†
          </el-menu-item>
          <el-menu-item index="report" @click="selected = optionClick[5]">
          <el-menu-item index="report" @click="selected = optionClick[6]">
            <el-icon><i-ep-Histogram /></el-icon>
          ä¸šåŠ¡æŠ¥è¡¨
          </el-menu-item>
          </el-menu-item> -->

          </el-sub-menu>

          <el-sub-menu index="4">
          <!-- <el-sub-menu index="4">
              <template #title>
                <el-icon><i-ep-DataLine /></el-icon>
                  <span class="parent-title">配置管理</span>
              </template>

              <el-menu-item index="setting" @click="selected = optionClick[6]">
              <el-menu-item index="setting" @click="selected = optionClick[7]">
                <el-icon><i-ep-Histogram /></el-icon>
                   æ•°æ®æŽ¥å…¥é…ç½®
              </el-menu-item>
          </el-sub-menu>
          </el-sub-menu> -->
    </el-scrollbar>

      </el-menu>
@@ -184,4 +188,10 @@
  font-weight: bold;
  font-size: 18px;
}
// .line {
//   width: 180px;
//   border: 1px solid rgb(255,255,255,0.2);
//   margin: 0px;
//   padding: 0px;
// }
</style>

 src/main.ts

@@ -14,7 +14,8 @@

const app = createApp(App)

axios.defaults.baseURL = 'http://192.168.1.4:8081'
// axios.defaults.baseURL = 'http://192.168.1.4:8081'
axios.defaults.baseURL = 'http://localhost:8081'
app.config.globalProperties.$http = axios

app.use(createPinia())

 src/router/index.ts

@@ -28,7 +28,7 @@
         {
          path:"/hdata",
          name:'hdata',
          component: () => import('@/views/origin_data/TableData.vue')
          component: () => import('@/views/origin_data/HistoryData.vue')
         },

        // é£žè¡Œå·¡æ£€
@@ -38,11 +38,11 @@
          component: () => import('@/views/exception/FlightInspection.vue')
         },
         
        //  å¼‚常测试
        //  ç«™ç‚¹å®¡æ ¸è¾…助
         {
          path:"/testdata",
          name:'testdata',
          component: () => import('@/views/exception/ExceptionTest.vue')
          component: () => import('@/views/exception/SiteAuditAssistance.vue')
         },
        
        //  æ•°æ®æŽ¥å…¥é…ç½®

 src/sfc/AreaAndmonitorType.vue

@@ -68,9 +68,10 @@
    width: 100px;
}
.el-space {
  margin-top: 5px;
  /* margin-top: 5px; */
}
.text {
  color: black;
  font-size: 16px;
}
</style>

 src/sfc/DustExceptionText.vue

@@ -10,7 +10,8 @@
    siteName: String,
    exceptionType: String,
    beginTime: String,
    endTime: String
    endTime: String,
    
  },
  emits: ['submitExceptionData'],
  data() {
@@ -34,6 +35,7 @@
        .then((result) => {
          //将返回的结果传递给父组件
          this.$emit('submitExceptionData', result.data.data);
          // this.$emit('subloading',false)
        });
    }
  }
@@ -48,4 +50,7 @@
.text {
  color: #000000;
}
// .text:hover{
//   color: #2876aa;
// }
</style>

 src/sfc/ExceptionType.vue

@@ -32,8 +32,14 @@
                // this.exceptionType = response.data.data
                response.data.data.forEach(item => {
                    this.exceptionType.push(item.exceptionType)

                });
                console.log(this.exceptionType);
                let a = ['0','1','2','3','4','5','6','7']
                a.forEach(item=>{
                  if(this.exceptionType.indexOf(item) == -1){
                    this.exceptionType.push(item)
                  }
                })
            })
        },
        handleCheckAllChange (val) {

 src/sfc/InputSearch.vue

@@ -105,6 +105,7 @@
.text {
  font-weight: bold;
  margin-top: 5px;
  font-size: 16px;
}
.el-autocomplete {
  margin-top: 5px;

 src/sfc/TimeSelect.vue

@@ -59,18 +59,20 @@
</template>

<style>
.demonstration {
  margin-left: 15px;
  margin-top: 5px;
  font-weight: bold;
  white-space: nowrap;
}

.block {
  display: flex;
  justify-content: center;
  width: 90%;
  white-space: nowrap;
}

.demonstration {
  margin-left: 15px;
  margin-top: 5px;
  font-weight: bold;
  white-space: nowrap;
}
.pick-date {
  width: 100%;
  margin-top: 5px;

 src/sfc/TimeSelectWithShortCuts.vue

@@ -74,18 +74,18 @@

<template>
    <div class="block">
    <div class="demonstration">起止时间：</div>
    <el-date-picker
      v-model="time"
      type="datetimerange"
      :shortcuts="shortcuts"
      range-separator="~"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      value-format="YYYY-MM-DD HH:mm:ss"
      @change="$emit('submitTime', time)"
      class="pick-date"
    />
        <span class="demonstration">起止时间：</span>
        <el-date-picker
          v-model="time"
          type="datetimerange"
          :shortcuts="shortcuts"
          range-separator="~"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          @change="$emit('submitTime', time)"
          class="pick-date"
        />
  </div>
</template>

@@ -96,8 +96,9 @@
}
.demonstration {
  margin-left: 15px;
  margin-top: 5px;
  /* margin-top: 5px; */
  font-weight: bold;
  font-size: 16px;
}

.pick-date {

 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>

 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">

 src/views/line_graph/DataRiskModel.vue

@@ -4,11 +4,16 @@
import InputSearch from '../../sfc/InputSearch.vue';
import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue';

import DustRadarChart from './components/DustRadarChart.vue';
// import DustRadarChart from './components/DustRadarChart.vue';
import exceptionApi from '@/api/exceptionApi.js';
import { useWindowSize } from '@vueuse/core';

import LineChart from './components/LineChart.vue'


const DustRadarChart = defineAsyncComponent(() =>
  import('./components/DustRadarChart.vue')
)

import dayjs from 'dayjs';
export default {
@@ -153,11 +158,13 @@
     * @returns：
     */
    getDaysDifference(startDate, endDate) {
      var start = new Date(startDate);
      var end = new Date(endDate);
      var timeDiff = Math.abs(end.getTime() - start.getTime());
      var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
      return diffDays;
      // var start = new Date(startDate);
      // var end = new Date(endDate);
      // var timeDiff = Math.abs(end.getTime() - start.getTime());
      // var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));


      return dayjs(endDate).diff(startDate,'day') + 1;
    },
    /**
     * ä»Žåˆ†æžæ•°æ®æ•°ç»„中找到最小和大值
@@ -181,6 +188,7 @@
      let begin = dayjs(this.form.beginTime).format('YYYY-MM-DD');
      let end = dayjs(this.form.endTime).format('YYYY-MM-DD');
      let dayDiff = this.getDaysDifference(begin, end);
      console.log('日期间隔',dayDiff);
      let obj = {};
      // è®¡ç®—最小和大值
      arr.forEach((item) => {
@@ -202,13 +210,13 @@
      online = sumOnline / dayDiff;
      valid = sumValid / dayDiff;
      exceeding = sumExceeding / dayDiff;
      obj['min'] = min;
      obj['max'] = max;
      obj['min'] = min.toFixed(3);
      obj['max'] = max.toFixed(3);

      obj['avg'] = avg.toFixed(3);
      obj['online'] = online.toFixed(3);
      obj['valid'] = valid.toFixed(3);
      obj['exceeding'] = exceeding.toFixed(3);
      obj['avg'] = avg.toFixed(2);
      obj['online'] = online.toFixed(2);
      obj['valid'] = valid.toFixed(2);
      obj['exceeding'] = exceeding.toFixed(2);

      return obj;
    },
@@ -345,7 +353,9 @@
  <div class="search-container">
    <el-container>
      <el-main>
        
        <el-form :inline="true" :model="form">
       
          <el-form-item>
            <AreaAndmonitorType></AreaAndmonitorType>
          </el-form-item>
@@ -355,79 +365,108 @@
              @submit-value="(n) => (form.name = n)"
            ></InputSearch>
          </el-form-item>

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

    
        
          <el-form-item>
            <el-button type="primary" @click="fetch">展示折线图</el-button>
          </el-form-item>
       
        </el-form>

        <div>数据统计时段：{{ begin}} ~ {{ end }}</div>
        <div class="time-text">数据统计时段：{{ begin}} ~ {{ end }}</div>

        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-card
        <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
            >
              <DustRadarChart :name="['数据有效率','典型异常复现率','异常类型聚集度','数据超标率','数据在线率']" :data="[bill.valid,bill.exceptionRecurrence,bill.exceptionTypeAggregation,bill.exceeding,bill.online]" ></DustRadarChart>
            </el-card>
        <el-row :gutter="20">

          <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
           
              <DustRadarChart :name="['数据有效率','典型异常复现率','异常类型聚集度','数据超标率','数据在线率']" :yData="[bill.valid,bill.exceptionRecurrence,bill.exceptionTypeAggregation,bill.exceeding,bill.online]" ></DustRadarChart>
           
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
          <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
            >
              <template #header>风险详情</template>
              <el-space direction="vertical">
                <div>最大值:{{ bill.max }} mg/m³</div>
                <div>最小值:{{ bill.min }} mg/m³</div>
              <template #header><span class="title-16">风险详情</span></template>
              <el-form >
                <el-form-item label="最大值：">
                  {{ bill.max }} mg/m³
                </el-form-item>
                <el-form-item label="最小值：">
                  {{ bill.min }} mg/m³
                </el-form-item>
                <el-form-item label="数据有效率：">
                  {{ bill.online }}%
                </el-form-item>
                <el-form-item label="数据在线率：">
                  {{ bill.valid }}%
                </el-form-item>
                <el-form-item label="数据超标率：">
                  {{ bill.exceeding }}%
                </el-form-item>
                <el-form-item label="异常类型聚集度：">
                  {{ bill.exceptionTypeAggregation*100  }}%
                </el-form-item>
                <el-form-item label="典型异常复现率：" label-width="auto">
                  {{ bill.exceptionRecurrence*100  }}%
                </el-form-item>
              </el-form>
                <!-- <div class="date-text">最大值:{{ bill.max }} mg/m³</div> -->
                <!-- <div>最小值:{{ bill.min }} mg/m³</div>
                <div>均值:{{ bill.avg }} mg/m³</div>
                <div>数据有效率:{{ bill.online }}%</div>
                <div>数据在线率:{{ bill.valid }}%</div>
                <div>数据超标率:{{ bill.exceeding }}%</div>
                <div>异常类型聚集度:{{ bill.exceptionTypeAggregation*100 }}%</div>
                <div>典型异常复现率:{{ bill.exceptionRecurrence*100 }}%</div>
              </el-space>
                <div>典型异常复现率:{{ bill.exceptionRecurrence*100 }}%</div> -->
            
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
          <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
            
            >
              <template #header>风险等级</template>
              <template #header>
                <span class="title-16">风险等级</span>
              </template>
              <template #default>
                <el-space direction="vertical" :size="15">
                <!-- <el-space direction="vertical" :size="15" > -->
                  <div class="container">
                    <div class="block heigh"></div> <div>高风险(≥0.6)</div>
                    <div class="block-color heigh"></div> <div>高风险(≥0.6)</div>
                  </div>
                  <div class="container">
                    <div class="block medium" ></div> <div>中风险(0.2~0.6)</div>
                    <div class="block-color medium" ></div> <div>中风险(0.2~0.6)</div>
                  </div>
                  <div class="container">
                    <div class="block low"></div><div>低风险(＜0.2)</div>
                    <div class="block-color low"></div><div>低风险(＜0.2)</div>
                  </div>
                  
                  
                  
                </el-space>
                <!-- </el-space> -->
              </template>
            </el-card>
          </el-col>
        </el-row>
      </el-card>


        <el-row :gutter="24">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
              
            >
              <template #default>
                <LineChart
@@ -444,7 +483,7 @@
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
             
            >
              <template #default>
                <LineChart
@@ -460,7 +499,7 @@

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card shadow="never"
            :style="{ height: `calc(${height}px - 35vh - 250px)` }">
            >
              <template #default>
                <LineChart
                  title="日有效率"
@@ -474,7 +513,7 @@
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card shadow="never" :style="{ height: `calc(${height}px - 35vh - 250px)` }">
            <el-card shadow="never" >
              <template #default>
                <LineChart
                  title="日超标率"
@@ -496,6 +535,9 @@
</template>

<style scoped>
.time-text {
  letter-spacing: 2px;
}
.el-card {
  margin-top: 15px;
  border-radius: 9px;
@@ -511,12 +553,13 @@
}
.container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.block {
.block-color {
  width: 1em;
  height: 1em;
  margin-right: 10px;
  margin-top: 3px;
}
.heigh {
  background-color: red;
@@ -531,4 +574,16 @@
.el-text {
  align-self: left;
}
.el-form-item {
margin-bottom: 20px;

}
:deep().el-form-item__content {
  justify-content: flex-end;
  
}
.title-16 {
  font-size: 16px;
  font-weight: bold;
}
</style>

 src/views/line_graph/components/DustRadarChart.vue

@@ -4,17 +4,19 @@
<script>
import * as echarts from 'echarts';
export default {
  props:{
    name:{
        type:Array,
        default:()=>{
          return []
        }
      },
    data:{
      type:Array,
      default:()=>{
        return []
  props: {
    // å±žæ€§
    name: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // æ•°æ®
    yData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
@@ -23,9 +25,9 @@
      chart: null
    };
  },
  watch:{
    data(){
      this.set()
  watch: {
    yData() {
      this.set();
    }
  },
  mounted() {
@@ -35,13 +37,30 @@
    initRadarChart() {
      this.chart = echarts.init(document.getElementById('main'));
    },
    set(){
    set() {
      // this.data[0] = this.data[0]*0.01
      let option = {
        title: {
          text: '综合风险'
        },
        tooltip: {},
        radar: {
          // è½´
          //         axisLine: {
          //           show:true,
          //           lineStyle: {
          //             color: '#F53F3F' ,// è®¾ç½®è¾¹æ¡†çº¿çš„颜色为黑色
          //             type:'dashed',
          //           }
          // },

          // è¾¹æ¡†é¢œè‰²
          splitLine: {
            lineStyle: {
              // ä½¿ç”¨æ·±æµ…的间隔色
              color: ['#ddd', '#aaa']
            }
          },
          // shape: 'circle',
          indicator: [
            { name: this.name[0], max: 1 },
@@ -49,18 +68,42 @@
            { name: this.name[2], max: 1 },
            { name: this.name[3], max: 1 },
            { name: this.name[4], max: 1 }
          ]
          ],
          //     splitArea: {
          //   areaStyle: {
          //     // color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
          //     shadowColor: 'rgba(0, 0, 0, 0.2)',
          //     shadowBlur: 10
          //   }
          // },
          axisName: {
            color: '#428BD4'
          },
          legend: {
            borderColor: '#428BD4'
          }
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [this.data[0]*0.01,this.data[1]*0.01, this.data[2]*0.01,this.data[3]*0.01,this.data[4]*0.01],
                value: [
                  (this.yData[0] / 100).toFixed(4),
                  this.yData[1],
                  this.yData[2],
                  (this.yData[3] / 100).toFixed(4),
                  (this.yData[4] / 100).toFixed(4)
                ],
                name: '异常分析'
              },
            ]
              }
            ],
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
              }
            }
          }
        ]
      };
@@ -77,6 +120,6 @@
<style scoped>
.chart {
  width: 100%;
  height: 35vh;
  height: 500px;
}
</style>

 src/views/line_graph/components/LineChart.vue

@@ -129,7 +129,7 @@
<style>
.line-chart {
  width: 100%;
  height: 35vh;
  height: 300px;
  margin-top: 25px;
}
</style>

 src/views/login/LoginSystem.vue

@@ -43,7 +43,7 @@
      if (this.username === 'admin' && this.password === 'admin123') {
         ElMessage.success('登录成功');
          // ç™»å½•æˆåŠŸï¼Œè·³è½¬åˆ°å¯¹åº”页面
          this.$router.push('/ndata') // å‡è®¾ç™»å½•æˆåŠŸåŽè·³è½¬åˆ° '/dashboard' é¡µé¢
          this.$router.push('/edata') // å‡è®¾ç™»å½•æˆåŠŸåŽè·³è½¬åˆ° '/dashboard' é¡µé¢
        } else {
          // console.log('Login Failed!')
          ElMessage.error('账号或密码错误');
@@ -79,7 +79,8 @@
  position: absolute;
  right: 10%;
  width: 20%;
  height: 50%;

  height: 500;

}
.el-form-item {
@@ -112,7 +113,7 @@
  letter-spacing: 0.3em;
  text-align: center;
  box-sizing: border-box;
  bottom: 80px;
  bottom: 10px;

}


 src/views/origin_data/HistoryData.vue

ÎļþÃû´Ó src/views/origin_data/TableData.vue ÐÞ¸Ä
@@ -5,6 +5,7 @@
import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue'

import {useCommonFunction} from '../../utils/common.js';
import requetsApi from '@/api/exportExcel/requetsApi.js'

import dayjs from 'dayjs';

@@ -47,8 +48,8 @@
    };
  },
  setup(){
    const {isExceedOneMonth} = useCommonFunction()
    return {isExceedOneMonth}
    const {isExceedOneMonth,exportToExcel} = useCommonFunction()
    return {isExceedOneMonth,exportToExcel}
  },
  mounted() {
    this.backMinuteDataAWeekAgo();
@@ -56,6 +57,45 @@
  },

  methods: {
    exportDom(){
 
      let params  ={
        'beginTime':this.form.beginTime,
        'endTime': this.form.endTime,
      }
      if (this.form.name) {
        params['siteName'] = this.form.name;
      }
      if (this.form.number) {
        params['mnCode'] = this.form.numbe;
      }
      if (this.scenarioType.length != 0) {
          params['scenarioType'] = this.scenarioType;
      }
      requetsApi.fetchAlSiteData(params).then(res => {
        const data = res.data.data
        console.log('长度：',data.length);

        const  tableColumns = [
        'name',
        'address',
        'dutyCompany',
        'mnCode',
        'typeName',
        'dustValue',
        'noiseValue',
        'lst',
        'quality',
        'groupName',

      ]
      const excelColumns = [['A1','站点名称'],
      ['B1','地址'],['C1','供应商'],['D1','设备编号'],
      ['E1','类型'],['F1','扬尘浓度(mg/m³)'],['G1','噪声(dB)'],
      ['H1','采集时间'],['I1','等级'],['J1','所在区县']]
      this.exportToExcel(data,tableColumns,excelColumns,'历史数据表.xlsx')
      })
    },
    // åŠŸèƒ½ï¼šè¡¨æ ¼é«˜åº¦æ ¹æ®å†…容自适应
    calTableHeight() {
      const h1 = this.$refs.h1.$el.offsetHeight;
@@ -92,10 +132,10 @@

    // æŸ¥è¯¢æ•°æ®
    handleSubmit() {
      if (this.isExceedOneMonth(this.form.beginTime, this.form.endTime)) {
        alert('时间跨度不能超过一个月');
        return;
      }
      // if (this.isExceedOneMonth(this.form.beginTime, this.form.endTime)) {
      //   alert('时间跨度不能超过一个月');
      //   return;
      // }
      this.loading = true;
      let params = {};
      params['page'] = this.currentPage;
@@ -221,12 +261,12 @@
        :data="displayData"
        :height="tableHeight"
        v-loading="loading"
        table-layout="auto"
      >
        <!--绑定一个方法，将返回值赋给index,即表格每行数据的下标-->
        <el-table-column
          type="index"
          label="序号"
          width="60px"
          align="center"
          fixed
          :index="indexMethod"
@@ -244,7 +284,7 @@
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="sname"
          prop="dutyCompany"
          label="供应商"
          align="center"
          show-overflow-tooltip
@@ -262,8 +302,14 @@
        ></el-table-column>
        <el-table-column
          prop="dustValue"
          label="扬尘浓度"
          width="80px"
          label="扬尘浓度(mg/m³)"
          align="center"
          sortable 
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="noiseValue"
          label="噪声(dB)"
          align="center"
          sortable 
          show-overflow-tooltip
@@ -278,7 +324,6 @@
        <el-table-column
          prop="quality"
          label="等级"
          width="50px"
          align="center"
          show-overflow-tooltip
        ></el-table-column>