|
|
@@ -11,9 +11,6 @@
|
|
|
:hasEventDetail="hasEventDetail"
|
|
|
:deviceIndex="deviceIndex"
|
|
|
/>
|
|
|
- <!-- <div v-if="showVideo">
|
|
|
- <flvVideoPlay :src="videoSrc" />
|
|
|
- </div> -->
|
|
|
</div>
|
|
|
|
|
|
<Header button-name="返回导航" />
|
|
|
@@ -31,7 +28,7 @@
|
|
|
import DeviceBaseInfo from '/@/views/lifeline/bigscreen/components/layout/DeviceBaseInfo.vue';
|
|
|
|
|
|
import Flexible from '/@/views/lifeline/bigscreen/common/flexible';
|
|
|
- import { ref, onMounted, onUnmounted, watch, unref } from 'vue';
|
|
|
+ import { ref, onMounted, onUnmounted, watch, unref, reactive } from 'vue';
|
|
|
import { addModuleData } from '/@/views/lifeline/bigscreen/Map/utils/mapUtils';
|
|
|
import { useMapStore } from '/@/store/modules/map';
|
|
|
|
|
|
@@ -60,6 +57,29 @@
|
|
|
import { rescueCarPage as getHosptial } from '/@/views/lifeline/api/riskLinkageSystemApi/emergencyLinkage/medicalTeam/index';
|
|
|
// 查询应急救援队
|
|
|
import { getTableList as getRescueTeam } from '/@/views/lifeline//api/riskLinkageSystemApi/emergencyLinkage/rescueTeamApi';
|
|
|
+ // 获取事件等级码表
|
|
|
+ import { findDictItemByCode } from '/@/api/system/dict';
|
|
|
+
|
|
|
+ // 获取区域
|
|
|
+ import { getAreaList } from '/@/api/oem/index';
|
|
|
+ // 获取事件类型
|
|
|
+ import { getTableList as getEventTable } from '/@/views/lifeline/api/riskLinkageSystemApi/configManage/eventTypeApi/index';
|
|
|
+ // 获取知识库列表
|
|
|
+ import { rescueCarPage as getKnowledge } from '/@/views/lifeline/api/riskLinkageSystemApi/baseManage/nxKnowledgeDatabase/index';
|
|
|
+ //获取专家库
|
|
|
+ import { rescueCarPage as getExperts } from '/@/views/lifeline/api/riskLinkageSystemApi/baseManage/nxExpertDatabase/index';
|
|
|
+ import { reservePlanPage } from '/@/api/emergencyLinkage/reservePlanManage';
|
|
|
+ import { rescueCarPage as warningType } from '/@/views/lifeline/api/riskLinkageSystemApi/configManage/warningTypeManage/index';
|
|
|
+ // 查询预警详情
|
|
|
+ // import { getWarningInfoById } from '/@/views/lifeline/api/riskLinkageSystemApi/warningManage/index';
|
|
|
+ //查询报警详情
|
|
|
+ // import { getWarningInfoById as getReportInfoById } from '/@/views/lifeline/api/riskMonitorSystemApi/monitorReportApi/reportHandle/index';
|
|
|
+ // 获取单位
|
|
|
+ import { screenLinkOrganizationGetApi } from '/@/api/ruleengine/ruleengineApi';
|
|
|
+
|
|
|
+ // 获取用户树形结构
|
|
|
+ import { getUserTree } from '/@/views/lifeline/api/common/userInfosTree';
|
|
|
+
|
|
|
import bus from '/@/views/lifeline/bigscreen/common/bus';
|
|
|
import Overlay from 'ol/Overlay';
|
|
|
import eventBus from '/@/utils/eventBus';
|
|
|
@@ -71,9 +91,8 @@
|
|
|
import { Vector as VectorSource } from 'ol/source';
|
|
|
import { Vector as VectorLayer } from 'ol/Layer';
|
|
|
import { debounce } from 'lodash';
|
|
|
+ import { nextTick } from 'process';
|
|
|
|
|
|
- // import flvVideoPlay from '/@/components/FlvVideo/flvVideoPlay.vue';
|
|
|
- // import { clearVectorLayerById } from '/@/views/lifeline/bigscreen/Map/utils/mapUtils';
|
|
|
//设备概览：在线、离线、总数
|
|
|
const deviceStatusStr = ref<string>('');
|
|
|
eventBus.on('deviceStatusStr', (data) => {
|
|
|
@@ -96,22 +115,170 @@
|
|
|
const focusListConfig = ['dangerSourceList', 'targetList', 'hosptialList', 'rescueTeamList'];
|
|
|
let showText = false;
|
|
|
let initPage = true;
|
|
|
+ const dictData = reactive({
|
|
|
+ domainId: [] as any,
|
|
|
+ industryId: [] as any,
|
|
|
+ areaCode: [] as any,
|
|
|
+ eventType: [] as any,
|
|
|
+ eventLevelCode: [] as any,
|
|
|
+ // 知识库列表
|
|
|
+ knowledgeList: [] as any,
|
|
|
+ expertsList: [] as any,
|
|
|
+ //
|
|
|
+ personList: [] as any,
|
|
|
+ companyId: [] as any,
|
|
|
+ userTree: [] as any,
|
|
|
|
|
|
- // const showVideo = ref<boolean>(false);
|
|
|
- // const videoSrc = ref<string>('');
|
|
|
- bus.on('bigscreenDictData', (val: any) => {
|
|
|
- industryId.value = val.industryId;
|
|
|
- getDevice();
|
|
|
- getFocusData();
|
|
|
+ recommend: [] as any,
|
|
|
+ plan: [] as any,
|
|
|
+ planRes: [] as any,
|
|
|
+ warningType: [] as any,
|
|
|
+ warningLevelCode: [] as any,
|
|
|
});
|
|
|
onMounted(() => {
|
|
|
- // 行业
|
|
|
- // findDictItemByCode({ dictCode: 'industryId' }).then((res) => {
|
|
|
- // industryId.value = res;
|
|
|
- // getDevice();
|
|
|
- // getFocusData();
|
|
|
- // });
|
|
|
+ nextTick(async () => {
|
|
|
+ await getdictData();
|
|
|
+ industryId.value = dictData.industryId;
|
|
|
+ getDevice();
|
|
|
+ getFocusData();
|
|
|
+ });
|
|
|
});
|
|
|
+ const getdictData = async () => {
|
|
|
+ function recursion(data, current, level) {
|
|
|
+ let result = [] as any;
|
|
|
+ if (!data) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ level += 1;
|
|
|
+ for (const i in data) {
|
|
|
+ const item = data[i];
|
|
|
+ let dataNew2 = [] as any;
|
|
|
+ if ((item.parentId || '') == current) {
|
|
|
+ if (item.children && item.children.length > 0) {
|
|
|
+ current = item.id;
|
|
|
+ dataNew2 = recursion(item.children, current, level);
|
|
|
+ }
|
|
|
+ item.users?.map((item2) => {
|
|
|
+ let obj3 = item2;
|
|
|
+ obj3.companyId = item.companyId;
|
|
|
+ obj3.companyName = item.companyName;
|
|
|
+ obj3.deptId = item.companyId;
|
|
|
+ obj3.deptName = item.companyName;
|
|
|
+ obj3.personId = item2.userId;
|
|
|
+
|
|
|
+ dataNew2.push({
|
|
|
+ userId: item2.userId,
|
|
|
+ userName: item2.userName,
|
|
|
+ children: [],
|
|
|
+ disabled: false,
|
|
|
+ level: level,
|
|
|
+ });
|
|
|
+
|
|
|
+ dictData.personList.push(obj3);
|
|
|
+ });
|
|
|
+
|
|
|
+ result.push({
|
|
|
+ userId: item.companyId,
|
|
|
+ userName: item.companyName,
|
|
|
+ children: dataNew2,
|
|
|
+ disabled: true,
|
|
|
+ level: level,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+ // 用户树
|
|
|
+ await getUserTree({ showAll: 1 }).then((res) => {
|
|
|
+ if (res.code == '200') {
|
|
|
+ let arr = res.data;
|
|
|
+ let dataNew = recursion(arr, '', 0);
|
|
|
+ dictData.userTree = dataNew;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 组织
|
|
|
+ await screenLinkOrganizationGetApi({ showAll: 1 }).then((res) => {
|
|
|
+ if (res.length > 0) {
|
|
|
+ let arr = res;
|
|
|
+ arr.forEach((i) => {
|
|
|
+ i.disabled = true;
|
|
|
+ });
|
|
|
+ dictData.companyId = arr;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ await getKnowledge({ pageSize: 10000, showAll: 1 }).then((res) => {
|
|
|
+ dictData.knowledgeList = res.items;
|
|
|
+ });
|
|
|
+ await getExperts({ pageSize: 10000, showAll: 1 }).then((res) => {
|
|
|
+ dictData.expertsList = res.items;
|
|
|
+ });
|
|
|
+ // 获取事件类型
|
|
|
+ await getEventTable({ pageSize: 10000, showAll: 1 }).then((res) => {
|
|
|
+ dictData.eventType = res.items;
|
|
|
+ });
|
|
|
+ // 区域
|
|
|
+ await getAreaList({ parentId: '511503', showAll: 1 }).then((res) => {
|
|
|
+ dictData.areaCode = res;
|
|
|
+ });
|
|
|
+ // 事件级别
|
|
|
+ await findDictItemByCode({ dictCode: 'eventLevelCode' }).then((res) => {
|
|
|
+ dictData.eventLevelCode = res;
|
|
|
+ });
|
|
|
+ // 领域
|
|
|
+ await findDictItemByCode({ dictCode: 'domainId' }).then((res) => {
|
|
|
+ dictData.domainId = res;
|
|
|
+ });
|
|
|
+ // 行业
|
|
|
+ await findDictItemByCode({ dictCode: 'industryId' }).then((res) => {
|
|
|
+ dictData.industryId = res;
|
|
|
+ });
|
|
|
+
|
|
|
+ await reservePlanPage({ pageSize: 10000, showAll: 1 }).then((res) => {
|
|
|
+ let arr = res.items;
|
|
|
+ let obj = {};
|
|
|
+ arr.forEach((i) => {
|
|
|
+ if (obj.hasOwnProperty(i.domainId + ',' + i.domainName)) {
|
|
|
+ obj[i.domainId + ',' + i.domainName].push(i);
|
|
|
+ } else {
|
|
|
+ obj[i.domainId + ',' + i.domainName] = [];
|
|
|
+ obj[i.domainId + ',' + i.domainName].push(i);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let arr2 = [] as any;
|
|
|
+ let planRes = [] as any;
|
|
|
+ for (let key in obj) {
|
|
|
+ const it = key.split(',');
|
|
|
+ arr2.push({
|
|
|
+ id: it[0],
|
|
|
+ name: it[1],
|
|
|
+ disabled: true,
|
|
|
+ children: obj[key].map((i) => {
|
|
|
+ i.children = i.responses.map((m) => {
|
|
|
+ m.name = i.name + m.responseLevelName + '响应';
|
|
|
+ m.planName = i.name;
|
|
|
+ planRes.push(m);
|
|
|
+ m.annexList = i.annexList;
|
|
|
+ return m;
|
|
|
+ });
|
|
|
+ i.disabled = true;
|
|
|
+ return i;
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ }
|
|
|
+ dictData.plan = arr2;
|
|
|
+ dictData.planRes = planRes;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 获取预警类型
|
|
|
+ await warningType({ pageSize: 10000, showAll: 1 }).then((res) => {
|
|
|
+ dictData.warningType = res.items;
|
|
|
+ });
|
|
|
+ // 预警级别
|
|
|
+ await findDictItemByCode({ dictCode: 'warningLevelCode' }).then((res) => {
|
|
|
+ dictData.warningLevelCode = res;
|
|
|
+ });
|
|
|
+ bus.emit('bigscreenDictData', dictData);
|
|
|
+ };
|
|
|
// 事件来源
|
|
|
bus.on('focus', (val: any) => {
|
|
|
focusListConfig.forEach((item: string) => {
|
|
|
@@ -136,25 +303,14 @@
|
|
|
bus.on('monitorInfoItm', (feature) => {
|
|
|
removeLocateIcon();
|
|
|
showFeatureDeviceInfo(feature);
|
|
|
- // let data = receive.data.monitorWarnData;
|
|
|
- // item['warnTime'] = data.warnTime;
|
|
|
- // deviceEvents.value = arr;
|
|
|
- // });
|
|
|
});
|
|
|
let num1 = ref(1);
|
|
|
function showTypeCheckIcon(val) {
|
|
|
num1.value++;
|
|
|
if (val == 'device') {
|
|
|
addOrVisibleLayer('device' + searchIndustry.value, deviceList.value, 'id');
|
|
|
- // industryId.value.forEach((item) => {
|
|
|
- // addOrVisibleLayer('device' + item.id, deviceList.value, 'id');
|
|
|
- // });
|
|
|
- // addOrVisibleLayer('device', deviceList.value, 'id');
|
|
|
} else if (val == 'vedio') {
|
|
|
addOrVisibleLayer('vedio' + searchIndustry.value, videoList.value, 'id');
|
|
|
- // industryId.value.forEach((item) => {
|
|
|
- // addOrVisibleLayer('vedio' + item.id, videoList.value, 'id');
|
|
|
- // });
|
|
|
}
|
|
|
}
|
|
|
function getDevice() {
|
|
|
@@ -205,10 +361,6 @@
|
|
|
}
|
|
|
}),
|
|
|
]).then(() => {
|
|
|
- // debugger;
|
|
|
- //添加和删除前，先判断是否有这个图层。有的删除后再添加
|
|
|
- // addLayerData('device', deviceList.value, 'id');
|
|
|
- // addLayerData('vedio', videoList.value, 'id');
|
|
|
let time = 0;
|
|
|
if (initPage) {
|
|
|
initPage = false;
|
|
|
@@ -225,8 +377,6 @@
|
|
|
addOrVisibleLayer('device' + searchIndustry.value, deviceList.value, 'id');
|
|
|
addOrVisibleLayer('vedio' + searchIndustry.value, videoList.value, 'id');
|
|
|
}, time);
|
|
|
-
|
|
|
- // addLayerData('vedio', videoList.value, 'id');
|
|
|
});
|
|
|
}
|
|
|
function getFocusData() {
|
|
|
@@ -280,31 +430,29 @@
|
|
|
const deviceEvents = ref([] as any);
|
|
|
const hasEventDetail = ref(true);
|
|
|
const locateLayer = new VectorLayer({});
|
|
|
- const overlay = ref();
|
|
|
+ let overlay;
|
|
|
let map;
|
|
|
// 地图加载回调
|
|
|
const mapReady = () => {
|
|
|
// 加载设备点位
|
|
|
addOrVisibleLayer('device', deviceList.value, 'id');
|
|
|
map = mapStore.getMap;
|
|
|
- // const source = mapStore.getSource;
|
|
|
//地图点击事件
|
|
|
// 信息图层
|
|
|
map.getOverlays().clear();
|
|
|
- overlay.value = new Overlay({
|
|
|
+ overlay = new Overlay({
|
|
|
id: 'deviceInfo',
|
|
|
offset: [0, -195],
|
|
|
element: deviceBaseInfo.value,
|
|
|
autoPan: true,
|
|
|
- positioning: 'center-center', // bottom-center ...
|
|
|
+ positioning: 'top-left', // bottom-center ...
|
|
|
stopEvent: true,
|
|
|
});
|
|
|
|
|
|
- map.addOverlay(overlay.value);
|
|
|
+ map.addOverlay(overlay);
|
|
|
map.on('singleclick', (evt: any) => {
|
|
|
removeLocateIcon();
|
|
|
var pixel = map.getEventPixel(evt.originalEvent);
|
|
|
- // showVideo.value = false;
|
|
|
map.forEachFeatureAtPixel(pixel, async function (feature) {
|
|
|
if (feature != undefined) {
|
|
|
if (
|
|
|
@@ -336,7 +484,7 @@
|
|
|
dragable: true,
|
|
|
};
|
|
|
showDeviceInfo.value = true;
|
|
|
- overlay.value.setPosition(feature.getGeometry().getCoordinates());
|
|
|
+ overlay.setPosition(feature.getGeometry().getCoordinates());
|
|
|
});
|
|
|
}
|
|
|
} else {
|
|
|
@@ -352,32 +500,18 @@
|
|
|
|
|
|
if (mapZoom >= showTextLevel && !showText) {
|
|
|
// 展示图标点的名称
|
|
|
- // setIconDebounce(true);
|
|
|
showTextLayerDebounce();
|
|
|
showText = true;
|
|
|
+ map.render();
|
|
|
} else if (mapZoom < showTextLevel && showText) {
|
|
|
// 隐藏图标点的名称
|
|
|
- // setIconDebounce(false);
|
|
|
- showText = false;
|
|
|
showTextLayerDebounce();
|
|
|
+ showText = false;
|
|
|
+ map.render();
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
- // const setIconDebounce = debounce(setIconName, 500); //防抖
|
|
|
- /**
|
|
|
- * 通过设置text的方法来控制图标名的显示，似乎性能不是很好。会造成卡顿
|
|
|
- */
|
|
|
- // function setIconName(show: boolean) {
|
|
|
- // layerList.value.forEach((item) => {
|
|
|
- // const featureList = item.getSource().getFeatures();
|
|
|
- // featureList.forEach((feature) => {
|
|
|
- // feature
|
|
|
- // .getStyle()
|
|
|
- // .getText()
|
|
|
- // .setText(show ? feature.get('name') : '');
|
|
|
- // });
|
|
|
- // });
|
|
|
- // }
|
|
|
+
|
|
|
/**
|
|
|
* 图标点名称图层显隐控制，根据当前显示的图层和当前层级判断是否显示或者隐藏
|
|
|
*/
|
|
|
@@ -394,7 +528,7 @@
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
- const showTextLayerDebounce = debounce(showTextLayer, 500);
|
|
|
+ const showTextLayerDebounce = debounce(showTextLayer, 1000);
|
|
|
//展示设备信息
|
|
|
function showFeatureDeviceInfo(feature: any) {
|
|
|
addLocateIcon(feature);
|
|
|
@@ -402,14 +536,13 @@
|
|
|
deviceInfo.value = {};
|
|
|
// 根据设备id查询事件详情
|
|
|
deviceEvents.value = [];
|
|
|
- // console.log(feature);
|
|
|
getEventInfo(feature);
|
|
|
// 获取设备指标
|
|
|
getDeviceIndex({ deviceId: feature.values_.id, page: 1, size: 999999 }).then((res) => {
|
|
|
deviceIndex.value = res?.data?.records;
|
|
|
deviceInfo.value = feature.values_;
|
|
|
showDeviceInfo.value = true;
|
|
|
- overlay.value.setPosition(feature.getGeometry().getCoordinates()); // getWarningInfoById(item.warningId).then((receive) => {
|
|
|
+ overlay.setPosition(feature.getGeometry().getCoordinates()); // getWarningInfoById(item.warningId).then((receive) => {
|
|
|
});
|
|
|
}
|
|
|
function getEventInfo(feature) {
|
|
|
@@ -466,10 +599,7 @@
|
|
|
const iconstyle = new Style({
|
|
|
image: new Icon({
|
|
|
src: locatepng,
|
|
|
- // 对图标进行偏移
|
|
|
scale: 1,
|
|
|
- // anchorYUnits: 'pixels',
|
|
|
- // anchor: [0.5, -20],
|
|
|
}),
|
|
|
});
|
|
|
billoard.setStyle(iconstyle);
|
|
|
@@ -491,19 +621,8 @@
|
|
|
textLayerList.value[index].setVisible(showText && !visible);
|
|
|
} else {
|
|
|
if (data && data.length > 0) {
|
|
|
- // const currentResolution = map.getView().getResolution();
|
|
|
- const layer = addModuleData(
|
|
|
- data,
|
|
|
- 0.7,
|
|
|
- layerId,
|
|
|
- featureIdField
|
|
|
- // true,
|
|
|
- // 'deviceName',
|
|
|
- // currentResolution
|
|
|
- );
|
|
|
+ const layer = addModuleData(data, 0.7, layerId, featureIdField);
|
|
|
const textLayer = addModuleData(data, 0.7, layerId, featureIdField, true);
|
|
|
-
|
|
|
- // const layer = addModuleData(data, 0.7, layerId, featureIdField);
|
|
|
layerList.value.push(layer);
|
|
|
textLayer.setVisible(showText);
|
|
|
textLayerList.value.push(textLayer);
|
|
|
@@ -511,35 +630,6 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- // 数据发生改变，重新绘制
|
|
|
- // function addLayerData(layerId: string, data: Array<any>, featureIdField?: string) {
|
|
|
- // const index = layerNameList.value.indexOf(layerId);
|
|
|
- // if (index > -1) {
|
|
|
- // layerList.value[index].getSource().clear();
|
|
|
- // map.removeLayer(layerList.value[index]);
|
|
|
- // textLayerList.value[index].getSource().clear();
|
|
|
- // map.removeLayer(textLayerList.value[index]);
|
|
|
- // layerList.value.splice(index, 1);
|
|
|
- // textLayerList.value.splice(index, 1);
|
|
|
- // layerNameList.value.splice(index, 1);
|
|
|
- // }
|
|
|
- // // const currentResolution = map.getView().getResolution();
|
|
|
- // const layer = addModuleData(
|
|
|
- // data,
|
|
|
- // 0.7,
|
|
|
- // layerId,
|
|
|
- // featureIdField
|
|
|
- // // true,
|
|
|
- // // 'deviceName',
|
|
|
- // // currentResolution
|
|
|
- // );
|
|
|
- // const textLayer = addModuleData(data, 0.7, layerId, featureIdField, true);
|
|
|
- // // const layer = addModuleData(data, 0.7, layerId, featureIdField);
|
|
|
- // layerList.value.push(layer);
|
|
|
- // textLayer.setVisible(showText);
|
|
|
- // textLayerList.value.push(textLayer);
|
|
|
- // layerNameList.value.push(layerId);
|
|
|
- // }
|
|
|
|
|
|
// 监听业务类型是否更改;监听设备概览点击情况是否改变
|
|
|
watch(
|
luoyujia