From d2c0db527006ad77a50039657828284c76f498da Mon Sep 17 00:00:00 2001 From: zjc <1034206993@qq.com> Date: Mon, 30 Dec 2024 11:56:20 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AE=8C=E5=96=84=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/request.js | 1 - src/assets/images/arrow-down-1.png | Bin 0 -> 474 bytes src/components/Correspondence/index.vue | 3 +- src/components/Header/index.vue | 59 +- src/views/home/components/box-3.vue | 2 +- src/views/scenic/components/box-2.vue | 4 +- src/views/traffic/components/box-1.vue | 555 ++++---- src/views/workOrder/components/box-2.vue | 1541 +++++++++++----------- src/views/workOrder/components/box-3.vue | 811 ++++++------ 9 files changed, 1508 insertions(+), 1468 deletions(-) create mode 100644 src/assets/images/arrow-down-1.png diff --git a/src/api/request.js b/src/api/request.js index 1fe250e..9d69b2e 100644 --- a/src/api/request.js +++ b/src/api/request.js @@ -1,5 +1,4 @@ import axios from 'axios' -import qs from 'qs' import { useRouter } from 'vue-router' import { ElMessage } from 'element-plus' diff --git a/src/assets/images/arrow-down-1.png b/src/assets/images/arrow-down-1.png new file mode 100644 index 0000000000000000000000000000000000000000..cb7d584d0a83f9523f46f6e187348902cb9e6aab GIT binary patch literal 474 zcmV<00VV#4P)Px$lu1NER9HvtRm*Y0Fc8(+H%^qm$r7BR4nhY>1*8O0K}ZE86+kLTIv^dGoBTOI z37k0Ku{S6~W*B3dEuGne9NLf5|zQRW+5Sj^p@cUp)CIQtP59hW&nj zZA?fPCP^|y#Bs}{YRTwXwa-3H)6b$P9@-)W05S-IWgT8Eq19^D&9ZEPhoKHCCuO|H@Aq}EQ`Mw__;>B^W?|BnKJe!aqJ#-ABl)67C zWs1!Z@mmNnG;W|wT?UGxXbb>T!vX8 .box-4-content { position: relative; - margin-top: vh(10); - margin-left: vw(10); + margin: vh(10); width: vw(300); height: vh(1060); background-image: url('@/assets/images/bg-1.png'); diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue index 63c172b..f5a8aa7 100644 --- a/src/components/Header/index.vue +++ b/src/components/Header/index.vue @@ -4,7 +4,7 @@
  • {{ item.name }}
    • + +
  • + {{ otherScenic || '其他景区' }} + +
    • + +
    {{ title }} @@ -44,8 +62,8 @@ import { useRouter } from 'vue-router' import title2 from '@/assets/images/title-2.png' import title2Select from '@/assets/images/title-2-select.png' - import { getWeatherApi } from '@/api/home' + import { getSpotApi } from '@/api/sentiment' const emit = defineEmits(['change']) @@ -59,6 +77,7 @@ let isSkip = ref(true) let isBack = ref(false) let current = ref(0) + let otherScenic = ref('') // 补零 const fillZero = (value) => { @@ -79,31 +98,37 @@ minute )}:${fillZero(second)}` } - + const handleCommand = (e) => { + console.log(e, '=========') + title.value = e.name + otherScenic.value = e.name + current.value = '' + } // 返回上一页 const handleBack = () => { router.go(-1) } - // 点击导航 const handleNav = (item, index) => { if (isSkip.value) { router.push(item.path) } else { - emit('on-change', index) + if (current.value === index) return + otherScenic.value = '' + current.value = index + title.value = item.name } } - // 获取天气数据 const getWeather = async () => { let res = await getWeatherApi() weatherData.value = res.data } - // 设置当前路由导航栏 - const setNav = () => { + const setNav = async () => { switch (router.currentRoute.value.path) { case '/home': + isSkip.value = true title.value = '奉节县旅游指挥调度中心' navLeft.value = [ { name: '安全', path: '/monitor' }, @@ -118,10 +143,17 @@ ] break case '/scenic': - title.value = '景区' - navLeft.value = [] - navRight.value = [] + isSkip.value = false isBack.value = true + let res = await getSpotApi() + navLeft.value = res.data.map((item) => { + return { + name: item.ssname, + id: item.id + } + }) + title.value = navLeft.value[current.value].name + navRight.value = [] break case '/sentiment': title.value = '舆情检测' @@ -249,6 +281,7 @@ font-size: vw(48); font-weight: 800; color: transparent; + letter-spacing: vw(10); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; @@ -271,6 +304,10 @@ text-align: center; color: rgba(208, 236, 255, 0.9); background-size: 100% 100%; + .icon { + width: vw(18); + height: vw(18); + } } } .nav-right { diff --git a/src/views/home/components/box-3.vue b/src/views/home/components/box-3.vue index 1a0afd7..335c5c4 100644 --- a/src/views/home/components/box-3.vue +++ b/src/views/home/components/box-3.vue @@ -97,7 +97,7 @@
    -
    车库总数
    +
    总车位数
    diff --git a/src/views/scenic/components/box-2.vue b/src/views/scenic/components/box-2.vue index 502a3f3..5ed6517 100644 --- a/src/views/scenic/components/box-2.vue +++ b/src/views/scenic/components/box-2.vue @@ -344,7 +344,7 @@ cursor: pointer; position: absolute; right: vw(20); - bottom: vh(20); + bottom: vw(20); width: vw(50); z-index: 999; } @@ -375,7 +375,7 @@ } .icon { width: vw(26); - height: vh(28); + height: vw(28); margin-right: vw(4); } .text { diff --git a/src/views/traffic/components/box-1.vue b/src/views/traffic/components/box-1.vue index 5825315..9b388e4 100644 --- a/src/views/traffic/components/box-1.vue +++ b/src/views/traffic/components/box-1.vue @@ -1,287 +1,282 @@ \ No newline at end of file + .traffic-box-1 { + width: vw(815); + height: vh(975); + background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%); + border-radius: 0px 0px 0px 0px; + margin-top: vh(100); + position: relative; + z-index: 9; + .list-item { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding: 0 vw(10); + .item-li { + width: vw(388); + height: vh(420); + background-image: url('@/assets/images/bg-3.png'); + background-size: 100% 100%; + + .title-3 { + margin-left: vw(10); + position: relative; + width: vw(344); + height: vh(12); + margin-top: vh(20); + background-image: url('@/assets/images/title-6.png'); + background-size: 100% 100%; + + & > span { + position: absolute; + bottom: vh(4); + left: vw(20); + font-size: vw(15); + font-weight: bold; + background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */ + color: transparent; /* 兼容其他浏览器 */ + } + } + .chart-box { + width: 100%; + height: vh(370); + } + } + } + .title-num { + display: flex; + justify-content: flex-start; + padding: vw(40); + .item-box { + flex: 1; + .item-t { + display: flex; + font-weight: 400; + font-size: vw(14); + color: rgba(255, 255, 255, 0.8); + text-align: left; + font-style: normal; + text-transform: none; + margin-bottom: vh(20); + img { + margin-right: vw(5); + width: vw(8); + height: vh(8); + } + } + .item-num { + width: vw(134); + height: vh(30); + background-image: url('@/assets/images/t-box-title-bg-1.png'); + background-size: 100% 100%; + font-weight: bold; + font-size: vw(24); + color: #02f9fa; + text-align: left; + font-style: normal; + text-transform: none; + padding-left: vw(15); + position: relative; + left: vw(-8); + span { + position: relative; + top: vh(-5); + } + } + } + } + } + diff --git a/src/views/workOrder/components/box-2.vue b/src/views/workOrder/components/box-2.vue index 80a834e..fff2ace 100644 --- a/src/views/workOrder/components/box-2.vue +++ b/src/views/workOrder/components/box-2.vue @@ -1,772 +1,783 @@ \ No newline at end of file + :deep(.el-progress-bar__outer) { + background: rgba(0, 150, 255, 0.15); + border-radius: 0; + } + :deep(.el-progress-bar__inner) { + border-radius: 0; + } + :deep(.el-progress__text) { + font-size: vw(14) !important; + color: #fff; + } + .line-chart { + // margin-top:vh(20); + } + .chart-p { + position: relative; + .check-label { + position: absolute; + right: vw(20); + top: vh(-15); + span { + min-width: vw(55); + padding: vw(5); + background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%); + border-radius: vw(50); + // border: 1px solid rgba(0,114,220,0.3); + margin-left: vw(5); + display: inline-block; + font-weight: 400; + font-size: vw(13); + color: #0084ff; + text-align: center; + font-style: normal; + text-transform: none; + } + .active { + background: linear-gradient(270deg, #37d8fc 0%, #0084ff 100%); + border-radius: vw(50); + border: 1px solid rgba(0, 114, 220, 0.3); + color: #fff; + } + } + } + .work-box-2 { + width: vw(1522); + height: vh(965); + margin-top: vh(100); + margin-left: vw(10); + position: relative; + z-index: 99; + .work-2-flex { + background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%); + height: vh(490); + overflow: hidden; + + .chart-box { + display: flex; + justify-content: space-between; + padding: vw(20) vw(15); + + .lt-chart { + width: vw(740); + min-height: vw(336); + padding: vw(20); + background-image: url('@/assets/images/bg-3.png'); + background-size: 100% 100%; + .box-press { + padding: vw(30); + padding-top: vh(40); + .p-item { + display: flex; + width: 100%; + margin-top: vh(40); + align-items: center; + span { + font-weight: bold; + font-size: vw(14); + color: #ffffff; + text-align: left; + font-style: normal; + text-transform: none; + margin-right: vw(10); + } + .box-1 { + flex: 1; + } + } + } + .box { + width: 100%; + height: vh(250); + display: flex; + margin-top: vh(30); + .chart-1 { + flex: 1; + } + .chart-des { + width: vw(224); + height: vh(312); + background: #0a4190; + .t-item:nth-child(odd) { + background: rgba(0, 150, 255, 0.3); + } + .t-item:nth-child(even) { + background-color: transparent; + } + .t-item { + display: flex; + padding: vh(10) vw(10); + span { + width: vw(24); + height: vh(16); + text-align: center; + display: inline-block; + margin-right: vw(10); + color: #fff; + border-radius: 2px 2px 2px 2px; + } + p { + font-weight: 400; + font-size: vw(15); + color: #ffffff; + text-align: left; + font-style: normal; + text-transform: none; + flex: 1; + /*1. 先强制一行内显示文本*/ + white-space: nowrap; + /*2. 超出的部分隐藏*/ + overflow: hidden; + /*3. 文字用省略号替代超出的部分*/ + text-overflow: ellipsis; + } + .bgColor1 { + background: #d9011b; + } + .bgColor2 { + background: #feae00; + } + .bgColor3 { + background: #2380fb; + } + .bgColor4 { + background: #495c77; + } + } + .t-des { + background: rgba(0, 150, 255, 0.4); + padding: vw(10); + font-weight: 400; + font-size: vw(13); + color: #02f9fa; + display: flex; + text-align: left; + font-style: normal; + text-transform: none; + img { + width: vw(16); + height: vh(12); + margin-right: vw(5); + } + } + } + } + .title-3 { + position: relative; + width: vw(344); + height: vh(12); + margin-top: vh(20); + background-image: url('@/assets/images/title-6.png'); + background-size: 100% 100%; + + & > span { + position: absolute; + bottom: vh(4); + left: vw(20); + font-size: vw(15); + font-weight: bold; + background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */ + color: transparent; /* 兼容其他浏览器 */ + } + } + } + } + .hd-list { + display: flex; + justify-content: center; + position: relative; + .h-icon { + position: absolute; + left: vw(70); + top: 50%; + transform: translateY(-50%); + width: vw(74); + height: auto; + } + .item { + display: flex; + width: vw(210); + height: vh(58); + line-height: vh(58); + padding-left: vw(10); + text-align: center; + margin: 0 vw(15); + font-weight: 400; + font-size: vw(14); + color: rgba(255, 255, 255, 0.9); + text-align: left; + font-style: normal; + text-transform: none; + span { + font-size: vw(24); + position: relative; + top: vh(2); + margin-left: vw(5); + } + .color1 { + color: #02f9fa; + } + } + .item1 { + background-image: url('@/assets/images/work-n-bg-1.png'); + background-size: 100% 100%; + } + .item2 { + background-image: url('@/assets/images/work-n-bg-2.png'); + background-size: 100% 100%; + } + .item3 { + background-image: url('@/assets/images/work-n-bg-3.png'); + background-size: 100% 100%; + } + } + .header { + position: relative; + margin: vh(20); + + .title { + margin: vh(5) auto; + width: vw(468); + height: vh(32); + font-weight: 800; + font-size: vw(16); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + background-image: url('@/assets/images/title-4.png'); + background-size: 100% 100%; + span { + font-weight: 800; + color: transparent; + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%); + } + } + } + } + } + diff --git a/src/views/workOrder/components/box-3.vue b/src/views/workOrder/components/box-3.vue index c628321..0c85ba0 100644 --- a/src/views/workOrder/components/box-3.vue +++ b/src/views/workOrder/components/box-3.vue @@ -1,413 +1,412 @@ \ No newline at end of file + .work-box-3 { + width: vw(813); + height: vh(380); + background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%); + border-radius: 0px 0px 0px 0px; + margin-top: vh(100); + margin-left: vw(10); + position: relative; + z-index: 99; + .work-box-1 { + width: vw(815); + height: vh(588); + // margin-top:vh(100); + background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%); + border-radius: 0px 0px 0px 0px; + position: relative; + z-index: 99; + padding: 0 vw(20); + .list { + /* 滚动条整体样式 */ + &::-webkit-scrollbar { + width: vw(4); /* 滚动条的宽度 */ + } + /* 滚动条轨道 */ + &::-webkit-scrollbar-track { + background: 'transparent'; /* 轨道的背景色 */ + } + /* 滚动条滑块 */ + &::-webkit-scrollbar-thumb { + background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */ + border-radius: 5px; /* 滑块的圆角 */ + } + height: vh(510); + overflow: auto; + .li:nth-child(odd) { + background: rgba(3, 78, 153, 0.3); + } + .li:nth-child(even) { + background-color: transparent; + } + .li { + display: flex; + align-items: center; + justify-content: flex-start; + padding: vh(8) vh(10); + .label { + width: vw(60); + height: vh(24); + line-height: vh(24); + color: #fff; + border-radius: 2px 2px 2px 2px; + font-size: vw(14); + text-align: center; + display: inline-block; + margin-right: vw(10); + } + .label1 { + background: #2380fb; + } + .label2 { + background: #feae00; + } + .label3 { + background: #d9011b; + } + .time { + font-weight: 400; + font-size: vw(12); + color: rgba(255, 255, 255, 0.6); + line-height: 14px; + text-align: left; + font-style: normal; + text-transform: none; + margin-left: vw(30); + } + p { + font-weight: 400; + font-size: vw(15); + color: #ffffff; + text-align: left; + font-style: normal; + text-transform: none; + flex: 1; + /*1. 先强制一行内显示文本*/ + white-space: nowrap; + /*2. 超出的部分隐藏*/ + overflow: hidden; + /*3. 文字用省略号替代超出的部分*/ + text-overflow: ellipsis; + } + } + } + .header { + position: relative; + margin: vh(20); + .title { + margin: vh(5) auto; + width: vw(468); + height: vh(32); + font-weight: 800; + font-size: vw(16); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + background-image: url('@/assets/images/title-4.png'); + background-size: 100% 100%; + span { + font-weight: 800; + color: transparent; + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%); + } + } + } + } + .work-2-flex { + background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%); + height: vh(380); + overflow: hidden; + .chart-box { + display: flex; + justify-content: space-between; + padding: vw(20) vw(15); + height: vh(360); + padding-top: vh(35); + box-sizing: border-box; + .box-item { + flex: 1; + width: vw(140); + height: vh(140); + padding: vw(10); + .line-chart { + // width:100%; + // height:100%; + } + } + } + .header { + position: relative; + margin: vh(20); + + .title { + margin: vh(5) auto; + width: vw(468); + height: vh(32); + font-weight: 800; + font-size: vw(16); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + background-image: url('@/assets/images/title-4.png'); + background-size: 100% 100%; + span { + font-weight: 800; + color: transparent; + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%); + } + } + } + .hd-list { + display: flex; + justify-content: center; + position: relative; + padding: 0 vw(20); + .h-icon { + position: absolute; + left: vw(70); + top: 50%; + transform: translateY(-50%); + width: vw(74); + height: vh(74); + } + .item { + display: flex; + width: vw(210); + height: vh(58); + line-height: vh(58); + padding-left: vw(10); + text-align: center; + margin: 0 vw(15); + font-weight: 400; + font-size: vw(14); + color: rgba(255, 255, 255, 0.9); + text-align: left; + font-style: normal; + text-transform: none; + span { + font-size: vw(24); + position: relative; + top: vh(2); + margin-left: vw(5); + } + .color1 { + color: #02f9fa; + } + } + .item1 { + background-image: url('@/assets/images/work-n-bg-1.png'); + background-size: 100% 100%; + } + .item2 { + background-image: url('@/assets/images/work-n-bg-2.png'); + background-size: 100% 100%; + } + .item3 { + background-image: url('@/assets/images/work-n-bg-3.png'); + background-size: 100% 100%; + } + } + } + } +