扬尘Vue代码

zmc

2023-08-30 d3d7dcf919eda40a415b6dc744fb0b347d4293a8

扬尘Vue代码

 components.d.ts

@@ -37,17 +37,18 @@
    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']
    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
    ElSpace: typeof import('element-plus/es')['ElSpace']
    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    ElTag: typeof import('element-plus/es')['ElTag']
    ElText: typeof import('element-plus/es')['ElText']
    ElTimeline: typeof import('element-plus/es')['ElTimeline']
    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
    IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
    IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
    IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']

 package-lock.json

@@ -9,6 +9,7 @@
      "version": "0.0.0",
      "dependencies": {
        "@element-plus/icons-vue": "^2.1.0",
        "@vueuse/core": "^10.4.1",
        "axios": "^1.4.0",
        "axiosInstance": "^1.4.0",
        "dayjs": "^1.11.9",
@@ -1431,9 +1432,9 @@
      "dev": true
    },
    "node_modules/@types/web-bluetooth": {
      "version": "0.0.16",
      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
      "version": "0.0.17",
      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
      "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
    },
    "node_modules/@typescript-eslint/eslint-plugin": {
      "version": "5.59.11",
@@ -1776,14 +1777,14 @@
      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
    },
    "node_modules/@vueuse/core": {
      "version": "9.13.0",
      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
      "version": "10.4.1",
      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.4.1.tgz",
      "integrity": "sha512-DkHIfMIoSIBjMgRRvdIvxsyboRZQmImofLyOHADqiVbQVilP8VVHDhBX2ZqoItOgu7dWa8oXiNnScOdPLhdEXg==",
      "dependencies": {
        "@types/web-bluetooth": "^0.0.16",
        "@vueuse/metadata": "9.13.0",
        "@vueuse/shared": "9.13.0",
        "vue-demi": "*"
        "@types/web-bluetooth": "^0.0.17",
        "@vueuse/metadata": "10.4.1",
        "@vueuse/shared": "10.4.1",
        "vue-demi": ">=0.14.5"
      }
    },
    "node_modules/@vueuse/core/node_modules/vue-demi": {
@@ -1871,12 +1872,6 @@
        }
      }
    },
    "node_modules/@vueuse/integrations/node_modules/@types/web-bluetooth": {
      "version": "0.0.17",
      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
      "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==",
      "dev": true
    },
    "node_modules/@vueuse/integrations/node_modules/@vueuse/core": {
      "version": "10.2.1",
      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.2.1.tgz",
@@ -1928,22 +1923,22 @@
      }
    },
    "node_modules/@vueuse/metadata": {
      "version": "9.13.0",
      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ=="
      "version": "10.4.1",
      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-10.4.1.tgz",
      "integrity": "sha512-2Sc8X+iVzeuMGHr6O2j4gv/zxvQGGOYETYXEc41h0iZXIRnRbJZGmY/QP8dvzqUelf8vg0p/yEA5VpCEu+WpZg=="
    },
    "node_modules/@vueuse/shared": {
      "version": "9.13.0",
      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
      "version": "10.4.1",
      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-10.4.1.tgz",
      "integrity": "sha512-vz5hbAM4qA0lDKmcr2y3pPdU+2EVw/yzfRsBdu+6+USGa4PxqSQRYIUC9/NcT06y+ZgaTsyURw2I9qOFaaXHAg==",
      "dependencies": {
        "vue-demi": "*"
        "vue-demi": ">=0.14.5"
      }
    },
    "node_modules/@vueuse/shared/node_modules/vue-demi": {
      "version": "0.14.5",
      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz",
      "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
      "version": "0.14.6",
      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
      "hasInstallScript": true,
      "bin": {
        "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -2821,6 +2816,79 @@
      },
      "peerDependencies": {
        "vue": "^3.2.0"
      }
    },
    "node_modules/element-plus/node_modules/@types/web-bluetooth": {
      "version": "0.0.16",
      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
    },
    "node_modules/element-plus/node_modules/@vueuse/core": {
      "version": "9.13.0",
      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
      "dependencies": {
        "@types/web-bluetooth": "^0.0.16",
        "@vueuse/metadata": "9.13.0",
        "@vueuse/shared": "9.13.0",
        "vue-demi": "*"
      }
    },
    "node_modules/element-plus/node_modules/@vueuse/core/node_modules/vue-demi": {
      "version": "0.14.6",
      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
      "hasInstallScript": true,
      "bin": {
        "vue-demi-fix": "bin/vue-demi-fix.js",
        "vue-demi-switch": "bin/vue-demi-switch.js"
      },
      "engines": {
        "node": ">=12"
      },
      "peerDependencies": {
        "@vue/composition-api": "^1.0.0-rc.1",
        "vue": "^3.0.0-0 || ^2.6.0"
      },
      "peerDependenciesMeta": {
        "@vue/composition-api": {
          "optional": true
        }
      }
    },
    "node_modules/element-plus/node_modules/@vueuse/metadata": {
      "version": "9.13.0",
      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ=="
    },
    "node_modules/element-plus/node_modules/@vueuse/shared": {
      "version": "9.13.0",
      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
      "dependencies": {
        "vue-demi": "*"
      }
    },
    "node_modules/element-plus/node_modules/@vueuse/shared/node_modules/vue-demi": {
      "version": "0.14.6",
      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
      "hasInstallScript": true,
      "bin": {
        "vue-demi-fix": "bin/vue-demi-fix.js",
        "vue-demi-switch": "bin/vue-demi-switch.js"
      },
      "engines": {
        "node": ">=12"
      },
      "peerDependencies": {
        "@vue/composition-api": "^1.0.0-rc.1",
        "vue": "^3.0.0-0 || ^2.6.0"
      },
      "peerDependenciesMeta": {
        "@vue/composition-api": {
          "optional": true
        }
      }
    },
    "node_modules/error-ex": {
@@ -6259,39 +6327,6 @@
        "vite": "^3.0.0-0 || ^4.0.0-0"
      }
    },
    "node_modules/vite-plugin-vue-devtools/node_modules/@types/web-bluetooth": {
      "version": "0.0.17",
      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
      "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==",
      "dev": true
    },
    "node_modules/vite-plugin-vue-devtools/node_modules/@vueuse/core": {
      "version": "10.2.1",
      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.2.1.tgz",
      "integrity": "sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==",
      "dev": true,
      "dependencies": {
        "@types/web-bluetooth": "^0.0.17",
        "@vueuse/metadata": "10.2.1",
        "@vueuse/shared": "10.2.1",
        "vue-demi": ">=0.14.5"
      }
    },
    "node_modules/vite-plugin-vue-devtools/node_modules/@vueuse/metadata": {
      "version": "10.2.1",
      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-10.2.1.tgz",
      "integrity": "sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==",
      "dev": true
    },
    "node_modules/vite-plugin-vue-devtools/node_modules/@vueuse/shared": {
      "version": "10.2.1",
      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-10.2.1.tgz",
      "integrity": "sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==",
      "dev": true,
      "dependencies": {
        "vue-demi": ">=0.14.5"
      }
    },
    "node_modules/vite-plugin-vue-devtools/node_modules/brace-expansion": {
      "version": "2.0.1",
      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -7809,9 +7844,9 @@
      "dev": true
    },
    "@types/web-bluetooth": {
      "version": "0.0.16",
      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
      "version": "0.0.17",
      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
      "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
    },
    "@typescript-eslint/eslint-plugin": {
      "version": "5.59.11",
@@ -8068,14 +8103,14 @@
      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
    },
    "@vueuse/core": {
      "version": "9.13.0",
      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
      "version": "10.4.1",
      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.4.1.tgz",
      "integrity": "sha512-DkHIfMIoSIBjMgRRvdIvxsyboRZQmImofLyOHADqiVbQVilP8VVHDhBX2ZqoItOgu7dWa8oXiNnScOdPLhdEXg==",
      "requires": {
        "@types/web-bluetooth": "^0.0.16",
        "@vueuse/metadata": "9.13.0",
        "@vueuse/shared": "9.13.0",
        "vue-demi": "*"
        "@types/web-bluetooth": "^0.0.17",
        "@vueuse/metadata": "10.4.1",
        "@vueuse/shared": "10.4.1",
        "vue-demi": ">=0.14.5"
      },
      "dependencies": {
        "vue-demi": {
@@ -8097,12 +8132,6 @@
        "vue-demi": ">=0.14.5"
      },
      "dependencies": {
        "@types/web-bluetooth": {
          "version": "0.0.17",
          "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
          "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==",
          "dev": true
        },
        "@vueuse/core": {
          "version": "10.2.1",
          "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.2.1.tgz",
@@ -8140,22 +8169,22 @@
      }
    },
    "@vueuse/metadata": {
      "version": "9.13.0",
      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ=="
      "version": "10.4.1",
      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-10.4.1.tgz",
      "integrity": "sha512-2Sc8X+iVzeuMGHr6O2j4gv/zxvQGGOYETYXEc41h0iZXIRnRbJZGmY/QP8dvzqUelf8vg0p/yEA5VpCEu+WpZg=="
    },
    "@vueuse/shared": {
      "version": "9.13.0",
      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
      "version": "10.4.1",
      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-10.4.1.tgz",
      "integrity": "sha512-vz5hbAM4qA0lDKmcr2y3pPdU+2EVw/yzfRsBdu+6+USGa4PxqSQRYIUC9/NcT06y+ZgaTsyURw2I9qOFaaXHAg==",
      "requires": {
        "vue-demi": "*"
        "vue-demi": ">=0.14.5"
      },
      "dependencies": {
        "vue-demi": {
          "version": "0.14.5",
          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz",
          "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
          "version": "0.14.6",
          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
          "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
          "requires": {}
        }
      }
@@ -8878,6 +8907,53 @@
        "lodash-unified": "^1.0.2",
        "memoize-one": "^6.0.0",
        "normalize-wheel-es": "^1.2.0"
      },
      "dependencies": {
        "@types/web-bluetooth": {
          "version": "0.0.16",
          "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
          "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
        },
        "@vueuse/core": {
          "version": "9.13.0",
          "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
          "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
          "requires": {
            "@types/web-bluetooth": "^0.0.16",
            "@vueuse/metadata": "9.13.0",
            "@vueuse/shared": "9.13.0",
            "vue-demi": "*"
          },
          "dependencies": {
            "vue-demi": {
              "version": "0.14.6",
              "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
              "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
              "requires": {}
            }
          }
        },
        "@vueuse/metadata": {
          "version": "9.13.0",
          "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
          "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ=="
        },
        "@vueuse/shared": {
          "version": "9.13.0",
          "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
          "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
          "requires": {
            "vue-demi": "*"
          },
          "dependencies": {
            "vue-demi": {
              "version": "0.14.6",
              "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
              "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
              "requires": {}
            }
          }
        }
      }
    },
    "error-ex": {
@@ -11622,39 +11698,6 @@
        "xterm-addon-fit": "^0.7.0"
      },
      "dependencies": {
        "@types/web-bluetooth": {
          "version": "0.0.17",
          "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
          "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==",
          "dev": true
        },
        "@vueuse/core": {
          "version": "10.2.1",
          "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.2.1.tgz",
          "integrity": "sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==",
          "dev": true,
          "requires": {
            "@types/web-bluetooth": "^0.0.17",
            "@vueuse/metadata": "10.2.1",
            "@vueuse/shared": "10.2.1",
            "vue-demi": ">=0.14.5"
          }
        },
        "@vueuse/metadata": {
          "version": "10.2.1",
          "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-10.2.1.tgz",
          "integrity": "sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==",
          "dev": true
        },
        "@vueuse/shared": {
          "version": "10.2.1",
          "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-10.2.1.tgz",
          "integrity": "sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==",
          "dev": true,
          "requires": {
            "vue-demi": ">=0.14.5"
          }
        },
        "brace-expansion": {
          "version": "2.0.1",
          "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",

 package.json

@@ -13,6 +13,7 @@
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "@vueuse/core": "^10.4.1",
    "axios": "^1.4.0",
    "axiosInstance": "^1.4.0",
    "dayjs": "^1.11.9",

 src/api/exportExcel/requetsApi.js

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

export default {
    /**
     * æ ¹æ®ç«™ç‚¹ï¼Œæ—¶é—´æ®µæŸ¥è¯¢åˆ†æžè¡¨æ‰€æœ‰æ•°æ®
     * @param： è¯·æ±‚参数对象
     * @returns
     */
    fetchAllData(argsObj){
        return $http.get('dust/analysisall',{params:argsObj});
    }
}

 src/components/layout/AppAside.vue

@@ -36,7 +36,7 @@
    
      <el-menu
        active-text-color="#F7BA1E"
        background-color="#0093E9"
        background-color="#2876aa"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
@@ -60,7 +60,7 @@
        <el-sub-menu index="1">
          <template #title>
            <el-icon><i-ep-Monitor /></el-icon>
            <span>分险评估</span>
            <span class="parent-title">分险评估</span>
          </template>

          <el-menu-item index="avgDay" @click="selected = optionClick[0]">
@@ -77,7 +77,7 @@
        <el-sub-menu index="2">
          <template #title>
            <el-icon><i-ep-Histogram /></el-icon>
            <span>线上巡检</span>
            <span class="parent-title">线上巡检</span>
          </template>
          <el-menu-item index="edata" @click="selected = optionClick[2]">
            <el-icon><i-ep-Bell /></el-icon>
@@ -94,7 +94,7 @@
        <el-sub-menu index="3">
          <template #title>
            <el-icon><i-ep-DataLine /></el-icon>
            <span>数据管理</span>
            <span class="parent-title">数据管理</span>
          </template>
 
         
@@ -116,7 +116,7 @@
          <el-sub-menu index="4">
              <template #title>
                <el-icon><i-ep-DataLine /></el-icon>
                  <span>配置管理</span>
                  <span class="parent-title">配置管理</span>
              </template>

              <el-menu-item index="setting" @click="selected = optionClick[6]">
@@ -132,7 +132,7 @@

<style lang="scss" scoped>
.el-aside {
  background-color: #0093E9;
  background-color: #2876aa;
  

  height: 100vh;
@@ -140,7 +140,7 @@
}

.el-menu {
  background-color: #0093E9;
  background-color: #2876aa;

  width: 220px;
  border-right: none;
@@ -180,4 +180,8 @@
.slot-lable {
  color: #f7f8fa;
}
.parent-title {
  font-weight: bold;
  font-size: 18px;
}
</style>

 src/components/layout/AppHeader.vue

@@ -77,7 +77,7 @@
    align-items: center;
    color: white;
    background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
background-image: linear-gradient(160deg, #2876aa 0%, #5cbfdd 100%);




 src/components/layout/AppLayout.vue

@@ -41,6 +41,8 @@
  padding: 0;
  // overflow-y: hidden;
}

* {
  font-family: 'KaiGenGothicSC-Light';
}
</style>


 src/router/index.ts

@@ -13,7 +13,7 @@
        {
          path:"/avgDay",
          name:'avgDay',
          component: () => import('@/views/line_graph/dayMonthAvgData.vue')
          component: () => import('@/views/line_graph/DataRiskModel.vue')
         },


@@ -21,7 +21,7 @@
         {
          path:"/analysis",
          name:'analysis',
          component: () => import('@/views/line_graph/analysisData.vue')
          component: () => import('@/views/line_graph/DataRiskRank.vue')
         },

        //  åŽ†å²æ•°æ®ç®¡ç†
@@ -35,7 +35,7 @@
         {
          path:"/edata",
          name:'edata',
          component: () => import('@/views/exception/ExceptionData.vue')
          component: () => import('@/views/exception/FlightInspection.vue')
         },
         
        //  å¼‚常测试

 src/sfc/DustExceptionText.vue

@@ -24,11 +24,12 @@
    requestExceptionData() {
      // ä¸åˆ†é¡µ
      exceptionApi
        .exceptiondata1(
          this.siteName,
          this.exceptionType,
          this.beginTime,
          this.endTime
        .exceptiondata1({
          siteName:  this.siteName,
          exceptionType:this.exceptionType,
          beginTime:this.beginTime,
          endTime:this.endTime
        }
        )
        .then((result) => {
          //将返回的结果传递给父组件

 src/sfc/DustRadarChart.vue

ÎļþÒÑɾ³ý

 src/sfc/ExceptionType.vue

@@ -16,7 +16,10 @@
        // è¿”回的所有异常类型
        exceptionType:[],
        //已勾选的异常
        checkedList: []
        checkedList: [],
        // å…¨é€‰
        checkAll:false,
        isIndeterminate:false,
      }
    },
    mounted() {
@@ -26,9 +29,24 @@
        // èŽ·å–不同的异常名称
        getExceptionType(){
            this.$http.get('/dust/exceptiontype').then(response=>{   
                this.exceptionType = response.data.data
                // this.exceptionType = response.data.data
                response.data.data.forEach(item => {
                    this.exceptionType.push(item.exceptionType)
                });
                console.log(this.exceptionType);
            })
        }
        },
        handleCheckAllChange (val) {
          this.checkedList = val ? this.exceptionType : []
          this.isIndeterminate = false
          this.$emit('submitValue',this.checkedList)
        },
        handleCheckedExceptionChange  (value)  {
  const checkedCount = value.length
  this.checkAll = checkedCount === this.exceptionType.length
  this.isIndeterminate = checkedCount > 0 && checkedCount < this.exceptionType.length
  this.$emit('submitValue',this.checkedList)
}
     }
}
</script>
@@ -36,17 +54,24 @@
<template>
  <div class="excption">
    <span class="exception-text">异常类型：</span>
    <el-checkbox-group  v-model="checkedList"  @change="$emit('submitValue',checkedList)">
    <el-checkbox :label="item.exceptionType"  v-for="item in exceptionType" :key="item">
     <el-checkbox
    v-model="checkAll"
    :indeterminate="isIndeterminate"
    @change="handleCheckAllChange"
    class="select-text"
    >全选</el-checkbox
  >
    <el-checkbox-group  v-model="checkedList"  @change="handleCheckedExceptionChange">
    <el-checkbox :label="item"  v-for="item in exceptionType" :key="item">
      <template #default>
        <span v-if="item.exceptionType == '0'">断电或断网</span>
        <span v-else-if="item.exceptionType == '1'">数据超低</span>
        <span v-else-if="item.exceptionType == '2'">超标</span>
        <span v-else-if="item.exceptionType == '3'">数据长时段无波动</span>
        <span v-else-if="item.exceptionType == '4'">量级突变异常</span>
        <span v-else-if="item.exceptionType == '5'">临近超标异常</span>
        <span v-else-if="item.exceptionType == '6'">单日超标次数临界异常</span>
        <span v-else-if="item.exceptionType == '7'">滑动平均值突变</span>
        <span v-if="item == '0'">断电或断网</span>
        <span v-else-if="item == '1'">数据超低</span>
        <span v-else-if="item == '2'">超标</span>
        <span v-else-if="item == '3'">数据长时段无波动</span>
        <span v-else-if="item == '4'">量级突变异常</span>
        <span v-else-if="item == '5'">临近超标异常</span>
        <span v-else-if="item == '6'">单日超标次数临界异常</span>
        <span v-else-if="item == '7'">滑动平均值突变</span>
      </template>
    </el-checkbox>
  </el-checkbox-group>
@@ -55,7 +80,7 @@

<style lang="scss" scoped>
.excption {
    display: flex;  
    display: flex; 
}
.exception-text {
  font-weight: bold;
@@ -65,4 +90,8 @@
.el-checkbox-group {
  margin-top: 5px;
}
.select-text {
  margin-top: 5px;
  margin-right: 5px;
}
</style>

 src/utils/common.js

@@ -1,3 +1,4 @@
import * as XLSX from 'xlsx/xlsx.mjs';
export function useCommonFunction(){
    /**
     * description：判断起始时间跨度是否超过1个月
@@ -53,8 +54,43 @@
     * @returns：大于，则返回true。否则返回false
     */
      function cmpp(a, b) {
        return Number(a.replace('%', '')) > Number(b.replace('%', ''));
        return Number(a.replace('%', '')) >= Number(b.replace('%', ''));
      }

      return {isExceedOneMonth,cmpp}
          /**
     *导出为excel
     * @param： è¡¨æ ¼æ•°æ®ï¼Œå¾…导出的表格列，excel列，excel文件名
     * @returns
     */
     function exportToExcel(exportData,tableColumns,excelColumnsName,excelName='data.xlsx'){
      const itemsFormatted = exportData.map((item) => {
        const newItem = {};
        tableColumns.forEach((col) => {
          newItem[col] = item[col];
        });
        return newItem;
      });
      // åˆ›å»ºxlsx对象
      const xls = XLSX.utils.json_to_sheet(itemsFormatted);
     
    //   xls['A1'].v = '设备编号';
    //   xls['B1'].v = '异常类型';
    //   xls['C1'].v = '地区';
    //   xls['D1'].v = '开始时间';
    //   xls['E1'].v = '结束时间';

     // ç¼–辑表头行       ä¿®æ”¹è¡¨å¤´
      excelColumnsName.forEach(item =>{
        xls[item[0]].v = item[1]
      })
      // åˆ›å»ºworkbook，并把sheet添加进去
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, xls, 'Sheet1');
      // å°†workbook转为二进制xlsx文件并下载
      XLSX.writeFile(wb, excelName);
    
    }

    return {isExceedOneMonth,cmpp,exportToExcel}
}


 src/views/exception/ExceptionTest.vue

@@ -39,7 +39,7 @@
      // è¡¨æ ¼å±•ç¤ºçš„数据
      displayData: [],
      // è¡¨æ ¼é«˜åº¦
      tableHeight: 300,
      tableHeight: 400,
      // è¡¨æ ¼æ•°æ®
      // å½“前页
      currentPage: 1,
@@ -191,7 +191,7 @@
    // console.log('历史数据为：', this.backData.value);

    this.backExceptionDataAWeekAgo();
    this.calTableHeight();
    // this.calTableHeight();
    // æŸ¥è¯¢æ—¶é—´æ®µçš„各异常的站点，查询该时间区间的各异常数量
    this.getShopNames();
    // this.exception.exception0 = this.getSiteNameByExceptionType('0',this.beginTime,this.endTime)
@@ -1367,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>
            <TimeSelectWithShortCuts @submit-time="giveTime"></TimeSelectWithShortCuts>
          </el-form-item>
        </div>

@@ -1608,7 +1610,7 @@
              <!-- æ ‡å¤´ -->
              <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">
@@ -1745,7 +1747,7 @@
              <!-- æ ‡å¤´ -->
              <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">

 src/views/exception/FlightInspection.vue

 src/views/line_graph/DataRiskModel.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,506 @@
<!-- æ—¥å‡å€¼ -->
<script>
import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue';
import InputSearch from '../../sfc/InputSearch.vue';
import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue';

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

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

import dayjs from 'dayjs';
export default {
  components: {
    LineChart,
    TimeSelectWithShortCuts,
    InputSearch,
    AreaAndmonitorType,
    DustRadarChart
  },
  data() {
    return {
      isNoData: false,
      loading: false,
      chartData: [],
      chartData1: {}, //保存查询的结果
      chartData2: {},
      chartData3: {},
      chartData4: {},
      //devId:'',          //设备编号
      // begin: '2023-05-01', //开始时间
      // end: '2023-05-15', //结束时间

      form: {
        // ç«™ç‚¹åç§°
        name: '',
        // è®¾å¤‡ç¼–号
        number: '',
        // å¼€å§‹æ—¶é—´
        beginTime: '',
        // ç»“束时间
        endTime: ''
      },
      // æŠ˜çº¿å›¾é…ç½®é¡¹
      option: {},
      // æ•°æ®æ¸…单
      bill: {
        min: '',
        max: '',
        avg: '',
        online: '',
        valid: '',
        exceeding: '',

        //  å…¸åž‹å¼‚常复现率
        exceptionRecurrence: '',
        // å¼‚常类型据聚集度
        exceptionTypeAggregation: '',
      
      }
    };
  },
  setup() {
    const { height } = useWindowSize();
    return { height };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    /**
     * è®¡ç®—异常类型聚集度 å¼‚常复现率
     * @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
    },
    /**
     * è®¡ç®—日期相差几天
     * @param：
     * @createTime:开始时间，结束时间
     * @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;
    },
    /**
     * ä»Žåˆ†æžæ•°æ®æ•°ç»„中找到最小和大值
     * @param：
     * @returns：
     */
    calBillData(arr) {
      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(this.form.beginTime).format('YYYY-MM-DD');
      let end = dayjs(this.form.endTime).format('YYYY-MM-DD');
      let dayDiff = this.getDaysDifference(begin, end);
      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;
      obj['max'] = max;

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

      return obj;
    },

    /**
     * å°†ä¸­å›½æ ‡å‡†æ—¶é—´è½¬ä¸ºæŒ‡å®šæ ¼å¼
     * @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');
    },
    /**
     * åˆå§‹åŠ è½½å‡½æ•°
     * @param：
     * @returns：
     */
    fetch() {
      // åˆ†æžæ•°æ®
      this.fetchData();
      // å¼‚常数据
      this.exceptiondataCount();
    },

    // ç‚¹å‡»å±•ç¤ºæŒ‰é’®
    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;
      }
      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;
          this.setChart();

          let temp = this.calBillData(this.chartData);
          console.log('temp:', temp);
          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'];
        });
    },

    // é€‰æ‹©å…¶ä»–值类型时
    setChart() {
      if (this.chartData.length) {
        // x轴日期时间
        let dateList = [];
        //颗粒物平均浓度
        let dayAvg = [];
        let dataOnline = [];
        let dataValid = [];
        let dataExceed = [];
        this.chartData.forEach((item) => {
          //x轴日期
          dateList.push(item.lst);
          // åŽ†å²æ²¹çƒŸæµ“度
          dayAvg.push(item.dayAvg);
          dataOnline.push(item.dayOnline.slice(0, -1));
          dataValid.push(item.dayValid.slice(0, -1));
          dataExceed.push(item.dayExceeding.slice(0, -1));
        });

        this.chartData1 = {
          x: dateList,
          y: dayAvg
        };
        this.chartData2 = {
          x: dateList,
          y: dataOnline
        };
        this.chartData3 = {
          x: dateList,
          y: dataValid
        };
        this.chartData4 = {
          x: dateList,
          y: dataExceed
        };
      }
    },

    // ä¼ä¸šå¼‚常详情
    exceptiondataCount() {
      exceptionApi
        .exceptiondata1({
          siteName: this.form.name,
          beginTime: this.form.beginTime,
          endTime: this.form.endTime
        })
        .then((res) => {
          console.log('异常：', res.data.data);
          let obj = this.calRecur(res.data.data)
          this.bill.exceptionRecurrence = obj['exceptionRecurrence']
          this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation']
        });
    }
  }
};
</script>
<template>
  <div class="search-container">
    <el-container>
      <el-main>
        <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-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>

        <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
                  title="日均值"
                  :chartData="chartData1"
                  yName="浓度"
                  seriesName="日均值"
                >
                </LineChart>
              </template>
            </el-card>
          </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)` }"
            >
              <template #default>
                <LineChart
                  title="日在线率"
                  :chartData="chartData2"
                  yName="百分比"
                  seriesName="日在线率"
                >
                </LineChart>
              </template>
            </el-card>
          </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)` }">
              <template #default>
                <LineChart
                  title="日有效率"
                  :chartData="chartData3"
                  yName="百分比"
                  seriesName="日有效率"
                >
                </LineChart>
              </template>
            </el-card>
          </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)` }">
              <template #default>
                <LineChart
                  title="日超标率"
                  :chartData="chartData4"
                  yName="百分比"
                  seriesName="日超标率"
                >
                </LineChart>
              </template>
            </el-card>
          </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>
</template>

<style scoped>
.el-card {
  margin-top: 15px;
  border-radius: 9px;
}
.chart-container {
  width: 100%;
  height: 600px;
}
.el-header {
  background-color: #010408;
  color: #333;
  line-height: 60px;
}
</style>

 src/views/line_graph/DataRiskRank.vue

ÎļþÃû´Ó src/views/line_graph/analysisData.vue ÐÞ¸Ä
@@ -3,7 +3,7 @@
// import InputSearch from '../../sfc/InputSearch.vue';
import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue';
import {useCommonFunction} from '../../utils/common.js';

import requetsApi from '@/api/exportExcel/requetsApi.js'
import dayjs from 'dayjs';
export default {
  components: {
@@ -22,8 +22,8 @@
      tableData: [],
      isNoData: false,
      loading: false,
      begin: '2023-05-01', //开始时间
      end: '2023-05-15', //结束时间
      // begin: '2023-05-01', //开始时间
      // end: '2023-05-15', //结束时间

      form: {
        // ç«™ç‚¹åç§°
@@ -38,9 +38,9 @@
    };
  },
  setup(){
    // å¼•å…¥ ç™¾åˆ†å·æ¯”较大小
    const {cmpp} = useCommonFunction()
    return {cmpp} 
     // å¼•å…¥ ç™¾åˆ†å·æ¯”较大小 å¯¼å‡ºåŠŸèƒ½
     const {cmpp,exportToExcel} = useCommonFunction()
    return {cmpp,exportToExcel} 
  },

  //   watch:{
@@ -56,6 +56,35 @@
    this.form.name = '';
  },
  methods: {
    // åŠŸèƒ½ï¼šå¯¼å‡ºä¸ºExcel
    exportData(){
      let params  ={
        'beginTime':this.form.beginTime,
        'endTime': this.form.endTime
      }
      requetsApi.fetchAllData(params).then(res => {
        const data = res.data.data
        console.log('长度：',data.length);

        const  tableColumns = [
        'name',
        'mnCode',
        'lst',
        'dayAvg',
        'min',
        'max',
        'dayOnline',
        'dayValid',
        'dayExceeding',
      ]
      const excelColumns = [['A1','站点名称'],
      ['B1','设备编号'],['C1','监测日期'],['D1','平均值'],
      ['E1','最小值'],['F1','最大值'],['G1','在线率'],
      ['H1','有效率'],['I1','超标率']]
      this.exportToExcel(data,tableColumns,excelColumns,'分析表.xlsx')
      })
      
    },
    // åŠŸèƒ½ï¼šæ”¹å˜è¡¨æ ¼æŸä¸ªå•å…ƒæ ¼çš„颜色
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      // å¹³å‡å€¼ä¸æ»¡è¶³æ ‡å‡†æ—¶
@@ -159,6 +188,7 @@
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fetchData">统计分析</el-button>
            <el-button type="warning" @click="exportData">导出</el-button>
          </el-form-item>
        </el-form>

@@ -199,40 +229,40 @@

          <el-table-column
            prop="dayAvg"
            label="平均值"
            label="日平均值"
            sortable
            show-overflow-tooltip
          />
          <el-table-column
            prop="min"
            label="最小值"
            label="日最小值"
            sortable
            show-overflow-tooltip
          />
          <el-table-column
            prop="max"
            label="最大值"
            label="日最大值"
            sortable
            show-overflow-tooltip
          />

          <el-table-column
            prop="dayOnline"
            label="在线率"
            label="日在线率"
            sortable
            show-overflow-tooltip
          />

          <el-table-column
            prop="dayValid"
            label="有效率"
            label="日有效率"
            sortable
            show-overflow-tooltip
          />

          <el-table-column
            prop="dayExceeding"
            label="超标率"
            label="日超标率"
            sortable
            show-overflow-tooltip
          />
@@ -259,4 +289,8 @@
:deep().el-table__row .red-color {
  background-color: red;
}
.el-table {
  color: #000000;
}

</style>

 src/views/line_graph/components/DustRadarChart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,82 @@
<!-- é›·è¾¾å›¾

-->
<script>
import * as echarts from 'echarts';
export default {
  props:{
    name:{
        type:Array,
        default:()=>{
          return []
        }
      },
    data:{
      type:Array,
      default:()=>{
        return []
      }
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch:{
    data(){
      this.set()
    }
  },
  mounted() {
    this.initRadarChart();
  },
  methods: {
    initRadarChart() {
      this.chart = echarts.init(document.getElementById('main'));
    },
    set(){
      let option = {
        title: {
          text: '基础分析'
        },
        tooltip: {},
        radar: {
          // shape: 'circle',
          indicator: [
            { name: this.name[0], max: 1 },
            { name: this.name[1], max: 1 },
            { name: this.name[2], max: 1 },
            { name: this.name[3], max: 1 },
            { name: this.name[4], max: 1 }
          ]
        },
        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],
                name: '异常分析'
              },
            ]
          }
        ]
      };
      this.chart.setOption(option);
    }
  }
};
</script>

<template>
  <div id="main" class="chart"></div>
</template>

<style scoped>
.chart {
  width: 100%;
  height: 35vh;
}
</style>

 src/views/line_graph/components/LineChart.vue

ÎļþÃû´Ó src/sfc/LineChart.vue ÐÞ¸Ä
@@ -44,14 +44,14 @@
  },
  mounted() {
    this.intiChart();
    //   this.chart.setOption(this.chartData)
    window.addEventListener('resize', this.resizeChart);
  },
  watch: {
    chartData() {
      // option变化时，图形再次初始化
      this.setOption();
    }
    },

  },
  beforeUnmount() {
    if (this.chart) {
@@ -62,9 +62,6 @@
    intiChart() {
      // åˆ›å»ºecharts实例
      this.chart = _echarts.init(this.$refs.chart);

      // ä½¿ç”¨åˆšæŒ‡å®šçš„配置项和数据显示图表
      // this.chart.setOption(option, true);
    },

    setOption() {
@@ -78,10 +75,10 @@
        toolbox: {
          // å·¥å…·æ 
          feature: {
            dataZoom: {
              // åŒºåŸŸç¼©æ”¾
              yAxisIndex: 'none'
            },
            // dataZoom: {
            //   // åŒºåŸŸç¼©æ”¾
            //   yAxisIndex: 'none'
            // },

            // ä¿å­˜ä¸ºå›¾ç‰‡
            saveAsImage: {}
@@ -89,7 +86,13 @@
        },
        xAxis: {
          name: this.xName,
          data: this.chartData.x
          data: this.chartData.x,
          type: 'category',
            axisLabel: {
              formatter: function (value) {
                return value.slice(5);
              }
            }
        },
        yAxis: {
          type: 'value',
@@ -112,7 +115,13 @@

    // è·Ÿé¡µé¢å“åº”式变化
    resizeChart() {
      this.chart.resize();
      // this.chart.resize();
      // delay(600).then(() => this.chart.resize());
      this.$nextTick(() => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    }
  }
};
@@ -121,7 +130,7 @@
<style>
.line-chart {
  width: 100%;
  height: 500px;
  height: 35vh;
  margin-top: 25px;
}
</style>

 src/views/line_graph/dayMonthAvgData.vue

ÎļþÒÑɾ³ý

 src/views/origin_data/TableData.vue

@@ -163,6 +163,9 @@
      <el-card >
        <el-form :inline="true">
          <div class="demo-form-inline">
            <el-row>
              <el-col>

            <el-form-item>
          <AreaAndmonitorType ></AreaAndmonitorType>
          </el-form-item>
@@ -185,9 +188,11 @@
              <ScenarioType @submitScenarioType="(val) => (scenarioType = val)">
              </ScenarioType>
            </el-form-item>
          </el-col>
            <el-form-item>
              <TimeSelectWithShortCuts @submit-time="giveTime"></TimeSelectWithShortCuts>
            </el-form-item>
          </el-row>
          </div>
          <div class="button-and-export">
            <el-form-item>
@@ -305,13 +310,6 @@
    
  </el-row>

  <!-- <el-row>
    <el-col v-loading="true">
      <el-card >
        111
      </el-card>
    </el-col>
  </el-row> -->
</template>

<style lang="scss" scoped>

 src/views/setting/SetConfiguration.vue

@@ -1,5 +1,5 @@
<script>
import DustRadarChart from '../../sfc/DustRadarChart.vue';
// import DustRadarChart from '../../sfc/DustRadarChart.vue';
import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue'
import dayjs from 'dayjs';
  export default {