fix：大屏首页逻辑增加
This commit is contained in:
@@ -0,0 +1,127 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-15 13:14:03
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-15 14:06:48
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-follow.vue
|
||||
* @Description: 总览大屏-巡检车辆-跟车弹窗
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="inspection-content">
|
||||
<fssm-map ref="carMap" :baseMap="'img_c'"></fssm-map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// websocket
|
||||
import {
|
||||
connectWebsocket,
|
||||
closeWebsocket,
|
||||
sendMsg,
|
||||
} from "@/plugins/websocket.js";
|
||||
import { getToken } from "@/utils/auth.js";
|
||||
import logo from "@/assets/xc.png";
|
||||
import FssmMap from "@/components/map/fssm-map.vue";
|
||||
import { Point } from "ol/geom";
|
||||
import { Feature } from "ol";
|
||||
import { Style, Icon } from "ol/style";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
|
||||
export default {
|
||||
name: "InspectionFollow",
|
||||
components: {
|
||||
FssmMap,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.initWebSocket();
|
||||
},
|
||||
methods: {
|
||||
/* 初始化websocket */
|
||||
initWebSocket() {
|
||||
const url = `ws://192.168.1.188:8080/websocket?token=${getToken()}`;
|
||||
const data = { type: "carLocation", status: true };
|
||||
connectWebsocket(
|
||||
url,
|
||||
data,
|
||||
(res) => {
|
||||
// console.log("onWsMessage接收到服务器的数据: ", res);
|
||||
console.log(JSON.parse(res));
|
||||
},
|
||||
(err) => {
|
||||
console.log("断开重连");
|
||||
this.drawPoint();
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
/* 发送消息 */
|
||||
sendMsg() {
|
||||
sendMsg(5555); //value是发送的值
|
||||
// this.value = "";
|
||||
},
|
||||
|
||||
/* 绘制地图车点位 */
|
||||
drawPoint() {
|
||||
const features = [];
|
||||
// 修改坐标样式
|
||||
const point = new Point([123.30297096718999,41.87942945541742]);
|
||||
const feature = new Feature({
|
||||
geometry: point,
|
||||
data: {
|
||||
iconType: "1",
|
||||
// imageUrl: element.imageUrl,
|
||||
// rect: element.rect,
|
||||
},
|
||||
// 自己设置一个标识
|
||||
type: "icon",
|
||||
});
|
||||
// 可以给点位设置样式
|
||||
feature.setStyle([
|
||||
new Style({
|
||||
image: new Icon({
|
||||
crossOrigin: "anonymous",
|
||||
src: logo,
|
||||
// 图标缩放比例
|
||||
scale: 0.05,
|
||||
}),
|
||||
}),
|
||||
]);
|
||||
features.push(feature);
|
||||
//设置地图的数据源
|
||||
const pointSource = new VectorSource({
|
||||
features,
|
||||
});
|
||||
let markLayerPoints = new VectorLayer({
|
||||
source: pointSource,
|
||||
properties: {
|
||||
type: "point",
|
||||
},
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.carMap.instance.get("map");
|
||||
map.addLayer(markLayerPoints);
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
closeWebsocket();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inspection-content {
|
||||
width: 100%;
|
||||
height: 45rem;
|
||||
|
||||
::v-deep .baseLayerClass {
|
||||
filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
|
||||
brightness(80%) saturate(550%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-15 14:23:21
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-15 15:06:55
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-view.vue
|
||||
* @Description: 总览大屏-巡检车辆-视频查看弹窗
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="view-content"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getVideoUrl } from "@/api/xj/screen/disease-screen";
|
||||
export default {
|
||||
name: "InspectionView",
|
||||
props: {
|
||||
dialogItem: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 视频播放地址
|
||||
vedioUrl: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVideo();
|
||||
},
|
||||
methods: {
|
||||
/* 获取视频url地址 */
|
||||
getVideo() {
|
||||
console.log(this.dialogItem);
|
||||
getVideoUrl({ id: this.dialogItem.clientId }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.view-content {
|
||||
width: 100%;
|
||||
height: 40rem;
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-08 09:40:18
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-14 15:54:12
|
||||
* @LastEditTime: 2024-11-15 15:29:10
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\inspection-vehicles.vue
|
||||
* @Description: 总览大屏-巡检车辆
|
||||
-->
|
||||
@@ -85,7 +85,6 @@
|
||||
</el-popover>
|
||||
|
||||
<el-button
|
||||
disabled
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="followCar(scope.row)"
|
||||
@@ -93,7 +92,6 @@
|
||||
>跟车
|
||||
</el-button>
|
||||
<el-button
|
||||
disabled
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="videoDelete(scope.row)"
|
||||
@@ -118,13 +116,48 @@
|
||||
</el-pagination>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- 跟车弹窗 -->
|
||||
<el-dialog
|
||||
:title="followTitle"
|
||||
:visible.sync="showCarVisible"
|
||||
width="85rem"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="followCancel"
|
||||
>
|
||||
<inspection-follow v-if="followTitle === '跟车详情'"></inspection-follow>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 视频弹窗 -->
|
||||
<el-dialog
|
||||
:title="viewTitle"
|
||||
:visible.sync="showViewVisible"
|
||||
width="60rem"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="viewCancel"
|
||||
>
|
||||
<inspection-view
|
||||
v-if="viewTitle === '视频查看'"
|
||||
:dialogItem="dialogItem"
|
||||
></inspection-view>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCarList } from "@/api/xj/screen/disease-screen";
|
||||
import { getCarList, closeVideoUrl } from "@/api/xj/screen/disease-screen";
|
||||
import InspectionFollow from "./components/inspection-follow.vue";
|
||||
import InspectionView from "./components/inspection-view.vue";
|
||||
import { closeWebsocket } from "@/plugins/websocket.js";
|
||||
export default {
|
||||
name: "InspectionVehicles",
|
||||
components: {
|
||||
InspectionFollow,
|
||||
InspectionView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 车辆总数
|
||||
@@ -142,6 +175,16 @@ export default {
|
||||
// },
|
||||
// 分页总数
|
||||
tableTotal: 0,
|
||||
// 传弹窗数据
|
||||
dialogItem: {},
|
||||
// 跟车弹窗显隐控制
|
||||
showCarVisible: false,
|
||||
// 跟车弹窗标题
|
||||
followTitle: "",
|
||||
// 视频弹窗显隐控制
|
||||
showViewVisible: false,
|
||||
// 视频弹窗标题
|
||||
viewTitle: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@@ -164,16 +207,44 @@ export default {
|
||||
detailDefect(val) {},
|
||||
|
||||
/* 表格跟车事件 */
|
||||
followCar(val) {},
|
||||
followCar(val) {
|
||||
this.followTitle = "跟车详情";
|
||||
this.showCarVisible = true;
|
||||
},
|
||||
|
||||
/* 表格视频事件 */
|
||||
videoDelete(val) {},
|
||||
videoDelete(val) {
|
||||
this.dialogItem = val;
|
||||
this.viewTitle = "视频查看";
|
||||
this.showViewVisible = true;
|
||||
},
|
||||
|
||||
/* 页码修改事件 */
|
||||
// handleCurrentChange(arg) {
|
||||
// this.pagination.page = arg;
|
||||
// this.getTableData();
|
||||
// },
|
||||
|
||||
/* 关闭跟车弹窗事件 */
|
||||
followCancel() {
|
||||
this.followTitle = "";
|
||||
this.showCarVisible = false;
|
||||
this.dialogItem = {};
|
||||
closeWebsocket();
|
||||
},
|
||||
|
||||
/* 关闭视频弹窗事件 */
|
||||
viewCancel() {
|
||||
this.viewTitle = "";
|
||||
this.showViewVisible = false;
|
||||
closeVideoUrl({ id: this.dialogItem.clientId })
|
||||
.then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
console.log(data);
|
||||
this.dialogItem = {};
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -313,6 +384,22 @@ export default {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* 修改弹窗样式 */
|
||||
::v-deep .el-dialog__header {
|
||||
padding: 10px;
|
||||
background-color: #113463;
|
||||
|
||||
span,
|
||||
i {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 0;
|
||||
background-color: #113463;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
/* 弹出层样式 */
|
||||
|
||||
Reference in New Issue
Block a user