@ -0,0 +1,19 @@ |
|||
{ |
|||
"presets": [ |
|||
"@babel/preset-react", |
|||
"@babel/preset-env" |
|||
|
|||
], |
|||
"plugins": [ |
|||
"@babel/plugin-proposal-class-properties", |
|||
"@babel/plugin-proposal-object-rest-spread", |
|||
["import", { |
|||
"libraryName": "antd", |
|||
"libraryDirectory": "es" |
|||
|
|||
}] |
|||
], |
|||
"env": { |
|||
"development": {} |
|||
} |
|||
} |
@ -0,0 +1,23 @@ |
|||
{ |
|||
"version": "0.2.0", |
|||
"configurations": [ |
|||
{ |
|||
"name": "Server", |
|||
"type": "node", |
|||
"request": "launch", |
|||
"program": "${workspaceRoot}/server.js", |
|||
"args": [ |
|||
"-u http://127.0.0.1:4000", |
|||
//阿里OSS |
|||
"--aliOssAccessKey LTAI5tNDfn7UhStYQcn3JBtw", |
|||
"--aliOssSecretKey rnoXtDWQA1djJ5Xqcdn1OSEol0lVyv", |
|||
"--aliOssBucket test-c371", |
|||
"--aliOssRegion oss-cn-hangzhou", |
|||
], |
|||
"outputCapture": "std", |
|||
"env": { |
|||
"NODE_ENV": "development" |
|||
} |
|||
} |
|||
] |
|||
} |
@ -0,0 +1,4 @@ |
|||
// 将设置放入此文件中以覆盖默认值和用户设置。 |
|||
{ |
|||
"editor.fontSize": 16, |
|||
} |
@ -0,0 +1,56 @@ |
|||
#FROM repository.anxinyun.cn/base-images/nodejs12:20.10.12.2 |
|||
FROM repository.anxinyun.cn/base-images/nodejs12:20.10.12.2 |
|||
COPY ./web/ /var/app |
|||
WORKDIR /var/app |
|||
EXPOSE 8080 |
|||
|
|||
RUN apk update && apk add --no-cache \ |
|||
sudo \ |
|||
curl \ |
|||
build-base \ |
|||
g++ \ |
|||
libpng \ |
|||
libpng-dev \ |
|||
jpeg-dev \ |
|||
pango-dev \ |
|||
cairo-dev \ |
|||
giflib-dev \ |
|||
python \ |
|||
; |
|||
RUN npm config set registry=https://nexus.ngaiot.com/repository/fs-npm/ |
|||
RUN npm cache clean -f |
|||
#RUN npm install -g node-gyp |
|||
RUN rm -rf package-lock.json |
|||
RUN npm install --registry https://nexus.ngaiot.com/repository/fs-npm/ |
|||
RUN npm run build |
|||
RUN rm -rf client/src |
|||
RUN rm -rf node_modules |
|||
RUN npm install --production --registry https://nexus.ngaiot.com/repository/fs-npm/ |
|||
#RUN npm cache clean -f && npm install --production --force --registry http://10.8.30.22:7000 |
|||
CMD ["-u", "http://localhost:8088"] |
|||
ENTRYPOINT [ "node", "server.js" ] |
|||
|
|||
# FROM registry.cn-hangzhou.aliyuncs.com/fs-devops/node:12-dev as builder |
|||
|
|||
# COPY . /var/app |
|||
|
|||
# WORKDIR /var/app |
|||
|
|||
# EXPOSE 8080 |
|||
|
|||
# RUN npm config set registry=http://10.8.30.22:7000 |
|||
# RUN echo "{\"time\":\"$BUILD_TIMESTAMP\",\"build\": \"$BUILD_NUMBER\",\"revision\": \"$SVN_REVISION_1\",\"URL\":\"$SVN_URL_1\"}" > version.json |
|||
# RUN npm cache clean -f |
|||
# RUN rm -rf package-lock.json |
|||
# RUN npm install --registry http://10.8.30.22:7000 |
|||
# RUN npm run build |
|||
# RUN rm -rf client/src |
|||
# RUN rm -rf node_modules |
|||
# RUN npm install --production --force --registry http://10.8.30.22:7000 |
|||
# FROM registry.cn-hangzhou.aliyuncs.com/fs-devops/node:12 |
|||
|
|||
# COPY --from=builder --chown=node /var/app /home/node/app |
|||
|
|||
# WORKDIR /home/node/app |
|||
|
|||
# CMD ["node", "server.js"] |
@ -0,0 +1,370 @@ |
|||
*{margin: 0;padding: 0;list-style: none;} |
|||
/* |
|||
KISSY CSS Reset |
|||
理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。 |
|||
2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。 |
|||
3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。 |
|||
特色:1. 适应中文;2. 基于最新主流浏览器。 |
|||
维护:玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com> |
|||
*/ |
|||
|
|||
/** 清除内外边距 **/ |
|||
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ |
|||
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ |
|||
pre, /* text formatting elements 文本格式元素 */ |
|||
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ |
|||
th, td /* table elements 表格元素 */ { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
/** 设置默认字体 **/ |
|||
body, |
|||
button, input, select, textarea /* for ie */ { |
|||
font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; |
|||
} |
|||
h1, h2, h3, h4, h5, h6 { font-size: 100%; } |
|||
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ |
|||
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ |
|||
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */ |
|||
|
|||
/** 重置列表元素 **/ |
|||
ul, ol { list-style: none; } |
|||
|
|||
/** 重置文本格式元素 **/ |
|||
a { text-decoration: none; } |
|||
a:hover { text-decoration: underline; } |
|||
|
|||
|
|||
/** 重置表单元素 **/ |
|||
legend { color: #000; } /* for ie6 */ |
|||
fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */ |
|||
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ |
|||
/* 注:optgroup 无法扶正 */ |
|||
|
|||
/** 重置表格元素 **/ |
|||
table { border-collapse: collapse; border-spacing: 0; } |
|||
|
|||
/* 清除浮动 */ |
|||
.ks-clear:after, .clear:after { |
|||
content: '\20'; |
|||
display: block; |
|||
height: 0; |
|||
clear: both; |
|||
} |
|||
.ks-clear, .clear { |
|||
*zoom: 1; |
|||
} |
|||
|
|||
.main { |
|||
padding: 30px 100px; |
|||
width: 960px; |
|||
margin: 0 auto; |
|||
} |
|||
.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} |
|||
|
|||
.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; |
|||
|
|||
} |
|||
|
|||
.icon_lists li{ |
|||
float:left; |
|||
width: 100px; |
|||
height:180px; |
|||
text-align: center; |
|||
list-style: none !important; |
|||
} |
|||
.icon_lists .icon{ |
|||
font-size: 42px; |
|||
line-height: 100px; |
|||
margin: 10px 0; |
|||
color:#333; |
|||
-webkit-transition: font-size 0.25s ease-out 0s; |
|||
-moz-transition: font-size 0.25s ease-out 0s; |
|||
transition: font-size 0.25s ease-out 0s; |
|||
|
|||
} |
|||
.icon_lists .icon:hover{ |
|||
font-size: 100px; |
|||
} |
|||
|
|||
|
|||
|
|||
.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, |
|||
.markdown pre { |
|||
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 pre { |
|||
border-radius: 6px; |
|||
background: #f7f7f7; |
|||
padding: 20px; |
|||
} |
|||
|
|||
.markdown pre code { |
|||
border: none; |
|||
background: #f7f7f7; |
|||
margin: 0; |
|||
} |
|||
|
|||
.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; |
|||
font-style: italic; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
pre{ |
|||
background: #fff; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
@ -0,0 +1,514 @@ |
|||
|
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"/> |
|||
<title>IconFont</title> |
|||
<link rel="stylesheet" href="demo.css"> |
|||
<link rel="stylesheet" href="iconfont.css"> |
|||
</head> |
|||
<body> |
|||
<div class="main markdown"> |
|||
<h1>IconFont 图标</h1> |
|||
<ul class="icon_lists clear"> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-liuliang"></i> |
|||
<div class="name">流量</div> |
|||
<div class="fontclass">.icon-liuliang</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-iconfontditie"></i> |
|||
<div class="name">轻轨</div> |
|||
<div class="fontclass">.icon-iconfontditie</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-fengsu3"></i> |
|||
<div class="name">风速3</div> |
|||
<div class="fontclass">.icon-fengsu3</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-calendar"></i> |
|||
<div class="name">calendar</div> |
|||
<div class="fontclass">.icon-calendar</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-box"></i> |
|||
<div class="name">box</div> |
|||
<div class="fontclass">.icon-box</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shenheshibai"></i> |
|||
<div class="name">审核失败</div> |
|||
<div class="fontclass">.icon-shenheshibai</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-slope"></i> |
|||
<div class="name">边坡</div> |
|||
<div class="fontclass">.icon-slope</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-icon2"></i> |
|||
<div class="name">公路</div> |
|||
<div class="fontclass">.icon-icon2</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-gnsscaidian"></i> |
|||
<div class="name">GNSS采点</div> |
|||
<div class="fontclass">.icon-gnsscaidian</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-chuanganqishebei"></i> |
|||
<div class="name">传感器设备</div> |
|||
<div class="fontclass">.icon-chuanganqishebei</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-dianliuchuanganqi"></i> |
|||
<div class="name">电流传感器</div> |
|||
<div class="fontclass">.icon-dianliuchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-dianyachuanganqi"></i> |
|||
<div class="name">电压传感器</div> |
|||
<div class="fontclass">.icon-dianyachuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-wenduchuanganqi"></i> |
|||
<div class="name">温度传感器</div> |
|||
<div class="fontclass">.icon-wenduchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-xinjian"></i> |
|||
<div class="name">新建</div> |
|||
<div class="fontclass">.icon-xinjian</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-handong"></i> |
|||
<div class="name">涵洞</div> |
|||
<div class="fontclass">.icon-handong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-guanwanggongcheng"></i> |
|||
<div class="name">管网工程</div> |
|||
<div class="fontclass">.icon-guanwanggongcheng</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shenhe"></i> |
|||
<div class="name">审核</div> |
|||
<div class="fontclass">.icon-shenhe</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-zhihuishequ"></i> |
|||
<div class="name">智慧城市</div> |
|||
<div class="fontclass">.icon-zhihuishequ</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-bianpoweiyi"></i> |
|||
<div class="name">边坡位移</div> |
|||
<div class="fontclass">.icon-bianpoweiyi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-jianzhu"></i> |
|||
<div class="name">建筑</div> |
|||
<div class="fontclass">.icon-jianzhu</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-chuguan"></i> |
|||
<div class="name">储罐</div> |
|||
<div class="fontclass">.icon-chuguan</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-suidao"></i> |
|||
<div class="name">隧道</div> |
|||
<div class="fontclass">.icon-suidao</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-data"></i> |
|||
<div class="name">data</div> |
|||
<div class="fontclass">.icon-data</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-kuangshankaicai"></i> |
|||
<div class="name">矿山开采</div> |
|||
<div class="fontclass">.icon-kuangshankaicai</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-wangluo"></i> |
|||
<div class="name">网络</div> |
|||
<div class="fontclass">.icon-wangluo</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-jiankong"></i> |
|||
<div class="name">监控</div> |
|||
<div class="fontclass">.icon-jiankong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-dashuju"></i> |
|||
<div class="name">大数据</div> |
|||
<div class="fontclass">.icon-dashuju</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shuju"></i> |
|||
<div class="name">数据库</div> |
|||
<div class="fontclass">.icon-shuju</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shenhechenggong"></i> |
|||
<div class="name">审核成功</div> |
|||
<div class="fontclass">.icon-shenhechenggong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-jiankong1"></i> |
|||
<div class="name">监控</div> |
|||
<div class="fontclass">.icon-jiankong1</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-wangluoxitong"></i> |
|||
<div class="name">网络系统</div> |
|||
<div class="fontclass">.icon-wangluoxitong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-dingwei"></i> |
|||
<div class="name">定位</div> |
|||
<div class="fontclass">.icon-dingwei</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-xitongyunzhuanqingkuang"></i> |
|||
<div class="name">系统运转情况</div> |
|||
<div class="fontclass">.icon-xitongyunzhuanqingkuang</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-chakan"></i> |
|||
<div class="name">查看</div> |
|||
<div class="fontclass">.icon-chakan</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-lianjie"></i> |
|||
<div class="name">链接</div> |
|||
<div class="fontclass">.icon-lianjie</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shujudaochu-01"></i> |
|||
<div class="name">数据导出-01</div> |
|||
<div class="fontclass">.icon-shujudaochu-01</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-xitongzhuangtai"></i> |
|||
<div class="name">系统状态</div> |
|||
<div class="fontclass">.icon-xitongzhuangtai</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-xiaofeimingxidan"></i> |
|||
<div class="name">消费明细单</div> |
|||
<div class="fontclass">.icon-xiaofeimingxidan</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-SQLshenhe"></i> |
|||
<div class="name">SQL审核</div> |
|||
<div class="fontclass">.icon-SQLshenhe</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-aislogo"></i> |
|||
<div class="name">aislogo</div> |
|||
<div class="fontclass">.icon-aislogo</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-qiao"></i> |
|||
<div class="name">桥</div> |
|||
<div class="fontclass">.icon-qiao</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-tashiqizhongji"></i> |
|||
<div class="name">塔式起重机</div> |
|||
<div class="fontclass">.icon-tashiqizhongji</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-dwggeshi"></i> |
|||
<div class="name">dwg格式</div> |
|||
<div class="fontclass">.icon-dwggeshi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-luyouqi"></i> |
|||
<div class="name">路由器</div> |
|||
<div class="fontclass">.icon-luyouqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-anzhuangshigong-xianxing"></i> |
|||
<div class="name">244安装、施工-线性</div> |
|||
<div class="fontclass">.icon-anzhuangshigong-xianxing</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shaixuanguolv"></i> |
|||
<div class="name">245筛选过滤</div> |
|||
<div class="fontclass">.icon-shaixuanguolv</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-anzhuangshigong"></i> |
|||
<div class="name">244安装、施工</div> |
|||
<div class="fontclass">.icon-anzhuangshigong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-tiaoxingtu-xianxing"></i> |
|||
<div class="name">408条形图-线性</div> |
|||
<div class="fontclass">.icon-tiaoxingtu-xianxing</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-zhexiantu-xianxing"></i> |
|||
<div class="name">409折线图-线性</div> |
|||
<div class="fontclass">.icon-zhexiantu-xianxing</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-tieta"></i> |
|||
<div class="name">铁塔</div> |
|||
<div class="fontclass">.icon-tieta</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-geshi_wendangtxt"></i> |
|||
<div class="name">800格式_文档txt</div> |
|||
<div class="fontclass">.icon-geshi_wendangtxt</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-geshi_wendangdoc"></i> |
|||
<div class="name">801格式_文档doc</div> |
|||
<div class="fontclass">.icon-geshi_wendangdoc</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-geshi_wendangpdf"></i> |
|||
<div class="name">807格式_文档pdf</div> |
|||
<div class="fontclass">.icon-geshi_wendangpdf</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-geshi_wendangxls"></i> |
|||
<div class="name">803格式_文档xls</div> |
|||
<div class="fontclass">.icon-geshi_wendangxls</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-geshi_tongyongwendang"></i> |
|||
<div class="name">819格式_通用文档</div> |
|||
<div class="fontclass">.icon-geshi_tongyongwendang</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-geshi_shipinmp"></i> |
|||
<div class="name">840格式_视频mp4</div> |
|||
<div class="fontclass">.icon-geshi_shipinmp</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-geshi_tupianjpg"></i> |
|||
<div class="name">860格式_图片jpg</div> |
|||
<div class="fontclass">.icon-geshi_tupianjpg</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-geshi_tupianpng"></i> |
|||
<div class="name">865格式_图片png</div> |
|||
<div class="fontclass">.icon-geshi_tupianpng</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-guangzhaochuanganqi"></i> |
|||
<div class="name">光照传感器</div> |
|||
<div class="fontclass">.icon-guangzhaochuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-building"></i> |
|||
<div class="name">建筑</div> |
|||
<div class="fontclass">.icon-building</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-yanwuchuanganqi"></i> |
|||
<div class="name">烟雾传感器</div> |
|||
<div class="fontclass">.icon-yanwuchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shizheng"></i> |
|||
<div class="name">市政</div> |
|||
<div class="fontclass">.icon-shizheng</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-chuanganqi"></i> |
|||
<div class="name">传感器</div> |
|||
<div class="fontclass">.icon-chuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-WSD"></i> |
|||
<div class="name">温湿度传感器</div> |
|||
<div class="fontclass">.icon-WSD</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-yalichuanganqi"></i> |
|||
<div class="name">压力传感器</div> |
|||
<div class="fontclass">.icon-yalichuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-yinglichuanganqi"></i> |
|||
<div class="name">应力传感器</div> |
|||
<div class="fontclass">.icon-yinglichuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-chenjiangchuanganqi"></i> |
|||
<div class="name">沉降传感器</div> |
|||
<div class="fontclass">.icon-chenjiangchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-yalichuanganqi1"></i> |
|||
<div class="name">压力传感器</div> |
|||
<div class="fontclass">.icon-yalichuanganqi1</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-YWC"></i> |
|||
<div class="name">液位传感器</div> |
|||
<div class="fontclass">.icon-YWC</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-computer"></i> |
|||
<div class="name">computer</div> |
|||
<div class="fontclass">.icon-computer</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-empty"></i> |
|||
<div class="name">empty</div> |
|||
<div class="fontclass">.icon-empty</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-offline"></i> |
|||
<div class="name">offline</div> |
|||
<div class="fontclass">.icon-offline</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-daba"></i> |
|||
<div class="name">大坝</div> |
|||
<div class="fontclass">.icon-daba</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shenbuweiyi"></i> |
|||
<div class="name">深部位移</div> |
|||
<div class="fontclass">.icon-shenbuweiyi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-maosuochuanganqi"></i> |
|||
<div class="name">锚索传感器</div> |
|||
<div class="fontclass">.icon-maosuochuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-yuliangchuanganqi"></i> |
|||
<div class="name">雨量传感器</div> |
|||
<div class="fontclass">.icon-yuliangchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-weiyiji"></i> |
|||
<div class="name">位移计</div> |
|||
<div class="fontclass">.icon-weiyiji</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-qixiangzhan_"></i> |
|||
<div class="name">气象站_1</div> |
|||
<div class="fontclass">.icon-qixiangzhan_</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc icon-shenjikeng"></i> |
|||
<div class="name">深基坑</div> |
|||
<div class="fontclass">.icon-shenjikeng</div> |
|||
</li> |
|||
|
|||
</ul> |
|||
|
|||
<h2 id="font-class-">font-class引用</h2> |
|||
<hr> |
|||
|
|||
<p>font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。</p> |
|||
<p>与unicode使用方式相比,具有如下特点:</p> |
|||
<ul> |
|||
<li>兼容性良好,支持ie8+,及所有现代浏览器。</li> |
|||
<li>相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。</li> |
|||
<li>因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。</li> |
|||
<li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li> |
|||
</ul> |
|||
<p>使用步骤如下:</p> |
|||
<h3 id="-fontclass-">第一步:引入项目下面生成的fontclass代码:</h3> |
|||
|
|||
|
|||
<pre><code class="lang-js hljs javascript"><span class="hljs-comment"><link rel="stylesheet" type="text/css" href="./iconfont.css"></span></code></pre> |
|||
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3> |
|||
<pre><code class="lang-css hljs"><<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">sc</span> <span class="hljs-selector-tag">icon-xxx</span>"></<span class="hljs-selector-tag">i</span>></code></pre> |
|||
<blockquote> |
|||
<p>"sc"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p> |
|||
</blockquote> |
|||
</div> |
|||
</body> |
|||
</html> |
@ -0,0 +1,695 @@ |
|||
|
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"/> |
|||
<title>IconFont</title> |
|||
<link rel="stylesheet" href="demo.css"> |
|||
<script src="iconfont.js"></script> |
|||
|
|||
<style type="text/css"> |
|||
.icon { |
|||
/* 通过设置 font-size 来改变图标大小 */ |
|||
width: 1em; height: 1em; |
|||
/* 图标和文字相邻时,垂直对齐 */ |
|||
vertical-align: -0.15em; |
|||
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
|||
fill: currentColor; |
|||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
|||
normalize.css 中也包含这行 */ |
|||
overflow: hidden; |
|||
} |
|||
|
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="main markdown"> |
|||
<h1>IconFont 图标</h1> |
|||
<ul class="icon_lists clear"> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-liuliang"></use> |
|||
</svg> |
|||
<div class="name">流量</div> |
|||
<div class="fontclass">#icon-liuliang</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-iconfontditie"></use> |
|||
</svg> |
|||
<div class="name">轻轨</div> |
|||
<div class="fontclass">#icon-iconfontditie</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-fengsu3"></use> |
|||
</svg> |
|||
<div class="name">风速3</div> |
|||
<div class="fontclass">#icon-fengsu3</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-calendar"></use> |
|||
</svg> |
|||
<div class="name">calendar</div> |
|||
<div class="fontclass">#icon-calendar</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-box"></use> |
|||
</svg> |
|||
<div class="name">box</div> |
|||
<div class="fontclass">#icon-box</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-shenheshibai"></use> |
|||
</svg> |
|||
<div class="name">审核失败</div> |
|||
<div class="fontclass">#icon-shenheshibai</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-slope"></use> |
|||
</svg> |
|||
<div class="name">边坡</div> |
|||
<div class="fontclass">#icon-slope</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-icon2"></use> |
|||
</svg> |
|||
<div class="name">公路</div> |
|||
<div class="fontclass">#icon-icon2</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-gnsscaidian"></use> |
|||
</svg> |
|||
<div class="name">GNSS采点</div> |
|||
<div class="fontclass">#icon-gnsscaidian</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-chuanganqishebei"></use> |
|||
</svg> |
|||
<div class="name">传感器设备</div> |
|||
<div class="fontclass">#icon-chuanganqishebei</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-dianliuchuanganqi"></use> |
|||
</svg> |
|||
<div class="name">电流传感器</div> |
|||
<div class="fontclass">#icon-dianliuchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-dianyachuanganqi"></use> |
|||
</svg> |
|||
<div class="name">电压传感器</div> |
|||
<div class="fontclass">#icon-dianyachuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-wenduchuanganqi"></use> |
|||
</svg> |
|||
<div class="name">温度传感器</div> |
|||
<div class="fontclass">#icon-wenduchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-xinjian"></use> |
|||
</svg> |
|||
<div class="name">新建</div> |
|||
<div class="fontclass">#icon-xinjian</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-handong"></use> |
|||
</svg> |
|||
<div class="name">涵洞</div> |
|||
<div class="fontclass">#icon-handong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-guanwanggongcheng"></use> |
|||
</svg> |
|||
<div class="name">管网工程</div> |
|||
<div class="fontclass">#icon-guanwanggongcheng</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-shenhe"></use> |
|||
</svg> |
|||
<div class="name">审核</div> |
|||
<div class="fontclass">#icon-shenhe</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-zhihuishequ"></use> |
|||
</svg> |
|||
<div class="name">智慧城市</div> |
|||
<div class="fontclass">#icon-zhihuishequ</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-bianpoweiyi"></use> |
|||
</svg> |
|||
<div class="name">边坡位移</div> |
|||
<div class="fontclass">#icon-bianpoweiyi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-jianzhu"></use> |
|||
</svg> |
|||
<div class="name">建筑</div> |
|||
<div class="fontclass">#icon-jianzhu</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-chuguan"></use> |
|||
</svg> |
|||
<div class="name">储罐</div> |
|||
<div class="fontclass">#icon-chuguan</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-suidao"></use> |
|||
</svg> |
|||
<div class="name">隧道</div> |
|||
<div class="fontclass">#icon-suidao</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-data"></use> |
|||
</svg> |
|||
<div class="name">data</div> |
|||
<div class="fontclass">#icon-data</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-kuangshankaicai"></use> |
|||
</svg> |
|||
<div class="name">矿山开采</div> |
|||
<div class="fontclass">#icon-kuangshankaicai</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-wangluo"></use> |
|||
</svg> |
|||
<div class="name">网络</div> |
|||
<div class="fontclass">#icon-wangluo</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-jiankong"></use> |
|||
</svg> |
|||
<div class="name">监控</div> |
|||
<div class="fontclass">#icon-jiankong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-dashuju"></use> |
|||
</svg> |
|||
<div class="name">大数据</div> |
|||
<div class="fontclass">#icon-dashuju</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-shuju"></use> |
|||
</svg> |
|||
<div class="name">数据库</div> |
|||
<div class="fontclass">#icon-shuju</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-shenhechenggong"></use> |
|||
</svg> |
|||
<div class="name">审核成功</div> |
|||
<div class="fontclass">#icon-shenhechenggong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-jiankong1"></use> |
|||
</svg> |
|||
<div class="name">监控</div> |
|||
<div class="fontclass">#icon-jiankong1</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-wangluoxitong"></use> |
|||
</svg> |
|||
<div class="name">网络系统</div> |
|||
<div class="fontclass">#icon-wangluoxitong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-dingwei"></use> |
|||
</svg> |
|||
<div class="name">定位</div> |
|||
<div class="fontclass">#icon-dingwei</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-xitongyunzhuanqingkuang"></use> |
|||
</svg> |
|||
<div class="name">系统运转情况</div> |
|||
<div class="fontclass">#icon-xitongyunzhuanqingkuang</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-chakan"></use> |
|||
</svg> |
|||
<div class="name">查看</div> |
|||
<div class="fontclass">#icon-chakan</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-lianjie"></use> |
|||
</svg> |
|||
<div class="name">链接</div> |
|||
<div class="fontclass">#icon-lianjie</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-shujudaochu-01"></use> |
|||
</svg> |
|||
<div class="name">数据导出-01</div> |
|||
<div class="fontclass">#icon-shujudaochu-01</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-xitongzhuangtai"></use> |
|||
</svg> |
|||
<div class="name">系统状态</div> |
|||
<div class="fontclass">#icon-xitongzhuangtai</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-xiaofeimingxidan"></use> |
|||
</svg> |
|||
<div class="name">消费明细单</div> |
|||
<div class="fontclass">#icon-xiaofeimingxidan</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-SQLshenhe"></use> |
|||
</svg> |
|||
<div class="name">SQL审核</div> |
|||
<div class="fontclass">#icon-SQLshenhe</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-aislogo"></use> |
|||
</svg> |
|||
<div class="name">aislogo</div> |
|||
<div class="fontclass">#icon-aislogo</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-qiao"></use> |
|||
</svg> |
|||
<div class="name">桥</div> |
|||
<div class="fontclass">#icon-qiao</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-tashiqizhongji"></use> |
|||
</svg> |
|||
<div class="name">塔式起重机</div> |
|||
<div class="fontclass">#icon-tashiqizhongji</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-dwggeshi"></use> |
|||
</svg> |
|||
<div class="name">dwg格式</div> |
|||
<div class="fontclass">#icon-dwggeshi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-luyouqi"></use> |
|||
</svg> |
|||
<div class="name">路由器</div> |
|||
<div class="fontclass">#icon-luyouqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-anzhuangshigong-xianxing"></use> |
|||
</svg> |
|||
<div class="name">244安装、施工-线性</div> |
|||
<div class="fontclass">#icon-anzhuangshigong-xianxing</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-shaixuanguolv"></use> |
|||
</svg> |
|||
<div class="name">245筛选过滤</div> |
|||
<div class="fontclass">#icon-shaixuanguolv</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-anzhuangshigong"></use> |
|||
</svg> |
|||
<div class="name">244安装、施工</div> |
|||
<div class="fontclass">#icon-anzhuangshigong</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-tiaoxingtu-xianxing"></use> |
|||
</svg> |
|||
<div class="name">408条形图-线性</div> |
|||
<div class="fontclass">#icon-tiaoxingtu-xianxing</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-zhexiantu-xianxing"></use> |
|||
</svg> |
|||
<div class="name">409折线图-线性</div> |
|||
<div class="fontclass">#icon-zhexiantu-xianxing</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-tieta"></use> |
|||
</svg> |
|||
<div class="name">铁塔</div> |
|||
<div class="fontclass">#icon-tieta</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-geshi_wendangtxt"></use> |
|||
</svg> |
|||
<div class="name">800格式_文档txt</div> |
|||
<div class="fontclass">#icon-geshi_wendangtxt</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-geshi_wendangdoc"></use> |
|||
</svg> |
|||
<div class="name">801格式_文档doc</div> |
|||
<div class="fontclass">#icon-geshi_wendangdoc</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-geshi_wendangpdf"></use> |
|||
</svg> |
|||
<div class="name">807格式_文档pdf</div> |
|||
<div class="fontclass">#icon-geshi_wendangpdf</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-geshi_wendangxls"></use> |
|||
</svg> |
|||
<div class="name">803格式_文档xls</div> |
|||
<div class="fontclass">#icon-geshi_wendangxls</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-geshi_tongyongwendang"></use> |
|||
</svg> |
|||
<div class="name">819格式_通用文档</div> |
|||
<div class="fontclass">#icon-geshi_tongyongwendang</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-geshi_shipinmp"></use> |
|||
</svg> |
|||
<div class="name">840格式_视频mp4</div> |
|||
<div class="fontclass">#icon-geshi_shipinmp</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-geshi_tupianjpg"></use> |
|||
</svg> |
|||
<div class="name">860格式_图片jpg</div> |
|||
<div class="fontclass">#icon-geshi_tupianjpg</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-geshi_tupianpng"></use> |
|||
</svg> |
|||
<div class="name">865格式_图片png</div> |
|||
<div class="fontclass">#icon-geshi_tupianpng</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-guangzhaochuanganqi"></use> |
|||
</svg> |
|||
<div class="name">光照传感器</div> |
|||
<div class="fontclass">#icon-guangzhaochuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-building"></use> |
|||
</svg> |
|||
<div class="name">建筑</div> |
|||
<div class="fontclass">#icon-building</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-yanwuchuanganqi"></use> |
|||
</svg> |
|||
<div class="name">烟雾传感器</div> |
|||
<div class="fontclass">#icon-yanwuchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-shizheng"></use> |
|||
</svg> |
|||
<div class="name">市政</div> |
|||
<div class="fontclass">#icon-shizheng</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-chuanganqi"></use> |
|||
</svg> |
|||
<div class="name">传感器</div> |
|||
<div class="fontclass">#icon-chuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-WSD"></use> |
|||
</svg> |
|||
<div class="name">温湿度传感器</div> |
|||
<div class="fontclass">#icon-WSD</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-yalichuanganqi"></use> |
|||
</svg> |
|||
<div class="name">压力传感器</div> |
|||
<div class="fontclass">#icon-yalichuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-yinglichuanganqi"></use> |
|||
</svg> |
|||
<div class="name">应力传感器</div> |
|||
<div class="fontclass">#icon-yinglichuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-chenjiangchuanganqi"></use> |
|||
</svg> |
|||
<div class="name">沉降传感器</div> |
|||
<div class="fontclass">#icon-chenjiangchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-yalichuanganqi1"></use> |
|||
</svg> |
|||
<div class="name">压力传感器</div> |
|||
<div class="fontclass">#icon-yalichuanganqi1</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-YWC"></use> |
|||
</svg> |
|||
<div class="name">液位传感器</div> |
|||
<div class="fontclass">#icon-YWC</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-computer"></use> |
|||
</svg> |
|||
<div class="name">computer</div> |
|||
<div class="fontclass">#icon-computer</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-empty"></use> |
|||
</svg> |
|||
<div class="name">empty</div> |
|||
<div class="fontclass">#icon-empty</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-offline"></use> |
|||
</svg> |
|||
<div class="name">offline</div> |
|||
<div class="fontclass">#icon-offline</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-daba"></use> |
|||
</svg> |
|||
<div class="name">大坝</div> |
|||
<div class="fontclass">#icon-daba</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-shenbuweiyi"></use> |
|||
</svg> |
|||
<div class="name">深部位移</div> |
|||
<div class="fontclass">#icon-shenbuweiyi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-maosuochuanganqi"></use> |
|||
</svg> |
|||
<div class="name">锚索传感器</div> |
|||
<div class="fontclass">#icon-maosuochuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-yuliangchuanganqi"></use> |
|||
</svg> |
|||
<div class="name">雨量传感器</div> |
|||
<div class="fontclass">#icon-yuliangchuanganqi</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-weiyiji"></use> |
|||
</svg> |
|||
<div class="name">位移计</div> |
|||
<div class="fontclass">#icon-weiyiji</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-qixiangzhan_"></use> |
|||
</svg> |
|||
<div class="name">气象站_1</div> |
|||
<div class="fontclass">#icon-qixiangzhan_</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-shenjikeng"></use> |
|||
</svg> |
|||
<div class="name">深基坑</div> |
|||
<div class="fontclass">#icon-shenjikeng</div> |
|||
</li> |
|||
|
|||
</ul> |
|||
|
|||
|
|||
<h2 id="symbol-">symbol引用</h2> |
|||
<hr> |
|||
|
|||
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
|||
这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:</p> |
|||
<ul> |
|||
<li>支持多色图标了,不再受单色限制。</li> |
|||
<li>通过一些技巧,支持像字体那样,通过<code>font-size</code>,<code>color</code>来调整样式。</li> |
|||
<li>兼容性较差,支持 ie9+,及现代浏览器。</li> |
|||
<li>浏览器渲染svg的性能一般,还不如png。</li> |
|||
</ul> |
|||
<p>使用步骤如下:</p> |
|||
<h3 id="-symbol-">第一步:引入项目下面生成的symbol代码:</h3> |
|||
<pre><code class="lang-js hljs javascript"><span class="hljs-comment"><script src="./iconfont.js"></script></span></code></pre> |
|||
<h3 id="-css-">第二步:加入通用css代码(引入一次就行):</h3> |
|||
<pre><code class="lang-js hljs javascript"><style type=<span class="hljs-string">"text/css"</span>> |
|||
.icon { |
|||
width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em; |
|||
vertical-align: <span class="hljs-number">-0.15</span>em; |
|||
fill: currentColor; |
|||
overflow: hidden; |
|||
} |
|||
<<span class="hljs-regexp">/style></span></code></pre> |
|||
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3> |
|||
<pre><code class="lang-js hljs javascript"><svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>><span class="xml"><span class="hljs-tag"> |
|||
<<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>></span><span class="hljs-tag"></<span class="hljs-name">use</span>></span> |
|||
</span><<span class="hljs-regexp">/svg> |
|||
</span></code></pre> |
|||
</div> |
|||
</body> |
|||
</html> |
@ -0,0 +1,552 @@ |
|||
|
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"/> |
|||
<title>IconFont</title> |
|||
<link rel="stylesheet" href="demo.css"> |
|||
|
|||
<style type="text/css"> |
|||
|
|||
@font-face {font-family: "sc"; |
|||
src: url('iconfont.eot'); /* IE9*/ |
|||
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
|||
url('iconfont.woff') format('woff'), /* chrome, firefox */ |
|||
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ |
|||
url('iconfont.svg#sc') format('svg'); /* iOS 4.1- */ |
|||
} |
|||
|
|||
.sc { |
|||
font-family:"sc" !important; |
|||
font-size:16px; |
|||
font-style:normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-webkit-text-stroke-width: 0.2px; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="main markdown"> |
|||
<h1>IconFont 图标</h1> |
|||
<ul class="icon_lists clear"> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">流量</div> |
|||
<div class="code">&#xe602;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">轻轨</div> |
|||
<div class="code">&#xe66f;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">风速3</div> |
|||
<div class="code">&#xe635;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">calendar</div> |
|||
<div class="code">&#xe74a;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">box</div> |
|||
<div class="code">&#xe6cb;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">审核失败</div> |
|||
<div class="code">&#xe61d;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">边坡</div> |
|||
<div class="code">&#xe676;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">公路</div> |
|||
<div class="code">&#xe607;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">GNSS采点</div> |
|||
<div class="code">&#xe825;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">传感器设备</div> |
|||
<div class="code">&#xe612;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">电流传感器</div> |
|||
<div class="code">&#xe62c;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">电压传感器</div> |
|||
<div class="code">&#xe62f;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">温度传感器</div> |
|||
<div class="code">&#xe637;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">新建</div> |
|||
<div class="code">&#xe61f;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">涵洞</div> |
|||
<div class="code">&#xe89b;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">管网工程</div> |
|||
<div class="code">&#xe646;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">审核</div> |
|||
<div class="code">&#xe639;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">智慧城市</div> |
|||
<div class="code">&#xe600;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">边坡位移</div> |
|||
<div class="code">&#xe60a;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">建筑</div> |
|||
<div class="code">&#xe65f;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">储罐</div> |
|||
<div class="code">&#xe636;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">隧道</div> |
|||
<div class="code">&#xe61e;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">data</div> |
|||
<div class="code">&#xe757;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">矿山开采</div> |
|||
<div class="code">&#xe608;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">网络</div> |
|||
<div class="code">&#xe617;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">监控</div> |
|||
<div class="code">&#xe619;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">大数据</div> |
|||
<div class="code">&#xe61a;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">数据库</div> |
|||
<div class="code">&#xe61b;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">审核成功</div> |
|||
<div class="code">&#xe627;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">监控</div> |
|||
<div class="code">&#xe620;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">网络系统</div> |
|||
<div class="code">&#xe62e;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">定位</div> |
|||
<div class="code">&#xe630;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">系统运转情况</div> |
|||
<div class="code">&#xe631;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">查看</div> |
|||
<div class="code">&#xe63e;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">链接</div> |
|||
<div class="code">&#xe63f;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">数据导出-01</div> |
|||
<div class="code">&#xe640;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">系统状态</div> |
|||
<div class="code">&#xe642;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">消费明细单</div> |
|||
<div class="code">&#xe643;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">SQL审核</div> |
|||
<div class="code">&#xe645;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">aislogo</div> |
|||
<div class="code">&#xe648;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">桥</div> |
|||
<div class="code">&#xe715;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">塔式起重机</div> |
|||
<div class="code">&#xe615;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">dwg格式</div> |
|||
<div class="code">&#xe82b;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">路由器</div> |
|||
<div class="code">&#xe603;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">244安装、施工-线性</div> |
|||
<div class="code">&#xe8d6;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">245筛选过滤</div> |
|||
<div class="code">&#xe8d7;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">244安装、施工</div> |
|||
<div class="code">&#xe8d8;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">408条形图-线性</div> |
|||
<div class="code">&#xe904;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">409折线图-线性</div> |
|||
<div class="code">&#xe906;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">铁塔</div> |
|||
<div class="code">&#xe605;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">800格式_文档txt</div> |
|||
<div class="code">&#xe6b8;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">801格式_文档doc</div> |
|||
<div class="code">&#xe6b9;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">807格式_文档pdf</div> |
|||
<div class="code">&#xe6bc;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">803格式_文档xls</div> |
|||
<div class="code">&#xe6be;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">819格式_通用文档</div> |
|||
<div class="code">&#xe6c0;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">840格式_视频mp4</div> |
|||
<div class="code">&#xe6c8;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">860格式_图片jpg</div> |
|||
<div class="code">&#xe6cc;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">865格式_图片png</div> |
|||
<div class="code">&#xe6ce;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">光照传感器</div> |
|||
<div class="code">&#xe638;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">建筑</div> |
|||
<div class="code">&#xe61c;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">烟雾传感器</div> |
|||
<div class="code">&#xe610;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">市政</div> |
|||
<div class="code">&#xe6ca;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">传感器</div> |
|||
<div class="code">&#xe60f;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">温湿度传感器</div> |
|||
<div class="code">&#xe697;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">压力传感器</div> |
|||
<div class="code">&#xe60e;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">应力传感器</div> |
|||
<div class="code">&#xe611;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">沉降传感器</div> |
|||
<div class="code">&#xe601;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">压力传感器</div> |
|||
<div class="code">&#xe606;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">液位传感器</div> |
|||
<div class="code">&#xe699;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">computer</div> |
|||
<div class="code">&#xe6eb;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">empty</div> |
|||
<div class="code">&#xe6f7;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">offline</div> |
|||
<div class="code">&#xe712;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">大坝</div> |
|||
<div class="code">&#xe632;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">深部位移</div> |
|||
<div class="code">&#xe613;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">锚索传感器</div> |
|||
<div class="code">&#xe614;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">雨量传感器</div> |
|||
<div class="code">&#xe616;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">位移计</div> |
|||
<div class="code">&#xe618;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">气象站_1</div> |
|||
<div class="code">&#xe60d;</div> |
|||
</li> |
|||
|
|||
<li> |
|||
<i class="icon sc"></i> |
|||
<div class="name">深基坑</div> |
|||
<div class="code">&#xe62a;</div> |
|||
</li> |
|||
|
|||
</ul> |
|||
<h2 id="unicode-">unicode引用</h2> |
|||
<hr> |
|||
|
|||
<p>unicode是字体在网页端最原始的应用方式,特点是:</p> |
|||
<ul> |
|||
<li>兼容性最好,支持ie6+,及所有现代浏览器。</li> |
|||
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li> |
|||
<li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li> |
|||
</ul> |
|||
<blockquote> |
|||
<p>注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式</p> |
|||
</blockquote> |
|||
<p>unicode使用步骤如下:</p> |
|||
<h3 id="-font-face">第一步:拷贝项目下面生成的font-face</h3> |
|||
<pre><code class="lang-js hljs javascript">@font-face { |
|||
font-family: <span class="hljs-string">'sc'</span>; |
|||
src: url(<span class="hljs-string">'iconfont.eot'</span>); |
|||
src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>), |
|||
url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>), |
|||
url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>), |
|||
url(<span class="hljs-string">'iconfont.svg#sc'</span>) format(<span class="hljs-string">'svg'</span>); |
|||
} |
|||
</code></pre> |
|||
<h3 id="-iconfont-">第二步:定义使用iconfont的样式</h3> |
|||
<pre><code class="lang-js hljs javascript">.sc{ |
|||
font-family:<span class="hljs-string">"sc"</span> !important; |
|||
font-size:<span class="hljs-number">16</span>px;font-style:normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-webkit-text-stroke-width: <span class="hljs-number">0.2</span>px; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
</code></pre> |
|||
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3> |
|||
<pre><code class="lang-js hljs javascript"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"sc"</span>>&#x33;<span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></code></pre> |
|||
|
|||
<blockquote> |
|||
<p>"sc"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p> |
|||
</blockquote> |
|||
</div> |
|||
|
|||
|
|||
</body> |
|||
</html> |
After Width: | Height: | Size: 148 KiB |
@ -0,0 +1,521 @@ |
|||
|
|||
@font-face {font-family: "anticon"; |
|||
src: url('iconfont.eot?t=1494480257283'); /* IE9*/ |
|||
src: url('iconfont.eot?t=1494480257283#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
|||
url('iconfont.woff?t=1494480257283') format('woff'), /* chrome, firefox */ |
|||
url('iconfont.ttf?t=1494480257283') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ |
|||
url('iconfont.svg?t=1494480257283#anticon') format('svg'); /* iOS 4.1- */ |
|||
} |
|||
|
|||
.anticon { |
|||
font-family:"anticon" !important; |
|||
font-size:16px; |
|||
font-style:normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
.icon-stepforward:before { content: "\e600"; } |
|||
|
|||
.icon-stepbackward:before { content: "\e601"; } |
|||
|
|||
.icon-forward:before { content: "\e602"; } |
|||
|
|||
.icon-banckward:before { content: "\e603"; } |
|||
|
|||
.icon-caretright:before { content: "\e604"; } |
|||
|
|||
.icon-caretleft:before { content: "\e605"; } |
|||
|
|||
.icon-caretdown:before { content: "\e606"; } |
|||
|
|||
.icon-caretup:before { content: "\e607"; } |
|||
|
|||
.icon-rightcircle:before { content: "\e608"; } |
|||
|
|||
.icon-leftcircle:before { content: "\e609"; } |
|||
|
|||
.icon-upcircle:before { content: "\e60a"; } |
|||
|
|||
.icon-downcircle:before { content: "\e60b"; } |
|||
|
|||
.icon-rightcircleo:before { content: "\e60c"; } |
|||
|
|||
.icon-leftcircleo:before { content: "\e60d"; } |
|||
|
|||
.icon-upcircleo:before { content: "\e60e"; } |
|||
|
|||
.icon-downcircleo:before { content: "\e60f"; } |
|||
|
|||
.icon-verticleleft:before { content: "\e610"; } |
|||
|
|||
.icon-verticleright:before { content: "\e611"; } |
|||
|
|||
.icon-rollback:before { content: "\e612"; } |
|||
|
|||
.icon-retweet:before { content: "\e613"; } |
|||
|
|||
.icon-shrink:before { content: "\e614"; } |
|||
|
|||
.icon-arrowsalt:before { content: "\e615"; } |
|||
|
|||
.icon-doubleright:before { content: "\e617"; } |
|||
|
|||
.icon-doubleleft:before { content: "\e618"; } |
|||
|
|||
.icon-arrowdown:before { content: "\e619"; } |
|||
|
|||
.icon-arrowup:before { content: "\e61a"; } |
|||
|
|||
.icon-arrowright:before { content: "\e61b"; } |
|||
|
|||
.icon-arrowleft:before { content: "\e61c"; } |
|||
|
|||
.icon-down:before { content: "\e61d"; } |
|||
|
|||
.icon-up:before { content: "\e61e"; } |
|||
|
|||
.icon-right:before { content: "\e61f"; } |
|||
|
|||
.icon-left:before { content: "\e620"; } |
|||
|
|||
.icon-minussquareo:before { content: "\e621"; } |
|||
|
|||
.icon-minuscircle:before { content: "\e622"; } |
|||
|
|||
.icon-minuscircleo:before { content: "\e623"; } |
|||
|
|||
.icon-minus:before { content: "\e624"; } |
|||
|
|||
.icon-pluscircleo:before { content: "\e625"; } |
|||
|
|||
.icon-pluscircle:before { content: "\e626"; } |
|||
|
|||
.icon-plus:before { content: "\e627"; } |
|||
|
|||
.icon-infocirlce:before { content: "\e628"; } |
|||
|
|||
.icon-infocirlceo:before { content: "\e629"; } |
|||
|
|||
.icon-info:before { content: "\e62a"; } |
|||
|
|||
.icon-exclamation:before { content: "\e62b"; } |
|||
|
|||
.icon-exclamationcircle:before { content: "\e62c"; } |
|||
|
|||
.icon-exclamationcircleo:before { content: "\e62d"; } |
|||
|
|||
.icon-closecircle:before { content: "\e62e"; } |
|||
|
|||
.icon-closecircleo:before { content: "\e62f"; } |
|||
|
|||
.icon-checkcircle:before { content: "\e630"; } |
|||
|
|||
.icon-checkcircleo:before { content: "\e631"; } |
|||
|
|||
.icon-check:before { content: "\e632"; } |
|||
|
|||
.icon-close:before { content: "\e633"; } |
|||
|
|||
.icon-customerservice:before { content: "\e634"; } |
|||
|
|||
.icon-creditcard:before { content: "\e635"; } |
|||
|
|||
.icon-codesquareo:before { content: "\e636"; } |
|||
|
|||
.icon-book:before { content: "\e637"; } |
|||
|
|||
.icon-barschart:before { content: "\e638"; } |
|||
|
|||
.icon-bars:before { content: "\e639"; } |
|||
|
|||
.icon-question:before { content: "\e63a"; } |
|||
|
|||
.icon-questioncircle:before { content: "\e63b"; } |
|||
|
|||
.icon-questioncircleo:before { content: "\e63c"; } |
|||
|
|||
.icon-pause:before { content: "\e63d"; } |
|||
|
|||
.icon-pausecircle:before { content: "\e63e"; } |
|||
|
|||
.icon-pausecircleo:before { content: "\e63f"; } |
|||
|
|||
.icon-clockcircle:before { content: "\e640"; } |
|||
|
|||
.icon-clockcircleo:before { content: "\e641"; } |
|||
|
|||
.icon-swap:before { content: "\e642"; } |
|||
|
|||
.icon-swapleft:before { content: "\e643"; } |
|||
|
|||
.icon-swapright:before { content: "\e644"; } |
|||
|
|||
.icon-plussquareo:before { content: "\e645"; } |
|||
|
|||
.icon-frown:before { content: "\e646"; } |
|||
|
|||
.icon-menufold:before { content: "\e658"; } |
|||
|
|||
.icon-mail:before { content: "\e659"; } |
|||
|
|||
.icon-link:before { content: "\e65b"; } |
|||
|
|||
.icon-areachart:before { content: "\e65c"; } |
|||
|
|||
.icon-linechart:before { content: "\e65d"; } |
|||
|
|||
.icon-home:before { content: "\e65e"; } |
|||
|
|||
.icon-laptop:before { content: "\e65f"; } |
|||
|
|||
.icon-star:before { content: "\e660"; } |
|||
|
|||
.icon-staro:before { content: "\e661"; } |
|||
|
|||
.icon-filter:before { content: "\e663"; } |
|||
|
|||
.icon-meho:before { content: "\e666"; } |
|||
|
|||
.icon-meh:before { content: "\e667"; } |
|||
|
|||
.icon-shoppingcart:before { content: "\e668"; } |
|||
|
|||
.icon-save:before { content: "\e669"; } |
|||
|
|||
.icon-user:before { content: "\e66a"; } |
|||
|
|||
.icon-videocamera:before { content: "\e66b"; } |
|||
|
|||
.icon-totop:before { content: "\e66c"; } |
|||
|
|||
.icon-team:before { content: "\e66d"; } |
|||
|
|||
.icon-sharealt:before { content: "\e671"; } |
|||
|
|||
.icon-setting:before { content: "\e672"; } |
|||
|
|||
.icon-picture:before { content: "\e674"; } |
|||
|
|||
.icon-phone:before { content: "\e675"; } |
|||
|
|||
.icon-paperclip:before { content: "\e676"; } |
|||
|
|||
.icon-notification:before { content: "\e677"; } |
|||
|
|||
.icon-menuunfold:before { content: "\e679"; } |
|||
|
|||
.icon-inbox:before { content: "\e67a"; } |
|||
|
|||
.icon-lock:before { content: "\e67b"; } |
|||
|
|||
.icon-qrcode:before { content: "\e67c"; } |
|||
|
|||
.icon-tags:before { content: "\e67d"; } |
|||
|
|||
.icon-tagso:before { content: "\e67e"; } |
|||
|
|||
.icon-cloudo:before { content: "\e67f"; } |
|||
|
|||
.icon-cloud:before { content: "\e680"; } |
|||
|
|||
.icon-cloudupload:before { content: "\e681"; } |
|||
|
|||
.icon-clouddownload:before { content: "\e682"; } |
|||
|
|||
.icon-clouddownloado:before { content: "\e683"; } |
|||
|
|||
.icon-clouduploado:before { content: "\e684"; } |
|||
|
|||
.icon-enviroment:before { content: "\e685"; } |
|||
|
|||
.icon-enviromento:before { content: "\e686"; } |
|||
|
|||
.icon-eye:before { content: "\e687"; } |
|||
|
|||
.icon-eyeo:before { content: "\e688"; } |
|||
|
|||
.icon-camera:before { content: "\e689"; } |
|||
|
|||
.icon-camerao:before { content: "\e68a"; } |
|||
|
|||
.icon-windows:before { content: "\e68b"; } |
|||
|
|||
.icon-export2:before { content: "\e690"; } |
|||
|
|||
.icon-export:before { content: "\e691"; } |
|||
|
|||
.icon-circledowno:before { content: "\e693"; } |
|||
|
|||
.icon-circledown:before { content: "\e694"; } |
|||
|
|||
.icon-hdd:before { content: "\e69a"; } |
|||
|
|||
.icon-ie:before { content: "\e69b"; } |
|||
|
|||
.icon-delete:before { content: "\e69f"; } |
|||
|
|||
.icon-enter:before { content: "\e6a0"; } |
|||
|
|||
.icon-pushpino:before { content: "\e6a1"; } |
|||
|
|||
.icon-pushpin:before { content: "\e6a2"; } |
|||
|
|||
.icon-heart:before { content: "\e6a3"; } |
|||
|
|||
.icon-hearto:before { content: "\e6a4"; } |
|||
|
|||
.icon-smile-circle:before { content: "\e6a7"; } |
|||
|
|||
.icon-smileo:before { content: "\e6a8"; } |
|||
|
|||
.icon-frowno:before { content: "\e6a9"; } |
|||
|
|||
.icon-calculator:before { content: "\e6aa"; } |
|||
|
|||
.icon-chrome:before { content: "\e6ac"; } |
|||
|
|||
.icon-github:before { content: "\e6ad"; } |
|||
|
|||
.icon-iconfontdesktop:before { content: "\e6b4"; } |
|||
|
|||
.icon-caretcircleoup:before { content: "\e6b5"; } |
|||
|
|||
.icon-upload:before { content: "\e6b6"; } |
|||
|
|||
.icon-download:before { content: "\e6b7"; } |
|||
|
|||
.icon-piechart:before { content: "\e6b8"; } |
|||
|
|||
.icon-lock1:before { content: "\e6b9"; } |
|||
|
|||
.icon-unlock:before { content: "\e6ba"; } |
|||
|
|||
.icon-windowso:before { content: "\e6bc"; } |
|||
|
|||
.icon-dotchart:before { content: "\e6bd"; } |
|||
|
|||
.icon-barchart:before { content: "\e6be"; } |
|||
|
|||
.icon-codesquare:before { content: "\e6bf"; } |
|||
|
|||
.icon-plussquare:before { content: "\e6c0"; } |
|||
|
|||
.icon-minussquare:before { content: "\e6c1"; } |
|||
|
|||
.icon-closesquare:before { content: "\e6c2"; } |
|||
|
|||
.icon-closesquareo:before { content: "\e6c3"; } |
|||
|
|||
.icon-checksquare:before { content: "\e6c4"; } |
|||
|
|||
.icon-checksquareo:before { content: "\e6c5"; } |
|||
|
|||
.icon-fastbackward:before { content: "\e6c6"; } |
|||
|
|||
.icon-fastforward:before { content: "\e6c7"; } |
|||
|
|||
.icon-upsquare:before { content: "\e6c8"; } |
|||
|
|||
.icon-downsquare:before { content: "\e6c9"; } |
|||
|
|||
.icon-leftsquare:before { content: "\e6ca"; } |
|||
|
|||
.icon-rightsquare:before { content: "\e6cb"; } |
|||
|
|||
.icon-rightsquareo:before { content: "\e6cc"; } |
|||
|
|||
.icon-leftsquareo:before { content: "\e6cd"; } |
|||
|
|||
.icon-down-square-o:before { content: "\e6ce"; } |
|||
|
|||
.icon-up-square-o:before { content: "\e6cf"; } |
|||
|
|||
.icon-play:before { content: "\e6d0"; } |
|||
|
|||
.icon-playcircleo:before { content: "\e6d1"; } |
|||
|
|||
.icon-tag:before { content: "\e6d2"; } |
|||
|
|||
.icon-tago:before { content: "\e6d3"; } |
|||
|
|||
.icon-addfile:before { content: "\e910"; } |
|||
|
|||
.icon-folder1:before { content: "\e662"; } |
|||
|
|||
.icon-file1:before { content: "\e664"; } |
|||
|
|||
.icon-switcher:before { content: "\e913"; } |
|||
|
|||
.icon-addfolder:before { content: "\e914"; } |
|||
|
|||
.icon-folderopen:before { content: "\e699"; } |
|||
|
|||
.icon-search1:before { content: "\e670"; } |
|||
|
|||
.icon-ellipsis1:before { content: "\e647"; } |
|||
|
|||
.icon-calendar:before { content: "\e6bb"; } |
|||
|
|||
.icon-filetext1:before { content: "\e698"; } |
|||
|
|||
.icon-copy1:before { content: "\e648"; } |
|||
|
|||
.icon-jpgfile1:before { content: "\e69c"; } |
|||
|
|||
.icon-pdffile1:before { content: "\e6b3"; } |
|||
|
|||
.icon-exclefile1:before { content: "\e6b0"; } |
|||
|
|||
.icon-pptfile1:before { content: "\e6b1"; } |
|||
|
|||
.icon-unknowfile1:before { content: "\e6af"; } |
|||
|
|||
.icon-wordfile1:before { content: "\e6b2"; } |
|||
|
|||
.icon-dingding:before { content: "\e923"; } |
|||
|
|||
.icon-dingding-o:before { content: "\e925"; } |
|||
|
|||
.icon-mobile1:before { content: "\e678"; } |
|||
|
|||
.icon-tablet1:before { content: "\e66e"; } |
|||
|
|||
.icon-bells:before { content: "\e64e"; } |
|||
|
|||
.icon-disconnect:before { content: "\e64f"; } |
|||
|
|||
.icon-database:before { content: "\e650"; } |
|||
|
|||
.icon-barcode:before { content: "\e652"; } |
|||
|
|||
.icon-hourglass:before { content: "\e653"; } |
|||
|
|||
.icon-key:before { content: "\e654"; } |
|||
|
|||
.icon-flag:before { content: "\e655"; } |
|||
|
|||
.icon-layout:before { content: "\e656"; } |
|||
|
|||
.icon-printer:before { content: "\e673"; } |
|||
|
|||
.icon-USB:before { content: "\e6d7"; } |
|||
|
|||
.icon-skin:before { content: "\e6d8"; } |
|||
|
|||
.icon-tool:before { content: "\e6d9"; } |
|||
|
|||
.icon-car:before { content: "\e6dc"; } |
|||
|
|||
.icon-addusergroup:before { content: "\e6dd"; } |
|||
|
|||
.icon-carryout:before { content: "\e6df"; } |
|||
|
|||
.icon-deleteuser:before { content: "\e6e0"; } |
|||
|
|||
.icon-deleteusergroup:before { content: "\e6e1"; } |
|||
|
|||
.icon-man:before { content: "\e6e2"; } |
|||
|
|||
.icon-isv:before { content: "\e6e3"; } |
|||
|
|||
.icon-gift:before { content: "\e6e4"; } |
|||
|
|||
.icon-idcard:before { content: "\e6e5"; } |
|||
|
|||
.icon-medicinebox:before { content: "\e6e6"; } |
|||
|
|||
.icon-redenvelopes:before { content: "\e6e7"; } |
|||
|
|||
.icon-rest:before { content: "\e6e8"; } |
|||
|
|||
.icon-Safety:before { content: "\e6ea"; } |
|||
|
|||
.icon-wallet:before { content: "\e6eb"; } |
|||
|
|||
.icon-woman:before { content: "\e6ec"; } |
|||
|
|||
.icon-adduser:before { content: "\e6ed"; } |
|||
|
|||
.icon-bank:before { content: "\e6ee"; } |
|||
|
|||
.icon-Trophy:before { content: "\e6ef"; } |
|||
|
|||
.icon-loading1:before { content: "\e6ae"; } |
|||
|
|||
.icon-loading2:before { content: "\e64d"; } |
|||
|
|||
.icon-like2:before { content: "\e69d"; } |
|||
|
|||
.icon-dislike2:before { content: "\e69e"; } |
|||
|
|||
.icon-like1:before { content: "\e64c"; } |
|||
|
|||
.icon-dislike1:before { content: "\e64b"; } |
|||
|
|||
.icon-bulb1:before { content: "\e649"; } |
|||
|
|||
.icon-rocket1:before { content: "\e90f"; } |
|||
|
|||
.icon-select1:before { content: "\e64a"; } |
|||
|
|||
.icon-apple1:before { content: "\e68c"; } |
|||
|
|||
.icon-apple-o:before { content: "\e6d4"; } |
|||
|
|||
.icon-android1:before { content: "\e938"; } |
|||
|
|||
.icon-android:before { content: "\e68d"; } |
|||
|
|||
.icon-aliwangwang-o1:before { content: "\e68f"; } |
|||
|
|||
.icon-aliwangwang:before { content: "\e68e"; } |
|||
|
|||
.icon-pay-circle1:before { content: "\e6a5"; } |
|||
|
|||
.icon-pay-circle-o1:before { content: "\e6a6"; } |
|||
|
|||
.icon-poweroff:before { content: "\e6d5"; } |
|||
|
|||
.icon-trademark:before { content: "\e651"; } |
|||
|
|||
.icon-find:before { content: "\e6db"; } |
|||
|
|||
.icon-copyright:before { content: "\e6de"; } |
|||
|
|||
.icon-sound:before { content: "\e6e9"; } |
|||
|
|||
.icon-earth:before { content: "\e6f1"; } |
|||
|
|||
.icon-wifi:before { content: "\e6d6"; } |
|||
|
|||
.icon-sync:before { content: "\e6da"; } |
|||
|
|||
.icon-login:before { content: "\e657"; } |
|||
|
|||
.icon-logout:before { content: "\e65a"; } |
|||
|
|||
.icon-reload1:before { content: "\e616"; } |
|||
|
|||
.icon-message1:before { content: "\e6ab"; } |
|||
|
|||
.icon-shake:before { content: "\e94f"; } |
|||
|
|||
.icon-API:before { content: "\e951"; } |
|||
|
|||
.icon-appstore-o:before { content: "\e695"; } |
|||
|
|||
.icon-appstore1:before { content: "\e696"; } |
|||
|
|||
.icon-scan1:before { content: "\e697"; } |
|||
|
|||
.icon-exception1:before { content: "\e665"; } |
|||
|
|||
.icon-contacts:before { content: "\e6f0"; } |
|||
|
|||
.icon-solution1:before { content: "\e66f"; } |
|||
|
|||
.icon-fork:before { content: "\e6f2"; } |
|||
|
|||
.icon-edit1:before { content: "\e692"; } |
|||
|
After Width: | Height: | Size: 140 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 202 KiB |
After Width: | Height: | Size: 725 B |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 169 KiB |
After Width: | Height: | Size: 8.7 KiB |
After Width: | Height: | Size: 3.2 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 622 B |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.2 KiB |
After Width: | Height: | Size: 9.1 KiB |
After Width: | Height: | Size: 7.1 KiB |
After Width: | Height: | Size: 6.0 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 524 B |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 873 B |
After Width: | Height: | Size: 206 KiB |
After Width: | Height: | Size: 150 B |
After Width: | Height: | Size: 950 B |
After Width: | Height: | Size: 873 B |
After Width: | Height: | Size: 815 B |
After Width: | Height: | Size: 193 B |
After Width: | Height: | Size: 147 B |
After Width: | Height: | Size: 999 B |
After Width: | Height: | Size: 648 B |
After Width: | Height: | Size: 932 B |
After Width: | Height: | Size: 646 KiB |
After Width: | Height: | Size: 8.3 KiB |
After Width: | Height: | Size: 2.9 MiB |
After Width: | Height: | Size: 200 KiB |
After Width: | Height: | Size: 7.8 KiB |
After Width: | Height: | Size: 1.0 MiB |
After Width: | Height: | Size: 577 B |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 5.9 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 917 B |
After Width: | Height: | Size: 992 B |
@ -0,0 +1,43 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<link rel="shortcut icon" href="/assets/images/logo.png"> |
|||
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css"> |
|||
<script type="text/javascript"> |
|||
window._AMapSecurityConfig = { |
|||
securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d', |
|||
} |
|||
</script> |
|||
<script |
|||
src="https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.AutoComplete,AMap.PlaceSearch"></script> |
|||
<!-- <script src="https://webapi.amap.com/loca?v=2.0.0&key=00f9a29dedcdbd8befec3dfe0cef5003"></script> --> |
|||
</head> |
|||
<style> |
|||
@font-face { |
|||
font-family: YouSheBiaoTiHei; |
|||
src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: PingFangSC-Medium; |
|||
src: url("/assets/font_sc/PingFang SC Medium.ttf"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: PingFangSC-Regular; |
|||
src: url("/assets/font_sc/PingFang SC Regular.ttf"); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: D-DINExp-Italic; |
|||
src: url("/assets/font_sc/D-DINExp-Italic.otf"); |
|||
} |
|||
</style> |
|||
<body style="background: transparent"> |
|||
<div id='App'></div> |
|||
|
|||
</body> |
|||
|
|||
</html> |
@ -0,0 +1,50 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title></title> |
|||
<link rel="shortcut icon" href="/assets/images/logo.svg"> |
|||
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css"> |
|||
<script type="text/javascript"> |
|||
window._AMapSecurityConfig = { |
|||
securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d', |
|||
} |
|||
</script> |
|||
<script |
|||
src="https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.AutoComplete,AMap.PlaceSearch"></script> |
|||
<!-- <script src="https://webapi.amap.com/loca?v=2.0.0&key=00f9a29dedcdbd8befec3dfe0cef5003"></script> --> |
|||
</head> |
|||
<style> |
|||
@font-face { |
|||
font-family: YouSheBiaoTiHei; |
|||
src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf"); |
|||
} |
|||
@font-face { |
|||
font-family: PingFangSC-Medium; |
|||
src: url("/assets/font_sc/PingFang SC Medium.ttf"); |
|||
} |
|||
@font-face { |
|||
font-family: PingFangSC-Regular; |
|||
src: url("/assets/font_sc/PingFang SC Regular.ttf"); |
|||
} |
|||
@font-face { |
|||
font-family: D-DINExp-Italic; |
|||
src: url("/assets/font_sc/D-DINExp-Italic.otf"); |
|||
} |
|||
</style> |
|||
<body> |
|||
|
|||
<script> |
|||
window.less = { |
|||
async: false, |
|||
env: 'production' |
|||
}; |
|||
</script> |
|||
<div id='App'></div> |
|||
<script type="text/javascript" src="http://localhost:5801/client/build/vendor.js"></script> |
|||
<script type="text/javascript" src="http://localhost:5801/client/build/app.js"></script> |
|||
|
|||
</body> |
|||
|
|||
</html> |
@ -0,0 +1,19 @@ |
|||
/** |
|||
* User: liuxinyi/liu.xinyi@free-sun.com.cn |
|||
* Date: 2016/2/22 |
|||
* Time: 15:29 |
|||
* |
|||
*/ |
|||
'use strict'; |
|||
|
|||
const views = require('koa-view'); |
|||
const path = require('path'); |
|||
module.exports = { |
|||
entry: function (app, router, opt) { |
|||
app.use(views(__dirname)); |
|||
|
|||
router.get('(.*)', async function (ctx){ |
|||
await ctx.render(path.join(__dirname, './index')); |
|||
}); |
|||
} |
|||
}; |
@ -0,0 +1,32 @@ |
|||
'use strict'; |
|||
|
|||
import React, { useEffect } from 'react'; |
|||
import Layout from './layout'; |
|||
import Auth from './sections/auth'; |
|||
import Safetymanage from './sections/safetymanage'; |
|||
import ProjectRegime from './sections/projectRegime'; |
|||
import Organization from './sections/organization'; |
|||
import PatrolManage from './sections/patrolManage'; |
|||
import IssueHandle from './sections/issueHandle' |
|||
import Shouye from './sections/shouye'; |
|||
import DeviceManage from './sections/deviceManage'; |
|||
import ProjectBinding from './sections/projectBinding' |
|||
import AdvisoryNotice from './sections/advisoryNotice' |
|||
import { Func } from '$utils'; |
|||
const App = props => { |
|||
const { projectName } = props |
|||
|
|||
useEffect(() => { |
|||
document.title = projectName; |
|||
}, []) |
|||
|
|||
return ( |
|||
<Layout |
|||
title={projectName} |
|||
sections={[Auth, Shouye, ProjectRegime, Safetymanage, Organization, PatrolManage, IssueHandle, DeviceManage,ProjectBinding,AdvisoryNotice]} |
|||
/> |
|||
) |
|||
|
|||
} |
|||
|
|||
export default App; |
@ -0,0 +1,316 @@ |
|||
'use strict'; |
|||
|
|||
import React, { Component } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Upload, message, Modal, Card, Button } from 'antd'; |
|||
import moment from 'moment'; |
|||
import { PlusOutlined, UploadOutlined, CloseOutlined } from '@ant-design/icons'; |
|||
|
|||
class Uploads extends Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.ApiRoot = localStorage.getItem('tyApiRoot') |
|||
this.state = { |
|||
fileUploading: false, |
|||
fileList: [], |
|||
curPreviewPic: '', |
|||
delPicIng: false, |
|||
removeFilesList: [] |
|||
}; |
|||
} |
|||
|
|||
dealName = (uploaded) => { |
|||
let realName = uploaded.split('/')[2] |
|||
let x1 = realName.split('.') |
|||
let x2 = x1[0].split('_') |
|||
let showName = `${x2[0]}.${x1[1]}` |
|||
return showName |
|||
} |
|||
|
|||
// setFileList = (value) => {
|
|||
// let defaultFileList = [];
|
|||
// defaultFileList = value.map((u, index) => {
|
|||
// let fileUrl = `${this.ApiRoot}/${u.url}`;
|
|||
// return {
|
|||
// uid: -index - 1,
|
|||
// name: this.dealName(u.url),
|
|||
// status: 'done',
|
|||
// storageUrl: u.url,
|
|||
// url: fileUrl
|
|||
// };
|
|||
// });
|
|||
// onChange(defaultFileList)
|
|||
// this.setState({
|
|||
// fileList: defaultFileList
|
|||
// });
|
|||
// };
|
|||
|
|||
componentDidMount() { |
|||
const { value } = this.props; |
|||
if (value) { |
|||
this.setState(value); |
|||
} |
|||
} |
|||
|
|||
componentWillReceiveProps(np) { |
|||
const { dispatch, value: thisEditData, onChange } = this.props; |
|||
const { value: nextEditData } = np; |
|||
|
|||
const setFileList = () => { |
|||
let defaultFileList = []; |
|||
defaultFileList = nextEditData.map((u, index) => { |
|||
let fileUrl = `${this.ApiRoot}/${u.storageUrl}`; |
|||
return { |
|||
uid: -index - 1, |
|||
name: this.dealName(u.storageUrl), |
|||
status: 'done', |
|||
storageUrl: u.storageUrl, |
|||
url: fileUrl, |
|||
size: u.size || -1 |
|||
}; |
|||
}); |
|||
this.setState({ |
|||
fileList: defaultFileList |
|||
}); |
|||
}; |
|||
|
|||
if (nextEditData && nextEditData.length) { |
|||
if (!thisEditData || !this.state.fileList.length) { |
|||
setFileList(); |
|||
} else if (nextEditData.length != thisEditData.length) { |
|||
setFileList(); |
|||
} else { |
|||
let repeat = true; |
|||
for (let i = 0; i < thisEditData.length; i++) { |
|||
if (thisEditData[i] != nextEditData[i]) { |
|||
repeat = false; |
|||
break; |
|||
} |
|||
} |
|||
if (!repeat) { |
|||
setFileList(); |
|||
} |
|||
} |
|||
} |
|||
// else{
|
|||
// this.setState({
|
|||
// fileList:[],
|
|||
// })
|
|||
// }
|
|||
} |
|||
|
|||
render() { |
|||
const UploadPath = { |
|||
project: ['txt', 'dwg', 'doc', 'docx', 'xls', 'xlsx', 'pdf', 'png', 'jpg', 'rar', 'zip'], |
|||
report: ['doc', 'docx', 'xls', 'xlsx', 'pdf'], |
|||
data: ['txt', 'xls', 'xlsx'], |
|||
image: ['png', 'jpg', 'svg', 'jpeg'], |
|||
three: ['js'], |
|||
video: ['mp4'] |
|||
}; |
|||
/** |
|||
* uploadType 【string】 主要区别文件上传路径 以及类型 以 web/routes/attachment/index.js 中 UploadPath 的 key 值为准;默认 project; |
|||
* disabled 【boolean】 上传是否可用 |
|||
* maxFilesNum 【number】 最大上传数量 |
|||
* fileTypes 【array[string]】 可允许上传的文件类型; |
|||
* maxFileSize 【number】 单个文件最大大小 M |
|||
* listType 【antd】 upload 组件的属性 |
|||
* onChange 【function】 文件数量变化时候回调 返回文件 |
|||
* value 【array[obj]】 编辑数据 [{url:'xxx', [size:999]}] |
|||
* onStateChange 【function】 文件状态改变回调函数 上传中 return { uploading:true/false } |
|||
*/ |
|||
const { |
|||
uploadType, |
|||
disabled, |
|||
maxFilesNum, |
|||
fileTypes, |
|||
maxFileSize, |
|||
listType, |
|||
onChange, |
|||
value, |
|||
showUploadList, |
|||
onStateChange |
|||
} = this.props; |
|||
const { fileList, curPreviewPic, delPicIng, removeFilesList } = this.state; |
|||
const that = this; |
|||
let uploadType_ = uploadType || 'project'; |
|||
let maxFilesNum_ = maxFilesNum || 1; |
|||
let defaultFileTypes = fileTypes || UploadPath[uploadType_]; |
|||
const uploadProps = { |
|||
name: 'checkFile_', |
|||
multiple: false, |
|||
showUploadList: showUploadList || true, |
|||
action: `${this.ApiRoot}/attachments/${uploadType_}`, |
|||
listType: listType || 'text', |
|||
disabled: disabled, |
|||
beforeUpload: (file) => { |
|||
if (fileList.length >= maxFilesNum_) { |
|||
message.warning(`最多选择${maxFilesNum_}个文件上传`); |
|||
return false; |
|||
} |
|||
if (file.name.length > 60) { |
|||
message.warning(`文件名过长(大于60字符),请修改后上传`); |
|||
return false; |
|||
} |
|||
const extNames = file.name.split('.'); |
|||
var reg = /^[\.\s\u4e00-\u9fa5a-zA-Z0-9_-]{0,}$/; |
|||
if (!reg.exec(file.name)) { |
|||
message.warning(`文件名包含除字母、汉字、数字、中划线、下划线之外的字符,请修改后上传`); |
|||
return false; |
|||
} |
|||
let isDAE = false; |
|||
if (extNames.length > 0) { |
|||
let fileType = extNames[extNames.length - 1].toLowerCase(); |
|||
isDAE = defaultFileTypes.some((f) => f == fileType); |
|||
} |
|||
if (!isDAE) { |
|||
message.error(`只能上传 ${defaultFileTypes.join()} 格式的文件!`); |
|||
return false; |
|||
} |
|||
const isLt = file.size / 1024 / 1024 < (maxFileSize || 3); |
|||
if (!isLt) { |
|||
message.error(`文件必须小于${maxFileSize || 3}MB!`); |
|||
return false; |
|||
} |
|||
this.setState({ |
|||
fileUploading: true |
|||
}); |
|||
if (onStateChange) { |
|||
onStateChange({ uploading: true }); |
|||
} |
|||
}, |
|||
onChange(info) { |
|||
const status = info.file.status; |
|||
if (status === 'uploading') { |
|||
that.setState({ |
|||
fileList: info.fileList |
|||
}); |
|||
} |
|||
if (status === 'done') { |
|||
let { uploaded, url } = info.file.response; |
|||
let size = info.file.size; |
|||
let nextFileList = fileList; |
|||
nextFileList[nextFileList.length - 1] = { |
|||
uid: -moment().unix(), |
|||
name: that.dealName(uploaded), |
|||
status: 'done', |
|||
storageUrl: uploaded, |
|||
url: url, |
|||
size: size |
|||
}; |
|||
onChange(nextFileList); |
|||
that.setState({ |
|||
fileUploading: false, |
|||
fileList: nextFileList |
|||
}); |
|||
if (onStateChange) { |
|||
onStateChange({ uploading: false }); |
|||
} |
|||
} else if (status === 'error') { |
|||
that.setState({ |
|||
fileUploading: false |
|||
}); |
|||
message.error(`${info.file.name} 上传失败,请重试`); |
|||
if (onStateChange) { |
|||
onStateChange({ uploading: false }); |
|||
} |
|||
} |
|||
}, |
|||
onRemove(file) { |
|||
let nextFileList = []; |
|||
fileList.map((f, i) => { |
|||
if (f.uid != file.uid) { |
|||
nextFileList.push(f); |
|||
} |
|||
}); |
|||
let nextRemoveFiles = removeFilesList.concat([file.storageUrl]); |
|||
if (curPreviewPic == file.url) { |
|||
that.setState({ |
|||
curPreviewPic: '' |
|||
}); |
|||
} |
|||
onChange(nextFileList); |
|||
that.setState({ |
|||
fileList: nextFileList, |
|||
removeFilesList: nextRemoveFiles |
|||
}); |
|||
}, |
|||
onPreview(file) { |
|||
let filePostfix = file.url.split('.').pop(); |
|||
filePostfix = filePostfix.toLowerCase(); |
|||
if (UploadPath.image.some((img) => img == filePostfix)) { |
|||
that.setState({ |
|||
curPreviewPic: file.url |
|||
}); |
|||
} else { |
|||
message.warn('仅支持图片预览'); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
let fileList_ = fileList |
|||
// .map(f => {
|
|||
// if (f.storageUrl) {
|
|||
// let realName = f.storageUrl.split('/').pop()
|
|||
// if (f.name != realName) {
|
|||
// f.name = realName
|
|||
// }
|
|||
// }
|
|||
// return f
|
|||
// })
|
|||
|
|||
return ( |
|||
<div> |
|||
<Spin spinning={delPicIng}> |
|||
<Upload {...uploadProps} fileList={fileList_}> |
|||
{ |
|||
disabled ? ( |
|||
'' |
|||
) : |
|||
listType == 'picture-card' ? |
|||
( |
|||
fileList.length >= maxFilesNum_ ? null : ( |
|||
<div style={{}}> |
|||
<PlusOutlined /> |
|||
<div>上传图片</div> |
|||
</div> |
|||
) |
|||
) : ( |
|||
<Button disabled={fileList.length >= maxFilesNum_} icon={<UploadOutlined />}> 文件上传 </Button> |
|||
) |
|||
} |
|||
</Upload> |
|||
{ |
|||
curPreviewPic ? ( |
|||
<Card |
|||
bodyStyle={{ |
|||
padding: 8 |
|||
}} |
|||
> |
|||
<div style={{ marginBottom: 8 }} > |
|||
<span>文件预览</span> |
|||
<span |
|||
style={{ float: 'right' }} |
|||
onClick={() => { this.setState({ curPreviewPic: '' }); }} |
|||
> |
|||
<CloseOutlined style={{ fontSize: 20 }} /> |
|||
</span> |
|||
</div> |
|||
<img style={{ width: '100%' }} src={curPreviewPic}></img> |
|||
</Card> |
|||
) : '' |
|||
} |
|||
</Spin> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { auth } = state |
|||
return { |
|||
user: auth.user |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Uploads); |
@ -0,0 +1,390 @@ |
|||
'use strict'; |
|||
|
|||
import React, { Component } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Upload, message, Modal, Card, Button } from 'antd'; |
|||
import moment from 'moment'; |
|||
import { PlusOutlined, UploadOutlined, CloseOutlined } from '@ant-design/icons'; |
|||
|
|||
class Uploads extends Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.ApiRoot = localStorage.getItem('tyApiRoot') |
|||
this.qnDomain = localStorage.getItem('qnDomain'); |
|||
this.aliAdmin = localStorage.getItem('aliAdmin'); |
|||
this.state = { |
|||
fileUploading: false, |
|||
fileList: [], |
|||
curPreviewPic: '', |
|||
curPreviewVideo: '', |
|||
delPicIng: false, |
|||
removeFilesList: [] |
|||
}; |
|||
} |
|||
|
|||
dealName = (uploaded) => { |
|||
let realName = uploaded?.split('/')[2] |
|||
// let x1 = realName.split('.')
|
|||
// let postfix = x1.pop()
|
|||
// let allName = x1.join('.')
|
|||
// let x2 = allName.split('_')
|
|||
// let showName = `${x2[0]}.${postfix}`
|
|||
return realName |
|||
} |
|||
|
|||
// setFileList = (value) => {
|
|||
// let defaultFileList = [];
|
|||
// defaultFileList = value.map((u, index) => {
|
|||
// let fileUrl = `${this.ApiRoot}/${u.url}`;
|
|||
// return {
|
|||
// uid: -index - 1,
|
|||
// name: this.dealName(u.url),
|
|||
// status: 'done',
|
|||
// storageUrl: u.url,
|
|||
// url: fileUrl
|
|||
// };
|
|||
// });
|
|||
// onChange(defaultFileList)
|
|||
// this.setState({
|
|||
// fileList: defaultFileList
|
|||
// });
|
|||
// };
|
|||
|
|||
setFileList = (nextEditData, isQiniu, isAli) => { |
|||
let defaultFileList = []; |
|||
defaultFileList = nextEditData.map((u, index) => { |
|||
let fileUrl = |
|||
isQiniu ? `/_file-server/${u.storageUrl}` |
|||
: isAli ? `/_file-ali-server/${u.storageUrl}` |
|||
: `${this.ApiRoot}/${u.storageUrl}`; |
|||
|
|||
return { |
|||
uid: -index - 1, |
|||
name: this.dealName(u.storageUrl), |
|||
status: 'done', |
|||
storageUrl: u.storageUrl, |
|||
url: fileUrl, |
|||
size: u.size || -1 |
|||
}; |
|||
}); |
|||
this.setState({ |
|||
fileList: defaultFileList |
|||
}); |
|||
}; |
|||
|
|||
componentDidMount() { |
|||
const { value, defaultValue, isQiniu, isAli } = this.props; |
|||
if (defaultValue) { |
|||
this.setFileList(defaultValue, isQiniu, isAli) |
|||
} |
|||
} |
|||
|
|||
UNSAFE_componentWillReceiveProps(np) { |
|||
const { dispatch, value: thisEditData, onChange } = this.props; |
|||
const { value: nextEditData, isQiniu, isAli } = np; |
|||
// this.setFileList(nextEditData, isQiniu)
|
|||
// const setFileList = () => {
|
|||
// let defaultFileList = [];
|
|||
// defaultFileList = nextEditData.map((u, index) => {
|
|||
// let fileUrl = isQiniu ? `/_file-server/${u.storageUrl}` : `${this.ApiRoot}/${u.storageUrl}`;
|
|||
// return {
|
|||
// uid: -index - 1,
|
|||
// name: this.dealName(u.storageUrl),
|
|||
// status: 'done',
|
|||
// storageUrl: u.storageUrl,
|
|||
// url: fileUrl,
|
|||
// size: u.size || -1
|
|||
// };
|
|||
// });
|
|||
// this.setState({
|
|||
// fileList: defaultFileList
|
|||
// });
|
|||
// };
|
|||
if (nextEditData && nextEditData.length) { |
|||
if (!thisEditData || !this.state.fileList.length) { |
|||
this.setFileList(nextEditData, isQiniu, isAli); |
|||
} else if (nextEditData.length != thisEditData.length) { |
|||
this.setFileList(nextEditData, isQiniu, isAli); |
|||
} else { |
|||
let repeat = true; |
|||
for (let i = 0; i < thisEditData.length; i++) { |
|||
if (thisEditData[i] != nextEditData[i]) { |
|||
repeat = false; |
|||
break; |
|||
} |
|||
} |
|||
if (!repeat) { |
|||
this.setFileList(nextEditData, isQiniu, isAli); |
|||
} |
|||
} |
|||
} |
|||
// else{
|
|||
// this.setState({
|
|||
// fileList:[],
|
|||
// })
|
|||
// }
|
|||
} |
|||
|
|||
render() { |
|||
const UploadPath = { |
|||
project: ['txt', 'dwg', 'doc', 'docx', 'xls', 'xlsx', 'csv', 'pdf', 'pptx', 'png', 'jpg', 'svg', 'jpeg', 'rar', 'zip', 'jpeg', 'mp4'], |
|||
report: ['doc', 'docx', 'xls', 'xlsx', 'csv', 'pdf'], |
|||
data: ['txt', 'xls', 'xlsx', 'csv'], |
|||
image: ['png', 'jpg', 'svg', 'jpeg'], |
|||
three: ['js'], |
|||
video: ['mp4'] |
|||
}; |
|||
/** |
|||
* uploadType 【string】 主要区别文件上传路径 以及类型 以 web/routes/attachment/index.js 中 UploadPath 的 key 值为准;默认 project; |
|||
* disabled 【boolean】 上传是否可用 |
|||
* maxFilesNum 【number】 最大上传数量 |
|||
* fileTypes 【array[string]】 可允许上传的文件类型; |
|||
* maxFileSize 【number】 单个文件最大大小 M |
|||
* listType 【antd】 upload 组件的属性 |
|||
* onChange 【function】 文件数量变化时候回调 返回文件 |
|||
* value 【array[obj]】 编辑数据 [{url:'xxx', [size:999]}] |
|||
* onStateChange 【function】 文件状态改变回调函数 上传中 return { uploading:true/false } |
|||
*/ |
|||
const { |
|||
uploadType, |
|||
disabled, |
|||
maxFilesNum, |
|||
fileTypes, |
|||
maxFileSize, |
|||
listType, |
|||
onChange = () => { }, |
|||
value, |
|||
showUploadList, |
|||
onStateChange, |
|||
isQiniu, |
|||
isAli, |
|||
} = this.props; |
|||
const { fileList, curPreviewPic, curPreviewVideo, delPicIng, removeFilesList } = this.state; |
|||
const that = this; |
|||
let uploadType_ = uploadType || 'project'; |
|||
let maxFilesNum_ = maxFilesNum || 1; |
|||
let defaultFileTypes = fileTypes || UploadPath[uploadType_]; |
|||
// debugger
|
|||
const uploadProps = { |
|||
name: 'checkFile_', |
|||
multiple: false, |
|||
showUploadList: showUploadList || true, |
|||
action: |
|||
isQiniu ? `/_upload/attachments/${uploadType_}` |
|||
: isAli ? `/_upload/attachments/ali/${uploadType_}` |
|||
: `${this.ApiRoot}/attachments/${uploadType_}`, |
|||
listType: listType || 'text', |
|||
disabled: disabled, |
|||
beforeUpload: (file) => { |
|||
if (fileList.length >= maxFilesNum_) { |
|||
message.warning(`最多选择${maxFilesNum_}个文件上传`); |
|||
return false; |
|||
} |
|||
|
|||
if (file.name.length > 60) { |
|||
message.warning(`文件名过长(大于60字符),请修改后上传`); |
|||
return false; |
|||
} |
|||
const extNames = file.name.split('.'); |
|||
// var reg = /^[\.\s\u4e00-\u9fa5a-zA-Z0-9_-]{0,}$/;
|
|||
// if (!reg.exec(file.name)) {
|
|||
// message.warning(`文件名包含除字母、汉字、数字、中划线、下划线之外的字符,请修改后上传`);
|
|||
// return false;
|
|||
// }
|
|||
let isDAE = false; |
|||
if (extNames.length > 0) { |
|||
let fileType = extNames[extNames.length - 1].toLowerCase(); |
|||
isDAE = defaultFileTypes.some((f) => f == fileType); |
|||
} |
|||
if (!isDAE) { |
|||
message.error(`只能上传 ${defaultFileTypes.join()} 格式的文件!`); |
|||
return false; |
|||
} |
|||
const isLt = file.size / 1024 / 1024 < (maxFileSize || 3); |
|||
if (!isLt) { |
|||
message.error(`文件必须小于${maxFileSize || 3}MB!`); |
|||
return false; |
|||
} |
|||
this.setState({ |
|||
fileUploading: true |
|||
}); |
|||
if (onStateChange) { |
|||
onStateChange({ uploading: true }); |
|||
} |
|||
}, |
|||
onChange(info) { |
|||
const status = info.file.status; |
|||
if (status === 'uploading') { |
|||
that.setState({ |
|||
fileList: info.fileList |
|||
}); |
|||
} |
|||
if (status === 'done') { |
|||
let { uploaded, url } = info.file.response; |
|||
let size = info.file.size; |
|||
let nextFileList = fileList; |
|||
nextFileList[nextFileList.length - 1] = { |
|||
uid: -moment().unix(), |
|||
name: that.dealName(uploaded), |
|||
status: 'done', |
|||
storageUrl: uploaded, |
|||
url: |
|||
isQiniu ? '/_file-server/' + uploaded : |
|||
isAli ? `/_file-ali-server/${uploaded}` : |
|||
url, |
|||
size: size |
|||
}; |
|||
onChange(nextFileList); |
|||
that.setState({ |
|||
fileUploading: false, |
|||
fileList: nextFileList |
|||
}); |
|||
if (onStateChange) { |
|||
onStateChange({ uploading: false }); |
|||
} |
|||
} else if (status === 'error') { |
|||
that.setState({ |
|||
fileUploading: false |
|||
}); |
|||
message.error(`${info.file.name} 上传失败,请重试`); |
|||
if (onStateChange) { |
|||
onStateChange({ uploading: false }); |
|||
} |
|||
} |
|||
}, |
|||
onRemove(file) { |
|||
let nextFileList = []; |
|||
fileList.map((f, i) => { |
|||
if (f.uid != file.uid) { |
|||
nextFileList.push(f); |
|||
} |
|||
}); |
|||
let nextRemoveFiles = removeFilesList.concat([file.storageUrl]); |
|||
if (curPreviewPic == file.url) { |
|||
that.setState({ |
|||
curPreviewPic: '' |
|||
}); |
|||
} |
|||
if (curPreviewVideo == file.url) { |
|||
that.setState({ |
|||
curPreviewVideo: '' |
|||
}); |
|||
} |
|||
onChange(nextFileList); |
|||
that.setState({ |
|||
fileList: nextFileList, |
|||
removeFilesList: nextRemoveFiles |
|||
}); |
|||
}, |
|||
onPreview(file) { |
|||
let filePostfix = file.url.split('.').pop(); |
|||
filePostfix = filePostfix.toLowerCase(); |
|||
if (UploadPath.image.some((img) => img == filePostfix)) { |
|||
that.setState({ |
|||
curPreviewPic: file.url |
|||
}); |
|||
} else if (UploadPath.video.some((img) => img == filePostfix)) { |
|||
that.setState({ |
|||
curPreviewVideo: file.url |
|||
}); |
|||
} else { |
|||
//message.warn('仅支持图片预览');
|
|||
preview(file.storageUrl) |
|||
} |
|||
} |
|||
}; |
|||
|
|||
const preview = (url) => { |
|||
let link = isQiniu ? encodeURI(`${this.qnDomain}/${url}`) : |
|||
isAli ? encodeURI(`${this.aliAdmin}/${url}`) : '' |
|||
if (link) |
|||
if (url.indexOf("pdf") !== -1 || url.indexOf("csv") !== -1) { |
|||
window.open(link) |
|||
} else { |
|||
window.open(`https://view.officeapps.live.com/op/view.aspx?src=${link}`) |
|||
} |
|||
} |
|||
|
|||
let fileList_ = fileList |
|||
// .map(f => {
|
|||
// if (f.storageUrl) {
|
|||
// let realName = f.storageUrl.split('/').pop()
|
|||
// if (f.name != realName) {
|
|||
// f.name = realName
|
|||
// }
|
|||
// }
|
|||
// return f
|
|||
// })
|
|||
//下载文件
|
|||
const handleDownload = (file) => { |
|||
saveAs(file) |
|||
}; |
|||
const saveAs = (file) => { |
|||
const link = document.createElement('a'); |
|||
link.href = file.url; |
|||
link.download = file.name; |
|||
link.style.display = 'none'; |
|||
link.click(); |
|||
} |
|||
//自定义下载
|
|||
return ( |
|||
<div> |
|||
<Spin spinning={delPicIng}> |
|||
<Upload {...uploadProps} fileList={fileList_} showUploadList={{ showDownloadIcon: true }} onDownload={handleDownload}> |
|||
{ |
|||
disabled ? ( |
|||
'' |
|||
) : |
|||
listType == 'picture-card' ? |
|||
( |
|||
fileList.length >= maxFilesNum_ ? null : ( |
|||
<div style={{}}> |
|||
<PlusOutlined /> |
|||
<div>添加附件</div> |
|||
</div> |
|||
) |
|||
) : ( |
|||
<Button disabled={fileList.length >= maxFilesNum_} icon={<UploadOutlined />}> 文件上传 </Button> |
|||
) |
|||
} |
|||
</Upload> |
|||
{ |
|||
curPreviewPic ? ( |
|||
<Card bodyStyle={{ padding: 8 }}> |
|||
<div style={{ marginBottom: 8 }} > |
|||
<span>图片预览</span> |
|||
<span style={{ float: 'right' }} onClick={() => { this.setState({ curPreviewPic: '' }) }}> |
|||
<CloseOutlined style={{ fontSize: 20 }} /> |
|||
</span> |
|||
</div> |
|||
<img style={{ width: '100%' }} src={curPreviewPic} /> |
|||
</Card> |
|||
) : '' |
|||
} |
|||
{ |
|||
curPreviewVideo ? (<Card bodyStyle={{ padding: 8 }}> |
|||
<div style={{ marginBottom: 8 }} > |
|||
<span>视频预览</span> |
|||
<span style={{ float: 'right' }} onClick={() => { this.setState({ curPreviewVideo: '' }) }}> |
|||
<CloseOutlined style={{ fontSize: 20 }} /> |
|||
</span> |
|||
</div> |
|||
<video controls style={{ width: '100%' }}> |
|||
<source src={curPreviewVideo} type="video/mp4"></source> |
|||
</video> |
|||
</Card>) : '' |
|||
} |
|||
</Spin> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { auth } = state |
|||
return { |
|||
user: auth.user |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Uploads); |
@ -0,0 +1,683 @@ |
|||
/** |
|||
* Created by Xumeng 2020/04/22. |
|||
*/ |
|||
|
|||
import React, { useState, useEffect } from 'react'; |
|||
import PropTypes from 'prop-types'; |
|||
import { |
|||
Row, Col, Space, Button, message, notification, Form, Input, Tooltip, Menu, Dropdown, |
|||
} from 'antd'; |
|||
import moment from 'moment'; |
|||
import XLSX from 'xlsx'; |
|||
import { fromJS } from 'immutable'; |
|||
import { Request } from '@peace/utils'; |
|||
import FileSaver from 'file-saver'; |
|||
import './index.less'; |
|||
|
|||
// 通用前端导入导出组件 使用方法查看底部propTypes
|
|||
function ExportAndImport(props) { |
|||
const [form] = Form.useForm(); |
|||
const [exportLoading, setExportLoading] = useState(false); |
|||
const [importLoading, setImportLoading] = useState(false); |
|||
const { |
|||
importDataCallback, onImportSucess, handelData, importMethod = 'post', |
|||
} = props; |
|||
|
|||
useEffect(() => () => { |
|||
// 只有unmount 时调用
|
|||
notification.close('import-notification'); |
|||
}); |
|||
const importExcel = (file, type) => { |
|||
setImportLoading(true); |
|||
// 获取上传的文件对象
|
|||
const { files } = file.target; |
|||
// 判断xls、xlsx格式
|
|||
if (files[0].type.indexOf('sheet') > -1 || files[0].type.indexOf('ms-excel') > -1) { |
|||
// 通过FileReader对象读取文件
|
|||
const fileReader = new FileReader(); |
|||
fileReader.onload = (event) => { |
|||
try { |
|||
const { importRequest = true, importUrl, importQuery } = props; |
|||
if (importRequest && !importUrl) { |
|||
message.error('获取导入接口失败!'); |
|||
form.resetFields(); |
|||
return; |
|||
} |
|||
const { result } = event.target; |
|||
// 以二进制流方式读取得到整份excel表格对象
|
|||
const workbook = XLSX.read(result, { type: 'binary', cellDates: true }); |
|||
let data = []; // 存储获取到的数据
|
|||
// 遍历每张工作表进行读取(这里默认只读取第一张表)
|
|||
for (const sheet in workbook.Sheets) { |
|||
if (workbook.Sheets.hasOwnProperty(sheet)) { |
|||
// 利用 sheet_to_json 方法将 excel 转成 json 数据
|
|||
data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet])); |
|||
break; // 如果只取第一张表,就取消注释这行
|
|||
} |
|||
} |
|||
if (data.length > 10000) { |
|||
message.error('一次最多导入10000条数据,请分批导入!'); |
|||
form.resetFields(); |
|||
setImportLoading(false); |
|||
return; |
|||
} |
|||
if (importRequest) { |
|||
message.success('获取文件数据成功,开始处理导入...'); |
|||
const importData = handelData ? handelData(data) : data; |
|||
Request[importMethod](importUrl, { data: importData }, importQuery || {}).then((res) => { |
|||
message.success('导入数据成功'); |
|||
form.resetFields(); |
|||
notification.close('import-notification'); |
|||
setImportLoading(false); |
|||
onImportSucess && onImportSucess(); |
|||
}, (err) => { |
|||
if (err.status === 500) { |
|||
message.error('数据导入出错,导入失败'); |
|||
} else if (err.status === 400) { |
|||
message.error(err.body.message || '数据验证出错,请检查数据格式是否正确'); |
|||
} else { |
|||
message.error('导入失败'); |
|||
} |
|||
form.resetFields(); |
|||
setImportLoading(false); |
|||
}); |
|||
} else { |
|||
form.resetFields(); |
|||
setImportLoading(false); |
|||
importDataCallback && importDataCallback(data, type); |
|||
notification.close('import-notification'); |
|||
} |
|||
} catch (e) { |
|||
console.log(e); |
|||
// 这里可以抛出文件类型错误不正确的相关提示
|
|||
message.error('文件格式不正确!'); |
|||
setImportLoading(false); |
|||
form.resetFields(); |
|||
} |
|||
}; |
|||
// fileReader.onloadend = (event) => {
|
|||
// console.log(event)
|
|||
// }
|
|||
// 以二进制方式打开文件
|
|||
fileReader.readAsBinaryString(files[0]); |
|||
} else { |
|||
message.error('文件格式不正确!'); |
|||
form.resetFields(); |
|||
setImportLoading(false); |
|||
} |
|||
}; |
|||
|
|||
const loop = (data, keypath, values) => { // deal with array
|
|||
const dkey = keypath.slice(0, 1)[0]; |
|||
console.log(dkey); |
|||
if (dkey) { |
|||
const dvalue = data[dkey]; |
|||
const otherKeypath = keypath.slice(1); |
|||
if (Array.isArray(dvalue)) { |
|||
if (otherKeypath.length) { |
|||
const immutableData = fromJS(data); |
|||
for (let index = 0; index < dvalue.length; index++) { |
|||
const tmp = immutableData.getIn([dkey, index]).toJS(); |
|||
loop(tmp, otherKeypath, values); |
|||
} |
|||
} |
|||
} else { |
|||
values.push(dvalue); |
|||
} |
|||
} |
|||
return values; |
|||
}; |
|||
const getColumnData = (opts) => { |
|||
const { |
|||
data, keypath, render, spliter, rawdata, |
|||
} = opts; |
|||
let v = null; |
|||
const outer = data[keypath[0]]; |
|||
|
|||
if (Array.isArray(outer)) { |
|||
const values = loop(data, keypath, []); |
|||
v = rawdata ? values : values.join(spliter || ','); |
|||
} else { |
|||
v = fromJS(data).getIn(keypath); |
|||
} |
|||
// 处理render
|
|||
if (render && typeof render === 'function') { |
|||
v = render(outer, data); |
|||
} |
|||
return v; |
|||
}; |
|||
const getDataSource = (attrs, filterData) => { |
|||
// let token = JSON.parse(sessionStorage.getItem('user')).token;
|
|||
const dataSource = filterData.map((item) => { |
|||
const record = {}; |
|||
attrs.forEach((attr) => { |
|||
const { |
|||
key, dataIndex, render, child, |
|||
} = attr; |
|||
if (child) { |
|||
record[key] = getDataSource(child, item[key]); |
|||
} else { |
|||
const v = getColumnData({ |
|||
data: item, |
|||
keypath: dataIndex || [key], |
|||
render: render || null, |
|||
}); |
|||
record[key] = v; |
|||
} |
|||
}); |
|||
|
|||
return record; |
|||
}); |
|||
return dataSource; |
|||
}; |
|||
// 暂时只处理两层
|
|||
const getFlatData = (attrs, filterData, dataToAoa, deep = 0) => { |
|||
filterData.map((item) => { |
|||
let cur = dataToAoa[deep]; |
|||
if (!cur) { |
|||
cur = dataToAoa[deep] = []; |
|||
} |
|||
attrs.map((attr, index) => { |
|||
const { key, child } = attr; |
|||
if (child) { |
|||
if (Array.isArray(item[key])) { |
|||
// getFlatData(child,item[key],dataToAoa,deep)
|
|||
|
|||
item[key].map((s, i) => { |
|||
if (i == 0) { |
|||
child.map((c) => { |
|||
cur.push(s[c.key]); |
|||
}); |
|||
} else { |
|||
deep++; |
|||
const childCur = dataToAoa[deep] = []; |
|||
pushNull(childCur, index); |
|||
child.map((c) => { |
|||
childCur.push(s[c.key]); |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
} else { |
|||
cur.push(item[key]); |
|||
} |
|||
}); |
|||
deep++; |
|||
}); |
|||
}; |
|||
|
|||
const getHeader = (headers, excelHeader, deep, perOffset) => { |
|||
let offset = 0; |
|||
let cur = excelHeader[deep]; |
|||
if (!cur) { |
|||
cur = excelHeader[deep] = []; |
|||
} |
|||
pushNull(cur, perOffset - cur.length); |
|||
for (let i = 0; i < headers.length; i++) { |
|||
const head = headers[i]; |
|||
cur.push(head.name); |
|||
if (head.hasOwnProperty('child') && Array.isArray(head.child) && head.child.length > 0) { |
|||
const childOffset = getHeader(head.child, excelHeader, deep + 1, cur.length - 1); |
|||
pushNull(cur, childOffset - 1); |
|||
offset += childOffset; |
|||
} else { |
|||
offset++; |
|||
} |
|||
} |
|||
return offset; |
|||
}; |
|||
|
|||
const pushNull = (arr, count) => { |
|||
for (let i = 0; i < count; i++) { |
|||
arr.push(null); |
|||
} |
|||
}; |
|||
const fillNull = (arr) => { |
|||
const max = Math.max(...(arr.map((a) => a.length))); |
|||
arr.filter((e) => e.length < max).forEach((e) => pushNull(e, max - e.length)); |
|||
}; |
|||
const doMerges = (arr) => { |
|||
// 要么横向合并 要么纵向合并
|
|||
const deep = arr.length; |
|||
const merges = []; |
|||
for (let y = 0; y < deep; y++) { |
|||
// 先处理横向合并
|
|||
const row = arr[y]; |
|||
let colSpan = 0; |
|||
for (let x = 0; x < row.length; x++) { |
|||
if (row[x] === null) { |
|||
colSpan++; |
|||
if (((x + 1) === row.length) && (colSpan > 0 && x > colSpan)) { |
|||
merges.push({ s: { r: y, c: x - colSpan }, e: { r: y, c: x } }); |
|||
} |
|||
} else if (colSpan > 0 && x > colSpan) { |
|||
merges.push({ s: { r: y, c: x - colSpan - 1 }, e: { r: y, c: x - 1 } }); |
|||
colSpan = 0; |
|||
} else { |
|||
colSpan = 0; |
|||
} |
|||
} |
|||
} |
|||
// 再处理纵向合并
|
|||
const colLength = arr[0].length; |
|||
for (let x = 0; x < colLength; x++) { |
|||
let rowSpan = 0; |
|||
for (let y = 0; y < deep; y++) { |
|||
if (arr[y][x] != null) { |
|||
rowSpan = 0; |
|||
} else { |
|||
rowSpan++; |
|||
} |
|||
} |
|||
if (rowSpan > 0) { |
|||
merges.push({ s: { r: deep - rowSpan - 1, c: x }, e: { r: deep - 1, c: x } }); |
|||
} |
|||
} |
|||
return merges; |
|||
}; |
|||
// 内容暂只出了纵向合并
|
|||
const doContetMerges = (arr, headerLength) => { |
|||
const deep = arr.length; |
|||
const merges = []; |
|||
// 处理纵向合并
|
|||
const colLength = arr[0].length; |
|||
for (let x = 0; x < colLength; x++) { |
|||
let rowSpan = 0; |
|||
const mergY = 0; |
|||
for (let y = 0; y < deep; y++) { |
|||
if (rowSpan > 0) { |
|||
// 如果还有null 继续加
|
|||
if (arr[y][x] === null) { |
|||
rowSpan += 1; |
|||
} else { |
|||
// 不为null 增加merge
|
|||
merges.push({ s: { r: headerLength + (y - rowSpan - 1), c: x }, e: { r: headerLength + y - 1, c: x } }); |
|||
rowSpan = 0; |
|||
} |
|||
} else if (arr[y][x] === null) { |
|||
rowSpan += 1; |
|||
} |
|||
} |
|||
if (rowSpan > 0) { |
|||
merges.push({ s: { r: headerLength + (deep - rowSpan - 1), c: x }, e: { r: headerLength + deep - 1, c: x } }); |
|||
rowSpan = 0; |
|||
} |
|||
} |
|||
return merges; |
|||
}; |
|||
const exportMergeExcel = async () => { |
|||
setExportLoading(true); |
|||
const { |
|||
column, data, fileName, exportUrl, exportQuery, exportBody, requestType, header, showYearMouth, |
|||
} = props || {}; |
|||
|
|||
let resultData = []; |
|||
if (exportUrl) { |
|||
resultData = requestType == 'post' ? await Request.post(exportUrl, exportBody || {}, exportQuery || {}).then((data) => { |
|||
// 数据接口返回的结果 如果是对象 必须把返回数组放入rows
|
|||
if (typeof data === 'object' && data.rows) { |
|||
return data.rows; |
|||
} |
|||
return data; |
|||
}, (err) => { |
|||
message.error('获取数据失败,导出失败!'); |
|||
}) : await Request.get(exportUrl, exportQuery || {}).then((data) => { |
|||
if (typeof data === 'object' && data.rows) { |
|||
return data.rows; |
|||
} |
|||
return data; |
|||
}, (err) => { |
|||
message.error('获取数据失败,导出失败!'); |
|||
}); |
|||
if (!resultData) { |
|||
return; |
|||
} |
|||
} else { |
|||
resultData = data; |
|||
} |
|||
const excelHeader = []; |
|||
getHeader(column, excelHeader, 0, 0); |
|||
fillNull(excelHeader); |
|||
|
|||
// console.log(excelHeader);
|
|||
|
|||
const loopData = getDataSource(column, resultData); |
|||
// console.log(loopData)
|
|||
|
|||
const dataToAoa = []; |
|||
getFlatData(column, loopData, dataToAoa, 0); |
|||
fillNull(dataToAoa); |
|||
// console.log(dataToAoa);
|
|||
|
|||
const aoa = [].concat(excelHeader, dataToAoa); |
|||
// console.log(aoa)
|
|||
|
|||
const headerMerges = doMerges(excelHeader); |
|||
const contentMerages = doContetMerges(dataToAoa, excelHeader.length); |
|||
const merges = [].concat(headerMerges, contentMerages); |
|||
// console.log(contentMerages)
|
|||
|
|||
// let opts = {
|
|||
// defaultCellStyle: {
|
|||
// font: { name: "宋体", sz: 11, color: { auto: 1 } },
|
|||
// border: {
|
|||
// color: { auto: 1 }
|
|||
// },
|
|||
// alignment: {
|
|||
// /// 自动换行
|
|||
// wrapText: 1,
|
|||
// // 居中
|
|||
// horizontal: "center",
|
|||
// vertical: "center",
|
|||
// indent: 0
|
|||
// }
|
|||
// }
|
|||
// }
|
|||
const sheet = XLSX.utils.aoa_to_sheet(aoa); |
|||
// let newSheet = {};
|
|||
// for (let [key, value] of Object.entries(sheet)) {
|
|||
// if(key == '!ref'){
|
|||
// newSheet[key] = value
|
|||
// }else if(typeof value === 'object'){
|
|||
// newSheet[key] = {
|
|||
// ...value,
|
|||
// s: opts.defaultCellStyle
|
|||
// }
|
|||
// }
|
|||
// }
|
|||
const wpx = column.map((c) => ({ |
|||
wpx: Number.parseInt(c.wpx) ? Number.parseInt(c.wpx) : 100, |
|||
})); |
|||
sheet['!cols'] = wpx; |
|||
sheet['!merges'] = merges; |
|||
|
|||
// 构建 workbook 对象
|
|||
const workbook = XLSX.utils.book_new(); |
|||
|
|||
const time = moment().format('YYYY-MM-DD'); |
|||
|
|||
XLSX.utils.book_append_sheet(workbook, sheet, 'mySheet'); |
|||
// 导出 Excel
|
|||
XLSX.writeFile(workbook, fileName ? `${fileName}-${time}.xlsx` : '导出数据.xlsx'); |
|||
setExportLoading(false); |
|||
// message.success(`成功导出了 ${loopData.length || 0} 条数据`);
|
|||
}; |
|||
|
|||
const exportProExcel = async () => { |
|||
setExportLoading(true); |
|||
const { |
|||
column, data, fileName, exportUrl, exportQuery, exportBody, requestType, showYearMouth, |
|||
} = props || {}; |
|||
let resultData = []; |
|||
if (exportUrl) { |
|||
resultData = requestType == 'post' ? await Request.post(exportUrl, exportBody || {}, exportQuery || {}).then((data) => { |
|||
// 数据接口返回的结果 如果是对象 必须把返回数组放入rows
|
|||
if (typeof data === 'object') { |
|||
return data.data ? data.data : data.rows; |
|||
} |
|||
return data; |
|||
}, (err) => { |
|||
message.error('获取数据失败,导出失败!'); |
|||
}) : await Request.get(exportUrl, exportQuery || {}).then((data) => { |
|||
if (showYearMouth) { |
|||
|
|||
} |
|||
if (typeof data === 'object' && data.rows) { |
|||
return data.rows; |
|||
} |
|||
return data; |
|||
}, (err) => { |
|||
message.error('获取数据失败,导出失败!'); |
|||
}); |
|||
if (!resultData) { |
|||
return; |
|||
} |
|||
} else { |
|||
resultData = data; |
|||
} |
|||
|
|||
const loopData = getDataSource(column, resultData); |
|||
|
|||
let content = ''; |
|||
let header = '<tr>'; |
|||
// header += `<th><div>序号</div></th>`;
|
|||
column.map((colum) => { |
|||
header += `<th><div>${colum.name}</div></th>`; |
|||
}); |
|||
header += '</tr>'; |
|||
loopData.map((data) => { |
|||
content += '<tr>'; |
|||
column.map((c) => { |
|||
if (c.style) { |
|||
content += `<th style="${c.style}"><div>${data[c.dataIndex || c.key]}</div></th>`; |
|||
} else { |
|||
content += `<th><div>${data[c.dataIndex || c.key]}</div></th>`; |
|||
} |
|||
}); |
|||
content += '</tr>'; |
|||
}); |
|||
|
|||
const exportTable = `\uFEFF
|
|||
<table style='text-alagin:center' border="1"> |
|||
${header} |
|||
${content} |
|||
</table> |
|||
`;
|
|||
const time = moment().format('YYYY-MM-DD'); |
|||
const tempStrs = new Blob([exportTable], { type: 'text/xls' }); |
|||
FileSaver.saveAs(tempStrs, fileName ? `${fileName}-${time}.xls` : '导出数据.xls'); |
|||
setExportLoading(false); |
|||
// message.success(`成功导出了 ${loopData.length || 0} 条数据`);
|
|||
}; |
|||
|
|||
const exportExcel = async () => { |
|||
setExportLoading(true); |
|||
const { |
|||
column, data, fileName, exportUrl, exportQuery, exportBody, requestType, |
|||
} = props || {}; |
|||
const _headers = column |
|||
.map((item, i) => ({ key: item.key, title: item.name, position: String.fromCharCode(65 + i) + 1 })) |
|||
.reduce((prev, next) => ({ ...prev, [next.position]: { key: next.key, v: next.title } }), {}); |
|||
let resultData = []; |
|||
if (exportUrl) { |
|||
resultData = requestType == 'post' ? await Request.post(exportUrl, exportBody || {}, exportQuery || {}).then((data) => { |
|||
// 数据接口返回的结果 如果是对象 必须把返回数组放入rows
|
|||
|
|||
if (typeof data === 'object' && (data.rows || data.data)) { |
|||
return data.data ? data.data : data.rows; |
|||
} |
|||
return data; |
|||
}, (err) => { |
|||
message.error('获取数据失败,导出失败!'); |
|||
}) : await Request.get(exportUrl, exportQuery || {}).then((data) => { |
|||
if (typeof data === 'object' && data.rows) { |
|||
return data.rows; |
|||
} |
|||
return data; |
|||
}, (err) => { |
|||
message.error('获取数据失败,导出失败!'); |
|||
}); |
|||
if (!resultData) { |
|||
return; |
|||
} |
|||
} else { |
|||
resultData = data; |
|||
} |
|||
|
|||
const loopDate = getDataSource(column, resultData); |
|||
|
|||
const wpx = column.map((c) => ({ |
|||
wpx: Number.parseInt(c.wpx) ? Number.parseInt(c.wpx) : 100, |
|||
})); |
|||
if (!(loopDate.length > 0)) { |
|||
setExportLoading(false); |
|||
return; |
|||
} |
|||
const _data = loopDate |
|||
.map((item, i) => column.map((key, j) => ({ content: item[key.key], position: String.fromCharCode(65 + j) + (i + 2) }))) |
|||
// 对刚才的结果进行降维处理(二维数组变成一维数组)
|
|||
.reduce((prev, next) => prev.concat(next)) |
|||
// 转换成 worksheet 需要的结构
|
|||
.reduce((prev, next) => ({ ...prev, [next.position]: { v: next.content } }), {}); |
|||
|
|||
// 合并 column 和 data
|
|||
const output = { ..._headers, ..._data }; |
|||
// 获取所有单元格的位置
|
|||
const outputPos = Object.keys(output); |
|||
// 计算出范围 ,["A1",..., "H2"]
|
|||
const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`; |
|||
|
|||
// 构建 workbook 对象
|
|||
const workbook = { |
|||
SheetNames: ['mySheet'], |
|||
Sheets: { |
|||
mySheet: { |
|||
|
|||
...output, |
|||
'!ref': ref, |
|||
'!cols': wpx, |
|||
}, |
|||
}, |
|||
}; |
|||
const time = moment().format('YYYY-MM-DD'); |
|||
// 导出 Excel
|
|||
XLSX.writeFile(workbook, fileName ? `${fileName}-${time}.xlsx` : '导出数据.xlsx'); |
|||
setExportLoading(false); |
|||
// message.success(`成功导出了 ${loopDate.length || 0} 条数据`);
|
|||
}; |
|||
|
|||
const exportTemplete = async () => { |
|||
const { importTemColumn, importTemData, fileName } = props || {}; |
|||
const _headers = importTemColumn |
|||
.map((item, i) => { |
|||
let group = 0; // 用于处理Z1的时候,重计算AA1
|
|||
if (parseInt(i / 26) > group) { |
|||
group = parseInt(i / 26); |
|||
} |
|||
if (group > 0) { // AA1 BA1 CA1
|
|||
const position = String.fromCharCode(65 + (group - 1)); |
|||
return { key: item.key, title: item.name, position: position + String.fromCharCode(65 + (i % 26)) + 1 }; |
|||
} return { key: item.key, title: item.name, position: String.fromCharCode(65 + i) + 1 }; |
|||
}) |
|||
.reduce((prev, next) => ({ ...prev, [next.position]: { key: next.key, v: next.title } }), {}); |
|||
|
|||
const loopDate = getDataSource(importTemColumn, importTemData); |
|||
|
|||
const wpx = importTemColumn.map((c) => ({ |
|||
wpx: Number.parseInt(c.wpx) ? Number.parseInt(c.wpx) : 100, |
|||
})); |
|||
const _data = loopDate.length ? loopDate |
|||
.map((item, i) => importTemColumn.map((key, j) => ({ content: item[key.key], position: String.fromCharCode(65 + j) + (i + 2) }))) |
|||
// 对刚才的结果进行降维处理(二维数组变成一维数组)
|
|||
.reduce((prev, next) => prev.concat(next)) |
|||
// 转换成 worksheet 需要的结构
|
|||
.reduce((prev, next) => ({ ...prev, [next.position]: { v: next.content } }), {}) : []; |
|||
// 合并 column 和 data
|
|||
const output = { ..._headers, ..._data }; |
|||
// 获取所有单元格的位置
|
|||
const outputPos = Object.keys(output); |
|||
// 计算出范围 ,["A1",..., "H2"]
|
|||
const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`; |
|||
|
|||
// 构建 workbook 对象
|
|||
const workbook = { |
|||
SheetNames: ['mySheet'], |
|||
Sheets: { |
|||
mySheet: { |
|||
|
|||
...output, |
|||
'!ref': ref, |
|||
'!cols': wpx, |
|||
}, |
|||
}, |
|||
}; |
|||
// 导出 Excel
|
|||
XLSX.writeFile(workbook, fileName ? `${fileName}-导入模板.xlsx` : '导入模板.xlsx'); |
|||
}; |
|||
const tips = (type) => { |
|||
const { tips, templeteBth = true } = props; |
|||
const description = ( |
|||
<div className="export-import"> |
|||
{tips && tips} |
|||
<Row gutter={16}> |
|||
<Col span={12}> |
|||
<Form form={form} initialValues={{}}> |
|||
<Form.Item name="import-file"> |
|||
<Input className="file-uploader" type="file" accept=".xlsx, .xls" onChange={(e) => importExcel(e, type)} /> |
|||
<Button style={props.btnStyle} className={props.btnClass} loading={importLoading}> |
|||
选择文件 |
|||
</Button> |
|||
</Form.Item> |
|||
</Form> |
|||
</Col> |
|||
{templeteBth && ( |
|||
<Col span={12}> |
|||
<Button style={props.btnStyle} className={props.btnClass} onClick={exportTemplete}> |
|||
模板下载 |
|||
</Button> |
|||
</Col> |
|||
)} |
|||
</Row> |
|||
</div> |
|||
); |
|||
|
|||
notification.info({ |
|||
message: '支持 .xlsx、.xls 格式的文件', |
|||
description, |
|||
key: 'import-notification', |
|||
duration: null, |
|||
}); |
|||
}; |
|||
|
|||
return ( |
|||
<Space> |
|||
{ |
|||
props.import && ( |
|||
<Button style={props.btnStyle} className={props.btnClass} loading={importLoading} onClick={tips}> |
|||
{props.importBtnName || '导入'} |
|||
</Button> |
|||
) |
|||
} |
|||
{ |
|||
props.export && ( |
|||
<Tooltip placement="top" title={props.exportBtnTips || '默认导出所有数据'}> |
|||
<Button style={props.btnStyle} className={props.btnClass} loading={exportLoading} onClick={props.exportType === 'pro' ? exportProExcel : exportExcel}> |
|||
{props.exportBtnName || '导出'} |
|||
</Button> |
|||
</Tooltip> |
|||
) |
|||
} |
|||
</Space> |
|||
); |
|||
} |
|||
|
|||
ExportAndImport.propTypes = { |
|||
export: PropTypes.bool, // 是否显示导出按钮
|
|||
exportBtnName: PropTypes.string, // 导出按钮文字
|
|||
importBtnName: PropTypes.string, // 导入按钮文字
|
|||
import: PropTypes.bool, // 是否显示导入按钮
|
|||
variedImport: PropTypes.bool, // 是否显示多样导入
|
|||
variedImportDisable: PropTypes.bool, // 多样导入禁用
|
|||
variedImportBtnName: PropTypes.string, // 多样导入文字
|
|||
column: PropTypes.array, // 导出显示的header数组 兼容antd column 可直接拿table的column使用 注:column每列的属性wpx设置导出的execl每列的宽度值 默认 100
|
|||
data: PropTypes.array, // 导出的数据 兼容antd table 数组嵌套处理
|
|||
exportUrl: PropTypes.string, // 导出数据从接口获取的url地址 返回的数据1、数组必须支持column的设置 ,2、如果是对象,数组需放在rows属性上
|
|||
exportBody: PropTypes.object, // 导出数据接口body参数
|
|||
exportQuery: PropTypes.object, // 导出数据从接口获取的url地址上的参数
|
|||
exportBtnTips: PropTypes.string, // 导出按钮tips文字提示
|
|||
importUrl: PropTypes.string, // 导入接口url
|
|||
importQuery: PropTypes.object, // 导入接口url地址上的参数
|
|||
btnClass: PropTypes.string, // 按钮className
|
|||
btnStyle: PropTypes.object, // 按钮style
|
|||
tips: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), // 上传文件提示的信息
|
|||
onImportSucess: PropTypes.func, // 上传成功后 返回处理函数
|
|||
importTemColumn: PropTypes.array, // 导入模板设置 头部字段数组
|
|||
importTemData: PropTypes.array, // 导入模板默认数据
|
|||
requestType: PropTypes.string, // 请求类型
|
|||
importDataCallback: PropTypes.func, // 上传后数据返回
|
|||
templeteBth: PropTypes.bool, // 模板按钮
|
|||
importRequest: PropTypes.bool, // 请求导入接口,false时搭配importDataCallback,
|
|||
exportType: PropTypes.string, // 导出执行的函数名
|
|||
}; |
|||
|
|||
export default ExportAndImport; |
@ -0,0 +1,13 @@ |
|||
.export-import { |
|||
.file-uploader { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
top: 0; |
|||
left: 0; |
|||
outline: none; |
|||
opacity: 0; |
|||
background-color: transparent; |
|||
z-index: 10; |
|||
} |
|||
} |
@ -0,0 +1,74 @@ |
|||
'use strict'; |
|||
import React, { Component } from 'react'; |
|||
import { Table } from 'antd'; |
|||
import './index.less'; |
|||
import moment from 'moment'; |
|||
|
|||
class FlowRecordTable extends Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = { |
|||
isRequesting: false, |
|||
pagination: { |
|||
showTotal: total => `共${total}条`, |
|||
responsive: true, |
|||
defaultPageSize: 10, |
|||
}, |
|||
data: [] |
|||
} |
|||
this.token = JSON.parse(sessionStorage.getItem('user')).token; |
|||
} |
|||
|
|||
|
|||
getPagination = () => { |
|||
const { pagination, data } = this.state; |
|||
const { actiPage } = this.props; |
|||
pagination.total = data.length > 0 ? data.length : 0; |
|||
pagination.current = actiPage; |
|||
return pagination; |
|||
}; |
|||
|
|||
onTableChange = (pagination, filters, sorter) => { |
|||
this.props.onPageChange(pagination.current) |
|||
} |
|||
componentDidMount() { |
|||
} |
|||
render() { |
|||
const { flowRecord } = this.props; |
|||
const tableColumnAttrs = [ |
|||
{ |
|||
title: '序号', |
|||
dataIndex: 'id', |
|||
width: '12%', |
|||
render: (text, record, index) => { return index + 1 } |
|||
}, |
|||
{ |
|||
title: '操作人', |
|||
dataIndex: 'processBy', |
|||
width: '25%', |
|||
}, |
|||
{ |
|||
title: '操作时间', |
|||
dataIndex: 'processAt', |
|||
width: '25%', |
|||
render: (text, record, index) => { return moment(text).format('YYYY-MM-DD HH:mm') } |
|||
}, { |
|||
title: '操作内容', |
|||
dataIndex: 'processContent', |
|||
width: '38%', |
|||
}, |
|||
]; |
|||
return ( |
|||
<Table |
|||
rowKey="id" |
|||
className={'fs-table'} |
|||
dataSource={flowRecord} |
|||
columns={tableColumnAttrs} |
|||
onChange={this.onTableChange} |
|||
pagination={this.getPagination()} |
|||
/> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default FlowRecordTable; |
@ -0,0 +1,27 @@ |
|||
|
|||
'use strict'; |
|||
|
|||
import Upload from './Upload'; |
|||
import Uploads from './Uploads'; |
|||
import NoResource from './no-resource'; |
|||
import LimitTextArea from './limit-textarea'; |
|||
// import ProcessForm from './process_form'
|
|||
import FlowRecordTable from './flowRecordTable' |
|||
import Table from './table' |
|||
import Search from './search' |
|||
import SketchColor from './sketchColor' |
|||
import ExportAndImport from './export' |
|||
|
|||
export { |
|||
Upload, |
|||
Uploads, |
|||
NoResource, |
|||
LimitTextArea, |
|||
// ProcessForm,
|
|||
FlowRecordTable, |
|||
Table, |
|||
Search, |
|||
SketchColor, |
|||
ExportAndImport, |
|||
|
|||
}; |
@ -0,0 +1,70 @@ |
|||
import React, { PureComponent } from 'react'; |
|||
import { Input } from 'antd'; |
|||
const { TextArea } = Input; |
|||
import './index.less'; |
|||
|
|||
/*** |
|||
* 显示最大输入字符数 |
|||
* maxLength:300(默认) |
|||
*/ |
|||
class LimitTextArea extends PureComponent { |
|||
|
|||
constructor(props) { |
|||
super(props) |
|||
this.state = { |
|||
len: 0, |
|||
maxLength: 300, |
|||
isvalid: true, // 是否显示最大字符数
|
|||
} |
|||
// 若需要覆盖onChange时,value必填
|
|||
if (props.onChange && !props.hasOwnProperty('value')) { |
|||
this.state.isvalid = false |
|||
console.warn('LimitTextArea:绑定onChange时,value属性必填,否则显示最大输入字符数将失效!') |
|||
} |
|||
} |
|||
|
|||
// 若外部定义了onChange事件,handleChange将会被覆盖
|
|||
handleChange = (e) => { |
|||
const { sep } = this.props |
|||
const val = e.target.value |
|||
const arr = (val || '').split(sep) |
|||
this.setState({ |
|||
len: arr.length |
|||
}) |
|||
} |
|||
|
|||
render () { |
|||
const { maxLength: defaultMax, isvalid } = this.state |
|||
const { sep, maxLength, value, ...restProps } = this.props |
|||
const max = maxLength > 0 ? maxLength : defaultMax |
|||
/** form组件中,value有值 */ |
|||
const arr = (value || '').split(sep) |
|||
let len = value ? arr.length : this.state.len |
|||
len = len > max ? max : len |
|||
/**截取最大字符串 */ |
|||
const val = arr.slice(0, len).join(sep) |
|||
const n = val ? len : 0 |
|||
const suffix = `${n}/${max}` |
|||
|
|||
return isvalid ? ( |
|||
<div className={'block'}> |
|||
<TextArea |
|||
onChange={ e => this.handleChange(e) } |
|||
value={val} |
|||
{ ...restProps } |
|||
/> |
|||
<span className={'counter'}>{suffix}</span> |
|||
</div> |
|||
) : <TextArea { ...this.props } /> |
|||
} |
|||
} |
|||
|
|||
LimitTextArea.defaultProps = { |
|||
/** 分割符 |
|||
* 可以是个字符串,如:'\n' |
|||
* 也可以是个正则表达式,如:/\n\r/ |
|||
*/ |
|||
sep: '' |
|||
} |
|||
|
|||
export default LimitTextArea; |