雷达图 新增综合风险排名 数据接入配置

zmc

2023-09-05 c2f95b0b9090a2394b5b068582b932a5e57b86aa

雷达图 新增综合风险排名 数据接入配置

 components.d.ts

@@ -39,6 +39,8 @@
    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
    ElOption: typeof import('element-plus/es')['ElOption']
    ElPagination: typeof import('element-plus/es')['ElPagination']
    ElRadio: typeof import('element-plus/es')['ElRadio']
    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
    ElRow: typeof import('element-plus/es')['ElRow']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElSelect: typeof import('element-plus/es')['ElSelect']

 package-lock.json

@@ -15,6 +15,7 @@
        "dayjs": "^1.11.9",
        "echarts": "^5.4.3",
        "element-plus": "^2.3.6",
        "js-cookie": "^3.0.1",
        "pinia": "^2.1.3",
        "sass": "^1.63.4",
        "vue": "^3.3.4",
@@ -4148,6 +4149,14 @@
      "resolved": "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz",
      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
      "dev": true
    },
    "node_modules/js-cookie": {
      "version": "3.0.1",
      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.1.tgz",
      "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==",
      "engines": {
        "node": ">=12"
      }
    },
    "node_modules/js-stringify": {
      "version": "1.0.2",
@@ -9961,6 +9970,11 @@
      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
      "dev": true
    },
    "js-cookie": {
      "version": "3.0.1",
      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.1.tgz",
      "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw=="
    },
    "js-stringify": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/js-stringify/-/js-stringify-1.0.2.tgz",

 package.json

@@ -19,6 +19,7 @@
    "dayjs": "^1.11.9",
    "echarts": "^5.4.3",
    "element-plus": "^2.3.6",
    "js-cookie": "^3.0.1",
    "pinia": "^2.1.3",
    "sass": "^1.63.4",
    "vue": "^3.3.4",

 src/api/data_access_setting/settingApi.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,15 @@
import {$http} from '@/api/index.js';

export default {

    /**
     * æ ¹æ®ç«™ç‚¹ï¼Œæ—¶é—´æ®µæŸ¥è¯¢åŽ†å²è¡¨ä¸­æ‰€æœ‰æ•°æ®
     * @param： 
     * @returns：
     */
    submitSetting(argsObj){
        
        return $http.post('dust/setting',argsObj);
    }

}

 src/api/exceptionApi.js

@@ -36,5 +36,12 @@
      _params.exceptionType = exceptionType;
    }
    return $http.get('/dust/exceptiondata1', { params: _params });
  },

  getSitesNum(){
    return $http.get('/dust/sitename');
  }



};

 src/components/layout/AppAside.vue

@@ -1,24 +1,11 @@
<script>
import { isCollapse } from './isCollapse';
import { selectedName } from './selectName';

export default {
  data() {
    return {
      menuHeight: '600px',
      isCollapseAside: isCollapse,
      selected: selectedName,
      optionClick: [
        ' æ•°æ®é£Žé™©æ¨¡åž‹',
        '数据风险排名',
        '站点综合风险排名',
        '飞行巡检',
        '站点审核辅助',
        '历史数据管理',
        '数据接入管理',
        '业务报表',
        '数据接入配置',
      ]
    };
  },
  methods:{
@@ -30,7 +17,6 @@
  mounted(){
    this.menuHeight = this.calMenuHeight();
    console.log('meta:',this.$route.matched);

  }
};
</script>
@@ -63,16 +49,16 @@
            <span class="parent-title">风险评估</span>
          </template>

          <el-menu-item index="avgDay" @click="selected = optionClick[0]">
          <el-menu-item index="avgDay" >
            <el-icon><i-ep-Stopwatch /></el-icon>
            æ•°æ®é£Žé™©æ¨¡åž‹
          </el-menu-item>
          <el-menu-item index="analysis" @click="selected = optionClick[1]">
          <el-menu-item index="analysis" >
            <el-icon><i-ep-Stopwatch /></el-icon>
            æ•°æ®é£Žé™©æŽ’名
          </el-menu-item><el-menu-item index="riskrank" @click="selected = optionClick[2]">
            æ•°æ®æŽ’名清单
          </el-menu-item><el-menu-item index="riskrank" >
            <el-icon><i-ep-Stopwatch /></el-icon>
            ç«™ç‚¹ç»¼åˆé£Žé™©æŽ’名
            ç»¼åˆé£Žé™©æŽ’名
          </el-menu-item>


@@ -84,12 +70,12 @@
            <el-icon><i-ep-Histogram /></el-icon>
            <span class="parent-title">线上巡检</span>
          </template>
          <el-menu-item index="edata" @click="selected = optionClick[3]">
          <el-menu-item index="edata" >
            <el-icon><i-ep-Bell /></el-icon>
          é£žè¡Œå·¡æ£€
          </el-menu-item>

          <el-menu-item index="testData" @click="selected = optionClick[4]">
          <el-menu-item index="testData">
            <el-icon><i-ep-Bell /></el-icon>
          ç«™ç‚¹å®¡æ ¸è¾…助
          </el-menu-item>
@@ -103,18 +89,19 @@
          </template>
 
         
            <el-menu-item index="hdata" @click="selected = optionClick[4]">
            <el-menu-item index="hdata" >
            <el-icon><i-ep-Histogram /></el-icon>
          åŽ†å²æ•°æ®ç®¡ç†
          </el-menu-item>
          <el-menu-item index="management" @click="selected = optionClick[5]">

          <!-- <el-menu-item index="management" >
            <el-icon><i-ep-Histogram /></el-icon>
          æ•°æ®æŽ¥å…¥ç®¡ç†
          </el-menu-item>
          <el-menu-item index="report" @click="selected = optionClick[6]">
          <el-menu-item index="report" >
            <el-icon><i-ep-Histogram /></el-icon>
          ä¸šåŠ¡æŠ¥è¡¨
          </el-menu-item>
          </el-menu-item> -->

          </el-sub-menu>

@@ -124,7 +111,7 @@
                  <span class="parent-title">配置管理</span>
              </template>

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

 src/main.ts

@@ -1,8 +1,6 @@
// import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

// import { createPinia } from 'pinia'
import Cookie from 'js-cookie'
import App from './App.vue'
import router from './router'

@@ -14,21 +12,34 @@

const app = createApp(App)

function SecretPiniaPlugin() {
    return { secret: 'the cake is a lie',vue:'333.0' }
  }
  
  const pinia = createPinia()
  // å°†æ’件提供给 pinia
  pinia.use(SecretPiniaPlugin)
// function SecretPiniaPlugin() {
//     return { secret: 'the cake is a lie',vue:'333.0' }
//   }
  
//   const pinia = createPinia()
//   // å°†æ’件提供给 pinia
//   pinia.use(SecretPiniaPlugin)
  // pinia.use(() => ({'天':'雨天'}))

router.beforeEach((to,from,next)=>{
  const token = Cookie.get('token')
  if(!token && to.name!='login'){
    next({name:'login'}) 
  }
  // token存在，但用户切换的是登录页面时，返回默认主界面
  else if(token && to.name =='login'){
    next({name:'edata'}) 
  }else{
    next()
  }
})

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

app.use(pinia)
// app.use(pinia)
app.use(router)



 src/router/index.ts

@@ -86,7 +86,7 @@
    // ç™»é™†é¡µé¢
    {
      path: "/login",
      name: 'fst',
      name: 'login',
      component: () => import('@/views/login/LoginSystem.vue')

    },

 src/utils/risk_estimate_common_function/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,149 @@
import dayjs from 'dayjs';
export default {
  /**
   * è®¡ç®—日期相差几天
   * @param：
   * @createTime:开始时间，结束时间
   * @returns：
   */
  getDaysDifference(startDate, endDate) {
    return dayjs(endDate).diff(startDate, 'day') + 1;
  },
  /**
   * ä»Žåˆ†æžæ•°æ®æ•°ç»„中计算最小和大值 ,平均值，    åœ¨çº¿çŽ‡ï¼Œæœ‰æ•ˆçŽ‡ï¼Œè¶…标率（后三个值为0~100取值）
   * @param：分析表中的数据
   * @returns：
   */
  calBillData(arr, beginTime, endTime) {
    let min = 65536;
    let max = -1;
    let avg = 0;
    let online = 0;
    let valid = 0;
    let exceeding = 0;

    let sumAvg = 0;
    let sumOnline = 0;
    let sumValid = 0;
    let sumExceeding = 0;

    // è®¡ç®—选择的时间的相差的天数
    let begin = dayjs(beginTime).format('YYYY-MM-DD');
    let end = dayjs(endTime).format('YYYY-MM-DD');
    let dayDiff = this.getDaysDifference(begin, end);
    console.log('日期间隔', dayDiff);
    let obj = {};
    // è®¡ç®—最小和大值
    arr.forEach((item) => {
      if (item.min < min) {
        min = item.min;
      }
      if (item.max > max) {
        max = item.max;
      }
      // è®¡ç®—平均值，在线率，有效率，超标率
      sumAvg = sumAvg + item.dayAvg;
      sumOnline = sumOnline + Number(item.dayOnline.slice(0, -1));
      sumValid = sumValid + Number(item.dayValid.slice(0, -1));
      sumExceeding = sumExceeding + Number(item.dayExceeding.slice(0, -1));
    });
    // è®¡ç®—均值
    avg = sumAvg / dayDiff;
    // console.log('sumavg:',sumAvg,dayDiff);
    online = sumOnline / dayDiff;
    valid = sumValid / dayDiff;
    exceeding = sumExceeding / dayDiff;
    obj['min'] = min.toFixed(3);
    obj['max'] = max.toFixed(3);

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

    return obj;
  },

  /**
   * è®¡ç®—异常类型聚集度 å¼‚常复现率
   * @param： å¼‚常数据数组
   * @returns：
   */
  calRecur(exceptionArr) {
    // å…¸åž‹å¼‚常复现率
    let exceptionTyprRecurRate = 0;
    // é‡çº§çªå˜
    let mutationCount = 0;
    // è¶…标临近
    let exceedingNearCount = 0;
    // è¶…标次数临界
    let exceedindCriticalDegree = 0;

    // ä¿å­˜å‡ºçŽ°çš„不同异常类型
    let exception = [];
    // å¼‚常类型聚集度
    let exceptionTypeAggregation = 0;

    exceptionArr.forEach((item) => {
      // å¼‚常复现率
      if (item.exceptionType == 4) {
        mutationCount++;
      } else if (item.exceptionType == 5) {
        exceedingNearCount++;
      } else if (item.exceptionType == 6) {
        exceedindCriticalDegree++;
      }

      // å¼‚常类型聚集度
      if (exception.length == 0) {
        exception.push(item.exceptionType);
      }
      // ä¿å­˜æ–°çš„异常类型
      else if (exception.indexOf(item.exceptionType) == -1) {
        exception.push(item.exceptionType);
      }
    });

    let sum = 0;
    // æ¬¡æ•°å‡1，该异常出现2次，算复现1次。出现3次，算复现2次...
    if (mutationCount > 1) {
      sum = sum + mutationCount - 1;
    }
    if (exceedingNearCount > 1) {
      sum = sum + exceedindCriticalDegree - 1;
    }
    if (exceedindCriticalDegree > 1) {
      sum = sum + exceedindCriticalDegree - 1;
    }
    // console.log('sum:', sum);
    // console.log('exception:', exception);
    // console.log(
    //   '其他',
    //   mutationCount,
    //   exceedindCriticalDegree,
    //   exceedindCriticalDegree
    // );
    switch (sum) {
      case 0:
        exceptionTyprRecurRate = sum / 3;
        break;
      case 1:
        exceptionTyprRecurRate = sum / 3;
        break;
      case 2:
      case sum >= 3:
        exceptionTyprRecurRate = 1;
        break;
      default:
        return 'error';
    }

    exceptionTypeAggregation = exception.length / 8;

    let obj = {};
    obj['exceptionRecurrence'] = exceptionTyprRecurRate;
    obj['exceptionTypeAggregation'] = exceptionTypeAggregation;

    return obj;
  }
};

 src/views/exception/FlightInspection.vue

@@ -12,12 +12,12 @@
const DustLineChart = defineAsyncComponent(() =>
  import('./components/DustLineChart.vue')
);

import exceptionApi from '@/api/exceptionApi.js';
import dayjs from 'dayjs';
export default {
  components: {
    ExceptionType,
    InputSearch,
    // InputSearch,
    TimeSelectWithShortCuts,
    DustExceptionText,
    DustLineChart,
@@ -42,15 +42,17 @@
      displayData: [],
      // è¡¨æ ¼é«˜åº¦
      tableHeight: 400,
      // è¡¨æ ¼æ•°æ®
      // è¡¨æ ¼æ˜¾ç¤º
      isTableShow:false,
      // å½“前页
      currentPage: 1,
      // æ¯é¡µæ¡æ•°
      pageSize: 20,
      // è¡¨æ ¼çš„总记录数
      total: 0,
  
      // è¡¨æ ¼æŸ¥è¯¢æ— æ•°æ®æ—¶
      isNoData: false,
      // isNoData: false,
      // å¯¹è¯æ¡†æ˜¾ç¤º
      dialogTableVisible: false,
      // ä¿å­˜å¼‚常对应的店铺名称和设备编号
@@ -86,8 +88,6 @@
      // ç«™ç‚¹æ€»æ•°é‡
      siteTotal: 0,

      // å¼‚常的站点总数量
      // exceptionSiteNum:0,

      // é€‰ä¸­è¡¨æ ¼å½“前行的数据
      tableCurrentRowData: null,
@@ -129,8 +129,9 @@
        banTouch:0,
        // 0代表分页，1代表不分页
        originClick:0
      }

      },
      // æ¡ä»¶æŸ¥è¯¢å¯¹è¯æ¡†
      conditionDialogVisible:false
    };
  },
  setup() {
@@ -185,10 +186,17 @@
    this.backExceptionDataAWeekAgo();
    // æŸ¥è¯¢æ—¶é—´æ®µçš„各异常的站点，查询该时间区间的各异常数量
    this.getShopNames();
 
    this.getSiteNume()
  },

  methods: {
   // æ”¾å›žç«™ç‚¹æ€»æ•°é‡
    getSiteNume(){
      exceptionApi.getSitesNum().then(res => {
      this.siteTotal = res.data.data.length
    })
    
    },

    /**
     * description：点击异常站点名字时 è¿”回的数据
@@ -1098,15 +1106,18 @@
          this.displayData = response.data.data.rows;
          this.loading.queryButton = false
          this.loading.tableLoading = false;

          if (response.data.data.total == 0) {
            ElMessage('该时段无数据');
            this.isNoData = true;
            this.isTableShow = false
            return;
          }
          this.isTableShow = true
          this.total = response.data.data.total;
          // ç§»é™¤ç©ºæ•°æ®çŠ¶æ€
          this.isNoData = false;
        });

      this.conditionDialogVisible = false
    },

    /**
@@ -1134,9 +1145,10 @@

          if (response.data.data.total == 0) {
            ElMessage('该时段无数据');
            this.isNoData = true;
            this.isTableShow = false
            return;
          }
          this.isTableShow = true
          this.total = response.data.data.total;
          this.loading.tableLoading = false;
        });
@@ -1205,7 +1217,16 @@
</script>

<template>
 <el-button type="primary" @click="conditionDialogVisible = true">
    æœç´¢æ¡ä»¶
  </el-button>
 
  <el-dialog
    v-model="conditionDialogVisible"
    title="Tips"
    width="30%"
    class="condition-dialog"
  >
  <el-row ref="h1">
    <el-col>
      <el-form :inline="true">
@@ -1213,13 +1234,18 @@
          <el-form-item >
          <AreaAndmonitorType ></AreaAndmonitorType>
          </el-form-item>
          <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 timeType="day" @submit-time="giveTime" ></TimeSelectWithShortCuts>
          </el-form-item>

          <el-form-item>
@@ -1228,9 +1254,7 @@
            ></ExceptionType>
          </el-form-item>

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

        <div class="head-container-search">
@@ -1242,6 +1266,24 @@
      </el-form>
    </el-col>
  </el-row>
  

<!-- 
    <template #footer>

      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template> -->
  </el-dialog>






  <el-row class="head-describtion-text" ref="h2">
    <el-row>
@@ -1859,8 +1901,8 @@
    </el-col>
  </el-row>

  <el-row>
    <el-col v-show="!isNoData">
  <el-row v-show="isTableShow">
    <el-col >
      <el-table
        ref="table"
        :data="displayData"
@@ -1954,7 +1996,6 @@
    </el-col>
  </el-row>

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

  <el-dialog v-model="dialogTableVisible" draggable align-center height="300px">
    <!-- å¤´ -->
@@ -2097,9 +2138,19 @@
</template>

<style lang="scss" scoped>

.el-row {
  margin-left: 10px;
}
/* ä¸‹æ‹‰èœå•å¼€å§‹ */
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

/* ä¸‹æ‹‰èœå•ç»“束 */

/* æ¡ä»¶æŸ¥è¯¢æ¨¡å—的样式 */
.head-container-search {

 src/views/exception/SiteAuditAssistance.vue

@@ -100,10 +100,12 @@
        checker: 'admin',
        checkDate: '',
        checkerNotes: '',
        enterpriseNotes: ''
        enterpriseNotes: '',
   
      },
      auditTableData: [],
      auditNumByTime: 0
      // å®¡æ ¸çŠ¶æ€ä¸ä¸º0
      auditData: [],
    };
  },
  setup() {
@@ -143,13 +145,39 @@
    }
  },
  computed: {
   
    // å®¡è®¡æ€»æ•°ï¼ˆåŒ…括部分审核）
    auditTotal(){
      return this.auditData.length
    },
    // è§„范审计总数
    auditedRegular(){
      let count = 0
      this.auditData.forEach(item => {
        if(item.auditStatus == 3){
           count ++
          }
      })
      return count
    },
    // éƒ¨åˆ†å®¡æ ¸æ•°é‡
    auditPart(){
      let count = 0
      this.auditData.forEach(item => {
        if(item.auditStatus == 1 || item.auditStatus == 2){
           count ++
          }
      })
      return count
    }, 
    // å¾…审核数
    unCheckedNUm() {
      return this.total - this.auditNumByTime;
      return this.total - this.auditedRegular;
    },
    // å®¡æ ¸æ¯”例
    checkedRate() {
      return (this.auditNumByTime / this.total) * 100;
    }
      return ((this.auditedRegular / this.total) * 100).toFixed(1);
    },
  },
  mounted() {
    this.backExceptionDataAWeekAgo();
@@ -158,13 +186,13 @@

  methods: {
    /**
     * æŸ¥çœ‹è¯¥æ®µæ—¶é—´å†…已审核的数量
     * æŸ¥çœ‹è¯¥æ®µæ—¶é—´å†…已审核的数据
     * @param：
     * @returns：
     */
    gethasCheckedNumByTime() {
      submitApi.getAuditNumByTime(this.beginTime, this.endTime).then((res) => {
        this.auditNumByTime = res.data.data.length;
        this.auditData = res.data.data;
      });
    },
    /**
@@ -278,6 +306,12 @@
            if (enterprise) {
              this.tableCurrentRowData.enterpriseContent = enterprise;
            }
            
            // æ›´æ–°åˆ†æžçš„数据
            setTimeout(() => {
            this.gethasCheckedNumByTime();
            }, 1500);
            
          } else {
            ElMessage.warning('提交失败');
          }
@@ -305,6 +339,11 @@
            if (enterpriseContent) {
              this.tableCurrentRowData.enterpriseContent = enterpriseContent;
            }

            // æ›´æ–°åˆ†æžçš„数据
            setTimeout(() => {
              this.gethasCheckedNumByTime();
            }, 1500);
          } else {
            ElMessage.warning('提交失败');
          }
@@ -1270,7 +1309,7 @@
    </el-col>
  </el-row>

  <el-row class="anasysis" ref="h2">
  <!-- <el-row class="anasysis" ref="h2">
    <el-col :span="6">
      <el-card>
        <el-statistic title="全部审核数" :value="total" />
@@ -1296,7 +1335,27 @@
        </el-statistic>
      </el-card>
    </el-col>
  </el-row> -->


  <div class="checknum">
      <el-row class="anasysis" ref="h2">
        <el-col :span="8">
        <span class="checknum-blue">应审核数：</span> {{ total }}<span class="checknum-rate">({{ checkedRate }}%) </span>
        </el-col>
      
        <el-col :span="8">
          <div><span class="checknum-green">已审核数：</span>{{ auditTotal }}</div>
          <div>规范审核数：{{ auditedRegular }}</div>
          <div>部分审核数：{{ auditPart }}</div>
        </el-col > 
        
        <el-col :span="8">
          <span><span class="checknum-red">待审核数：</span>{{ unCheckedNUm }}</span>
        </el-col>
  </el-row>
</div>


  <el-row>
    <el-col v-show="!isNoData">
@@ -1387,7 +1446,7 @@
              plain
              v-else-if="row.auditStatus == 1 || row.auditStatus == 2"
              @click="openAuditDiag(row)"
              >审核</el-button
              >待审核</el-button
            >

            <el-button
@@ -1395,7 +1454,7 @@
              size="default"
              type="danger"
              @click="openAuditDiag(row)"
              >审核</el-button
              >待审核</el-button
            >
            <!-- <span v-if="row.auditStatus == 3">已审核</span
              ><span v-else>审核</span> -->
@@ -1471,7 +1530,8 @@
        />
      </el-form-item>
    </el-form>
    <el-card>

    <el-card v-show="tableCurrentRowData.auditStatus==3">
      <template #header>审核详情</template>
      <el-form>
        <el-form-item label="审核人">{{
@@ -1485,6 +1545,7 @@
        }}</el-form-item>
      </el-form>
    </el-card>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
@@ -1644,34 +1705,58 @@
.el-row {
  margin-left: 20px;
}

/* æ¡ä»¶æŸ¥è¯¢æ¨¡å—的样式 */
.head-container-search {
  display: flex;
  justify-content: space-between;
  // float: right;
}

.head-describtion-text {
  justify-content: flex-end;
  margin-bottom: 10px;
  font-size: 14px;
  color: gray;
}

/* æ¡ä»¶æŸ¥è¯¢æ¨¡å—结束 */



/*分析 */
.anasysis {
  margin-bottom: 20px;
// .anasysis {
//   margin-bottom: 20px;
// }
// :deep(.el-statistic__head) {
//   font-weight: bold;
//   font-size: 16px;
// }
.checknum {
  border: 1px solid orange;
  margin-bottom: 10px;
  margin-left: 20px;
  margin: 0px 5px 10px 20px;
}
:deep(.el-statistic__head) {
.checknum-rate{
    margin-left: 5px;
  }
.checknum-blue {
  font-weight: bold;
  font-size: 16px;
  color: blue;
}

.checknum-green {
  font-weight: bold;
  color: green;
}
.checknum-red {
  font-weight: bold;
  color: red;
}
/* åˆ†æžç»“束 */

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



/* è¡¨æ ¼æ¨¡å—的样式 */
:global(.el-table .black-row) {
  color: black;
}

 src/views/line_graph/DataRiskModel.vue

@@ -6,14 +6,8 @@

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 LineChart from './components/LineChart.vue';

import dayjs from 'dayjs';
export default {
@@ -61,14 +55,21 @@
        //  å…¸åž‹å¼‚常复现率
        exceptionRecurrence: '',
        // å¼‚常类型据聚集度
        exceptionTypeAggregation: '',
      
        exceptionTypeAggregation: ''
      }
    };
  },
  setup() {
    const { height } = useWindowSize();
    return { height };

  computed: {
    weight() {
      return (
        (100 - this.bill.online) * 0.1 +
        (100 - this.bill.valid) * 0.2 +
        this.bill.exceeding * 0.2 +
        this.bill.exceptionTypeAggregation * 0.2 +
        this.bill.exceptionRecurrence * 0.3
      ).toFixed(2);
    }
  },
  mounted() {
    this.fetch();
@@ -90,11 +91,11 @@
      let exceedindCriticalDegree = 0;

      // ä¿å­˜å‡ºçŽ°çš„不同异常类型
      let exception = []
      let exception = [];
      // å¼‚常类型聚集度
      let exceptionTypeAggregation = 0
      let exceptionTypeAggregation = 0;
     
      exceptionArr.forEach(item => {
      exceptionArr.forEach((item) => {
        // å¼‚常复现率
        if (item.exceptionType == 4) {
          mutationCount++;
@@ -106,11 +107,11 @@

        // å¼‚常类型聚集度
        if(exception.length == 0){
          exception.push(item.exceptionType)
          exception.push(item.exceptionType);
        }
        // ä¿å­˜æ–°çš„异常类型
        else if(exception.indexOf(item.exceptionType) == -1){
          exception.push(item.exceptionType)
          exception.push(item.exceptionType);
        }
      });

@@ -127,7 +128,12 @@
      }
      console.log('sum:',sum);
      console.log('exception:',exception);
      console.log('其他',mutationCount,exceedindCriticalDegree,exceedindCriticalDegree);
      console.log(
        '其他',
        mutationCount,
        exceedindCriticalDegree,
        exceedindCriticalDegree
      );
      switch (sum) {
        case 0:
          exceptionTyprRecurRate = sum / 3;
@@ -143,13 +149,13 @@
          return 'error';
      }

      exceptionTypeAggregation = exception.length / 8
      exceptionTypeAggregation = exception.length / 8;

      let obj = {}
      obj['exceptionRecurrence'] = exceptionTyprRecurRate
      obj['exceptionTypeAggregation'] = exceptionTypeAggregation
      let obj = {};
      obj['exceptionRecurrence'] = exceptionTyprRecurRate;
      obj['exceptionTypeAggregation'] = exceptionTypeAggregation;

      return obj
      return obj;
    },
    /**
     * è®¡ç®—日期相差几天
@@ -158,12 +164,6 @@
     * @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 dayjs(endDate).diff(startDate,'day') + 1;
    },
    /**
@@ -245,14 +245,6 @@

    // ç‚¹å‡»å±•ç¤ºæŒ‰é’®
    fetchData() {
      if (
        this.form.beginTime >= this.form.endTime &&
        (this.form.beginTime != null || this.form.endTime != null) &&
        (this.form.beginTime != '' || tthis.form.endTime != '')
      ) {
        alert('请输入有效的时间段');
        return;
      }
      let params = {};
      if (this.form.name) {
        params['siteName'] = this.form.name;
@@ -287,8 +279,8 @@
          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
          this.begin = this.chartData[0].lst;
          this.end = this.chartData[this.chartData.length - 1].lst;
        });
    },

@@ -341,9 +333,9 @@
        })
        .then((res) => {
          console.log('异常：', res.data.data);
          let obj = this.calRecur(res.data.data)
          this.bill.exceptionRecurrence = obj['exceptionRecurrence']
          this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation']
          let obj = this.calRecur(res.data.data);
          this.bill.exceptionRecurrence = obj['exceptionRecurrence'];
          this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation'];
        });
    }
  }
@@ -353,9 +345,7 @@
  <div class="search-container">
    <el-container>
      <el-main>
        
        <el-form :inline="true" :model="form" >
       
          <el-form-item>
            <AreaAndmonitorType></AreaAndmonitorType>
          </el-form-item>
@@ -372,34 +362,101 @@
            ></TimeSelectWithShortCuts>
          </el-form-item>
    
        
          <el-form-item>
            <el-button type="primary" @click="fetch">展示折线图</el-button>
          </el-form-item>
       
        </el-form>

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

        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="16" >
         
        <el-card
              shadow="never"
            <el-card shadow="never">
              <DustRadarChart
                :name="[
                  '数据有效率风险',
                  '典型异常复现率风险',
                  '异常类型聚集度风险',
                  '数据超标率风险',
                  '数据在线率风险'
                ]"
                :yData="[
                  bill.valid,
                  bill.exceptionRecurrence,
                  bill.exceptionTypeAggregation,
                  bill.exceeding,
                  bill.online
                ]"
              ></DustRadarChart>
              <div>
                æƒé‡ï¼š
                <span
                  :class="{
                    'weightColor-low': weight < 0.2,
                    'weightColor-medium': weight >= 0.2 && weight < 0.6,
                    'weightColor-heigh': weight >= 0.6
                  }"
                  >{{ weight }}</span
            >
              <DustRadarChart :name="['数据有效率','典型异常复现率','异常类型聚集度','数据超标率','数据在线率']" :yData="[bill.valid,bill.exceptionRecurrence,bill.exceptionTypeAggregation,bill.exceeding,bill.online]" ></DustRadarChart>
            æƒé‡ï¼š{{ ((bill.online*0.1+bill.valid*0.2+bill.exceeding*0.2+bill.exceptionTypeAggregation*0.2+bill.exceptionRecurrence*0.3)*0.01).toFixed(2) }} 
              </div>
              <div></div>
            </el-card>


          </el-col>

          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="4">
            <el-card
              shadow="never"
            style="width: 200px;min-width: 200px;"
            <el-card shadow="never" style="width: 200px; min-width: 200px">
              <template #header>
                <h1
                  :class="{
                    'weightColor-low': weight < 0.2,
                    'weightColor-medium': weight >= 0.2 && weight < 0.6,
                    'weightColor-heigh': weight >= 0.6
                  }"
            >
              <template #header><span class="title-16">风险详情</span></template>
                  é£Žé™©å€¼ï¼š{{ weight }}
                </h1>
              </template>
              <template #default>
                <div class="risk-grade">
                  <h1>风险等级：</h1>
                  <span v-if="weight >= 0.6"> é«˜é£Žé™©</span>
                  <span v-else-if="weight >= 0.2 && weight < 0.6"> ä¸­é£Žé™©</span>
                  <span v-else> ä½Žé£Žé™©</span>
                </div>

                <div class="risk-advice">
                  <h1>管控建议：</h1>
                  <span v-if="weight >= 0.6">
                    å»ºè®®å¯¹è¯¥ç«™ç‚¹è¿›è¡Œçº¿ä¸‹æ‰§æ³•æ£€æŸ¥ï¼Œä¸“项数据对比</span
                  >
                  <span v-else-if="weight >= 0.2 && weight < 0.6">
                    å»ºè®®å¼€å±•å¸¸æ€è¿½è¸ªåˆ†æž</span
                  >
                  <span v-else> å»ºè®®å¼•å¯¼ä¼ä¸šé•¿æ€ä¿æŒ</span>
                </div>
                <div class="grade-instance">
                  <div class="container">
                    <div class="block-color heigh"></div>
                    <div>高风险(≥0.6)</div>
                  </div>
                  <div class="container">
                    <div class="block-color medium"></div>
                    <div>中风险(0.2~0.6)</div>
                  </div>
                  <div class="container">
                    <div class="block-color low"></div>
                    <div>低风险(＜0.2)</div>
                  </div>
                </div>
              </template>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="4">
            <el-card shadow="never" style="width: 200px; min-width: 200px">
              <template #header
                ><span class="title-16">风险详情</span></template
              >
              <el-form >
                <el-form-item label="最大值：">
                  {{ bill.max }} mg/m³
@@ -419,52 +476,17 @@
                <el-form-item label="异常类型聚集度：">
                  {{ bill.exceptionTypeAggregation*100  }}%
                </el-form-item>
                <el-form-item label="典型异常复现率：" label-width="auto">
                <el-form-item label="典型异常复现率：">
                  {{ bill.exceptionRecurrence*100  }}%
                </el-form-item>
              </el-form>
      
            
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="4">
            <el-card
              shadow="never"
              
            style="width:200px; min-width: 200px;"
            >
              <template #header>
                <span class="title-16">风险等级</span>
              </template>
              <template #default>
                <!-- <el-space direction="vertical" :size="15" > -->
                  <div class="container">
                    <div class="block-color heigh"></div> <div>高风险(≥0.6)</div>
                  </div>
                  <div class="container">
                    <div class="block-color medium" ></div> <div>中风险(0.2~0.6)</div>
                  </div>
                  <div class="container">
                    <div class="block-color 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">
            <el-card
              shadow="never"
              
            >
            <el-card shadow="never">
              <template #default>
                <LineChart
                  title="日均值"
@@ -478,10 +500,7 @@
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card
              shadow="never"
             
            >
            <el-card shadow="never">
              <template #default>
                <LineChart
                  title="日在线率"
@@ -495,8 +514,7 @@
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card shadow="never"
            >
            <el-card shadow="never">
              <template #default>
                <LineChart
                  title="日有效率"
@@ -523,9 +541,6 @@
            </el-card>
          </el-col>
        </el-row>



      </el-main>
    </el-container>
  </div>
@@ -552,6 +567,9 @@
  display: flex;
  margin-bottom: 10px;
}
.grade-instance {
  margin-top: 40px;
}
.block-color {
  width: 1em;
  height: 1em;
@@ -562,10 +580,10 @@
  background-color: red;
}
.medium {
  background-color: #FADC19;
  background-color: #fadc19;
}
.low {
  background-color: #9FDB1D;
  background-color: #9fdb1d;
}

.el-text {
@@ -573,16 +591,25 @@
}
.el-form-item {
margin-bottom: 20px;

}
:deep().el-form-item__content {
  justify-content: flex-end;
  
}
.title-16 {
  font-size: 16px;
  font-weight: bold;
}
.el-row {
.weightColor-low {
  color: #9fdb1d;
}
.weightColor-medium {
  color: #dabe09;
}
.weightColor-heigh {
  color: red;
}
.risk-grade {
  display: flex;
  margin-bottom: 20px;
}
</style>

 src/views/line_graph/DataRiskRank.vue

@@ -20,8 +20,6 @@
      tableData: [],
      isNoData: false,
      loading: false,
      // begin: '2023-05-01', //开始时间
      // end: '2023-05-15', //结束时间

      form: {
        // å¼€å§‹æ—¶é—´
@@ -178,7 +176,6 @@

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

        <el-table
          :data="tableData"
@@ -260,6 +257,8 @@
          @update:current-page="handleCurrentChange"
          @update:page-size="handleSizeChange"
        />
      </el-card>

      </el-main>
    </el-container>
  </div>

 src/views/line_graph/SiteComprehensiveRskRanking.vue

@@ -1,25 +1,270 @@
<script>
import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue';
import InputSearch from '@/sfc/InputSearch.vue';
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue';
import exceptionApi from '@/api/exceptionApi.js';
import {useCommonFunction} from '../../utils/common.js';
import index from '@/utils/risk_estimate_common_function/index.js'
import dayjs from 'dayjs';
  export default {
  components: {
    TimeSelectWithShortCuts,
    AreaAndmonitorType,
    InputSearch
  },
    data() {
      return{
        // å½“前页
        currentPage: 1,
      // æ¯é¡µæ¡æ•°
      pageSize: 20,
      total: 0,
      //   è¡¨æ ¼æ•°æ®
      tableData: [],
      isNoData: false,
      loading: false,

      form: {
        // ç«™ç‚¹åç§°
        name: '',
        // å¼€å§‹æ—¶é—´
        beginTime: '',
        // ç»“束时间
        endTime: ''
      },
      bill: {
        min: '',
        max: '',
        avg: '',
        online: '',
        valid: '',
        exceeding: '',

        //  å…¸åž‹å¼‚常复现率
        exceptionRecurrence: '',
        // å¼‚常类型据聚集度
        exceptionTypeAggregation: '',
      },
      // {
      //   siteName:'',
      //   region:'',
      //   monitorType:'',
      //   riskValue:'',
      //   riskGrage:'',
      //   riskAdvice:'',
      //   beginTime:'',
      //   endTime:'',
      // }
      table:[]
    };
  },
  setup(){
     // å¼•å…¥ ç™¾åˆ†å·æ¯”较大小 å¯¼å‡ºåŠŸèƒ½
     const {exportToExcel} = useCommonFunction()
    return {exportToExcel} 
  },

  computed: {
    weight() {
      return (
        (100 - this.bill.online) * 0.1 +
        (100 - this.bill.valid) * 0.2 +
        this.bill.exceeding * 0.2 +
        this.bill.exceptionTypeAggregation * 0.2 +
        this.bill.exceptionRecurrence * 0.3
      ).toFixed(2);
      }
    },
    mounted() {

  watch:{
    weight(){
      this.table[0].riskValue = this.weight
    }
    },
    methods: {
    /**
     * å°†ä¸­å›½æ ‡å‡†æ—¶é—´è½¬ä¸ºæŒ‡å®šæ ¼å¼
     * @param：
     * @returns：
     */
     giveTime(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
      this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
      this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
    },
    // ç‚¹å‡»å±•ç¤ºæŒ‰é’®
    fetchData() {

      let params = {};
      if (this.form.name) {
        params['siteName'] = this.form.name;
      }
      if (this.form.beginTime) {
        params['beginTime'] = this.form.beginTime;
      }
      if (this.form.endTime) {
        params['endTime'] = this.form.endTime;
      }
      this.loading = true;
      exceptionApi
        .analysisdata(this.form.name, this.form.beginTime, this.form.endTime)
        .then((response) => {
          this.chartData = response.data.data;
          this.loading = false;
          if (response.data.data.length == 0) {
            this.isNoData = true;
            return;
          }
          // ç§»é™¤ç©ºæ•°æ®çŠ¶æ€
          this.isNoData = false;
          let temp = index.calBillData(this.chartData,this.form.beginTime,this.form.endTime);
          this.bill.min = temp['min'];
          this.bill.max = temp['max'];

          this.bill.avg = temp['avg'];
          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;
        const tempObj = {}
        tempObj.region = '金山区' 
        tempObj.monitorType = '扬尘' 
        tempObj.siteName = this.form.name
        tempObj.beginTime = this.form.beginTime
        tempObj.endTime = this.form.endTime

        // this.table[0].region = '金山区'  
        // this.table[0].monitorType = '扬尘'  
        // this.table[0].siteName = this.form.name
        // this.table[0].beginTime = this.form.beginTime
        // this.table[0].endTime = this.form.endTime

        if(this.weight>=0.6){
          tempObj.riskGrage = '高风险'
          tempObj.riskAdvice = '建议对该站点进行线下执法检查，专项数据对比'
          // this.table[0].riskGrage = '高风险'
          // this.table[0].riskAdvice = '建议对该站点进行线下执法检查，专项数据对比'
        }else if(this.weight<0.6 && this.weight>=0.2){
          tempObj.riskGrage = '中风险'
          tempObj.riskAdvice = '建议开展常态追踪分析'
          // this.table[0].riskGrage = '中风险'
          // this.table[0].riskAdvice = '建议开展常态追踪分析'
        }else {
          tempObj.riskGrage = '低风险'
          tempObj.riskAdvice = '建议引导企业长态保持'
          // this.table[0].riskGrage = '低风险'
          // this.table[0].riskAdvice = '建议引导企业长态保持'
        }
        this.table.push(tempObj)
        });
    },

    // ä¼ä¸šå¼‚常详情
    exceptiondataCount() {
      exceptionApi
        .exceptiondata1({
          siteName: this.form.name,
          beginTime: this.form.beginTime,
          endTime: this.form.endTime
        })
        .then((res) => {
          let obj = index.calRecur(res.data.data);
          this.bill.exceptionRecurrence = obj['exceptionRecurrence'];
          this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation'];
        });
    },

    /**
     * åˆå§‹åŠ è½½å‡½æ•°
     */
     fetch() {
      // åˆ†æžæ•°æ®
      this.fetchData();
      // å¼‚常数据
      this.exceptiondataCount();
    },

    /**
     * å¯¼å‡ºä¸ºExcel

     */
     exportData(){
      if(this.table.length!=0){
        const  tableColumns = ['siteName','region','monitorType','riskValue','riskGrage','riskAdvice','beginTime','endTime']
        const excelColumns = [['A1','站点名称'],
      ['B1','区域'],['C1','监测类型'],['D1','风险值'],
      ['E1','风险等级'],['F1','管控措施'],['G1','开始日期'],
      ['H1','结束日期']]

      this.exportToExcel(this.table,tableColumns,excelColumns,'综合风险排名.xlsx')
      } 

    },

     }
}
};
</script>

<template>
  <div>
站点综合风险排名
  </div>
  <el-row>
    <el-row>
      <el-form :inline="true" :model="form">
        <el-form-item>
          <AreaAndmonitorType></AreaAndmonitorType>
        </el-form-item>
        <el-form-item>
            <InputSearch
              isNeedDefaultSite="1"
              @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-button type="warning" @click="exportData">导出</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </el-row>

  <el-table
          :data="table"
          height="600px"
          style="width: 100%"
          v-loading="loading"
          :cell-class-name="tableCellClassName"
        >
        <el-table-column
            type="index"
            prop="name"
            label="序号"
            :index="indexMethod"
            fixed
            show-overflow-tooltip
          />
          <el-table-column prop="siteName" label="站点名称" show-overflow-tooltip />
          <el-table-column prop="region" label="区域" show-overflow-tooltip />
          <el-table-column prop="monitorType" label="检测类型" show-overflow-tooltip />
          <el-table-column prop="riskValue" label="风险值" show-overflow-tooltip />
          <el-table-column prop="riskGrage" label="风险等级" show-overflow-tooltip />
          <el-table-column prop="riskAdvice" label="管控措施" show-overflow-tooltip />
          <el-table-column prop="beginTime" label="开始日期" show-overflow-tooltip />
          <el-table-column prop="endTime" label="结束日期" show-overflow-tooltip />
  </el-table>
  <el-empty v-show="isNoData" :image-size="200" />

</template>

<style  scoped>
.el-row,.el-table  {
  margin: 10px 0px 0px 10px
}
.el-table{

}
</style>

 src/views/line_graph/components/DustRadarChart.vue

@@ -54,7 +54,7 @@
              color: ['#ddd', '#aaa']
            }
          },
          // shape: 'circle',

          indicator: [
            { name: this.name[0], max: 1 },
            { name: this.name[1], max: 1 },
@@ -62,13 +62,7 @@
            { 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'
          },
@@ -82,11 +76,11 @@
            data: [
              {
                value: [
                  (this.yData[0] / 100).toFixed(4),
                  (1 - (this.yData[0] / 100).toFixed(4)),
                  this.yData[1],
                  this.yData[2],
                  (this.yData[3] / 100).toFixed(4),
                  (this.yData[4] / 100).toFixed(4)
                  1-((this.yData[4] / 100).toFixed(4))
                ],
                // value: [
                //   this.yData[0],

 src/views/login/LoginSystem.vue

@@ -31,6 +31,7 @@
</template>

<script lang="ts">
import Cookie from 'js-cookie'
export default {
  data() {
    return {
@@ -43,6 +44,8 @@
      // ç™»å½•é€»è¾‘
      if (this.username === 'admin' && this.password === 'admin123') {
         ElMessage.success('登录成功');
         const token = 'abc'
         Cookie.set('token',token)
          // ç™»å½•æˆåŠŸï¼Œè·³è½¬åˆ°å¯¹åº”页面
          this.$router.push('/edata') // å‡è®¾ç™»å½•æˆåŠŸåŽè·³è½¬åˆ° '/dashboard' é¡µé¢
        } else {

 src/views/setting/SetConfiguration.vue

@@ -1,76 +1,75 @@
<script>
import {useCounterStore} from '@/stores/counter';
import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue';
import settingApi from '@/api/data_access_setting/settingApi.js'
import dayjs from 'dayjs';
export default {
    components: {
    TimeSelectWithShortCuts,

  },
   data(){
      return{

      // åŒºåŸŸ
        radio:0,
        // å®šæ—¶
        radio1:'',
        beginTime:'',
        endTime:'',
      }
   },
   setup(){
    const store = useCounterStore()
    const unsubscribe = store.$onAction(
  ({
    name, // action çš„名字
    store, // store å®žä¾‹
    args, // è°ƒç”¨è¿™ä¸ª action çš„参数
    after, // åœ¨è¿™ä¸ª action æ‰§è¡Œå®Œæ¯•ä¹‹åŽï¼Œæ‰§è¡Œè¿™ä¸ªå‡½æ•°
    onError, // åœ¨è¿™ä¸ª action æŠ›å‡ºå¼‚常的时候，执行这个函数
  }) => {
    // è®°å½•å¼€å§‹çš„时间变量
    const startTime = Date.now()
    // è¿™å°†åœ¨ `store` ä¸Šçš„操作执行之前触发
    console.log(`Start "${name}" with params [${args.join(', ')}].`)

    // å¦‚æžœ action æˆåŠŸå¹¶ä¸”完全运行后，after å°†è§¦å‘。
    // å®ƒå°†ç­‰å¾…任何返回的 promise
    after((result) => { 
      console.log(
        `Finished "${name}" after ${
          Date.now() - startTime
        }ms.\nResult: ${result}.`
      )
    })

    // å¦‚æžœ action æŠ›å‡ºæˆ–返回 Promise.reject ï¼ŒonError å°†è§¦å‘
    onError((error) => {
      console.warn(
        `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
      )
    })
  }
)
    return{
      store,unsubscribe
    }
   },
   computed:{
    a(){
      return this.store.doubleCount*2
    },
 
   },
   mounted(){

   },
   methods:{
    doThing(){
      this.store.increment(5)
      this.store.doubleCount
      giveTime(val) {
        //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
        this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
        this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
      },
      set(){
        const params = {}
        params.user = 'admin'
        params.beginTime = this.beginTime
        params.endTime = this.endTime
        params.region  = '金山'
        params.isRegularTime  = this.radio1
        settingApi.submitSetting(params).then(res => {
          if(res.data.code == 1){
            ElMessage.success('设置成功')
          }else{
            ElMessage('设置失败')
          }
        })
    }
   }
}
</script>

<template>
  <div>
    <el-button type="primary" @click="doThing">点击{{ store.doubleCount }}</el-button>
  </div>
  <div>{{ a }}</div>
  <div>{{ store.secret }}</div>
  <div>{{ store.vue }}</div>
  <div>{{ store.天 }}</div>
  <div>生成配置文件</div>
  <el-form>
    <el-form-item label="区域">
      <el-radio-group v-model="radio">
    <el-radio :label="0">金山</el-radio>
    <!-- <el-radio :label="6">Option B</el-radio>
    <el-radio :label="9">Option C</el-radio> -->
  </el-radio-group>
    </el-form-item>
    <el-form-item label="选择起始时间">
      <TimeSelectWithShortCuts @submit-time="giveTime"></TimeSelectWithShortCuts>
    </el-form-item>

    <el-form-item label="是否定时">
      <el-radio-group v-model="radio1" >
      <el-radio label="1" size="large">是</el-radio>
      <el-radio label="2" size="large">否</el-radio>
    </el-radio-group>
    </el-form-item>

    <el-form-item> <el-button @click="set">设置</el-button></el-form-item>
  </el-form>
</template>

<style scoped>

</style>