From b2cc0bbb14f947af291dd9c952c95b32bac1ddad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8B=AC=E6=A0=91=E7=9A=84=E9=A3=8E?= <2167228784@qq.com> Date: Sun, 3 Dec 2023 23:22:48 +0800 Subject: [PATCH] =?UTF-8?q?update:=20=E6=9B=B4=E6=96=B0=EF=BC=8C=E5=AE=A1?= =?UTF-8?q?=E6=9F=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 8 +- package.json | 4 +- src/assets/main.scss | 31 +- .../picture/{编组 20.png => bg_point.png} | Bin ...警力分布_nor.png => bg_police_nor.png} | Bin .../picture/{bg_涉海_1.png => bg_sea_1.png} | Bin .../picture/{bg_涉海_2.png => bg_sea_2.png} | Bin .../picture/{bg_涉海_3.png => bg_sea_3.png} | Bin .../picture/{bg_涉海_4.png => bg_sea_4.png} | Bin ...ompany_blue(1).png => icon_point_blue.png} | Bin ...pany_green(1).png => icon_point_green.png} | Bin ...con_company_red.png => icon_point_red.png} | Bin ...mpany_yellow.png => icon_point_yellow.png} | Bin src/components/MapScroll.vue | 22 +- src/router/index.js | 20 +- .../components/EchartsPolicesStatue.vue | 57 ++ .../coastalMap/components/keyInformantion.vue | 837 ++++++++++++++++++ src/views/coastalMap/components/keyPerson.vue | 98 +- .../coastalMap/components/keypersonScroll.vue | 180 ++++ src/views/coastalMap/components/mapBody.vue | 4 +- .../coastalMap/components/policeScroll.vue | 137 +++ .../coastalMap/components/policeSpread.vue | 84 +- .../coastalMap/components/policeStatu.vue | 22 - .../coastalMap/components/policeStatus.vue | 68 ++ src/views/coastalMap/components/resource.vue | 6 +- .../coastalMap/components/seaElement.vue | 96 +- src/views/coastalMap/index.vue | 128 +-- src/views/map/components/MapContainer.vue | 2 +- src/views/map/components/MapScroll.vue | 77 -- .../sensingDevice/components/carEcharts.vue | 167 ++++ .../sensingDevice/components/carLarge.vue | 8 +- .../sensingDevice/components/deviceLive.vue | 101 +++ .../components/mancarStatistics.vue | 2 +- .../sensingDevice/components/mapSearch.vue | 4 +- .../components/peopleEcharts.vue | 4 +- .../sensingDevice/components/peopleLarge.vue | 2 +- .../sensingDevice/components/publicCatch.vue | 10 +- src/views/sensingDevice/index.vue | 113 ++- .../videoMonitor/components/livePlayer.vue | 2 +- 39 files changed, 2015 insertions(+), 279 deletions(-) rename src/assets/picture/{编组 20.png => bg_point.png} (100%) rename src/assets/picture/{bg_警力分布_nor.png => bg_police_nor.png} (100%) rename src/assets/picture/{bg_涉海_1.png => bg_sea_1.png} (100%) rename src/assets/picture/{bg_涉海_2.png => bg_sea_2.png} (100%) rename src/assets/picture/{bg_涉海_3.png => bg_sea_3.png} (100%) rename src/assets/picture/{bg_涉海_4.png => bg_sea_4.png} (100%) rename src/assets/picture/{icon_company_blue(1).png => icon_point_blue.png} (100%) rename src/assets/picture/{icon_company_green(1).png => icon_point_green.png} (100%) rename src/assets/picture/{icon_company_red.png => icon_point_red.png} (100%) rename src/assets/picture/{icon_company_yellow.png => icon_point_yellow.png} (100%) create mode 100644 src/views/coastalMap/components/EchartsPolicesStatue.vue create mode 100644 src/views/coastalMap/components/keyInformantion.vue create mode 100644 src/views/coastalMap/components/keypersonScroll.vue create mode 100644 src/views/coastalMap/components/policeScroll.vue delete mode 100644 src/views/coastalMap/components/policeStatu.vue create mode 100644 src/views/coastalMap/components/policeStatus.vue delete mode 100644 src/views/map/components/MapScroll.vue create mode 100644 src/views/sensingDevice/components/carEcharts.vue create mode 100644 src/views/sensingDevice/components/deviceLive.vue diff --git a/package-lock.json b/package-lock.json index 4496d0d..cf55c0d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "sheyang-minedata", + "name": "sheyang_coastal_system", "version": "0.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "sheyang-minedata", + "name": "sheyang_coastal_system", "version": "0.1.0", "dependencies": { "@liveqing/liveplayer": "^2.6.9", @@ -7367,7 +7367,7 @@ }, "node_modules/js-cookie": { "version": "3.0.5", - "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", + "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz", "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==", "engines": { "node": ">=14" @@ -17742,7 +17742,7 @@ }, "js-cookie": { "version": "3.0.5", - "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", + "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz", "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==" }, "js-message": { diff --git a/package.json b/package.json index 75216c6..1041de2 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { - "name": "sheyang-minedata", + "name": "sheyang_coastal_system", "version": "0.1.0", "private": true, "scripts": { - "serve": "vue-cli-service serve", + "dev": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, diff --git a/src/assets/main.scss b/src/assets/main.scss index ae90676..c4ea8c9 100644 --- a/src/assets/main.scss +++ b/src/assets/main.scss @@ -4,32 +4,7 @@ html,body { box-sizing: border-box; font-size: 12px; } -// * 房屋地址相关样式 -.house{ - display: flex; - flex-direction: column; - justify-content: space-around; - width: 15vw; - height: 30vh; - font-size: 1rem; - color: #fff; - - .house-item { - padding: 5px; - display: flex; - flex: 1; - justify-content: space-between; - align-items: center; - } - .state-a{ - border-radius: 5px 5px 0 0; - background-color: rgb(240, 156, 156); - } - .state-b{ - background-color: rgb(250, 114, 3); - } - .state-c{ - border-radius: 0 0 5px 5px; - background-color: rgb(0, 119, 255); - } +// * 隐藏地图logo +a.minemap-ctrl-logo { + display: none; } \ No newline at end of file diff --git a/src/assets/picture/编组 20.png b/src/assets/picture/bg_point.png similarity index 100% rename from src/assets/picture/编组 20.png rename to src/assets/picture/bg_point.png diff --git a/src/assets/picture/bg_警力分布_nor.png b/src/assets/picture/bg_police_nor.png similarity index 100% rename from src/assets/picture/bg_警力分布_nor.png rename to src/assets/picture/bg_police_nor.png diff --git a/src/assets/picture/bg_涉海_1.png b/src/assets/picture/bg_sea_1.png similarity index 100% rename from src/assets/picture/bg_涉海_1.png rename to src/assets/picture/bg_sea_1.png diff --git a/src/assets/picture/bg_涉海_2.png b/src/assets/picture/bg_sea_2.png similarity index 100% rename from src/assets/picture/bg_涉海_2.png rename to src/assets/picture/bg_sea_2.png diff --git a/src/assets/picture/bg_涉海_3.png b/src/assets/picture/bg_sea_3.png similarity index 100% rename from src/assets/picture/bg_涉海_3.png rename to src/assets/picture/bg_sea_3.png diff --git a/src/assets/picture/bg_涉海_4.png b/src/assets/picture/bg_sea_4.png similarity index 100% rename from src/assets/picture/bg_涉海_4.png rename to src/assets/picture/bg_sea_4.png diff --git a/src/assets/picture/icon_company_blue(1).png b/src/assets/picture/icon_point_blue.png similarity index 100% rename from src/assets/picture/icon_company_blue(1).png rename to src/assets/picture/icon_point_blue.png diff --git a/src/assets/picture/icon_company_green(1).png b/src/assets/picture/icon_point_green.png similarity index 100% rename from src/assets/picture/icon_company_green(1).png rename to src/assets/picture/icon_point_green.png diff --git a/src/assets/picture/icon_company_red.png b/src/assets/picture/icon_point_red.png similarity index 100% rename from src/assets/picture/icon_company_red.png rename to src/assets/picture/icon_point_red.png diff --git a/src/assets/picture/icon_company_yellow.png b/src/assets/picture/icon_point_yellow.png similarity index 100% rename from src/assets/picture/icon_company_yellow.png rename to src/assets/picture/icon_point_yellow.png diff --git a/src/components/MapScroll.vue b/src/components/MapScroll.vue index c5cd767..da5c749 100644 --- a/src/components/MapScroll.vue +++ b/src/components/MapScroll.vue @@ -12,7 +12,7 @@ v-for="(item, index) in groupItems" :key="index" > -
+
人员追踪
@@ -48,7 +48,7 @@ + + diff --git a/src/views/coastalMap/components/keyInformantion.vue b/src/views/coastalMap/components/keyInformantion.vue new file mode 100644 index 0000000..4ecda9e --- /dev/null +++ b/src/views/coastalMap/components/keyInformantion.vue @@ -0,0 +1,837 @@ + + + + + diff --git a/src/views/coastalMap/components/keyPerson.vue b/src/views/coastalMap/components/keyPerson.vue index 273cf97..c2362ba 100644 --- a/src/views/coastalMap/components/keyPerson.vue +++ b/src/views/coastalMap/components/keyPerson.vue @@ -7,7 +7,7 @@
- +
@@ -68,78 +68,84 @@
-
+
+ +
\ No newline at end of file + diff --git a/src/views/coastalMap/components/keypersonScroll.vue b/src/views/coastalMap/components/keypersonScroll.vue new file mode 100644 index 0000000..7cc3575 --- /dev/null +++ b/src/views/coastalMap/components/keypersonScroll.vue @@ -0,0 +1,180 @@ + + + + + diff --git a/src/views/coastalMap/components/mapBody.vue b/src/views/coastalMap/components/mapBody.vue index 933d5b0..6e65bf8 100644 --- a/src/views/coastalMap/components/mapBody.vue +++ b/src/views/coastalMap/components/mapBody.vue @@ -5,7 +5,9 @@ export default { name: 'MapBody', data() { - return {} + return { + mapContainer: null + } }, mounted() { this.init_map() diff --git a/src/views/coastalMap/components/policeScroll.vue b/src/views/coastalMap/components/policeScroll.vue new file mode 100644 index 0000000..eac3668 --- /dev/null +++ b/src/views/coastalMap/components/policeScroll.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/src/views/coastalMap/components/policeSpread.vue b/src/views/coastalMap/components/policeSpread.vue index f7f98c7..fcdc278 100644 --- a/src/views/coastalMap/components/policeSpread.vue +++ b/src/views/coastalMap/components/policeSpread.vue @@ -1,13 +1,36 @@ @@ -16,6 +39,61 @@ export default { .police { width: 18vw; height: 18vh; - background-color: #fcc9c9; + + .police_title { + height: 4vh; + background-image: url('@/assets/picture/bg_small_title.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + + .police_title_text { + margin-left: 2vw; + font-size: 1vw; + color: #edf1f7; + line-height: 4vh; + text-shadow: 0 0 10px #0b4672; + } + } + + .police_body { + display: flex; + justify-content: space-around; + align-items: center; + height: 15vh; + background-image: url('@/assets/picture/bg_right.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + + .police_body_box { + width: 5vw; + height: 10vh; + background-image: url('@/assets/picture/bg_police_nor.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + + &:hover { + background-image: url('@/assets/picture/bg_police_hover.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + .police_body_box_title { + height: 3vh; + text-align: center; + font-size: 1vw; + color: #edf1f7; + line-height: 2.7vh; + } + + .police_body_box_num { + font-size: 1vw; + font-family: D-DIN, D-DIN; + font-weight: bold; + color: #00f5ff; + text-align: center; + line-height: 7vh; + } + } + } } diff --git a/src/views/coastalMap/components/policeStatu.vue b/src/views/coastalMap/components/policeStatu.vue deleted file mode 100644 index 3b7da25..0000000 --- a/src/views/coastalMap/components/policeStatu.vue +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - diff --git a/src/views/coastalMap/components/policeStatus.vue b/src/views/coastalMap/components/policeStatus.vue new file mode 100644 index 0000000..3cf9947 --- /dev/null +++ b/src/views/coastalMap/components/policeStatus.vue @@ -0,0 +1,68 @@ + + + + + + diff --git a/src/views/coastalMap/components/resource.vue b/src/views/coastalMap/components/resource.vue index 16b035b..f005503 100644 --- a/src/views/coastalMap/components/resource.vue +++ b/src/views/coastalMap/components/resource.vue @@ -47,7 +47,7 @@ export default { }, created() { // this.add() - this.get_person() + // this.get_person() }, methods: { // async add() { @@ -112,7 +112,7 @@ export default { color: aliceblue; text-align: right; line-height: 4vh; - font-size: 14px; + font-size: 0.8rem; font-weight: 500; } .box_item_value { @@ -121,7 +121,7 @@ export default { text-align: center; line-height: 4vh; color: #00f5ff; - font-size: 14px; + font-size: 0.8rem; font-weight: 800; } } diff --git a/src/views/coastalMap/components/seaElement.vue b/src/views/coastalMap/components/seaElement.vue index bff27a0..d083f35 100644 --- a/src/views/coastalMap/components/seaElement.vue +++ b/src/views/coastalMap/components/seaElement.vue @@ -1,13 +1,51 @@ @@ -16,7 +54,57 @@ export default { .sea { margin-top: 2vh; width: 18vw; - height: 26vh; - background-color: #00a854; + height: 20vh; + + .sea_title { + height: 4vh; + background-image: url('@/assets/picture/bg_small_title.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + + .sea_title_text { + margin-left: 2vw; + color: #edf1f7; + font-size: 1vw; + line-height: 4vh; + text-shadow: 0 0 10px #0b4672; + } + } + + .sea_body { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-around; + height: 16vh; + background-image: url('@/assets/picture/bg_5.png'); + + .sea_body_box { + display: flex; + flex-direction: column; + justify-content: start; + align-items: center; + width: 7vw; + height: 6vh; + background-repeat: no-repeat; + background-size: 100% auto; + + .sea_body_box_num { + margin-left: 1vw; + color: #00f5ff; + font-size: 1vw; + font-family: D-DIN; + font-weight: bold; + } + + .sea_body_box_title { + margin-left: 1vw; + color: #fff; + font-family: PingFangSC; + font-weight: 500; + font-size: 1vw; + } + } + } } diff --git a/src/views/coastalMap/index.vue b/src/views/coastalMap/index.vue index 1b0b1ff..7667c65 100644 --- a/src/views/coastalMap/index.vue +++ b/src/views/coastalMap/index.vue @@ -1,7 +1,7 @@ - - diff --git a/src/views/sensingDevice/components/carEcharts.vue b/src/views/sensingDevice/components/carEcharts.vue new file mode 100644 index 0000000..7ce610f --- /dev/null +++ b/src/views/sensingDevice/components/carEcharts.vue @@ -0,0 +1,167 @@ + + + + + diff --git a/src/views/sensingDevice/components/carLarge.vue b/src/views/sensingDevice/components/carLarge.vue index ad79c9f..44ffd4d 100644 --- a/src/views/sensingDevice/components/carLarge.vue +++ b/src/views/sensingDevice/components/carLarge.vue @@ -4,13 +4,17 @@
车流量
-
Echarts
+
+ +
+ + diff --git a/src/views/sensingDevice/components/mancarStatistics.vue b/src/views/sensingDevice/components/mancarStatistics.vue index 285e967..c49f299 100644 --- a/src/views/sensingDevice/components/mancarStatistics.vue +++ b/src/views/sensingDevice/components/mancarStatistics.vue @@ -31,7 +31,7 @@ export default { .mancar_title_text { margin-left: 2vw; - font-size: 0.1vw; + font-size: 0.8rem; font-family: 'PingFangSC'; line-height: 4vh; color: #edf1f7; diff --git a/src/views/sensingDevice/components/mapSearch.vue b/src/views/sensingDevice/components/mapSearch.vue index a59d4f8..7ebb06a 100644 --- a/src/views/sensingDevice/components/mapSearch.vue +++ b/src/views/sensingDevice/components/mapSearch.vue @@ -65,7 +65,7 @@ export default { .search_input::placeholder { position: relative; left: 1vw; - font-size: 0.5vw; + font-size: 0.8rem; font-family: '苹方-简'; color: #ecf4f9; } @@ -124,7 +124,7 @@ export default { color: #ecf4f9; .el-checkbox__label { - font-size: 0.4vw; + font-size: 0.8rem; font-family: '苹方-简 中黑体'; } diff --git a/src/views/sensingDevice/components/peopleEcharts.vue b/src/views/sensingDevice/components/peopleEcharts.vue index 63bb2ae..2d32c23 100644 --- a/src/views/sensingDevice/components/peopleEcharts.vue +++ b/src/views/sensingDevice/components/peopleEcharts.vue @@ -45,8 +45,8 @@ export default { xAxis: [ { type: 'category', - boundaryGap: false, - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + boundaryGap: false + // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] } ], yAxis: [ diff --git a/src/views/sensingDevice/components/peopleLarge.vue b/src/views/sensingDevice/components/peopleLarge.vue index a09b17f..92a12c0 100644 --- a/src/views/sensingDevice/components/peopleLarge.vue +++ b/src/views/sensingDevice/components/peopleLarge.vue @@ -36,7 +36,7 @@ export default { .people_large_title_text { margin-left: 2vw; - font-size: 0.1vw; + font-size: 0.8rem; font-family: 'PingFangSC'; line-height: 4vh; color: #edf1f7; diff --git a/src/views/sensingDevice/components/publicCatch.vue b/src/views/sensingDevice/components/publicCatch.vue index 6c9537b..a9c53b6 100644 --- a/src/views/sensingDevice/components/publicCatch.vue +++ b/src/views/sensingDevice/components/publicCatch.vue @@ -35,16 +35,16 @@ export default { .capture_title { width: 24vw; - height: 4vh; + height: 4.5vh; background-image: url('@/assets/picture/bg_small_title.png'); background-size: 100% auto; background-repeat: no-repeat; .capture_title_text { - margin-left: 2vw; - font-size: 0.1vw; - font-family: 'PingFangSC'; - line-height: 4vh; + margin-left: 3vw; + font-size: 0.8rem; + font-family: PingFangSC, PingFang SC; + line-height: 4.5vh; color: #edf1f7; } } diff --git a/src/views/sensingDevice/index.vue b/src/views/sensingDevice/index.vue index f6a6030..3d77e5c 100644 --- a/src/views/sensingDevice/index.vue +++ b/src/views/sensingDevice/index.vue @@ -2,6 +2,30 @@
+ + +
+ +
+
+ +
+ +
+
+ +
+
+
+ +
{{ title_text }}
+
+
+
+
+
+
+
@@ -29,6 +53,7 @@ import ManCar from './components/mancarStatistics.vue' // * 人车统计 import PeopleLarge from './components/peopleLarge.vue' // * 人流量 import CarLarge from './components/carLarge.vue' // * 车流量 import PublicCatch from './components/publicCatch.vue' // * 通用抓拍 +import DeviceLive from './components/deviceLive.vue' // * 感知设备弹窗 export default { components: { MapDevice, @@ -36,7 +61,8 @@ export default { ManCar, PeopleLarge, CarLarge, - PublicCatch + PublicCatch, + DeviceLive }, data() { return { @@ -44,23 +70,102 @@ export default { carouselData: [ { id: 1, title: '人脸抓拍' }, { id: 2, title: '车辆抓拍' } - ] + ], + title_text: '射阳沿海治安防控综合平台', + play: true } }, created() {}, mounted() {}, - methods: {}, + methods: { + onUpdateClose() { + this.play = !this.play + } + }, computed: {} } -