2025
/
smart-factory
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

调整布局样式

Browse Source
main
chengyu 2 weeks ago
parent f2899f62a7
commit a3270b5ca0
13 changed files with 97 additions and 47 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      web/package.json
  2. BIN
      web/src/assets/logo/logo.png
  3. 14
      web/src/assets/styles/sidebar.scss
  4. 8
      web/src/assets/styles/variables.module.scss
  5. 19
      web/src/layout/components/AppMain.vue
  6. 3
      web/src/layout/components/LeftRight.vue
  7. 6
      web/src/layout/components/Navbar.vue
  8. 10
      web/src/layout/components/Sidebar/index.vue
  9. 20
      web/src/views/constructionScheduling/construction-report/index.vue
  10. 45
      web/src/views/constructionScheduling/construction-report/options.js
  11. 13
      web/src/views/constructionScheduling/engineering-log/index.vue
  12. 2
      web/src/views/constructionScheduling/engineering-log/options.js
  13. 2
      web/vite.config.js

2
web/package.json
Unescape View File

@ -39,7 +39,7 @@
"quill-image-resize-module": "^3.0.0", "quill-image-resize-module": "^3.0.0",
"quill-image-uploader": "^1.3.0", "quill-image-uploader": "^1.3.0",
"uuid": "^11.0.4", "uuid": "^11.0.4",
"vue": "3.2.37", "vue": "3.2.41",
"vue-cropper": "1.0.3", "vue-cropper": "1.0.3",
"vue-router": "4.0.14", "vue-router": "4.0.14",
"vuedraggable": "^4.1.0", "vuedraggable": "^4.1.0",

BIN
web/src/assets/logo/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

14
web/src/assets/styles/sidebar.scss
Unescape View File

@ -1,5 +1,5 @@
#app { #app {
background: linear-gradient( 180deg, #DFEDFA 0%, #F5F6FA 100%);
.main-container { .main-container {
min-height: 100%; min-height: 100%;
transition: margin-left .28s; transition: margin-left .28s;
@ -25,7 +25,7 @@
z-index: 1001; z-index: 1001;
overflow: hidden; overflow: hidden;
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
box-shadow: 2px 0 6px rgba(0,21,41,.35); box-shadow: 2px 0 6px rgba(0,21,41,.05);
// reset element-ui css // reset element-ui css
.horizontal-collapse-transition { .horizontal-collapse-transition {
@ -97,18 +97,24 @@
min-width: $base-sidebar-width !important; min-width: $base-sidebar-width !important;
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.06) !important; background-color: transparent !important;
} }
} }
& .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title, & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
& .theme-dark .el-sub-menu .el-menu-item { & .theme-dark .el-sub-menu .el-menu-item {
background-color: $base-sub-menu-background !important; background-color: $base-sub-menu-background;
&:hover { &:hover {
background-color: $base-sub-menu-hover !important; background-color: $base-sub-menu-hover !important;
color: white;
} }
} }
.el-menu-item.is-active {
background-color: #027CFB !important;
color: white !important;
}
} }
.hideSidebar { .hideSidebar {

8
web/src/assets/styles/variables.module.scss
Unescape View File

@ -10,16 +10,16 @@ $panGreen: #30B08F;
// 默认菜单主题风格 // 默认菜单主题风格
$base-menu-color: #bfcbd9; $base-menu-color: #bfcbd9;
$base-menu-color-active: #f4f4f5; $base-menu-color-active: #333333;
$base-menu-background: #304156; $base-menu-background: transparent;
$base-logo-title-color: #ffffff; $base-logo-title-color: #ffffff;
$base-menu-light-color: rgba(0, 0, 0, 0.7); $base-menu-light-color: rgba(0, 0, 0, 0.7);
$base-menu-light-background: #ffffff; $base-menu-light-background: #ffffff;
$base-logo-light-title-color: #001529; $base-logo-light-title-color: #001529;
$base-sub-menu-background: #1f2d3d; $base-sub-menu-background: transparent;
$base-sub-menu-hover: #001528; $base-sub-menu-hover: #027CFB;
// 自定义暗色菜单风格 // 自定义暗色菜单风格
/** /**

19
web/src/layout/components/AppMain.vue
Unescape View File

@ -1,5 +1,6 @@
<template> <template>
<section class="app-main"> <section class="app-main">
<div class="page-title">{{routeName}}</div>
<router-view v-slot="{ Component, route }"> <router-view v-slot="{ Component, route }">
<transition name="fade-transform" mode="out-in"> <transition name="fade-transform" mode="out-in">
<keep-alive :include="tagsViewStore.cachedViews"> <keep-alive :include="tagsViewStore.cachedViews">
@ -12,9 +13,16 @@
</template> </template>
<script setup> <script setup>
const route = useRoute();
import iframeToggle from "./IframeToggle/index" import iframeToggle from "./IframeToggle/index"
import useTagsViewStore from '@/store/modules/tagsView' import useTagsViewStore from '@/store/modules/tagsView'
const routeName = ref(route.meta.title);
watch(() => route.meta.title, (newTitle) => {
routeName.value = newTitle;
});
defineProps({ defineProps({
height: { height: {
type: String, type: String,
@ -25,6 +33,17 @@ const tagsViewStore = useTagsViewStore()
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-title {
font-weight: bold;
font-size: 2.25rem;
color: #333333;
text-align: left;
font-style: normal;
text-transform: none;
padding-top: 2.125rem;
padding-left: 1.5rem;
}
.app-main { .app-main {
/* 50= navbar 50 */ /* 50= navbar 50 */
min-height: calc(100vh - v-bind(height)); min-height: calc(100vh - v-bind(height));

3
web/src/layout/components/LeftRight.vue
Unescape View File

@ -7,7 +7,7 @@
<navbar @setLayout="setLayout" /> <navbar @setLayout="setLayout" />
<tags-view v-if="needTagsView" /> <tags-view v-if="needTagsView" />
</div> </div>
<app-main /> <app-main :height="defaultHeight"/>
<settings ref="settingRef" /> <settings ref="settingRef" />
</div> </div>
</div> </div>
@ -22,6 +22,7 @@ import defaultSettings from '@/settings'
import useAppStore from '@/store/modules/app' import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings' import useSettingsStore from '@/store/modules/settings'
const defaultHeight = '4.625rem'
const settingsStore = useSettingsStore() const settingsStore = useSettingsStore()
const theme = computed(() => settingsStore.theme); const theme = computed(() => settingsStore.theme);
const sideTheme = computed(() => settingsStore.sideTheme); const sideTheme = computed(() => settingsStore.sideTheme);

6
web/src/layout/components/Navbar.vue
Unescape View File

@ -7,7 +7,7 @@
<div class="right-menu"> <div class="right-menu">
<template v-if="appStore.device !== 'mobile'"> <template v-if="appStore.device !== 'mobile'">
<header-search id="header-search" class="right-menu-item" /> <!-- <header-search id="header-search" class="right-menu-item" /> -->
<!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> --> <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> -->
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom"> <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" /> <size-select id="size-select" class="right-menu-item hover-effect" />
@ -46,7 +46,7 @@ import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger' import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull' import Screenfull from '@/components/Screenfull'
// import SizeSelect from '@/components/SizeSelect' // import SizeSelect from '@/components/SizeSelect'
import HeaderSearch from '@/components/HeaderSearch' // import HeaderSearch from '@/components/HeaderSearch'
// import RuoYiGit from '@/components/RuoYi/Git' // import RuoYiGit from '@/components/RuoYi/Git'
// import RuoYiDoc from '@/components/RuoYi/Doc' // import RuoYiDoc from '@/components/RuoYi/Doc'
import useAppStore from '@/store/modules/app' import useAppStore from '@/store/modules/app'
@ -97,7 +97,7 @@ function setLayout() {
height: 50px; height: 50px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: #fff; // background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container { .hamburger-container {

10
web/src/layout/components/Sidebar/index.vue
Unescape View File

@ -1,14 +1,14 @@
<template> <template>
<div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> <div :class="{ 'has-logo': showLogo }">
<logo v-if="showLogo" :collapse="isCollapse" /> <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
<img src="../../../assets/logo/logo.png" style="margin: 2.625rem 5.0625rem 1.8125rem 5.0625rem;width: 4.25rem;height: 4.25rem;" alt="">
<el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper"> <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
:collapse="isCollapse" :collapse="isCollapse"
:background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
:text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:unique-opened="true" :unique-opened="true"
:active-text-color="theme" active-text-color="#027CFB"
background-color="transparent"
:collapse-transition="false" :collapse-transition="false"
mode="vertical" mode="vertical"
> >

20
web/src/views/constructionScheduling/construction-report/index.vue
Unescape View File

@ -85,9 +85,20 @@ function getPlanList(params) {
<el-table-column label="质量安全" align="center" prop="qs" /> <el-table-column label="质量安全" align="center" prop="qs" />
<el-table-column label="机械设备运行" align="center" prop="equipmentOperation" /> --> <el-table-column label="机械设备运行" align="center" prop="equipmentOperation" /> -->
<el-table-column label="报告日期" align="center" prop="date" /> <el-table-column label="报告日期" align="center" prop="date" />
<el-table-column label="报告周期(日/周/月)" align="center" prop="cycle" /> <el-table-column label="报告类型(日/周/月)" align="center" prop="cycle" />
<el-table-column label="项目名称" align="center" prop="planName" /> <el-table-column label="报告内容" align="center" prop="planId" width="400">
<el-table-column label="建议" align="center" prop="advises" /> <template #default="scope">
<el-tooltip effect="dark" :content="scope.row.planId" placement="top">
<span style="display: inline-block; width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ scope.row.planId }}</span>
<template #content>
<div style="width: 300px; ">
{{ scope.row.planId }}
</div>
</template>
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="其他建议" align="center" prop="advises" />
<el-table-column label="总体施工进度" align="center" prop="totalProgress"> <el-table-column label="总体施工进度" align="center" prop="totalProgress">
<template #default="scope"> <template #default="scope">
<el-progress :stroke-width="6" :percentage="Number(scope.row.totalProgress)" /> <el-progress :stroke-width="6" :percentage="Number(scope.row.totalProgress)" />
@ -112,4 +123,5 @@ function getPlanList(params) {
</div> </div>
</template> </template>
<style scoped></style> <style scoped>
</style>

45
web/src/views/constructionScheduling/construction-report/options.js
Unescape View File

@ -18,15 +18,15 @@ export const baseModelOptions = () => {
{ {
tag: 'BaseSelect', tag: 'BaseSelect',
label: '报告周期:', label: '报告类型:',
key: 'cycle', key: 'cycle',
value: '', value: '',
default: '', default: '',
rules: [ rules: [
{ required: true, message: '请选择报告周期', trigger: 'blur' }, { required: true, message: '请选择报告类型', trigger: 'blur' },
], ],
attribute: { //属性 attribute: { //属性
placeholder: '请选择报告周期', placeholder: '请选择报告类型',
options: [{ options: [{
value: "日", value: "日",
label: "日" label: "日"
@ -40,16 +40,17 @@ export const baseModelOptions = () => {
}, },
}, },
{ {
tag: 'BaseSelect', tag: 'el-input',
label: '项目名称:', label: '报告内容:',
key: 'planId', key: 'planId',
value: '', value: '',
default: '', default: '',
rules: [ rules: [
{ required: true, message: '请选择项目名称', trigger: 'blur' }, { required: true, message: '请输入报告内容', trigger: 'blur' },
], ],
attribute: { //属性 attribute: { //属性
placeholder: '请选择项目名称', type: 'textarea',
placeholder: '请输入报告内容',
options: [] options: []
}, },
}, },
@ -111,7 +112,7 @@ export const baseModelOptions = () => {
// }, // },
{ {
tag: 'el-input', tag: 'el-input',
label: '建议:', label: '其他建议:',
key: 'advises', key: 'advises',
value: '', value: '',
default: '', default: '',
@ -143,20 +144,20 @@ export const baseModelOptions = () => {
export const baseFilterOptions = () => { export const baseFilterOptions = () => {
return [ return [
{ // {
tag: 'BaseSelect', // tag: 'BaseSelect',
label: '项目名称:', // label: '项目名称:',
key: 'planId', // key: 'planId',
value: '', // value: '',
default: '', // default: '',
rules: [ // rules: [
{ required: true, message: '请选择项目名称', trigger: 'blur' }, // { required: true, message: '请选择项目名称', trigger: 'blur' },
], // ],
attribute: { //属性 // attribute: { //属性
placeholder: '请选择项目名称', // placeholder: '请选择项目名称',
options: [] // options: []
}, // },
}, // },
// { // {
// tag: 'el-input', // tag: 'el-input',
// label: '材料使用:', // label: '材料使用:',

13
web/src/views/constructionScheduling/engineering-log/index.vue
Unescape View File

@ -51,7 +51,18 @@ onMounted(() => {
<el-table-column label="风力" align="center" prop="wind" /> <el-table-column label="风力" align="center" prop="wind" />
<el-table-column label="现场负责人" align="center" prop="principalName" /> <el-table-column label="现场负责人" align="center" prop="principalName" />
<el-table-column label="联系方式" align="center" prop="principalTel" /> <el-table-column label="联系方式" align="center" prop="principalTel" />
<el-table-column label="施工情况" align="center" prop="constructionSituation" /> <el-table-column label="施工情况" align="center" prop="constructionSituation" width="400">
<template #default="scope">
<el-tooltip effect="dark" :content="scope.row.constructionSituation" placement="top">
<span style="display: inline-block; width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ scope.row.constructionSituation }}</span>
<template #content>
<div style="width: 300px; ">
{{ scope.row.constructionSituation }}
</div>
</template>
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="其他事项" align="center" prop="otherBusiness" /> <el-table-column label="其他事项" align="center" prop="otherBusiness" />
<el-table-column label="创建人" align="center" prop="creator" /> <el-table-column label="创建人" align="center" prop="creator" />
<el-table-column label="创建时间" align="center" prop="createTime" /> <el-table-column label="创建时间" align="center" prop="createTime" />

2
web/src/views/constructionScheduling/engineering-log/options.js
Unescape View File

@ -100,7 +100,7 @@ export const baseModelOptions = () => {
value: '', value: '',
default: '', default: '',
attribute: {//属性 attribute: {//属性
type: 'text', type: 'textarea',
placeholder: '请输入施工情况', placeholder: '请输入施工情况',
}, },
}, },

2
web/vite.config.js
Unescape View File

@ -43,7 +43,7 @@ export default defineConfig(({ mode, command }) => {
}, },
proxy: { proxy: {
'/dev-api': { '/dev-api': {
target: 'http://192.168.2.39:8080', target: 'http://192.168.2.223:8080',
// target: 'http://39.100.74.100:8080', // target: 'http://39.100.74.100:8080',
changeOrigin: true, changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '') rewrite: (p) => p.replace(/^\/dev-api/, '')

Write Preview
Loading…
Cancel
Save