fix：websocket接入，大屏修改部分
This commit is contained in:
parent
912137cf0c
commit
26e6fd8584
@ -68,6 +68,7 @@
|
||||
"vue-seamless-scroll": "^1.1.23",
|
||||
"vuedraggable": "2.24.3",
|
||||
"vuex": "3.6.0",
|
||||
"websocket": "^1.0.35",
|
||||
"xcrud": "^0.4.19"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-24 15:03:28
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-06 13:25:37
|
||||
* @LastEditTime: 2024-11-14 09:16:02
|
||||
* @FilePath: \znxjxt-ui\src\api\xj\screen\index.js
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
@ -17,10 +17,18 @@ export function selectTypeList(query) {
|
||||
});
|
||||
}
|
||||
|
||||
// v1
|
||||
// 获取地图打点数据接口
|
||||
// export function mapPointList(query) {
|
||||
// return request({
|
||||
// url: "/bigscreen/getMapPoint",
|
||||
// method: "get",
|
||||
// params: query,
|
||||
// });
|
||||
// }
|
||||
export function mapPointList(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getMapPoint",
|
||||
url: "/bigscreen/v2/getMapPoint",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
@ -79,12 +87,21 @@ export function getSegment(data) {
|
||||
});
|
||||
}
|
||||
|
||||
// 根据选择的按钮类型查下级选项框
|
||||
export function getItemTypes(params) {
|
||||
// 病害筛选根据点击的详情查图片详情
|
||||
export function getMediaIndex(data){
|
||||
return request({
|
||||
url: "/metadata/getItemTypes",
|
||||
url: "/bigscreen/v2/getTableIndex",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 根据选择的按钮类型查下级选项框
|
||||
export function getItemTypes(query) {
|
||||
return request({
|
||||
url: "/bigscreen/v2/getAllDefectType",
|
||||
method: "get",
|
||||
params,
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ export function getSegment() {
|
||||
// 病害类型下拉数据
|
||||
export function getDefectList(params) {
|
||||
return request({
|
||||
url: "/metadata/defectType",
|
||||
url: "/bigscreen/v2/getAllDefectType",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-14 10:46:23
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-06 16:42:42
|
||||
* @LastEditTime: 2024-11-14 16:58:34
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\fssm-map.vue
|
||||
* @Description: 公共地图
|
||||
-->
|
||||
@ -150,6 +150,7 @@ export default {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
|
||||
/* 监听传过来的底图类型 */
|
||||
baseMap: {
|
||||
handler(val) {
|
||||
@ -211,7 +212,7 @@ export default {
|
||||
minZoom: 7,
|
||||
maxZoom: 18,
|
||||
}),
|
||||
layers: [ tianditu_img_c, tianditu_cva_c],
|
||||
layers: [tianditu_img_c, tianditu_cva_c],
|
||||
});
|
||||
// 图层点击事件
|
||||
map.on("singleclick", (e) => {
|
||||
|
||||
229
src/plugins/websocket.js
Normal file
229
src/plugins/websocket.js
Normal file
@ -0,0 +1,229 @@
|
||||
/*
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-13 17:13:54
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-13 17:14:13
|
||||
* @FilePath: \znxjxt-ui\src\plugins\websocket.js
|
||||
* @Description: websocket传输
|
||||
*/
|
||||
|
||||
// websocket实例
|
||||
let wsObj = null;
|
||||
// ws连接地址
|
||||
let wsUrl = null;
|
||||
// let userId = null;
|
||||
// 是否执行重连 true/不执行 ； false/执行
|
||||
let lockReconnect = false;
|
||||
// 重连定时器
|
||||
let wsCreateHandler = null;
|
||||
// 连接成功，执行回调函数
|
||||
let messageCallback = null;
|
||||
// 连接失败，执行回调函数
|
||||
let errorCallback = null;
|
||||
// 发送给后台的数据
|
||||
let sendDatas = {};
|
||||
|
||||
/**
|
||||
* 发起websocket请求函数
|
||||
* @param {string} url ws连接地址
|
||||
* @param {Object} agentData 传给后台的参数
|
||||
* @param {function} successCallback 接收到ws数据，对数据进行处理的回调函数
|
||||
* @param {function} errCallback ws连接错误的回调函数
|
||||
*/
|
||||
export const connectWebsocket = (url, agentData, successCallback, errCallback) => {
|
||||
wsUrl = url;
|
||||
createWebSoket();
|
||||
messageCallback = successCallback;
|
||||
errorCallback = errCallback;
|
||||
sendDatas = agentData;
|
||||
};
|
||||
|
||||
// 手动关闭websocket （这里手动关闭会执行onclose事件）
|
||||
export const closeWebsocket = () => {
|
||||
if (wsObj) {
|
||||
writeToScreen("手动关闭websocket");
|
||||
wsObj.close(); // 关闭websocket
|
||||
// wsObj.onclose() // 关闭websocket(如果上面的关闭不生效就加上这一条)
|
||||
// 关闭重连
|
||||
lockReconnect = true;
|
||||
wsCreateHandler && clearTimeout(wsCreateHandler);
|
||||
// 关闭心跳检查
|
||||
heartCheck.stop();
|
||||
}
|
||||
};
|
||||
|
||||
//向服务器端发送消息
|
||||
export const sendMsg = value => {
|
||||
wsObj.send(JSON.stringify(value));
|
||||
};
|
||||
|
||||
// 创建ws函数
|
||||
const createWebSoket = () => {
|
||||
//判断浏览器是否支持websocket
|
||||
if (typeof WebSocket === "undefined") {
|
||||
writeToScreen("您的浏览器不支持WebSocket，无法获取数据");
|
||||
return false;
|
||||
}
|
||||
|
||||
// const host = window.location.host; //获取端口
|
||||
// userId = GetQueryString("userId");
|
||||
// wsUrl = "ws://" + host + "/websoket" + userId;
|
||||
|
||||
try {
|
||||
wsObj = new WebSocket(wsUrl);
|
||||
initWsEventHandle();
|
||||
} catch (e) {
|
||||
writeToScreen("连接异常，开始重连");
|
||||
reconnect();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const initWsEventHandle = () => {
|
||||
try {
|
||||
// 连接成功
|
||||
wsObj.onopen = event => {
|
||||
// heartCheck.start(); //开启心跳
|
||||
onWsOpen(event); //客户端与服务器端通信
|
||||
};
|
||||
|
||||
// 监听服务器端返回的信息
|
||||
wsObj.onmessage = event => {
|
||||
onWsMessage(event); //接收数据，抛出
|
||||
// heartCheck.reset(); //重置心跳
|
||||
};
|
||||
|
||||
wsObj.onclose = event => {
|
||||
writeToScreen("onclose执行关闭事件");
|
||||
onWsClose(event); //关闭事件
|
||||
};
|
||||
|
||||
wsObj.onerror = event => {
|
||||
writeToScreen("onerror执行error事件，开始重连");
|
||||
onWsError(event); //error事件
|
||||
reconnect(); //重连
|
||||
};
|
||||
} catch (err) {
|
||||
writeToScreen("绑定事件没有成功，开始重连");
|
||||
reconnect();
|
||||
}
|
||||
};
|
||||
|
||||
//open事件 WebSocket连接成功时触发
|
||||
const onWsOpen = event => {
|
||||
// 客户端与服务器端通信
|
||||
// wsObj.send('我发送消息给服务端');
|
||||
// 添加状态判断，当为OPEN时，发送消息
|
||||
if (wsObj.readyState === wsObj.OPEN) {
|
||||
// wsObj.OPEN = 1
|
||||
// 发给后端的数据需要字符串化
|
||||
wsObj.send(JSON.stringify(sendDatas));
|
||||
}
|
||||
if (wsObj.readyState === wsObj.CLOSED) {
|
||||
// wsObj.CLOSED = 3
|
||||
writeToScreen("wsObj.readyState=3, ws连接异常，开始重连");
|
||||
reconnect();
|
||||
errorCallback(event);
|
||||
}
|
||||
};
|
||||
|
||||
//message事件 接收到WebSocket服务器发送的消息时触发
|
||||
const onWsMessage = event => {
|
||||
const jsonStr = event.data;
|
||||
// writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr);
|
||||
messageCallback(jsonStr);
|
||||
};
|
||||
|
||||
//close事件 WebSocket连接关闭时触发
|
||||
const onWsClose = event => {
|
||||
writeToScreen("DISCONNECT");
|
||||
// e.code === 1000 表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
|
||||
// e.code !== 1000 表示非正常关闭。
|
||||
console.log("onclose event: ", event);
|
||||
if (event && event.code !== 1000) {
|
||||
writeToScreen("非正常关闭");
|
||||
errorCallback(event);
|
||||
// 如果不是手动关闭，这里的重连会执行；如果调用了手动关闭函数，这里重连不会执行
|
||||
reconnect();
|
||||
}
|
||||
};
|
||||
|
||||
//error事件 WebSocket连接出错时触发
|
||||
const onWsError = event => {
|
||||
writeToScreen("onWsError: ", event.data);
|
||||
errorCallback(event);//抛出错误
|
||||
};
|
||||
|
||||
//封装console.log()
|
||||
const writeToScreen = massage => {
|
||||
console.log(massage);
|
||||
};
|
||||
|
||||
// 重连函数
|
||||
const reconnect = () => {
|
||||
if (lockReconnect) {
|
||||
return;
|
||||
}
|
||||
writeToScreen("3秒后重连");
|
||||
lockReconnect = true;
|
||||
// 没连接上会一直重连，设置延迟避免请求过多
|
||||
wsCreateHandler && clearTimeout(wsCreateHandler);
|
||||
wsCreateHandler = setTimeout(() => {
|
||||
writeToScreen("重连..." + wsUrl);
|
||||
createWebSoket();
|
||||
lockReconnect = false;
|
||||
writeToScreen("重连完成");
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
// 从浏览器地址中获取对应参数
|
||||
const GetQueryString = name => {
|
||||
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||||
// 获取url中 ? 符后的字符串并正则匹配
|
||||
let r = window.location.search.substr(1).match(reg);
|
||||
let context = "";
|
||||
r && (context = r[2]);
|
||||
reg = null;
|
||||
r = null;
|
||||
return context;
|
||||
};
|
||||
|
||||
// 心跳检查（看看websocket是否还在正常连接中）
|
||||
let heartCheck = {
|
||||
timeout: 15 * 1000,
|
||||
timeoutObj: null,
|
||||
serverTimeoutObj: null,
|
||||
// 重启
|
||||
reset() {
|
||||
clearTimeout(this.timeoutObj);
|
||||
clearTimeout(this.serverTimeoutObj);
|
||||
this.start();
|
||||
},
|
||||
// 停止
|
||||
stop() {
|
||||
clearTimeout(this.timeoutObj);
|
||||
clearTimeout(this.serverTimeoutObj);
|
||||
},
|
||||
// 开启定时器
|
||||
start() {
|
||||
this.timeoutObj && clearTimeout(this.timeoutObj);
|
||||
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
|
||||
// 15s之内如果没有收到后台的消息，则认为是连接断开了，需要重连
|
||||
this.timeoutObj = setTimeout(() => {
|
||||
writeToScreen("心跳检查，发送ping到后台");
|
||||
try {
|
||||
const datas = { content: "心跳检测" };
|
||||
wsObj.send(JSON.stringify(datas));
|
||||
} catch (err) {
|
||||
writeToScreen("发送ping异常,重连");
|
||||
reconnect();
|
||||
}
|
||||
// console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj);
|
||||
// 内嵌定时器
|
||||
this.serverTimeoutObj = setTimeout(() => {
|
||||
writeToScreen("没有收到后台的数据，重新连接");
|
||||
reconnect();
|
||||
}, this.timeout);
|
||||
}, this.timeout);
|
||||
},
|
||||
};
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-22 15:30:25
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-13 13:31:49
|
||||
* @LastEditTime: 2024-11-14 16:44:42
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
|
||||
* @Description: 大屏查看图片弹窗
|
||||
-->
|
||||
@ -53,6 +53,7 @@
|
||||
v-model="imgForm.segmentId"
|
||||
placeholder="请选择路段名称"
|
||||
:popper-append-to-body="false"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
@ -84,18 +85,32 @@
|
||||
<el-input
|
||||
v-model="imgForm.stakeStart"
|
||||
placeholder="起始公里桩"
|
||||
style="width: 8rem"
|
||||
style="width: 6rem"
|
||||
clearable
|
||||
/>
|
||||
<span style="margin: 0 5px">-</span>
|
||||
<el-input
|
||||
v-model="imgForm.stakeEnd"
|
||||
placeholder="终止公里桩"
|
||||
style="width: 8rem"
|
||||
style="width: 6rem"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="form-item" label="病害状态" prop="state">
|
||||
<el-select
|
||||
v-model="imgForm.state"
|
||||
:popper-append-to-body="false"
|
||||
placeholder="请选择病害状态"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in defectStatus"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="btn-submit"
|
||||
@ -162,10 +177,24 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDefectStatus } from "@/api/xj/disease";
|
||||
import { defeaseList, getSegment, getItemTypes } from "@/api/xj/screen/index";
|
||||
import {
|
||||
defeaseList,
|
||||
getSegment,
|
||||
getItemTypes,
|
||||
getMediaIndex,
|
||||
} from "@/api/xj/screen/index";
|
||||
export default {
|
||||
name: "ImgDialog",
|
||||
props: {
|
||||
bottomTipClick: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
imageItem: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 维度选择
|
||||
@ -179,11 +208,13 @@ export default {
|
||||
// 当前选择的index
|
||||
currentIndex: 0,
|
||||
// 下方点击的index绑定
|
||||
selectedThumbnail: null,
|
||||
selectedThumbnail: 0,
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 表单绑定
|
||||
imgForm: {
|
||||
// 点击详情传的id
|
||||
id: null,
|
||||
// 路段名称
|
||||
segmentId: "",
|
||||
// 病害类型
|
||||
@ -192,31 +223,37 @@ export default {
|
||||
stakeStart: "",
|
||||
// 终止公里桩
|
||||
stakeEnd: "",
|
||||
// 病害状态
|
||||
state: "",
|
||||
},
|
||||
// 路段下拉数据
|
||||
roadTypeList: [],
|
||||
// 病害类型下拉数据
|
||||
defectTypeList: [],
|
||||
// 病害状态下拉数据
|
||||
defectStatus: [
|
||||
{ label: "已修复", value: "2" },
|
||||
{ label: "未修复", value: "1" },
|
||||
],
|
||||
// 分页绑定
|
||||
params: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
},
|
||||
pageTip: 1,
|
||||
// 图片病害位置红框信息
|
||||
rectItem: [],
|
||||
colorList: ["#FF0000", "#07E8E2", "#DD9F18", "#994EFF", "#08B4A6"],
|
||||
// 病害状态下拉选项
|
||||
defectStatus: [],
|
||||
colorList: ["#FFFFFF", "#07E8E2", "#DD9F18", "#994EFF", "#08B4A6"],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 当前展示的图片url
|
||||
currentImage() {
|
||||
if (this.defectData.length > 0) {
|
||||
// this.rectItem =
|
||||
// this.defectData[this.currentIndex]?.items[
|
||||
// this.selectedThumbnail
|
||||
// ]?.children;
|
||||
if (
|
||||
this.defectData.length > 0 &&
|
||||
this.defectData.length > this.currentIndex
|
||||
) {
|
||||
// this.showImage(this.currentIndex);
|
||||
return this.defectData[this.currentIndex].items[this.selectedThumbnail]
|
||||
.img;
|
||||
}
|
||||
@ -226,34 +263,25 @@ export default {
|
||||
return this.defectData[this.currentIndex]?.items || [];
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
imageItem: {
|
||||
handler() {
|
||||
this.getMediaBySnapshotid();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
bottomTipClick: {
|
||||
handler() {
|
||||
this.getDefectType();
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.showImage(0);
|
||||
this.getSegmentList();
|
||||
this.getDefectStatusList();
|
||||
this.getDefectType();
|
||||
},
|
||||
methods: {
|
||||
/* 查询病害状态下拉数据 */
|
||||
getDefectStatusList() {
|
||||
getDefectStatus().then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.defectStatus = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 过滤列表病害状态 */
|
||||
filterState(value) {
|
||||
let a = null;
|
||||
[a] = this.defectStatus.filter((item) => {
|
||||
return item.value === value;
|
||||
});
|
||||
if (a) {
|
||||
return a.label;
|
||||
}
|
||||
},
|
||||
|
||||
/* 获取路段下拉数据 */
|
||||
getSegmentList() {
|
||||
getSegment().then(({ code, data }) => {
|
||||
@ -265,9 +293,28 @@ export default {
|
||||
|
||||
/* 获取病害类型下拉数据 */
|
||||
getDefectType() {
|
||||
getItemTypes({ type: "defect" }).then(({ code, data }) => {
|
||||
getItemTypes({ classType: this.bottomTipClick }).then(
|
||||
({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.defectTypeList = data;
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
/* 根据传回来的快照id查图片详细数据 */
|
||||
getMediaBySnapshotid() {
|
||||
getMediaIndex({
|
||||
classType: this.bottomTipClick,
|
||||
id: this.imageItem.snapshotId,
|
||||
}).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.defectTypeList = data;
|
||||
this.currentIndex = data.index;
|
||||
this.pageTip = data.page;
|
||||
this.params.page = data.page;
|
||||
this.params.size = data.size;
|
||||
this.imgForm.segmentId = data.segmentId.toString();
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -290,23 +337,55 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/* 获取图片列表/点击搜索事件 */
|
||||
/* 向下获取图片列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
const data = {
|
||||
classType: this.bottomTipClick,
|
||||
...this.imgForm,
|
||||
...this.params,
|
||||
};
|
||||
defeaseList(data)
|
||||
.then((response) => {
|
||||
this.aimList.push(...response.data.aim);
|
||||
this.ariaList.push(...response.data.aria);
|
||||
if (this.labelCheck === "aria") {
|
||||
this.defectData = this.ariaList;
|
||||
} else {
|
||||
this.defectData = this.aimList;
|
||||
.then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.aimList.push(...data.aim);
|
||||
this.ariaList.push(...data.aria);
|
||||
if (this.labelCheck === "aria") {
|
||||
this.defectData = this.ariaList;
|
||||
} else {
|
||||
this.defectData = this.aimList;
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
// this.showImage(this.currentIndex);
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/* 向上获取列表数据 */
|
||||
getListTop() {
|
||||
this.loading = true;
|
||||
const data = {
|
||||
classType: this.bottomTipClick,
|
||||
...this.imgForm,
|
||||
...this.params,
|
||||
};
|
||||
defeaseList(data)
|
||||
.then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.aimList.unshift(...data.aim);
|
||||
this.ariaList.unshift(...data.aria);
|
||||
if (this.labelCheck === "aria") {
|
||||
this.defectData = this.ariaList;
|
||||
} else {
|
||||
this.defectData = this.aimList;
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
@ -319,6 +398,8 @@ export default {
|
||||
if (this.imgForm.stakeStart) {
|
||||
if (stakeReg.test(this.imgForm.stakeStart)) {
|
||||
this.defectData = [];
|
||||
this.ariaList = [];
|
||||
this.aimList = [];
|
||||
this.params = {
|
||||
page: 1,
|
||||
size: 10,
|
||||
@ -331,6 +412,8 @@ export default {
|
||||
} else if (this.imgForm.stakeEnd) {
|
||||
if (stakeReg.test(this.imgForm.stakeEnd)) {
|
||||
this.defectData = [];
|
||||
this.ariaList = [];
|
||||
this.aimList = [];
|
||||
this.params = {
|
||||
page: 1,
|
||||
size: 10,
|
||||
@ -342,6 +425,8 @@ export default {
|
||||
}
|
||||
} else {
|
||||
this.defectData = [];
|
||||
this.ariaList = [];
|
||||
this.aimList = [];
|
||||
this.params = {
|
||||
page: 1,
|
||||
size: 10,
|
||||
@ -354,11 +439,14 @@ export default {
|
||||
/* 重置事件 */
|
||||
resetQuery() {
|
||||
this.defectData = [];
|
||||
this.ariaList = [];
|
||||
this.aimList = [];
|
||||
this.imgForm = {
|
||||
segmentId: "",
|
||||
defectType: "",
|
||||
stakeStart: "",
|
||||
stakeEnd: "",
|
||||
state: "",
|
||||
};
|
||||
this.params = {
|
||||
page: 1,
|
||||
@ -370,9 +458,9 @@ export default {
|
||||
|
||||
/* 左侧点击图片事件 */
|
||||
showImage(index) {
|
||||
if (this.currentIndex === this.defectData.length - 1) {
|
||||
this.loadMoreImages();
|
||||
}
|
||||
// if (this.currentIndex === this.defectData.length - 1) {
|
||||
// this.loadMoreBottomImages();
|
||||
// }
|
||||
this.currentIndex = index;
|
||||
this.selectedThumbnail = 0; // Reset to the first thumbnail when changing the main item
|
||||
this.scrollToCurrentImage();
|
||||
@ -402,27 +490,41 @@ export default {
|
||||
},
|
||||
|
||||
/* 滚动触发事件 */
|
||||
handleScroll() {
|
||||
// 滚动高度+容器高度 滚动区域高度
|
||||
handleScroll(e) {
|
||||
const sidebar = this.$refs.sidebar;
|
||||
// 滚动到顶加载数据
|
||||
if (e.target.scrollTop < 1 && this.pageTip > 1 && !this.loading) {
|
||||
this.loadMoreTopImages();
|
||||
}
|
||||
|
||||
// 滚动到底加载数据
|
||||
// 滚动高度+容器高度 滚动区域高度
|
||||
if (
|
||||
sidebar.scrollTop + sidebar.clientHeight >= sidebar.scrollHeight - 1 &&
|
||||
!this.loading
|
||||
) {
|
||||
this.loadMoreImages();
|
||||
this.loadMoreBottomImages();
|
||||
}
|
||||
// if (this.currentIndex === this.defectData.length - 1) {
|
||||
// this.loadMoreImages();
|
||||
// this.loadMoreBottomImages();
|
||||
// }
|
||||
},
|
||||
|
||||
/* 加载更多图片方法 */
|
||||
loadMoreImages() {
|
||||
/* 向下加载更多图片方法 */
|
||||
loadMoreBottomImages() {
|
||||
this.params.page += 1;
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/* 点击目标详情事件 */
|
||||
/* 向上加载更多图片 */
|
||||
loadMoreTopImages() {
|
||||
this.pageTip -= 1;
|
||||
this.params.page -= 1;
|
||||
this.currentIndex += this.params.size;
|
||||
this.getListTop();
|
||||
},
|
||||
|
||||
/* 点击目标详情/空间维度事件 */
|
||||
clickImage(item) {
|
||||
if (this.labelCheck === "aim") {
|
||||
this.labelCheck = "aria";
|
||||
@ -457,7 +559,7 @@ export default {
|
||||
this.scrollToCurrentImage();
|
||||
this.updateRects();
|
||||
} else {
|
||||
this.loadMoreImages();
|
||||
this.loadMoreBottomImages();
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -618,7 +720,7 @@ export default {
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 10rem;
|
||||
width: 8rem;
|
||||
|
||||
.el-input--small .el-input__inner {
|
||||
color: #ffffff;
|
||||
@ -674,6 +776,7 @@ export default {
|
||||
|
||||
.image-info {
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@ -694,6 +797,7 @@ export default {
|
||||
|
||||
> div {
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
top: -1.2rem;
|
||||
}
|
||||
@ -703,7 +807,7 @@ export default {
|
||||
.rect-image {
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.image-viewer {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-08 11:56:02
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-13 15:09:42
|
||||
* @LastEditTime: 2024-11-14 13:12:32
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-log.vue
|
||||
* @Description: 病害巡检-病害日志
|
||||
-->
|
||||
@ -151,10 +151,8 @@
|
||||
<script>
|
||||
import { emergencyData, DefectType } from "@/api/xj/screen/traffic-screen";
|
||||
import { getSegment } from "@/api/xj/screen/index";
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
export default {
|
||||
name: "TrafficLog",
|
||||
components: { vueSeamlessScroll },
|
||||
props: {
|
||||
// 病害巡检中4种类型点击绑定
|
||||
bottomTipClick: {
|
||||
@ -187,17 +185,6 @@ export default {
|
||||
{ label: "已修复", value: "2" },
|
||||
{ label: "未修复", value: "1" },
|
||||
],
|
||||
// 轮播配置
|
||||
defaultOption: {
|
||||
step: 0.2, // 数值越大速度滚动越快
|
||||
limitMoveNum: 1,
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
|
||||
},
|
||||
// 事件列表
|
||||
emergencyList: [],
|
||||
// 分页数据绑定
|
||||
@ -274,11 +261,26 @@ export default {
|
||||
};
|
||||
emergencyData(data).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.tableTotal = data.length;
|
||||
this.emergencyList = data;
|
||||
this.emergencyList = data.rows;
|
||||
this.tableTotal = data.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 点击表格详情事件 */
|
||||
detailDefect(item) {
|
||||
this.$emit("imagePoint", {
|
||||
snapshotId: item.snapshotId,
|
||||
segmentId: item.segmentId,
|
||||
tablePoint: [item.coordinates[0], item.coordinates[1]],
|
||||
});
|
||||
},
|
||||
|
||||
/* 页码修改事件 */
|
||||
handleCurrentChange(age) {
|
||||
this.pagination.page = age;
|
||||
this.getData();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-13 14:11:57
|
||||
* @LastEditTime: 2024-11-14 17:26:53
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@ -73,6 +73,7 @@
|
||||
:select="item.select"
|
||||
:is="item.component"
|
||||
:bottomTipClick="bottomTipClick"
|
||||
@imagePoint="getimagePoint"
|
||||
></component
|
||||
></template>
|
||||
<template slot="operation" v-if="item.selectIsShow">
|
||||
@ -89,7 +90,7 @@
|
||||
</div>
|
||||
<div class="road-content">
|
||||
<!-- 地图右上角多选框切换坐标类型 -->
|
||||
<!-- <div class="road-checkBox">
|
||||
<div class="road-checkBox" v-if="showIconList">
|
||||
<fssm-scroll class="road-scroll">
|
||||
<el-checkbox-group v-model="iconType" @change="handleChecked">
|
||||
<el-checkbox
|
||||
@ -100,7 +101,7 @@
|
||||
>
|
||||
</el-checkbox-group>
|
||||
</fssm-scroll>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- 地图图例 -->
|
||||
<div class="map-legend"></div>
|
||||
<!-- 图片背景 -->
|
||||
@ -141,10 +142,10 @@
|
||||
ref="roadMap"
|
||||
:showChange="true"
|
||||
:controlStyle="{ top: '10%', left: '26%' }"
|
||||
@map-moveend="mapMoveend"
|
||||
@map-zoom="getZoom"
|
||||
@feature-select="featureSelect"
|
||||
@map-zoom="getZoom"
|
||||
></fssm-map>
|
||||
<!-- @map-moveend="mapMoveend" -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen-footer">
|
||||
@ -176,7 +177,7 @@
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片弹窗 -->
|
||||
<!-- 详情图片弹窗 -->
|
||||
<el-dialog
|
||||
:title="imgTitle"
|
||||
:visible.sync="imgVisible"
|
||||
@ -186,7 +187,11 @@
|
||||
destroy-on-close
|
||||
@close="imgCancel"
|
||||
>
|
||||
<img-dialog></img-dialog>
|
||||
<img-dialog
|
||||
v-if="imgTitle === '查看'"
|
||||
:imageItem="imageItem"
|
||||
:bottomTipClick="bottomTipClick"
|
||||
></img-dialog>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 查看点位图片弹窗 -->
|
||||
@ -218,6 +223,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// websocket
|
||||
import {
|
||||
connectWebsocket,
|
||||
closeWebsocket,
|
||||
sendMsg,
|
||||
} from "@/plugins/websocket.js";
|
||||
// 登陆人信息
|
||||
import { getToken } from "@/utils/auth.js";
|
||||
// 地图
|
||||
import FssmMap from "@/components/map/fssm-map.vue";
|
||||
import { Feature } from "ol";
|
||||
@ -253,7 +266,6 @@ import {
|
||||
getItemTypes,
|
||||
getRoadListTypes,
|
||||
} from "@/api/xj/screen/index";
|
||||
import { DefectType } from "@/api/xj/screen/traffic-screen";
|
||||
export default {
|
||||
name: "BigScreen",
|
||||
components: {
|
||||
@ -336,27 +348,33 @@ export default {
|
||||
],
|
||||
// 图片背景下打点坐标数据
|
||||
mapCareList: [],
|
||||
// 切换地图图标类别按钮
|
||||
changeMapBtn: [
|
||||
{ name: "路面", click: "1" },
|
||||
{ name: "交安", click: "2" },
|
||||
{ name: "道桥", click: "3" },
|
||||
{ name: "绿化", click: "4" },
|
||||
],
|
||||
|
||||
// 具体icon类别
|
||||
iconTypeList: [],
|
||||
// icon类别绑定
|
||||
iconType: [],
|
||||
// 地图右上角多选显隐控制
|
||||
showIconList: false,
|
||||
|
||||
// 图片背景下病害类型下拉选择绑定
|
||||
mapCareSelect: "",
|
||||
// 图片背景下病害类型下拉选择数据
|
||||
dieaseTypeList: [],
|
||||
// 路段下拉绑定
|
||||
roadList: [],
|
||||
// 路段选择绑定
|
||||
// 地图打点-路段绑定
|
||||
roadSelect: "",
|
||||
|
||||
// 图标类别切换标识
|
||||
bottomTipClick: "1",
|
||||
// 切换地图图标类别按钮
|
||||
changeMapBtn: [
|
||||
{ name: "路面", click: "1" },
|
||||
{ name: "交安", click: "2" },
|
||||
{ name: "桥隧", click: "3" },
|
||||
{ name: "绿化", click: "4" },
|
||||
],
|
||||
|
||||
// 中间展示的动态组件绑定
|
||||
elementDiv: "OverviewScreen",
|
||||
// 下方三个按钮数据
|
||||
@ -365,6 +383,7 @@ export default {
|
||||
{ name: "病害巡检", component: "DiseaseScreen" },
|
||||
{ name: "道路资产", component: "RoadScreen" },
|
||||
],
|
||||
|
||||
// 中心点集合(全部)
|
||||
centerPiont: [],
|
||||
// 中心点集合（当前）
|
||||
@ -379,15 +398,19 @@ export default {
|
||||
clusters: null,
|
||||
// 线段图层
|
||||
markLayerLines: null,
|
||||
|
||||
// 图片弹窗标题
|
||||
imgTitle: "查看",
|
||||
// 图片弹窗显隐控制
|
||||
imgVisible: false,
|
||||
// 查看点位图片数据
|
||||
// 传图片弹窗数据
|
||||
imageItem: {},
|
||||
|
||||
// 查看大图点位图片数据
|
||||
screenImage: {},
|
||||
// 查看点位图片弹窗显隐控制
|
||||
// 查看大图点位图片弹窗显隐控制
|
||||
showImageDialog: false,
|
||||
// 查看点位图片弹窗红框数据
|
||||
// 查看大图点位图片弹窗红框数据
|
||||
screenRects: [],
|
||||
};
|
||||
},
|
||||
@ -397,6 +420,7 @@ export default {
|
||||
this.getMapCare();
|
||||
this.getRoadList();
|
||||
this.getDieaseTypeList();
|
||||
// this.initWebSocket();
|
||||
},
|
||||
methods: {
|
||||
/* 获取当前时间 */
|
||||
@ -452,7 +476,7 @@ export default {
|
||||
|
||||
/* 获取图片背景左上角病害类型下拉 */
|
||||
getDieaseTypeList() {
|
||||
DefectType().then(({ code, data }) => {
|
||||
getItemTypes().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.dieaseTypeList = data;
|
||||
}
|
||||
@ -468,13 +492,25 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 点击病害筛查 */
|
||||
clickImg() {
|
||||
/* 点击病害日志详情打开弹窗进行地图打点 */
|
||||
getimagePoint(item) {
|
||||
this.imgTitle = "查看";
|
||||
this.imageItem = item;
|
||||
this.imgVisible = true;
|
||||
// 地图打点\改变地图层级
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.getView().setCenter(item.tablePoint);
|
||||
map.getView().setZoom(16);
|
||||
});
|
||||
this.roadSelect = item.segmentId;
|
||||
this.getCenterPiont();
|
||||
},
|
||||
|
||||
/* 关闭图片查看弹窗 */
|
||||
imgCancel() {
|
||||
this.imgTitle = "";
|
||||
this.imageItem = {};
|
||||
this.imgVisible = false;
|
||||
},
|
||||
|
||||
@ -507,7 +543,8 @@ export default {
|
||||
});
|
||||
}
|
||||
mapPointList({
|
||||
type: this.bottomTipClick,
|
||||
type: this.elementDiv,
|
||||
classType: this.bottomTipClick,
|
||||
segmentId: this.roadSelect,
|
||||
}).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
@ -564,8 +601,8 @@ export default {
|
||||
features.push(feature);
|
||||
});
|
||||
const clusterSource = new Cluster({
|
||||
distance: this.mapZoom > 15 ? 0 : 130,
|
||||
minDistance: this.mapZoom > 15 ? 0 : 130,
|
||||
distance: this.mapZoom > 15 ? 0 : 100,
|
||||
minDistance: this.mapZoom > 15 ? 0 : 100,
|
||||
source: new VectorSource({
|
||||
features,
|
||||
}),
|
||||
@ -636,12 +673,14 @@ export default {
|
||||
|
||||
/* 获取地图线段点位信息 */
|
||||
getLinePoint() {
|
||||
mapPciList({ zoom: this.mapZoom }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.lineString = data;
|
||||
this.drawLine();
|
||||
}
|
||||
});
|
||||
if (!this.markLayerLines) {
|
||||
mapPciList().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.lineString = data;
|
||||
this.drawLine();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 绘制地图线段 */
|
||||
@ -696,13 +735,16 @@ export default {
|
||||
changeIconType(value) {
|
||||
if (this.bottomTipClick !== value) {
|
||||
this.bottomTipClick = value;
|
||||
this.getIconType();
|
||||
this.getCenterPiont();
|
||||
}
|
||||
},
|
||||
|
||||
/* 获取icon多选数据 */
|
||||
getIconType(value) {
|
||||
getIconType() {
|
||||
const type = this.elementDiv === "RoadScreen" ? "" : this.bottomTipClick;
|
||||
this.mapLogeList = {};
|
||||
getItemTypes({ type: value }).then(({ code, data }) => {
|
||||
getItemTypes({ classType: type }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.iconTypeList = data;
|
||||
this.iconType = data.map((item) => {
|
||||
@ -717,33 +759,39 @@ export default {
|
||||
|
||||
/* 传回来的地图图层 */
|
||||
getZoom(zoom) {
|
||||
if (zoom === "11" && this.mapZoom !== zoom) {
|
||||
this.mapZoom = zoom;
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.markLayerLines);
|
||||
this.markLayerLines = null;
|
||||
});
|
||||
this.getLinePoint();
|
||||
} else if (zoom === "10" && this.mapZoom !== zoom) {
|
||||
this.mapZoom = zoom;
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.markLayerLines);
|
||||
this.markLayerLines = null;
|
||||
});
|
||||
this.getLinePoint();
|
||||
this.mapZoom = zoom;
|
||||
// if (zoom === "11" && this.mapZoom !== zoom) {
|
||||
// this.mapZoom = zoom;
|
||||
// this.$nextTick(() => {
|
||||
// const map = this.$refs.roadMap.instance.get("map");
|
||||
// map.removeLayer(this.markLayerLines);
|
||||
// this.markLayerLines = null;
|
||||
// });
|
||||
// this.getLinePoint();
|
||||
// } else if (zoom === "10" && this.mapZoom !== zoom) {
|
||||
// this.mapZoom = zoom;
|
||||
// this.$nextTick(() => {
|
||||
// const map = this.$refs.roadMap.instance.get("map");
|
||||
// map.removeLayer(this.markLayerLines);
|
||||
// this.markLayerLines = null;
|
||||
// });
|
||||
// this.getLinePoint();
|
||||
// }
|
||||
if (this.clusters && zoom * 1 > 15) {
|
||||
this.clusters.getSource().setDistance(0);
|
||||
} else if (this.clusters && zoom * 1 <= 15) {
|
||||
this.clusters.getSource().setDistance(100);
|
||||
}
|
||||
},
|
||||
|
||||
/* 地图缩放完成事件 */
|
||||
mapMoveend(zoom) {
|
||||
if (this.clusters && zoom * 1 > 15) {
|
||||
this.clusters.getSource().setDistance(0);
|
||||
} else if (this.clusters && zoom * 1 <= 15) {
|
||||
this.clusters.getSource().setDistance(130);
|
||||
}
|
||||
},
|
||||
// mapMoveend(zoom) {
|
||||
// if (this.clusters && zoom * 1 > 15) {
|
||||
// this.clusters.getSource().setDistance(0);
|
||||
// } else if (this.clusters && zoom * 1 <= 15) {
|
||||
// this.clusters.getSource().setDistance(100);
|
||||
// }
|
||||
// },
|
||||
|
||||
/* 地图选中feature事件 */
|
||||
featureSelect(e) {
|
||||
@ -782,7 +830,10 @@ export default {
|
||||
changeElement(item) {
|
||||
if (this.elementDiv !== item) {
|
||||
this.elementDiv = item.component;
|
||||
this.roadSelect = "";
|
||||
if (item.component === "OverviewScreen") {
|
||||
/* 清空线段图层 */
|
||||
this.markLayerLines = null;
|
||||
this.leftModuleList = [
|
||||
{
|
||||
width: "100%",
|
||||
@ -828,6 +879,10 @@ export default {
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
// 地图右上角多选按钮隐藏
|
||||
this.showIconList = false;
|
||||
// 图层恢复
|
||||
this.mapZoom="";
|
||||
} else if (item.component === "RoadScreen") {
|
||||
this.leftModuleList = [
|
||||
{
|
||||
@ -867,6 +922,17 @@ export default {
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.getView().setZoom(10);
|
||||
map.getView().setCenter([123.30297096718999, 41.87942945541742]);
|
||||
});
|
||||
// 地图右上角多选按钮显示
|
||||
this.getIconType();
|
||||
this.showIconList = true;
|
||||
// 进行地图打点
|
||||
this.getCenterPiont();
|
||||
this.getLinePoint();
|
||||
} else if (item.component === "DiseaseScreen") {
|
||||
this.leftModuleList = [
|
||||
{
|
||||
@ -906,6 +972,17 @@ export default {
|
||||
class: "one",
|
||||
},
|
||||
];
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.getView().setZoom(10);
|
||||
map.getView().setCenter([123.30297096718999, 41.87942945541742]);
|
||||
});
|
||||
// 地图右上角多选按钮显示
|
||||
this.getIconType();
|
||||
this.showIconList = true;
|
||||
// 进行地图打点
|
||||
this.getCenterPiont();
|
||||
this.getLinePoint();
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -957,9 +1034,33 @@ export default {
|
||||
boxSizing: "border-box",
|
||||
};
|
||||
},
|
||||
|
||||
/* 初始化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("断开重连");
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
/* 发送消息 */
|
||||
sendMsg() {
|
||||
sendMsg(5555); //value是发送的值
|
||||
// this.value = "";
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timeFlag);
|
||||
closeWebsocket();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:16:30
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-24 17:09:27
|
||||
* @LastEditTime: 2024-11-14 15:49:52
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue
|
||||
* @Description: 总览大屏-病害趋势
|
||||
-->
|
||||
@ -44,12 +44,12 @@ export default {
|
||||
const yData1 = this.echartList.map((item) => {
|
||||
return item.A1000;
|
||||
});
|
||||
const yData2 = this.echartList.map((item) => {
|
||||
return item.A2001;
|
||||
});
|
||||
const yData3 = this.echartList.map((item) => {
|
||||
return item.A2000;
|
||||
});
|
||||
// const yData2 = this.echartList.map((item) => {
|
||||
// return item.A2001;
|
||||
// });
|
||||
// const yData3 = this.echartList.map((item) => {
|
||||
// return item.A2000;
|
||||
// });
|
||||
const yData4 = this.echartList.map((item) => {
|
||||
return item.A0;
|
||||
});
|
||||
@ -167,8 +167,66 @@ export default {
|
||||
},
|
||||
data: yData1,
|
||||
},
|
||||
// {
|
||||
// name: "块状修补(沥青)",
|
||||
// type: "line",
|
||||
// smooth: true,
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "#08B4A6",
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(8,180,166,0)",
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
// lineStyle: {
|
||||
// width: 1,
|
||||
// color: "#08B4A6",
|
||||
// },
|
||||
// // 设置节点样式
|
||||
// showSymbol: false,
|
||||
// symbol: "circle", // 可以选择 circle, diamond, pin 等
|
||||
// symbolSize: 10, // 节点大小
|
||||
// itemStyle: {
|
||||
// color: "#08B4A6",
|
||||
// },
|
||||
// data: yData2,
|
||||
// },
|
||||
// {
|
||||
// name: "条状修补(沥青)",
|
||||
// type: "line",
|
||||
// smooth: true,
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "#146fd7",
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(20, 111, 215,0)",
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
// lineStyle: {
|
||||
// width: 1,
|
||||
// color: "#146fd7",
|
||||
// },
|
||||
// // 设置节点样式
|
||||
// showSymbol: false,
|
||||
// symbol: "circle", // 可以选择 circle, diamond, pin 等
|
||||
// symbolSize: 10, // 节点大小
|
||||
// itemStyle: {
|
||||
// color: "#146fd7",
|
||||
// },
|
||||
// data: yData3,
|
||||
// },
|
||||
{
|
||||
name: "块状修补(沥青)",
|
||||
name: "横向裂缝",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
@ -194,64 +252,6 @@ export default {
|
||||
itemStyle: {
|
||||
color: "#08B4A6",
|
||||
},
|
||||
data: yData2,
|
||||
},
|
||||
{
|
||||
name: "条状修补(沥青)",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#146fd7",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(20, 111, 215,0)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "#146fd7",
|
||||
},
|
||||
// 设置节点样式
|
||||
showSymbol: false,
|
||||
symbol: "circle", // 可以选择 circle, diamond, pin 等
|
||||
symbolSize: 10, // 节点大小
|
||||
itemStyle: {
|
||||
color: "#146fd7",
|
||||
},
|
||||
data: yData3,
|
||||
},
|
||||
{
|
||||
name: "横向裂缝",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#994EFF",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(153,78,255,0)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "#994EFF",
|
||||
},
|
||||
// 设置节点样式
|
||||
showSymbol: false,
|
||||
symbol: "circle", // 可以选择 circle, diamond, pin 等
|
||||
symbolSize: 10, // 节点大小
|
||||
itemStyle: {
|
||||
color: "#994EFF",
|
||||
},
|
||||
data: yData4,
|
||||
},
|
||||
{
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-08 09:40:18
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-13 13:23:21
|
||||
* @LastEditTime: 2024-11-14 15:54:12
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\inspection-vehicles.vue
|
||||
* @Description: 总览大屏-巡检车辆
|
||||
-->
|
||||
@ -29,6 +29,7 @@
|
||||
><el-button
|
||||
slot="append"
|
||||
icon="el-icon-search"
|
||||
clearable
|
||||
@click="getTableData"
|
||||
></el-button
|
||||
></template>
|
||||
@ -42,7 +43,7 @@
|
||||
height="285"
|
||||
>
|
||||
<el-table-column prop="plateNo" label="车牌号码"> </el-table-column>
|
||||
<el-table-column prop="serverStatus" label="状态"> </el-table-column>
|
||||
<el-table-column prop="status" label="状态"> </el-table-column>
|
||||
<el-table-column prop="pci" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-popover
|
||||
@ -57,19 +58,19 @@
|
||||
<span class="value">{{ scope.row.plateNo }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="name">设备编号</span>
|
||||
<span class="name">设备编号:</span>
|
||||
<span class="value">{{ scope.row.appid }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="name">车辆状态</span>
|
||||
<span class="name">车辆状态:</span>
|
||||
<span class="value">{{ scope.row.status }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="name">网络连接:</span>
|
||||
<span class="value"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="name">网络连接</span>
|
||||
<span class="value"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="name">设备状态</span>
|
||||
<span class="name">设备状态:</span>
|
||||
<span class="value"></span>
|
||||
</div>
|
||||
</div>
|
||||
@ -149,7 +150,7 @@ export default {
|
||||
methods: {
|
||||
/* 获取表格数据 */
|
||||
getTableData() {
|
||||
getCarList().then(({ code, data }) => {
|
||||
getCarList({ no: this.tableInput }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.carNum = data.total;
|
||||
this.tableTotal = data.total;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:25:29
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-13 14:01:48
|
||||
* @LastEditTime: 2024-11-14 16:16:56
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\work-order.vue
|
||||
* @Description: 总览大屏-巡查里程
|
||||
-->
|
||||
@ -11,20 +11,47 @@
|
||||
<div class="content">
|
||||
<div class="patrol-div">
|
||||
<div class="value">
|
||||
<span>{{ formatNumber(patrolObject.len) }}</span
|
||||
<span @click="showDetail">{{ formatNumber(patrolObject.len) }}</span
|
||||
>km
|
||||
</div>
|
||||
</div>
|
||||
<div class="patrol-div">
|
||||
<div class="value">
|
||||
<span>{{ formatTime(patrolObject.time) }}</span
|
||||
<span @click="showDetail">{{ formatTime(patrolObject.time) }}</span
|
||||
>h
|
||||
</div>
|
||||
</div>
|
||||
<!-- 巡查里程弹窗 -->
|
||||
<el-dialog
|
||||
title="巡查里程总览"
|
||||
:visible.sync="showDialogVisible"
|
||||
width="50rem"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="screenCancel"
|
||||
>
|
||||
<div class="patrol-content">
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="companySelect"
|
||||
placeholder="请选择分公司"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in companyList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<div ref="patrolChart" class="dialog-div"></div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { getMileage } from "@/api/xj/screen/disease-screen";
|
||||
export default {
|
||||
name: "PatrolOrder",
|
||||
@ -32,6 +59,12 @@ export default {
|
||||
return {
|
||||
// 累计里程数据
|
||||
patrolObject: {},
|
||||
// 弹窗显隐控制
|
||||
showDialogVisible: false,
|
||||
// 公司选择绑定
|
||||
companySelect: "",
|
||||
// 公司下拉绑定
|
||||
companyList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -62,7 +95,7 @@ export default {
|
||||
},
|
||||
|
||||
/* 累计时长修改 */
|
||||
formatTime(num){
|
||||
formatTime(num) {
|
||||
if (num >= 100000000) {
|
||||
// 超过1亿显示 x.xx亿
|
||||
return (num / 100000000).toFixed(2) + "亿";
|
||||
@ -73,7 +106,161 @@ export default {
|
||||
// 小于1万直接返回原数字
|
||||
return num;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/* 打开弹窗方法 */
|
||||
showDetail() {
|
||||
this.showDialogVisible = true;
|
||||
this.getChartData();
|
||||
},
|
||||
|
||||
/* 请求弹窗数据 */
|
||||
getChartData() {
|
||||
this.$nextTick(() => {
|
||||
this.drawChart();
|
||||
});
|
||||
},
|
||||
|
||||
/* 绘制echart图 */
|
||||
drawChart() {
|
||||
if (this.$refs.patrolChart) {
|
||||
const chart = echarts.init(this.$refs.patrolChart);
|
||||
chart.setOption({
|
||||
color: [
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#8DF2FF" }, // 0% 处的颜色
|
||||
{ offset: 1, color: "#82B3FD" }, // 100% 处的颜色
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#8087FF" }, // 0% 处的颜色
|
||||
{ offset: 1, color: "#532EFF" }, // 100% 处的颜色
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#FFB3B3" }, // 0% 处的颜色
|
||||
{ offset: 1, color: "#FF2E2E" }, // 100% 处的颜色
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#F7DA15" }, // 0% 处的颜色
|
||||
{ offset: 1, color: "#FCC105" }, // 100% 处的颜色
|
||||
],
|
||||
},
|
||||
],
|
||||
title: {
|
||||
text: "",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
show: true,
|
||||
confine: false,
|
||||
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
||||
borderColor: "rgba(75, 253, 238, 0.4)",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "0%",
|
||||
bottom: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
orient: "horizontal",
|
||||
left: "right",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: "#fff",
|
||||
formatter: (params) => {
|
||||
if (params.length > 4) {
|
||||
return `${params.slice(0, 4)}...`;
|
||||
}
|
||||
return params;
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
data: ["dsds", "4ds", "5454", "sff"],
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,0.65)",
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.2)",
|
||||
},
|
||||
},
|
||||
name: "单位：个",
|
||||
nameTextStyle: {
|
||||
color: "rgba(255,255,255,0.65)",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "巡查里程",
|
||||
type: "bar",
|
||||
data: [10, 25, 23, 58],
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "巡查时长",
|
||||
type: "bar",
|
||||
data: [10, 25, 23, 58],
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 弹窗关闭 */
|
||||
screenCancel() {
|
||||
this.showDialogVisible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -101,11 +288,84 @@ export default {
|
||||
|
||||
.value {
|
||||
span {
|
||||
cursor: pointer;
|
||||
font-family: "DouYu";
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗内容样式
|
||||
.patrol-content {
|
||||
height: 30rem;
|
||||
padding: 0 2rem;
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 12rem;
|
||||
|
||||
.el-input .el-select__caret {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.el-input--medium .el-input__inner {
|
||||
height: 1.5rem;
|
||||
background-color: transparent;
|
||||
color: #89c5e8;
|
||||
border-color: #6991cd;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
background-color: #102649;
|
||||
border-color: #08204f;
|
||||
.el-scrollbar {
|
||||
.el-select-dropdown__wrap {
|
||||
.el-scrollbar__view {
|
||||
.el-select-dropdown__item {
|
||||
color: #aaabb8;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select-dropdown__list {
|
||||
background-color: #102649;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 修改弹窗样式 */
|
||||
::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>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 09:42:49
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-13 13:38:46
|
||||
* @LastEditTime: 2024-11-14 15:48:21
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\today-inspection.vue
|
||||
* @Description: 总览大屏-今日巡查
|
||||
-->
|
||||
@ -10,10 +10,10 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="today-left">
|
||||
<span>{{ today }}</span>
|
||||
<span @click="showDialog('1')">{{ today }}</span>
|
||||
</div>
|
||||
<div class="today-right">
|
||||
<div class="right-sum" @click="showDialog">
|
||||
<div class="right-sum" @click="showDialog('2')">
|
||||
<span>{{ all }}</span
|
||||
>个
|
||||
</div>
|
||||
@ -33,8 +33,40 @@
|
||||
@close="screenCancel"
|
||||
>
|
||||
<div class="today-content">
|
||||
<div ref="leftChart" class="dialog-div"></div>
|
||||
<div ref="rightChart" class="dialog-div"></div>
|
||||
<div class="today-select">
|
||||
<div>
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="roadSelect"
|
||||
placeholder="请选择路段"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roadList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div>
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="companySelect"
|
||||
placeholder="请选择分公司"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in companyList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="today-bottom">
|
||||
<div ref="leftChart" class="dialog-div"></div>
|
||||
<div ref="rightChart" class="dialog-div"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
@ -53,10 +85,20 @@ export default {
|
||||
all: "0",
|
||||
// 增长率
|
||||
scale: "0",
|
||||
// 新增/当前总数区分
|
||||
clickTip: "",
|
||||
// 弹窗显隐控制
|
||||
showDialogVisible: false,
|
||||
// 左侧路段选择绑定
|
||||
roadSelect: "",
|
||||
// 左侧路段下拉数据
|
||||
roadList: [],
|
||||
// 左侧图表数据
|
||||
leftChartData: [],
|
||||
// 右侧公司选择绑定
|
||||
companySelect: "",
|
||||
// 右侧公司选择下拉
|
||||
companyList: [],
|
||||
// 右侧图表数据
|
||||
rightChartData: [],
|
||||
};
|
||||
@ -77,7 +119,8 @@ export default {
|
||||
},
|
||||
|
||||
/* 点击打开弹窗 */
|
||||
showDialog() {
|
||||
showDialog(item) {
|
||||
this.clickTip = item;
|
||||
this.getChartData();
|
||||
this.showDialogVisible = true;
|
||||
},
|
||||
@ -241,7 +284,7 @@ export default {
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "道桥",
|
||||
name: "桥隧",
|
||||
type: "bar",
|
||||
data: y2Data,
|
||||
},
|
||||
@ -389,7 +432,7 @@ export default {
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "道桥",
|
||||
name: "桥隧",
|
||||
type: "bar",
|
||||
data: y2Data,
|
||||
},
|
||||
@ -409,6 +452,7 @@ export default {
|
||||
|
||||
/* 关闭 弹窗事件 */
|
||||
screenCancel() {
|
||||
this.clickTip = "";
|
||||
this.showDialogVisible = false;
|
||||
},
|
||||
},
|
||||
@ -435,6 +479,7 @@ export default {
|
||||
background-position: 100% 60%;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
@ -520,11 +565,74 @@ export default {
|
||||
.today-content {
|
||||
height: 30rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.dialog-div {
|
||||
width: 50%;
|
||||
.today-select {
|
||||
width: 100%;
|
||||
// height: 10%;
|
||||
display: flex;
|
||||
|
||||
> div {
|
||||
width: 50%;
|
||||
padding: 0 2rem;
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 12rem;
|
||||
|
||||
.el-input .el-select__caret {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.el-input--medium .el-input__inner {
|
||||
height: 1.5rem;
|
||||
background-color: transparent;
|
||||
color: #89c5e8;
|
||||
border-color: #6991cd;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
background-color: #102649;
|
||||
border-color: #08204f;
|
||||
.el-scrollbar {
|
||||
.el-select-dropdown__wrap {
|
||||
.el-scrollbar__view {
|
||||
.el-select-dropdown__item {
|
||||
color: #aaabb8;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select-dropdown__list {
|
||||
background-color: #102649;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.today-bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 1rem;
|
||||
display: flex;
|
||||
|
||||
.dialog-div {
|
||||
width: 50%;
|
||||
height: 90%;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-01 17:25:06
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-04 16:29:02
|
||||
* @LastEditTime: 2024-11-14 15:00:35
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\image-dialog.vue
|
||||
* @Description: 病害确认-影像模式弹窗
|
||||
-->
|
||||
@ -157,8 +157,9 @@ import {
|
||||
getSegment,
|
||||
getDefectStatus,
|
||||
mergeDefect,
|
||||
listDefect,
|
||||
} from "@/api/xj/confirmation";
|
||||
import { defeaseList, getItemTypes } from "@/api/xj/screen/index";
|
||||
import { getItemTypes } from "@/api/xj/screen/index";
|
||||
export default {
|
||||
name: "ImageDialog",
|
||||
props: {},
|
||||
@ -260,15 +261,19 @@ export default {
|
||||
|
||||
/* 获取左侧图片列表 */
|
||||
getList() {
|
||||
console.log(11);
|
||||
|
||||
this.loading = true;
|
||||
const data = {
|
||||
...this.imgForm,
|
||||
...this.params,
|
||||
};
|
||||
defeaseList(data)
|
||||
.then((response) => {
|
||||
this.defectData = response.data;
|
||||
this.loading = false;
|
||||
listDefect(data)
|
||||
.then(({ code,rows }) => {
|
||||
if (code === 200) {
|
||||
this.defectData = rows;
|
||||
this.loading = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-14 13:59:51
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-07 16:46:43
|
||||
* @LastEditTime: 2024-11-14 15:26:15
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\surface-management\index.vue
|
||||
* @Description: 巡检管理-路面病害对比
|
||||
-->
|
||||
@ -267,6 +267,7 @@ export default {
|
||||
return it.snapshotId === item.data.snapshotId;
|
||||
});
|
||||
this.dialogImgLeft = leftImg[0];
|
||||
|
||||
}
|
||||
this.viewVisible = true;
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user