扬尘Vue

zmc

2023-08-30 b7b35d8bd8f0ff7fe4e1aa6c69a877551bed81a3

扬尘Vue

 src/components/layout/AppAside.vue

@@ -60,7 +60,7 @@
        <el-sub-menu index="1">
          <template #title>
            <el-icon><i-ep-Monitor /></el-icon>
            <span class="parent-title">分险评估</span>
            <span class="parent-title">风险评估</span>
          </template>

          <el-menu-item index="avgDay" @click="selected = optionClick[0]">
@@ -102,11 +102,11 @@
            <el-icon><i-ep-Histogram /></el-icon>
          åŽ†å²æ•°æ®ç®¡ç†
          </el-menu-item>
          <el-menu-item index="1" @click="selected = optionClick[4]">
          <el-menu-item index="management" @click="selected = optionClick[4]">
            <el-icon><i-ep-Histogram /></el-icon>
          æ•°æ®æŽ¥å…¥ç®¡ç†
          </el-menu-item>
          <el-menu-item index="2" @click="selected = optionClick[5]">
          <el-menu-item index="report" @click="selected = optionClick[5]">
            <el-icon><i-ep-Histogram /></el-icon>
          ä¸šåŠ¡æŠ¥è¡¨
          </el-menu-item>

 src/router/index.ts

@@ -51,6 +51,21 @@
          name:'setting',
          component: () => import('@/views/setting/SetConfiguration.vue')
         },

         //  æ•°æ®æŽ¥å…¥ç®¡ç†
         { 
          path:"/management",
          name:'management',
          component: () => import('@/views/origin_data/DataAccessManagement.vue')
         },

          //  ä¸šåŠ¡æŠ¥è¡¨
          { 
            path:"/report",
            name:'report',
            component: () => import('@/views/origin_data/BusinessReport.vue')
           },
         
      ],
    },
    // ç™»é™†é¡µé¢

 src/views/exception/FlightInspection.vue

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

//  å¼‚常图形异步组件
const DustLineChart = defineAsyncComponent(() =>
@@ -16,9 +17,10 @@
  components: {
    ExceptionType,
    InputSearch,
    TimeSelect,
    TimeSelectWithShortCuts,
    DustExceptionText,
    DustLineChart
    DustLineChart,
    AreaAndmonitorType
  },
  data() {
    return {
@@ -37,7 +39,7 @@
      // è¡¨æ ¼å±•ç¤ºçš„数据
      displayData: [],
      // è¡¨æ ¼é«˜åº¦
      tableHeight: 300,
      tableHeight: 400,
      // è¡¨æ ¼æ•°æ®
      // å½“前页
      currentPage: 1,
@@ -59,12 +61,25 @@
        exception2: [],
        // æ•°æ®é•¿æ—¶æ®µæ— æ³¢åŠ¨
        exception3: [],
        // é‡çº§çªå˜å¼‚常
        exception4: [],
        // ä¸´è¿‘超标异常
        exception5: [],
        // å•æ—¥è¶…标次数临界异常
        exception6: [],
        // æ»‘动平均值异常
        exception7: [],
        

        // è¯¥æ—¶æ®µçš„异常数量
        exception0Num: 0,
        exception1Num: 0,
        exception2Num: 0,
        exception3Num: 0
        exception3Num: 0,
        exception4Num: 0,
        exception5Num: 0,
        exception6Num: 0,
        exception7Num: 0,
      },
      // ç«™ç‚¹æ€»æ•°é‡
      siteTotal: 0,
@@ -176,29 +191,15 @@
    // console.log('历史数据为：', this.backData.value);

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

  methods: {
    test(){
    const  data = [0.084, 0.073, 0.062, 0.1];
    const  threshold = 0.2;  // è®¾å®šçš„变化率阈值

for (let i = 1; i < data.length; i++) {
  const rateOfChange = Math.abs((data[i] - data[i-1]) / data[i-1]);
  
  console.log('变化率为：',data[i], data[i-1],rateOfChange);
  if (rateOfChange > threshold) {
    console.log(`数据 ${data[i-1]} åˆ° ${data[i]} çš„变化率超过阈值 ${threshold}`);
    // è¿›è¡Œç›¸åº”的处理
  }
}
    },

    // getExceptionSiteNum(){
    //   this.$http.get('/dust/exceptionsitenum').then(result => {
@@ -713,7 +714,7 @@
            }
          };
          break;
        case '3':
        case '3' :
          this.dialog.option = {
            tooltip: {},
            toolbox: {
@@ -797,8 +798,83 @@
            }
          };
          break;
        case '4':
        this.dialog.option = {
            tooltip: {},
            toolbox: {
              // å·¥å…·æ 
              feature: {
                //     dataZoom: {
                //   yAxisIndex: 'none'
                // },
                // ä¿å­˜ä¸ºå›¾ç‰‡
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              data: xData,
              name: '时间',
              axisLabel: {
                formatter: function (value) {
                  return value.slice(11, -3);
                }
              }
            },
            yAxis: {
              type: 'value',
              name: 'mg/m³'
            },
            series: [
              {
                name: '颗粒物浓度',
                type: 'line',
                data: yData,
                // å˜æ¢æŒ‡å®šæ—¶é—´åŒºé—´çš„背景颜色
                markArea: {
                  itemStyle: {
                    color: 'rgba(255, 173, 177, 0.4)'
                  },
                  data: [
                    [
                      {
                        name: '异常时间段',
                        xAxis: exceptionBeginTime
                      },
                      {
                        xAxis: exceptionEndTime
                      }
                    ]
                  ]
                },
           
              }
            ],
            // æŒ‡å®šæ—¶é—´åŒºé—´çš„线段变颜色
            visualMap: {
              show: false,
              dimension: 0,
              pieces: [
                {
                  lte: beginIndex,
                  color: 'green'
                },
                {
                  gt: beginIndex,
                  lte: endIndex,
                  color: 'red'
                },
                {
                  gt: endIndex,
                  lte: xData.length - 1,
                  color: 'green'
                }
              ]
            }
          };
          break;
        default:
          return 'error';
          console.log('没有设置该异常类型！');;
      }
      this.flag.banTouch = 0
    },
@@ -960,6 +1036,40 @@
          this.exception.exception3 = result.data.data;
        });

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



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

@@ -1194,8 +1338,12 @@
      }
    },
    // è¡¨æ ¼åºå·é€’增
    indexMethod(index) {
    indexMethod1(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize;
    },
    // è¡¨æ ¼åºå·é€’增
    indexMethod2(index) {
      return index + 1;
    }
  }
};
@@ -1207,6 +1355,9 @@
    <el-col>
      <el-form :inline="true">
        <div class="head-container-text">
          <el-form-item >
          <AreaAndmonitorType ></AreaAndmonitorType>
          </el-form-item>
          <el-form-item>
            <InputSearch
              :isNeedDefaultSite="0"
@@ -1216,14 +1367,16 @@
            </InputSearch>
          </el-form-item>

          

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

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

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

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

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

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

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

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

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

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

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

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

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

          <el-col :span="6">
            <div class="card-content-unnormal">
              <!-- æ ‡å¤´ -->
              <div class="card-text1">
                <image class="card-header-image"></image>
                <span class="card-header-text">变化趋势异常</span>
              </div>

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

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


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

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

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


                    ).toFixed(1)
                  }}%</span
                  }}%</div
                >
               </el-scrollbar>
              </div>
              <hr />
              <!-- å¼‚常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="100px">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="3"
@@ -1500,7 +1997,10 @@
              <!-- ç»“束 -->
            </div>
          </el-col>
        </el-row>
      </el-row>



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

          <div>
          <span class="diag-head-text1">异常类型：</span>
          <span v-if="tableCurrentRowData.exceptionType == '0'"
            >断电或断网</span
@@ -1620,6 +2124,17 @@
          <span v-else-if="tableCurrentRowData.exceptionType == '3'"
            >数据长时间无波动</span
          >
          <span v-else-if="tableCurrentRowData.exceptionType == '4'"
            >量级突变异常</span
          > <span v-else-if="tableCurrentRowData.exceptionType == '5'"
            >临近超标异常</span
          > <span v-else-if="tableCurrentRowData.exceptionType == '6'"
            >单日超标次数临界异常</span
          > <span v-else-if="tableCurrentRowData.exceptionType == '7'"
            >滑动平均值异常</span
          >
        </div>

          <div>
            <span class="diag-head-text1">异常时间段：</span
            >{{ tableCurrentRowData.beginTime }} ~
@@ -1664,7 +2179,7 @@
          width="60px"
          align="center"
          fixed
          :index="indexMethod"
          :index="indexMethod2"
        ></el-table-column>
        <el-table-column
          fixed
@@ -1709,7 +2224,8 @@
          v-show="
            tableCurrentRowData.exceptionType == '1' ||
            tableCurrentRowData.exceptionType == '2' ||
            tableCurrentRowData.exceptionType == '3'
            tableCurrentRowData.exceptionType == '3' ||
            tableCurrentRowData.exceptionType == '4' 
          "
          >异常数据：</span
        >
@@ -1746,6 +2262,8 @@
}
/* æ¡ä»¶æŸ¥è¯¢æ¨¡å—结束 */



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

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

/* å¼‚常分析模块结束 */

/* è¡¨æ ¼æ¨¡å—的样式 */

/* è¡¨æ ¼æ¨¡å—结束 */





/* æŸ¥çœ‹è¯¦æƒ…对话框模块的样式 */
:deep(.el-dialog) {
@@ -1818,7 +2349,7 @@
}
.diag-head-text span:nth-child(2) {
  // å¯¹è¯æ¡†å¤´éƒ¨â€˜å¼‚常类型’属性
  margin-left: 150px;
  // margin-left: 150px;
}
.diag-head-text > div {
  // å¯¹è¯æ¡†å¼‚常时间段
@@ -1845,5 +2376,11 @@
  margin-bottom: 20px;
  min-width: 600px;
}
.mx-1 {
  position: absolute;
  left: 10px;
  bottom: 10px;

}
/* æŸ¥çœ‹è¯¦æƒ…对话框模块结束 */
</style>

 src/views/line_graph/DataRiskModel.vue

@@ -29,8 +29,8 @@
      chartData3: {},
      chartData4: {},
      //devId:'',          //设备编号
      // begin: '2023-05-01', //开始时间
      // end: '2023-05-15', //结束时间
      begin: '', //开始时间
      end: '', //结束时间

      form: {
        // ç«™ç‚¹åç§°
@@ -278,6 +278,9 @@
          this.bill.online = temp['online'];
          this.bill.valid = temp['valid'];
          this.bill.exceeding = temp['exceeding'];

          this.begin = this.chartData[0].lst
          this.end = this.chartData[this.chartData.length-1].lst
        });
    },

@@ -361,18 +364,64 @@
          <el-form-item>
            <el-button type="primary" @click="fetch">展示折线图</el-button>
          </el-form-item>

          <!-- <div>
            <el-form-item>
              <el-radio-group v-model="radio" @change="setChart">
                <el-radio :label="1">颗粒物浓度平均值</el-radio>
                <el-radio :label="2">数据在线/有效/超标率</el-radio>
              </el-radio-group>
            </el-form-item>
          </div> -->
        </el-form>

        <div>数据统计时段：{{}}</div>
        <div>数据统计时段：{{ begin}} ~ {{ end }}</div>

        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <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-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
            <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>
                <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>
            </el-card>
          </el-col>

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

        <el-row :gutter="24">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
@@ -384,7 +433,7 @@
                <LineChart
                  title="日均值"
                  :chartData="chartData1"
                  yName="浓度"
                  yName="mg/m³"
                  seriesName="日均值"
                >
                </LineChart>
@@ -401,7 +450,7 @@
                <LineChart
                  title="日在线率"
                  :chartData="chartData2"
                  yName="百分比"
                  yName="%"
                  seriesName="日在线率"
                >
                </LineChart>
@@ -416,7 +465,7 @@
                <LineChart
                  title="日有效率"
                  :chartData="chartData3"
                  yName="百分比"
                  yName="%"
                  seriesName="日有效率"
                >
                </LineChart>
@@ -430,7 +479,7 @@
                <LineChart
                  title="日超标率"
                  :chartData="chartData4"
                  yName="百分比"
                  yName="%"
                  seriesName="日超标率"
                >
                </LineChart>
@@ -439,51 +488,8 @@
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <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-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <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>
                <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>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
            >
              <template #header>风险等级</template>
              <template #default>
                <el-space direction="vertical">
                  <el-text>高风险(≥0.6)</el-text>
                  <el-text>中风险(0.2~0.6)</el-text>
                  <el-text>低风险(＜0.2)</el-text>
                </el-space>
              </template>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
@@ -503,4 +509,26 @@
  color: #333;
  line-height: 60px;
}
.container {
  display: flex;
  justify-content: space-between;
}
.block {
  width: 1em;
  height: 1em;
  margin-right: 10px;
}
.heigh {
  background-color: red;
}
.medium {
  background-color: #FADC19;
}
.low {
  background-color: #9FDB1D;
}

.el-text {
  align-self: left;
}
</style>

 src/views/line_graph/components/DustRadarChart.vue

@@ -38,7 +38,7 @@
    set(){
      let option = {
        title: {
          text: '基础分析'
          text: '综合风险'
        },
        tooltip: {},
        radar: {

 src/views/line_graph/components/LineChart.vue

@@ -116,7 +116,6 @@
    // è·Ÿé¡µé¢å“åº”式变化
    resizeChart() {
      // this.chart.resize();
      // delay(600).then(() => this.chart.resize());
      this.$nextTick(() => {
        if (this.chart) {
          this.chart.resize();

 src/views/origin_data/BusinessReport.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,25 @@
<script>
  export default {
    data() {
      return{

      }
    },
    mounted() {

    },
    methods: {

     }
}
</script>

<template>
  <div>
    ä¸šåŠ¡æŠ¥è¡¨
  </div>
</template>

<style  scoped>

</style>

 src/views/origin_data/DataAccessManagement.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,25 @@
<script>
  export default {
    data() {
      return{

      }
    },
    mounted() {

    },
    methods: {

     }
}
</script>

<template>
  <div>
    æ•°æ®æŽ¥å…¥ç®¡ç†
  </div>
</template>

<style  scoped>

</style>

 src/views/setting/SetConfiguration.vue

@@ -1,6 +1,6 @@
<script>
// import DustRadarChart from '../../sfc/DustRadarChart.vue';
import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue'
// import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue'
import dayjs from 'dayjs';
  export default {
    components :{
@@ -23,40 +23,12 @@

<template>
  <div>
    <DustRadarChart></DustRadarChart>
    æ•°æ®æŽ¥å…¥é…ç½®
  </div>

  <!-- <div class="container">
    <el-space wrap :size="20" >
      <el-card v-for="i in 6" :key="i">
        111
      </el-card>
    </el-space>
    <el-card v-for="i in 5" :key="i">
        111
    </el-card>
    <el-card>
      22
    </el-card>

  </div> -->

</template>

<style  scoped>

.container {
  margin: 20px 20px;
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  height: 100%;
}
.el-card {
 min-width: 500px;
  min-height: 400px;
  flex: 1 200px;
  /* flex: 1; */
 
}
</style>