From 2a11f91d3648dde78638a4edaac3c56eb57a1720 Mon Sep 17 00:00:00 2001 From: zjc <1034206993@qq.com> Date: Thu, 16 Jan 2025 12:37:23 +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 | 3 +- src/components/CoreVideo/index.vue | 1 - src/components/Header/index.vue | 52 +- src/components/Line/index.vue | 4 +- src/components/Nav/index.vue | 243 ++++++ src/components/PieRow/index.vue | 22 +- src/components/monitor/index.vue | 424 +++++------ src/components/navLeft/index.vue | 246 ------- src/hooks/socket.js | 5 +- src/router/index.js | 20 +- src/stores/scenic.js | 88 +++ src/styles/common.scss | 6 +- src/views/home/components/box-2.vue | 12 +- src/views/home/components/box-3.vue | 4 +- src/views/home/components/jam-duration.vue | 3 +- src/views/home/components/occupancy.vue | 2 +- src/views/home/components/vacancy.vue | 2 +- src/views/home/index.vue | 1 - src/views/monitor/components/alarmList.vue | 86 +++ src/views/monitor/components/alarmRate.vue | 106 +++ src/views/monitor/components/box-1.vue | 398 ++++++++++ src/views/monitor/components/box-2.vue | 697 +----------------- src/views/monitor/components/box-3.vue | 28 - src/views/monitor/index.vue | 4 +- .../components/{age-ratio.vue => age.vue} | 48 +- src/views/scenic/components/box-1.vue | 21 +- src/views/scenic/components/box-2.vue | 206 ++++-- src/views/scenic/components/traffic-flow.vue | 165 +++-- src/views/scenic/index.vue | 45 ++ src/views/sentiment/components/area.vue | 2 +- src/views/sentiment/index.vue | 7 +- src/views/testing/components/alarmList.vue | 86 +++ src/views/testing/components/alarmRate.vue | 106 +++ src/views/testing/components/alarmToday.vue | 161 ++++ src/views/testing/components/box-1.vue | 193 +++++ src/views/testing/components/box-2.vue | 625 +--------------- src/views/testing/components/box-3.vue | 223 +++++- src/views/testing/components/box-5.vue | 592 --------------- src/views/testing/index.vue | 59 +- src/views/testing/road.vue | 109 +-- src/views/traffic/components/box-1.vue | 136 ++-- src/views/traffic/components/box-2.vue | 181 +++-- src/views/traffic/components/box-3.vue | 330 ++++----- 43 files changed, 2644 insertions(+), 3108 deletions(-) create mode 100644 src/components/Nav/index.vue delete mode 100644 src/components/navLeft/index.vue create mode 100644 src/stores/scenic.js create mode 100644 src/views/monitor/components/alarmList.vue create mode 100644 src/views/monitor/components/alarmRate.vue create mode 100644 src/views/monitor/components/box-1.vue delete mode 100644 src/views/monitor/components/box-3.vue rename src/views/scenic/components/{age-ratio.vue => age.vue} (89%) create mode 100644 src/views/testing/components/alarmList.vue create mode 100644 src/views/testing/components/alarmRate.vue create mode 100644 src/views/testing/components/alarmToday.vue create mode 100644 src/views/testing/components/box-1.vue delete mode 100644 src/views/testing/components/box-5.vue diff --git a/src/api/request.js b/src/api/request.js index 95661c3..a51ff99 100644 --- a/src/api/request.js +++ b/src/api/request.js @@ -2,7 +2,6 @@ import axios from 'axios' import { useRouter } from 'vue-router' import { ElMessage } from 'element-plus' -// let devToken = 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImE1OWFmNWYwLTU3OWItNDJkNy1hZDJhLTY0Y2JlODA5ZWI1NiJ9.BTxvu6jUWbN0qONWf5K6VzXopE8T8qXzKuX-mij21VJT4U0LdgnqToyqeNDQ2OyJ6cvpdJBzQ9mEEb-dnwrTpQ' let proToken = @@ -15,7 +14,7 @@ const router = useRouter() const instance = axios.create({ // baseURL: 'http://36.138.38.16:6180/fjtcc-api', baseURL: 'http://36.138.38.16:8001/fjtcc-api', - // baseURL: 'http://172.22.15.170/fjtcc-api', + // baseURL: 'http://192.168.77.200/fjtcc-api', timeout: 100000, headers: { Authorization: devToken, diff --git a/src/components/CoreVideo/index.vue b/src/components/CoreVideo/index.vue index a2da096..ee565d2 100644 --- a/src/components/CoreVideo/index.vue +++ b/src/components/CoreVideo/index.vue @@ -50,7 +50,6 @@ let res = await getVideoListApi({ businessVideoDisplayPosition: '' }) - console.log(res, '============') list.value = res.data nextTick(() => { list.value.forEach(async (item, index) => { diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue index 331e3c6..94ee006 100644 --- a/src/components/Header/index.vue +++ b/src/components/Header/index.vue @@ -50,8 +50,8 @@ 风速：{{ weatherData?.windSpeed }} | 空气质量：{{ weatherData?.airQuality }} - {{ currentDate }} +

{{ currentDate }}

返回
@@ -206,6 +206,46 @@ ] isBack.value = true break + case '/sceneTesting': + title.value = '三峡之巅-安全检测' + navLeft.value = [ + { + name: '奉节县', + path: '/sceneTesting' + }, + { + name: '三峡之巅', + path: '/sceneTesting' + }, + { + name: '白帝城', + path: '/sceneTesting' + }, + { + name: '龙河桥', + path: '/sceneTesting' + } + ] + navRight.value = [ + { + name: '路段', + path: '/roadTesting' + }, + { + name: '路段', + path: '/roadTesting' + }, + { + name: '路段', + path: '/roadTesting' + }, + { + name: '路段', + path: '/roadTesting' + } + ] + isBack.value = true + break } } watch( @@ -230,7 +270,7 @@ left: vw(326); .weather { position: absolute; - right: 0; + left: 0; top: vh(10); font-weight: 400; font-size: vw(18); @@ -239,6 +279,14 @@ margin: 0 vw(10); } } + .date { + position: absolute; + right: 0; + top: vh(10); + font-weight: 400; + font-size: vw(18); + color: #ffffff; + } .back { position: absolute; right: 0; diff --git a/src/components/Line/index.vue b/src/components/Line/index.vue index e320b8c..72c5184 100644 --- a/src/components/Line/index.vue +++ b/src/components/Line/index.vue @@ -140,7 +140,7 @@ }, series: [] } - const updateOption = () => { + const init = () => { if (params) { props.data.map((item, index) => { params.series[index].data = item.data @@ -167,7 +167,7 @@ (val) => { if (val[0].length > 0 && val[1].length > 0) { setTimeout(() => { - updateOption() + init() }, 1000) } }, diff --git a/src/components/Nav/index.vue b/src/components/Nav/index.vue new file mode 100644 index 0000000..0f5f794 --- /dev/null +++ b/src/components/Nav/index.vue @@ -0,0 +1,243 @@ + + + diff --git a/src/components/PieRow/index.vue b/src/components/PieRow/index.vue index f10fce8..8dc105d 100644 --- a/src/components/PieRow/index.vue +++ b/src/components/PieRow/index.vue @@ -32,13 +32,17 @@ type: Array, default: () => [] }, + label: { + type: String, + default: () => '' + }, total: { type: Number, default: () => 0 } }) - const { id, chart, setOption, initChart } = useEchart() + const { id, setOption } = useEchart() var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA'] @@ -46,14 +50,14 @@ color: colorList, legend: { orient: 'vertical', - bottom: 'center', - left: '70%', - itemWidth: fitChartSize(20), - itemHeight: fitChartSize(20), - itemGap: fitChartSize(20), + x: '64%', + y: 'center', + itemWidth: fitChartSize(12), + itemHeight: fitChartSize(12), + itemGap: fitChartSize(10), textStyle: { color: '#ffffff', - fontSize: fitChartSize(20) + fontSize: fitChartSize(14) } }, series: [ @@ -69,8 +73,8 @@ show: true, position: 'center', fontWeight: 'bold', - formatter: function (o) { - return `{value|123456}` + '\n' + `{name|舆情总数 }` + formatter: () => { + return `{value|${props.total}}` + '\n' + `{name|${props.label} }` }, rich: { value: { diff --git a/src/components/monitor/index.vue b/src/components/monitor/index.vue index 25fc6c3..7766341 100644 --- a/src/components/monitor/index.vue +++ b/src/components/monitor/index.vue @@ -1,217 +1,221 @@ \ No newline at end of file + .video-box { + flex: 1; + display: flex; + .video-one-1 { + background-image: url('/src/assets/images/log-v-bg.png'); + background-size: 100% 100%; + flex-wrap: wrap; + padding-top: 0; + padding: vh(30) vw(20); + margin-left: vw(20); + } + .video-live { + justify-content: space-between; + margin-left: vw(10); + .video-lt { + width: vw(1666); + height: vh(950); + background-image: url('/src/assets/images/one-video-bg.png'); + background-size: 100% 100%; + padding: vh(40) vw(50); + position: relative; + .desc { + position: absolute; + // width:100%; + left: vw(50); + right: vw(50); + top: 40 (vh); + z-index: 9; + background: rgba(4, 30, 69, 0.5); + border-radius: 0px 0px 0px 0px; + text-align: center; + font-weight: 400; + font-size: vw(14); + color: #ffffff; + padding: vw(20); + text-align: left; + font-style: normal; + text-transform: none; + } + } + .v-error-bg { + // background-image: url('/src/assets/images/v-item-bg-1.png'); + // background-size: 100% 100%; + .desc { + background: rgba(226, 27, 27, 0.5); + } + } + .video-rt { + width: vw(400); + height: vh(950); + background: radial-gradient( + to bottom 70% at 99% 50%, + #0a4190 0%, + rgba(0, 77, 136, 0.6) 100% + ); + border-radius: 0px 0px 0px 0px; + border: 1px solid; + opacity: 0.4; + border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1; + margin-left: vw(10); + padding: vw(20); + .rt-v-box { + overflow-y: auto; + /* 滚动条整体样式 */ + &::-webkit-scrollbar { + width: vw(4); /* 滚动条的宽度 */ + } + /* 滚动条轨道 */ + &::-webkit-scrollbar-track { + background: 'transparent'; /* 轨道的背景色 */ + } + /* 滚动条滑块 */ + &::-webkit-scrollbar-thumb { + background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */ + border-radius: 5px; /* 滑块的圆角 */ + } + height: 100%; + } + .title { + background-image: url('/src/assets/images/nav-l-t-bg.png'); + background-size: 100% 100%; + margin-bottom: vh(10); + position: relative; + left: vw(-20); + span { + margin-left: vw(30); + font-weight: 800; + font-size: vw(15); + line-height: vh(26); + text-align: center; + font-style: normal; + text-transform: none; + + background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + color: transparent; + } + } + .rt-video { + width: 100%; + height: vh(300); + background-image: url('/src/assets/images/v-item-bg.png'); + background-size: 100% 100%; + padding: vw(20); + box-sizing: border-box; + margin-bottom: vh(2); + position: relative; + .desc { + position: absolute; + width: 100%; + left: 0; + bottom: 0; + z-index: 9; + background: rgba(4, 30, 69, 0.5); + border-radius: 0px 0px 0px 0px; + text-align: center; + font-weight: 400; + font-size: vw(14); + color: #ffffff; + padding: vw(20); + text-align: left; + font-style: normal; + text-transform: none; + } + } + .v-error-bg { + background-image: url('/src/assets/images/v-item-bg-1.png'); + background-size: 100% 100%; + .desc { + background: rgba(226, 27, 27, 0.5); + } + } + } + } + .v-item { + width: vw(400); + height: vh(300); + background-image: url('/src/assets/images/v-item-bg.png'); + background-size: 100% 100%; + padding: vw(20); + margin-right: vw(4); + margin-bottom: vh(4); + } + .v-error-bg { + background-image: url('/src/assets/images/v-item-bg-1.png'); + background-size: 100% 100%; + } + } + diff --git a/src/components/navLeft/index.vue b/src/components/navLeft/index.vue deleted file mode 100644 index 6d66ccf..0000000 --- a/src/components/navLeft/index.vue +++ /dev/null @@ -1,246 +0,0 @@ - - - \ No newline at end of file diff --git a/src/hooks/socket.js b/src/hooks/socket.js index 23f34d3..88f2ba1 100644 --- a/src/hooks/socket.js +++ b/src/hooks/socket.js @@ -6,6 +6,7 @@ const homeStore = useHomeStore() export function useWebSocket(url) { let socket = ref(null) // socket对象 let isConnected = ref(false) // 是否连接成功 + let dataRes = ref(null) // 存储推送数据 const connectWebSocket = () => { socket.value = new WebSocket(url, 'echo-protocol', { @@ -25,7 +26,7 @@ export function useWebSocket(url) { // 处理接收到的消息 if (JSON.parse(message.data)) { let data = JSON.parse(message.data) - console.log(data, '接收到的消息') + dataRes.value = data switch (data.type) { case 'userPortrait': homeStore.setUserPortraitData(data.data) @@ -87,5 +88,5 @@ export function useWebSocket(url) { } }) - return { socket, isConnected, connectWebSocket, sendMessage } + return { socket, dataRes, isConnected, connectWebSocket, sendMessage } } diff --git a/src/router/index.js b/src/router/index.js index 626ba80..6c0173d 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -43,19 +43,19 @@ const router = createRouter({ path: '/traffic', name: 'traffic', component: () => import('@/views/traffic/index.vue') + }, + { + path: '/sceneTesting', + name: 'sceneTesting', + component: () => import('@/views/testing/index.vue') + }, + { + path: '/roadTesting', + name: 'roadTesting', + component: () => import('@/views/testing/road.vue') } ] }, - { - path: '/sceneTesting', - name: 'sceneTesting', - component: () => import('@/views/testing/index.vue') - }, - { - path: '/roadTesting', - name: 'roadTesting', - component: () => import('@/views/testing/road.vue') - }, { path: '/404', name: 'NotFound', diff --git a/src/stores/scenic.js b/src/stores/scenic.js new file mode 100644 index 0000000..304f3e9 --- /dev/null +++ b/src/stores/scenic.js @@ -0,0 +1,88 @@ +import { ref } from 'vue' +import { defineStore } from 'pinia' + +export const useScenicStore = defineStore('scenic', () => { + // 门票销售数据 + let scenicSpotData = ref([ + { name: '今日购票数', value: 0 }, + + { name: '未来三天购票数', value: 0 }, + + { name: '三天后购票数', value: 0 } + ]) + // 景区排队信息 + let scenicQueueData = ref({ dataList: [], header: { jrcp: 0, jrjdrs: 0, pdcxsj: 0, pdrs: 0 } }) + // 景区负载信息 + let scenicBearData = ref({ dataList: [], header: { jqzdcz: 0, jrjdrs: 0 } }) + // 景区停车信息 + let stopCarData = ref({ + dataList: [], + dataLists: [], + headList: [] + }) + // 安全信息 + let secureData = ref({ + dataList: [] + }) + // 交通信息 + let trafficData = ref({ + infoList: [ + { name: '总通景路段', value: 100 }, + { name: '通景路段拥堵', value: 0 }, + { name: '通景拥堵开始时间', value: 0 }, + { name: '拥堵持续时间', value: 0 } + ], + data: { + congestion: [], + countRate: [], + timeRate: [] + } + }) + // 安全信息 + let userPortraitData = ref({ + data: { + ageRate: [], + channel: [], + genderRate: [], + provinceRate: [] + } + }) + + const setUserPortraitData = (val) => { + userPortraitData.value = val + } + const setTrafficData = (val) => { + trafficData.value = val + } + const setSecureData = (val) => { + secureData.value = val + } + const setStopCarData = (val) => { + stopCarData.value = val + } + const setScenicBearData = (val) => { + scenicBearData.value = val + } + const setScenicQueueData = (val) => { + scenicQueueData.value = val + } + const setScenicSpotData = (val) => { + scenicSpotData.value = val + } + return { + scenicSpotData, + scenicQueueData, + scenicBearData, + stopCarData, + secureData, + trafficData, + userPortraitData, + setScenicSpotData, + setScenicQueueData, + setScenicBearData, + setStopCarData, + setSecureData, + setTrafficData, + setUserPortraitData + } +}) diff --git a/src/styles/common.scss b/src/styles/common.scss index 2c15c8f..a23ba86 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -35,13 +35,13 @@ margin-right: vw(8) !important; } .mt-8 { - margin-top: vw(8) !important; + margin-top: vh(8) !important; } .pt-10 { - padding-top: vw(10) !important; + padding-top: vh(10) !important; } .pb-10 { - padding-bottom: vw(10) !important; + padding-bottom: vh(10) !important; } .mb-10 { margin-bottom: vh(10) !important; diff --git a/src/views/home/components/box-2.vue b/src/views/home/components/box-2.vue index 6c52c8b..539e0a9 100644 --- a/src/views/home/components/box-2.vue +++ b/src/views/home/components/box-2.vue @@ -38,8 +38,8 @@ -
-
+
+
@@ -315,11 +315,11 @@ } } .footer { + margin-top: vh(4); display: flex; - width: 100%; height: vh(120); - background-image: url('@/assets/images/bg-3.png'); - background-size: 100% 400%; + background-image: url('@/assets/images/bg-2.png'); + background-size: 100% 100%; .left { flex: 1; display: flex; diff --git a/src/views/home/components/box-3.vue b/src/views/home/components/box-3.vue index 6fb558d..f0ff69c 100644 --- a/src/views/home/components/box-3.vue +++ b/src/views/home/components/box-3.vue @@ -2,13 +2,13 @@
-
+
diff --git a/src/views/home/components/jam-duration.vue b/src/views/home/components/jam-duration.vue index 3600592..a4220d5 100644 --- a/src/views/home/components/jam-duration.vue +++ b/src/views/home/components/jam-duration.vue @@ -91,6 +91,7 @@ }, xAxis: [ { + // max: 10000, splitLine: { show: false }, @@ -117,7 +118,7 @@ }, { type: 'category', - inverse: true, + inverse: false, axisTick: 'none', axisLine: 'none', show: true, diff --git a/src/views/home/components/occupancy.vue b/src/views/home/components/occupancy.vue index 1838d81..29510e5 100644 --- a/src/views/home/components/occupancy.vue +++ b/src/views/home/components/occupancy.vue @@ -118,7 +118,7 @@ }, { type: 'category', - inverse: true, + inverse: false, axisTick: 'none', axisLine: 'none', show: true, diff --git a/src/views/home/components/vacancy.vue b/src/views/home/components/vacancy.vue index e8b8013..98888a7 100644 --- a/src/views/home/components/vacancy.vue +++ b/src/views/home/components/vacancy.vue @@ -115,7 +115,7 @@ }, { type: 'category', - inverse: true, + inverse: false, axisTick: 'none', axisLine: 'none', show: true, diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 6dedeb5..30b3f93 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -16,7 +16,6 @@ () => isConnected.value, (val) => { if (val) { - console.log('--------------------------------------------') sendMessage( JSON.stringify({ action: 'start', diff --git a/src/views/monitor/components/alarmList.vue b/src/views/monitor/components/alarmList.vue new file mode 100644 index 0000000..8d1c02b --- /dev/null +++ b/src/views/monitor/components/alarmList.vue @@ -0,0 +1,86 @@ + + + + + diff --git a/src/views/monitor/components/alarmRate.vue b/src/views/monitor/components/alarmRate.vue new file mode 100644 index 0000000..4b6972a --- /dev/null +++ b/src/views/monitor/components/alarmRate.vue @@ -0,0 +1,106 @@ + + + + + diff --git a/src/views/monitor/components/box-1.vue b/src/views/monitor/components/box-1.vue new file mode 100644 index 0000000..b5a2756 --- /dev/null +++ b/src/views/monitor/components/box-1.vue @@ -0,0 +1,398 @@ + + + + + diff --git a/src/views/monitor/components/box-2.vue b/src/views/monitor/components/box-2.vue index e011a66..c11c803 100644 --- a/src/views/monitor/components/box-2.vue +++ b/src/views/monitor/components/box-2.vue @@ -1,692 +1,33 @@ - - diff --git a/src/views/monitor/components/box-3.vue b/src/views/monitor/components/box-3.vue deleted file mode 100644 index 0d6ea74..0000000 --- a/src/views/monitor/components/box-3.vue +++ /dev/null @@ -1,28 +0,0 @@ - - - - \ No newline at end of file diff --git a/src/views/monitor/index.vue b/src/views/monitor/index.vue index 42738ac..4304fb7 100644 --- a/src/views/monitor/index.vue +++ b/src/views/monitor/index.vue @@ -1,10 +1,10 @@ diff --git a/src/views/scenic/components/box-1.vue b/src/views/scenic/components/box-1.vue index e1a87b1..a09e435 100644 --- a/src/views/scenic/components/box-1.vue +++ b/src/views/scenic/components/box-1.vue @@ -3,17 +3,13 @@
-
-
当日购票量：
- -
-
-
未来3天购票量：
- -
-
-
3天后购票量：
- +
+
{{ item.name }}
+
@@ -101,6 +97,9 @@ diff --git a/src/views/sentiment/components/area.vue b/src/views/sentiment/components/area.vue index 1207ede..1779bf9 100644 --- a/src/views/sentiment/components/area.vue +++ b/src/views/sentiment/components/area.vue @@ -1,6 +1,6 @@ diff --git a/src/views/sentiment/index.vue b/src/views/sentiment/index.vue index b771a86..f892abc 100644 --- a/src/views/sentiment/index.vue +++ b/src/views/sentiment/index.vue @@ -44,7 +44,12 @@
-
+
+

异常点位告警排名

+
    +
  • +
    {{ index + 1 }}
    +

    核心监控点1

    +
    • +
+
+ + + + + diff --git a/src/views/testing/components/alarmRate.vue b/src/views/testing/components/alarmRate.vue new file mode 100644 index 0000000..4b6972a --- /dev/null +++ b/src/views/testing/components/alarmRate.vue @@ -0,0 +1,106 @@ + + + + + diff --git a/src/views/testing/components/alarmToday.vue b/src/views/testing/components/alarmToday.vue new file mode 100644 index 0000000..6769673 --- /dev/null +++ b/src/views/testing/components/alarmToday.vue @@ -0,0 +1,161 @@ + + + + + diff --git a/src/views/testing/components/box-1.vue b/src/views/testing/components/box-1.vue new file mode 100644 index 0000000..922f179 --- /dev/null +++ b/src/views/testing/components/box-1.vue @@ -0,0 +1,193 @@ + + + + diff --git a/src/views/testing/components/box-2.vue b/src/views/testing/components/box-2.vue index 49169fc..56a5844 100644 --- a/src/views/testing/components/box-2.vue +++ b/src/views/testing/components/box-2.vue @@ -1,628 +1,19 @@ diff --git a/src/views/testing/components/box-3.vue b/src/views/testing/components/box-3.vue index 0bc5b47..7b9d359 100644 --- a/src/views/testing/components/box-3.vue +++ b/src/views/testing/components/box-3.vue @@ -1,25 +1,210 @@ \ No newline at end of file + .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); + 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; + } + } + } + .box-detection { + margin-top: vh(120); + width: vw(820); + height: vh(950); + background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%); + border-radius: 0px 0px 0px 0px; + .detection-top { + width: 100%; + height: vh(580); + background-color: #fff; + .map-img { + width: 100%; + height: 100%; + } + } + .monitor { + width: vw(405); + margin-right: vw(8); + &-statistics { + height: vh(70); + display: flex; + align-items: center; + justify-content: space-evenly; + background-image: url('@/assets/images/i-data-bg-1.png'); + background-size: 100% 100%; + } + &-statistics-icon { + width: vw(45); + height: vw(48); + } + &-statistics-item { + &__label { + font-weight: 400; + font-size: vw(14); + color: #fff; + } + &__value { + margin-top: vh(10); + font-weight: bold; + font-size: vw(24); + color: #ffffff; + } + &:nth-child(4) { + .monitor-statistics-item__value { + color: #e21b1b; + } + } + } + } + .traffic { + width: vw(405); + &-statistics { + height: vh(70); + display: flex; + align-items: center; + justify-content: space-evenly; + background-image: url('@/assets/images/i-data-bg-1.png'); + background-size: 100% 100%; + } + &-statistics-icon { + width: vw(45); + height: vw(48); + } + &-statistics-item { + &__label { + font-weight: 400; + font-size: vw(14); + color: #fff; + } + &__value { + margin-top: vh(10); + font-weight: bold; + font-size: vw(24); + color: #e21b1b; + text-align: center; + } + &:nth-child(4) { + .traffic-statistics-item__value { + color: rgba(167, 0, 0, 0.6); + } + } + } + } + .bg { + padding: vw(5); + margin-top: vh(8); + background-image: url('@/assets/images/bg-3.png'); + background-size: 100% 100%; + &:nth-child(1) { + margin-right: vw(10); + } + } + .t-title { + margin: vh(10) auto; + width: 100%; + 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%; + } + } + diff --git a/src/views/testing/components/box-5.vue b/src/views/testing/components/box-5.vue deleted file mode 100644 index b954d64..0000000 --- a/src/views/testing/components/box-5.vue +++ /dev/null @@ -1,592 +0,0 @@ - - - - diff --git a/src/views/testing/index.vue b/src/views/testing/index.vue index d64bcea..b82a21c 100644 --- a/src/views/testing/index.vue +++ b/src/views/testing/index.vue @@ -1,61 +1,12 @@ - + diff --git a/src/views/testing/road.vue b/src/views/testing/road.vue index 5e0f2a5..c4e5462 100644 --- a/src/views/testing/road.vue +++ b/src/views/testing/road.vue @@ -1,114 +1,13 @@ - + diff --git a/src/views/traffic/components/box-1.vue b/src/views/traffic/components/box-1.vue index 9d0970a..156260e 100644 --- a/src/views/traffic/components/box-1.vue +++ b/src/views/traffic/components/box-1.vue @@ -1,28 +1,28 @@