lzq
/
zsy-recycling-supervision-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

master
lzq 2025-07-30 18:56:14 +08:00
parent 42c69231e6
commit e1df05b96e
30 changed files with 1351 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -5,7 +5,7 @@
<link href="/vite.svg" rel="icon" type="image/svg+xml"/> <link href="/vite.svg" rel="icon" type="image/svg+xml"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/> <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title></title> <title></title>
<link href="/iconfont/iconfont.css" rel="stylesheet" type="text/css"> <link href="/iconfont/ali/iconfont.css" rel="stylesheet" type="text/css">
<style> <style>
html { html {
overflow: hidden; overflow: hidden;
@ -29,6 +29,6 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="/src/main.ts" type="module"></script> <script src="/src/main.ts" type="module"></script>
<script src="/iconfont/iconfont.js"></script> <script src="/iconfont/ali/iconfont.js"></script>
</body> </body>
</html> </html>

32
package-lock.json generated
View File

@ -14,6 +14,7 @@
"@idux/pro": "^2.6.3", "@idux/pro": "^2.6.3",
"axios": "1.7.4", "axios": "1.7.4",
"decimal.js": "^10.4.3", "decimal.js": "^10.4.3",
"echarts": "^6.0.0",
"gridstack": "^12.0.0", "gridstack": "^12.0.0",
"logan-web": "^1.1.0", "logan-web": "^1.1.0",
"luxon": "^3.4.4", "luxon": "^3.4.4",
@ -2940,6 +2941,22 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/echarts": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
"integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
"license": "Apache-2.0",
"dependencies": {
"tslib": "2.3.0",
"zrender": "6.0.0"
}
},
"node_modules/echarts/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"license": "0BSD"
},
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.5.139", "version": "1.5.139",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.139.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.139.tgz",
@ -6651,6 +6668,21 @@
"funding": { "funding": {
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
},
"node_modules/zrender": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
"integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
"license": "BSD-3-Clause",
"dependencies": {
"tslib": "2.3.0"
}
},
"node_modules/zrender/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"license": "0BSD"
} }
} }
} }

1
package.json
View File

@ -15,6 +15,7 @@
"@idux/pro": "^2.6.3", "@idux/pro": "^2.6.3",
"axios": "1.7.4", "axios": "1.7.4",
"decimal.js": "^10.4.3", "decimal.js": "^10.4.3",
"echarts": "^6.0.0",
"gridstack": "^12.0.0", "gridstack": "^12.0.0",
"logan-web": "^1.1.0", "logan-web": "^1.1.0",
"luxon": "^3.4.4", "luxon": "^3.4.4",

35
plugin/file-watcher.ts 100644
View File

@ -0,0 +1,35 @@
import { Plugin } from 'vite'
import fs from 'fs'
import path from 'path'
interface FileWatcherOptions {
file: string;
fn: (content: string) => void;
delay?: number;
}
export function fileWatcher(options: FileWatcherOptions): Plugin {
const {file, fn, delay = 300} = options
let debounceTimer: NodeJS.Timeout | null = null
return {
name: 'file-watcher-plugin',
configureServer(server) {
server.watcher.add(path.resolve(file))
server.watcher.on('change', (filePath: string) => {
if (filePath === path.resolve(file)) {
if (debounceTimer) clearTimeout(debounceTimer)
debounceTimer = setTimeout(() => {
try {
const content = fs.readFileSync(filePath, 'utf-8')
fn(content)
} catch (error) {
console.error('文件变化处理失败:', error)
}
}, delay)
}
})
},
}
}

31
plugin/iconfont-dts.ts 100644
View File

@ -0,0 +1,31 @@
import fs from 'fs'
interface IconfontJson {
font_family: string;
css_prefix_text: string;
glyphs: {
icon_id: string
font_class: string
unicode: string
name: string
}[];
}
export default function iconfontDts(outFile: string) {
return function (content: string) {
const json = JSON.parse(content) as IconfontJson
const names = json.glyphs.map(glyph => glyph.font_class)
console.log('正在生成文件：', outFile)
const dts = `export {}
declare global {
namespace IconfontTypes {
type name = ${names.map(name => `'${name}'`).join('\n | ')}
}
}
`
fs.writeFileSync(outFile, dts, {encoding: 'utf-8'})
console.log('文件生成完成')
}
}

76
public/iconfont/demo.css → public/iconfont/ali/demo.css
View File

@ -31,7 +31,7 @@
} }
#tabs { #tabs {
border-bottom: 1px solid #EEEEEE; border-bottom: 1px solid #eee;
} }
#tabs li { #tabs li {
@ -45,13 +45,13 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-bottom: -1px; margin-bottom: -1px;
color: #666666; color: #666;
} }
#tabs .active { #tabs .active {
border-bottom-color: #FF0000; border-bottom-color: #FF0000;
color: #222222; color: #222;
} }
.tab-container .content { .tab-container .content {
@ -66,7 +66,7 @@
} }
.main .logo { .main .logo {
color: #333333; color: #333;
text-align: left; text-align: left;
margin-bottom: 30px; margin-bottom: 30px;
line-height: 1; line-height: 1;
@ -78,7 +78,7 @@
.main .logo a { .main .logo a {
font-size: 160px; font-size: 160px;
color: #333333; color: #333;
} }
.helps { .helps {
@ -89,7 +89,7 @@
padding: 20px; padding: 20px;
margin: 10px 0; margin: 10px 0;
border: solid 1px #E7E1CD; border: solid 1px #E7E1CD;
background-color: #FFFDEF; background-color: #fffdef;
overflow: auto; overflow: auto;
} }
@ -118,7 +118,7 @@
line-height: 100px; line-height: 100px;
font-size: 42px; font-size: 42px;
margin: 10px auto; margin: 10px auto;
color: #333333; color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear; -webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-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; transition: font-size 0.25s linear, width 0.25s linear;
@ -142,12 +142,12 @@
.icon_lists li .name, .icon_lists li .name,
.icon_lists li .code-name { .icon_lists li .code-name {
color: #666666; color: #666;
} }
/* markdown 样式 */ /* markdown 样式 */
.markdown { .markdown {
color: #666666; color: #666;
font-size: 14px; font-size: 14px;
line-height: 1.8; line-height: 1.8;
} }
@ -206,7 +206,7 @@
.markdown hr { .markdown hr {
height: 1px; height: 1px;
border: 0; border: 0;
background: #E9E9E9; background: #e9e9e9;
margin: 16px 0; margin: 16px 0;
clear: both; clear: both;
} }
@ -219,16 +219,16 @@
.markdown > blockquote, .markdown > blockquote,
.markdown > .highlight, .markdown > .highlight,
.markdown > ol, .markdown > ol,
.markdown > ul { .markdown>ul {
width: 80%; width: 80%;
} }
.markdown ul > li { .markdown ul>li {
list-style: circle; list-style: circle;
} }
.markdown > ul li, .markdown > ul li,
.markdown blockquote ul > li { .markdown blockquote ul>li {
margin-left: 20px; margin-left: 20px;
padding-left: 4px; padding-left: 4px;
} }
@ -238,12 +238,12 @@
margin: 0.6em 0; margin: 0.6em 0;
} }
.markdown ol > li { .markdown ol>li {
list-style: decimal; list-style: decimal;
} }
.markdown > ol li, .markdown > ol li,
.markdown blockquote ol > li { .markdown blockquote ol>li {
margin-left: 20px; margin-left: 20px;
padding-left: 4px; padding-left: 4px;
} }
@ -251,7 +251,7 @@
.markdown code { .markdown code {
margin: 0 3px; margin: 0 3px;
padding: 0 5px; padding: 0 5px;
background: #EEEEEE; background: #eee;
border-radius: 3px; border-radius: 3px;
} }
@ -264,20 +264,20 @@
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0px; border-spacing: 0px;
empty-cells: show; empty-cells: show;
border: 1px solid #E9E9E9; border: 1px solid #e9e9e9;
width: 95%; width: 95%;
margin-bottom: 24px; margin-bottom: 24px;
} }
.markdown > table th { .markdown > table th {
white-space: nowrap; white-space: nowrap;
color: #333333; color: #333;
font-weight: 600; font-weight: 600;
} }
.markdown > table th, .markdown > table th,
.markdown > table td { .markdown > table td {
border: 1px solid #E9E9E9; border: 1px solid #e9e9e9;
padding: 8px 16px; padding: 8px 16px;
text-align: left; text-align: left;
} }
@ -289,7 +289,7 @@
.markdown blockquote { .markdown blockquote {
font-size: 90%; font-size: 90%;
color: #999999; color: #999999;
border-left: 4px solid #E9E9E9; border-left: 4px solid #e9e9e9;
padding-left: 0.8em; padding-left: 0.8em;
margin: 1em 0; margin: 1em 0;
} }
@ -305,7 +305,7 @@
} }
.markdown .waiting { .markdown .waiting {
color: #CCCCCC; color: #ccc;
} }
.markdown h1:hover .anchor, .markdown h1:hover .anchor,
@ -319,7 +319,7 @@
} }
.markdown > br, .markdown > br,
.markdown > p > br { .markdown>p>br {
clear: both; clear: both;
} }
@ -343,25 +343,25 @@
.hljs-strong, .hljs-strong,
.hljs-emphasis, .hljs-emphasis,
.hljs-quote { .hljs-quote {
color: #DF5000; color: #df5000;
} }
.hljs-keyword, .hljs-keyword,
.hljs-selector-tag, .hljs-selector-tag,
.hljs-type { .hljs-type {
color: #A71D5D; color: #a71d5d;
} }
.hljs-literal, .hljs-literal,
.hljs-symbol, .hljs-symbol,
.hljs-bullet, .hljs-bullet,
.hljs-attribute { .hljs-attribute {
color: #0086B3; color: #0086b3;
} }
.hljs-section, .hljs-section,
.hljs-name { .hljs-name {
color: #63A35C; color: #63a35c;
} }
.hljs-tag { .hljs-tag {
@ -374,17 +374,17 @@
.hljs-selector-class, .hljs-selector-class,
.hljs-selector-attr, .hljs-selector-attr,
.hljs-selector-pseudo { .hljs-selector-pseudo {
color: #795DA3; color: #795da3;
} }
.hljs-addition { .hljs-addition {
color: #55A532; color: #55A532;
background-color: #EAFFEA; background-color: #eaffea;
} }
.hljs-deletion { .hljs-deletion {
color: #BD2C00; color: #BD2C00;
background-color: #FFECEC; background-color: #ffecec;
} }
.hljs-link { .hljs-link {
@ -427,7 +427,7 @@ pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection { code[class*="language-"] ::-moz-selection {
text-shadow: none; text-shadow: none;
background: #B3D4FC; background: #b3d4fc;
} }
pre[class*="language-"]::selection, pre[class*="language-"]::selection,
@ -435,7 +435,7 @@ pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"]::selection,
code[class*="language-"] ::selection { code[class*="language-"] ::selection {
text-shadow: none; text-shadow: none;
background: #B3D4FC; background: #b3d4fc;
} }
@media print { @media print {
@ -455,7 +455,7 @@ pre[class*="language-"] {
:not(pre) > code[class*="language-"], :not(pre) > code[class*="language-"],
pre[class*="language-"] { pre[class*="language-"] {
background: #F5F2F0; background: #f5f2f0;
} }
/* Inline code */ /* Inline code */
@ -473,7 +473,7 @@ pre[class*="language-"] {
} }
.token.punctuation { .token.punctuation {
color: #999999; color: #999;
} }
.namespace { .namespace {
@ -487,7 +487,7 @@ pre[class*="language-"] {
.token.constant, .token.constant,
.token.symbol, .token.symbol,
.token.deleted { .token.deleted {
color: #990055; color: #905;
} }
.token.selector, .token.selector,
@ -496,7 +496,7 @@ pre[class*="language-"] {
.token.char, .token.char,
.token.builtin, .token.builtin,
.token.inserted { .token.inserted {
color: #669900; color: #690;
} }
.token.operator, .token.operator,
@ -504,14 +504,14 @@ pre[class*="language-"] {
.token.url, .token.url,
.language-css .token.string, .language-css .token.string,
.style .token.string { .style .token.string {
color: #9A6E3A; color: #9a6e3a;
background: hsla(0, 0%, 100%, .5); background: hsla(0, 0%, 100%, .5);
} }
.token.atrule, .token.atrule,
.token.attr-value, .token.attr-value,
.token.keyword { .token.keyword {
color: #0077AA; color: #07a;
} }
.token.function, .token.function,
@ -522,7 +522,7 @@ pre[class*="language-"] {
.token.regex, .token.regex,
.token.important, .token.important,
.token.variable { .token.variable {
color: #EE9900; color: #e90;
} }
.token.important, .token.important,

297
public/iconfont/demo_index.html → public/iconfont/ali/demo_index.html
View File

@ -47,7 +47,7 @@
<li class="dib"><span>Symbol</span></li> <li class="dib"><span>Symbol</span></li>
</ul> </ul>
<a class="nav-more" href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4902724" target="_blank">查看项目</a> <a class="nav-more" href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4985351" target="_blank">查看项目</a>
</div> </div>
<div class="tab-container"> <div class="tab-container">
@ -55,9 +55,63 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe601;</span> <span class="icon iconfont">&#xe667;</span>
<div class="name">删除</div> <div class="name">menu</div>
<div class="code-name">&amp;#xe601;</div> <div class="code-name">&amp;#xe667;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe689;</span>
<div class="name">menu_3rolepermiss</div>
<div class="code-name">&amp;#xe689;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65b;</span>
<div class="name">cog</div>
<div class="code-name">&amp;#xe65b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe627;</span>
<div class="name">user</div>
<div class="code-name">&amp;#xe627;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe670;</span>
<div class="name">bar-chart</div>
<div class="code-name">&amp;#xe670;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe615;</span>
<div class="name">arrow-up</div>
<div class="code-name">&amp;#xe615;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7de;</span>
<div class="name">exclamation circle-f</div>
<div class="code-name">&amp;#xe7de;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7e2;</span>
<div class="name">check-circle-fill</div>
<div class="code-name">&amp;#xe7e2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe600;</span>
<div class="name">map-pin</div>
<div class="code-name">&amp;#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe629;</span>
<div class="name">文本框</div>
<div class="code-name">&amp;#xe629;</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -67,9 +121,21 @@
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe629;</span> <span class="icon iconfont">&#xe601;</span>
<div class="name">文本框</div> <div class="name">删除</div>
<div class="code-name">&amp;#xe629;</div> <div class="code-name">&amp;#xe601;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe777;</span>
<div class="name">map-marker</div>
<div class="code-name">&amp;#xe777;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60a;</span>
<div class="name">循环</div>
<div class="code-name">&amp;#xe60a;</div>
</li> </li>
</ul> </ul>
@ -90,9 +156,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1745541124485') format('woff2'), src: url('iconfont.woff2?t=1753872505940') format('woff2'),
url('iconfont.woff?t=1745541124485') format('woff'), url('iconfont.woff?t=1753872505940') format('woff'),
url('iconfont.ttf?t=1745541124485') format('truetype'); url('iconfont.ttf?t=1753872505940') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -119,11 +185,92 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-shanchu"></span> <span class="icon iconfont icon-menu"></span>
<div class="name"> <div class="name">
删除 menu
</div> </div>
<div class="code-name">.icon-shanchu <div class="code-name">.icon-menu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-menu_rolepermiss"></span>
<div class="name">
menu_3rolepermiss
</div>
<div class="code-name">.icon-menu_rolepermiss
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-cog"></span>
<div class="name">
cog
</div>
<div class="code-name">.icon-cog
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-user"></span>
<div class="name">
user
</div>
<div class="code-name">.icon-user
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bar-chart"></span>
<div class="name">
bar-chart
</div>
<div class="code-name">.icon-bar-chart
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-up"></span>
<div class="name">
arrow-up
</div>
<div class="code-name">.icon-arrow-up
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-exclamationcircle-f"></span>
<div class="name">
exclamation circle-f
</div>
<div class="code-name">.icon-exclamationcircle-f
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-check-circle-fill"></span>
<div class="name">
check-circle-fill
</div>
<div class="code-name">.icon-check-circle-fill
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-map-pin"></span>
<div class="name">
map-pin
</div>
<div class="code-name">.icon-map-pin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wenbenkuang"></span>
<div class="name">
文本框
</div>
<div class="code-name">.icon-wenbenkuang
</div> </div>
</li> </li>
@ -137,11 +284,29 @@
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-wenbenkuang"></span> <span class="icon iconfont icon-shanchu"></span>
<div class="name"> <div class="name">
文本框 删除
</div> </div>
<div class="code-name">.icon-wenbenkuang <div class="code-name">.icon-shanchu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-mapmarker"></span>
<div class="name">
map-marker
</div>
<div class="code-name">.icon-mapmarker
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xunhuan"></span>
<div class="name">
循环
</div>
<div class="code-name">.icon-xunhuan
</div> </div>
</li> </li>
@ -174,10 +339,82 @@
<li class="dib"> <li class="dib">
<svg aria-hidden="true" class="icon svg-icon"> <svg aria-hidden="true" class="icon svg-icon">
<use xlink:href="#icon-shanchu"></use> <use xlink:href="#icon-menu"></use>
</svg> </svg>
<div class="name">删除</div> <div class="name">menu</div>
<div class="code-name">#icon-shanchu</div> <div class="code-name">#icon-menu</div>
</li>
<li class="dib">
<svg aria-hidden="true" class="icon svg-icon">
<use xlink:href="#icon-menu_rolepermiss"></use>
</svg>
<div class="name">menu_3rolepermiss</div>
<div class="code-name">#icon-menu_rolepermiss</div>
</li>
<li class="dib">
<svg aria-hidden="true" class="icon svg-icon">
<use xlink:href="#icon-cog"></use>
</svg>
<div class="name">cog</div>
<div class="code-name">#icon-cog</div>
</li>
<li class="dib">
<svg aria-hidden="true" class="icon svg-icon">
<use xlink:href="#icon-user"></use>
</svg>
<div class="name">user</div>
<div class="code-name">#icon-user</div>
</li>
<li class="dib">
<svg aria-hidden="true" class="icon svg-icon">
<use xlink:href="#icon-bar-chart"></use>
</svg>
<div class="name">bar-chart</div>
<div class="code-name">#icon-bar-chart</div>
</li>
<li class="dib">
<svg aria-hidden="true" class="icon svg-icon">
<use xlink:href="#icon-arrow-up"></use>
</svg>
<div class="name">arrow-up</div>
<div class="code-name">#icon-arrow-up</div>
</li>
<li class="dib">
<svg aria-hidden="true" class="icon svg-icon">
<use xlink:href="#icon-exclamationcircle-f"></use>
</svg>
<div class="name">exclamation circle-f</div>
<div class="code-name">#icon-exclamationcircle-f</div>
</li>
<li class="dib">
<svg aria-hidden="true" class="icon svg-icon">
<use xlink:href="#icon-check-circle-fill"></use>
</svg>
<div class="name">check-circle-fill</div>
<div class="code-name">#icon-check-circle-fill</div>
</li>
<li class="dib">
<svg aria-hidden="true" class="icon svg-icon">
<use xlink:href="#icon-map-pin"></use>
</svg>
<div class="name">map-pin</div>
<div class="code-name">#icon-map-pin</div>
</li>
<li class="dib">
<svg aria-hidden="true" class="icon svg-icon">
<use xlink:href="#icon-wenbenkuang"></use>
</svg>
<div class="name">文本框</div>
<div class="code-name">#icon-wenbenkuang</div>
</li> </li>
<li class="dib"> <li class="dib">
@ -190,10 +427,26 @@
<li class="dib"> <li class="dib">
<svg aria-hidden="true" class="icon svg-icon"> <svg aria-hidden="true" class="icon svg-icon">
<use xlink:href="#icon-wenbenkuang"></use> <use xlink:href="#icon-shanchu"></use>
</svg> </svg>
<div class="name">文本框</div> <div class="name">删除</div>
<div class="code-name">#icon-wenbenkuang</div> <div class="code-name">#icon-shanchu</div>
</li>
<li class="dib">
<svg aria-hidden="true" class="icon svg-icon">
<use xlink:href="#icon-mapmarker"></use>
</svg>
<div class="name">map-marker</div>
<div class="code-name">#icon-mapmarker</div>
</li>
<li class="dib">
<svg aria-hidden="true" class="icon svg-icon">
<use xlink:href="#icon-xunhuan"></use>
</svg>
<div class="name">循环</div>
<div class="code-name">#icon-xunhuan</div>
</li> </li>
</ul> </ul>

71
public/iconfont/ali/iconfont.css 100644
View File

@ -0,0 +1,71 @@
@font-face {
font-family: "iconfont"; /* Project id 4985351 */
src: url('iconfont.woff2?t=1753872505940') format('woff2'),
url('iconfont.woff?t=1753872505940') format('woff'),
url('iconfont.ttf?t=1753872505940') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-menu:before {
content: "\e667";
}
.icon-menu_rolepermiss:before {
content: "\e689";
}
.icon-cog:before {
content: "\e65b";
}
.icon-user:before {
content: "\e627";
}
.icon-bar-chart:before {
content: "\e670";
}
.icon-arrow-up:before {
content: "\e615";
}
.icon-exclamationcircle-f:before {
content: "\e7de";
}
.icon-check-circle-fill:before {
content: "\e7e2";
}
.icon-map-pin:before {
content: "\e600";
}
.icon-wenbenkuang:before {
content: "\e629";
}
.icon-zujian:before {
content: "\e61e";
}
.icon-shanchu:before {
content: "\e601";
}
.icon-mapmarker:before {
content: "\e777";
}
.icon-xunhuan:before {
content: "\e60a";
}

1
public/iconfont/ali/iconfont.js 100644
View File

File diff suppressed because one or more lines are too long

107
public/iconfont/ali/iconfont.json 100644
View File

@ -0,0 +1,107 @@
{
"id": "4985351",
"name": "回收监管",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "1174312",
"name": "menu",
"font_class": "menu",
"unicode": "e667",
"unicode_decimal": 58983
},
{
"icon_id": "12891317",
"name": "menu_3rolepermiss",
"font_class": "menu_rolepermiss",
"unicode": "e689",
"unicode_decimal": 59017
},
{
"icon_id": "1261484",
"name": "cog",
"font_class": "cog",
"unicode": "e65b",
"unicode_decimal": 58971
},
{
"icon_id": "10793071",
"name": "user",
"font_class": "user",
"unicode": "e627",
"unicode_decimal": 58919
},
{
"icon_id": "32804214",
"name": "bar-chart",
"font_class": "bar-chart",
"unicode": "e670",
"unicode_decimal": 58992
},
{
"icon_id": "1898529",
"name": "arrow-up",
"font_class": "arrow-up",
"unicode": "e615",
"unicode_decimal": 58901
},
{
"icon_id": "6151171",
"name": "exclamation circle-f",
"font_class": "exclamationcircle-f",
"unicode": "e7de",
"unicode_decimal": 59358
},
{
"icon_id": "6151177",
"name": "check-circle-fill",
"font_class": "check-circle-fill",
"unicode": "e7e2",
"unicode_decimal": 59362
},
{
"icon_id": "11399087",
"name": "map-pin",
"font_class": "map-pin",
"unicode": "e600",
"unicode_decimal": 58880
},
{
"icon_id": "11121385",
"name": "文本框",
"font_class": "wenbenkuang",
"unicode": "e629",
"unicode_decimal": 58921
},
{
"icon_id": "10352352",
"name": "组件",
"font_class": "zujian",
"unicode": "e61e",
"unicode_decimal": 58910
},
{
"icon_id": "17716099",
"name": "删除",
"font_class": "shanchu",
"unicode": "e601",
"unicode_decimal": 58881
},
{
"icon_id": "837051",
"name": "map-marker",
"font_class": "mapmarker",
"unicode": "e777",
"unicode_decimal": 59255
},
{
"icon_id": "31499371",
"name": "循环",
"font_class": "xunhuan",
"unicode": "e60a",
"unicode_decimal": 58890
}
]
}

BIN
public/iconfont/ali/iconfont.ttf 100644
View File

Binary file not shown.

BIN
public/iconfont/ali/iconfont.woff 100644
View File

Binary file not shown.

BIN
public/iconfont/ali/iconfont.woff2 100644
View File

Binary file not shown.

27
public/iconfont/iconfont.css
View File

@ -1,27 +0,0 @@
@font-face {
font-family: "iconfont"; /* Project id 4902724 */
src: url('iconfont.woff2?t=1745541124485') format('woff2'),
url('iconfont.woff?t=1745541124485') format('woff'),
url('iconfont.ttf?t=1745541124485') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shanchu:before {
content: "\e601";
}
.icon-zujian:before {
content: "\e61e";
}
.icon-wenbenkuang:before {
content: "\e629";
}

1
public/iconfont/iconfont.js
View File

@ -1 +0,0 @@
window._iconfont_svg_string_4902724='<svg><symbol id="icon-shanchu" viewBox="0 0 1024 1024"><path d="M92.748283 203.507071h838.503434v44.140606H92.748283zM644.402424 115.238788v44.127677h44.127677V115.238788c0-24.384646-19.75596-44.127677-43.998384-44.127677h-265.050505a43.97899 43.97899 0 0 0-31.172525 12.916364 43.918222 43.918222 0 0 0-12.825859 31.211313v44.127677h44.127677V115.238788h264.791919z m0 0" fill="#3D3D3D" ></path><path d="M203.073939 909.614545v-661.979798H158.946263V909.575758c0 24.410505 19.639596 44.179394 44.179394 44.179394h617.761616c24.410505 0 44.179394-19.639596 44.179394-44.179394V247.634747H820.926061v661.979798H203.073939z m0 0" fill="#3D3D3D" ></path><path d="M313.412525 335.90303h44.127677V733.090909h-44.127677V335.90303z m176.523637 0h44.127676V733.090909H489.936162V335.90303z m176.523636 0h44.127677V733.090909h-44.127677V335.90303z m0 0" fill="#3D3D3D" ></path></symbol><symbol id="icon-zujian" viewBox="0 0 1024 1024"><path d="M768 928H128a32 32 0 0 1-32-32V256a32 32 0 0 1 32-32h195.84A132.48 132.48 0 0 1 320 192a128 128 0 0 1 256 0 132.48 132.48 0 0 1-3.84 32H768a32 32 0 0 1 32 32v195.84A132.48 132.48 0 0 1 832 448a128 128 0 0 1 0 256 132.48 132.48 0 0 1-32-3.84V896a32 32 0 0 1-32 32z m-608-64h576v-216.96a32.64 32.64 0 0 1 19.2-29.44 32.64 32.64 0 0 1 33.92 5.76 64 64 0 1 0 0-94.72 31.36 31.36 0 0 1-33.92 5.76 32.64 32.64 0 0 1-19.2-29.44V288H519.04a32.64 32.64 0 0 1-29.44-19.2 31.36 31.36 0 0 1 5.76-33.92 64 64 0 1 0-94.72 0 31.36 31.36 0 0 1 5.76 33.92 32.64 32.64 0 0 1-29.44 19.2H160z" fill="#4D4D4D" ></path></symbol><symbol id="icon-wenbenkuang" viewBox="0 0 1024 1024"><path d="M914.56 1010.56H109.44a96 96 0 0 1-95.36-96V110.08A96 96 0 0 1 109.44 14.08h805.12a96 96 0 0 1 95.36 96v804.48a96 96 0 0 1-95.36 96zM109.44 78.08a32 32 0 0 0-31.36 32v804.48a32 32 0 0 0 31.36 32h805.12a32 32 0 0 0 31.36-32V110.08a32 32 0 0 0-31.36-32z" fill="#323333" ></path><path d="M287.36 238.08h448v71.68H553.6v476.8H471.04V309.76H287.36z" fill="#323333" ></path></symbol></svg>',(n=>{var t=(e=(e=document.getElementsByTagName("script"))[e.length-1]).getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var i,a,o,d,l,c=function(t,e){e.parentNode.insertBefore(t,e)};if(t&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4902724,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?c(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(a=function(){document.removeEventListener("DOMContentLoaded",a,!1),i()},document.addEventListener("DOMContentLoaded",a,!1)):document.attachEvent&&(o=i,d=n.document,l=!1,h(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,s())})}function s(){l||(l=!0,o())}function h(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}s()}})(window);

30
public/iconfont/iconfont.json
View File

@ -1,30 +0,0 @@
{
"id": "4902724",
"name": "wh",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "17716099",
"name": "删除",
"font_class": "shanchu",
"unicode": "e601",
"unicode_decimal": 58881
},
{
"icon_id": "10352352",
"name": "组件",
"font_class": "zujian",
"unicode": "e61e",
"unicode_decimal": 58910
},
{
"icon_id": "11121385",
"name": "文本框",
"font_class": "wenbenkuang",
"unicode": "e629",
"unicode_decimal": 58921
}
]
}

BIN
public/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
public/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
public/iconfont/iconfont.woff2
View File

Binary file not shown.

43
src/components/echarts/Charts.vue 100644
View File

@ -0,0 +1,43 @@
<script lang="ts" setup>
import { useEcharts } from '@/components/echarts/index.ts'
import type { EChartsType } from 'echarts/core'
const props = withDefaults(defineProps<{
reflush?: boolean
option: Echarts.Option
}>(), {
reflush: true
})
const container = ref<HTMLElement | null>(null)
let ins: EChartsType | null = null
onMounted(() => {
if (props.reflush) {
watch(
() => props.option,
(newVal, _) => {
ins?.setOption(newVal)
},
{deep: true})
}
ins = useEcharts(container.value!)
ins.setOption(props.option)
})
onBeforeUnmount(() => {
ins?.dispose()
})
defineExpose({
getIns() {
return ins!
}
})
</script>
<template>
<div ref="container"></div>
</template>

39
src/components/echarts/echarts.d.ts vendored 100644
View File

@ -0,0 +1,39 @@
export {}
declare global {
namespace Echarts {
import type {
// 系列类型的定义后缀都为 SeriesOption
BarSeriesOption,
LineSeriesOption
} from 'echarts/charts'
import type {
// 组件类型的定义后缀都为 ComponentOption
TitleComponentOption,
TooltipComponentOption,
GridComponentOption,
DatasetComponentOption,
LegendComponentOption,
AriaComponentOption
} from 'echarts/components'
import type {
ComposeOption,
} from 'echarts/core'
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type Option = ComposeOption<
| BarSeriesOption
| LineSeriesOption
| TitleComponentOption
| TooltipComponentOption
| GridComponentOption
| DatasetComponentOption
| LegendComponentOption
| AriaComponentOption
>;
}
}

32
src/components/echarts/index.ts 100644
View File

@ -0,0 +1,32 @@
import * as echarts from 'echarts/core'
import { BarChart, } from 'echarts/charts'
import {
AriaComponent,
GridComponent,
LegendComponent,
TooltipComponent
} from 'echarts/components'
import { SVGRenderer } from 'echarts/renderers'
import type { App } from 'vue'
const install = (_: App): void => {
echarts.use([
TooltipComponent,
GridComponent,
BarChart,
SVGRenderer,
LegendComponent,
AriaComponent
])
}
export default {install}
export function useEcharts(el: HTMLElement | string) {
if (typeof el === 'string') {
el = document.getElementById(el) as HTMLElement
}
return echarts.init(el)
}

24
src/components/iconfont/Iconfont.vue 100644
View File

@ -0,0 +1,24 @@
<script lang="ts" setup>
defineOptions({
inheritAttrs: false,
})
withDefaults(defineProps<{
name: IconfontTypes.name
wrapper?: boolean
className?: string
}>(), {
wrapper: false
})
</script>
<template>
<div v-if="wrapper" class="iconfont-wrapper">
<i :class="['icon-'+name, className]" class="iconfont"></i>
</div>
<i v-else :class="['icon-'+name, className]" class="iconfont"></i>
</template>
<style lang="stylus" scoped>
</style>

20
src/components/iconfont/iconfont.d.ts vendored 100644
View File

@ -0,0 +1,20 @@
export {}
declare global {
namespace IconfontTypes {
type name = 'menu'
| 'menu_rolepermiss'
| 'cog'
| 'user'
| 'bar-chart'
| 'arrow-up'
| 'exclamationcircle-f'
| 'check-circle-fill'
| 'map-pin'
| 'wenbenkuang'
| 'zujian'
| 'shanchu'
| 'mapmarker'
| 'xunhuan'
}
}

4
src/dts/components.d.ts vendored
View File

@ -7,9 +7,11 @@ export {}
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
Charts: typeof import('./../components/echarts/Charts.vue')['default']
Dialog: typeof import('./../components/dialog/Dialog.vue')['default'] Dialog: typeof import('./../components/dialog/Dialog.vue')['default']
District: typeof import('./../components/district/District.vue')['default'] District: typeof import('./../components/district/District.vue')['default']
Funbar: typeof import('./../components/fun-bar/Funbar.vue')['default'] Funbar: typeof import('./../components/fun-bar/Funbar.vue')['default']
Iconfont: typeof import('./../components/iconfont/Iconfont.vue')['default']
IxAvatar: typeof import('@idux/components/avatar')['IxAvatar'] IxAvatar: typeof import('@idux/components/avatar')['IxAvatar']
IxBreadcrumb: typeof import('@idux/components/breadcrumb')['IxBreadcrumb'] IxBreadcrumb: typeof import('@idux/components/breadcrumb')['IxBreadcrumb']
IxBreadcrumbItem: typeof import('@idux/components/breadcrumb')['IxBreadcrumbItem'] IxBreadcrumbItem: typeof import('@idux/components/breadcrumb')['IxBreadcrumbItem']
@ -21,6 +23,7 @@ declare module 'vue' {
IxCol: typeof import('@idux/components/grid')['IxCol'] IxCol: typeof import('@idux/components/grid')['IxCol']
IxCollapse: typeof import('@idux/components/collapse')['IxCollapse'] IxCollapse: typeof import('@idux/components/collapse')['IxCollapse']
IxCollapsePanel: typeof import('@idux/components/collapse')['IxCollapsePanel'] IxCollapsePanel: typeof import('@idux/components/collapse')['IxCollapsePanel']
IxDatePicker: typeof import('@idux/components/date-picker')['IxDatePicker']
IxDivider: typeof import('@idux/components/divider')['IxDivider'] IxDivider: typeof import('@idux/components/divider')['IxDivider']
IxDrawer: typeof import('@idux/components/drawer')['IxDrawer'] IxDrawer: typeof import('@idux/components/drawer')['IxDrawer']
IxDropdown: typeof import('@idux/components/dropdown')['IxDropdown'] IxDropdown: typeof import('@idux/components/dropdown')['IxDropdown']
@ -49,6 +52,7 @@ declare module 'vue' {
IxSpace: typeof import('@idux/components/space')['IxSpace'] IxSpace: typeof import('@idux/components/space')['IxSpace']
IxTable: typeof import('@idux/components/table')['IxTable'] IxTable: typeof import('@idux/components/table')['IxTable']
IxTabs: typeof import('@idux/components/tabs')['IxTabs'] IxTabs: typeof import('@idux/components/tabs')['IxTabs']
IxTag: typeof import('@idux/components/tag')['IxTag']
IxTextarea: typeof import('@idux/components/textarea')['IxTextarea'] IxTextarea: typeof import('@idux/components/textarea')['IxTextarea']
IxTooltip: typeof import('@idux/components/tooltip')['IxTooltip'] IxTooltip: typeof import('@idux/components/tooltip')['IxTooltip']
IxTreeSelect: typeof import('@idux/components/tree-select')['IxTreeSelect'] IxTreeSelect: typeof import('@idux/components/tree-select')['IxTreeSelect']

2
src/main.ts
View File

@ -3,6 +3,7 @@ import '@/assets/styles/css/normalize.css'
import idux from '@/common/idux' import idux from '@/common/idux'
import '@/assets/styles/css/index.css' import '@/assets/styles/css/index.css'
import router from '@/common/router/index.ts' import router from '@/common/router/index.ts'
import echarts from '@/components/echarts/index.ts'
import { Settings } from 'luxon' import { Settings } from 'luxon'
import { createPinia } from 'pinia' import { createPinia } from 'pinia'
@ -16,6 +17,7 @@ createApp(App)
}) })
.use(createPinia().use(piniaPluginPersistedstate)) .use(createPinia().use(piniaPluginPersistedstate))
.use(router) .use(router)
.use(echarts)
.use(idux) .use(idux)
.mount('#app') .mount('#app')

291
src/pages/dispose-recode/DisposeRecode.vue
View File

@ -1,13 +1,292 @@
<script lang="ts" setup>
import { useFormGroup } from '@idux/cdk'
import { TableColumn } from '@idux/components/table'
import { TablePagination } from '@idux/components/table/src/types'
import Charts from '@/components/echarts/Charts.vue'
const chartOption = reactive<Echarts.Option>({
aria: {
enabled: true,
decal: {
show: true
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
show: true,
top: 0
},
grid: {
outerBounds: {
left: 0,
right: 0,
bottom: 0,
top: 0
}
},
xAxis: [
{
type: 'category',
data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
axisLine: {
show: true
},
type: 'value'
}
],
series: [
{
name: 'Direct1',
type: 'bar',
data: [ 10, 52, 200, 334, 390, 330, 220 ],
},
{
name: 'Direct2',
type: 'bar',
data: [ 10, 52, 200, 334, 390, 330, 220 ]
}
]
})
interface Data {
id: string
pointName: string
street: string
microdistrict: string
propertyManagement: string
statusTxt: string
status: 'ZhengChang' | 'FenZhengChang'
}
const formGroup = useFormGroup({})
const fullData: Data[] = []
for (let index = 0; index < 10; index++) {
fullData.push({
id: index + '',
pointName: `Edrward ${index}`,
street: `Edrward ${index}`,
microdistrict: `Edrward ${index}`,
propertyManagement: `Edrward ${index}`,
statusTxt: `Edrward ${index}`,
status: index % 2 === 0 ? 'ZhengChang' : 'FenZhengChang',
})
}
const data = ref(fullData)
const columns: TableColumn[] = [
{
title: '名称',
dataKey: 'pointName',
customCell: 'pointName'
},
{
title: '所属街道',
dataKey: 'street',
},
{
title: '所属小区',
dataKey: 'microdistrict',
},
{
title: '所属物业',
dataKey: 'propertyManagement'
},
{
title: '运营状态',
dataKey: 'statusTxt',
customCell: 'status',
},
{
title: '操作',
key: 'action',
customCell: 'action',
}
]
const pagination = reactive<TablePagination>({
pageIndex: 1,
pageSize: 10,
total: 100,
size: 'sm',
showTotal: true,
onChange(pageIndex: number, pageSize: number) {
console.log('------', pageIndex, pageSize)
pagination.pageIndex = pageIndex
pagination.pageSize = pageSize
}
})
</script>
<template> <template>
<div> <div class="dispose-recode">
处置记录 <div class="title">垃圾处置记录</div>
<div class="desc">管理和分析垃圾处置数据</div>
<IxCard class="graph-card">
<template #header>
<div class="graph-tool">
<div>垃圾处置量统计</div>
<IxDatePicker type="month"/>
</div>
</template>
<Charts :option="chartOption"/>
</IxCard>
<IxCard class="table-card">
<template #header>
<div class="table-tool">
<div>垃圾处置记录</div>
<IxForm :control="formGroup" class="search-form" layout="inline">
<IxFormItem messageTooltip>
<IxInput placeholder="请输入收纳点名称"/>
</IxFormItem>
<IxFormItem messageTooltip>
<IxInput placeholder="请输入收纳点名称"/>
</IxFormItem>
</IxForm>
<IxButton icon="download" mode="primary">导出</IxButton>
</div>
</template>
<IxTable :columns="columns" :dataSource="data" :pagination="pagination" autoHeight class="data-table" getKey="id">
<template #pointName="{record}">
<span style="color: #165DFF;border-radius: 100%;background-color: #165DFF1A;width: 2.25rem;height: 2.25rem;display: inline-flex;justify-content: center;align-items: center;margin-right: 0.5rem"><i class="iconfont icon-mapmarker" style="display: block"></i></span>
<span>{{ record.pointName }}</span>
</template>
<template #action>
<IxButton class="detail-btn" icon="eye" mode="text">查看</IxButton>
</template>
<template #status="{record}">
<IxTag v-if="record.status === 'ZhengChang'" status="success">{{ record.statusTxt }}</IxTag>
<IxTag v-else status="error">{{ record.statusTxt }}</IxTag>
</template>
</IxTable>
</IxCard>
</div> </div>
</template> </template>
<script lang="ts" setup>
</script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.dispose-recode {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.title {
font-size: 1.75rem;
font-weight bold
color #1F2937
}
.desc {
color #687280
margin-top 1rem
}
.graph-card {
padding 0 1rem
margin 1rem 0
flex 1
display flex
flex-direction column
.graph-tool {
display: flex;
justify-content: space-between;
align-items center
padding 1rem
border-bottom 1px solid #E5E7EB
& > div:nth-child(1) {
flex 9
color #1D2129
font-weight 600
font-size 1.25rem
}
& > :deep(.ix-date-picker):nth-child(2) {
flex 1
display flex
}
}
& > :deep(.ix-card-body) {
flex 1
width 100%
& > div:first-child {
height: 100%;
width 100%;
}
}
}
.table-card {
display flex
flex-direction column
flex 1
padding 1rem
.table-tool {
display: flex;
justify-content: space-between;
align-items center
padding 1rem
border-bottom 1px solid #E5E7EB
& > div:nth-child(1) {
flex 17
color #1D2129
font-weight 600
font-size 1.25rem
}
.search-form {
flex 6
:deep(.ix-form-item) {
flex 2
}
}
& > :deep(.ix-button ) {
flex 1
}
}
& > :deep(.ix-card-body) {
flex 1
padding 0
}
.data-table {
:deep(.ix-table-thead .ix-table-cell) {
color: #6B7280
background-color: #F9FAFB
font-weight 500
}
:deep(.ix-table-thead th:not(:last-child))::before {
width 0;
}
.detail-btn {
color var(--ix-button-primary-bg-color)
}
}
}
}
</style> </style>

28
src/pages/frame/ZsyFrame.vue
View File

@ -9,6 +9,9 @@
:type="type" :type="type"
class="zsy-frame" class="zsy-frame"
> >
<template #siderFooter>
<IxLayoutSiderTrigger/>
</template>
<template #headerExtra> <template #headerExtra>
<UserPanel/> <UserPanel/>
</template> </template>
@ -45,6 +48,7 @@ import {
MenuCategory MenuCategory
} from '@/common/app/contants.ts' } from '@/common/app/contants.ts'
import Nav from '@/common/router/nav.ts' import Nav from '@/common/router/nav.ts'
import Iconfont from '@/components/iconfont/Iconfont.vue'
const appSettingStore = useAppSettingStore() const appSettingStore = useAppSettingStore()
const logoImage = computed(() => { const logoImage = computed(() => {
@ -70,7 +74,11 @@ const menuTree = computed(() => {
pid: it.pid, pid: it.pid,
key: it.routeName, key: it.routeName,
label: it.title, label: it.title,
type: it.menuCategory === MenuCategory.Page ? 'item' : 'sub', // icon: it.icon,
icon: h(Iconfont, {className: 'ix-icon ixicon', name: it.icon as IconfontTypes.name}),
type: it.menuCategory === MenuCategory.Page ? 'item'
: it.menuCategory === MenuCategory.Group ? 'itemGroup'
: 'sub',
}))) as MenuData[] }))) as MenuData[]
}) })
const wholeTheme = ref('light') const wholeTheme = ref('light')
@ -83,6 +91,7 @@ const mergedTheme = computed(() => {
}) })
function openPageHandler(options: MenuClickOptions) { function openPageHandler(options: MenuClickOptions) {
if (options.type !== 'item') return
Nav.open({ Nav.open({
insId: options.key as string, insId: options.key as string,
routeName: options.key as string routeName: options.key as string
@ -92,11 +101,17 @@ function openPageHandler(options: MenuClickOptions) {
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.ixicon {
line-height: unset;
}
.zsy-frame { .zsy-frame {
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow hidden overflow hidden
:deep(.ix-layout-content) { :deep(.ix-layout-content) {
padding .5rem padding .5rem
} }
@ -138,11 +153,12 @@ function openPageHandler(options: MenuClickOptions) {
.zsy-frame-content { .zsy-frame-content {
width 100% width 100%
height 100% height 100%
background-color #F9FAFB
}
:deep(.ix-card-body) { .zsy-frame-content > :deep(.ix-card-body) {
height 100% height 100%
width 100% width 100%
overflow auto overflow auto
}
} }
</style> </style>

315
src/pages/tsp/Tsp.vue
View File

@ -1,59 +1,151 @@
<script lang="ts" setup> <script lang="ts" setup>
import { SelectData } from '@idux/components/select/src/types' import { SelectData } from '@idux/components/select/src/types'
import { useFormGroup } from '@idux/cdk' import { useFormGroup } from '@idux/cdk'
import { TableColumn } from '@idux/components/table'
import { TablePagination } from '@idux/components/table/src/types'
const dataSource: SelectData[] = [ const dataSource: SelectData[] = [
{key: 'ZhengChang', label: '正常运营'}, {key: 'ZhengChang', label: '正常运营'},
{key: 'FenZhengChang', label: '非正常运营'}, {key: 'FenZhengChang', label: '非正常运营'},
] ]
interface Data {
id: string
pointName: string
street: string
microdistrict: string
propertyManagement: string
statusTxt: string
status: 'ZhengChang' | 'FenZhengChang'
}
const formGroup = useFormGroup({}) const formGroup = useFormGroup({})
const fullData: Data[] = []
for (let index = 0; index < 10; index++) {
fullData.push({
id: index + '',
pointName: `Edrward ${index}`,
street: `Edrward ${index}`,
microdistrict: `Edrward ${index}`,
propertyManagement: `Edrward ${index}`,
statusTxt: `Edrward ${index}`,
status: index % 2 === 0 ? 'ZhengChang' : 'FenZhengChang',
})
}
const data = ref(fullData)
const columns: TableColumn[] = [
{
title: '名称',
dataKey: 'pointName',
customCell: 'pointName'
},
{
title: '所属街道',
dataKey: 'street',
},
{
title: '所属小区',
dataKey: 'microdistrict',
},
{
title: '所属物业',
dataKey: 'propertyManagement'
},
{
title: '运营状态',
dataKey: 'statusTxt',
customCell: 'status',
},
{
title: '操作',
key: 'action',
customCell: 'action',
}
]
const pagination = reactive<TablePagination>({
pageIndex: 1,
pageSize: 10,
total: 100,
size: 'sm',
showTotal: true,
onChange(pageIndex: number, pageSize: number) {
console.log('------', pageIndex, pageSize)
pagination.pageIndex = pageIndex
pagination.pageSize = pageSize
}
})
</script> </script>
<template> <template>
<div class="tsp"> <div class="tsp">
<h2 class="title text-[clamp(1.5rem,3vw,1.75rem)] font-bold text-gray-800">临时收纳点管理</h2> <div class="title">临时收纳点管理</div>
<p class="desc text-gray-500 mt-1">管理和监控所有临时垃圾收纳点的运营状态</p> <div class="desc">管理和监控所有临时垃圾收纳点的运营状态</div>
<IxSpace class="statistics-card" justify="space-between" size="1.5rem"> <IxSpace class="statistics-card" justify="space-between" size="1.5rem">
<IxCard> <IxCard>
<span>收纳点总数</span> <div>
<span>24</span> <div>收纳点总数</div>
<span>较上月增长 12%</span> <div>24</div>
<span>图标</span> <div><i class="iconfont icon-arrow-up"></i>较上月增长 12%</div>
</div>
<Iconfont name="map-pin" wrapper/>
</IxCard> </IxCard>
<IxCard> <IxCard>
<span>正常运营数量</span> <div>
<span>24</span> <div>正常运营数量</div>
<span>较上月增长 12%</span> <div>24</div>
<span>图标</span> <div><i class="iconfont icon-arrow-up"></i>较上月增长 8%</div>
</div>
<Iconfont name="check-circle-fill" wrapper/>
</IxCard> </IxCard>
<IxCard> <IxCard>
<span>正常运营数量</span> <div>
<span>24</span> <div>非正常运营数量</div>
<span>较上月增长 12%</span> <div>24</div>
<span>图标</span> <div><i class="iconfont icon-arrow-up"></i>较上月增长 2%</div>
</div>
<Iconfont name="exclamationcircle-f" wrapper/>
</IxCard> </IxCard>
</IxSpace> </IxSpace>
<IxCard> <IxCard class="table-card">
<template #header> <template #header>
<div class="table-tool"> <div class="table-tool">
<div>收纳点列表</div> <div>收纳点列表</div>
<IxForm :control="formGroup" class="demo-form" layout="inline"> <IxForm :control="formGroup" class="search-form" layout="inline">
<IxFormItem :span="8"> <IxFormItem messageTooltip>
<IxInput placeholder="请输入收纳点名称"/> <IxInput placeholder="请输入收纳点名称"/>
</IxFormItem> </IxFormItem>
<IxFormItem :span="8"> <IxFormItem messageTooltip>
<IxSelect :dataSource="dataSource"/> <IxSelect :dataSource="dataSource"/>
</IxFormItem> </IxFormItem>
<IxButton icon="plus" mode="primary" type="submit">添加收纳点</IxButton> <IxButton icon="plus" mode="primary" type="submit">添加收纳点</IxButton>
</IxForm> </IxForm>
</div> </div>
</template> </template>
<div>biaoge</div> <IxTable :columns="columns" :dataSource="data" :pagination="pagination" autoHeight class="data-table" getKey="id">
<template #pointName="{record}">
<Iconfont name="mapmarker" wrapper/>
<span>{{ record.pointName }}</span>
</template>
<template #action>
<IxButton class="video-btn" icon="eye" mode="text">查看监控</IxButton>
</template>
<template #status="{record}">
<IxTag v-if="record.status === 'ZhengChang'" status="success">{{ record.statusTxt }}</IxTag>
<IxTag v-else status="error">{{ record.statusTxt }}</IxTag>
</template>
</IxTable>
</IxCard> </IxCard>
</div> </div>
</template> </template>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.tsp { .tsp {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.title { .title {
font-size: 1.75rem; font-size: 1.75rem;
font-weight bold font-weight bold
@ -67,39 +159,194 @@ const formGroup = useFormGroup({})
.statistics-card { .statistics-card {
width 100%; width 100%;
margin 1rem 0
:deep(.ix-space-item) { & > :deep(.ix-space-item) {
flex 1 flex 1
.ix-card-body {
height 10rem
display flex
justify-content space-between
& > div:first-child {
display: flex;
flex-direction: column;
justify-content: space-between;
div:nth-child(1) {
color #6B7280
font-size 1.17rem
}
div:nth-child(2) {
color #1D2129
font-size 2.5rem
font-weight 700
}
div:nth-child(3) {
font-size 1rem
i {
margin-right 0.5rem
}
}
}
& > div:nth-child(2) i {
display: block
}
}
} }
:deep(.ix-card-body) {
height 10rem & > :deep(.ix-space-item:nth-child(1)) {
.ix-card-body {
& > div:nth-child(1) > div:nth-child(3) {
color: #00B42A
}
& > div:nth-child(2) {
color: #165DFF;
border-radius: 100%;
background-color: #165DFF1A;
width: 3.3rem;
height: 3.3rem;
display: flex;
justify-content: center;
align-items: center;
}
}
}
& > :deep(.ix-space-item:nth-child(2)) {
.ix-card-body {
& > div:nth-child(1) > div:nth-child(3) {
color: #00B42A
}
& > div:nth-child(2) {
color: #00B42A;
border-radius: 100%;
background-color: #00B42A1A;
width: 3.3rem;
height: 3.3rem;
display: flex;
justify-content: center;
align-items: center;
}
}
}
& > :deep(.ix-space-item:nth-child(3)) {
.ix-card-body {
& > div:nth-child(1) > div:nth-child(3) {
color: #F53F3F
}
& > div:nth-child(2) {
color: #F53F3F;
border-radius: 100%;
background-color: #F53F3F1A;
width: 3.3rem;
height: 3.3rem;
display: flex;
justify-content: center;
align-items: center;
}
}
} }
} }
.table-tool {
display: flex;
justify-content: space-between;
& > div:nth-child(1) { .table-card {
flex 2 display flex
} flex-direction column
flex 1
padding 0 1rem
& > form:nth-child(2) { .table-tool {
flex 1 display: flex;
} justify-content: space-between;
align-items center
padding 1rem
border-bottom 1px solid #E5E7EB
:deep(.ix-form-item) { & > div:nth-child(1) {
flex 1 flex 2
color #1D2129
font-weight 600
font-size 1.25rem
}
& > form:nth-child(2) {
flex 1
}
.search-form {
:deep(.ix-form-item) {
flex 2
}
:deep(.ix-button ) {
flex 1
}
}
} }
:deep(.ix-button ) { & > :deep(.ix-card-body) {
flex 1 flex 1
padding 0
}
.data-table {
:deep(.ix-table-thead .ix-table-cell) {
color: #6B7280
background-color: #F9FAFB
font-weight 500
}
:deep(.ix-table-thead th:not(:last-child))::before {
width 0;
}
.iconfont-wrapper {
color: #165DFF;
border-radius: 100%;
background-color: #165DFF1A;
width: 2.25rem;
height: 2.25rem;
display: inline-flex;
justify-content: center;
align-items: center;
margin-right: 0.5rem
i {
display: block
}
}
.video-btn {
color var(--ix-button-primary-bg-color)
}
} }
} }
} }
</style> </style>

6
vite.config.ts
View File

@ -15,6 +15,8 @@ import VueDevTools from 'vite-plugin-vue-devtools'
import processHtml from './plugin/html-process' import processHtml from './plugin/html-process'
import zipDist from './plugin/zip-dist' import zipDist from './plugin/zip-dist'
import { viteStaticCopy } from 'vite-plugin-static-copy' import { viteStaticCopy } from 'vite-plugin-static-copy'
import { fileWatcher } from './plugin/file-watcher'
import iconfontDts from './plugin/iconfont-dts'
let viteConfig: UserConfigFnObject = configEnv => { let viteConfig: UserConfigFnObject = configEnv => {
const env = loadEnv(configEnv.mode, process.cwd(), '') const env = loadEnv(configEnv.mode, process.cwd(), '')
@ -47,6 +49,10 @@ let viteConfig: UserConfigFnObject = configEnv => {
processHtml(env.VITE_APP_NAME), processHtml(env.VITE_APP_NAME),
zipDist(), zipDist(),
Icons(), Icons(),
fileWatcher({
file: './public/iconfont/ali/iconfont.json',
fn: iconfontDts('./src/components/iconfont/iconfont.d.ts'),
}),
viteStaticCopy({ viteStaticCopy({
targets: [ targets: [
{ {