diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ + + diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue deleted file mode 100644 index 6f0bd9c..0000000 --- a/src/components/NomalTable/index.vue +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ + + diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index aaffab5..0c38d31 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,18 @@ - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ + + diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index aaffab5..0c38d31 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,18 @@ - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ + + diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index aaffab5..0c38d31 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,18 @@ - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ + + diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index aaffab5..0c38d31 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,18 @@ - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ + + diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index aaffab5..0c38d31 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,18 @@ - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ + + diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index aaffab5..0c38d31 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,18 @@ - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ + + diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index aaffab5..0c38d31 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,18 @@ - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ + + diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index aaffab5..0c38d31 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,18 @@ - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ + + diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index aaffab5..0c38d31 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,18 @@ - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ + + diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index aaffab5..0c38d31 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,18 @@ - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ + + diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index aaffab5..0c38d31 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,18 @@ - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ + + diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index aaffab5..0c38d31 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,18 @@ - - - diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue new file mode 100644 index 0000000..a98b8a2 --- /dev/null +++ b/src/components/NormalTable/index.vue @@ -0,0 +1,273 @@ + + + + + + diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue index 4945226..1597f93 100644 --- a/src/components/SearchArea/SearchArea.vue +++ b/src/components/SearchArea/SearchArea.vue @@ -10,6 +10,7 @@ 搜索 高级检索 重置 +
搜索 @@ -52,7 +53,7 @@ }, // 高级检索的样式，default页面内，dialog弹窗 size: { type: String, - default: '' + default: 'small' }// 按钮及输入框大小 }, data() { @@ -87,9 +88,15 @@ + diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue index 39bfd87..b3243ce 100644 --- a/src/components/layout/AppContainer.vue +++ b/src/components/layout/AppContainer.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,15 @@ props: { hasPadding: { type: Boolean, - default: true + default: false + }, + paddingSize: { + type: String, + default: '0px' + }, + background: { + type: String, + default: '#fff' } } } diff --git a/src/icons/svg/attendance-analyse.svg b/src/icons/svg/attendance-analyse.svg new file mode 100644 index 0000000..eabe95b --- /dev/null +++ b/src/icons/svg/attendance-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-attendance.svg b/src/icons/svg/icon-attendance.svg new file mode 100644 index 0000000..7adc1b6 --- /dev/null +++ b/src/icons/svg/icon-attendance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-clean2.svg b/src/icons/svg/icon-clean2.svg new file mode 100644 index 0000000..d76c1a5 --- /dev/null +++ b/src/icons/svg/icon-clean2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/icon-transfer2.svg b/src/icons/svg/icon-transfer2.svg new file mode 100644 index 0000000..d42ea6a --- /dev/null +++ b/src/icons/svg/icon-transfer2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index 4472436..37011d7 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -1,8 +1,8 @@ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 193b604..24ea99b 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -39,10 +39,10 @@ line-height: 50px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04); .hamburger-container { - line-height: 58px; + text-align: center; height: 50px; float: left; - padding: 0 10px; + padding: 0 12px; } .screenfull { position: absolute; diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue index b515f61..4ed6b5f 100644 --- a/src/layout/components/Sidebar/Item.vue +++ b/src/layout/components/Sidebar/Item.vue @@ -18,6 +18,8 @@ if (icon) { vnodes.push() + } else { + vnodes.push() } if (title) { diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 873610a..33d596a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -2,12 +2,9 @@ @@ -21,33 +18,19 @@ export default { components: { SidebarItem }, computed: { - permission_routers() { - let permission_routers = this.$store.getters.permission_routers - // const currentSys = { - // children: '', - // code: 'sanitation', - // icon: 'icon-setting', - // id: '1189107859077373282', - // ismenu: '0', - // levels: 1, - // name: '环卫子系统', - // num: 0, - // parentId: '0', - // resourceType: '02', - // url: '/sanitation' - // } - const currentSystem = this.$store.getters.currentSystem - permission_routers = permission_routers.filter(item => { - if (item.meta && item.meta.sys && item.meta.sys === currentSystem.url) { - return true - } - }) - return permission_routers - }, ...mapGetters([ - // 'permission_routers', + 'permission_routers', 'sidebar' ]), + activeMenu() { + const route = this.$route + const { meta, path } = route + // 如果meta中上设置activeMenu，按照meta中设置高亮 + if (meta.activeMenu) { + return meta.activeMenu + } + return path + }, isCollapse() { return !this.sidebar.opened } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 325c815..1091fc0 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -198,7 +198,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/ .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -214,15 +214,15 @@ margin-left: 5px; margin-top: 4px; &:first-of-type { - margin-left: 15px; + margin-left: 12px; } &:last-of-type { margin-right: 15px; } &.active { - background-color: #42b983; - color: #fff; - border-color: #42b983; + /*background-color: #42b983;*/ + /*color: #fff;*/ + /*border-color: #42b983;*/ &::before { content: ''; background: #fff; diff --git a/src/main.js b/src/main.js index e14f3c2..ba1de8a 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,17 @@ import VCharts from 'v-charts' Vue.use(VCharts) +// 注册全局自定义布局组件 +import NormalTable from '@/components/NormalTable/index' +import SearchArea from '@/components/SearchArea/SearchArea' +import SearchItem from '@/components/SearchArea/SearchItem' +import AppContainer from '@/components/layout/AppContainer' + +Vue.component('app-container', AppContainer) +Vue.component('normal-table', NormalTable) +Vue.component('search-area', SearchArea) +Vue.component('search-item', SearchItem) + // 先加载配置文件后，new Vue /* eslint-disable no-new */ import axios from 'axios' diff --git a/src/store/getters.js b/src/store/getters.js index 609f6f2..791f069 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -6,7 +6,7 @@ kaptcha: state => state.app.kaptcha, // 验证码 publicKey: state => state.app.publicKey, // 公钥 sid: state => state.app.sid, // 用户标识 - currentSystem: state => state.app.currentSystem, // 用户标识 + currentSystem: state => state.app.currentSystem, // 当前子系统 changeFlag: state => state.app.changeFlag, // 切换子系统标志 token: state => state.user.token, // token id: state => state.user.id, // id diff --git a/src/styles/index.scss b/src/styles/index.scss index 3f18397..8018291 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; +@import './element-variables'; @import './sidebar.scss'; body { @@ -76,23 +77,84 @@ //main-container全局样式 .app-container { - padding: 20px; + height:100%; + min-height: calc(100vh - 158px); + //border:10px solid #ebebeb; } + .app-header{ - background-color:$themeColor; + height:$headerHeight !important; + background-color:$headerColor; width: 100%; position:fixed; + //box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color:$headerText; + .dropdown-container{ + height: $headerHeight; + .dropdown-wrapper{ + color:$dropDownText; + } + } } +.navbar,.navbar .hamburger-container, .el-breadcrumb, .app-breadcrumb .el-breadcrumb { + height:$breadcrumbHeight !important; + line-height: $breadcrumbHeight !important; +} + +.tags-view-container { + .tags-view-wrapper { + .tags-view-item{ + &.active { + background-color: $tagsViewActiveBg !important; + color: #fff !important; + border-color: $tagsViewActiveBg !important; + } + } + } +} +.no-head-scrollbar, has-head-scrollbar{ + .el-scrollbar__wrap{ + overflow-x: hidden; + padding: 10px; + background-color: #ebebeb; + } +} +.no-head-scrollbar{ + height: calc(100vh - 138px); +} + .app-body{ width: 100%; position:fixed; - margin-top:60px; + margin-top:$headerHeight; } .el-main{ - height: calc(100vh - 50px); + padding:0px; + //height: calc(100vh - $headerHeight); } .imgBox img{ max-height: 400px !important; max-width:700px !important; margin: 0px auto; } + +.table-container{ + background-color: $tableTitleColor !important; + border-top: 12px solid #ebebeb !important; + .table-title{ + background-color:#fff; + height: $tableTitleHeight; + .title-header{ + line-height:$tableTitleHeight; + color: $tableTitleText; + i{ + margin-left: 10px; + margin-right: 5px; + } + } + } +} + +.el-table td{ + padding: 4px 0px !important; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 65abe46..dfa0193 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -15,7 +15,7 @@ width: $sideBarWidth !important; height: 100%; position: fixed; - padding-top:60px; + margin-top:$headerHeight; font-size: 0px; top: 0; bottom: 0; @@ -58,12 +58,14 @@ border: none; height: 100%; width: 100% !important; + background-color: $menuBg !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { + color: $subMenuHoverText !important; background-color: $menuHover !important; } } @@ -83,6 +85,7 @@ background-color: $subMenuBg !important; &:hover { + color: $menuHoverText !important; background-color: $subMenuHover !important; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 28c9c7f..d8e287e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,35 +1,55 @@ +@import './element-variables'; +$themeColor:$--color-primary; +// Header +$headerColor:$themeColor; +$headerText:#ffffff; +$dropDownText: #fff; +$headerHeight: 56px; +// tagsView +$breadcrumbHeight: 48px; +$tagsViewHeight: 30px; +$tagsViewActiveBg:#66b1ff; //sidebar -$menuText:#bfcbd9; -$themeColor:rgb(48, 65, 86); -$menuText:#000000; -$subMenuText:#000000; -$menuActiveText:rgb(27, 177, 165); -//$menuActiveText:#ffffff; -$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 -//$subMenuActiveText:#000000; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#333333; +$subMenuText:#333333; +$menuActiveText:$themeColor; +$subMenuActiveText:$themeColor; //https://github.com/ElemeFE/element/issues/12951 -$menuBg:#304156; -//$menuBg:#ffffff; -$menuHover:#263445; -//$menuHover:#6666cc; +$menuBg:#f4f4f4; +$menuHover:#f4f4f4; +$menuHoverText:$themeColor; -$subMenuBg:#1f2d3d; -//$subMenuBg:#fcfcfc; -$subMenuHover:#001528; -//$subMenuHover:#6666cc; +$subMenuBg:#f4f4f4; +$subMenuHover:#f4f4f4; +$subMenuHoverText:$themeColor; +$sideBarWidth: 208px; -$sideBarWidth: 180px; +// table +$tableTitleHeight:46px; +$tableTitleColor:#fff; +$tableTitleText:#606266; // the :export directive is the magic sauce for webpack :export { themeColor: $themeColor; + headerColor: headerColor; + headerText: headerText; + dropDownText:$dropDownText; + headerHeight:$headerHeight; + breadcrumbHeight:$breadcrumbHeight; + tagsViewHeight:$tagsViewHeight; menuText: $menuText; subMenuText: $subMenuText; menuActiveText: $menuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuHoverText:$menuHoverText; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; + subMenuHoverText:$subMenuHoverText; sideBarWidth: $sideBarWidth; + tableTitleHeight:$tableTitleHeight; + tableTitleColor:$tableTitleColor; + tabelTitleText:$tableTitleText; } diff --git a/src/views/assessment/cleanAssessment.vue b/src/views/assessment/cleanAssessment.vue index 97a1dc7..4a62b9a 100644 --- a/src/views/assessment/cleanAssessment.vue +++ b/src/views/assessment/cleanAssessment.vue @@ -4,13 +4,14 @@ - + - + import FileSaver from 'file-saver' import XLSX from 'xlsx' -import NormalTable from '@/components/NomalTable' -import AppContainer from '@/components/layout/AppContainer' -import SearchArea from '@/components/SearchArea/SearchArea' -import SearchItem from '@/components/SearchArea/SearchItem' import { getCleanJobCount } from '@/api/sanitation/statistics' import { getToday, getLastWeek } from '@/utils/dateutils' export default { name: 'CleanAssessment', - components: { SearchItem, SearchArea, AppContainer, NormalTable }, data() { return { activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计 diff --git a/src/views/assessment/staffAssessment.vue b/src/views/assessment/staffAssessment.vue index b31811f..7fbb95a 100644 --- a/src/views/assessment/staffAssessment.vue +++ b/src/views/assessment/staffAssessment.vue @@ -4,7 +4,7 @@ - + - + @@ -69,16 +71,11 @@ + + diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index aaffab5..0c38d31 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,18 @@