This commit is contained in:
commit
7ea431d689
|
|
@ -0,0 +1,5 @@
|
|||
[*.{js,jsx,ts,tsx,vue}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# 基本环境
|
||||
VITE_APP_NAME=''
|
||||
# 基本请求地址
|
||||
VITE_BASE_URL=''
|
||||
VITE_BASE_URLM='http://172.16.1.253:4000'
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
# 基本环境
|
||||
VITE_APP_NAME=''
|
||||
# 基本请求地址
|
||||
VITE_BASE_URL=''
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
node: true
|
||||
},
|
||||
extends: [
|
||||
'standard',
|
||||
'plugin:vue/vue3-essential'
|
||||
],
|
||||
overrides: [
|
||||
{
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
files: [
|
||||
'.eslintrc.{js,cjs}'
|
||||
],
|
||||
parserOptions: {
|
||||
sourceType: 'script'
|
||||
}
|
||||
}
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module'
|
||||
},
|
||||
plugins: [
|
||||
'vue'
|
||||
],
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'vue/multi-word-component-names': 'off'
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
node_modules
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
# Vue 3 + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
'plugins'[
|
||||
[
|
||||
'import',
|
||||
{
|
||||
libraryName: 'element-plus',
|
||||
customStyleName: (name) => {
|
||||
// 注意：这里需要确保你的样式文件名是 `style.css`，否则需要进行相应调整
|
||||
return `element-plus/lib/theme-chalk/${name}.css`
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>阜阳大屏可视化
|
||||
</title>
|
||||
<!-- <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4490429_ym69s57vxr.css"> -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,39 @@
|
|||
{
|
||||
"name": "databoard",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "vite build",
|
||||
"build:production": "vite build --mode production",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
|
||||
"dev": "vite",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.6.7",
|
||||
"echarts": "^5.5.0",
|
||||
"element-plus": "^2.5.6",
|
||||
"font-awesome": "^4.7.0",
|
||||
"jsencrypt": "^3.3.2",
|
||||
"pinia": "^2.1.7",
|
||||
"vue": "^3.4.15",
|
||||
"vue-router": "^4.2.5",
|
||||
"vue3-seamless-scroll": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.3",
|
||||
"babel-plugin-import": "^1.13.8",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-standard": "^17.1.0",
|
||||
"eslint-plugin-import": "^2.29.1",
|
||||
"eslint-plugin-n": "^16.6.2",
|
||||
"eslint-plugin-promise": "^6.1.1",
|
||||
"eslint-plugin-vue": "^9.22.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"less": "^4.2.0",
|
||||
"sass": "~1.26.5",
|
||||
"sass-loader": "^13.3.2",
|
||||
"vite": "^5.1.0"
|
||||
},
|
||||
"type": "module"
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<body>
|
||||
|
||||
<video id="pre" width="100%" height="100%" controls="controls" autoplay="autoplay">
|
||||
<source src="" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
<script type="text/javascript">
|
||||
// import md5 from 'js-md5'
|
||||
// APPKEY = "f8db0c75";
|
||||
// SECRET = "41455e9d614643569a53bd338d095062";
|
||||
// OPENAPI_IP_PORT_HTTP = "http://127.0.0.1:80";
|
||||
// ITF_ADDRESS_GET_DEFAULT_USER_UUID = "/openapi/service/base/user/getDefaultUserUuid";
|
||||
// ITF_ADDRESS_GET_CAMERAS = "/openapi/service/vss/res/getCameras";
|
||||
|
||||
|
||||
var para = getParams(window.location.href);
|
||||
console.log(para["CameraUuid"])
|
||||
document.getElementById("pre").src="http://10.20.146.131:6713/mag/hls/"+para["CameraUuid"]+"/0/live.m3u8";
|
||||
// var data1 = testGetDefaultUserUUID();
|
||||
// var data2 = testGetCameras();
|
||||
|
||||
|
||||
|
||||
|
||||
// function testGetDefaultUserUUID() {
|
||||
// url = OPENAPI_IP_PORT_HTTP + ITF_ADDRESS_GET_DEFAULT_USER_UUID;
|
||||
// data = { "appkey": APPKEY, "time": Date.now() };
|
||||
// str = JSON.stringify(data);
|
||||
// callurl = url + "?token=" + md5(url + str + SECRET);
|
||||
|
||||
// $.ajax({ /* url 地址可以是 /get-json/ 的方式 * 也可以是 http://www.qfedu.com/get-json/ 的方式 */
|
||||
// url: callurl,
|
||||
// type: 'POST',
|
||||
// async: false,
|
||||
// dataType: 'json',
|
||||
// data: str,
|
||||
// success: function (res) {
|
||||
// // 成功处理逻辑
|
||||
// console.log(res)
|
||||
// }, error: function (res) {
|
||||
// // 错误时处理逻辑
|
||||
// console.log(res)
|
||||
// }
|
||||
// });
|
||||
|
||||
// }
|
||||
|
||||
|
||||
// function testGetCameras() {
|
||||
// url = OPENAPI_IP_PORT_HTTP + ITF_ADDRESS_GET_CAMERAS;
|
||||
// data = { "appkey": APPKEY, "time": Date.now() ,"pageNo": 1,"pageSize":1000};
|
||||
// }
|
||||
|
||||
|
||||
function getParams(url) {
|
||||
const regex = /[?&]([^=#]+)=([^&#]*)/g;
|
||||
const params = {};
|
||||
let match;
|
||||
while (match = regex.exec(url)) {
|
||||
params[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
|
||||
}
|
||||
return params;
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 111 KiB |
|
|
@ -0,0 +1,11 @@
|
|||
<script setup>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* @import url('@/assets/fonts/index.css'); */
|
||||
/* @import "assets/fonts/FontIcon/iconfont.css"; */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { get, post, download, uploadFile } from './request'
|
||||
// 导入业务统计接口
|
||||
export const ImportBusinessStatistics = (params) => {
|
||||
return uploadFile('/api/ImportBusinessStatistics', params)
|
||||
}
|
||||
// 下载业务统计接口
|
||||
export const DownloadBusinessStatistics = (params) => {
|
||||
return download('/api/DownloadBusinessStatistics', params)
|
||||
}
|
||||
// 获取表格分页接口
|
||||
export const GetBusinessStatisticsList = (params) => {
|
||||
return get('/api/GetBusinessStatisticsList', params)
|
||||
}
|
||||
// 地图页获取业务统计接口
|
||||
export const GetBusinessStatistics = (params) => {
|
||||
return get('/api/GetBusinessStatistics', params)
|
||||
}
|
||||
/// /下载业务统计模板接口
|
||||
export const DownloadTemplate = (params) => {
|
||||
return download('/api/DownloadTemplate', params)
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { get, post, download, uploadFile } from './request'
|
||||
|
||||
// 登录
|
||||
export const apiLogin = (params) => {
|
||||
return post('/api/Login', params)
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
import axios from 'axios'
|
||||
// import { useRouter } from 'vue-router'
|
||||
|
||||
// 带cookie请求
|
||||
axios.defaults.headers.post['Content-Type'] = 'application/json'
|
||||
|
||||
const http = axios.create({
|
||||
// baseURL: 'http://admin.umayle.com'
|
||||
baseURL: `${import.meta.env.VITE_BASE_URL}`
|
||||
})
|
||||
|
||||
// request 请求拦截器 - 请求之前headers加sid
|
||||
http.interceptors.request.use(
|
||||
config => {
|
||||
if (config.url.indexOf('/login') < 0 && localStorage.getItem('token')) {
|
||||
config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`
|
||||
}
|
||||
// 每次发送请求之前检测都vuex存有token,那么都要放在请求头发送给服务器
|
||||
return config
|
||||
},
|
||||
err => {
|
||||
return err
|
||||
}
|
||||
)
|
||||
// const router = useRouter()
|
||||
// // response 错误统一处理
|
||||
http.interceptors.response.use(
|
||||
res => {
|
||||
return res.data
|
||||
},
|
||||
err => {
|
||||
console.log('接口访问失败')
|
||||
// localStorage.removeItem('token')
|
||||
// router.push('/Login')
|
||||
return err
|
||||
}
|
||||
)
|
||||
|
||||
// 封装请求的api
|
||||
const callapi = (method = 'GET', url, data = {}) => {
|
||||
const params = method === 'GET' ? data : {}
|
||||
const body = ['POST', 'PUT', 'PATCH'].includes(method) ? data : {}
|
||||
const options = { method, url, params, data: body }
|
||||
return http(options)
|
||||
}
|
||||
|
||||
export const upload = (url, file) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
http
|
||||
.post(url, file, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
})
|
||||
.then((res) => {
|
||||
resolve(res.data)
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export const uploadFile = (url, file) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
http
|
||||
.post(url, file, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
})
|
||||
.then((res) => {
|
||||
resolve(res)
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export const download = (url, data = {}, method = 'GET') => {
|
||||
const params = method === 'GET' ? data : {}
|
||||
const body = ['POST', 'PUT', 'PATCH'].includes(method) ? data : {}
|
||||
const options = { method, url, params, data: body, responseType: 'blob' }
|
||||
console.log(options, 'options--')
|
||||
return http(options)
|
||||
}
|
||||
// 导出
|
||||
export const downloadPost = (url, data = {}, method = 'POST') => {
|
||||
const params = method === 'GET' ? data : {}
|
||||
const body = ['POST', 'PUT', 'PATCH'].includes(method) ? data : {}
|
||||
const options = { method, url, params, data: body, responseType: 'blob' }
|
||||
console.log(options, 'options--')
|
||||
return http(options)
|
||||
}
|
||||
|
||||
// 封装GET请求函数
|
||||
export const get = (url, data) => callapi('GET', url, data)
|
||||
export const post = (url, data) => callapi('POST', url, data)
|
||||
export const put = (url, data) => callapi('PUT', url, data)
|
||||
export const deleteapi = (url, data) => callapi('DELETE', url, data)
|
||||
export const patchApi = (url, data) => callapi('PATCH', url, data)
|
||||
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,539 @@
|
|||
/* Logo 字体 */
|
||||
@font-face {
|
||||
font-family: "iconfont logo";
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: "iconfont logo";
|
||||
font-size: 160px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.nav-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#tabs li {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -1px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
#tabs .active {
|
||||
border-bottom-color: #f00;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.tab-container .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
.main {
|
||||
padding: 30px 100px;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main .logo {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1;
|
||||
height: 110px;
|
||||
margin-top: -50px;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
font-size: 160px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.helps {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.helps pre {
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border: solid 1px #e7e1cd;
|
||||
background-color: #fffdef;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon_lists {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.icon_lists li {
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
list-style: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon_lists li .code-name {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon_lists .icon {
|
||||
display: block;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 42px;
|
||||
margin: 10px auto;
|
||||
color: #333;
|
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
transition: font-size 0.25s linear, width 0.25s linear;
|
||||
}
|
||||
|
||||
.icon_lists .icon:hover {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.icon_lists .svg-icon {
|
||||
/* 通过设置 font-size 来改变图标大小 */
|
||||
width: 1em;
|
||||
/* 图标和文字相邻时，垂直对齐 */
|
||||
vertical-align: -0.15em;
|
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||
fill: currentColor;
|
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||
normalize.css 中也包含这行 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon_lists li .name,
|
||||
.icon_lists li .code-name {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* markdown 样式 */
|
||||
.markdown {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: #404040;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: #404040;
|
||||
margin: 1.6em 0 0.6em 0;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #e9e9e9;
|
||||
margin: 16px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown>p,
|
||||
.markdown>blockquote,
|
||||
.markdown>.highlight,
|
||||
.markdown>ol,
|
||||
.markdown>ul {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.markdown ul>li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.markdown>ul li,
|
||||
.markdown blockquote ul>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown>ul li p,
|
||||
.markdown>ol li p {
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.markdown ol>li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.markdown>ol li,
|
||||
.markdown blockquote ol>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 3px;
|
||||
padding: 0 5px;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 95%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table th,
|
||||
.markdown>table td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown>br,
|
||||
.markdown>p>br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-meta {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis,
|
||||
.hljs-quote {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-type {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-attribute {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-attr,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 代码高亮 */
|
||||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre)>code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre)>code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
|
@ -0,0 +1,333 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>iconfont Demo</title>
|
||||
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
|
||||
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
|
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="iconfont.css">
|
||||
<script src="iconfont.js"></script>
|
||||
<!-- jQuery -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
||||
<!-- 代码高亮 -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
||||
<style>
|
||||
.main .logo {
|
||||
margin-top: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main .logo .sub-title {
|
||||
margin-left: 0.5em;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
||||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
||||
|
||||
</a></h1>
|
||||
<div class="nav-tabs">
|
||||
<ul id="tabs" class="dib-box">
|
||||
<li class="dib active"><span>Unicode</span></li>
|
||||
<li class="dib"><span>Font class</span></li>
|
||||
<li class="dib"><span>Symbol</span></li>
|
||||
</ul>
|
||||
|
||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4490429" target="_blank" class="nav-more">查看项目</a>
|
||||
|
||||
</div>
|
||||
<div class="tab-container">
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">分析管理</div>
|
||||
<div class="code-name">&#xe61d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">实训管理</div>
|
||||
<div class="code-name">&#xe6d2;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">学习管理</div>
|
||||
<div class="code-name">&#xe821;</div>
|
||||
</li>
|
||||
|
||||
<!-- 新增客户端管理 -->
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">客户端管理</div>
|
||||
<div class="code-name">&#xe821;</div>
|
||||
</li>
|
||||
<!-- 新增客户端管理 end-->
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">grade</div>
|
||||
<div class="code-name">&#xe601;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">exam</div>
|
||||
<div class="code-name">&#xe602;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">system</div>
|
||||
<div class="code-name">&#xe603;</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="unicode-">Unicode 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||||
<ul>
|
||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
||||
</blockquote>
|
||||
<p>Unicode 使用步骤如下：</p>
|
||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1716193171193') format('woff2'),
|
||||
url('iconfont.woff?t=1716193171193') format('woff'),
|
||||
url('iconfont.ttf?t=1716193171193') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
<pre><code class="language-css"
|
||||
>.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||
<pre>
|
||||
<code class="language-html"
|
||||
><span class="iconfont">&#x33;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-fenxiguanli"></span>
|
||||
<div class="name">
|
||||
分析管理
|
||||
</div>
|
||||
<div class="code-name">.icon-fenxiguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-shixunguanli"></span>
|
||||
<div class="name">
|
||||
实训管理
|
||||
</div>
|
||||
<div class="code-name">.icon-shixunguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-xuexiguanli"></span>
|
||||
<div class="name">
|
||||
学习管理
|
||||
</div>
|
||||
<div class="code-name">.icon-xuexiguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-chengji"></span>
|
||||
<div class="name">
|
||||
grade
|
||||
</div>
|
||||
<div class="code-name">.icon-chengji
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-kaoshi"></span>
|
||||
<div class="name">
|
||||
exam
|
||||
</div>
|
||||
<div class="code-name">.icon-kaoshi
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-xitong"></span>
|
||||
<div class="name">
|
||||
system
|
||||
</div>
|
||||
<div class="code-name">.icon-xitong
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="font-class-">font-class 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||
<ul>
|
||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||
</code></pre>
|
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"
|
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-fenxiguanli"></use>
|
||||
</svg>
|
||||
<div class="name">分析管理</div>
|
||||
<div class="code-name">#icon-fenxiguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-shixunguanli"></use>
|
||||
</svg>
|
||||
<div class="name">实训管理</div>
|
||||
<div class="code-name">#icon-shixunguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xuexiguanli"></use>
|
||||
</svg>
|
||||
<div class="name">学习管理</div>
|
||||
<div class="code-name">#icon-xuexiguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-chengji"></use>
|
||||
</svg>
|
||||
<div class="name">grade</div>
|
||||
<div class="code-name">#icon-chengji</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-kaoshi"></use>
|
||||
</svg>
|
||||
<div class="name">exam</div>
|
||||
<div class="code-name">#icon-kaoshi</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xitong"></use>
|
||||
</svg>
|
||||
<div class="name">system</div>
|
||||
<div class="code-name">#icon-xitong</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<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="language-html"><script src="./iconfont.js"></script>
|
||||
</code></pre>
|
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||
<pre><code class="language-html"><style>
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xxx"></use>
|
||||
</svg>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('.tab-container .content:first').show()
|
||||
|
||||
$('#tabs li').click(function (e) {
|
||||
var tabContent = $('.tab-container .content')
|
||||
var index = $(this).index()
|
||||
|
||||
if ($(this).hasClass('active')) {
|
||||
return
|
||||
} else {
|
||||
$('#tabs li').removeClass('active')
|
||||
$(this).addClass('active')
|
||||
|
||||
tabContent.hide().eq(index).fadeIn()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4490429 */
|
||||
src: url('iconfont.woff2?t=1716193171193') format('woff2'),
|
||||
url('iconfont.woff?t=1716193171193') format('woff'),
|
||||
url('iconfont.ttf?t=1716193171193') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-fenxiguanli:before {
|
||||
content: "\e61d";
|
||||
}
|
||||
|
||||
.icon-shixunguanli:before {
|
||||
content: "\e6d2";
|
||||
}
|
||||
|
||||
.icon-xuexiguanli:before {
|
||||
content: "\e821";
|
||||
}
|
||||
|
||||
.icon-chengji:before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
.icon-kaoshi:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-xitong:before {
|
||||
content: "\e603";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,60 @@
|
|||
{
|
||||
"id": "4490429",
|
||||
"name": "LKJC",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "9096254",
|
||||
"name": "分析管理",
|
||||
"font_class": "fenxiguanli",
|
||||
"unicode": "e61d",
|
||||
"unicode_decimal": 58909
|
||||
},
|
||||
{
|
||||
"icon_id": "11101584",
|
||||
"name": "实训管理",
|
||||
"font_class": "shixunguanli",
|
||||
"unicode": "e6d2",
|
||||
"unicode_decimal": 59090
|
||||
},
|
||||
{
|
||||
"icon_id": "36656926",
|
||||
"name": "学习管理",
|
||||
"font_class": "xuexiguanli",
|
||||
"unicode": "e821",
|
||||
"unicode_decimal": 59425
|
||||
},
|
||||
// 新增客户端管理
|
||||
{
|
||||
"icon_id": "36656927",
|
||||
"name": "客户端管理",
|
||||
"font_class": "kehuduanguanli",
|
||||
"unicode": "e821",
|
||||
"unicode_decimal": 59427
|
||||
},
|
||||
// 新增客户端管理end
|
||||
{
|
||||
"icon_id": "39758479",
|
||||
"name": "grade",
|
||||
"font_class": "chengji",
|
||||
"unicode": "e601",
|
||||
"unicode_decimal": 58881
|
||||
},
|
||||
{
|
||||
"icon_id": "39758508",
|
||||
"name": "exam",
|
||||
"font_class": "kaoshi",
|
||||
"unicode": "e602",
|
||||
"unicode_decimal": 58882
|
||||
},
|
||||
{
|
||||
"icon_id": "39758529",
|
||||
"name": "system",
|
||||
"font_class": "xitong",
|
||||
"unicode": "e603",
|
||||
"unicode_decimal": 58883
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,27 @@
|
|||
@font-face {
|
||||
font-family: 'Microsoft-YaHei';
|
||||
src: url('./msyh.ttc') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'D-DIN-Bold';
|
||||
src: url('./D-DIN-Bold.otf') format('opentype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'DouyinSansBold';
|
||||
src: url('./DouyinSansBold.otf') format('opentype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: '思源黑体 CN Heavy';
|
||||
src: url('./SourceHanSansCN-Heavy.ttf') format('opentype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: '思源黑体 CN Regular';
|
||||
src: url('./SourceHanSansCN-Regular.ttf') format('opentype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: '优设标题黑';
|
||||
src: url('./优设标题黑.ttf') format('opentype');
|
||||
}
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 151 B |
Binary file not shown.
|
After Width: | Height: | Size: 315 B |
Binary file not shown.
|
After Width: | Height: | Size: 267 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 449 B |
Binary file not shown.
|
After Width: | Height: | Size: 403 B |
Binary file not shown.
|
After Width: | Height: | Size: 291 B |
|
|
@ -0,0 +1,19 @@
|
|||
export const updateCountdown = (targetDate) => {
|
||||
if (!targetDate) {
|
||||
targetDate = new Date().getFullYear()
|
||||
}
|
||||
const targetTime = new Date(targetDate + '-12-31').getTime()
|
||||
const currentDate = new Date().getTime()
|
||||
const timeRemaining = targetTime - currentDate
|
||||
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24))
|
||||
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
|
||||
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60))
|
||||
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000)
|
||||
|
||||
return [days, hours, minutes, seconds]
|
||||
}
|
||||
|
||||
export const getImgName = (imagePath) => {
|
||||
// const imagePath = 'http://admin.umayle.com/upload/userphoto/郑亚丽.jpg' // 假设这是图片路径
|
||||
return imagePath.split('/').pop()
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
export function fontChart (res) {
|
||||
const docEl = document.documentElement
|
||||
const clientWidth =
|
||||
window.innerWidth ||
|
||||
document.documentElement.clientWidth ||
|
||||
document.body.clientWidth
|
||||
if (!clientWidth) return
|
||||
// 此处的3840 为设计稿的宽度，记得修改！
|
||||
const fontSize = clientWidth / 1920
|
||||
return res * fontSize
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<template lang="">
|
||||
<div class="tag-list">
|
||||
<el-tag v-for="(tag,index) in tagsList" :key="tag.name" closable :class="{'isActive':tagsActiveIndex===index}"
|
||||
@click="tagClick(tag,index)" @close="tagClose(index)">
|
||||
{{ tag.name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { watch, ref } from 'vue'
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const tagsList = ref([])
|
||||
const tagsActiveIndex = ref(1)
|
||||
|
||||
const tagClick = (item, index) => {
|
||||
router.push(item.path)
|
||||
tagsActiveIndex.value = index
|
||||
}
|
||||
const tagClose = (index) => {
|
||||
const _path = tagsList.value[tagsActiveIndex.value].path
|
||||
tagsList.value.splice(index, 1)
|
||||
|
||||
if (tagsActiveIndex.value === index) {
|
||||
tagsActiveIndex.value = index > 0 ? index - 1 : 1
|
||||
router.push(tagsList.value[tagsActiveIndex.value].path)
|
||||
} else {
|
||||
const hasIndex = tagsList.value.findIndex((v) => v.path === _path)
|
||||
tagsActiveIndex.value = hasIndex
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route,
|
||||
(newValue, oldValue) => {
|
||||
const hasIndex = tagsList.value.findIndex((v) => v.path === newValue.path)
|
||||
if (hasIndex < 0 && newValue.meta.title !== '') {
|
||||
tagsList.value.push({
|
||||
name: newValue.meta.title,
|
||||
path: newValue.path
|
||||
})
|
||||
tagsActiveIndex.value = tagsList.value.length - 1
|
||||
} else {
|
||||
// tagsActiveIndex.value = hasIndex;
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.tag-list {
|
||||
.el-tag{
|
||||
background: rgba(69, 85, 82, 0.10);
|
||||
color:rgba(69, 85, 82, 1);
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
&.isActive {
|
||||
background: rgba(69, 85, 82, 0.10);
|
||||
color:rgba(69, 85, 82, 1);
|
||||
::v-deep{
|
||||
.el-icon{
|
||||
color:rgba(69, 85, 82, 1);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-tag__close){
|
||||
color:rgba(69, 85, 82, 1) !important;
|
||||
}
|
||||
:deep(.el-tag__close:hover){
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ArrowDown } from '@element-plus/icons-vue'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import mock from '@/router/menu/index.js'
|
||||
import Tab from './Tab.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
|
||||
// import useUserStore from '@/store/index.js'
|
||||
// const userStore = useUserStore()
|
||||
|
||||
// 侧边栏菜单
|
||||
const isCollapse = ref(false)
|
||||
const handleOpen = (key, keyPath) => {
|
||||
console.log(key, keyPath)
|
||||
}
|
||||
const handleClose = (key, keyPath) => {
|
||||
console.log(key, keyPath)
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
function loginOut () {
|
||||
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
router.push('/Login')
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="common-layout">
|
||||
<el-container class="layout">
|
||||
<el-header>
|
||||
<el-header>
|
||||
<div class="img">
|
||||
</div>
|
||||
<div class="Administrator">
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
超级管理员
|
||||
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-header>
|
||||
</el-header>
|
||||
<el-container class="ContainerConent">
|
||||
<el-aside>
|
||||
<aside>
|
||||
<div class="Sidebar">
|
||||
<el-menu
|
||||
default-active="0"
|
||||
class="el-menu-vertical-demo"
|
||||
:collapse="isCollapse"
|
||||
@open="handleOpen"
|
||||
@close="handleClose"
|
||||
>
|
||||
<!-- <el-menu-item :index="String(0)" @click="$router.push(mock[0].path)">
|
||||
<template #title>
|
||||
<i :class="['iconfont', mock[0].meta.icon]"></i>
|
||||
<span>{{ mock[0].meta.title }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item :index="String(1)" @click="$router.push(mock[1].path)">
|
||||
<template #title>
|
||||
<i :class="['iconfont', mock[1].meta.icon]"></i>
|
||||
<span>{{ mock[1].meta.title }}</span>
|
||||
</template>
|
||||
</el-menu-item> -->
|
||||
<el-menu-item :index="String(0)" @click="$router.push(mock[0].path)">
|
||||
<template #title>
|
||||
<i :class="['iconfont', mock[0].meta.icon]"></i>
|
||||
<span>{{ mock[0].meta.title }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</aside>
|
||||
</el-aside>
|
||||
<el-container class="mainContent">
|
||||
<div class="Tool">
|
||||
<Tab></Tab>
|
||||
</div>
|
||||
<el-main>
|
||||
<router-view/>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</section>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.common-layout{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.layout{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.el-menu{
|
||||
border: none;
|
||||
}
|
||||
.el-header {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: white;
|
||||
padding: 0;
|
||||
// .img {
|
||||
// width: 126px;
|
||||
// height: 37px;
|
||||
// margin-top: 5px;
|
||||
// margin-left: 10px;
|
||||
// background: url("../assets/menu/logo.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
}
|
||||
.ContainerConent{
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
background-color: rgba(246, 249, 248, 1);
|
||||
}
|
||||
.el-aside{
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.mainContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
padding:17px 20px;
|
||||
}
|
||||
.Tool{
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
.el-tabs{
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
}
|
||||
:deep(.el-tabs__header){
|
||||
border:none !important;
|
||||
}
|
||||
:deep(.el-tabs__item ){
|
||||
width: 88px;
|
||||
height: 24px;
|
||||
background-color: rgba(69, 85, 82, 0.10);
|
||||
}
|
||||
}
|
||||
|
||||
.el-main{
|
||||
padding: 0;
|
||||
height: calc(100% - 34px);
|
||||
width: 100%;
|
||||
margin-top:16px ;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-menu-item.is-active{
|
||||
color: #0D867F;
|
||||
}
|
||||
.iconfont{
|
||||
margin-right: 16px;
|
||||
}
|
||||
.Administrator{
|
||||
float: right;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
:deep(.el-dropdown-link){
|
||||
border: none!important;
|
||||
}
|
||||
:deep(.el-dropdown-link){
|
||||
border: none!important;
|
||||
}
|
||||
:deep(.example-showcase .el-dropdown-link) {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import 'element-plus/dist/index.css'
|
||||
import ElementPlus from 'element-plus'
|
||||
import zhCN from 'element-plus/dist/locale/zh-cn.mjs' // 引入中文
|
||||
import './style/reset.css'
|
||||
import './assets/fonts/index.css'
|
||||
import store from '@/store'
|
||||
import vue3SeamlessScroll from 'vue3-seamless-scroll'
|
||||
|
||||
createApp(App).use(router).use(store).use(vue3SeamlessScroll).use(ElementPlus, { locale: zhCN }).mount('#app')
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
// 引入其他组件...
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: '',
|
||||
redirect: '/TrainingManage'
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('@/views/login/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/TrainingManage',
|
||||
name: 'TrainingManage',
|
||||
component: () => import('@/layout/index.vue'),
|
||||
redirect: '/TrainingManage',
|
||||
|
||||
children: [
|
||||
{
|
||||
path: '/TrainingManage',
|
||||
component: () => import('@/views/TrainingManage/index.vue'),
|
||||
meta: { sort: 5, title: '文本管理', icon: '' }
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
// import {ref} from "vue";
|
||||
|
||||
export default [
|
||||
|
||||
{
|
||||
path: 'TrainingManage',
|
||||
meta: { sort: 1, title: '文本管理', icon: 'icon-chengji' }
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { createPinia } from 'pinia'
|
||||
const store = createPinia()
|
||||
export default store
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
ruby,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
font-family: "Microsoft YaHei", "PingFangSC-Regular", "Helvetica Neue",
|
||||
"Helvetica", "Hiragino Sans GB", "SimSun", "sans-serif";
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
function _registerEvent (target, eventType, cb) {
|
||||
if (target.addEventListener) {
|
||||
target.addEventListener(eventType, cb)
|
||||
return {
|
||||
remove: function () {
|
||||
target.removeEventListener(eventType, cb)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
target.attachEvent(eventType, cb)
|
||||
return {
|
||||
remove: function () {
|
||||
target.detachEvent(eventType, cb)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function openUriWithTimeoutHack (uri, failCb, successCb) {
|
||||
console.log('uri', uri)
|
||||
const timeout = setTimeout(function () {
|
||||
failCb()
|
||||
handler.remove()
|
||||
}, 1000)
|
||||
|
||||
// handle page running in an iframe (blur must be registered with top level window)
|
||||
let target = window
|
||||
while (target !== target.parent) {
|
||||
target = target.parent
|
||||
}
|
||||
|
||||
var handler = _registerEvent(target, 'blur', onBlur)
|
||||
|
||||
function onBlur () {
|
||||
clearTimeout(timeout)
|
||||
handler.remove()
|
||||
successCb()
|
||||
}
|
||||
|
||||
window.location = uri
|
||||
}
|
||||
|
|
@ -0,0 +1,531 @@
|
|||
<template>
|
||||
<div class="PageContent">
|
||||
<div class="WebToolbar">
|
||||
<div class="FormComponent">
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<el-form-item label="时间">
|
||||
<el-date-picker v-model="form.StatisticsTime" value-format="YYYY-MM-DD" type="date" placeholder="请选择时间" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="ButtonAssembly">
|
||||
<el-button style="color: #fff" @click="queryData()">
|
||||
<img src="../../assets/menu/search.png" alt="" />
|
||||
<span>查询</span>
|
||||
</el-button>
|
||||
<el-button style="color: #1d2129" @click="resetFormInline">
|
||||
<img src="../../assets/menu/reset.png" alt="" />
|
||||
<span>重置</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Tabulation">
|
||||
<div class="actionBar">
|
||||
<h1>文本列表</h1>
|
||||
<div class="Worktop">
|
||||
|
||||
<el-button class="BlueBack" @click="dialogToLead = true">
|
||||
<!-- <img src="../../../assets/menu/toLead.png" alt=""/> -->
|
||||
<span>新增</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ExaminationForm">
|
||||
<el-table
|
||||
ref="multipleTableRef"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" />
|
||||
<el-table-column label="序号" type="index" :index="indexMethod" width="60px"/>
|
||||
<el-table-column property="StatisticsTime" label="表时间" />
|
||||
<el-table-column property="CreateTime" label="创建时间" />
|
||||
<el-table-column property="" label="操作">
|
||||
<template v-slot="scope">
|
||||
<el-button @click="handleDown(scope.row)">下载</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
v-model:current-page="InlineForm.PageIndex"
|
||||
:page-size="InlineForm.PageSize"
|
||||
:small="small"
|
||||
:disabled="disabled"
|
||||
:background="background"
|
||||
layout="total, prev, pager, next"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增 -->
|
||||
<el-dialog v-model="dialogToLead" title="新增" style="width:30%;height:50%" >
|
||||
<el-form-item label="上传：" prop="SoftwareName">
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
action="#"
|
||||
:http-request="toUpload"
|
||||
:auto-upload="false"
|
||||
:on-change="handleChange"
|
||||
:limit="1"
|
||||
:on-exceed="handleExceed"
|
||||
:before-remove="handleRemove"
|
||||
>
|
||||
<template #trigger>
|
||||
<el-button type="primary" >选择</el-button>
|
||||
</template>
|
||||
<el-button class="ml-3" type="success" @click="submitUpload"> 上传 </el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, nextTick, getCurrentInstance } from 'vue'
|
||||
import { ElTable, ElMessageBox, ElMessage } from 'element-plus'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
ImportBusinessStatistics,
|
||||
DownloadBusinessStatistics,
|
||||
GetBusinessStatisticsList,
|
||||
DownloadTemplate
|
||||
|
||||
} from '@/api/file.js'
|
||||
|
||||
const formInline = reactive({
|
||||
// StatisticsId: '',
|
||||
StatisticsTime: '',
|
||||
PageIndex: 1,
|
||||
PageSize: 10
|
||||
})
|
||||
const resetFormInline = () => {
|
||||
// formInline.StatisticsId = ''
|
||||
formInline.StatisticsTime = ''
|
||||
getTable()
|
||||
// for (const key in formInline) {
|
||||
// if ( key !== 'PageIndex' || key !== 'PageIndex' ) formInline[key] = ''
|
||||
// }
|
||||
}
|
||||
// 多选框
|
||||
const indexMethod = (index) => {
|
||||
return index + 1
|
||||
}
|
||||
|
||||
// 新增数据，弹框显示
|
||||
const formRef = ref(null)
|
||||
const dialogFormVisible = ref(false)
|
||||
function handleCreate () {
|
||||
dialogFormVisible.value = true
|
||||
}
|
||||
const formLabelWidth = '150px'
|
||||
const value1 = ref('')
|
||||
const value2 = ref('')
|
||||
const state = reactive({
|
||||
rules: {},
|
||||
scenemList: [],
|
||||
platformAreaList: [],
|
||||
lineList: []
|
||||
})
|
||||
const form = reactive({
|
||||
EnterpriseName: '',
|
||||
DistrictCode: '',
|
||||
EnterpriseCode: '',
|
||||
ModelName: '',
|
||||
VersionNumber: '',
|
||||
MapLongitude: '',
|
||||
MapLatitude: '',
|
||||
TrainingSize: '',
|
||||
ModelResourcesPath: '',
|
||||
ModelResources: '',
|
||||
UpdateTime: ''
|
||||
})
|
||||
|
||||
// 查询列表
|
||||
onMounted(() => {
|
||||
getTable()
|
||||
})
|
||||
|
||||
// 考试列表
|
||||
const total = ref(0)
|
||||
const tableData = ref([])
|
||||
const queryData = () => {
|
||||
formInline.PageIndex = 1
|
||||
getTable()
|
||||
}
|
||||
const getTable = async () => {
|
||||
try {
|
||||
const { code, data } = await GetBusinessStatisticsList({
|
||||
...formInline
|
||||
})
|
||||
|
||||
if (code === 0) {
|
||||
console.log('data', data)
|
||||
total.value = data.total
|
||||
tableData.value = data.list
|
||||
} else {
|
||||
total.value = 0
|
||||
tableData.value = []
|
||||
}
|
||||
} catch (error) {}
|
||||
}
|
||||
// 下载模板
|
||||
// const handleDownloadUser = () => {
|
||||
// DownloadTemplate({ FileName: 'Upload/Excel/业务统计表模板.xlsx' }).then(res => {
|
||||
// // console.log(res, 'res--')
|
||||
// const b = new Blob([res])
|
||||
// const url = window.URL.createObjectURL(b)
|
||||
// const a = document.createElement('a')
|
||||
// a.href = url
|
||||
// a.download = '业务统计表模板.xlsx'
|
||||
// document.body.appendChild(a)
|
||||
// a.click()
|
||||
// window.URL.revokeObjectURL(url)
|
||||
// })
|
||||
// }
|
||||
|
||||
// 新增
|
||||
const uploadRef = ref()
|
||||
const handleChange = (file, fileList) => {
|
||||
// uploadRef.value.clearFiles()
|
||||
console.log(uploadRef.value)
|
||||
}
|
||||
const handleExceed = (files) => {
|
||||
uploadRef.value.clearFiles()
|
||||
nextTick(() => {
|
||||
uploadRef.value.handleStart(files[0])
|
||||
})
|
||||
}
|
||||
const uploadFile = ref({})
|
||||
const submitUpload = () => {
|
||||
uploadRef.value.submit()
|
||||
}
|
||||
// 删除文件
|
||||
const { proxy } = getCurrentInstance()
|
||||
const handleRemove = (file, fileList) => {}
|
||||
const toUpload = async (param) => {
|
||||
// if (!uploadRef.value) return ElMessage.error('请先上传文件')
|
||||
const formData = new FormData()
|
||||
uploadFile.value = param.file
|
||||
console.log(param.file, ' param.file')
|
||||
formData.append('Files', param.file)
|
||||
console.log(formData, ' param')
|
||||
|
||||
await ImportBusinessStatistics(formData).then((res) => {
|
||||
if (res.code === 0) {
|
||||
ElMessage({
|
||||
message: '上传成功',
|
||||
type: 'success'
|
||||
})
|
||||
// // 确保DOM已更新
|
||||
getTable()
|
||||
setTimeout(() => {
|
||||
dialogToLead.value = false
|
||||
proxy.$refs.uploadRef.handleRemove(param.file)
|
||||
}, 600)
|
||||
} else {
|
||||
ElMessage.error(res?.data || '操作失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
const multipleTableRef = ref()
|
||||
const multipleSelection = ref([])
|
||||
const handleSelectionChange = (val) => {
|
||||
if (val.length > 1) {
|
||||
multipleTableRef.value.clearSelection()
|
||||
multipleTableRef.value.toggleRowSelection(val.pop())
|
||||
} else {
|
||||
// this.currentRow = val.pop();
|
||||
multipleSelection.value = val
|
||||
}
|
||||
}
|
||||
const textarea = ref('')
|
||||
const small = ref(false)
|
||||
const background = ref(false)
|
||||
const disabled = ref(false)
|
||||
|
||||
// 分页
|
||||
const InlineForm = reactive({
|
||||
PageIndex: 1,
|
||||
PageSize: 10
|
||||
})
|
||||
const handleSizeChange = (val) => {
|
||||
// console.log(`${val} items per page`)
|
||||
formInline.PageSize = val
|
||||
getTable()
|
||||
}
|
||||
const dialogToLead = ref(false)
|
||||
const handleCurrentChange = (val) => {
|
||||
// console.log(`current page: ${val}`)
|
||||
formInline.PageIndex = val
|
||||
getTable()
|
||||
}
|
||||
const StatisticsId = ref('')
|
||||
const handleDown = (row) => {
|
||||
// fileListFile.value = ref([])
|
||||
// const fileListFile1 = ref([])
|
||||
|
||||
DownloadBusinessStatistics({ StatisticsId: row.StatisticsId }).then(res => {
|
||||
// console.log(res, 'res--')
|
||||
const bNE = new Blob([res])
|
||||
const urlNE = window.URL.createObjectURL(bNE)
|
||||
const aNE = document.createElement('a')
|
||||
aNE.href = urlNE
|
||||
aNE.download = '业务统计表.xlsx'
|
||||
document.body.appendChild(aNE)
|
||||
aNE.click()
|
||||
window.URL.revokeObjectURL(urlNE)
|
||||
})
|
||||
}
|
||||
|
||||
// 取消
|
||||
const closeDialog = () => {
|
||||
for (const key in form) {
|
||||
form[key] = ''
|
||||
}
|
||||
StatisticsId.value = ''
|
||||
dialogFormVisible.value = false
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.PageContent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.WebToolbar {
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
:deep(.el-form-item__content) {
|
||||
width: 256px !important;
|
||||
height: 32px !important;
|
||||
}
|
||||
:deep(.el-input) {
|
||||
width: 256px !important;
|
||||
}
|
||||
:deep(.el-select) {
|
||||
width: 256px !important;
|
||||
}
|
||||
:deep(.el-form-item__label) {
|
||||
color: #666 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ButtonAssembly {
|
||||
.el-button {
|
||||
width: 84px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.el-button:nth-child(1) {
|
||||
background-color: #0d867f;
|
||||
}
|
||||
.el-button:nth-child(2) {
|
||||
background-color: #f2f3f5;
|
||||
}
|
||||
}
|
||||
|
||||
.Tabulation {
|
||||
width: 100%;
|
||||
height: calc(100% - 72px);
|
||||
background-color: #fff;
|
||||
margin-top: 14px;
|
||||
padding: 20px;
|
||||
.actionBar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
color: #1d2129;
|
||||
line-height: 28px;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
}
|
||||
}
|
||||
.Worktop {
|
||||
.el-button {
|
||||
border: 1px solid #0d867f;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #0d867f;
|
||||
}
|
||||
.el-button:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
.BlueBack {
|
||||
background: #0d867f;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.BlueBack:hover {
|
||||
background-color: #0d867f;
|
||||
}
|
||||
.Delete {
|
||||
background: #f2f3f5;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #1d2129;
|
||||
line-height: 22px;
|
||||
border: none;
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.Delete:hover {
|
||||
background-color: #f2f3f5;
|
||||
}
|
||||
}
|
||||
.ExaminationForm {
|
||||
margin-top: 16px;
|
||||
background-color: #0077aa;
|
||||
}
|
||||
.el-table tr {
|
||||
height: 41px;
|
||||
}
|
||||
.el-table td {
|
||||
height: 41px;
|
||||
}
|
||||
:deep(th) {
|
||||
background-color: #e5e6eb;
|
||||
}
|
||||
}
|
||||
.el-pagination {
|
||||
float: right;
|
||||
background-color: #fff !important;
|
||||
margin-top: 18px;
|
||||
}
|
||||
:deep(.el-pager li.is-active) {
|
||||
background-color: #e7f9f8 !important;
|
||||
font-weight: 400;
|
||||
color: #0d867f !important;
|
||||
}
|
||||
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
|
||||
background-color: #e7f9f8 !important;
|
||||
}
|
||||
|
||||
:deep(.el-select) {
|
||||
width: 280px !important;
|
||||
}
|
||||
:deep(.el-input) {
|
||||
width: 280px !important;
|
||||
}
|
||||
.example {
|
||||
margin-left: 20px;
|
||||
color: red;
|
||||
}
|
||||
.backInformation {
|
||||
:deep(.el-input) {
|
||||
width: 280px !important;
|
||||
height: 120px !important;
|
||||
}
|
||||
}
|
||||
.dialog-footer {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
:deep(.el-textarea__inner) {
|
||||
width: 280px !important;
|
||||
}
|
||||
.user-name,.register{
|
||||
cursor: pointer;
|
||||
}
|
||||
.functionalUnit{
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
.el-button {
|
||||
width: 84px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
color: #fff;
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.el-button:nth-child(1) {
|
||||
background-color: #2192ba;
|
||||
}
|
||||
.el-button:nth-child(2) {
|
||||
background-color: #17c85f;
|
||||
}
|
||||
}
|
||||
.TabularTitle{
|
||||
font-size: 14px;
|
||||
color: #747272;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.pagination{
|
||||
width: 100%;
|
||||
height:30px;
|
||||
:deep(.el-pagination){
|
||||
margin-top: 9px!important;
|
||||
}
|
||||
}
|
||||
.addSlip{
|
||||
.el-button{
|
||||
border: none;
|
||||
background-color: #0077aa;
|
||||
margin-top: 8px;
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-pagination){
|
||||
margin-top: 8px!important;
|
||||
}
|
||||
}
|
||||
.ml-3{
|
||||
margin-left: 20px;
|
||||
}
|
||||
.upload-file-uploader{
|
||||
width: 50%;
|
||||
}
|
||||
.el-upload-list .el-upload-list__item{
|
||||
width: 33% !important;
|
||||
float: left;
|
||||
margin-left: -385px;
|
||||
margin-top: 25px;
|
||||
:deep(.horizontal-list ul .el-upload-list__item) {
|
||||
width: 33% !important;
|
||||
float: left; margin-top: 25px;
|
||||
}
|
||||
:deep(.el-link__inner ) {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<template>
|
||||
<div class="loginPage">
|
||||
<div class="loginLayout">
|
||||
<div class="Login-content">
|
||||
<div class="loginTitle">
|
||||
<!-- <img src="../../assets/login/Login-logo.png" alt="" /> -->
|
||||
<p>后台管理系统</p>
|
||||
</div>
|
||||
<div class="loginInput">
|
||||
<p>欢迎登录</p>
|
||||
<div class="login_from">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
style="max-width: 600px"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="auto"
|
||||
class="demo-ruleForm"
|
||||
:size="formSize"
|
||||
status-icon
|
||||
>
|
||||
<el-form-item label="" prop="login_name">
|
||||
<el-input
|
||||
v-model="ruleForm.login_name"
|
||||
placeholder="请输入账号"
|
||||
:prefix-icon="User"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
v-model="ruleForm.password"
|
||||
placeholder="请输入密码"
|
||||
:prefix-icon="Lock"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-button @click="handleLogin">登录</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { User, Lock } from '@element-plus/icons-vue'
|
||||
import { apiLogin } from '@/api/index.js'
|
||||
import JSEncrypt from 'jsencrypt'
|
||||
|
||||
// 登录表单
|
||||
const formSize = ref('default')
|
||||
const ruleFormRef = ref()
|
||||
const ruleForm = reactive({
|
||||
login_name: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const encryptor = ref(null)
|
||||
onMounted(() => {
|
||||
encryptor.value = new JSEncrypt() // 创建加密对象实例
|
||||
const pubKey =
|
||||
'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA2TEstfATFdDWntbJTCPer9FOdwTRe58Vjy9T238/uUQYyoTHClfQCCKnys4elHCE0D0B7D/k2hK9U+xu1hWv1v4lH+n+t5duNVGq3sa5+pOq8j1ztec3W+wlcFgplYJq78XBYGYDbyfhmu5KeDeImsiccwnq3WvigfZYPbTvGv2YsqXDpTp+/s0hQsrYeATr2MuhiBhQGynLUvKCEcWvd/GNByMxJdJwl0k+IZW+DiCDmNX9Qwj23HF7U+Om7jEZC+Li/j2MHA5C4eEtVzgVC4VZETVOIcLv/UDufnAlneTJK2Exo+4YFEg9S1shpqUz9shSBl8JF9DM2a3KKmxc4wIDAQAB'
|
||||
encryptor.value.setPublicKey(pubKey)
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const handleLogin = async () => {
|
||||
const rsaPassWord = encryptor.value.encrypt(ruleForm.password) // 对内容进行加密
|
||||
try {
|
||||
const response = await apiLogin({
|
||||
login_name: ruleForm.login_name,
|
||||
password: rsaPassWord
|
||||
})
|
||||
if (response.code === 0) {
|
||||
console.log(response.data, 'response.data')
|
||||
// 登录成功，保存 token 并跳转到指定路由
|
||||
localStorage.setItem('token', response.data.token)
|
||||
localStorage.setItem('ReviewerId', response.data.user_id)
|
||||
localStorage.setItem('Reviewer', response.data.real_name)
|
||||
await router.push('/ExaminationManagement')
|
||||
} else {
|
||||
// 弹出包含错误信息的提示框
|
||||
alert('密码错误')
|
||||
}
|
||||
} catch (error) {
|
||||
// 处理异常情况，比如网络错误等
|
||||
alert('请求失败')
|
||||
}
|
||||
}
|
||||
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入密码'))
|
||||
} else {
|
||||
const passLength = value.length
|
||||
if (passLength < 5 || passLength > 20) {
|
||||
callback(new Error('密码长度为5-20'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
const rules = reactive({
|
||||
password: [
|
||||
{ required: true, trigger: 'blur', message: '请输入密码' },
|
||||
{ validator: validatePass, trigger: 'blur' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.loginPage {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.loginLayout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("../../assets/login/Login.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.loginTitle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 36px;
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
p {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
font-family: DouyinSansBold;
|
||||
font-weight: 700;
|
||||
font-size: 38px;
|
||||
color: #0d867f;
|
||||
margin-top: 11px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
.loginInput {
|
||||
width: 506px;
|
||||
height: 402px;
|
||||
background: #fdfffd;
|
||||
box-shadow: 0 0 12px 0 rgba(160, 194, 182, 0.29);
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
padding: 0 63px;
|
||||
overflow: hidden;
|
||||
p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
line-height: 30px;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 52px;
|
||||
}
|
||||
.el-button {
|
||||
width: 380px;
|
||||
height: 50px;
|
||||
background: #0d867f;
|
||||
border: none;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
.login_from {
|
||||
.el-input {
|
||||
height: 50px;
|
||||
border: 1px solid rgba(13, 134, 127, 1);
|
||||
}
|
||||
.el-form-item--default {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:deep(.el-input__wrapper:hover) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
:deep(.el-input) {
|
||||
--el-input-focus-border-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
base: './',
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
},
|
||||
server: {
|
||||
// port: 8080,
|
||||
host: '0.0.0.0',
|
||||
cors: true,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://172.16.1.253:4000',
|
||||
changeOrigin: true
|
||||
// rewrite: (path) => path.replace(/^\/api/, '')
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue