diff --git a/src/api/home.js b/src/api/home.js index de9cf6e..099c18c 100644 --- a/src/api/home.js +++ b/src/api/home.js @@ -17,6 +17,15 @@ export function getVideoListApi(data) { }) } +// 刷新播放地址 +export function getPreviewUrlApi(data) { + return request({ + url: '/fjtcc-api/api/largeScreen/video/getPreviewUrl', + method: 'post', + data + }) +} + // 刷新播放地址 export function postRefreshApi(data) { return request({ @@ -34,6 +43,15 @@ export function getSpotListApi() { }) } +// 百度地图详情 +export function getBaiduMapApi(data) { + return request({ + url: '/fjtcc-api/api/largeScreen/spot/baiduMap', + method: 'get', + params: data + }) +} + // 百度地图拥堵 export function getBaiduMapCrowdedApi(data) { return request({ diff --git a/src/api/monitor.js b/src/api/monitor.js new file mode 100644 index 0000000..cc9280f --- /dev/null +++ b/src/api/monitor.js @@ -0,0 +1,28 @@ +import request from './request' + +// 安全页面视频类型 +export function getVideoTypeApi(data) { + return request({ + url: '/fjtcc-api/api/largeScreen/video/type', + method: 'post', + data + }) +} + +// 获取区域树 +export function getVideoRegionsApi(data) { + return request({ + url: '/fjtcc-api/api/largeScreen/video/regions', + method: 'post', + data + }) +} + +// 更新视频资源 +export function postVideoRemainApi(data) { + return request({ + url: '/fjtcc-api/api/largeScreen/video/remain', + method: 'post', + data + }) +} diff --git a/src/api/traffic.js b/src/api/traffic.js index 3cb91e0..eaeaec1 100644 --- a/src/api/traffic.js +++ b/src/api/traffic.js @@ -1,5 +1,21 @@ import request from './request' +// 路段统计 +export function getRouterStateApi() { + return request({ + url: '/fjtcc-api/api/largeScreen/router/state ', + method: 'get' + }) +} + +// 统计图表 +export function getRouterChartsApi() { + return request({ + url: '/fjtcc-api/api/largeScreen/router/charts ', + method: 'get' + }) +} + // 交通路段 export function getRouterListApi() { return request({ @@ -7,3 +23,11 @@ export function getRouterListApi() { method: 'get' }) } + +// 交通拥堵 +export function getRoutersApi() { + return request({ + url: '/fjtcc-api/api/largeScreen/router/routes', + method: 'get' + }) +} diff --git a/src/assets/images/cover.png b/src/assets/images/cover.png deleted file mode 100644 index c8fee64..0000000 Binary files a/src/assets/images/cover.png and /dev/null differ diff --git a/src/assets/images/line.png b/src/assets/images/line.png new file mode 100644 index 0000000..f970b87 Binary files /dev/null and b/src/assets/images/line.png differ diff --git a/src/assets/images/monotir-bg-1.png b/src/assets/images/monotir-bg-1.png deleted file mode 100644 index e3d4b6d..0000000 Binary files a/src/assets/images/monotir-bg-1.png and /dev/null differ diff --git a/src/assets/images/node.png b/src/assets/images/node.png new file mode 100644 index 0000000..c644934 Binary files /dev/null and b/src/assets/images/node.png differ diff --git a/src/assets/images/queue.png b/src/assets/images/queue.png index b331325..27a8670 100644 Binary files a/src/assets/images/queue.png and b/src/assets/images/queue.png differ diff --git a/src/components/CoreVideo/index.vue b/src/components/CoreVideo/index.vue index d69dfc6..e7a98bf 100644 --- a/src/components/CoreVideo/index.vue +++ b/src/components/CoreVideo/index.vue @@ -11,7 +11,7 @@ >

- {{ item.cameraName }} + {{ item.cameraName || item.cameraIndexCode }}

- + diff --git a/src/views/monitor/components/alarmToday.vue b/src/views/monitor/components/alarmToday.vue new file mode 100644 index 0000000..dac2c5a --- /dev/null +++ b/src/views/monitor/components/alarmToday.vue @@ -0,0 +1,111 @@ + + + + + diff --git a/src/views/monitor/components/box-1.vue b/src/views/monitor/components/box-1.vue index b5a2756..1831b16 100644 --- a/src/views/monitor/components/box-1.vue +++ b/src/views/monitor/components/box-1.vue @@ -1,149 +1,117 @@ @@ -151,24 +119,239 @@ import countup from 'vue-countup-v3' import alarmRate from './alarmRate' import alarmList from './alarmList' + import alarmToday from './alarmToday' - const dataList = ref([ - { - name: '云阳', - value: 20 - }, - { - name: '奉节', - value: 10 - }, - { - name: '巫山', - value: 70 - } + import { useWebSocket } from '@/hooks/socket' + import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config' + + const { isConnected, dataRes, sendMessage } = useWebSocket( + `${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/monitor` + ) + + // 景区id + let scenicSpotId = ref('') + // 交通信息 + let trafficData = ref([ + { name: '总核心监控点位', type: 0, value: 0 }, + { name: '总核心分析点位', type: 1, value: 0 }, + { name: '总异常点位', type: 2, value: 0 } ]) + // 景区信息 + let scenicSpotData = ref({ + dataList: [], + dataLists: [] + }) + // 交通告警信息 + let trafficAbnormalityData = ref({ + dataList: [], + dataLists: [], + headList: [] + }) + // 监控点位统计 + let monitoringPointData = ref({ + dataList: [], + headList: [ + { name: '监控点位', type: 0, value: 0 }, + { name: '核心点位', type: 0, value: 0 }, + { name: '异常点位', type: 1, value: 0 } + ] + }) + // 监控点位统计 + let abnormalAlarmData = ref({ + dataList: [], + headList: [ + { name: '当前告警总数', type: 0, value: 0 }, + { name: '安全告警总数', type: 0, value: 0 }, + { name: '已解除告警数', type: 1, value: 0 } + ] + }) + + // 异常告警 + let abnormalData = computed(() => { + return [{ data: scenicSpotData.value.dataList.map((item) => item.value) }] + }) + let abnormalXAxisData = computed(() => { + return scenicSpotData.value.dataList.map((item) => item.name) + }) + + // 拥堵告警 + let jamlData = computed(() => { + return [{ data: trafficAbnormalityData.value.dataList.map((item) => item.value) }] + }) + let jamXAxisData = computed(() => { + return trafficAbnormalityData.value.dataList.map((item) => item.name) + }) + + watch( + () => isConnected.value, + (val) => { + if (val) { + sendMessage( + JSON.stringify({ + action: 'start', + type: 'index', + scenicSpotId: '' + }) + ) + } + } + ) + watch( + () => dataRes.value, + (val) => { + if (val) { + console.log(val, '安全接受消息') + switch (val.type) { + case 'trafficData': + trafficData.value = val.headList + break + case 'scenicSpotData': + scenicSpotData.value = val + break + case 'trafficAbnormalityData': + trafficAbnormalityData.value = val + break + case 'monitoringPointLocation': + monitoringPointData.value = val + break + case 'abnormalAlarmData': + abnormalAlarmData.value = val + break + } + } + } + ) + + let monitorChange = null + + onMounted(() => { + monitorChange = PubSub.subscribe('monitorChange', (msg, data) => { + scenicSpotId.value = data.scenicSpotId + sendMessage( + JSON.stringify({ + action: 'start', + type: 'index', + scenicSpotId: data.scenicSpotId + }) + ) + }) + }) + onUnmounted(() => { + PubSub.unsubscribe(monitorChange) + }) + + diff --git a/src/views/monitor/index.vue b/src/views/monitor/index.vue index 4304fb7..cab4b58 100644 --- a/src/views/monitor/index.vue +++ b/src/views/monitor/index.vue @@ -6,6 +6,4 @@ diff --git a/src/views/scenic/components/box-2.vue b/src/views/scenic/components/box-2.vue index 5bf2c1d..61c2405 100644 --- a/src/views/scenic/components/box-2.vue +++ b/src/views/scenic/components/box-2.vue @@ -81,8 +81,8 @@ :key="index" :width="140" :height="70" - :value="item.ratio" - :title="item.over" + :value="item.rate" + :title="item.occupied" :subTitle="`${item.name}剩余`" /> @@ -98,7 +98,7 @@
- +
@@ -133,7 +133,7 @@
{ - return scenicStore.stopCarData.headList.map((item) => { - return { - ...item, - ratio: ((item.count - item.over) / item.count) * 100 - } - }) + return scenicStore.stopCarData.headList }) const channelTotal = computed(() => { diff --git a/src/views/scenic/index.vue b/src/views/scenic/index.vue index 847d643..8f63be7 100644 --- a/src/views/scenic/index.vue +++ b/src/views/scenic/index.vue @@ -34,7 +34,7 @@ () => dataRes.value, (val) => { if (val) { - console.log(val, '接受消息') + console.log(val, '景区接受消息') switch (val.type) { case 'wordkOrderlist': scenicStore.setWordkOrderList(val.data) @@ -74,6 +74,7 @@ onMounted(() => { scenicChange = PubSub.subscribe('scenicChange', (msg, data) => { id.value = data.scenicSpotId + console.log(id.value, 'id.value') }) }) onUnmounted(() => { diff --git a/src/views/traffic/components/box-1.vue b/src/views/traffic/components/box-1.vue index b28ee40..824e435 100644 --- a/src/views/traffic/components/box-1.vue +++ b/src/views/traffic/components/box-1.vue @@ -1,41 +1,89 @@ @@ -58,13 +154,14 @@ .box-2 { margin-top: vh(120); display: flex; - background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%); } .nav { - width: vw(232); - margin-left: vw(10); - overflow: auto; + width: vw(230); height: vh(950); + margin-left: vw(8); + padding-left: vw(5); + overflow: auto; + background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%); &::-webkit-scrollbar { width: vw(0); /* 滚动条的宽度 */ @@ -89,47 +186,234 @@ background-size: 100% 100%; } } - .traffic-map { position: relative; z-index: 9; - width: vw(1290); + width: vw(1300); height: vh(955); - margin: 0 vw(8); - padding: vw(20); + margin-left: vw(8); box-sizing: border-box; background-image: url('/src/assets/images/map-bg-2.png'); background-size: 100% 100%; - .video-list { - width: vw(320); - height: vh(120); - background: #0a254b; - border-radius: 0px 0px 0px 0px; - position: absolute; - bottom: vw(40); - right: vw(40); - z-index: 99; + } + .traffic-map-big { + position: relative; + z-index: 9; + width: vw(2116); + height: vh(955); + margin-left: vw(8); + box-sizing: border-box; + background-image: url('/src/assets/images/map-bg-2.png'); + background-size: 100% 100%; + } + .video-list { + width: vw(320); + height: vh(120); + background: #0a254b; + border-radius: 0px 0px 0px 0px; + position: absolute; + bottom: vw(40); + right: vw(40); + z-index: 99; + display: flex; + justify-content: center; + align-items: center; + .li { + width: vw(140); + height: vh(105); + background-image: url('/src/assets/images/small-v-bg.png'); + background-size: 100% 100%; + margin-right: vw(6); + } + .menu { + width: vw(12); + height: vh(60); + font-family: Inter, Inter; + font-weight: 400; + font-size: vw(12); + color: #ffffff; + line-height: vh(14); + text-align: left; + font-style: normal; + text-transform: none; + } + } + .list { + width: vw(806); + height: vh(952); + margin-left: vw(8); + overflow: auto; + &::-webkit-scrollbar { + width: vw(0); /* 滚动条的宽度 */ + } + } + .item { + margin-bottom: vh(10); + background-image: url('@/assets/images/bg-2.png'); + background-size: 100% 100%; + .header { + height: vh(72); display: flex; - justify-content: center; align-items: center; - .li { - width: vw(140); - height: vh(105); - background-image: url('/src/assets/images/small-v-bg.png'); - background-size: 100% 100%; - margin-right: vw(6); + &-left { + flex: 1; + display: flex; + align-items: center; + > img { + width: vw(30); + height: auto; + margin-right: vw(15); + } } - .menu { - width: vw(12); - height: vh(60); - font-family: Inter, Inter; - font-weight: 400; - font-size: vw(12); + &-left__title { + margin-right: vw(20); + font-size: vw(28); + font-weight: bold; + color: transparent; + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%); + } + &-left__camera { + cursor: pointer; + width: vw(120); + height: vw(72); + font-weight: 600; + font-size: vw(15); color: #ffffff; - line-height: vh(14); - text-align: left; - font-style: normal; - text-transform: none; + padding-left: vw(42); + display: flex; + align-items: center; + margin: 0 vw(20); + background-image: url('/src/assets/images/t-a-1.png'); + background-size: 100% 100%; + } + &-left__point { + cursor: pointer; + margin: 0 vw(20); + width: vw(120); + height: vw(72); + font-weight: 600; + font-size: vw(15); + color: #ffffff; + padding-left: vw(42); + display: flex; + align-items: center; + background-image: url('/src/assets/images/t-a-2.png'); + background-size: 100% 100%; + } + &-status { + min-width: vw(150); + height: vw(54); + font-weight: 600; + font-size: vw(14); + color: #fff; + display: flex; + align-items: center; + padding-left: vw(50); + padding-right: vw(20); + background-image: url('/src/assets/images/t-b-1.png'); + background-size: 100% 100%; + } + } + + .chart-item { + padding: vw(1); + margin-top: vh(10); + height: vh(293); + background-image: url('@/assets/images/bg-3.png'); + background-size: 100% 100%; + + .chart-box { + width: 100%; + height: vh(250); + } + + .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; + /* 兼容其他浏览器 */ + } + } + } + + .statistics { + height: vh(90); + display: flex; + align-items: center; + justify-content: space-evenly; + background-image: url('@/assets/images/bg-3.png'); + background-size: 100% 100%; + + &-item__label { + font-weight: 400; + font-size: vw(14); + color: #fff; + margin-bottom: vh(10); + } + &-item__value { + padding-left: vw(15); + height: vh(30); + font-weight: bold; + font-size: vw(24); + color: #02f9fa; + background-image: url('@/assets/images/t-box-title-bg-1.png'); + background-size: 100% 100%; + } + .item-box { + .item-t { + display: flex; + font-weight: 400; + font-size: vw(14); + color: rgba(255, 255, 255, 0.8); + 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: absolute; + top: 50%; + transform: translateY(-50%); + } + } } } } diff --git a/src/views/traffic/components/box-3.vue b/src/views/traffic/components/box-3.vue deleted file mode 100644 index 43a6494..0000000 --- a/src/views/traffic/components/box-3.vue +++ /dev/null @@ -1,414 +0,0 @@ - - - - - diff --git a/src/views/traffic/components/spotRate.vue b/src/views/traffic/components/spotRate.vue index 27c62ea..c986fe5 100644 --- a/src/views/traffic/components/spotRate.vue +++ b/src/views/traffic/components/spotRate.vue @@ -18,9 +18,13 @@ default: () => [] }, total: { - type: Number, + type: [Number, String], default: () => 0 }, + label: { + type: String, + default: () => '' + }, colors: { type: Array, default: () => ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA'] @@ -29,6 +33,8 @@ const { id, setOption } = useEchart() + let params = null + var defaultCofig = { color: [], series: [ @@ -47,12 +53,12 @@ rich: { value: { color: '#fff', - fontSize: fitChartSize(24), + fontSize: fitChartSize(20), fontWeight: 'bold', padding: [0, 0, 5, 0] }, name: { - color: '#7894A8', + color: '#fff', fontSize: fitChartSize(12) } } @@ -70,20 +76,26 @@ (newVal) => { if (newVal.length > 0) { nextTick(() => { - defaultCofig.color = props.colors - defaultCofig.series[0].data = props.dataList - defaultCofig.series[0].label.formatter = () => { - return `{value|${props.total}}` + '\n' + `{name|工单总数}` + if (!params) { + defaultCofig.color = props.colors + defaultCofig.series[0].data = props.dataList + defaultCofig.series[0].label.formatter = () => { + return `{value|${props.total}}` + '\n' + `{name|${props.label}}` + } + params = { + ...defaultCofig, + ...props.config + } + } else { } - setOption({ - ...defaultCofig, - ...props.config - }) + setOption(params) }) } }, { immediate: true } ) + + const init = () => {} diff --git a/src/views/traffic/index.vue b/src/views/traffic/index.vue index 9e209a8..cab4b58 100644 --- a/src/views/traffic/index.vue +++ b/src/views/traffic/index.vue @@ -1,11 +1,9 @@ diff --git a/src/views/workOrder/components/box-2.vue b/src/views/workOrder/components/box-2.vue index 09a73bb..e83094a 100644 --- a/src/views/workOrder/components/box-2.vue +++ b/src/views/workOrder/components/box-2.vue @@ -25,10 +25,6 @@
-
@@ -77,7 +73,7 @@
- +

  • @@ -90,7 +86,7 @@

    - +

    • @@ -373,8 +369,8 @@ } .dot { - width: vw(4); - height: vw(4); + width: vw(10); + height: vw(10); margin: 0 vw(16); } diff --git a/src/views/workOrder/components/spotRate.vue b/src/views/workOrder/components/spotRate.vue index 0a47b04..67ea07b 100644 --- a/src/views/workOrder/components/spotRate.vue +++ b/src/views/workOrder/components/spotRate.vue @@ -21,6 +21,10 @@ type: Number, default: () => 0 }, + label: { + type: String, + default: () => '' + }, colors: { type: Array, default: () => ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA'] @@ -52,7 +56,7 @@ padding: [0, 0, 5, 0] }, name: { - color: '#7894A8', + color: '#fff', fontSize: fitChartSize(12) } } @@ -73,7 +77,7 @@ defaultCofig.color = props.colors defaultCofig.series[0].data = props.dataList defaultCofig.series[0].label.formatter = () => { - return `{value|${props.total}}` + '\n' + `{name|工单总数}` + return `{value|${props.total}}` + '\n' + `{name|${props.label}}` } setOption({ ...defaultCofig,