Browse Source

摄像机 行车诱导 更新

wangqin
Joe 10 months ago
parent
commit
0969079d47
  1. 33
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/Descriptions.vue
  2. 23
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/index.vue
  3. 66
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue
  4. 54
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
  5. 97
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
  6. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
  7. 28
      ruoyi-ui/src/views/JiHeExpressway/utils/enum.js

33
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/Descriptions.vue

@ -9,15 +9,15 @@
</p>
<p class="desc-item">
<span>道路名称</span>
<span>{{ data.road || '-' }}</span>
<span>{{ data.roadName || '-' }}</span>
</p>
<p class="desc-item">
<span>所属机构</span>
<span>{{ data.deptName || '-' }}</span>
<span>{{ organizationName || '-' }}</span>
</p>
<p class="desc-item">
<span>设备桩号</span>
<span>{{ data.pileNum || '-' }}</span>
<span>{{ data.stakeMarkId || '-' }}</span>
</p>
<p class="desc-item">
<span>上行相机</span>
@ -39,13 +39,14 @@
</p>
<p class="desc-item singleline">
<span>状态更新时间:</span>
<span>2023-11-06 17:09:55</span>
<span>{{ data.updateTime }}</span>
</p>
</div>
</template>
<script>
import { CameraStatusEnum, CameraControlTypeEnum } from "@screen/utils/enum.js"
import { getRoadInfoByStakeMark } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
export default {
name: 'Descriptions',
@ -58,9 +59,29 @@ export default {
data() {
return {
statusEnum: CameraStatusEnum[this.data.status] || {},
cameraType: CameraControlTypeEnum[this.data.ptzCtrl]?.text
cameraType: CameraControlTypeEnum[this.data.ptzCtrl]?.text,
organizationName: null
}
}
},
async created() {
request({
url: `/business/organization/${id}`,
method: "get",
})
.then(({ code, data }) => {
if (code != 200) return;
this.organizationName = data.organizationName;
})
.catch((err) => {
});
const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMarkId);
if (roadInfo) this.data.roadName = roadInfo.dc_road;
},
}
</script>

23
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/index.vue

@ -14,7 +14,7 @@
<div class="btn">全屏</div>
</div>
</div>
<Video class="videoStream" :camId="dialogData.camId" />
<Video class="videoStream" :camId="dialogData.iotDeviceId" />
</div>
<div class="content">
@ -30,24 +30,28 @@
<div>
<p class="desc-item">
<span>设备桩号: </span>
<span>{{ dialogData.pileNum || '-' }}</span>
<span>{{ dialogData.stakeMarkId || '-' }}</span>
</p>
<p class="desc-item">
<span>方向: </span>
<span class="color1">{{ cameraDirection || '-' }}</span>
<span class="color1">
{{ { 1: '上行(菏泽方向)', 2: '中', 3: '下行(济南方向)' }[dialogData.direction] }}
</span>
</p>
</div>
<p class="desc-item">
<span>/纬度: </span>
<span>{{ dialogData.camLong || '-' }} / {{ dialogData.camLat || '-' }}</span>
<span>{{ dialogData.longitude || '-' }} / {{ dialogData.latitude || '-' }}</span>
</p>
<p class="desc-item">
<span>道路名称: </span>
<span>{{ dialogData.road }}</span>
<span>{{ dialogData.roadName }}</span>
</p>
<p class="desc-item">
<span>设备状态: </span>
<span class="color1">{{ statusEnum.text || '-' }}</span>
<span class="color1">
{{ { 0: '异常', 1: '正常' }[dialogData.device_state] }}
</span>
</p>
</div>
@ -88,6 +92,8 @@ import { CameraStatusEnum, CameraDirectionEnum } from "@screen/utils/enum.js"
import { controlCamera } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
import { throttle } from "lodash"
import { getRoadInfoByStakeMark } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
export default {
name: 'ControlCamera',
mixins: [dialogDelayVisible],
@ -122,6 +128,11 @@ export default {
]
}
},
async created() {
const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMarkId);
if (roadInfo) this.dialogData.roadName = roadInfo.dc_road;
},
methods: {
controlClick: throttle(function (type) {
controlCamera(this.dialogData.camId, type)

66
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue

@ -33,6 +33,7 @@ import Descriptions from '@screen/components/Descriptions.vue';
import CustomControlVideo from '@screen/components/CustomControlVideo/index.vue';
import DeviceControlDialog from "./components/DeviceControlDialog.vue"
import request from "@/utils/request";
import { getRoadInfoByStakeMark } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
import { dialogDelayVisible } from "./../mixin"
@ -87,53 +88,24 @@ export default {
]
}
},
watch: {
dialogData: {
immediate: true,
handler() {
this.dialogData.roadName = "G35济泽高速";
request({
url: `/business/product/${this.dialogData.product_id}`,
method: "get",
})
.then(({ code, data }) => {
if (code != 200) return;
this.dialogData.brand = data.brand;
}).catch((err) => {
});
request({
url: `/business/stakeMark/${this.dialogData.stakeMarkId}`,
method: "get",
})
.then(({ code, data }) => {
if (code != 200) return;
request({
url: `/business/roadSection/${data.section_id}`,
method: "get",
})
.then(({ code, data }) => {
if (code != 200) return;
request({
url: `/business/road/${data.road_id}`,
method: "get",
})
.then(({ code, data }) => {
if (code != 200) return;
if (data.dc_road) this.dialogData.roadName = data.dc_road;
})
})
}).catch((err) => {
});
}
}
async created() {
this.dialogData.roadName = "G35济泽高速";
request({
url: `/business/product/${this.dialogData.product_id}`,
method: "get",
})
.then(({ code, data }) => {
if (code != 200) return;
this.dialogData.brand = data.brand;
}).catch((err) => {
});
const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMarkId);
if (roadInfo) this.dialogData.roadName = roadInfo.dc_road;
},
methods: {
handleClickTabs() { }

54
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js

@ -1,6 +1,6 @@
import { axiosIns } from "@screen/utils/axios/auth.js";
import { Message } from "element-ui";
import request from "@/utils/request";
import { getDeviceList } from "./httpList";
const PilePointJSON = require(`@screen/pages/Home/components/AMapContainer/data/lcz.json`);
@ -37,20 +37,9 @@ export const eventMap = {
// status: "0",
// };
const { code, data } = await axiosIns
.get("/system/camera/camList")
// .get("/system/dept/camTreeselect")
.catch(() => ({}));
// const { code, data } = {
// code: 200,
// data: [
// {
// pileNum: "K55+565",
// },
// ],
// };
const data = await getDeviceList(1);
if (code != 200) return Message.error("摄像机加载失败!");
if (!data) return;
cacheRemoveFunc.DriveTestEquipment_Camera_Remove?.();
@ -58,13 +47,6 @@ export const eventMap = {
this,
item,
data,
(item) => {
const { lng, lat } = PilePointJSON[item.pileNum] || {};
return {
lnglat: [lng, lat],
};
},
(extData) => {
this.dialogConfig = {
// 0 有(球机) 1 ⽆(枪机)
@ -81,23 +63,9 @@ export const eventMap = {
cacheRemoveFunc.Driving_Guidance_Remove?.();
},
async "路测设备/行车诱导"(item) {
const { code, data } = await request({
url: "/business/device/query",
method: "get",
params: {
deviceType: 12,
},
})
// .get("/system/dept/camTreeselect")
.catch(() => ({}));
// const { code, data } = {
// code: 200,
// data: [
// {
// stakeMarkId: "K176+167",
// },
// ],
// };
const data = await getDeviceList(12);
if (!data) return;
if (code != 200) return Message.error("行车诱导设备加载失败!");
@ -109,15 +77,6 @@ export const eventMap = {
this,
item,
data,
(item) => {
const { lng, lat } = PilePointJSON[item.stakeMarkId] || {};
if (lng && lat) noneLocation = false;
return {
lnglat: [lng, lat],
};
},
(extData) => {
this.dialogConfig = {
component: "DrivingGuidance",
@ -127,6 +86,5 @@ export const eventMap = {
);
if (noneLocation) Message.warning("未能匹配到诱导设备位置!");
// cacheRemoveFunc.DriveTestEquipment_Camera_Remove?.();
},
};

97
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js

@ -1,6 +1,8 @@
import { Message } from "element-ui";
import { axiosIns } from "@screen/utils/axios/auth.js";
import request from "@/utils/request";
/**
*
* @param {string} camId 相机 ID
@ -8,10 +10,12 @@ import { axiosIns } from "@screen/utils/axios/auth.js";
* @returns
*/
export function getCameraStream(camId, media = 1) {
return axiosIns.post("/videoInfo/api/externalVideoStreaming", {
type: 1,
camId,
media,
return request({
url: "/video/externalVideoStreaming",
method: "get",
params: {
camId,
},
});
}
@ -45,12 +49,15 @@ export function getCameraStream(camId, media = 1) {
* @returns
*/
export function controlCamera(camId, cmdType) {
return axiosIns
.post("/videoInfo/api/PTZControl", {
return request({
url: "/video/PTZControl",
method: "get",
params: {
msgType: 3,
camId,
cmdType,
})
},
})
.then((result) => {
if (result.code != 200) return Message.error(`相机操作失败!`);
})
@ -58,3 +65,79 @@ export function controlCamera(camId, cmdType) {
Message.error(`相机操作失败!`);
});
}
/**
* 通过 桩号获取 道路信息
* @returns
*/
export async function getRoadInfoByStakeMark(stakeMarkId) {
const stakeMarkInfo = await axiosIns.get(
`/business/stakeMark/${stakeMarkId}`
);
if (!stakeMarkInfo.data?.section_id) return {};
const roadSectionInfo = await axiosIns.get(
`/business/roadSection/${stakeMarkInfo.data.section_id}`
);
if (!roadSectionInfo.data?.road_id) return {};
return (
(await axiosIns.get(`/business/road/${roadSectionInfo.road_id}`)).data || {}
);
}
const DeviceTypeMap = {
1: "摄像机",
2: "可变信息标志",
3: "气象监测器",
4: "出口诱导灯",
5: "路段语音广播",
6: "护栏碰撞",
7: "毫米波雷达",
8: "合流区预警",
9: "智慧锥桶",
10: "激光疲劳唤醒",
11: "一类交通量调查站",
12: "行车诱导",
13: "智能设备箱",
14: "光线在线监测",
};
/**
* @description {DeviceTypeMap}
* @param {number} deviceType
1: "摄像机",
2: "可变信息标志",
3: "气象监测器",
4: "出口诱导灯",
5: "路段语音广播",
6: "护栏碰撞",
7: "毫米波雷达",
8: "合流区预警",
9: "智慧锥桶",
10: "激光疲劳唤醒",
11: "一类交通量调查站",
12: "行车诱导",
13: "智能设备箱",
14: "光线在线监测",
*/
export function getDeviceList(deviceType) {
return request({
url: "/business/device/query",
method: "get",
params: {
deviceType: 12,
},
})
.then(({ code, data }) => {
if (code != 200)
return Message.error(`${DeviceTypeMap[deviceType]}设备加载失败!`);
return data;
})
.catch(() => {
Message.error(`${DeviceTypeMap[deviceType]}设备加载失败!`);
});
}

11
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js

@ -97,7 +97,7 @@ export async function setMarkerCluster(map, points, markerFun) {
* @param {*} _markerClick marker 点击
* @returns
*/
export async function setMarkToMap(item, data, resolveMarker, _markerClick) {
export async function setMarkToMap(item, data, _markerClick) {
const { mapIns } = this.getMap();
if (!mapIns) return Message.error("地图加载失败!");
@ -124,12 +124,9 @@ export async function setMarkToMap(item, data, resolveMarker, _markerClick) {
const markerCluster = await setMarkerCluster(
mapIns,
data.map((item) => {
const { lnglat, content } = resolveMarker(item);
// const { lng, lat } = PilePointJSON[item.pileNum] || {};
return {
weight: 1,
lnglat,
lnglat: [item.longitude, item.latitude],
name: "",
extData: item,
content:
@ -156,9 +153,7 @@ export async function setMarkToMap(item, data, resolveMarker, _markerClick) {
markerClick
);
setTimeout(() => {
mapIns.setFitView([...markerCluster.U], false, [0, 0, 0, 0], 7);
});
mapIns.setFitView([...markerCluster.U], false, [0, 0, 0, 0], 7);
return () => markerCluster.setMap(null);
}

28
ruoyi-ui/src/views/JiHeExpressway/utils/enum.js

@ -30,14 +30,32 @@ export const CameraStatusEnum = {
// 摄像机方向
export const CameraDirectionEnum = {
0: {
text: "上行",
},
// 0: {
// text: "上行",
// },
// 1: {
// text: "下行",
// },
// 2: {
// text: "上下行 (双向)",
// },
1: {
text: "下行",
text: "上行(菏泽方向)",
},
2: {
text: "上下行 (双向)",
text: "中",
},
3: {
text: "下行(济南方向)",
},
};
export const DeviceTypeEnum = {
0: {
text: "异常",
},
1: {
text: "正常",
},
};

Loading…
Cancel
Save