From 7038e38809303ee7b1d1c6ec632cd3727bd63ac6 Mon Sep 17 00:00:00 2001 From: TimSpan Date: Thu, 25 Jul 2024 11:40:37 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修改 --- analyze.html | 2 +- components.d.ts | 5 + index.html | 38 +- src/router/modules/staticRouters.ts | 5 +- src/views/page/hkplay.vue | 87 +- src/views/page/index.vue | 3381 ++++++++++++++------------- 6 files changed, 1782 insertions(+), 1736 deletions(-) diff --git a/analyze.html b/analyze.html index b65baae2..b2f6d613 100644 --- a/analyze.html +++ b/analyze.html @@ -4822,7 +4822,7 @@ var drawChart = (function (exports) { - - - - - + + + + + + + 多元警情 + + + +
+ + + + + + + \ No newline at end of file diff --git a/src/router/modules/staticRouters.ts b/src/router/modules/staticRouters.ts index e60f32e1..5ffb84bd 100644 --- a/src/router/modules/staticRouters.ts +++ b/src/router/modules/staticRouters.ts @@ -4,7 +4,7 @@ import { INDEX_ROUTER, LOGIN_ROUTER } from "@/configs"; /** * staticRouter (静态路由) */ -export const staticRouter : RouteRecordRaw[] = [ +export const staticRouter: RouteRecordRaw[] = [ { path: "/", redirect: INDEX_ROUTER.path, @@ -14,7 +14,7 @@ export const staticRouter : RouteRecordRaw[] = [ component: () => import("@/views/login.vue"), }, { - path:'/index', + path: '/index', component: () => import('@/views/index.vue'), redirect: '/index/video', children: [ @@ -53,6 +53,7 @@ export const staticRouter : RouteRecordRaw[] = [ { path: '/index/hkplay', component: () => import('@/views/page/hkplay.vue'), + props: route => ({ pointId: route.query.pointId }) // 确保 pointId 参数被正确传递 }, { path: '/index/system', diff --git a/src/views/page/hkplay.vue b/src/views/page/hkplay.vue index 9564bae0..433daf49 100644 --- a/src/views/page/hkplay.vue +++ b/src/views/page/hkplay.vue @@ -3,17 +3,28 @@ \ No newline at end of file +.slide-fade-enter-active { + transition: all 0.3s linear; +} + +.slide-fade-leave-active { + transition: all 0.5s linear; +} + +.slide-fade-enter-from, +.slide-fade-leave-to { + transform: translateX(-412px); + // opacity: 0; +} + +.slide-fade1-enter-active { + transition: all 0.3s linear; +} + +.slide-fade1-leave-active { + transition: all 0.5s linear; +} + +.slide-fade1-enter-from, +.slide-fade1-leave-to { + transform: translateX(-412px); + // opacity: 0; +} + +.title { + font-size: 16px; + color: #000; + line-height: 36px; + padding: 10px 15px 5px; +} + +.elBtns { + padding: 0 0 10px 15px; + overflow: hidden; +} + +.elBtns div { + width: 94px; + height: 26px; + line-height: 26px; + text-align: center; + font-size: 14px; + background: #f2f3f5; + color: #666; + border-radius: 13px; + margin: 0 30px 8px 0; + float: left; + cursor: pointer; +} + +.elBtns .active { + background: #1e85fe; + color: #fff; +} + +.searchBox { + margin: 0 15px; +} + +.panelBox { + width: 100%; + height: 100px; + padding: 0 15px 8px; + overflow: hidden; +} + +.panelBox div { + width: 120px; + height: 100px; + border-radius: 15px; + background: #f6f6fb; + overflow: hidden; + margin-right: 10px; + float: left; +} + +.panelBox div img { + width: 40px; + height: 40px; + border-radius: 50%; + margin: 12px 0 0 8px; + float: left; +} + +.panelBox div p { + width: 40px; + height: 40px; + line-height: 40px; + border-radius: 50%; + background: #fff; + text-align: center; + margin: 12px 0 0 8px; + float: left; +} + +.panelBox div:first-child p i { + font-size: 26px; + color: #f3a562; + position: relative; + top: 6px; +} + +.panelBox div:nth-child(2) p i { + font-size: 22px; + color: #ef5465; + position: relative; + top: 4px; +} + +.panelBox div:nth-child(3) p i { + font-size: 22px; + color: #588ff6; + position: relative; + top: 4px; +} + +.panelBox div span { + // width: 70px; + height: 40px; + line-height: 40px; + font-size: 14px; + color: #343b45; + padding-left: 15px; + margin: 12px 0 0; + float: left; +} + +.panelBox div b { + width: 120px; + line-height: 40px; + height: 40px; + text-align: center; + font-size: 20px; + font-weight: normal; + color: #f3a562; + float: left; +} + +.panelBox div:nth-child(3) { + margin-right: 0; +} + +.panelBox div:nth-child(2) b { + color: #ef5465; +} + +.panelBox div:nth-child(3) b { + color: #588ff6; +} + +.tabs { + width: 370px; + height: 40px; + margin: 0 auto; + display: flex; +} + +.tabs div { + flex: 1; + border-bottom: 3px solid #e8e8ed; + cursor: pointer; +} + +.tabs div span { + width: 100%; + height: 38px; + line-height: 38px; + display: inline-block; + text-align: center; + color: #818282; + font-size: 14px; +} + +.tabs div.active1 { + border-bottom: 3px solid #70aafc; +} + +.tabs div.active1 span { + color: #333; +} + +.dataList { + width: 420px; + height: 91%; + overflow: auto; + margin: 0 auto; +} + +.dataList li { + width: 100%; + min-height: 120px; + border-bottom: 1px solid #e8e9ed; + overflow: hidden; +} + +.dataList li p { + width: 50%; + font-size: 14px; + color: #818282; + line-height: 32px; + float: left; + box-sizing: border-box; +} + +.dataList li p:first-child { + width: 100%; + font-size: 16px; + color: #333; + margin-top: 8px; +} + +.dataList li p:first-child i, +.dataList li p:nth-child(2) i { + font-size: 26px; + color: #a1c7fe; + margin-right: 5px; + position: relative; + top: 8px; +} + +.dataList li p:nth-child(2) i { + font-size: 18px; + color: #818282; + margin-right: 15px; + position: relative; + top: 4px; + left: 5px; +} + +.dataList li p:nth-child(3) i { + font-size: 18px; + color: #5798f5; + margin-right: 5px; + top: 4px; +} + +.dataList li p:nth-child(4) { + padding-left: 35px; +} + +.tiops::-webkit-scrollbar { + width: 5px; +} + +.tiops::-webkit-scrollbar-track { + background: #fff; +} + +.tiops::-webkit-scrollbar-thumb { + background-color: #616161; + /* 设置滚动条滑块颜色 */ +} + +.seamless-warp { + height: 100%; + overflow: hidden; +} + +.titleLeftBg { + width: 100%; + line-height: 32px; + color: #fff; + text-indent: 30px; + font-size: 16px; + font-family: ysbth; + font-weight: 600; +} + +.indexx { + width: 100%; + height: 100%; + + .left-cont { + // width: 412px; + height: 100%; + // background-color: rgb(9 45 84 / 80%); + background-color: #fff; + z-index: 999; + border: 10px solid #f2f3f5; + // border-top: 12px solid #f2f3f5; + // border-right: 12px solid #f2f3f5; + position: absolute; + + .titleLeftBg { + width: 100%; + line-height: 32px; + color: #fff; + text-indent: 30px; + font-size: 16px; + font-family: ysbth; + font-weight: 600; + } + } + + .right-cont { + width: 412px; + height: 100%; + background-color: #fff; + z-index: 999; + position: absolute; + right: 0; + border: 10px solid #f2f3f5; + // border-top: 12px solid #f2f3f5; + // border-left: 12px solid #f2f3f5; + + .titleLeftBg { + width: 100%; + line-height: 32px; + color: #616161; + text-indent: 30px; + font-size: 16px; + font-family: ysbth; + font-weight: 600; + } + } + + .gttex { + color: #cde0f3; + font-size: 16px; + font-style: italic; + margin-bottom: 10px; + } + + .gttext { + font-size: 22px; + color: #fff; + margin-right: 6px; + font-weight: bold; + font-family: pmzd; + cursor: pointer; + text-align: center; + } + + .pt { + color: #a9c0cf; + margin-bottom: 5px; + } +} + +.intab { + width: 100%; + height: 38px; + line-height: 35px; + padding-left: 20px; + background-image: url(@/assets/images/ipeak/g.png); + background-size: 100% 100%; + background-repeat: no-repeat; + color: #d2e9fa; +} + +.intabF { + width: 100%; + height: 38px; + line-height: 35px; + padding-left: 20px; + background-image: url(@/assets/images/ipeak/h.png); + background-size: 100% 100%; + background-repeat: no-repeat; + color: #d2e9fa; +} + +.titibgo { + width: 100%; + background: #fff; + color: #616161; +} + +.titibgoa { + width: 100%; + background: #ccc; + color: #616161; +} + +.titlrob { + width: 100%; + line-height: 24px; + background: #f9fafc; + color: #868686; + background-position-x: -12px; +} + +:deep(.el-card) { + background-color: transparent !important; +} + +:deep(.el-card__header) { + padding: 1px; +} + +:deep(.el-timeline-item__content) { + color: #fff; +} + +:deep(.el-input-number__decrease, .el-input-number__increase) { + background: transparent !important; + color: #fff; +} + +:deep(.el-dialog__title) { + color: #fff; +} + +:deep(.el-dialog) { + --el-dialog-bg-color: #06325f; +} + +:deep(.el-dialog__headerbtn .el-dialog__close) { + // color: #32DCFB; +} + +:deep(.el-dialog__header) { + border-bottom: 1px solid #ccc; + margin-right: 0px; + margin-left: 0px; +} + +:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-tree) { + background: transparent; +} + +:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-select:not(.ant-select-customize-input) .ant-select-selector) { + border-color: #0465bb !important; + background: none; + color: #fff; +} + +:deep(.el-input__wrapper) { + background-color: transparent; + // box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset; + box-shadow: 0 0 0 1px #ccc; +} + +:deep(.el-input__inner) { + color: #fff; +} + +:deep(.el-select .el-input .el-select__caret) { + color: #ccc; +} + +:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-btn-primary) { + background-color: transparent; + color: rgba(0, 0, 0, 0.88); +} + +:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-btn.ant-btn-sm) { + border: 1px solid #ccc; +} + +:deep(.el-tree) { + background: transparent; + color: #fff; + --el-tree-node-hover-bg-color: #1079b1; +} + +:deep(.el-tree-node__expand-icon) { + color: #0586c6; +} + +:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-timeline .ant-timeline-item-head-blue) { + color: #2cb7c7; + border-color: #2cb7c7; +} + +:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-timeline .ant-timeline-item-head) { + width: 10px; + height: 10px; +} + +:deep(:where(.css-dev-only-do-not-override-19iuou).ant-timeline .ant-timeline-item-tail) { + border-inline-start: 2px solid #1677ff; + inset-inline-start: 4px; +} + +:deep(.el-checkbox__inner) { + background-color: transparent; +} + +:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-tree .ant-tree-checkbox .ant-tree-checkbox-inner) { + background-color: transparent; +} + +:deep( + :where(.css-dev-only-do-not-override-1qb1s0s).ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected, + :where(.css-dev-only-do-not-override-1qb1s0s).ant-tree .ant-tree-checkbox + span.ant-tree-node-selected + ) { + background-color: transparent; +} + +::v-deep .ant-tree .ant-tree-list-holder-inner { + // background: #cccccc2b; + background: #fff; + color: rgba(0, 0, 0, 0.88); +} + +::v-deep .ant-tree .ant-tree-treenode { + margin: 3px 0; +} + +::v-deep .ant-tree .ant-tree-checkbox { + margin-inline-end: 0; + margin-block-start: 0; +} + +.tree_font { + padding: 4px 8px 4px 4px; + background: #115e99; + border: 1px solid #169be5; + border-radius: 4px; + font-style: italic; + font-size: 14px; + margin-left: 10px; + cursor: pointer; +} + +.mapPopInfo { + width: 450px; +} + +.mapPopInfo-top { + height: 33px; + line-height: 33px; + background: linear-gradient(to right, #0d6295, #0872b1, #0872b18c); + padding: 0 15px; + border: solid 2px #2d94b5; + border-bottom: solid 1px #54bbda; +} + +.mapPopInfo-top > img { + float: right; + margin: 3px 0; +} + +.mapPopInfo-top > span > span { + float: left; + width: 330px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mapPopInfo-main { + padding: 15px; + background: #13213bab; + box-shadow: inset 1px 1px 14px 2px #32689e; + border: solid 2px #2d94b5; + border-top: 0; +} + +.mapPopInfo-main > div > p { + line-height: 30px; +} + +.mapPopInfo-main > div > p > span:nth-child(3) { + margin-left: 10px; +} + +.mapPopInfo-main > div > p > button { + height: 26px; + line-height: 26px; + background: #2081c1; + color: #fff; + border: 1px solid #2081c1; + box-shadow: 0 0 3px 3px #244b68; +} +