odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into trp_dev

Browse Source
This commit is contained in:
trp
2023-12-30 13:25:03 +08:00
parent 5ac68dca37 7588c4eda2
commit 697773bae4
16 changed files with 356 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/content/airInfo/AirInfo.vue
View File

@@ -6,15 +6,16 @@
<div class="input-fan"><span>风速</span>{{ windSpeed }}m/s</div>
</div>
</div>
<item-info
v-for="item in airList"
:key="item.equipmentId"
:wp="item"
:icon="item.icon"
:name="item.name"
:unit="item.unit"
@click="handleOpenAirChart(item)"
/>
<item-info
v-for="item in airList"
:key="item.equipmentId"
:wp="item"
:icon="item.icon"
:name="item.name"
:unit="item.unit"
@click="handleOpenAirChart(item)"
/>
<div class="digital-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isWindSpeedVisited" :title="'风速监控数据'" width="2175px" :modal="false">
<div class="left-top-icon"></div>
@@ -87,7 +88,7 @@ watch(() => props.list, (now) => {
})
}, {deep: true});
watch(() => props.airData, (now) => {
if(now.sensorList===null){
if(now.sensorList.length===0){
airList.value=[]
}else {
getAirInfo(now.sensorList)

35
src/components/content/fanInfo/FanInfo.vue
View File

@@ -64,13 +64,13 @@
</div>
</div>
</div>
<div class="current" @click="handleOpenChart(item)">
<div class="current" @click="handleOpenChart(item,index)">
<fan-info-item :wp="transducerData[index]" />
</div>
</div>
</div>
<div class="digital-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isVisited" :title="'电流监控数据'" width="2175px"
<el-dialog :close-on-click-modal="false" v-model="isVisited" :title="changeNum(fanIndex)+'号风机电流监控数据'" width="2175px"
:modal="false">
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
@@ -111,7 +111,9 @@ const stateA = ref(false)
const stateB = ref(false)
const stateC = ref(false)
const isVisited = ref(false)
const fanIndex = ref(0)
let myEcharts = reactive({});
watch(() => props.transducerData, (now) => {
getTransData(now.frequencyChangerList)
}, {deep: true});
@@ -155,8 +157,9 @@ const getFanInfo = (equipmentId) => {
}
})
}
const handleOpenChart = (item) => {
const handleOpenChart = (item,index) => {
getFanInfo(item.equipmentId)
fanIndex.value=index+1
}
const getTransData = (data) => {
let tranObj = {}
@@ -505,7 +508,6 @@ input[type="number"] {
:deep( .el-radio__label) {
font-size: 28px;
font-family: MicrosoftYaHei;
color: #38cafb;
line-height: 37px;
}
@@ -520,17 +522,14 @@ input[type="number"] {
left: 68px;
padding: 10px;
background-image: url(../../../assets/images/fanInfo/bg.png);
//clip-path: polygon(0% 0%, 40% 0%, 48% 15%, 100% 15%, 100% 100%, 0% 100%);
color: #2fb0df;
box-sizing: border-box;
.title {
width: 40%;
text-align: left;
font-size: 20px;
padding: 0px 0px 0px 62px;
padding: 0 0 0 62px;
font-size: 32px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #38cafb;
line-height: 42px;
@@ -560,7 +559,6 @@ input[type="number"] {
.echart::after {
content: "Hz";
font-size: 24px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
line-height: 31px;
@@ -574,7 +572,6 @@ input[type="number"] {
width: 39px;
height: 140px;
font-size: 26px;
font-family: MicrosoftYaHei;
color: #38cafb;
line-height: 35px;
text-align: center;
@@ -598,7 +595,6 @@ input[type="number"] {
flex-direction: column;
justify-content: center;
font-size: 26px;
font-family: MicrosoftYaHei;
color: #38cafb;
line-height: 35px;
gap: 40px;
@@ -644,7 +640,6 @@ input[type="number"] {
border-radius: 22px;
border: 2px solid #0f82af;
overflow: hidden;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #127399;
line-height: 35px;
@@ -662,9 +657,8 @@ input[type="number"] {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0px 20px;
padding: 0 20px;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #38cafb;
line-height: 37px;
gap: 33px;
@@ -683,7 +677,6 @@ input[type="number"] {
top: 50%;
transform: translateY(-50%);
font-size: 28px;
font-family: MicrosoftYaHei;
color: #38cafb;
line-height: 37px;
}
@@ -696,7 +689,6 @@ input[type="number"] {
margin-left: 14px;
outline: none;
font-size: 28px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #38cafb;
line-height: 37px;
@@ -714,7 +706,6 @@ input[type="number"] {
padding-top: 30px;
padding-right: 25px;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #FFFFFF;
.fenliu-icon {
@@ -737,7 +728,6 @@ input[type="number"] {
margin-left: 14px;
outline: none;
font-size: 28px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #38cafb;
line-height: 37px;
@@ -751,7 +741,6 @@ input[type="number"] {
bottom: 0;
transform: translateY(-50%);
font-size: 28px;
font-family: MicrosoftYaHei;
color: #38cafb;
line-height: 37px;
}
@@ -761,13 +750,17 @@ input[type="number"] {
.current {
margin-top: 30px;
margin-right: 20px;
margin-left: 26px;
height: 37px;
//height: 37px;
font-size: 28px;
color: #FFFFFF;
cursor: pointer;
&:hover{
background-color: #2E5589;
border-radius: 6px;
}
}
}
}
}

7
src/components/content/fanInfo/FanInfoItem.vue
View File

@@ -110,15 +110,16 @@ let isWaringC = computed(() => {
display: flex;
align-items: center;
width: 100%;
padding: 6px 38px 7px 10px;
padding: 6px 0 7px 10px;
margin-bottom: 17px;
&:hover {
background: #2E5589;
border-radius: 6px;
//background: #2E5589;
//border-radius: 6px;
}
&:last-child {
margin-bottom: 0;
.label {
span {
margin: 0 5px 0 14px;

105
src/components/content/tunnelScene/PreviewScene.vue
View File

@@ -47,15 +47,14 @@ import {
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { onMounted, reactive, ref } from "vue";
import { onMounted, reactive, ref, toRaw, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { useModelSceneStore } from "@/store/modelSceneStore";
import { toRaw } from "vue"
import { deleteEquipment, initData } from "./request";
// 获取html标签跟随组件dom
const content = ref(null);
const info = ref(null);
const edit = ref(null);
const store = useModelSceneStore();
let modelList = ref(null);
let demo; //定义demo全局变量
// const loader = new OBJLoader();
const loader = new OBJLoader();
@@ -69,6 +68,16 @@ const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是
let isedit = ref(params.isedit)
// watch(
// () => params.tunnelId,
// (now) => {
// params.tunnelId = now
// console.log(params.tunnelId);
// },
// { deep: true }
// )
onMounted(handleMounted);
// 挂载后回调
async function handleMounted() {
@@ -89,7 +98,7 @@ async function handleMounted() {
watch(
() => params.tunnelId,
async () => {
const text = await store.initData(params.tunnelId);
const text = await initData(params.tunnelId);
}
);
// 初始化设备模型
@@ -100,14 +109,38 @@ async function handleMounted() {
map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
// 给对象初加载设备模型
demo.initDevicesModel(map);
const equipmentList = await store.getEquipmentList();
demo.previewtunnelModeInit(equipmentList);
// previewEquInfProcess(equipmentList)
// const equipmentList = await store.getEquipmentList();
modelList.value = await initData(params.tunnelId);
// console.log("init", params.tunnelId);
demo.previewtunnelModeInit(modelList.value);
watch(
() => params.tunnelId,
(now) => {
params.tunnelId = now
// console.log(params.tunnelId);
checkTunnelInit(modelList.value)
demo.previewtunnelModeInit(modelList.value);
},
{ deep: true }
)
// demo.previewtunnelModeInit(equipmentList);
// previewEquInfProcess(modelList.value, targetP.value)
} catch (err) {
console.log(err);
}
}
function checkTunnelInit(equipmentList) {
equipmentList.forEach((item) => {
let equipment = toRaw(item)
console.log("我要清理掉之前的设备！！！");
console.log(equipment);
console.log(demo.scene.getObjectByName(equipment.position));
demo.removeEquipment(demo.scene.getObjectByName(equipment.position));
});
}
// 每个模型加载回调
function loadModel(path) {
return new Promise((resolve, reject) => {
@@ -163,46 +196,31 @@ function lClickCallback(demo) {
}
let pointNum = ref(0);
let targetP;
let targetP = ref({});
// 右键点击附着点后调函数
function rClickCallback(demo) {
function editDev(targetPoint = null) {
hasDevice = targetPoint.hasDevice;
targetP = targetPoint;
//点击之后马上调用这个函数，变成回调，然后进行处理处理在传给preview表单
const equipmentList = store.getEquipmentList().then((result) => {
previewEquInfProcess(result, targetP)
});
hasDevice.value = targetPoint.hasDevice;
targetP.value = targetPoint;
const equipmentList = initData(params.tunnelId)
equipmentList.then((result) => {
previewEquInfProcess(result, targetP.value)
})
pointNum.value = Number(
targetPoint.name.substring(
targetPoint.name.indexOf("_") + 1,
targetPoint.name.lastIndexOf("_")
) - 1
);
if (!targetPoint.info) return;
editDevInfo(targetPoint.info);
}
demo.addFunction("editDev", editDev);
}
// 添加设备
function handleAddEqu(formInfo) {
if (!formInfo.equipmentType) {
ElMessage({
message: "请选择传感器！",
type: "warning",
});
return;
}
//表单信息
//这里利用处理请求
demo.addEquipment(targetP, formInfo);
ElMessage({
message: "添加成功！",
type: "success",
});
demo.addEquipment(targetP.value, formInfo);
}
const centerDialogVisible = ref(false);
@@ -219,12 +237,22 @@ function handleRemoveEqu() {
}
// 对话框确认删除
function handleConfirmAddEqu() {
demo.removeEquipment(targetP);
centerDialogVisible.value = false;
ElMessage({
message: "删除成功！",
type: "success",
});
console.log("target:", targetP.value.info);
deleteEquipment(targetP.value.info.equipmentId, pointGap)
.then((res) => {
demo.removeEquipment(targetP.value);
centerDialogVisible.value = false;
ElMessage({
message: "删除成功！",
type: "success",
});
})
.catch((res) => {
ElMessage({
message: "删除失败！",
type: "warning",
});
});
}
// 处理取消关闭编辑框事件
function handleCancel() {
@@ -242,11 +270,10 @@ let equipmentValue = ref(0)
function previewEquInfProcess(equipmentList, targetP) {
for (const equipment of equipmentList) {
// console.log(equipment);
if (equipment.position == targetP.name) {
equipmentType.value = equipment.equipmentType
//需要将获取到的设备列表进行序列化
equipmentName.value = toRaw(equipment.chooseEquipment).label
equipmentName.value = equipment.equipmentName
equipmentValue.value = equipment.threshold
if (equipmentType.value == 'frequency') {
equipmentType.value = '风机'

1
src/components/content/tunnelScene/request/index.js
View File

@@ -101,6 +101,7 @@ export const deleteEquipment = (equipmentId, pointGap) => {
})
.then((res) => {
if (res?.code === 1000) {
console.log("删除成功");
modelEquipmentList = modelEquipmentList.filter(
(item) => item.equipmentId != equipmentId
);

128
src/components/content/tunnelScene/sceneClass/editEquipment/index.js
View File

@@ -36,7 +36,7 @@ function addEquipment(targetPoint, formInfo) {
// function handleValveEqu(targetPoint, equipmentInfo) {
// }
let allline = new Array
// 其他传感器
function handleOtherEqu(targetPoint, equipmentInfo) {
const equMesh = this.equMap.get("equ_sensors").clone();
@@ -67,41 +67,24 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
targetPoint.scale.set(0.03, 0.06, 0.05);
this.scene.add(equMesh);
targetPoint.visible = false;
// targetPoint.hasWall = true;
// //处理风压阀的代码片段
// let lineIndex = targetPoint.name.slice(7, 9);
// for (let line = Number(lineIndex); line <= 20; line++) {
// if (line < 10) {
// let wall = "wall_" + "0" + line;
// this.scene.getObjectByName(wall).visible = true;
// let point = "point_" + "00" + line + "_tc";
// this.scene.getObjectByName(point).visible = false;
// this.scene.getObjectByName(point).layers.set(-2);
// if (this.scene.getObjectByName(point).hasDevice == true) {
// let EquID = this.scene.getObjectByName(point).info.id;
// this.scene.getObjectById(EquID).visible = false;
// }
// } else if (line >= 10) {
// let wall = "wall_" + line;
// this.scene.getObjectByName(wall).visible = true;
// let point = "point_" + "0" + line + "_tc";
// this.scene.getObjectByName(point).visible = false;
// this.scene.getObjectByName(point).layers.set(-2);
// if (this.scene.getObjectByName(point).hasDevice == true) {
// let EquID = this.scene.getObjectByName(point).info.id;
// this.scene.getObjectById(EquID).visible = false;
// }
targetPoint.hasWall = true;
//处理风压阀的代码片段
let lineIndex = targetPoint.name.slice(7, 9)
if (allline.includes(Number(lineIndex))) {
allline.slice(array.indexOf(lineIndex), 1)
console.log('dadad');
} else {
allline.push(Number(lineIndex))
}
console.log(allline);
// console.log(allline);
// allline.forEach((item, index, array) => {
// if (array.includes(item)) {
// array.slice(array.indexOf(item), 1)
// array.slice(array.indexOf(item), 1)
// console.log(array);
// }
// //处理21行的设备和附着点
// let point = "point_" + "0" + 21 + "_tc";
// this.scene.getObjectByName(point).visible = false;
// this.scene.getObjectByName(point).layers.set(-2);
// if (this.scene.getObjectByName(point).hasDevice == true) {
// let EquID = this.scene.getObjectByName(point).info.id;
// this.scene.getObjectById(EquID).visible = false;
// }
// }
// this.scene.getObjectByName('wall_01').visible = true
// })
// console.log(this.scene);
// 保存该设备模型id，后期直接从附附着点进行删除
targetPoint.info = {
@@ -154,43 +137,44 @@ function handleFanEqu(
function removeEquipment(targetPoint) {
//删除设备这里需要再进行处理，就是根据附着点（附着点一定保存了当前添加设备的信息了）判断是不是分压阀，然后继续一样的隐藏
if (!targetPoint.hasDevice) return;
if (targetPoint.hasWall == true) {
let lineIndex = targetPoint.name.slice(7, 9);
for (let line = Number(lineIndex); line <= 20; line++) {
if (line < 10) {
let wall = "wall_" + "0" + line;
this.scene.getObjectByName(wall).visible = false;
let point = "point_" + "00" + line + "_tc";
console.log(this.scene.getObjectByName(point));
this.scene.getObjectByName(point).visible = true;
this.scene.getObjectByName(point).layers.set(0);
if (this.scene.getObjectByName(point).hasDevice == true) {
this.scene.getObjectByName(point).visible = false;
let EquID = this.scene.getObjectByName(point).info.id;
this.scene.getObjectById(EquID).visible = true;
}
} else if (line >= 10) {
let wall = "wall_" + line;
this.scene.getObjectByName(wall).visible = false;
let point = "point_" + "0" + line + "_tc";
this.scene.getObjectByName(point).visible = true;
this.scene.getObjectByName(point).layers.set(0);
if (this.scene.getObjectByName(point).hasDevice == true) {
this.scene.getObjectByName(point).visible = false;
let EquID = this.scene.getObjectByName(point).info.id;
this.scene.getObjectById(EquID).visible = true;
}
}
//处理21行的设备和附着点
let point = "point_" + "0" + 21 + "_tc";
this.scene.getObjectByName(point).visible = true;
this.scene.getObjectByName(point).layers.set(0);
if (this.scene.getObjectByName(point).hasDevice == true) {
let EquID = this.scene.getObjectByName(point).info.id;
this.scene.getObjectById(EquID).visible = true;
}
}
}
// if (targetPoint.hasWall == true) {
// let lineIndex = targetPoint.name.slice(7, 9);
// for (let line = Number(lineIndex); line <= 20; line++) {
// if (line < 10) {
// let wall = "wall_" + "0" + line;
// this.scene.getObjectByName(wall).visible = false;
// let point = "point_" + "00" + line + "_tc";
// console.log(this.scene.getObjectByName(point));
// this.scene.getObjectByName(point).visible = true;
// this.scene.getObjectByName(point).layers.set(0);
// if (this.scene.getObjectByName(point).hasDevice == true) {
// this.scene.getObjectByName(point).visible = false;
// let EquID = this.scene.getObjectByName(point).info.id;
// this.scene.getObjectById(EquID).visible = true;
// }
// } else if (line >= 10) {
// let wall = "wall_" + line;
// this.scene.getObjectByName(wall).visible = false;
// let point = "point_" + "0" + line + "_tc";
// this.scene.getObjectByName(point).visible = true;
// this.scene.getObjectByName(point).layers.set(0);
// if (this.scene.getObjectByName(point).hasDevice == true) {
// this.scene.getObjectByName(point).visible = false;
// let EquID = this.scene.getObjectByName(point).info.id;
// this.scene.getObjectById(EquID).visible = true;
// }
// }
// //处理21行的设备和附着点
// let point = "point_" + "0" + 21 + "_tc";
// this.scene.getObjectByName(point).visible = true;
// this.scene.getObjectByName(point).layers.set(0);
// if (this.scene.getObjectByName(point).hasDevice == true) {
// let EquID = this.scene.getObjectByName(point).info.id;
// this.scene.getObjectById(EquID).visible = true;
// }
// }
// }
console.log("测试是不是删除了");
const mesh = this.scene.getObjectById(targetPoint.info.id);
this.scene.remove(mesh);
targetPoint.visible = true;

9
src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js
View File

@@ -1,3 +1,4 @@
export default function previewtunnelModeInit(equipmentList) {
//初始化将墙壁隐藏起来
// for (let line = 1; line <= 20; line++) {
@@ -9,14 +10,8 @@ export default function previewtunnelModeInit(equipmentList) {
// this.scene.getObjectByName(wall).visible = false
// }
// }
equipmentList.forEach((item) => {
const formInfo = {
equipmentType: item.equipmentType, //设备类型
chooseEquipment: item.chooseEquipment, //设备选择(设备名称)
threshold: item.threshold,
};
this.addEquipment(this.scene.getObjectByName(item.position), formInfo);
this.addEquipment(this.scene.getObjectByName(item.position), item);
});
//进行预览和编辑模式的一些操作
if (this.isedit == false) {

29
src/components/manageBtn/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="manage-btn">
<div v-for="(item,index) in btnList" :key="item.name" class="btn-box" @click="select(index)">
<div v-for="(item,index) in list" :key="item.name" class="btn-box" @click="select(item,index)">
<div :style="{ backgroundImage:'url(' +getImageUrl(item.icon)+')' }"></div>
<div :class="{'select-active':selectButton===index}">{{ item.name }}</div>
</div>
@@ -18,17 +18,17 @@ const props = defineProps({
default: []
},
})
watch(() => props.list, (now) => {
let newArr=[]
btnList.value.forEach((btnList) => {
now.forEach((item) => {
if (btnList.route==item) {
newArr.push(btnList)
}
})
})
btnList.value=newArr
}, {deep: true});
// watch(() => props.list, (now) => {
// let newArr=[]
// btnList.value.forEach((btnList) => {
// now.forEach((item) => {
// if (btnList.route==item) {
// newArr.push(btnList)
// }
// })
// })
// btnList.value=newArr
// }, {deep: true});
const emit = defineEmits(["update:modelValue", "select"]);
const btnList = ref([
{
@@ -56,14 +56,15 @@ const btnList = ref([
// name: '模拟仿真'
// },
])
const newList=ref([])
const selectButton = ref(props.modelValue);
const getImageUrl = (name) => {
return new URL(`../../assets/images/topAndDown/${name}`, import.meta.url).href
}
const select = (index) => {
const select = (item,index) => {
if (selectButton.value === index) return;
selectButton.value = index;
emit("update:modelValue", index);
emit("select", index);
emit("select", item.name);
};
</script>

11
src/router/index.js
View File

@@ -85,6 +85,7 @@ const router = createRouter({
});
router.beforeEach((to, form, next) => {
NProgress.start()
console.log('token-----',getToken())
if (!getToken()) {
if (to.path === '/login') {
next()
@@ -94,12 +95,12 @@ router.beforeEach((to, form, next) => {
}
} else {
console.log('有token')
if (to.path === '/login') {
next('/')
NProgress.done()
} else {
// if (to.path === '/login') {
// next('/')
// NProgress.done()
// } else {
next()
}
// }
}
})
router.afterEach(() => {

14
src/utils/request.js
View File

@@ -68,13 +68,13 @@ serveice.interceptors.response.use(response=>{
window.location = '/login'
})
return Promise.reject('会话已过期,请重新登录')
case 402:
break;
case 403:
ElMessage.warning('禁止访问')
removeToken()
window.location = '/forbidden'
break;
// case 402:
// break;
// case 403:
// ElMessage.warning('禁止访问')
// removeToken()
// window.location = '/forbidden'
// break;
case 404:
ElMessage.warning('不存在的地址')
break;

4
src/views/edit/edit.vue
View File

@@ -93,8 +93,8 @@ const handleSave = async () => {
tunnelName: form.value.tunnelName,
serialNumber: form.value.serialNumber,
remarks: form.value.remarks,
// constructionLength:form.value.constructionLength,
constructionLength: 500,
constructionLength:form.value.constructionLength,
// constructionLength: 500,
tunnelLength: form.value.totalLength,
isDefault: form.value.isDefault,
modelEquipmentList: await store.getEquipmentList(),

4
src/views/login/index.vue
View File

@@ -45,9 +45,9 @@ import {User, Lock, Key} from "@element-plus/icons-vue";
const router = useRouter();
const authStore = useAuthStore();
const loginForm = reactive({
username: "admin",
// username: "admin",
password: "123456",
// username: "",
username: "admin",
// password: "",
code: "",
uuid: "",

6
src/views/site/index.vue
View File

@@ -169,7 +169,11 @@ const getList = () => {
...pageInfo
}).then((res) => {
total.value = res.data.total;
showAddIcon.value = total.value % 6!==0;
if(total.value==0){
}else {
showAddIcon.value = total.value % 6!==0;
}
showFirst.value = total.value / pageInfo.pageSize > 1;
res.data.rows.map(item => {
if (item.tunnelList === null || item.tunnelList.length === 0) {

72
src/views/tunnel-manage/index.vue
View File

@@ -5,9 +5,9 @@
<div class="back-icon"></div>
<span>返回</span>
</div>
<div class="site-name">
{{ siteName }}
</div>
<!-- <div class="site-name">-->
<!-- {{ siteName }}-->
<!-- </div>-->
<div class="tunnel-title"></div>
<div class="all-del-btn">
<div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
@@ -259,13 +259,13 @@ const pageInfo = reactive({
});
const total = ref(10);
onMounted(() => {
getSiteDetail(siteId).then((res) => {
siteName.value = res.data.siteName
});
// getSiteDetail(siteId).then((res) => {
// siteName.value = res.data.siteName
// });
})
const handleGoSiteOrIndex = () => {
if (type === 's') {
router.push('/site/'+userId)
router.push('/site/' + userId)
} else if (type === 'i') {
router.push('/')
}
@@ -279,16 +279,18 @@ const getList = () => {
total.value = res.data.total
tunnelList.value = res.data.rows
showFirst.value = total.value / pageInfo.pageSize >= 1;
} else {
ElMessage.warning(res.msg)
}
})
}
getList()
const firstPage=()=>{
const firstPage = () => {
pageInfo.pageNum = 1
getList()
}
const lastPage=()=>{
pageInfo.pageNum = total.value/pageInfo.pageSize
const lastPage = () => {
pageInfo.pageNum = total.value / pageInfo.pageSize
getList()
}
//点击页码进行分页功能
@@ -312,7 +314,7 @@ const handleSubmit = (instance) => {
ElMessage.success('新增成功')
getList()
isVisited.value = false
}else {
} else {
ElMessage.warning(res.msg)
}
})
@@ -324,17 +326,17 @@ const handleSubmit = (instance) => {
const handleGoToEditTunnel = (tunnelId) => {
isEdit.value = true
if (type === 's') {
router.push('/edit/' + tunnelId + '/s/'+userId)
router.push('/edit/' + tunnelId + '/s/' + userId)
} else if (type === 'i') {
router.push('/edit/' + tunnelId + '/i/'+userId)
router.push('/edit/' + tunnelId + '/i/' + userId)
}
}
const handleChooseAll = () => {
tunnelList.value.map(item => {
item.checked = !item.checked
if(item.checked&&!item.isDefault){
if (item.checked && !item.isDefault) {
tunnelIds.value.push(item.tunnelId)
}else if(!item.checked&&!item.isDefault){
} else if (!item.checked && !item.isDefault) {
tunnelIds.value.map((newItem, index) => {
if (newItem === item.tunnelId) {
tunnelIds.value.splice(index, 1)
@@ -345,9 +347,9 @@ const handleChooseAll = () => {
}
const handleEditDevice = (tunnelId) => {
if (type === 's') {
router.push('/device/' + tunnelId + '/s/'+userId)
router.push('/device/' + tunnelId + '/s/' + userId)
} else if (type === 'i') {
router.push('/device/' + tunnelId + '/i/'+userId)
router.push('/device/' + tunnelId + '/i/' + userId)
}
}
const restFrom = () => {
@@ -388,23 +390,23 @@ const handleMoreDelete = () => {
if (tunnelIds.value.length === 0) {
ElMessage.warning('请先选择隧道进行删除')
} else {
ElMessageBox.confirm(`是否确定删除该隧道`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
customClass: 'delBox'
}).then(() => {
deleteTunnel(tunnelIds.value).then(res => {
if (res.code === 1000) {
ElMessage.success(res.msg)
getList()
tunnelIds.value = []
tunnelNameList.value = []
} else {
ElMessage.error(res.msg)
}
})
ElMessageBox.confirm(`是否确定删除该隧道`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
customClass: 'delBox'
}).then(() => {
deleteTunnel(tunnelIds.value).then(res => {
if (res.code === 1000) {
ElMessage.success(res.msg)
getList()
tunnelIds.value = []
tunnelNameList.value = []
} else {
ElMessage.error(res.msg)
}
})
})
}
}
@@ -628,10 +630,10 @@ const handleMoreDelete = () => {
> span:last-child {
padding:1px 8px;
padding: 1px 8px;
font-size: 32px;
border: 2px solid #05FEFF;
border-radius:10px;
border-radius: 10px;
position: relative;
}
}

123
src/views/tunnel/index.vue
View File

@@ -1,12 +1,12 @@
<template>
<div id="main">
<div class="box-top">
<manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList"/>
<manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu"/>
<div class="tunnel-title"></div>
<!-- <manage-length class="tunnel-length"></manage-length>-->
<div class="top-length">
<span>隧道总长度: {{tunnelLength}}米</span>
<span>当前施工长度: {{constructionLength}}米</span>
<span>隧道总长度: {{ tunnelLength }}米</span>
<span>当前施工长度: {{ constructionLength }}米</span>
</div>
<div class="top-right">
<div class="current-site">
@@ -31,8 +31,9 @@
</div>
</div>
<!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
<!-- 一进去的话应该是预览模式，所以引入这个组件 -->
<preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId"></preview-scene>
<!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
<preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene>
<div class="left">
<el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
:close-on-click-modal="false" :close-on-press-escape="false">
@@ -80,7 +81,7 @@ import {dateFormat} from "@/utils/date.js";
import {getToken} from "@/utils/auth";
import {useAuthStore} from "@/store/userstore.js";
import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
import {ElMessageBox} from "element-plus";
import {ElMessage, ElMessageBox} from "element-plus";
import {getUserInfo} from "@/api/login";
import {initSceneData} from "@/api/tunnelScene";
import {getSiteDetail} from "../../api/site";
@@ -91,6 +92,7 @@ const selectIndex = ref(-1);
const showFan = ref(false);
const drawerLeft = ref(true);
const drawerRight = ref(true);
const showMenu = ref(false);
const currentSiteId = ref(0);
const currentSite = ref("");
const siteList = ref([])
@@ -104,6 +106,32 @@ const tunnelLength = ref(0);
const constructionLength = ref(0);
const routeList = ref([]);
let socket = reactive("");
const btnList = ref([
{
route: '/site',
icon: 'sp_icon_zdgl.png',
name: '站点管理'
},
{
route: '/tunnel',
icon: 'sp_icon_sdgl.png',
name: '隧道管理'
},
{
route: '/user',
icon: 'sp_icon_yhgl.png',
name: '用户管理'
},
// {
// route: '/system',
// icon: 'sp_icon_xtgl.png',
// name: '系统管理'
// },
// {
// icon: 'sp_icon_mngl.png',
// name: '模拟仿真'
// },
])
const serialNumber = ref("SC00DY00GH00ELBT");
let token = getToken();
let send = {
@@ -128,7 +156,7 @@ const getUser = () => {
currentUserId.value = res.data.user.userId
})
}
const getDefaultSite=(siteId)=>{
const getDefaultSite = (siteId) => {
// console.log('siteList.value',siteList.value)
// getSiteDetail(siteId).then((res) => {
// console.log('res',res)
@@ -137,32 +165,46 @@ const getDefaultSite=(siteId)=>{
const getOtherInfo = () => {
getLargeScreenInfo().then((res) => {
if (res?.code === 1000) {
routeList.value = res.data.routeList
let routeArr = [];
console.log(res.data.routeList,"res.data.routeList")
res.data.routeList.forEach((item, index) => {
for (let btn of btnList.value) {
if (item === btn.route){
routeArr.push(btn)
}
}
})
routeList.value = routeArr
showMenu.value = true
siteList.value = res.data.siteOption
currentSiteId.value = res.data.siteOption[res.data.siteOption.length-1].value
currentSite.value = res.data.siteOption[res.data.siteOption.length-1].label
getTunnel(res.data.siteOption[res.data.siteOption.length-1].value)
currentSiteId.value = res.data.siteOption[res.data.siteOption.length - 1].value
currentSite.value = res.data.siteOption[res.data.siteOption.length - 1].label
getTunnel(res.data.siteOption[res.data.siteOption.length - 1].value)
}
});
};
const getScreenInfo = (id) => {
tunnelId.value=id
getLargeScreen(id).then((res) => {
if (res?.code === 1000) {
largeScreenData.value = res.data;
}
});
initSceneData(id).then((res) => {
tunnelLength.value=res.data.tunnelLength
constructionLength.value=res.data.constructionLength
})
if (id) {
tunnelId.value = id
getLargeScreen(id).then((res) => {
if (res?.code === 1000) {
largeScreenData.value = res.data;
} else {
ElMessage.warning(res.msg)
}
});
initSceneData(id).then((res) => {
tunnelLength.value = res.data.tunnelLength
constructionLength.value = res.data.constructionLength
})
}
};
//根据站点id获取隧道信息
const getTunnel = (id) => {
getTunnelBySiteId(id).then((res) => {
if (res?.code === 1000) {
tunnelList.value = res.data
getScreenInfo(res.data[0].value)
getScreenInfo(res.data[0]?.value)
}
});
}
@@ -174,24 +216,34 @@ const changeTunnel = (e) => {
}
})
getScreenInfo(newObj.value)
// nextTick(() => {
// showFan.value = true;
// });
nextTick(() => {
showFan.value = true;
});
}
const manageSelect = (index) => {
console.log("首页点击-", index);
if (index === 0) {
router.push("/site"+'/'+currentUserId.value);
} else if (index === 1) {
router.push("/tunnel/" + currentSiteId.value+'/i'+'/'+currentUserId.value);
} else if (index === 2) {
router.push("/user/" + currentSiteId.value);
if (index == '站点管理') {
if (currentUserId.value) {
router.push("/site/" + currentUserId.value);
}
} else if (index == '隧道管理') {
if (currentSiteId.value && currentUserId.value) {
router.push("/tunnel/" + currentSiteId.value + '/i/' + currentUserId.value);
}
} else if (index == '用户管理') {
if (currentSiteId.value) {
router.push("/user/" + currentSiteId.value);
}
}
};
const handleChangeSite = (item) => {
currentSite.value = item.label
currentSiteId.value = item.value
getTunnel(item.value)
showFan.value = false
nextTick(() => {
showFan.value = true;
});
}
const closeLeft = () => {
drawerLeft.value = !drawerLeft.value;
@@ -259,6 +311,15 @@ const closeSocket = () => {
socket.close();
};
initWebSocket();
watch(
() => tunnelId.value,
(now) => {
tunnelId.value = now
},
{deep: true}
)
</script>
<style lang="scss">
.el-dropdown__popper.el-popper {

51
src/views/user/index.vue
View File

@@ -47,6 +47,11 @@
<el-table-column prop="nickName" label="昵称" align="center"/>
<el-table-column prop="roleName" label="身份" align="center"/>
<el-table-column prop="phoneNumber" label="电话号码" align="center"/>
<el-table-column prop="state" label="状态" align="center">
<template #default="scope">
{{scope.row.state=="1"?'启用':'停用'}}
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button link type="primary" size="large" style="font-size: 40px;color: #17E1E2;"
@@ -67,8 +72,8 @@
<el-form-item label="当前站点">
<div class="current-site">{{ currentSite }}<span>如果需要切换站点,请返回首屏切换</span></div>
</el-form-item>
<el-form-item label="输入账户">
<el-input v-model="form.userName" placeholder="请输入账户"/>
<el-form-item label="输入用户名">
<el-input v-model="form.userName" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item label="输入密码" v-if="title==='添加用户'">
<el-input type="password" show-password v-model="form.password" placeholder="请输入密码"/>
@@ -79,19 +84,23 @@
<el-form-item label="输入电话号码">
<el-input v-model="form.phoneNumber" placeholder="输入电话号码"/>
</el-form-item>
<el-form-item label="是否启用">
<el-radio-group v-model="form.state">
<el-radio label="1">启用</el-radio>
<el-radio label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="选择身份">
<el-radio-group v-model="form.roleId" @change="(val) => {
console.log('vaaa',val)
if (val >3){
getTunnel()
}}">
<el-radio v-for="item in radioList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="选择隧道" v-if="checkList.length!==0&&form.roleId>3">
<el-form-item label="选择隧道" v-if="form.roleId>3">
<el-select
v-model="tunnelIndex"
v-model="form.tunnelList"
multiple
filterable
clearable
@@ -99,7 +108,7 @@
:fit-input-width="true"
>
<el-option
v-for="item in checkList"
v-for="item in tunnelList"
:key="item.value"
:label="item.label"
:value="item.value"
@@ -157,20 +166,21 @@ const form = ref({
userName: '',
nickName: '',
phoneNumber: '',
state: '1',
roleId: [],
tunnelIds: []
tunnelList: [1]
});
const formRules = ref({
userName: [{required: true, message: '请输入用户名称', trigger: 'blur'}],
userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
password: [{required: true, message: '请输入密码', trigger: 'blur'}]
})
const radioList = ref([])
const checkList = ref([])
const tunnelList = ref([])
const multipleTable = ref()
const getTunnel = () => {
getTunnelOption(siteId).then(res => {
if (res.code === 1000) {
checkList.value = res.data
tunnelList.value = res.data
}
})
}
@@ -187,8 +197,10 @@ const handleEditUser = (row) => {
reset()
getUserDetail(row.userId).then(res => {
if (res.code === 1000) {
getTunnel()
form.value = res.data.user
form.value.roleId = res.data.roleIds[0]
form.value.tunnelList = res.data.user.tunnelList
}
})
title.value = '修改用户'
@@ -198,7 +210,6 @@ const handleAll = () => {
multipleTable.value.toggleAllSelection()
}
const handleDelete = () => {
console.log('userIds.value',userIds.value)
if (userIds.value ===undefined) {
ElMessage.warning('请先选择用户进行删除')
} else {
@@ -222,8 +233,9 @@ const reset = () => {
userName: '',
nickName: '',
phoneNumber: '',
state: '1',
roleId: [],
tunnelIds: []
tunnelList: []
}
}
const getRoleOptionInfo = () => {
@@ -267,8 +279,13 @@ const handleSubmit = async (formInstance) => {
if (!valid) return;
const data = {
siteId: siteId,
nickName: form.value.nickName,
password: form.value.password,
phoneNumber: form.value.phoneNumber,
state:form.value.state,
userName: form.value.userName,
roleIds: [form.value.roleId],
...form.value
tunnelList: form.value.tunnelList
}
if (title.value === '添加用户') {
await addUser(data).then(res => {
@@ -281,7 +298,11 @@ const handleSubmit = async (formInstance) => {
}
})
} else {
await editUser(data).then(res => {
const editData={
userId:form.value.userId,
...data
}
await editUser(editData).then(res => {
if (res.code === 1000) {
getInfo()
isVisited.value = false