Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
29f6160b by xiaomiao
Options

--no commit message

2 parents 61c6d9a4 7c233183
Expand all
Inline Side-by-side
Showing 21 changed files with 121 additions and 264 deletions
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-27 13:25:25
-->
# 安装依赖
npm install
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
......@@ -14,5 +19,6 @@ npm install --registry=https://registry.npm.taobao.org
- `docs` 文档/注释
- `chore` 依赖更新/脚手架配置修改等
- `wip` 开发中
## 项目换肤
给html根标签设置一个data-theme属性，然后通过js切换data-theme的属性值，Scss根据此属性来判断使用对应主题变量
\ No newline at end of file
......
{
"TITLE": "汉中市数据上报系统",
"THEME": "sb",
"CODE": "BDCSBPT",
"CODE": "BDCJGPT",
"SERVERAPI": "/bdcsjsb",
"MANAGEMENTAPI": "http://192.168.2.38:8090/management"
}
\ No newline at end of file
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-27 09:53:16
*/
import dialogBox from '@/components/DialogBox'
import LbTable from '@/components/LbTable'
import Theme from '@/components/Theme.vue'
import Breadcrumb from "@/components/Breadcrumb.vue";
// 引入按钮
import btn from '@/components/Button.vue'
......@@ -12,8 +16,6 @@ export default {
Vue.component('Breadcrumb', Breadcrumb);
Vue.component('btn', btn);
Vue.component('lbTable', LbTable);
Vue.component('Theme', Theme);
Vue.prototype.$popup = Popup.install;
Vue.prototype.$alertMes = MessageBox.alert;
}
}
\ No newline at end of file
......
<template>
<el-color-picker v-model="theme"
:predefine="['#409EFF', '#1890ff', '#304156', '#212121', '#11a983', '#13c2c2', '#6959CD', '#f5222d',]"
class="theme-picker" popper-class="theme-picker-dropdown" />
</template>
<script>
const version = require('element-ui/package.json').version // element-ui version from node_modules
const ORIGINAL_THEME = '#409EFF' // default color
export default {
data () {
return {
chalk: '', // content of theme-chalk css
theme: ''
}
},
computed: {
defaultTheme () {
return this.$store.state.app.theme
}
},
watch: {
defaultTheme: {
handler: function (val, oldVal) {
this.theme = val
},
immediate: true
},
async theme (val) {
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
if (typeof val !== 'string') return
const themeCluster = this.getThemeCluster(val.replace('#', ''))
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
const $message = this.$message({
message: ' Compiling the theme',
customClass: 'theme-message',
type: 'success',
duration: 0,
iconClass: 'el-icon-loading'
})
const getHandler = (variable, id) => {
return () => {
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
let styleTag = document.getElementById(id)
if (!styleTag) {
styleTag = document.createElement('style')
styleTag.setAttribute('id', id)
document.head.appendChild(styleTag)
}
styleTag.innerText = newStyle
}
}
if (!this.chalk) {
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
await this.getCSSString(url, 'chalk')
}
const chalkHandler = getHandler('chalk', 'chalk-style')
chalkHandler()
const styles = [].slice.call(document.querySelectorAll('style'))
.filter(style => {
const text = style.innerText
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
})
styles.forEach(style => {
const { innerText } = style
if (typeof innerText !== 'string') return
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
})
this.$emit('change', val)
$message.close()
}
},
methods: {
updateStyle (style, oldCluster, newCluster) {
let newStyle = style
oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
})
return newStyle
},
getCSSString (url, variable) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
resolve()
}
}
xhr.open('GET', url)
xhr.send()
})
},
getThemeCluster (theme) {
const tintColor = (color, tint) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
if (tint === 0) { // when primary color is in its rgb space
return [red, green, blue].join(',')
} else {
red += Math.round(tint * (255 - red))
green += Math.round(tint * (255 - green))
blue += Math.round(tint * (255 - blue))
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
}
const shadeColor = (color, shade) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
red = Math.round((1 - shade) * red)
green = Math.round((1 - shade) * green)
blue = Math.round((1 - shade) * blue)
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
const clusters = [theme]
for (let i = 0; i <= 9; i++) {
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
}
clusters.push(shadeColor(theme, 0.1))
return clusters
}
}
}
</script>
<style>
.theme-message,
.theme-picker-dropdown {
z-index: 99999 !important;
}
.theme-picker .el-color-picker__trigger {
height: 26px !important;
width: 26px !important;
padding: 2px;
}
.theme-picker-dropdown .el-color-dropdown__link-btn {
display: none;
}
</style>
\ No newline at end of file
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-24 17:10:32
* @LastEditTime: 2023-03-27 14:09:57
-->
<template>
<div>
......@@ -48,9 +48,6 @@ export default {
asyncRoutes () {
return asyncRoutes
}
},
mounted () {
console.log(this.permission_routes.slice(5), 'permission_routes');
}
}
</script>
......
......@@ -3,7 +3,8 @@
<scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
<router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
@click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''" @contextmenu.prevent.native="openMenu(tag, $event)">
@click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent.native="openMenu(tag, $event)">
{{ tag.title }}
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
</router-link>
......@@ -190,30 +191,32 @@ export default {
</script>
<style lang="scss" scoped>
@import "~@/styles/_handle.scss";
.tags-view-container {
height: 40px;
width: 100%;
background: #fff;
border-bottom: 1px solid #d8dce5;
box-sizing: border-box;
padding-top: 3px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
margin-bottom: 5px;
padding-top: 2px;
margin-bottom: 7px;
border-radius: 4px;
.tags-view-wrapper {
.tags-view-item {
display: inline-block;
position: relative;
cursor: pointer;
height: 26px;
line-height: 26px;
border: 1px solid #d8dce5;
color: #495060;
background: #fff;
color: #4A4A4A;
@include font_color("tagsText");
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
border-radius: 4px;
@include borderColor("tagsBorderColor");
&:first-of-type {
margin-left: 15px;
......@@ -224,13 +227,13 @@ export default {
}
&.active {
background-color: #0794FF;
color: #fff;
border-color: #0794FF;
@include background("tagsBg");
@include borderColor("tagsActiveText");
@include font_color("tagsActiveText");
&::before {
content: '';
background: #fff;
@include background("tagsActiveText");
display: inline-block;
width: 8px;
height: 8px;
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-27 14:25:19
*/
import Vue from 'vue'
import router from "./router";
import store from "./store";
......@@ -16,7 +12,6 @@ NProgress.configure({ showSpinner: false });
router.beforeEach(async (to, from, next) => {
getTheme()
NProgress.start();
window.document.documentElement.setAttribute("data-theme", 'blue');
document.title = getPageTitle(to.meta.title);
let hasAddDict = store.state.dict.addDict;
let hasUser = store.state.user.hasUser;
......@@ -25,6 +20,7 @@ router.beforeEach(async (to, from, next) => {
localStorage.removeItem("token");
next();
} else {
window.document.documentElement.setAttribute("data-theme", 'blue');
let code = Vue.prototype.BASE_API.CODE
//判断token是否存在
const hasToken = localStorage.getItem("token");
......@@ -36,6 +32,7 @@ router.beforeEach(async (to, from, next) => {
if (hasAddRoute) {
next();
} else {
//请求菜单
const { result: getMenuData } = (await getMenuInfo(code)) || [];
const accessRoutes = await store.dispatch(
......@@ -55,6 +52,7 @@ router.beforeEach(async (to, from, next) => {
} else {
next();
}
}
} else {
if (code == 'BDCSBPT') {
......
......@@ -20,6 +20,15 @@
@function themed($key) {
@return map-get($theme-map, $key);
}
//获取边框颜色
@mixin borderColor($color) {
@include themeify {
border: 1px solid themed($color) !important;
}
}
//获取渐变背景
@mixin background($color) {
@include themeify {
......@@ -33,9 +42,10 @@
background-color: themed($color) !important;
}
}
//获取字体颜色
@mixin font_color($color) {
@include themeify {
color: themed($color)!important;
color: themed($color) !important;
}
}
\ No newline at end of file
......
......@@ -7,15 +7,25 @@ $themes: (blue: ( //背景
menuActiveText: #4162D8,
// 没有子集
submenuBg: #3D59C4,
submenuColor: #FFFFFF
submenuColor: #FFFFFF,
// tags
tagsBorderColor: #E5E5E5,
tagsBg: rgba(65, 98, 216, 0.1),
tagsText: #4A4A4A,
tagsActiveText: #4162D8,
// 操纵btn
btnBg: #4162D8,
btnColor: #4162D8,
// table样式相关
pagBg:rgba(65, 98, 216, 0.1),
pagBorderColor: #D9D9D9,
pagText: #4A4A4A,
pagActiveText: #4162D8,
),
green: (
navbg: #0F8B80,
green: (navbg: #0F8B80,
menuBg:#121A2E,
menuActive: linear-gradient(90deg, rgba(61,90,198,0.7) 0%, rgba(61,90,198,0) 100%),
menuActive: linear-gradient(90deg, rgba(61, 90, 198, 0.7) 0%, rgba(61, 90, 198, 0) 100%),
//字体
menuText: #A1A7C2,
menuActiveText: #FFFFFF
)
)
\ No newline at end of file
menuActiveText: #FFFFFF))
\ No newline at end of file
......
......@@ -4,7 +4,7 @@
**/
/* theme color */
$--color-primary: #0F93F6;
$--color-primary: #4162D8;
$--color-success: #67C23B;
$--color-warning: #E6A23C;
$--color-danger: #F46C6C;
......
......@@ -9,12 +9,6 @@
line-height: 16px;
}
//input
.el-input__inner {
color: #FFFFFF !important;
padding: 0 7px !important;
}
// input 样式
// 全局css 加上以下代码，可以隐藏上下箭头
......@@ -429,10 +423,6 @@ table td {
background: color #074487;
}
.el-input__inner {
background-color: #074487;
}
.el-input.is-disabled .el-input__inner {
background-color: #074487;
}
......
......@@ -53,6 +53,12 @@
background-color: rgba(0, 0, 0, 0);
}
//input
.el-input__inner {
color: #FFFFFF !important;
padding: 0 7px !important;
}
// 查询表单样式
.from-clues {
height: 100%;
......@@ -77,7 +83,7 @@
.el-input__inner {
background: #07388B;
border-radius: 2px;
color: #CEF8FF !important;
color: #7A7A7A !important;
border: 1px solid #6BC1FC;
}
......@@ -1013,6 +1019,7 @@
.selbig {
width: 500px;
}
}
// 弹框中间区域样式
......@@ -1080,3 +1087,4 @@
text-align: center;
}
}
......
@import "~@/styles/_handle.scss";
// cover some element-ui styles
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
......@@ -172,6 +174,25 @@ input[type="number"] {
color: #4A4A4A;
}
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
@include borderColor("pagBorderColor");
background-color: #FFFFFF;
@include font_color("pagText");
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
@include background("pagBg");
border-radius: 4px;
@include font_color("pagActiveText");
@include borderColor("pagActiveText");
}
.el-table__header th {
background-color: #F1F3F7 !important;
}
.el-table tr td {
font-size: 14px;
color: #7A7A7A;
......@@ -197,4 +218,4 @@ input[type="number"] {
.el-form-item__content {
flex: 1;
}
}
\ No newline at end of file
......
@import '~@/styles/sbElement-ui.scss';
@import "~@/styles/_handle.scss";
//input
.el-input__inner {
color: #7A7A7A !important;
padding: 0 7px !important;
}
.from-clues {
......@@ -10,7 +17,7 @@
&-header {
width: 100%;
padding: 15px;
padding: 7px 15px 10px 15px;
box-sizing: border-box;
background-size: 100% 100%;
background: #FFFFFF;
......@@ -97,7 +104,7 @@
.cx {
width: 86px;
height: 32px;
background-color: #4162D8;
@include background_color("btnBg");
color: white;
border: none;
}
......@@ -105,7 +112,7 @@
.cx:hover {
width: 86px;
height: 32px;
background-color: #4162D8;
@include background_color("btnBg");
color: white;
border: none;
}
......@@ -114,8 +121,7 @@
width: 86px;
height: 32px;
background-color: white;
color: #4162D8;
@include font_color("btnColor");
border: 1px solid rgba(65, 98, 216, 0.3);
}
......@@ -123,24 +129,18 @@
width: 86px;
height: 32px;
background-color: white;
color: #4162D8;
@include font_color("btnColor");
border: 1px solid rgba(65, 98, 216, 0.3);
}
.el-button:focus {
// background: none;
}
.cx:focus {
color: white;
background-color: #4162D8;
@include background_color("btnBg");
background-size: cover;
}
.cz:focus {
color: #4162D8;
background-color: white;
;
background-size: cover;
}
......
......@@ -9,7 +9,7 @@ $yellow:#FEC171;
$panGreen: #30B08F;
// header
$headerHeight: 74px;
$headerHeight: 72px;
// sidebar
$menuText:#ffffff;
......
......@@ -15,7 +15,7 @@
<el-input type="password" class="password" v-model="user.password" placeholder="请输入密码"
show-password></el-input>
</el-form-item>
<!-- <el-form-item prop="yz">
<el-form-item prop="yz">
<div class="flex-container">
<div class="flex-input">
<el-input class="yz" @keyup.native="login('user')" v-model="user.yz" placeholder="请输入验证码"></el-input>
......@@ -26,7 +26,7 @@
<font id="renovate" @click="verification">换一批</font>
</div>
</div>
</el-form-item> -->
</el-form-item>
<el-form-item class="login-btn">
<el-button type="primary" style="width: 100%" @click="login('user')">登录</el-button>
</el-form-item>
......@@ -244,9 +244,7 @@ export default {
.login-inner-bg {
background: white;
width: 24.6%;
height: 47%;
min-width: 360px;
min-height: 380px;
top: 30%;
right: 38%;
position: absolute;
......
......@@ -3,7 +3,7 @@
<!-- 表单部分 -->
<div class="from-clues-header">
<el-form @submit.native.prevent :model="ruleForm" label-width="120px">
<el-form-item v-if="BASE_API.THEME=='jg'">
<el-form-item v-if="BASE_API.THEME == 'jg'">
<Breadcrumb />
</el-form-item>
<el-row :gutter="20" class="mb-5">
......
......@@ -2,7 +2,7 @@
* @Author: xiaomiao 1158771342@qq.com
* @Date: 2023-03-09 20:54:28
* @LastEditors: xiaomiao 1158771342@qq.com
* @LastEditTime: 2023-03-16 19:40:40
* @LastEditTime: 2023-03-27 14:26:49
* @FilePath: \上报\bdcjg-web\src\views\system\information\index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -67,26 +67,5 @@
</script>
<style scoped lang="scss">
.information {
display: flex;
flex-direction: column;
.btnColRight {
margin-top: 10px;
display: flex;
justify-content: center;
// background-color: cadetblue;
height: 30px;
}
/deep/.content {
.el-input__inner {
background: none;
}
.user-info {
background: none;
}
}
.boxin {
flex: 1;
}
}
@import "~@/styles/mixin.scss";
</style>
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-27 10:27:32
*/
import filter from '@/utils/filter.js'
class data extends filter {
constructor() {
......@@ -17,7 +22,8 @@ class data extends filter {
},
{
prop: "cronExpression",
label: "cron表达式"
label: "cron表达式",
width: 160,
},
{
prop: "beanName",
......@@ -34,7 +40,7 @@ class data extends filter {
render: (h, scope) => {
return (
<div>
{ this.stateStatus(scope.row.jobStatus) }
{this.stateStatus(scope.row.jobStatus)}
</div>
)
},
......
......@@ -6,7 +6,6 @@ function resolve (dir) {
}
const name = defaultSettings.title
const port = process.env.port || process.env.npm_config_port || 8888 // dev port
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
/**
......