diff --git a/web/.eslintrc.js b/web/.eslintrc.js index 91232e9..1ade541 100644 --- a/web/.eslintrc.js +++ b/web/.eslintrc.js @@ -24,7 +24,8 @@ module.exports = { eqeqeq: 0, // 警告使用全等 quotes: [0, 'single'], // 单引号 singleQuote: 0, - 'no-console': 2, // 不禁用console + 'no-console': ['off'], // 允许所有 console 语句 + // 'no-console': 2, // 不禁用console 'no-debugger': 2, // 警告debugger 'no-var': 2, // 对var禁止 'no-eval': 0, diff --git a/web/package-lock.json b/web/package-lock.json index 79e3145..c3b985f 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -11,6 +11,7 @@ "ant-design-vue": "^4.2.6", "axios": "^1.11.0", "core-js": "^3.8.3", + "echarts": "^6.0.0", "moment": "^2.30.1", "vue": "^3.2.13", "vue-router": "^4.0.3", @@ -35,6 +36,7 @@ "sass": "^1.32.7", "sass-loader": "^12.0.0", "vue-eslint-parser": "^10.2.0", + "vue-tianditu": "^2.7.6", "webpack-cli": "^6.0.1", "webpack-dev-server": "^5.2.2" } @@ -6721,6 +6723,20 @@ "node": ">=6.0.0" } }, + "node_modules/echarts": { + "version": "6.0.0", + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-6.0.0.tgz", + "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==", + "dependencies": { + "tslib": "2.3.0", + "zrender": "6.0.0" + } + }, + "node_modules/echarts/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz", @@ -10490,6 +10506,12 @@ "dev": true, "license": "ISC" }, + "node_modules/mitt": { + "version": "3.0.1", + "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz", + "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==", + "dev": true + }, "node_modules/module-alias": { "version": "2.2.3", "resolved": "https://registry.npmmirror.com/module-alias/-/module-alias-2.2.3.tgz", @@ -14484,6 +14506,51 @@ "dev": true, "license": "MIT" }, + "node_modules/vue-tianditu": { + "version": "2.7.6", + "resolved": "https://registry.npmmirror.com/vue-tianditu/-/vue-tianditu-2.7.6.tgz", + "integrity": "sha512-Yvcxg0IAgGB3ZY8zlC5ayjo9f85fa8PFTaifguTNpri76g67GO9toaRWMjBKi39yYHMBADaT3P6bEkJx87X8MQ==", + "dev": true, + "dependencies": { + "mitt": "^3.0.0", + "vue-demi": "^0.12.1" + }, + "peerDependencies": { + "@vue/composition-api": "^1.4.2", + "vue": "^2.0.0 || >=3.0.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, + "node_modules/vue-tianditu/node_modules/vue-demi": { + "version": "0.12.5", + "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.5.tgz", + "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==", + "dev": true, + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "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/vue-types": { "version": "3.0.2", "resolved": "https://registry.npmmirror.com/vue-types/-/vue-types-3.0.2.tgz", @@ -15586,6 +15653,19 @@ "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==", "dev": true, "license": "ISC" + }, + "node_modules/zrender": { + "version": "6.0.0", + "resolved": "https://registry.npmmirror.com/zrender/-/zrender-6.0.0.tgz", + "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==", + "dependencies": { + "tslib": "2.3.0" + } + }, + "node_modules/zrender/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" } } } diff --git a/web/package.json b/web/package.json index d589b1c..b3848bb 100644 --- a/web/package.json +++ b/web/package.json @@ -12,6 +12,7 @@ "ant-design-vue": "^4.2.6", "axios": "^1.11.0", "core-js": "^3.8.3", + "echarts": "^6.0.0", "moment": "^2.30.1", "vue": "^3.2.13", "vue-router": "^4.0.3", @@ -37,7 +38,8 @@ "sass-loader": "^12.0.0", "vue-eslint-parser": "^10.2.0", "webpack-cli": "^6.0.1", - "webpack-dev-server": "^5.2.2" + "webpack-dev-server": "^5.2.2", + "vue-tianditu": "^2.7.6" }, "eslintConfig": { "root": true, diff --git a/web/public/index.html b/web/public/index.html index 3e5a139..b7d64a0 100644 --- a/web/public/index.html +++ b/web/public/index.html @@ -1,15 +1,20 @@ - - - - + + + + <%= htmlWebpackPlugin.options.title %> + +
diff --git a/web/src/assets/home/dianliu.png b/web/src/assets/home/dianliu.png new file mode 100644 index 0000000..21ce1b3 Binary files /dev/null and b/web/src/assets/home/dianliu.png differ diff --git a/web/src/assets/home/dianya.png b/web/src/assets/home/dianya.png new file mode 100644 index 0000000..bb04876 Binary files /dev/null and b/web/src/assets/home/dianya.png differ diff --git a/web/src/assets/home/fengsu.png b/web/src/assets/home/fengsu.png new file mode 100644 index 0000000..2cf075c Binary files /dev/null and b/web/src/assets/home/fengsu.png differ diff --git a/web/src/assets/home/gonglv.png b/web/src/assets/home/gonglv.png new file mode 100644 index 0000000..8514839 Binary files /dev/null and b/web/src/assets/home/gonglv.png differ diff --git a/web/src/assets/home/guangzhao.png b/web/src/assets/home/guangzhao.png new file mode 100644 index 0000000..ee4ce93 Binary files /dev/null and b/web/src/assets/home/guangzhao.png differ diff --git a/web/src/assets/home/hj-shidu.png b/web/src/assets/home/hj-shidu.png new file mode 100644 index 0000000..50a39f5 Binary files /dev/null and b/web/src/assets/home/hj-shidu.png differ diff --git a/web/src/assets/home/hj-wendu.png b/web/src/assets/home/hj-wendu.png new file mode 100644 index 0000000..019f5d4 Binary files /dev/null and b/web/src/assets/home/hj-wendu.png differ diff --git a/web/src/assets/home/homeIcon.png b/web/src/assets/home/homeIcon.png new file mode 100644 index 0000000..bbec113 Binary files /dev/null and b/web/src/assets/home/homeIcon.png differ diff --git a/web/src/assets/home/homeIcon1.png b/web/src/assets/home/homeIcon1.png new file mode 100644 index 0000000..4f49677 Binary files /dev/null and b/web/src/assets/home/homeIcon1.png differ diff --git a/web/src/assets/home/leg-bg.png b/web/src/assets/home/leg-bg.png new file mode 100644 index 0000000..e046735 Binary files /dev/null and b/web/src/assets/home/leg-bg.png differ diff --git a/web/src/assets/home/modal-bg.png b/web/src/assets/home/modal-bg.png new file mode 100644 index 0000000..c32d45f Binary files /dev/null and b/web/src/assets/home/modal-bg.png differ diff --git a/web/src/assets/home/modal-header-bg.png b/web/src/assets/home/modal-header-bg.png new file mode 100644 index 0000000..590cfbc Binary files /dev/null and b/web/src/assets/home/modal-header-bg.png differ diff --git a/web/src/assets/home/onLineBg.png b/web/src/assets/home/onLineBg.png new file mode 100644 index 0000000..2783002 Binary files /dev/null and b/web/src/assets/home/onLineBg.png differ diff --git a/web/src/assets/home/onLineIcon.png b/web/src/assets/home/onLineIcon.png new file mode 100644 index 0000000..cceb0d0 Binary files /dev/null and b/web/src/assets/home/onLineIcon.png differ diff --git a/web/src/assets/home/operBg.png b/web/src/assets/home/operBg.png new file mode 100644 index 0000000..8a37651 Binary files /dev/null and b/web/src/assets/home/operBg.png differ diff --git a/web/src/assets/home/perIcon.png b/web/src/assets/home/perIcon.png new file mode 100644 index 0000000..697b223 Binary files /dev/null and b/web/src/assets/home/perIcon.png differ diff --git a/web/src/assets/home/shidu.png b/web/src/assets/home/shidu.png new file mode 100644 index 0000000..7d423bb Binary files /dev/null and b/web/src/assets/home/shidu.png differ diff --git a/web/src/assets/home/wendu.png b/web/src/assets/home/wendu.png new file mode 100644 index 0000000..b539fe3 Binary files /dev/null and b/web/src/assets/home/wendu.png differ diff --git a/web/src/assets/iconfont/demo.css b/web/src/assets/iconfont/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/web/src/assets/iconfont/demo.css @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/web/src/assets/iconfont/demo_index.html b/web/src/assets/iconfont/demo_index.html new file mode 100644 index 0000000..8d302d8 --- /dev/null +++ b/web/src/assets/iconfont/demo_index.html @@ -0,0 +1,2788 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + + 查看项目 + +
+
+
+
    + +
  • + +
    full
    +
    &#xe651;
    +
    • + +
  • + +
    exit
    +
    &#xe652;
    +
    • + +
  • + +
    qiyong
    +
    &#xe64e;
    +
    • + +
  • + +
    jinyong
    +
    &#xe64f;
    +
    • + +
  • + +
    退回申请
    +
    &#xe64d;
    +
    • + +
  • + +
    mti-漏电监测
    +
    &#xe64c;
    +
    • + +
  • + +
    关闭
    +
    &#xe64b;
    +
    • + +
  • + +
    启用
    +
    &#xe649;
    +
    • + +
  • + +
    禁用
    +
    &#xe64a;
    +
    • + +
  • + +
    线路
    +
    &#xe647;
    +
    • + +
  • + +
    集中器
    +
    &#xe648;
    +
    • + +
  • + +
    路径 4 (1)
    +
    &#xe646;
    +
    • + +
  • + +
    路径 4
    +
    &#xe645;
    +
    • + +
  • + +
    Electrocardiogram
    +
    &#xe644;
    +
    • + +
  • + +
    分组 10
    +
    &#xe642;
    +
    • + +
  • + +
    路径 1 (1)
    +
    &#xe643;
    +
    • + +
  • + +
    离线
    +
    &#xe63b;
    +
    • + +
  • + +
    49
    +
    &#xe63c;
    +
    • + +
  • + +
    路径 6
    +
    &#xe63e;
    +
    • + +
  • + +
    mti-漏电监测
    +
    &#xe63f;
    +
    • + +
  • + +
    路径 1
    +
    &#xe641;
    +
    • + +
  • + +
    分组 92
    +
    &#xe63a;
    +
    • + +
  • + +
    用户
    +
    &#xe68d;
    +
    • + +
  • + +
    故障
    +
    &#xe632;
    +
    • + +
  • + +
    累计收益
    +
    &#xe631;
    +
    • + +
  • + +
    发电量
    +
    &#xe63d;
    +
    • + +
  • + +
    风机
    +
    &#xe661;
    +
    • + +
  • + +
    光伏-copy
    +
    &#xe633;
    +
    • + +
  • + +
    减碳排放
    +
    &#xe67d;
    +
    • + +
  • + +
    合并
    +
    &#xe630;
    +
    • + +
  • + +
    分组 2
    +
    &#xe62e;
    +
    • + +
  • + +
    箭头
    +
    &#xe62d;
    +
    • + +
  • + +
    分组 549
    +
    &#xe62c;
    +
    • + +
  • + +
    关闭
    +
    &#xe62a;
    +
    • + +
  • + +
    保护装置
    +
    &#xe704;
    +
    • + +
  • + +
    配电房
    +
    &#xe6ae;
    +
    • + +
  • + +
    同心圆
    +
    &#xe6ba;
    +
    • + +
  • + +
    操控管理
    +
    &#xe62b;
    +
    • + +
  • + +
    Cyber Monitoring
    +
    &#xe640;
    +
    • + +
  • + +
    Growth Chart
    +
    &#xe650;
    +
    • + +
  • + +
    Sales Growth
    +
    &#xe668;
    +
    • + +
  • + +
    Trend Chat
    +
    &#xe673;
    +
    • + +
  • + +
    Cloud Computer
    +
    &#xe683;
    +
    • + +
  • + +
    Cloud Infrastructure
    +
    &#xe687;
    +
    • + +
  • + +
    Cloud Management
    +
    &#xe689;
    +
    • + +
  • + +
    Cloud Security
    +
    &#xe68e;
    +
    • + +
  • + +
    Dataserver
    +
    &#xe693;
    +
    • + +
  • + +
    Volume Equalizer
    +
    &#xe6c0;
    +
    • + +
  • + +
    Resource Management
    +
    &#xe808;
    +
    • + +
  • + +
    Graph Up
    +
    &#xe859;
    +
    • + +
  • + +
    File Cabinet
    +
    &#xe97d;
    +
    • + +
  • + +
    System Setting
    +
    &#xee41;
    +
    • + +
  • + +
    同心圆-copy
    +
    &#xee42;
    +
    • + +
  • + +
    同心圆-copy-copy
    +
    &#xee43;
    +
    • + +
  • + +
    首页
    +
    &#xe625;
    +
    • + +
  • + +
    定位
    +
    &#xe8c4;
    +
    • + +
  • + +
    关闭
    +
    &#xe62f;
    +
    • + +
  • + +
    处理状态
    +
    &#xe684;
    +
    • + +
  • + +
    分组 302
    +
    &#xe629;
    +
    • + +
  • + +
    分组 1163
    +
    &#xe605;
    +
    • + +
  • + +
    分组 449
    +
    &#xe627;
    +
    • + +
  • + +
    分组 1565
    +
    &#xe628;
    +
    • + +
  • + +
    密码
    +
    &#xe8b2;
    +
    • + +
  • + +
    退出
    +
    &#xe624;
    +
    • + +
  • + +
    icon_夜间-月亮
    +
    &#xe656;
    +
    • + +
  • + +
    通知
    +
    &#xe674;
    +
    • + +
  • + +
    通知
    +
    &#xe9cd;
    +
    • + +
  • + 𐇔 +
    通知
    +
    &#x101d4;
    +
    • + +
  • + +
    形状结合
    +
    &#xe623;
    +
    • + +
  • + +
    系统管理
    +
    &#xe672;
    +
    • + +
  • + +
    平台管理
    +
    &#xe619;
    +
    • + +
  • + +
    湿度
    +
    &#xe635;
    +
    • + +
  • + +
    订单-全部订单
    +
    &#xe626;
    +
    • + +
  • + +
    温度
    +
    &#xe80f;
    +
    • + +
  • + +
    光照
    +
    &#xe636;
    +
    • + +
  • + +
    风速
    +
    &#xea32;
    +
    • + +
  • + +
    物联中心_normal
    +
    &#xe620;
    +
    • + +
  • + +
    icon-home
    +
    &#xe621;
    +
    • + +
  • + +
    分割线
    +
    &#xe634;
    +
    • + +
  • + +
    取消-抽屉
    +
    &#xe637;
    +
    • + +
  • + +
    user_login
    +
    &#xe638;
    +
    • + +
  • + +
    passwd_login
    +
    &#xe639;
    +
    • + +
  • + +
    形状
    +
    &#xe622;
    +
    • + +
  • + +
    形状
    +
    &#xe604;
    +
    • + +
  • + +
    分组 1865
    +
    &#xe61f;
    +
    • + +
  • + +
    分组 929
    +
    &#xe61a;
    +
    • + +
  • + +
    分组 412
    +
    &#xe61b;
    +
    • + +
  • + +
    分组 1753
    +
    &#xe61c;
    +
    • + +
  • + +
    分组 2121
    +
    &#xe61d;
    +
    • + +
  • + +
    分组 204
    +
    &#xe61e;
    +
    • + +
  • + +
    分组 463
    +
    &#xe616;
    +
    • + +
  • + +
    分组 423
    +
    &#xe617;
    +
    • + +
  • + +
    分组 1977
    +
    &#xe618;
    +
    • + +
  • + +
    分组 610
    +
    &#xe613;
    +
    • + +
  • + +
    分组 614
    +
    &#xe614;
    +
    • + +
  • + +
    分组 249
    +
    &#xe615;
    +
    • + +
  • + +
    分组 1237
    +
    &#xe60e;
    +
    • + +
  • + +
    分组 2237
    +
    &#xe60f;
    +
    • + +
  • + +
    分组 2085
    +
    &#xe610;
    +
    • + +
  • + +
    分组 1739
    +
    &#xe611;
    +
    • + +
  • + +
    分组 1375
    +
    &#xe612;
    +
    • + +
  • + +
    分组 403
    +
    &#xe60c;
    +
    • + +
  • + +
    分组 2241
    +
    &#xe60d;
    +
    • + +
  • + +
    分组 1067
    +
    &#xe60b;
    +
    • + +
  • + +
    分组 1928
    +
    &#xe60a;
    +
    • + +
  • + +
    分组 342
    +
    &#xe609;
    +
    • + +
  • + +
    分组 5
    +
    &#xe608;
    +
    • + +
  • + +
    设置
    +
    &#xe607;
    +
    • + +
  • + +
    分组 1565
    +
    &#xe606;
    +
    • + +
  • + +
    交易账户
    +
    &#xe602;
    +
    • + +
  • + +
    营销选中
    +
    &#xe603;
    +
    • + +
  • + +
    可视化
    +
    &#xe600;
    +
    • + +
  • + +
    用户
    +
    &#xe601;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1756516508134') format('woff2'),
+       url('iconfont.woff?t=1756516508134') format('woff'),
+       url('iconfont.ttf?t=1756516508134') format('truetype'),
+       url('iconfont.svg?t=1756516508134#iconfont') format('svg');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + full +
    +
    .icon-full +
    +
    • + +
  • + +
    + exit +
    +
    .icon-exit +
    +
    • + +
  • + +
    + qiyong +
    +
    .icon-a-qiyong +
    +
    • + +
  • + +
    + jinyong +
    +
    .icon-a-jinyong +
    +
    • + +
  • + +
    + 退回申请 +
    +
    .icon-tuihuishenqing +
    +
    • + +
  • + +
    + mti-漏电监测 +
    +
    .icon-mti-loudianjiance +
    +
    • + +
  • + +
    + 关闭 +
    +
    .icon-guanbi +
    +
    • + +
  • + +
    + 启用 +
    +
    .icon-a-fenzu1411 +
    +
    • + +
  • + +
    + 禁用 +
    +
    .icon-a-fenzu1409 +
    +
    • + +
  • + +
    + 线路 +
    +
    .icon-xianlu +
    +
    • + +
  • + +
    + 集中器 +
    +
    .icon-jizhongqi +
    +
    • + +
  • + +
    + 路径 4 (1) +
    +
    .icon-a-lujing41 +
    +
    • + +
  • + +
    + 路径 4 +
    +
    .icon-a-lujing4 +
    +
    • + +
  • + +
    + Electrocardiogram +
    +
    .icon-Electrocardiogram +
    +
    • + +
  • + +
    + 分组 10 +
    +
    .icon-hezha +
    +
    • + +
  • + +
    + 路径 1 (1) +
    +
    .icon-bisuo +
    +
    • + +
  • + +
    + 离线 +
    +
    .icon-lixian +
    +
    • + +
  • + +
    + 49 +
    +
    .icon-dengpao +
    +
    • + +
  • + +
    + 路径 6 +
    +
    .icon-daunlu +
    +
    • + +
  • + +
    + mti-漏电监测 +
    +
    .icon-loudianjiance +
    +
    • + +
  • + +
    + 路径 1 +
    +
    .icon-guozai +
    +
    • + +
  • + +
    + 分组 92 +
    +
    .icon-a-fenzu92 +
    +
    • + +
  • + +
    + 用户 +
    +
    .icon-yonghu2 +
    +
    • + +
  • + +
    + 故障 +
    +
    .icon-guzhang +
    +
    • + +
  • + +
    + 累计收益 +
    +
    .icon-leijishouyi +
    +
    • + +
  • + +
    + 发电量 +
    +
    .icon-fadianliang +
    +
    • + +
  • + +
    + 风机 +
    +
    .icon-fengji +
    +
    • + +
  • + +
    + 光伏-copy +
    +
    .icon-guangfu +
    +
    • + +
  • + +
    + 减碳排放 +
    +
    .icon-jiantanpaifang +
    +
    • + +
  • + +
    + 合并 +
    +
    .icon-hebing +
    +
    • + +
  • + +
    + 分组 2 +
    +
    .icon-a-fenzu2 +
    +
    • + +
  • + +
    + 箭头 +
    +
    .icon-jiantou +
    +
    • + +
  • + +
    + 分组 549 +
    +
    .icon-a-fenzu549 +
    +
    • + +
  • + +
    + 关闭 +
    +
    .icon-guanbi1 +
    +
    • + +
  • + +
    + 保护装置 +
    +
    .icon-baohuzhuangzhi +
    +
    • + +
  • + +
    + 配电房 +
    +
    .icon-peidianfang +
    +
    • + +
  • + +
    + 同心圆 +
    +
    .icon-map-mark0 +
    +
    • + +
  • + +
    + 操控管理 +
    +
    .icon-caokongguanli +
    +
    • + +
  • + +
    + Cyber Monitoring +
    +
    .icon-a-CyberMonitoring +
    +
    • + +
  • + +
    + Growth Chart +
    +
    .icon-a-GrowthChart +
    +
    • + +
  • + +
    + Sales Growth +
    +
    .icon-a-SalesGrowth +
    +
    • + +
  • + +
    + Trend Chat +
    +
    .icon-a-TrendChat +
    +
    • + +
  • + +
    + Cloud Computer +
    +
    .icon-a-CloudComputer +
    +
    • + +
  • + +
    + Cloud Infrastructure +
    +
    .icon-a-CloudInfrastructure +
    +
    • + +
  • + +
    + Cloud Management +
    +
    .icon-a-CloudManagement +
    +
    • + +
  • + +
    + Cloud Security +
    +
    .icon-a-CloudSecurity +
    +
    • + +
  • + +
    + Dataserver +
    +
    .icon-Dataserver +
    +
    • + +
  • + +
    + Volume Equalizer +
    +
    .icon-a-VolumeEqualizer +
    +
    • + +
  • + +
    + Resource Management +
    +
    .icon-a-ResourceManagement1 +
    +
    • + +
  • + +
    + Graph Up +
    +
    .icon-a-GraphUp +
    +
    • + +
  • + +
    + File Cabinet +
    +
    .icon-a-FileCabinet +
    +
    • + +
  • + +
    + System Setting +
    +
    .icon-a-SystemSetting +
    +
    • + +
  • + +
    + 同心圆-copy +
    +
    .icon-map-mark1 +
    +
    • + +
  • + +
    + 同心圆-copy-copy +
    +
    .icon-map-mark2-copy +
    +
    • + +
  • + +
    + 首页 +
    +
    .icon-shouye +
    +
    • + +
  • + +
    + 定位 +
    +
    .icon-dingwei +
    +
    • + +
  • + +
    + 关闭 +
    +
    .icon-guanbi2 +
    +
    • + +
  • + +
    + 处理状态 +
    +
    .icon-chulizhuangtai +
    +
    • + +
  • + +
    + 分组 302 +
    +
    .icon-a-fenzu302 +
    +
    • + +
  • + +
    + 分组 1163 +
    +
    .icon-a-fenzu1163 +
    +
    • + +
  • + +
    + 分组 449 +
    +
    .icon-tuichu +
    +
    • + +
  • + +
    + 分组 1565 +
    +
    .icon-yonghu-yuan +
    +
    • + +
  • + +
    + 密码 +
    +
    .icon-mima +
    +
    • + +
  • + +
    + 退出 +
    +
    .icon-tuichu3 +
    +
    • + +
  • + +
    + icon_夜间-月亮 +
    +
    .icon-yueliang +
    +
    • + +
  • + +
    + 通知 +
    +
    .icon-tongzhi +
    +
    • + +
  • + +
    + 通知 +
    +
    .icon-tongzhi1 +
    +
    • + +
  • + +
    + 通知 +
    +
    .icon-tongzhi2 +
    +
    • + +
  • + +
    + 形状结合 +
    +
    .icon-xingzhuangjiehe +
    +
    • + +
  • + +
    + 系统管理 +
    +
    .icon-xitongguanli +
    +
    • + +
  • + +
    + 平台管理 +
    +
    .icon-pingtaiguanli +
    +
    • + +
  • + +
    + 湿度 +
    +
    .icon-shidu +
    +
    • + +
  • + +
    + 订单-全部订单 +
    +
    .icon-dingdan-quanbudingdan +
    +
    • + +
  • + +
    + 温度 +
    +
    .icon-wendu +
    +
    • + +
  • + +
    + 光照 +
    +
    .icon-fengtian-guangzhao +
    +
    • + +
  • + +
    + 风速 +
    +
    .icon-fengsu +
    +
    • + +
  • + +
    + 物联中心_normal +
    +
    .icon-wulianzhongxin_normal +
    +
    • + +
  • + +
    + icon-home +
    +
    .icon-icon-1 +
    +
    • + +
  • + +
    + 分割线 +
    +
    .icon-fengexian +
    +
    • + +
  • + +
    + 取消-抽屉 +
    +
    .icon-quxiao +
    +
    • + +
  • + +
    + user_login +
    +
    .icon-a-xingzhuangjiehe1x +
    +
    • + +
  • + +
    + passwd_login +
    +
    .icon-a-xingzhuangjiehe1x1 +
    +
    • + +
  • + +
    + 形状 +
    +
    .icon-xingzhuang1 +
    +
    • + +
  • + +
    + 形状 +
    +
    .icon-xingzhuang +
    +
    • + +
  • + +
    + 分组 1865 +
    +
    .icon-a-fenzu1865 +
    +
    • + +
  • + +
    + 分组 929 +
    +
    .icon-confirm +
    +
    • + +
  • + +
    + 分组 412 +
    +
    .icon-a-fenzu412 +
    +
    • + +
  • + +
    + 分组 1753 +
    +
    .icon-shuaxin +
    +
    • + +
  • + +
    + 分组 2121 +
    +
    .icon-download +
    +
    • + +
  • + +
    + 分组 204 +
    +
    .icon-upload +
    +
    • + +
  • + +
    + 分组 463 +
    +
    .icon-add +
    +
    • + +
  • + +
    + 分组 423 +
    +
    .icon-chongzhi +
    +
    • + +
  • + +
    + 分组 1977 +
    +
    .icon-setProtectControl +
    +
    • + +
  • + +
    + 分组 610 +
    +
    .icon-export +
    +
    • + +
  • + +
    + 分组 614 +
    +
    .icon-import +
    +
    • + +
  • + +
    + 分组 249 +
    +
    .icon-del +
    +
    • + +
  • + +
    + 分组 1237 +
    +
    .icon-setProtectValue +
    +
    • + +
  • + +
    + 分组 2237 +
    +
    .icon-setLightMode +
    +
    • + +
  • + +
    + 分组 2085 +
    +
    .icon-setTimeMode +
    +
    • + +
  • + +
    + 分组 1739 +
    +
    .icon-switchMode +
    +
    • + +
  • + +
    + 分组 1375 +
    +
    .icon-setTime +
    +
    • + +
  • + +
    + 分组 403 +
    +
    .icon-sousu +
    +
    • + +
  • + +
    + 分组 2241 +
    +
    .icon-a-fenzu2241 +
    +
    • + +
  • + +
    + 分组 1067 +
    +
    .icon-openOrClose +
    +
    • + +
  • + +
    + 分组 1928 +
    +
    .icon-zhaoce +
    +
    • + +
  • + +
    + 分组 342 +
    +
    .icon-send +
    +
    • + +
  • + +
    + 分组 5 +
    +
    .icon-a-fenzu5 +
    +
    • + +
  • + +
    + 设置 +
    +
    .icon-shezhi +
    +
    • + +
  • + +
    + 分组 1565 +
    +
    .icon-touxiang +
    +
    • + +
  • + +
    + 交易账户 +
    +
    .icon-jiaoyizhanghuguanli +
    +
    • + +
  • + +
    + 营销选中 +
    +
    .icon-yingxiaoxuanzhong +
    +
    • + +
  • + +
    + 可视化 +
    +
    .icon-a-lujing1 +
    +
    • + +
  • + +
    + 用户 +
    +
    .icon-a-lujing11 +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    full
    +
    #icon-full
    +
    • + +
  • + +
    exit
    +
    #icon-exit
    +
    • + +
  • + +
    qiyong
    +
    #icon-a-qiyong
    +
    • + +
  • + +
    jinyong
    +
    #icon-a-jinyong
    +
    • + +
  • + +
    退回申请
    +
    #icon-tuihuishenqing
    +
    • + +
  • + +
    mti-漏电监测
    +
    #icon-mti-loudianjiance
    +
    • + +
  • + +
    关闭
    +
    #icon-guanbi
    +
    • + +
  • + +
    启用
    +
    #icon-a-fenzu1411
    +
    • + +
  • + +
    禁用
    +
    #icon-a-fenzu1409
    +
    • + +
  • + +
    线路
    +
    #icon-xianlu
    +
    • + +
  • + +
    集中器
    +
    #icon-jizhongqi
    +
    • + +
  • + +
    路径 4 (1)
    +
    #icon-a-lujing41
    +
    • + +
  • + +
    路径 4
    +
    #icon-a-lujing4
    +
    • + +
  • + +
    Electrocardiogram
    +
    #icon-Electrocardiogram
    +
    • + +
  • + +
    分组 10
    +
    #icon-hezha
    +
    • + +
  • + +
    路径 1 (1)
    +
    #icon-bisuo
    +
    • + +
  • + +
    离线
    +
    #icon-lixian
    +
    • + +
  • + +
    49
    +
    #icon-dengpao
    +
    • + +
  • + +
    路径 6
    +
    #icon-daunlu
    +
    • + +
  • + +
    mti-漏电监测
    +
    #icon-loudianjiance
    +
    • + +
  • + +
    路径 1
    +
    #icon-guozai
    +
    • + +
  • + +
    分组 92
    +
    #icon-a-fenzu92
    +
    • + +
  • + +
    用户
    +
    #icon-yonghu2
    +
    • + +
  • + +
    故障
    +
    #icon-guzhang
    +
    • + +
  • + +
    累计收益
    +
    #icon-leijishouyi
    +
    • + +
  • + +
    发电量
    +
    #icon-fadianliang
    +
    • + +
  • + +
    风机
    +
    #icon-fengji
    +
    • + +
  • + +
    光伏-copy
    +
    #icon-guangfu
    +
    • + +
  • + +
    减碳排放
    +
    #icon-jiantanpaifang
    +
    • + +
  • + +
    合并
    +
    #icon-hebing
    +
    • + +
  • + +
    分组 2
    +
    #icon-a-fenzu2
    +
    • + +
  • + +
    箭头
    +
    #icon-jiantou
    +
    • + +
  • + +
    分组 549
    +
    #icon-a-fenzu549
    +
    • + +
  • + +
    关闭
    +
    #icon-guanbi1
    +
    • + +
  • + +
    保护装置
    +
    #icon-baohuzhuangzhi
    +
    • + +
  • + +
    配电房
    +
    #icon-peidianfang
    +
    • + +
  • + +
    同心圆
    +
    #icon-map-mark0
    +
    • + +
  • + +
    操控管理
    +
    #icon-caokongguanli
    +
    • + +
  • + +
    Cyber Monitoring
    +
    #icon-a-CyberMonitoring
    +
    • + +
  • + +
    Growth Chart
    +
    #icon-a-GrowthChart
    +
    • + +
  • + +
    Sales Growth
    +
    #icon-a-SalesGrowth
    +
    • + +
  • + +
    Trend Chat
    +
    #icon-a-TrendChat
    +
    • + +
  • + +
    Cloud Computer
    +
    #icon-a-CloudComputer
    +
    • + +
  • + +
    Cloud Infrastructure
    +
    #icon-a-CloudInfrastructure
    +
    • + +
  • + +
    Cloud Management
    +
    #icon-a-CloudManagement
    +
    • + +
  • + +
    Cloud Security
    +
    #icon-a-CloudSecurity
    +
    • + +
  • + +
    Dataserver
    +
    #icon-Dataserver
    +
    • + +
  • + +
    Volume Equalizer
    +
    #icon-a-VolumeEqualizer
    +
    • + +
  • + +
    Resource Management
    +
    #icon-a-ResourceManagement1
    +
    • + +
  • + +
    Graph Up
    +
    #icon-a-GraphUp
    +
    • + +
  • + +
    File Cabinet
    +
    #icon-a-FileCabinet
    +
    • + +
  • + +
    System Setting
    +
    #icon-a-SystemSetting
    +
    • + +
  • + +
    同心圆-copy
    +
    #icon-map-mark1
    +
    • + +
  • + +
    同心圆-copy-copy
    +
    #icon-map-mark2-copy
    +
    • + +
  • + +
    首页
    +
    #icon-shouye
    +
    • + +
  • + +
    定位
    +
    #icon-dingwei
    +
    • + +
  • + +
    关闭
    +
    #icon-guanbi2
    +
    • + +
  • + +
    处理状态
    +
    #icon-chulizhuangtai
    +
    • + +
  • + +
    分组 302
    +
    #icon-a-fenzu302
    +
    • + +
  • + +
    分组 1163
    +
    #icon-a-fenzu1163
    +
    • + +
  • + +
    分组 449
    +
    #icon-tuichu
    +
    • + +
  • + +
    分组 1565
    +
    #icon-yonghu-yuan
    +
    • + +
  • + +
    密码
    +
    #icon-mima
    +
    • + +
  • + +
    退出
    +
    #icon-tuichu3
    +
    • + +
  • + +
    icon_夜间-月亮
    +
    #icon-yueliang
    +
    • + +
  • + +
    通知
    +
    #icon-tongzhi
    +
    • + +
  • + +
    通知
    +
    #icon-tongzhi1
    +
    • + +
  • + +
    通知
    +
    #icon-tongzhi2
    +
    • + +
  • + +
    形状结合
    +
    #icon-xingzhuangjiehe
    +
    • + +
  • + +
    系统管理
    +
    #icon-xitongguanli
    +
    • + +
  • + +
    平台管理
    +
    #icon-pingtaiguanli
    +
    • + +
  • + +
    湿度
    +
    #icon-shidu
    +
    • + +
  • + +
    订单-全部订单
    +
    #icon-dingdan-quanbudingdan
    +
    • + +
  • + +
    温度
    +
    #icon-wendu
    +
    • + +
  • + +
    光照
    +
    #icon-fengtian-guangzhao
    +
    • + +
  • + +
    风速
    +
    #icon-fengsu
    +
    • + +
  • + +
    物联中心_normal
    +
    #icon-wulianzhongxin_normal
    +
    • + +
  • + +
    icon-home
    +
    #icon-icon-1
    +
    • + +
  • + +
    分割线
    +
    #icon-fengexian
    +
    • + +
  • + +
    取消-抽屉
    +
    #icon-quxiao
    +
    • + +
  • + +
    user_login
    +
    #icon-a-xingzhuangjiehe1x
    +
    • + +
  • + +
    passwd_login
    +
    #icon-a-xingzhuangjiehe1x1
    +
    • + +
  • + +
    形状
    +
    #icon-xingzhuang1
    +
    • + +
  • + +
    形状
    +
    #icon-xingzhuang
    +
    • + +
  • + +
    分组 1865
    +
    #icon-a-fenzu1865
    +
    • + +
  • + +
    分组 929
    +
    #icon-confirm
    +
    • + +
  • + +
    分组 412
    +
    #icon-a-fenzu412
    +
    • + +
  • + +
    分组 1753
    +
    #icon-shuaxin
    +
    • + +
  • + +
    分组 2121
    +
    #icon-download
    +
    • + +
  • + +
    分组 204
    +
    #icon-upload
    +
    • + +
  • + +
    分组 463
    +
    #icon-add
    +
    • + +
  • + +
    分组 423
    +
    #icon-chongzhi
    +
    • + +
  • + +
    分组 1977
    +
    #icon-setProtectControl
    +
    • + +
  • + +
    分组 610
    +
    #icon-export
    +
    • + +
  • + +
    分组 614
    +
    #icon-import
    +
    • + +
  • + +
    分组 249
    +
    #icon-del
    +
    • + +
  • + +
    分组 1237
    +
    #icon-setProtectValue
    +
    • + +
  • + +
    分组 2237
    +
    #icon-setLightMode
    +
    • + +
  • + +
    分组 2085
    +
    #icon-setTimeMode
    +
    • + +
  • + +
    分组 1739
    +
    #icon-switchMode
    +
    • + +
  • + +
    分组 1375
    +
    #icon-setTime
    +
    • + +
  • + +
    分组 403
    +
    #icon-sousu
    +
    • + +
  • + +
    分组 2241
    +
    #icon-a-fenzu2241
    +
    • + +
  • + +
    分组 1067
    +
    #icon-openOrClose
    +
    • + +
  • + +
    分组 1928
    +
    #icon-zhaoce
    +
    • + +
  • + +
    分组 342
    +
    #icon-send
    +
    • + +
  • + +
    分组 5
    +
    #icon-a-fenzu5
    +
    • + +
  • + +
    设置
    +
    #icon-shezhi
    +
    • + +
  • + +
    分组 1565
    +
    #icon-touxiang
    +
    • + +
  • + +
    交易账户
    +
    #icon-jiaoyizhanghuguanli
    +
    • + +
  • + +
    营销选中
    +
    #icon-yingxiaoxuanzhong
    +
    • + +
  • + +
    可视化
    +
    #icon-a-lujing1
    +
    • + +
  • + +
    用户
    +
    #icon-a-lujing11
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/web/src/assets/iconfont/iconfont.css b/web/src/assets/iconfont/iconfont.css new file mode 100644 index 0000000..e915d9b --- /dev/null +++ b/web/src/assets/iconfont/iconfont.css @@ -0,0 +1,468 @@ +@font-face { + font-family: "iconfont"; /* Project id 4945642 */ + src: url('iconfont.woff2?t=1756516508134') format('woff2'), + url('iconfont.woff?t=1756516508134') format('woff'), + url('iconfont.ttf?t=1756516508134') format('truetype'), + url('iconfont.svg?t=1756516508134#iconfont') format('svg'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-full:before { + content: "\e651"; +} + +.icon-exit:before { + content: "\e652"; +} + +.icon-a-qiyong:before { + content: "\e64e"; +} + +.icon-a-jinyong:before { + content: "\e64f"; +} + +.icon-tuihuishenqing:before { + content: "\e64d"; +} + +.icon-mti-loudianjiance:before { + content: "\e64c"; +} + +.icon-guanbi:before { + content: "\e64b"; +} + +.icon-a-fenzu1411:before { + content: "\e649"; +} + +.icon-a-fenzu1409:before { + content: "\e64a"; +} + +.icon-xianlu:before { + content: "\e647"; +} + +.icon-jizhongqi:before { + content: "\e648"; +} + +.icon-a-lujing41:before { + content: "\e646"; +} + +.icon-a-lujing4:before { + content: "\e645"; +} + +.icon-Electrocardiogram:before { + content: "\e644"; +} + +.icon-hezha:before { + content: "\e642"; +} + +.icon-bisuo:before { + content: "\e643"; +} + +.icon-lixian:before { + content: "\e63b"; +} + +.icon-dengpao:before { + content: "\e63c"; +} + +.icon-daunlu:before { + content: "\e63e"; +} + +.icon-loudianjiance:before { + content: "\e63f"; +} + +.icon-guozai:before { + content: "\e641"; +} + +.icon-a-fenzu92:before { + content: "\e63a"; +} + +.icon-yonghu2:before { + content: "\e68d"; +} + +.icon-guzhang:before { + content: "\e632"; +} + +.icon-leijishouyi:before { + content: "\e631"; +} + +.icon-fadianliang:before { + content: "\e63d"; +} + +.icon-fengji:before { + content: "\e661"; +} + +.icon-guangfu:before { + content: "\e633"; +} + +.icon-jiantanpaifang:before { + content: "\e67d"; +} + +.icon-hebing:before { + content: "\e630"; +} + +.icon-a-fenzu2:before { + content: "\e62e"; +} + +.icon-jiantou:before { + content: "\e62d"; +} + +.icon-a-fenzu549:before { + content: "\e62c"; +} + +.icon-guanbi1:before { + content: "\e62a"; +} + +.icon-baohuzhuangzhi:before { + content: "\e704"; +} + +.icon-peidianfang:before { + content: "\e6ae"; +} + +.icon-map-mark0:before { + content: "\e6ba"; +} + +.icon-caokongguanli:before { + content: "\e62b"; +} + +.icon-a-CyberMonitoring:before { + content: "\e640"; +} + +.icon-a-GrowthChart:before { + content: "\e650"; +} + +.icon-a-SalesGrowth:before { + content: "\e668"; +} + +.icon-a-TrendChat:before { + content: "\e673"; +} + +.icon-a-CloudComputer:before { + content: "\e683"; +} + +.icon-a-CloudInfrastructure:before { + content: "\e687"; +} + +.icon-a-CloudManagement:before { + content: "\e689"; +} + +.icon-a-CloudSecurity:before { + content: "\e68e"; +} + +.icon-Dataserver:before { + content: "\e693"; +} + +.icon-a-VolumeEqualizer:before { + content: "\e6c0"; +} + +.icon-a-ResourceManagement1:before { + content: "\e808"; +} + +.icon-a-GraphUp:before { + content: "\e859"; +} + +.icon-a-FileCabinet:before { + content: "\e97d"; +} + +.icon-a-SystemSetting:before { + content: "\ee41"; +} + +.icon-map-mark1:before { + content: "\ee42"; +} + +.icon-map-mark2-copy:before { + content: "\ee43"; +} + +.icon-shouye:before { + content: "\e625"; +} + +.icon-dingwei:before { + content: "\e8c4"; +} + +.icon-guanbi2:before { + content: "\e62f"; +} + +.icon-chulizhuangtai:before { + content: "\e684"; +} + +.icon-a-fenzu302:before { + content: "\e629"; +} + +.icon-a-fenzu1163:before { + content: "\e605"; +} + +.icon-tuichu:before { + content: "\e627"; +} + +.icon-yonghu-yuan:before { + content: "\e628"; +} + +.icon-mima:before { + content: "\e8b2"; +} + +.icon-tuichu3:before { + content: "\e624"; +} + +.icon-yueliang:before { + content: "\e656"; +} + +.icon-tongzhi:before { + content: "\e674"; +} + +.icon-tongzhi1:before { + content: "\e9cd"; +} + +.icon-tongzhi2:before { + content: "\101d4"; +} + +.icon-xingzhuangjiehe:before { + content: "\e623"; +} + +.icon-xitongguanli:before { + content: "\e672"; +} + +.icon-pingtaiguanli:before { + content: "\e619"; +} + +.icon-shidu:before { + content: "\e635"; +} + +.icon-dingdan-quanbudingdan:before { + content: "\e626"; +} + +.icon-wendu:before { + content: "\e80f"; +} + +.icon-fengtian-guangzhao:before { + content: "\e636"; +} + +.icon-fengsu:before { + content: "\ea32"; +} + +.icon-wulianzhongxin_normal:before { + content: "\e620"; +} + +.icon-icon-1:before { + content: "\e621"; +} + +.icon-fengexian:before { + content: "\e634"; +} + +.icon-quxiao:before { + content: "\e637"; +} + +.icon-a-xingzhuangjiehe1x:before { + content: "\e638"; +} + +.icon-a-xingzhuangjiehe1x1:before { + content: "\e639"; +} + +.icon-xingzhuang1:before { + content: "\e622"; +} + +.icon-xingzhuang:before { + content: "\e604"; +} + +.icon-a-fenzu1865:before { + content: "\e61f"; +} + +.icon-confirm:before { + content: "\e61a"; +} + +.icon-a-fenzu412:before { + content: "\e61b"; +} + +.icon-shuaxin:before { + content: "\e61c"; +} + +.icon-download:before { + content: "\e61d"; +} + +.icon-upload:before { + content: "\e61e"; +} + +.icon-add:before { + content: "\e616"; +} + +.icon-chongzhi:before { + content: "\e617"; +} + +.icon-setProtectControl:before { + content: "\e618"; +} + +.icon-export:before { + content: "\e613"; +} + +.icon-import:before { + content: "\e614"; +} + +.icon-del:before { + content: "\e615"; +} + +.icon-setProtectValue:before { + content: "\e60e"; +} + +.icon-setLightMode:before { + content: "\e60f"; +} + +.icon-setTimeMode:before { + content: "\e610"; +} + +.icon-switchMode:before { + content: "\e611"; +} + +.icon-setTime:before { + content: "\e612"; +} + +.icon-sousu:before { + content: "\e60c"; +} + +.icon-a-fenzu2241:before { + content: "\e60d"; +} + +.icon-openOrClose:before { + content: "\e60b"; +} + +.icon-zhaoce:before { + content: "\e60a"; +} + +.icon-send:before { + content: "\e609"; +} + +.icon-a-fenzu5:before { + content: "\e608"; +} + +.icon-shezhi:before { + content: "\e607"; +} + +.icon-touxiang:before { + content: "\e606"; +} + +.icon-jiaoyizhanghuguanli:before { + content: "\e602"; +} + +.icon-yingxiaoxuanzhong:before { + content: "\e603"; +} + +.icon-a-lujing1:before { + content: "\e600"; +} + +.icon-a-lujing11:before { + content: "\e601"; +} + diff --git a/web/src/assets/iconfont/iconfont.js b/web/src/assets/iconfont/iconfont.js new file mode 100644 index 0000000..f93e634 --- /dev/null +++ b/web/src/assets/iconfont/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_4945642='',(l=>{var a=(c=(c=document.getElementsByTagName("script"))[c.length-1]).getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var h,z,m,v,o,i=function(a,c){c.parentNode.insertBefore(a,c)};if(a&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}h=function(){var a,c=document.createElement("div");c.innerHTML=l._iconfont_svg_string_4945642,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(a=document.body).firstChild?i(c,a.firstChild):a.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(h,0):(z=function(){document.removeEventListener("DOMContentLoaded",z,!1),h()},document.addEventListener("DOMContentLoaded",z,!1)):document.attachEvent&&(m=h,v=l.document,o=!1,p(),v.onreadystatechange=function(){"complete"==v.readyState&&(v.onreadystatechange=null,t())})}function t(){o||(o=!0,m())}function p(){try{v.documentElement.doScroll("left")}catch(a){return void setTimeout(p,50)}t()}})(window); \ No newline at end of file diff --git a/web/src/assets/iconfont/iconfont.json b/web/src/assets/iconfont/iconfont.json new file mode 100644 index 0000000..9ef30c4 --- /dev/null +++ b/web/src/assets/iconfont/iconfont.json @@ -0,0 +1,800 @@ +{ + "id": "4945642", + "name": "海达普平台3.0", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "44946071", + "name": "full", + "font_class": "full", + "unicode": "e651", + "unicode_decimal": 58961 + }, + { + "icon_id": "44946066", + "name": "exit", + "font_class": "exit", + "unicode": "e652", + "unicode_decimal": 58962 + }, + { + "icon_id": "44797354", + "name": "qiyong", + "font_class": "a-qiyong", + "unicode": "e64e", + "unicode_decimal": 58958 + }, + { + "icon_id": "44797352", + "name": "jinyong", + "font_class": "a-jinyong", + "unicode": "e64f", + "unicode_decimal": 58959 + }, + { + "icon_id": "41945643", + "name": "退回申请", + "font_class": "tuihuishenqing", + "unicode": "e64d", + "unicode_decimal": 58957 + }, + { + "icon_id": "44643473", + "name": "mti-漏电监测", + "font_class": "mti-loudianjiance", + "unicode": "e64c", + "unicode_decimal": 58956 + }, + { + "icon_id": "44642653", + "name": "关闭", + "font_class": "guanbi", + "unicode": "e64b", + "unicode_decimal": 58955 + }, + { + "icon_id": "44628330", + "name": "启用", + "font_class": "a-fenzu1411", + "unicode": "e649", + "unicode_decimal": 58953 + }, + { + "icon_id": "44628328", + "name": "禁用", + "font_class": "a-fenzu1409", + "unicode": "e64a", + "unicode_decimal": 58954 + }, + { + "icon_id": "44626923", + "name": "线路", + "font_class": "xianlu", + "unicode": "e647", + "unicode_decimal": 58951 + }, + { + "icon_id": "44626921", + "name": "集中器", + "font_class": "jizhongqi", + "unicode": "e648", + "unicode_decimal": 58952 + }, + { + "icon_id": "44626922", + "name": "路径 4 (1)", + "font_class": "a-lujing41", + "unicode": "e646", + "unicode_decimal": 58950 + }, + { + "icon_id": "44626457", + "name": "路径 4", + "font_class": "a-lujing4", + "unicode": "e645", + "unicode_decimal": 58949 + }, + { + "icon_id": "40668428", + "name": "Electrocardiogram", + "font_class": "Electrocardiogram", + "unicode": "e644", + "unicode_decimal": 58948 + }, + { + "icon_id": "44621269", + "name": "分组 10", + "font_class": "hezha", + "unicode": "e642", + "unicode_decimal": 58946 + }, + { + "icon_id": "44621265", + "name": "路径 1 (1)", + "font_class": "bisuo", + "unicode": "e643", + "unicode_decimal": 58947 + }, + { + "icon_id": "44621293", + "name": "离线", + "font_class": "lixian", + "unicode": "e63b", + "unicode_decimal": 58939 + }, + { + "icon_id": "44621290", + "name": "49", + "font_class": "dengpao", + "unicode": "e63c", + "unicode_decimal": 58940 + }, + { + "icon_id": "44621289", + "name": "路径 6", + "font_class": "daunlu", + "unicode": "e63e", + "unicode_decimal": 58942 + }, + { + "icon_id": "44621287", + "name": "mti-漏电监测", + "font_class": "loudianjiance", + "unicode": "e63f", + "unicode_decimal": 58943 + }, + { + "icon_id": "44621285", + "name": "路径 1", + "font_class": "guozai", + "unicode": "e641", + "unicode_decimal": 58945 + }, + { + "icon_id": "44613655", + "name": "分组 92", + "font_class": "a-fenzu92", + "unicode": "e63a", + "unicode_decimal": 58938 + }, + { + "icon_id": "8998607", + "name": "用户", + "font_class": "yonghu2", + "unicode": "e68d", + "unicode_decimal": 59021 + }, + { + "icon_id": "17398117", + "name": "故障", + "font_class": "guzhang", + "unicode": "e632", + "unicode_decimal": 58930 + }, + { + "icon_id": "683410", + "name": "累计收益", + "font_class": "leijishouyi", + "unicode": "e631", + "unicode_decimal": 58929 + }, + { + "icon_id": "6943378", + "name": "发电量", + "font_class": "fadianliang", + "unicode": "e63d", + "unicode_decimal": 58941 + }, + { + "icon_id": "31328216", + "name": "风机", + "font_class": "fengji", + "unicode": "e661", + "unicode_decimal": 58977 + }, + { + "icon_id": "37843318", + "name": "光伏-copy", + "font_class": "guangfu", + "unicode": "e633", + "unicode_decimal": 58931 + }, + { + "icon_id": "39630640", + "name": "减碳排放", + "font_class": "jiantanpaifang", + "unicode": "e67d", + "unicode_decimal": 59005 + }, + { + "icon_id": "44416323", + "name": "合并", + "font_class": "hebing", + "unicode": "e630", + "unicode_decimal": 58928 + }, + { + "icon_id": "44603155", + "name": "分组 2", + "font_class": "a-fenzu2", + "unicode": "e62e", + "unicode_decimal": 58926 + }, + { + "icon_id": "19877417", + "name": "箭头", + "font_class": "jiantou", + "unicode": "e62d", + "unicode_decimal": 58925 + }, + { + "icon_id": "44581189", + "name": "分组 549", + "font_class": "a-fenzu549", + "unicode": "e62c", + "unicode_decimal": 58924 + }, + { + "icon_id": "4880431", + "name": "关闭", + "font_class": "guanbi1", + "unicode": "e62a", + "unicode_decimal": 58922 + }, + { + "icon_id": "27326599", + "name": "保护装置", + "font_class": "baohuzhuangzhi", + "unicode": "e704", + "unicode_decimal": 59140 + }, + { + "icon_id": "32257173", + "name": "配电房", + "font_class": "peidianfang", + "unicode": "e6ae", + "unicode_decimal": 59054 + }, + { + "icon_id": "35105134", + "name": "同心圆", + "font_class": "map-mark0", + "unicode": "e6ba", + "unicode_decimal": 59066 + }, + { + "icon_id": "40458894", + "name": "操控管理", + "font_class": "caokongguanli", + "unicode": "e62b", + "unicode_decimal": 58923 + }, + { + "icon_id": "40668708", + "name": "Cyber Monitoring", + "font_class": "a-CyberMonitoring", + "unicode": "e640", + "unicode_decimal": 58944 + }, + { + "icon_id": "40668774", + "name": "Growth Chart", + "font_class": "a-GrowthChart", + "unicode": "e650", + "unicode_decimal": 58960 + }, + { + "icon_id": "40668863", + "name": "Sales Growth", + "font_class": "a-SalesGrowth", + "unicode": "e668", + "unicode_decimal": 58984 + }, + { + "icon_id": "40668908", + "name": "Trend Chat", + "font_class": "a-TrendChat", + "unicode": "e673", + "unicode_decimal": 58995 + }, + { + "icon_id": "40668959", + "name": "Cloud Computer", + "font_class": "a-CloudComputer", + "unicode": "e683", + "unicode_decimal": 59011 + }, + { + "icon_id": "40668971", + "name": "Cloud Infrastructure", + "font_class": "a-CloudInfrastructure", + "unicode": "e687", + "unicode_decimal": 59015 + }, + { + "icon_id": "40668978", + "name": "Cloud Management", + "font_class": "a-CloudManagement", + "unicode": "e689", + "unicode_decimal": 59017 + }, + { + "icon_id": "40668994", + "name": "Cloud Security", + "font_class": "a-CloudSecurity", + "unicode": "e68e", + "unicode_decimal": 59022 + }, + { + "icon_id": "40669013", + "name": "Dataserver", + "font_class": "Dataserver", + "unicode": "e693", + "unicode_decimal": 59027 + }, + { + "icon_id": "40669125", + "name": "Volume Equalizer", + "font_class": "a-VolumeEqualizer", + "unicode": "e6c0", + "unicode_decimal": 59072 + }, + { + "icon_id": "40669723", + "name": "Resource Management", + "font_class": "a-ResourceManagement1", + "unicode": "e808", + "unicode_decimal": 59400 + }, + { + "icon_id": "40669819", + "name": "Graph Up", + "font_class": "a-GraphUp", + "unicode": "e859", + "unicode_decimal": 59481 + }, + { + "icon_id": "40670170", + "name": "File Cabinet", + "font_class": "a-FileCabinet", + "unicode": "e97d", + "unicode_decimal": 59773 + }, + { + "icon_id": "40671533", + "name": "System Setting", + "font_class": "a-SystemSetting", + "unicode": "ee41", + "unicode_decimal": 60993 + }, + { + "icon_id": "41578337", + "name": "同心圆-copy", + "font_class": "map-mark1", + "unicode": "ee42", + "unicode_decimal": 60994 + }, + { + "icon_id": "41578361", + "name": "同心圆-copy-copy", + "font_class": "map-mark2-copy", + "unicode": "ee43", + "unicode_decimal": 60995 + }, + { + "icon_id": "1228", + "name": "首页", + "font_class": "shouye", + "unicode": "e625", + "unicode_decimal": 58917 + }, + { + "icon_id": "11372763", + "name": "定位", + "font_class": "dingwei", + "unicode": "e8c4", + "unicode_decimal": 59588 + }, + { + "icon_id": "21164164", + "name": "关闭", + "font_class": "guanbi2", + "unicode": "e62f", + "unicode_decimal": 58927 + }, + { + "icon_id": "35113133", + "name": "处理状态", + "font_class": "chulizhuangtai", + "unicode": "e684", + "unicode_decimal": 59012 + }, + { + "icon_id": "44573704", + "name": "分组 302", + "font_class": "a-fenzu302", + "unicode": "e629", + "unicode_decimal": 58921 + }, + { + "icon_id": "44573686", + "name": "分组 1163", + "font_class": "a-fenzu1163", + "unicode": "e605", + "unicode_decimal": 58885 + }, + { + "icon_id": "44573683", + "name": "分组 449", + "font_class": "tuichu", + "unicode": "e627", + "unicode_decimal": 58919 + }, + { + "icon_id": "44573677", + "name": "分组 1565", + "font_class": "yonghu-yuan", + "unicode": "e628", + "unicode_decimal": 58920 + }, + { + "icon_id": "11372676", + "name": "密码", + "font_class": "mima", + "unicode": "e8b2", + "unicode_decimal": 59570 + }, + { + "icon_id": "28622327", + "name": "退出", + "font_class": "tuichu3", + "unicode": "e624", + "unicode_decimal": 58916 + }, + { + "icon_id": "35972990", + "name": "icon_夜间-月亮", + "font_class": "yueliang", + "unicode": "e656", + "unicode_decimal": 58966 + }, + { + "icon_id": "16388270", + "name": "通知", + "font_class": "tongzhi", + "unicode": "e674", + "unicode_decimal": 58996 + }, + { + "icon_id": "32538041", + "name": "通知", + "font_class": "tongzhi1", + "unicode": "e9cd", + "unicode_decimal": 59853 + }, + { + "icon_id": "42794618", + "name": "通知", + "font_class": "tongzhi2", + "unicode": "101d4", + "unicode_decimal": 66004 + }, + { + "icon_id": "44572036", + "name": "形状结合", + "font_class": "xingzhuangjiehe", + "unicode": "e623", + "unicode_decimal": 58915 + }, + { + "icon_id": "4138428", + "name": "系统管理", + "font_class": "xitongguanli", + "unicode": "e672", + "unicode_decimal": 58994 + }, + { + "icon_id": "5093337", + "name": "平台管理", + "font_class": "pingtaiguanli", + "unicode": "e619", + "unicode_decimal": 58905 + }, + { + "icon_id": "6677873", + "name": "湿度", + "font_class": "shidu", + "unicode": "e635", + "unicode_decimal": 58933 + }, + { + "icon_id": "17541547", + "name": "订单-全部订单", + "font_class": "dingdan-quanbudingdan", + "unicode": "e626", + "unicode_decimal": 58918 + }, + { + "icon_id": "17605421", + "name": "温度", + "font_class": "wendu", + "unicode": "e80f", + "unicode_decimal": 59407 + }, + { + "icon_id": "21135941", + "name": "光照", + "font_class": "fengtian-guangzhao", + "unicode": "e636", + "unicode_decimal": 58934 + }, + { + "icon_id": "25716499", + "name": "风速", + "font_class": "fengsu", + "unicode": "ea32", + "unicode_decimal": 59954 + }, + { + "icon_id": "35264434", + "name": "物联中心_normal", + "font_class": "wulianzhongxin_normal", + "unicode": "e620", + "unicode_decimal": 58912 + }, + { + "icon_id": "39347276", + "name": "icon-home", + "font_class": "icon-1", + "unicode": "e621", + "unicode_decimal": 58913 + }, + { + "icon_id": "41233755", + "name": "分割线", + "font_class": "fengexian", + "unicode": "e634", + "unicode_decimal": 58932 + }, + { + "icon_id": "44546776", + "name": "取消-抽屉", + "font_class": "quxiao", + "unicode": "e637", + "unicode_decimal": 58935 + }, + { + "icon_id": "44565750", + "name": "user_login", + "font_class": "a-xingzhuangjiehe1x", + "unicode": "e638", + "unicode_decimal": 58936 + }, + { + "icon_id": "44565801", + "name": "passwd_login", + "font_class": "a-xingzhuangjiehe1x1", + "unicode": "e639", + "unicode_decimal": 58937 + }, + { + "icon_id": "44572019", + "name": "形状", + "font_class": "xingzhuang1", + "unicode": "e622", + "unicode_decimal": 58914 + }, + { + "icon_id": "44572020", + "name": "形状", + "font_class": "xingzhuang", + "unicode": "e604", + "unicode_decimal": 58884 + }, + { + "icon_id": "44571957", + "name": "分组 1865", + "font_class": "a-fenzu1865", + "unicode": "e61f", + "unicode_decimal": 58911 + }, + { + "icon_id": "44571956", + "name": "分组 929", + "font_class": "confirm", + "unicode": "e61a", + "unicode_decimal": 58906 + }, + { + "icon_id": "44571953", + "name": "分组 412", + "font_class": "a-fenzu412", + "unicode": "e61b", + "unicode_decimal": 58907 + }, + { + "icon_id": "44571951", + "name": "分组 1753", + "font_class": "shuaxin", + "unicode": "e61c", + "unicode_decimal": 58908 + }, + { + "icon_id": "44571950", + "name": "分组 2121", + "font_class": "download", + "unicode": "e61d", + "unicode_decimal": 58909 + }, + { + "icon_id": "44571949", + "name": "分组 204", + "font_class": "upload", + "unicode": "e61e", + "unicode_decimal": 58910 + }, + { + "icon_id": "44571900", + "name": "分组 463", + "font_class": "add", + "unicode": "e616", + "unicode_decimal": 58902 + }, + { + "icon_id": "44571899", + "name": "分组 423", + "font_class": "chongzhi", + "unicode": "e617", + "unicode_decimal": 58903 + }, + { + "icon_id": "44571892", + "name": "分组 1977", + "font_class": "setProtectControl", + "unicode": "e618", + "unicode_decimal": 58904 + }, + { + "icon_id": "44571905", + "name": "分组 610", + "font_class": "export", + "unicode": "e613", + "unicode_decimal": 58899 + }, + { + "icon_id": "44571903", + "name": "分组 614", + "font_class": "import", + "unicode": "e614", + "unicode_decimal": 58900 + }, + { + "icon_id": "44571902", + "name": "分组 249", + "font_class": "del", + "unicode": "e615", + "unicode_decimal": 58901 + }, + { + "icon_id": "44571893", + "name": "分组 1237", + "font_class": "setProtectValue", + "unicode": "e60e", + "unicode_decimal": 58894 + }, + { + "icon_id": "44571891", + "name": "分组 2237", + "font_class": "setLightMode", + "unicode": "e60f", + "unicode_decimal": 58895 + }, + { + "icon_id": "44571888", + "name": "分组 2085", + "font_class": "setTimeMode", + "unicode": "e610", + "unicode_decimal": 58896 + }, + { + "icon_id": "44571885", + "name": "分组 1739", + "font_class": "switchMode", + "unicode": "e611", + "unicode_decimal": 58897 + }, + { + "icon_id": "44571884", + "name": "分组 1375", + "font_class": "setTime", + "unicode": "e612", + "unicode_decimal": 58898 + }, + { + "icon_id": "44571897", + "name": "分组 403", + "font_class": "sousu", + "unicode": "e60c", + "unicode_decimal": 58892 + }, + { + "icon_id": "44571896", + "name": "分组 2241", + "font_class": "a-fenzu2241", + "unicode": "e60d", + "unicode_decimal": 58893 + }, + { + "icon_id": "44567819", + "name": "分组 1067", + "font_class": "openOrClose", + "unicode": "e60b", + "unicode_decimal": 58891 + }, + { + "icon_id": "44567629", + "name": "分组 1928", + "font_class": "zhaoce", + "unicode": "e60a", + "unicode_decimal": 58890 + }, + { + "icon_id": "44567660", + "name": "分组 342", + "font_class": "send", + "unicode": "e609", + "unicode_decimal": 58889 + }, + { + "icon_id": "44567617", + "name": "分组 5", + "font_class": "a-fenzu5", + "unicode": "e608", + "unicode_decimal": 58888 + }, + { + "icon_id": "44567394", + "name": "设置", + "font_class": "shezhi", + "unicode": "e607", + "unicode_decimal": 58887 + }, + { + "icon_id": "44567418", + "name": "分组 1565", + "font_class": "touxiang", + "unicode": "e606", + "unicode_decimal": 58886 + }, + { + "icon_id": "44567099", + "name": "交易账户", + "font_class": "jiaoyizhanghuguanli", + "unicode": "e602", + "unicode_decimal": 58882 + }, + { + "icon_id": "44567095", + "name": "营销选中", + "font_class": "yingxiaoxuanzhong", + "unicode": "e603", + "unicode_decimal": 58883 + }, + { + "icon_id": "44567155", + "name": "可视化", + "font_class": "a-lujing1", + "unicode": "e600", + "unicode_decimal": 58880 + }, + { + "icon_id": "44567153", + "name": "用户", + "font_class": "a-lujing11", + "unicode": "e601", + "unicode_decimal": 58881 + } + ] +} diff --git a/web/src/assets/iconfont/iconfont.svg b/web/src/assets/iconfont/iconfont.svg new file mode 100644 index 0000000..1412e7c --- /dev/null +++ b/web/src/assets/iconfont/iconfont.svg @@ -0,0 +1,245 @@ + + + + Created by iconfont + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/iconfont/iconfont.ttf b/web/src/assets/iconfont/iconfont.ttf new file mode 100644 index 0000000..72fd146 Binary files /dev/null and b/web/src/assets/iconfont/iconfont.ttf differ diff --git a/web/src/assets/iconfont/iconfont.woff b/web/src/assets/iconfont/iconfont.woff new file mode 100644 index 0000000..103411a Binary files /dev/null and b/web/src/assets/iconfont/iconfont.woff differ diff --git a/web/src/assets/iconfont/iconfont.woff2 b/web/src/assets/iconfont/iconfont.woff2 new file mode 100644 index 0000000..4ba4b50 Binary files /dev/null and b/web/src/assets/iconfont/iconfont.woff2 differ diff --git a/web/src/components/Home/Alarm.vue b/web/src/components/Home/Alarm.vue new file mode 100644 index 0000000..a6af31d --- /dev/null +++ b/web/src/components/Home/Alarm.vue @@ -0,0 +1,225 @@ + + + + + diff --git a/web/src/components/Home/Charge.vue b/web/src/components/Home/Charge.vue new file mode 100644 index 0000000..77dd9eb --- /dev/null +++ b/web/src/components/Home/Charge.vue @@ -0,0 +1,249 @@ + + + + + diff --git a/web/src/components/Home/Energy.vue b/web/src/components/Home/Energy.vue new file mode 100644 index 0000000..a907098 --- /dev/null +++ b/web/src/components/Home/Energy.vue @@ -0,0 +1,207 @@ + + + + + diff --git a/web/src/components/Home/Map.vue b/web/src/components/Home/Map.vue new file mode 100644 index 0000000..efc0d9b --- /dev/null +++ b/web/src/components/Home/Map.vue @@ -0,0 +1,139 @@ + + + diff --git a/web/src/components/Home/Map_tianditu.vue b/web/src/components/Home/Map_tianditu.vue new file mode 100644 index 0000000..7db40e7 --- /dev/null +++ b/web/src/components/Home/Map_tianditu.vue @@ -0,0 +1,352 @@ + + + + + diff --git a/web/src/components/Home/Modal.vue b/web/src/components/Home/Modal.vue new file mode 100644 index 0000000..479bcc2 --- /dev/null +++ b/web/src/components/Home/Modal.vue @@ -0,0 +1,434 @@ + + + + + diff --git a/web/src/components/Home/Modal/DisCharge.vue b/web/src/components/Home/Modal/DisCharge.vue new file mode 100644 index 0000000..0aab707 --- /dev/null +++ b/web/src/components/Home/Modal/DisCharge.vue @@ -0,0 +1,204 @@ + + + + + diff --git a/web/src/components/Home/Modal/EnvInfo.vue b/web/src/components/Home/Modal/EnvInfo.vue new file mode 100644 index 0000000..653d115 --- /dev/null +++ b/web/src/components/Home/Modal/EnvInfo.vue @@ -0,0 +1,139 @@ + + + + + diff --git a/web/src/components/Home/Modal/OperationalInfo.vue b/web/src/components/Home/Modal/OperationalInfo.vue new file mode 100644 index 0000000..85f5fb9 --- /dev/null +++ b/web/src/components/Home/Modal/OperationalInfo.vue @@ -0,0 +1,155 @@ + + + + + diff --git a/web/src/components/Home/Modal/PrefabCabin.vue b/web/src/components/Home/Modal/PrefabCabin.vue new file mode 100644 index 0000000..5cccf5c --- /dev/null +++ b/web/src/components/Home/Modal/PrefabCabin.vue @@ -0,0 +1,174 @@ + + + + + diff --git a/web/src/components/Home/Modal/Revenue.vue b/web/src/components/Home/Modal/Revenue.vue new file mode 100644 index 0000000..a27787d --- /dev/null +++ b/web/src/components/Home/Modal/Revenue.vue @@ -0,0 +1,213 @@ + + + + + diff --git a/web/src/components/Home/Modal/StatisticalInfo.vue b/web/src/components/Home/Modal/StatisticalInfo.vue new file mode 100644 index 0000000..59c1ef9 --- /dev/null +++ b/web/src/components/Home/Modal/StatisticalInfo.vue @@ -0,0 +1,135 @@ + + + + + diff --git a/web/src/components/Home/Modal/Utilization.vue b/web/src/components/Home/Modal/Utilization.vue new file mode 100644 index 0000000..d476c8f --- /dev/null +++ b/web/src/components/Home/Modal/Utilization.vue @@ -0,0 +1,197 @@ + + + + + diff --git a/web/src/components/Home/Operational.vue b/web/src/components/Home/Operational.vue new file mode 100644 index 0000000..4418e6b --- /dev/null +++ b/web/src/components/Home/Operational.vue @@ -0,0 +1,98 @@ + + + + + diff --git a/web/src/components/Home/Pv.vue b/web/src/components/Home/Pv.vue new file mode 100644 index 0000000..0aec5c2 --- /dev/null +++ b/web/src/components/Home/Pv.vue @@ -0,0 +1,212 @@ + + + + + diff --git a/web/src/components/Home/onLine.vue b/web/src/components/Home/onLine.vue new file mode 100644 index 0000000..6aa6dd9 --- /dev/null +++ b/web/src/components/Home/onLine.vue @@ -0,0 +1,159 @@ + + + + + diff --git a/web/src/main.js b/web/src/main.js index 3907f89..3126b87 100644 --- a/web/src/main.js +++ b/web/src/main.js @@ -1,9 +1,16 @@ import { createApp } from 'vue' import App from './App.vue' + import router from './router' import store from './store' import Antd from 'ant-design-vue' import 'ant-design-vue/dist/reset.css' import '@/style/index.scss' +// import '@/assets/iconfont/iconfont.css' +import * as echarts from 'echarts' +import VueTianditu from 'vue-tianditu' -createApp(App).use(store).use(router).use(Antd).mount('#app') +const app = createApp(App) +app.config.globalProperties.$echarts = echarts // 挂载到全局属性 + +app.use(store).use(router).use(Antd).use(VueTianditu).mount('#app') diff --git a/web/src/router/index.js b/web/src/router/index.js index 9ceaf26..9b242a3 100644 --- a/web/src/router/index.js +++ b/web/src/router/index.js @@ -13,9 +13,13 @@ const routes = [ { path: '/main', name: 'main', - redirect: '/main/monitor', + redirect: '/main/Home', component: () => import(/* webpackChunkName: "main" */ '@/views/MainView.vue'), children: [ + { + path: 'Home', + component: () => import(/* webpackChunkName: "monitor" */ '@/views/sub/Home.vue') + }, { path: 'monitor', component: () => import(/* webpackChunkName: "monitor" */ '@/views/sub/monitor.vue') diff --git a/web/src/utils/gcj02ToWgs84.js b/web/src/utils/gcj02ToWgs84.js new file mode 100644 index 0000000..f97fb5b --- /dev/null +++ b/web/src/utils/gcj02ToWgs84.js @@ -0,0 +1,80 @@ +// /** +// * 判断是否在中国境外 +// */ +// function outOfChina(lng, lat) { +// return !(lng >= 72.004 && lng <= 137.8347 && lat >= 0.8293 && lat <= 55.8271) +// } + +// /** +// * 辅助函数：纬度转换 +// */ +// function _transformLat(x, y) { +// let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x)) +// ret += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0 +// ret += ((20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin((y / 3.0) * Math.PI)) * 2.0) / 3.0 +// ret += +// ((160.0 * Math.sin((y / 12.0) * Math.PI) + 320 * Math.sin((y * Math.PI) / 30.0)) * 2.0) / 3.0 +// return ret +// } + +// /** +// * 辅助函数：经度转换 +// */ +// function _transformLng(x, y) { +// let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x)) +// ret += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0 +// ret += ((20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin((x / 3.0) * Math.PI)) * 2.0) / 3.0 +// ret += +// ((150.0 * Math.sin((x / 12.0) * Math.PI) + 300.0 * Math.sin((x / 30.0) * Math.PI)) * 2.0) / 3.0 +// return ret +// } + +// /** +// * GCJ-02 (高德/腾讯坐标系) 转 WGS-84 (GPS原始坐标系) +// * @param {number} lng GCJ-02经度 +// * @param {number} lat GCJ-02纬度 +// * @returns {number[]} [WGS-84经度, WGS-84纬度] +// */ +// export function gcj02ToWgs84(lng, lat) { +// // 判断是否在中国境内（简化版，实际需更完整判断） +// if (outOfChina(lng, lat)) { +// return [lng, lat] // 境外坐标不转换 +// } + +// let dlat = _transformLat(lng - 105.0, lat - 35.0) +// let dlng = _transformLng(lng - 105.0, lat - 35.0) + +// const radlat = (lat / 180.0) * Math.PI +// let magic = Math.sin(radlat) +// magic = 1 - 0.00669342162296594323 * magic * magic +// const sqrtmagic = Math.sqrt(magic) + +// dlat = +// (dlat * 180.0) / (((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtmagic)) * Math.PI) +// dlng = (dlng * 180.0) / ((6378245.0 / sqrtmagic) * Math.cos(radlat) * Math.PI) + +// // 初始转换结果（粗略值） +// let wgsLat = lat - dlat +// let wgsLng = lng - dlng + +// return [wgsLng, wgsLat] +// } + +// /** +// * WGS-84 转 GCJ-02（用于迭代优化） +// */ +// function wgs84ToGcj02(lng, lat) { +// if (outOfChina(lng, lat)) { +// return [lng, lat] +// } +// let dlat = _transformLat(lng - 105.0, lat - 35.0) +// let dlng = _transformLng(lng - 105.0, lat - 35.0) +// const radlat = (lat / 180.0) * Math.PI +// let magic = Math.sin(radlat) +// magic = 1 - 0.00669342162296594323 * magic * magic +// const sqrtmagic = Math.sqrt(magic) +// dlat = +// (dlat * 180.0) / (((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtmagic)) * Math.PI) +// dlng = (dlng * 180.0) / ((6378245.0 / sqrtmagic) * Math.cos(radlat) * Math.PI) +// return [lng + dlng, lat + dlat] +// } diff --git a/web/src/views/MainView.vue b/web/src/views/MainView.vue index 30f7a98..b2a1f2d 100644 --- a/web/src/views/MainView.vue +++ b/web/src/views/MainView.vue @@ -66,7 +66,7 @@ export default { height: calc(100% - 80px - 15px - 47px - 60px); margin: 40px 10px 20px 10px; border-radius: 20px; -background: #052F4D; +// background: #052F4D; } .menu { diff --git a/web/src/views/sub/Home.vue b/web/src/views/sub/Home.vue new file mode 100644 index 0000000..e997c12 --- /dev/null +++ b/web/src/views/sub/Home.vue @@ -0,0 +1,411 @@ + + + + +