diff --git a/packages/screen/src/views/cockpit/api/commonHttp.js b/packages/screen/src/views/cockpit/api/commonHttp.js index a31e253..a436756 100644 --- a/packages/screen/src/views/cockpit/api/commonHttp.js +++ b/packages/screen/src/views/cockpit/api/commonHttp.js @@ -2,7 +2,6 @@ import { request } from '@shared/utils/request' // 获取业务底图 export function getBaseMap() { - // return [...ddt] return request({ url: '/snow-ops-platform/dataDirectory/queryCatalog', method: 'GET', @@ -14,7 +13,6 @@ export function getBaseMap() { // 获取业务图 export function getBusinessMap() { - // return [...si] return request({ url: '/snow-ops-platform/dataDirectory/queryCatalog', method: 'GET', @@ -24,6 +22,48 @@ export function getBusinessMap() { }) } +// 获取所有的养护站 +export function getAllYHZList() { + return request({ + url: '/snow-ops-platform/yhz/listByDistrict', + method: 'get', + params: { + qxmc: '' + } + }) +} + + +export function getYHZDetail(params) { + return request({ + url: '/snow-ops-platform/yhz/getById', + method: 'get', + params + }) +} + +// 获得高海拔路段图 high-altitude road +export function getHighAltitudeRoadMap () { + return request({ + url: '/snow-ops-platform/dataDirectory/queryCatalog', + method: 'GET', + params: { + pcatalog: 'GHBMAP' + } + }) +} + +// 获取天气预警统计 +export function getWeatherWarningStatistics (params) { + return request({ + url: '/snow-ops-platform/weatherWarning/statistics', + method: 'GET', + params + }) +} + + + diff --git a/packages/screen/src/views/cockpit/components/CockpitLayout.vue b/packages/screen/src/views/cockpit/components/CockpitLayout.vue index 36beaf8..6b43946 100644 --- a/packages/screen/src/views/cockpit/components/CockpitLayout.vue +++ b/packages/screen/src/views/cockpit/components/CockpitLayout.vue @@ -13,8 +13,8 @@
- - + +
@@ -26,7 +26,7 @@
- + { // 加载地图业务底图 并 聚焦中心点 mapBase.loadBaseData() + + weatherWarningRef.value.loadData() }) // ==================== 常量定义 ==================== @@ -79,6 +81,9 @@ const EMERGENCY_FORCE_LAYER_ID = 'legend:emergencyForce' */ const EMERGENCY_FORCE_CACHE_TTL = 60 * 1000 +// ==================== 组件实例 ==================== +const weatherWarningRef = ref(null) + // ==================== 状态管理 ==================== const mapStore = useMapStore() @@ -101,7 +106,7 @@ const mapBase = useMapBase(mapStore) /** * 标记图hook，搭配lengendToolbar使用, 作用是点击某个图例项时，在地图上显示所有该图例的图 */ -const mapImageMark = useMapImageMark(mapStore) +const mapImageMarkHook = useMapImageMark(mapStore) /** * 应急力量数据加载状态 @@ -131,9 +136,22 @@ const emergencyForceAbortController = ref(null) /** * 工具图标列表通过key关联 * key具体有哪些，请根据LegendToolbar.vue中定义的defaultLegendItems + * 后续的ImageMarkData中也需要与这里的key值对应 */ const legendKeys = ref(['serviceFacility','riskRoad','blockEvent','weatherAlert','emergencyForce']) +/** + * 过滤标记对象，存放当前需要过滤的关键字 + */ +const filterMark = ref({ + serviceFacility: [] +}) + +/** + * 图例项 + */ +const legendToolActiveItem = ref([]) + // ==================== 工具函数 ==================== /** @@ -413,6 +431,34 @@ const renderEmergencyForcePoints = async (entityService, points, markerIcon) => // ==================== 事件处理 ==================== +/** + * 应急资源表格行被点击时触发 + */ +const handleEmergencyResourceClick = (resource) => { + // 根据区县名称，过滤养护站 + const filterList = filterMark.value.serviceFacility + const index = filterList.findIndex((item) => item == resource.qxmc) + // 实现第一次点击表示选中，第二次点击表示取消选中 + if(index > -1) filterList.splice(index, 1) + else filterList.push(resource.qxmc) + + // 当点击了某个区县，需要将养护站的legend也点亮 + const legendIndex = legendToolActiveItem.value.indexOf('serviceFacility') + // 如果过滤列表存在数据，则需要点亮legend + if(filterList.length && legendIndex == -1) { + legendToolActiveItem.value.push('serviceFacility') + } + // 如果过滤列表不存在，则需要关闭legend + if(!filterList.length && legendIndex > -1) { + legendToolActiveItem.value.splice(legendIndex, 1) + } + + mapImageMarkHook.filterYHZMark("serviceFacility", (item)=>{ + return filterList.find((filterItem) => filterItem == item.qxmc) + }) + +} + /** * 处理图例工具栏的标记切换事件 * @@ -422,10 +468,19 @@ const renderEmergencyForcePoints = async (entityService, points, markerIcon) => * @param {string} [payload.markerIcon] - 标记图标 */ const handleLegendMarkerToggle = async ({ key, active, markerIcon }) => { + if(key === 'riskRoad') { + mapBase.toggleHighAltitudeRoadMap(active) + return + } + + // 只处理应急力量图例项 if (key !== 'emergencyForce') { + if(active == false) { + filterMark.value[key] = [] + } - mapImageMark.toggleMark({ key, active, markerIcon }) + mapImageMarkHook.toggleMark({ key, active, markerIcon }) return } diff --git a/packages/screen/src/views/cockpit/components/EmergencyResources.vue b/packages/screen/src/views/cockpit/components/EmergencyResources.vue index f94967f..5a44a18 100644 --- a/packages/screen/src/views/cockpit/components/EmergencyResources.vue +++ b/packages/screen/src/views/cockpit/components/EmergencyResources.vue @@ -21,7 +21,7 @@ :class="{ 'row-alt': index % 2 === 0 }" >
{{ index + 1 }}
- {{ resource.qxmc }} + {{ resource.qxmc }} {{ resource.yhzCount }} {{ resource.wzCount }}
@@ -43,7 +43,9 @@ import { ref, onMounted } from 'vue' import { request } from '@shared/utils/request' -const resources = ref([ +const emit = defineEmits(['clickEmergencyResource']) + +const testData = [ { id: 1, name: '万州区', @@ -98,7 +100,9 @@ const resources = ref([ equipmentClass: 'red', hasAlert: false } -]) +] + +const resources = ref([]) // 请求后端接口 /district/statistics const getDistrictStatistics = async () => { @@ -106,7 +110,6 @@ const getDistrictStatistics = async () => { url: '/snow-ops-platform/district/statistics', method: 'GET' }) - console.log(res) if(res.code === '00000') { resources.value = res.data } else { @@ -240,6 +243,7 @@ onMounted(() => { .district-name { text-align: left; + cursor: pointer; } .count { diff --git a/packages/screen/src/views/cockpit/components/ImageMarkTooltip/index.js b/packages/screen/src/views/cockpit/components/ImageMarkTooltip/index.js index ab102aa..df70602 100644 --- a/packages/screen/src/views/cockpit/components/ImageMarkTooltip/index.js +++ b/packages/screen/src/views/cockpit/components/ImageMarkTooltip/index.js @@ -1,8 +1,13 @@ import { createVNode, render } from 'vue' -import ImageMarkTooltip from './ImageMarkTooltip.vue' +import serviceFacility from './serviceFacilityToolTip.vue' -class ImageMarkTooltipUI { - constructor() { +const UIMap = { + serviceFacility +} + +class ImageMarkTooltip { + constructor({ key }) { + this.key = key this.instance = null this.container = null this.entity = null @@ -22,8 +27,10 @@ class ImageMarkTooltipUI { this.entity = options.entity + const UIInstance = UIMap[this.key] + // 创建 VNode - const vnode = createVNode(ImageMarkTooltip, { + const vnode = createVNode(UIInstance, { visible: true, position: options.position || { x: 0, y: 0 }, data: options.data || {}, @@ -37,6 +44,9 @@ class ImageMarkTooltipUI { // 渲染到容器 render(vnode, this.container) this.instance = vnode.component + if(this.instance.exposed.init) { + this.instance.exposed.init() + } return this.instance } @@ -68,11 +78,7 @@ class ImageMarkTooltipUI { } } -// 创建单例实例 -const instance = new ImageMarkTooltipUI() -export const CommonTooltip = instance - -export const newImageMarkTooltip = () => { - return new ImageMarkTooltipUI() +export const newImageMarkTooltip = ({ key }) => { + return new ImageMarkTooltip({ key }) } \ No newline at end of file diff --git a/packages/screen/src/views/cockpit/components/ImageMarkTooltip/riskRoad.vue b/packages/screen/src/views/cockpit/components/ImageMarkTooltip/riskRoad.vue index 0dde344..45f33c8 100644 --- a/packages/screen/src/views/cockpit/components/ImageMarkTooltip/riskRoad.vue +++ b/packages/screen/src/views/cockpit/components/ImageMarkTooltip/riskRoad.vue @@ -1,5 +1,23 @@ - \ No newline at end of file diff --git a/packages/screen/src/views/cockpit/components/ImageMarkTooltip/ImageMarkTooltip.vue b/packages/screen/src/views/cockpit/components/ImageMarkTooltip/serviceFacilityTooltip.vue similarity index 78% rename from packages/screen/src/views/cockpit/components/ImageMarkTooltip/ImageMarkTooltip.vue rename to packages/screen/src/views/cockpit/components/ImageMarkTooltip/serviceFacilityTooltip.vue index 1b7dfd1..1626400 100644 --- a/packages/screen/src/views/cockpit/components/ImageMarkTooltip/ImageMarkTooltip.vue +++ b/packages/screen/src/views/cockpit/components/ImageMarkTooltip/serviceFacilityTooltip.vue @@ -11,8 +11,32 @@ -
- +
+ +
+ 名称: + {{ detail.mc }} +
+ +
+ 所属区县： + {{ detail.qxmc }} +
+ +
+ 应急设备： + {{ detail.sbsl }} +
+ +
+ 应急物资： + {{ detail.wzsl }} +
+ +
+ 应急人员： + {{ detail.rysl }} +
@@ -36,11 +60,7 @@