diff --git a/index.html b/index.html index c98c80a..b32f4ec 100644 --- a/index.html +++ b/index.html @@ -1,20 +1,164 @@ - + - + + + + + 天津市林草资源专项调查管理平台 + + + + + + + + - + + + + +
+ +
加载中...
+
+
+ diff --git a/src/App.vue b/src/App.vue index 44aa81b..1efbc2b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -16,6 +16,8 @@ export default { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; - color: #2c3e50; + color: #2E7D32; + background: #F1F8F4; + min-height: 100vh; } diff --git a/src/assets/css/button.css b/src/assets/css/button.css index a33dd0e..2e4b0b5 100644 --- a/src/assets/css/button.css +++ b/src/assets/css/button.css @@ -37,14 +37,14 @@ .el-button:focus, .el-button:hover { - color: #9dbbe7; - border-color: rgb(193, 198, 204); - background-color: rgb(234, 236, 238) + color: #4CAF50; + border-color: #81C784; + background-color: #E8F5E9 } .el-button:active { - color: #9dbbe7; - border-color: rgb(43, 59, 77); + color: #2E7D32; + border-color: #4CAF50; outline: 0 } @@ -59,14 +59,14 @@ .el-button.is-plain:focus, .el-button.is-plain:hover { background: #FFF; - border-color: #264672; - color: #264672 + border-color: #4CAF50; + color: #2E7D32 } .el-button.is-active, .el-button.is-plain:active { - color: rgb(43, 59, 77); - border-color: rgb(43, 59, 77) + color: #1B5E20; + border-color: #4CAF50 } .el-button.is-plain:active { @@ -125,21 +125,21 @@ .el-button--primary { color: #FFF; - background-color: #9dbbe7; - border-color: #9dbbe7 + background-color: #4CAF50; + border-color: #4CAF50 } .el-button--primary:focus, .el-button--primary:hover { - background: rgb(89, 103, 120); - border-color: rgb(89, 103, 120); + background: #66BB6A; + border-color: #66BB6A; color: #FFF } .el-button--primary.is-active, .el-button--primary:active { - background: rgb(43, 59, 77); - border-color: rgb(43, 59, 77); + background: #388E3C; + border-color: #388E3C; color: #FFF } @@ -157,21 +157,21 @@ } .el-button--primary.is-plain { - color: #264672; - background: rgb(234, 236, 238); - border-color: rgb(172, 179, 187) + color: #2E7D32; + background: #E8F5E9; + border-color: #81C784 } .el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover { - background: #264672; - border-color: #264672; + background: #4CAF50; + border-color: #4CAF50; color: #FFF } .el-button--primary.is-plain:active { - background: rgb(43, 59, 77); - border-color: rgb(43, 59, 77); + background: #388E3C; + border-color: #388E3C; color: #FFF; outline: 0 } @@ -480,7 +480,7 @@ } .el-button--text { - color: #264672; + color: #2E7D32; background: 0 0; padding-left: 0; padding-right: 0 @@ -488,13 +488,13 @@ .el-button--text:focus, .el-button--text:hover { - color: rgb(89, 103, 120); + color: #4CAF50; border-color: transparent; background-color: transparent } .el-button--text:active { - color: rgb(43, 59, 77); + color: #1B5E20; background-color: transparent } diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss index f207f46..14b3119 100644 --- a/src/assets/css/common.scss +++ b/src/assets/css/common.scss @@ -246,6 +246,9 @@ top: 70px; width: 100%; height: calc(100% - 50px); + background: linear-gradient(160deg, #E8F5E9 0%, #F5FBF6 45%, #FFFFFF 100%); + box-shadow: inset 0 20px 40px rgba(76, 175, 80, 0.08); + border-top: 1px solid rgba(76, 175, 80, 0.15); } #tablecontainer { @@ -380,9 +383,6 @@ #leftPanelScroll { overflow: hidden; height: calc(100% - 210px); - } - - .left-content { margin-left: 0px !important; width: 355px !important; } @@ -448,6 +448,8 @@ #leftPanelScroll { overflow: hidden; height: calc(100% - 280px); + margin-left: 0px !important; + width: 355px !important; } .container .topbar-wrap .topbar-title { @@ -459,11 +461,6 @@ top: 280px !important; } - .left-content { - margin-left: 0px !important; - width: 355px !important; - } - #toLeft { left: 355px !important; } @@ -554,32 +551,66 @@ } #leftPanelScroll { - overflow: hidden; + overflow-y: scroll; height: calc(100% - 70px); + + padding: 20px 24px; + width: 420px; + box-shadow: 0 15px 35px rgba(76, 175, 80, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6); + backdrop-filter: blur(4px); + + &::-webkit-scrollbar { + /* 滚动条整体样式 */ + width: 7px; + /* 高宽分别对应横竖滚动条的尺寸 */ + height: 1px; + } + + &::-webkit-scrollbar-thumb { + /* 滚动条里面小方块 */ + background: linear-gradient(180deg, #81C784, #43A047); + border-radius: 10px; + } + + &::-webkit-scrollbar-track { + /* 滚动条里面轨道 */ + background: rgba(232, 245, 233, 0.9); + border-radius: 10px; + } } #leftPanel { - //opacity: 0.9; width: 450px; position: absolute; top: 70px; bottom: 0px; left: 0px; z-index: 98; - padding-left: 10px; - background-color: rgba(247, 248, 241, 0.9); - box-shadow: 0 2px 40px 0 rgba(157, 187, 231, 0.50); - border-radius: 0 0 4px 4px 4px 4px 0 0; - box-shadow: 1px 0 5px rgba(0, 0, 0, 0.5); + padding: 0 16px 16px 16px; + background: linear-gradient(180deg, rgba(232, 245, 233, 0.98) 0%, rgba(241, 248, 244, 0.98) 100%); + border-right: 1px solid rgba(76, 175, 80, 0.2); + box-shadow: 2px 0 16px rgba(46, 125, 50, 0.12); + backdrop-filter: blur(6px); height: 100%; } .el-collapse-item__wrap { - background-color: #F7F8F1 !important; + background: rgba(241, 248, 244, 0.95) !important; + border: 1px solid rgba(129, 199, 132, 0.35) !important; + border-radius: 16px !important; + margin-bottom: 12px; + box-shadow: 0 6px 18px rgba(76, 175, 80, 0.12); } .el-collapse-item__header { - background-color: #F7F8F1 !important; + background: linear-gradient(90deg, rgba(224, 242, 229, 0.95), rgba(248, 253, 249, 0.95)) !important; + color: #1B5E20 !important; + font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif; + font-size: 15px !important; + font-weight: 600; + border-bottom: 1px solid rgba(129, 199, 132, 0.35); + border-radius: 16px 16px 0 0 !important; + padding: 14px 18px; } .el-breadcrumb__inner { @@ -599,32 +630,6 @@ // } -.left-content { - overflow-y: scroll; - height: 100%; - background-color: #F7F8F1; - margin-left: 20px; - width: 435px; - - &::-webkit-scrollbar { - /* 滚动条整体样式 */ - width: 5px; - /* 高宽分别对应横竖滚动条的尺寸 */ - height: 1px; - } - - &::-webkit-scrollbar-thumb { - /* 滚动条里面小方块 */ - box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2); - background: #535353; - } - - &::-webkit-scrollbar-track { - /* 滚动条里面轨道 */ - box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2); - background: #ededed; - } -} diff --git a/src/assets/css/main.css b/src/assets/css/main.css index d0ca93b..7301240 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -23,6 +23,7 @@ body { height: 100%; width: 100%; overflow: hidden; + background: #F1F8F4; } a { @@ -48,30 +49,32 @@ ul { .el-form-item__label { font-family: PingFangSC-Regular; - color: #264672 !important; + color: #2E7D32 !important; } .el-pager li { - background: rgb(247, 248, 241) !important; + background: #E8F5E9 !important; + color: #2E7D32 !important; } .el-pagination button { - background: rgb(247, 248, 241) !important; + background: #E8F5E9 !important; + color: #2E7D32 !important; } #searchList { text-align: left; width: 91%; margin-left: 4%; - border: 1px solid #9DBBE7 !important; + border: 1px solid #81C784 !important; border-radius: 4px; - color: rgb(38, 70, 114); + color: #2E7D32; font-size: 14px !important; font-family: PingFangSC-Regular; } .backcolor { - background: rgba(157, 187, 231, 0.3); + background: rgba(129, 199, 132, 0.3); margin-left: 10px; } @@ -80,10 +83,12 @@ ul { } .dateBtn { - background-color: #264672 !important; + background-color: #4CAF50 !important; font-family: PingFangSC-Regular; color: #FFFFFF !important; margin-bottom: 15px; + border: none !important; + box-shadow: 0 2px 4px rgba(46, 125, 50, 0.2); } .el-tabs__nav-scroll { @@ -96,9 +101,9 @@ ul { height: 70px; line-height: 70px; padding: 0px; - opacity: 0.9; - background: #F7F8F1; - box-shadow: 0 2px 40px 0 rgba(157, 187, 231, 0.50); + background: #E8F5E9; + box-shadow: 0 2px 8px 0 rgba(46, 125, 50, 0.15); + border-bottom: 1px solid rgba(76, 175, 80, 0.2); } .container .topbar-wrap .topbar-btn { @@ -113,9 +118,10 @@ ul { .container .topbar-wrap .topbar-logos { float: left; - width: 400px; + width: 600px; + min-width: 500px; line-height: 50px; - font-size: 17px; + font-size: 20px; text-align: left; } @@ -150,6 +156,8 @@ ul { line-height: 70px !important; width: 140px; text-align: center; + color: #2E7D32 !important; + transition: all 0.3s ease; } .el-menu--horizontal>.el-submenu .el-submenu__title { @@ -160,12 +168,13 @@ ul { .el-checkbox__inner { - border: 1px solid #9DBBE7 !important; + border: 1px solid #81C784 !important; } .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner { - background-color: #9DBBE7 !important; + background-color: #4CAF50 !important; + border-color: #4CAF50 !important; color: #fff !important; } @@ -250,7 +259,7 @@ ul { } .container .content-container { - background: #fff; + background: #F1F8F4; -ms-flex: 1; flex: 1; overflow-y: auto; @@ -259,13 +268,14 @@ ul { } .container .content-container .content-wrapper { - background-color: #fff; + background-color: #F1F8F4; box-sizing: border-box; } .el-menu--horizontal>.el-menu-item.is-active { - color: #fff !important; - border-bottom: 4px solid #409EFF !important; + color: #1B5E20 !important; + border-bottom: 4px solid #4CAF50 !important; + background: rgba(76, 175, 80, 0.1) !important; } .myInfoWindow { @@ -322,7 +332,7 @@ input:-ms-input-placeholder { width: 250px !important; text-align: start; height: 100%; - background-color: #fff; + background-color: #F1F8F4; } .el-aside.tac .el-submenu__title, @@ -330,29 +340,30 @@ el-aside.tac.el-menu-item, .el-aside.tac .el-submenu .el-menu-item { height: 40px !important; line-height: 40px !important; - background-color: white; - color: black; + background-color: #F1F8F4; + color: #2E7D32; } .el-aside.tac .el-menu-item-group__title { - color: black; - background-color: white; + color: #2E7D32; + background-color: #F1F8F4; padding: 0px !important; } .el-aside.tac .el-submenu .el-menu-item:hover { - background-color: #E8E8E8; - color: black; - + background-color: #C8E6C9; + color: #2E7D32; } .el-menu--horizontal>.el-menu-item:hover { - border-bottom: 4px solid #409EFF; - border-bottom-color: #409EFF !important; + border-bottom: 4px solid #66BB6A; + border-bottom-color: #66BB6A !important; + background: rgba(76, 175, 80, 0.15) !important; + color: #1B5E20 !important; } .el-aside.tac .el-menu-item.is-active { - background-color: #304156; + background-color: #4CAF50; color: white; } @@ -362,18 +373,18 @@ el-aside.tac.el-menu-item, } #bread_container { - background-color: white !important; - color: black; + background-color: #F1F8F4 !important; + color: #2E7D32; width: 100%; height: 30px; line-height: 30px; text-align: center; - border-bottom: 1px solid #D3D3D3; + border-bottom: 1px solid #C8E6C9; } .el-breadcrumb { font-size: 14px; - color: black; + color: #2E7D32; line-height: 30px !important; padding-left: 10px; } @@ -394,7 +405,7 @@ el-aside.tac.el-menu-item, .dragdiv-header { - color: black; + color: #2E7D32; font-size: 16px; line-height: 40px; text-align: center; @@ -406,7 +417,7 @@ el-aside.tac.el-menu-item, } .esriPopup .titlePane { - background-color: #304156 !important; + background-color: #4CAF50 !important; } .esriPopup .contentPane { @@ -421,10 +432,19 @@ el-aside.tac.el-menu-item, .el-collapse-item__header { font-size: 15px !important; + color: #1B5E20 !important; + background: linear-gradient(90deg, rgba(232, 245, 233, 0.95), rgba(248, 253, 249, 0.95)) !important; + border-bottom: 1px solid rgba(129, 199, 132, 0.35) !important; + border-radius: 14px 14px 0 0 !important; + padding: 12px 18px !important; } .el-collapse-item__content { - padding-bottom: 10px !important; + padding: 12px 18px 16px 18px !important; + background: rgba(241, 248, 244, 0.9) !important; + border: 1px solid rgba(129, 199, 132, 0.2) !important; + border-top: none !important; + border-radius: 0 0 14px 14px !important; } .el-input__inner { @@ -444,8 +464,8 @@ el-aside.tac.el-menu-item, .el-button--primary:focus, .el-button--primary:hover { color: #FFF !important; - background-color: #304156 !important; - border-color: #304156 !important; + background-color: #66BB6A !important; + border-color: #66BB6A !important; } @@ -457,7 +477,7 @@ el-aside.tac.el-menu-item, justify-content: center; align-items: center; width: 100%; - color: #000; + color: #2E7D32; } .v-table-body-cell { @@ -467,12 +487,12 @@ el-aside.tac.el-menu-item, } .table-title { - color: #000; + color: #2E7D32; } .el-dialog__header { padding: 8px !important; - background-color: #9dbbe7; + background-color: #4CAF50; color: #fff !important; border-radius: 5px 5px 0px 0px; } @@ -517,9 +537,10 @@ el-aside.tac.el-menu-item, @media screen and (max-width: 1500px) { .container .topbar-wrap .topbar-logos { float: left; - width: 300px; + width: 500px; + min-width: 400px; line-height: 50px; - font-size: 17px; + font-size: 18px; text-align: left; } } @@ -538,44 +559,44 @@ el-aside.tac.el-menu-item, } .el-menu--horizontal>.el-submenu.is-active .el-submenu__title { - color: #fff !important; + color: #1B5E20 !important; } .el-menu--horizontal .el-menu .el-menu-item.is-active, .el-menu--horizontal .el-menu .el-submenu.is-active>.el-submenu__title { - color: #fff !important; + color: #1B5E20 !important; } .el-step__head.is-process, .el-step__title.is-process { - color: #1296db !important; + color: #4CAF50 !important; } .el-step__head.is-wait { - color: #304156 !important; + color: #81C784 !important; } .el-step__title.is-success { - color: #304156 !important; + color: #2E7D32 !important; } .el-step__head.is-success { - color: #304156 !important; + color: #4CAF50 !important; } .el-step__line { - background-color: #304156 !important; + background-color: #81C784 !important; } .el-step__line-inner { - border-color: #304156 !important; + border-color: #81C784 !important; } .el-step__title.is-wait { - color: #304156 !important; - border-color: #304156 !important; + color: #81C784 !important; + border-color: #81C784 !important; } .el-icon-check:before { diff --git a/src/components/Analysis/analysisPage.vue b/src/components/Analysis/analysisPage.vue index fffa01f..ea1a614 100644 --- a/src/components/Analysis/analysisPage.vue +++ b/src/components/Analysis/analysisPage.vue @@ -36,8 +36,7 @@
-
- + -
diff --git a/src/components/DataManagement/DataManagement.vue b/src/components/DataManagement/DataManagement.vue index 141f0be..f38cc39 100644 --- a/src/components/DataManagement/DataManagement.vue +++ b/src/components/DataManagement/DataManagement.vue @@ -26,12 +26,11 @@
-
- +
-

- 任务： +

+ 任务：

-

- 表： +

+ 表：

-

- 人员： +

+ 人员： 确定 +

-
@@ -235,7 +237,6 @@
-
@@ -870,10 +871,8 @@ export default { } } - // 确保在子表模式下也获取并显示要素属性 - if (that.ifsub && that.activeName1 === 'first1') { - that.getFeatureData() - } + // 获取并显示要素属性（无论哪个标签页都获取） + that.getFeatureData() } }) this.map.addInteraction(this.selectclick) @@ -1160,19 +1159,28 @@ export default { var jsondata = response.data.data var imagedata = [] var videodata = [] - for (var i = 0; i < jsondata.mediaFileURLs.length; i++) { - if ( - jsondata.mediaFileURLs[i].substring( - jsondata.mediaFileURLs[i].length - 3 - ) === 'jpg' - ) { - imagedata.push(jsondata.mediaFileURLs[i]) - } else if ( - jsondata.mediaFileURLs[i].substring( - jsondata.mediaFileURLs[i].length - 3 - ) === 'avi' - ) { - videodata.push(jsondata.mediaFileURLs[i]) + // 处理媒体文件URL + if (jsondata.mediaFileURLs && Array.isArray(jsondata.mediaFileURLs)) { + for (var i = 0; i < jsondata.mediaFileURLs.length; i++) { + var url = jsondata.mediaFileURLs[i] + if (!url) continue + + // 获取文件扩展名（支持多种格式） + var urlLower = url.toLowerCase() + var ext = '' + var lastDot = urlLower.lastIndexOf('.') + if (lastDot > 0) { + ext = urlLower.substring(lastDot + 1) + } + + // 图片格式：jpg, jpeg, png, gif, bmp, webp + if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)) { + imagedata.push(url) + } + // 视频格式：avi, mp4, mov, wmv, flv, mkv, webm + else if (['avi', 'mp4', 'mov', 'wmv', 'flv', 'mkv', 'webm'].includes(ext)) { + videodata.push(url) + } } } jsondata.imagedata = imagedata @@ -1740,6 +1748,10 @@ export default { if (this.pageLayer && this.activeName1 === 'second1') { this.setCurrentStyle1(1) } + // 在"数据查看"标签页中，当选择要素时获取要素数据 + if (this.activeName === 'second' && this.currentFeatureId && this.task && this.table) { + this.getFeatureData() + } } }, vectorSource: { @@ -1890,9 +1902,33 @@ export default { } .mylabel { - font-family: PingFangSC-Medium; + display: flex; + align-items: center; + flex-wrap: wrap; + margin: 0 0 8px 0; + padding: 4px 14px; + font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif; font-size: 14px; - color: #264672; + font-weight: 600; + color: #1B5E20; + background: rgba(232, 245, 233, 0.85); + border: 1px solid rgba(129, 199, 132, 0.4); + border-radius: 12px; + letter-spacing: 0.5px; + line-height: 1.4; +} + +.mylabel .label-text { + display: inline-block; + min-width: 60px; + flex-shrink: 0; + text-align: right; +} + +.mylabel ::v-deep .el-select, +.mylabel ::v-deep .el-input { + flex: 1; + min-width: 220px; } .el-icon-circle-close { diff --git a/src/components/DataManagement/featureInfo.vue b/src/components/DataManagement/featureInfo.vue index 0954232..4065bce 100644 --- a/src/components/DataManagement/featureInfo.vue +++ b/src/components/DataManagement/featureInfo.vue @@ -1,204 +1,985 @@ - + + + diff --git a/src/components/Home.vue b/src/components/Home.vue index cb528c0..1eb1bf4 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -15,11 +15,13 @@ {{ myname }} @@ -29,7 +31,9 @@ :default-active="$route.path" class="el-menu" mode="horizontal" - background-color="#F7F8F1" + background-color="#E8F5E9" + text-color="#2E7D32" + active-text-color="#1B5E20" router > -
+
-
@@ -4989,7 +4983,7 @@ export default { // } .taskChoser { - margin: 15px 0px 5px 0px; + margin: 2px 0px 2px 0px; } .searchInput { width: 220px !important; @@ -5093,8 +5087,57 @@ export default { line-height: 13px; } .mylabel { - font-family: PingFangSC-Medium; + display: flex; + align-items: center; + flex-wrap: wrap; + margin: 0 0 8px 0; + padding: 4px 14px; + font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif; font-size: 14px; - color: #264672; + font-weight: 600; + color: #1B5E20; + border-radius: 12px; + letter-spacing: 0.5px; + line-height: 1.4; +} + +.mylabel .label-text { + display: inline-block; + min-width: 60px; + flex-shrink: 0; + text-align: right; +} + +.mylabel ::v-deep .el-select, +.mylabel ::v-deep .el-input { + flex: 1; + min-width: 220px; +} + +#leftPanelScroll :deep(.el-collapse-item__content) { + padding: 0 !important; +} + +#leftPanelScroll :deep(.el-collapse .el-collapse-item__content) { + padding: 0 !important; +} + +#leftPanelScroll :deep(.el-collapse-item__wrap .el-collapse-item__content) { + padding: 0 !important; +} + + + diff --git a/src/components/TaskManagement/manage/DataManage.vue b/src/components/TaskManagement/manage/DataManage.vue index 762eb95..c379781 100644 --- a/src/components/TaskManagement/manage/DataManage.vue +++ b/src/components/TaskManagement/manage/DataManage.vue @@ -1,24 +1,23 @@