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

Merge pull request 'dev' (#215) from dev into master

Browse Source 
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/215
This commit is contained in:
odjbin
2024-01-03 13:15:36 +00:00
parent 4a31567ab0 c730283e78
commit fb80e991c6
29 changed files with 2079 additions and 1029 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/largeScreen.js
View File

@@ -35,3 +35,10 @@ export const getBadGasEchartsInfo = (tunnelId) => {
method: 'get'
})
}
//电流监控数据
export const getFanEchartsInfo = (equipmentId) => {
return request({
url: `/tunnel/large/screen/echarts/current/${equipmentId}`,
method: 'get'
})
}

2
src/api/site.js
View File

@@ -29,7 +29,7 @@ export const addSite = (data) => {
}
export const deleteSite = (siteIdList) => {
return request({
url: `/tunnel/site/${siteIdList}`,
url: `/tunnel/site/delete/${siteIdList}`,
method: 'delete'
})
}

67
src/api/tunnelManage.js Normal file
View File

@@ -0,0 +1,67 @@
import request from '@/utils/request.js'
export const getTunnelList = (params) => {
return request({
url: '/tunnel/tunnel/screen/list',
method: 'get',
params
})
}
export const getTunnelDetail = (tunnelId) => {
return request({
url: `/tunnel/tunnel/${tunnelId}`,
method: 'get'
})
}
export const addTunnel = (data) => {
return request({
url: '/tunnel/tunnel',
method: 'post',
data
})
}
export const deleteTunnel = (tunnelIdList) => {
return request({
url: `/tunnel/tunnel/${tunnelIdList}`,
method: 'delete'
})
}
//设备信息列表
export const getEquipmentList = (tunnelId) => {
return request({
url: '/tunnel/equipment/equipments',
method: 'get',
params:{
tunnelId:tunnelId
}
})
}
export const editTunnel = (data) => {
return request({
url: '/tunnel/model/details',
method: 'put',
data
})
}
//设备管理-风机设备信息修改
export const editFan = (data) => {
return request({
url: '/tunnel/equipment/frequency/equipments',
method: 'put',
data
})
}
export const editEquipment = (data) => {
return request({
url: '/tunnel/equipment/equipments',
method: 'put',
data
})
}
export const editAcquisitions = (data) => {
return request({
url: '/tunnel/equipment/frequency/acquisitions',
method: 'put',
data
})
}

9
src/api/tunnelScene.js
View File

@@ -42,3 +42,12 @@ export const saveEquipment = (
},
});
};
// 保存模型(新增)
export const apiSaveEquipment = (data) => {
return request({
url: "/tunnel/model/details",
method: "put",
data,
});
};

64
src/assets/styles/index.scss
View File

@@ -86,6 +86,23 @@ body,
}
}
.top-length {
z-index: 2;
position: absolute;
top: 190px;
width: 100%;
display: flex;
justify-content: center;
font-size: 50px;
//font-weight: bold;
color: #0BE9FA;
> span:last-child {
margin-left: 40px;
}
}
.top-right {
z-index: 2;
position: absolute;
@@ -281,6 +298,11 @@ body,
height: 1160px;
//width: 1300px;
}
#containerFan {
flex: 1;
height: 1160px;
//width: 1300px;
}
#containerBad {
flex: 1;
@@ -487,43 +509,53 @@ body,
background: #072247 !important;
border: 1px solid #0F82AF !important;
}
.el-popper {
max-width: 200px !important;
box-sizing: border-box;
}
.el-popper__arrow::before {
display: none;
}
.el-select-dropdown{
width: 200px!important;
.el-select-dropdown {
width: 200px !important;
}
.el-select-dropdown__item{
>span{
.el-select-dropdown__item {
> span {
color: #FFFFFF;
}
}
.el-select .el-input .el-select__caret {
font-size: 35px!important;
font-size: 35px !important;
}
.el-select-dropdown__item.hover,.el-select-dropdown__item:hover{
background-color: #064B66!important;
width:198px!important;
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
background-color: #064B66 !important;
width: 198px !important;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
background-color: #064B66!important;
width:200px!important;
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
background-color: #064B66 !important;
width: 200px !important;
}
.el-select-tags-wrapper{
.el-tag{
padding: 28px 20px!important;
.el-select-tags-wrapper {
.el-tag {
padding: 28px 20px !important;
font-size: 35px;
.el-icon{
.el-icon {
width: 40px;
height: 40px;
font-size: 40px!important;
font-size: 40px !important;
}
}
}
.current-site {
.el-select-dropdown {
width: 200px !important;

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

@@ -15,8 +15,10 @@
: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">
<el-dialog :close-on-click-modal="false" v-model="isWindSpeedVisited" :title="'风速监控数据'" width="2175px"
:modal="false">
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
<div class="chat-dialog">
@@ -35,7 +37,8 @@
</el-dialog>
</div>
<div class="digital-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isAirVisited" :title="airTitle+'监控数据'" width="2175px" :modal="false">
<el-dialog :close-on-click-modal="false" v-model="isAirVisited" :title="airTitle+'监控数据'" width="2175px"
:modal="false">
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
<div class="chat-dialog">
@@ -87,10 +90,12 @@ watch(() => props.list, (now) => {
})
}, {deep: true});
watch(() => props.airData, (now) => {
if(now.sensorList===null){
airList.value=[]
}else {
getAirInfo(now.sensorList)
if (now.sensorList !== null) {
if (now.sensorList.length === 0) {
airList.value = []
} else {
getAirInfo(now.sensorList)
}
}
}, {deep: true});
const getChartInfo = (equipmentId) => {
@@ -235,7 +240,7 @@ const initChart = (type, values) => {
xAxis: {
type: 'category',
// data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
data:type,
data: type,
axisLabel: {
textStyle: {
fontSize: 45,
@@ -257,7 +262,7 @@ const initChart = (type, values) => {
series: [
{
// data: [3, 85, 47, 92, 17, 76, 69, 25, 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 31, 49, 81, 63],
data:values,
data: values,
type: 'line',
smooth: true,
symbolSize: 24,
@@ -330,7 +335,7 @@ const initAirChart = (type, values) => {
xAxis: {
type: 'category',
// data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
data:type,
data: type,
axisLabel: {
textStyle: {
fontSize: 45,
@@ -352,7 +357,7 @@ const initAirChart = (type, values) => {
series: [
{
// data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
data:values,
data: values,
type: 'line',
smooth: true,
symbolSize: 24,
@@ -376,7 +381,7 @@ const initAirChart = (type, values) => {
position: absolute;
z-index: 100;
width: 824px;
height: 400px;
//height: 400px;
top: 1003px;
right: 72px;
background-image: url(@/assets/images/airInfo/bg.png);

2
src/components/content/badGasInfo/BadGasInfo.vue
View File

@@ -358,7 +358,7 @@ const initChart = (type, values) => {
cursor: pointer;
position: absolute;
width: 824px;
height: 621px;
//height: 621px;
top: 1441px;
right: 72px;
background-image: url(../../../assets/images/badGasInfo/bg.png);

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

@@ -64,17 +64,38 @@
</div>
</div>
</div>
<div class="current">
<fan-info-item :wp="transducerData[index]"/>
<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="changeNum(fanIndex)+'号风机电流监控数据'" width="2175px"
:modal="false">
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
<div class="chat-dialog">
<div id="containerFan"></div>
<div style="width: 1px;"></div>
</div>
<!-- <div class="time-select">-->
<!-- <time-range-btn-->
<!-- :buttonList="timeList"-->
<!-- v-model="selectTimeButton"-->
<!-- @select="timeSelect"-->
<!-- />-->
<!-- </div>-->
<div class="left-bottom-icon"></div>
<div class="right-bottom-icon"></div>
</el-dialog>
</div>
</div>
</template>
<script setup>
import * as echarts from "echarts";
import FanInfoItem from "./FanInfoItem.vue";
import {getFanEchartsInfo} from "../../../api/largeScreen";
const props = defineProps({
list: Array,
@@ -89,6 +110,10 @@ const transducerData = ref([])
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});
@@ -122,7 +147,20 @@ watch(() => props.list, (now) => {
})
handleOnMounted()
}, {deep: true});
const getFanInfo = (equipmentId) => {
getFanEchartsInfo(equipmentId).then(res => {
if (res?.code === 1000) {
isVisited.value = true
nextTick(() => {
initChart(res.data.dates, res.data.currentsA,res.data.currentsB,res.data.currentsC)
})
}
})
}
const handleOpenChart = (item,index) => {
getFanInfo(item.equipmentId)
fanIndex.value=index+1
}
const getTransData = (data) => {
let tranObj = {}
let tranArr = []
@@ -185,6 +223,7 @@ const getBasicData = (data) => {
}
const handleOnMounted = () => {
// console.log('socketData.value[i]',socketData.value)
const chart = document.getElementsByClassName('echart');
for (let i = 0; i < chart.length; i++) {
Echarts_info1 = echarts.init(chart[i]);
@@ -306,6 +345,128 @@ const getImageUrl = (name) => {
let icon = getImage(name)
return new URL(`../../../assets/images/fanInfo/${icon}`, import.meta.url).href
}
/**
* 初始化echarts实例方法
*/
const initChart = (type, valueA,valueB,valueC) => {
//3.初始化container容器
myEcharts = echarts.init(document.getElementById('containerFan'));
//5.传入数据
let option = {
//图例
legend: {
left: 0,
textStyle: {
color: '#FFFFFF',
fontSize: 45
},
itemWidth: 30,
itemHeight: 30,
icon: "circle",
},
//离容器四侧的距离
grid: {
left: 0, // 左边距
right: 20, // 右边距
top: 80, // 顶边距
bottom: 0, // 底边距
containLabel: true,
},
//提示框组件
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: "transparent", // 设置背景颜色为透明
borderColor: "transparent", // 设置边框颜色为透明
padding: 0, // 设置内边距为0
textStyle: {
fontSize: 40
},
formatter: function (params) {
let content = `
<div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);;border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
<div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}</div>
<div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
</div>`;
return content;
},
},
toolbox: {
show: false,
right: 10,
feature: {
dataZoom: {
yAxisIndex: 'none'
}
}
},
dataZoom: [{
type: 'inside'
}],
//X轴
xAxis: {
type: 'category',
// data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00','24:00'],
data: type,
axisLabel: {
textStyle: {
fontSize: 45,
color: '#D6F1FA'
},
},
},
//Y轴
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
fontSize: 45,
color: '#D6F1FA'
},
},
},
//配置项
series: [
{
// data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
name:'A相电流',
data: valueA,
type: 'line',
smooth: true,
symbolSize: 24,
lineStyle: {
width: 5
},
},
{
name:'B相电流',
data: valueB,
type: 'line',
smooth: true,
symbolSize: 24,
lineStyle: {
width: 5
},
},
{
name:'C相电流',
data: valueC,
type: 'line',
smooth: true,
symbolSize: 24,
lineStyle: {
width: 5
},
}
]
}
myEcharts.setOption(option);
//图表大小自适应窗口大小变化
window.onresize = () => {
myEcharts.resize();
}
}
</script>
<style lang="scss" scoped>
@@ -348,32 +509,28 @@ input[type="number"] {
:deep( .el-radio__label) {
font-size: 28px;
font-family: MicrosoftYaHei;
color: #38cafb;
line-height: 37px;
}
#fan_info {
//height: 1465px;
height: 1000px;
//height: 1000px;
width: 830px;
position: absolute;
z-index: 100;
top: 184px;
left: 68px;
padding: 10px;
padding: 10px 10px 20px 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;
@@ -385,16 +542,17 @@ input[type="number"] {
.fan-item {
//height: 33.5%;
height: 50%;
padding-bottom:10px;
display: flex;
flex-direction: column;
font-size: 14px;
border-bottom: 2px solid rgba(107, 163, 237, 0.4);
//border-bottom: 2px solid rgba(107, 163, 237, 0.4);
> div:first-child {
display: flex;
.echart {
height: 100%;
height: 270px;
width: 30%;
margin: 0px 0px 0px 10px;
position: relative;
@@ -403,7 +561,6 @@ input[type="number"] {
.echart::after {
content: "Hz";
font-size: 24px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
line-height: 31px;
@@ -417,7 +574,6 @@ input[type="number"] {
width: 39px;
height: 140px;
font-size: 26px;
font-family: MicrosoftYaHei;
color: #38cafb;
line-height: 35px;
text-align: center;
@@ -441,7 +597,6 @@ input[type="number"] {
flex-direction: column;
justify-content: center;
font-size: 26px;
font-family: MicrosoftYaHei;
color: #38cafb;
line-height: 35px;
gap: 40px;
@@ -487,7 +642,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;
@@ -505,9 +659,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;
@@ -526,7 +679,6 @@ input[type="number"] {
top: 50%;
transform: translateY(-50%);
font-size: 28px;
font-family: MicrosoftYaHei;
color: #38cafb;
line-height: 37px;
}
@@ -539,7 +691,6 @@ input[type="number"] {
margin-left: 14px;
outline: none;
font-size: 28px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #38cafb;
line-height: 37px;
@@ -557,7 +708,6 @@ input[type="number"] {
padding-top: 30px;
padding-right: 25px;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #FFFFFF;
.fenliu-icon {
@@ -580,7 +730,6 @@ input[type="number"] {
margin-left: 14px;
outline: none;
font-size: 28px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #38cafb;
line-height: 37px;
@@ -594,7 +743,6 @@ input[type="number"] {
bottom: 0;
transform: translateY(-50%);
font-size: 28px;
font-family: MicrosoftYaHei;
color: #38cafb;
line-height: 37px;
}
@@ -604,12 +752,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;

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

@@ -47,27 +47,55 @@ 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 { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
import { useModelSceneStore } from "@/store/modelSceneStore";
import { toRaw } from "vue"
// 获取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();
let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding;
const modelStore = useModelSceneStore();
const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
let isedit = ref(params.isedit)
// const form = ref({
// tunnelName: "",
// serialNumber: "",
// totalLength: "",
// isDefault: false,
// remarks: "",
// });
// const getTunnelPreview = () => {
// getTunnelDetail(params.tunnelId).then((res) => {
// if (res?.code === 1000) {
// form.value = res.data;
// }
// });
// };
watch(
() => params.tunnelId,
(now) => {
params.tunnelId = now
console.log(params.tunnelId);
// getTunnelPreview();
// console.log(form.value);
},
{ deep: true }
)
onMounted(handleMounted);
// 挂载后回调
@@ -86,12 +114,13 @@ async function handleMounted() {
//加载HDR背景图片
demo.loadBackground(hdrLoader, backColorSet);
watch(
() => params.tunnelId,
async () => {
const text = await store.initData(params.tunnelId);
}
);
//先不加试试？？？
// watch(
// () => params.tunnelId,
// async () => {
// const text = await initData(params.tunnelId);
// }
// );
// 初始化设备模型
try {
//在这加载隧道
@@ -100,14 +129,46 @@ 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 modelStore.initModelDataPreview(params.tunnelId);
// console.log("init", params.tunnelId);
demo.previewtunnelModeInit(toRaw(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);
if (err == undefined) {
return
} else {
console.log(err);
ElMessage({
message: "场景初始化异常---！",
type: "warning",
});
}
}
}
// 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 +224,32 @@ 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 = modelStore.initModelDataPreview(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 +266,23 @@ function handleRemoveEqu() {
}
// 对话框确认删除
function handleConfirmAddEqu() {
demo.removeEquipment(targetP);
centerDialogVisible.value = false;
ElMessage({
message: "删除成功！",
type: "success",
});
console.log("target:", targetP.value.info);
modelStore
.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 +300,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 = '风机'

65
src/components/content/tunnelScene/TunnelScene.vue
View File

@@ -4,8 +4,8 @@
<dev-info ref="info" :devInfo="devInfo" />
<!-- 这里的预览模式需要做成不能修改的模式 -->
<edit-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel"
:hasDev="hasDevice" :pointNum="pointNum" :tunnelId="tunnelId" :position="targetP?.name" :hasEquipment="hasDevice"
pointGap="500" />
:hasDev="hasDevice" :pointNum="pointNum" :tunnelId="params.tunnelId" :position="targetP?.name"
:hasEquipment="hasDevice" :pointGap="pointGap" :form="params.form" />
<el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
margin: 20% auto;
width: 569px;
@@ -47,24 +47,36 @@ 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, watch } from "vue";
import { ElMessage } from "element-plus";
import { useModelSceneStore } from "@/store/modelSceneStore";
import { useModelSceneStore } from "@/store/modelSceneStore";
// 获取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();
let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding;
const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
const modelStore = useModelSceneStore();
const params = defineProps(["isedit", "tunnelId", "tunnelLength", "form"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
let isedit = ref(params.isedit);
let tunnelId = reactive(params.tunnelId);
watch(
() => params.tunnelLength,
(now) => {
params.tunnelLength = now;
console.log(params.tunnelLength);
pointGap = now / 20;
},
{ deep: true }
);
let pointGap = reactive(params.tunnelLength);
onMounted(handleMounted);
// 挂载后回调
@@ -87,24 +99,25 @@ async function handleMounted() {
//加载HDR背景图片
demo.loadBackground(hdrLoader, backColorSet);
watch(
() => params.tunnelId,
async () => {
const text = await store.initData(params.tunnelId);
}
);
// 初始化设备模型
try {
const map = new Map();
map.set("equ_fan", await loadModel("/devicesModel/model2.obj"));
map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
demo.initDevicesModel(map);
// 初始化
const equipmentList = await store.getEquipmentList();
demo.editTunnelInit(equipmentList);
// 初始化渲染设备
modelList.value = await modelStore.initModelData(
params.tunnelId,
params.form
);
// modelList.value = await initData(params.tunnelId, params.form);
console.log("test", modelList.value);
demo.editTunnelInit(toRaw(modelList.value));
} catch (err) {
console.log(err);
ElMessage({
message: "场景加载异常！",
message: "场景初始化异常---！",
type: "warning",
});
}
@@ -204,8 +217,8 @@ function handleRemoveEqu() {
// 对话框确认删除
function handleConfirmAddEqu() {
console.log("target:", targetP.value.info);
store
.deleteEquipment(10000, params.tunnelId, targetP.value.info.equipmentId)
modelStore
.deleteEquipment(targetP.value.info.equipmentId, pointGap)
.then((res) => {
demo.removeEquipment(targetP.value);
centerDialogVisible.value = false;
@@ -214,12 +227,14 @@ function handleConfirmAddEqu() {
type: "success",
});
})
.catch((err) => {
ElMessage({
message: "请求异常！",
type: "warning",
.catch(
(res) => {
console.log(res);
ElMessage({
message: "删除失败！",
type: "warning",
});
});
});
}
// 处理取消关闭编辑框事件
function handleCancel() {

89
src/components/content/tunnelScene/editEquComp/editDialog.vue
View File

@@ -47,9 +47,17 @@
import InputNum from "./childComps/InputNum.vue";
import SelectInput from "./childComps/SelectInput.vue";
import { getEquipmentType, getEquipment } from "@/api/tunnelScene";
import { reactive, computed, defineEmits, defineProps, watch, ref } from "vue";
import { useModelSceneStore } from "@/store/modelSceneStore";
import {
reactive,
computed,
defineEmits,
defineProps,
watch,
ref,
toRaw,
} from "vue";
import { ElMessage } from "element-plus";
import { useModelSceneStore } from "@/store/modelSceneStore";
const emit = defineEmits(["cancel", "removeEquipment", "addEquipment"]);
const params = defineProps([
@@ -58,33 +66,49 @@ const params = defineProps([
"tunnelId",
"position",
"hasEquipment",
"form",
]);
// 当前风压
let p = ref(57);
const equipment = ref(null);
const equipmentType = ref(null);
const store = useModelSceneStore();
const modelStore = useModelSceneStore();
//计算锚点之间距离
const pointDistance_str = computed(
() =>
`${params.pointGap}米*${params.pointNum}=${
params.pointGap * params.pointNum
`${parseInt(params.pointGap)}米*${params.pointNum}=${
parseInt(params.pointGap) * params.pointNum
}米`
);
// 请求数据模型
const equipmentSetting = reactive({
const equipmentSetting = ref({
equipmentId: null,
equipmentName: "",
equipmentType: "", //设备类型
chooseEquipment: null, //设备选择(设备名称)
position: "",
threshold: "", //阈值
typeKey: null, //设备选择(设备名称)
});
function resetEquipmentSetting() {
equipmentSetting.value.equipmentId = null;
equipmentSetting.value.equipmentName = "";
equipmentSetting.value.equipmentType = "";
equipmentSetting.value.position = "";
equipmentSetting.value.threshold = "";
equipmentSetting.value.typeKey = null;
equipment.value.reset();
equipmentType.value.reset();
}
// 绑定选择的设备类型
function handleTypeChange(optionItem) {
equipmentSetting.equipmentType = optionItem.value;
equipmentSetting.value.equipmentType = optionItem.value;
}
function handleEquipmentChange(equipmentItem) {
equipmentSetting.chooseEquipment = equipmentItem;
equipmentSetting.value.equipmentName = equipmentItem.label;
equipmentSetting.value.equipmentId = equipmentItem.equipmentId;
equipmentSetting.value.typeKey = equipmentItem.value;
}
// 设备类型选项参数
let options = reactive([{ label: "暂无数据", value: "" }]);
@@ -94,7 +118,7 @@ let options2 = reactive([{ equipmentId: 0, label: "暂无数据", value: "" }]);
// 模拟生成option2
watch(
() => equipmentSetting.equipmentType,
() => equipmentSetting.value.equipmentType,
(newVal) => {
console.log(params.tunnelId, newVal);
equipment.value.reset();
@@ -127,11 +151,7 @@ function handelInput(e) {
// 处理取消事件
function handleCancel() {
equipmentSetting.equipmentType = "";
equipmentSetting.chooseEquipment = null;
equipmentSetting.threshold = "";
equipment.value.reset();
equipmentType.value.reset();
resetEquipmentSetting();
// 发射事件给tunnel父组件
emit("cancel");
}
@@ -150,35 +170,42 @@ function addEquipment() {
});
return;
}
if (!equipmentSetting.equipmentType || !equipmentSetting.chooseEquipment) {
if (
!equipmentSetting.value.equipmentType ||
!equipmentSetting.value.equipmentId
) {
ElMessage({
message: "选项不能为空！",
type: "warning",
});
return;
}
equipmentSetting.position = params.position;
equipmentSetting.value.position = params.position;
console.log("add-", toRaw(equipmentSetting.value));
// 合法请求
store
.saveSceneData(10000, 1, equipmentSetting)
modelStore
.addEquipment({ ...toRaw(equipmentSetting.value) }, params.pointGap)
.then((res) => {
emit("addEquipment", equipmentSetting);
equipmentSetting.chooseEquipment = null;
equipmentSetting.equipmentType = "";
equipmentSetting.threshold = "";
equipment.value.reset();
equipmentType.value.reset();
emit("addEquipment", equipmentSetting.value);
ElMessage({
message: "添加成功！",
type: "success",
});
resetEquipmentSetting();
})
.catch((err) => {
ElMessage({
message: "请求异常！",
type: "warning",
});
if (err === 3000) {
ElMessage({
message: "该设备已添加！",
type: "warning",
});
resetEquipmentSetting();
} else {
ElMessage({
message: "添加异常！",
type: "warning",
});
}
});
}
</script>

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

@@ -15,7 +15,7 @@ function addEquipment(targetPoint, formInfo) {
switch (formInfo.equipmentType) {
case "frequency":
handleFanEqu.call(this, targetPoint, formInfo.chooseEquipment);
handleFanEqu.call(this, targetPoint, formInfo);
break;
// 还没有风压阀的模型，所以先用其他设备传感器实现
// case "valve":
@@ -23,7 +23,7 @@ function addEquipment(targetPoint, formInfo) {
// break;
case "windPressure":
case "sensor":
handleOtherEqu.call(this, targetPoint, formInfo.chooseEquipment);
handleOtherEqu.call(this, targetPoint, formInfo);
break;
default:
break;
@@ -33,13 +33,15 @@ function addEquipment(targetPoint, formInfo) {
this.clearTagsObj();
}
//判断墙是否已经存在，如果存在的话，就不管，添加则无效嘛(就是说只能添加一面墙，如果存在一面墙，则不管了)
let hasWall = false
let wallHang = 0;
// function handleValveEqu(targetPoint, equipmentInfo) {
// }
let allline = new Array();
let Allhang = new Array();
// 其他传感器
function handleOtherEqu(targetPoint, equipmentInfo) {
const equMesh = this.equMap.get("equ_sensors").clone();
@@ -47,8 +49,7 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
equMesh.position.copy(worldP);
//设备添加标签
const tag = EquipmentTag(equipmentInfo.label);
console.log(equipmentInfo);
const tag = EquipmentTag(equipmentInfo.equipmentName);
equMesh.getObjectByName("tag").material = tag;
if (/tr$/.test(targetPoint.name)) {
equMesh.rotation.z = -Math.PI / 2;
@@ -71,42 +72,93 @@ 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'
console.log(this.scene.getObjectByName(point));
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;
allline.push(targetPoint.name)
if (hasWall == false) {
let findWallHang = new Array;
// console.log(targetPoint.name);
console.log(allline);
Allhang = allline.map(function (str) {
return parseInt(str.match(/\d+/)[0], 10);
})
console.log(Allhang);
//将取出来的所有行数字符串用一个新数组来保存，之后判断是不是存在同一行的（即相同的行数）
for (let i = 0; i < Allhang.length; i++) {
//判断是不是存在相同的行数，如果存在，则继续判断是不是存在左右的传感器
findWallHang.push(Allhang[i - 1])
if (findWallHang.includes(Allhang[i])) {
console.log(allline[i - 1].slice(-1));
console.log(allline[i].slice(-1));
wallHang = Allhang[i];
let sameHang = findWallHang.indexOf(Allhang[i])
if ((allline[sameHang - 1].slice(-1) == 'r' && allline[i].slice(-1) == 'l') || allline[sameHang - 1].slice(-1) == 'l' && allline[i].slice(-1) == 'r') {
console.log('进行添加操作');
// 将这二个符合添加规则的锚点给设一个属性，这样方便之后我们进行删除操作
// this.scene.getObjectByName(allline[i - 1]).hasWall = true
// this.scene.getObjectByName(allline[i]).hasWall = true
console.log(this.scene.getObjectByName(allline[i - 1]));
console.log(this.scene.getObjectByName(allline[i]));
//出现满足条件的风压阀了，这时候就设定为已经有墙了，不需要再添加了
hasWall = true
findWallHang = []
//进行添加操作，因为数值问题，所以我们分开进行添加操作
for (let line = Allhang[i]; line <= 20; line++) {
if (line < 10) {
let wall = 'wall_' + '0' + line
console.log(wall);
//把墙设为可见
this.scene.getObjectByName(wall).visible = true
let point = 'point_' + '00' + line + '_tc'
// console.log(this.scene.getObjectByName(point));
//把顶部的附着点设为隐藏！！！，然后设为不可选中
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
}
}
//处理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
}
}
}
}
} 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
}
}
//处理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
//处理风压阀的代码片段
// 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);
// }
// })
// console.log(this.scene);
// 保存该设备模型id，后期直接从附附着点进行删除
targetPoint.info = {
@@ -114,10 +166,11 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
...equipmentInfo,
};
//下面进行模拟分压阀的添加效果
// 1.先取出当前点击添加设备锚点的行数
// 2.再进行字符串拼接出墙的名字，使用scene.getObjectByName(墙名去获取)
// 3.加上循环，固定到20结束就可以了，将点击的函数到20的函数的墙全部设为visable设为可见,还需要将中间的那行设备和附着点全部设为隐藏，且层级变低，无法选中
// 1. 不能放在初始化的地方去写，我们最好放在同一行的地方去写，当用户每添加一个模型，就判断是不是该行已经添加过了多个模型了
// 2.如果是的话，我们必须判断是不是左右同时添加的情况，如果是的话则则可以加一个墙
// 0. 首先需要定义一个变量，看墙是否已经添加了，如果已经添加的话，则直接跳出不管（因为只会有二个风压阀生成的墙）
// 1. 每添加一个则将附着点保存到数组里面，然后对数组里面进行第一遍过滤，将相同行数的提取出来，如果存在左右的话，则进行墙的展示（里面套for循环将后面的墙全部打开，并且将该行上面的附着点全部隐藏，包括设备和层级！！！）
}
// 风机
@@ -153,7 +206,6 @@ function handleFanEqu(
fanSpin.onUpdate((obj) => {
fanLeaf.rotation.z = obj.rotation;
});
this.fanSpinArray.push(fanSpin);
}
@@ -161,8 +213,16 @@ function handleFanEqu(
function removeEquipment(targetPoint) {
//删除设备这里需要再进行处理，就是根据附着点（附着点一定保存了当前添加设备的信息了）判断是不是分压阀，然后继续一样的隐藏
if (!targetPoint.hasDevice) return;
if (targetPoint.hasWall == true) {
let lineIndex = targetPoint.name.slice(7, 9)
//删除我们这里使用行数来判断，即是不是删除到了我们的那一行呢？
//如果删除到了我们那行的话，我们必须将行的数组从中去掉已存在的数据，然后将附着点列表中也去除这个点，然后将墙设置为false来让下次使用
let lineIndex = targetPoint.name.slice(7, 9)
deleteItem(allline, targetPoint.name)
if (Number(lineIndex) == wallHang) {
wallHang = 0;
hasWall = false
for (let line = Number(lineIndex); line <= 20; line++) {
if (line < 10) {
let wall = 'wall_' + '0' + line
@@ -198,6 +258,11 @@ function removeEquipment(targetPoint) {
}
}
}
deleteItem(Allhang, Number(lineIndex))
console.log("测试是不是删除了");
const mesh = this.scene.getObjectById(targetPoint.info.id);
this.scene.remove(mesh);
targetPoint.visible = true;
@@ -206,3 +271,12 @@ function removeEquipment(targetPoint) {
delete targetPoint.info; // 清空设备信息
}
export { addEquipment, removeEquipment };
function deleteItem(array, item) {
let index = array.indexOf(item);
if (index !== -1) {
array.splice(index, 1);
}
return array
}

17
src/components/content/tunnelScene/sceneClass/editTunnelInit/index.js
View File

@@ -1,21 +1,6 @@
export function editTunnelInit(equipmentList) {
//初始化将墙壁隐藏起来
// for (let line = 1; line <= 20; line++) {
// if (line < 10) {
// let wall = 'wall_' + '0' + line
// this.scene.getObjectByName(wall).visible = false
// } else if (line >= 10) {
// let wall = 'wall_' + line
// 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);
});
}

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,10 @@ export default function previewtunnelModeInit(equipmentList) {
// this.scene.getObjectByName(wall).visible = false
// }
// }
console.log(equipmentList);
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) {

3
src/components/content/usedEle/UsedEle.vue
View File

@@ -234,9 +234,10 @@ const getImageUrl = (name) => {
}
#used-ele {
//flex:1;
cursor: pointer;
width: 830px;
height: 373px;
//height: 373px;
color: aliceblue;
position: absolute;
top: 1220px;

14
src/components/content/windPressure/WindPressureList.vue
View File

@@ -2,11 +2,12 @@
<div id="wind-pressure">
<div class="name">风压</div>
<div class="list">
<wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item" :index="index+1"
@click="handleOpenChart(item,index+1)"/>
<wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item"
@click="handleOpenChart(item)"/>
</div>
<div class="digital-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isVisited" :title="windSort+'号风压监控数据'" width="2175px" :modal="false">
<el-dialog :close-on-click-modal="false" v-model="isVisited" :title="windSort+'监控数据'" width="2175px"
:modal="false">
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
<div class="chat-dialog">
@@ -69,9 +70,9 @@ const getWindInfo = (equipmentId) => {
})
}
const handleOpenChart = (item, index) => {
const handleOpenChart = (item) => {
getWindInfo(item.equipmentId)
windSort.value = index
windSort.value = item.equipmentName
}
const timeSelect = (index) => {
console.log('选择时间', index)
@@ -89,6 +90,7 @@ const getScreenInfo = (now) => {
now?.map(item => {
windPressureObj = {
equipmentId: item.equipmentId,
equipmentName: item.equipmentName,
max: 120,
value: item.value,
point: item.valueThreshold,
@@ -203,7 +205,7 @@ const initChart = (type, values) => {
<style lang="scss" scoped>
#wind-pressure {
width: 830px;
height: 779px;
//height: 779px;
position: absolute;
top: 185px;
right: 68px;

5
src/components/content/windPressure/childComps/WindPressureItem.vue
View File

@@ -2,7 +2,7 @@
<div id="wind-pressure-item" :class="{ abnormal:isWaring }">
<div class="label">
<img src="../../../../assets/images/windPressure/icon.png" alt=""/>
<span>{{ index }}号风压</span>
<span>{{params.wp.equipmentName}}</span>
</div>
<div class="container" ref="length">
<div class="value" ref="value"></div>
@@ -16,8 +16,7 @@
<script setup>
const params = defineProps({
wp: Object,
index: Number,
wp: Object
});
// const info = {
// windPId: 0, //编号

39
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([
{
@@ -46,24 +46,25 @@ const btnList = ref([
icon: 'sp_icon_yhgl.png',
name: '用户管理'
},
{
route: '/system',
icon: 'sp_icon_xtgl.png',
name: '系统管理'
},
// {
// route: '/system',
// icon: 'sp_icon_xtgl.png',
// name: '系统管理'
// },
// {
// icon: 'sp_icon_mngl.png',
// 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>

23
src/router/index.js
View File

@@ -1,4 +1,4 @@
import { createRouter, createWebHashHistory } from 'vue-router';
import { createRouter, createWebHistory } from 'vue-router';
import NProgress from 'nprogress'//进度条
import 'nprogress/nprogress.css'
import { getToken } from '../utils/auth'
@@ -24,7 +24,7 @@ const routes = [
},
},
{
path: '/edit',
path: '/edit/:tunnelId(\\d+)/:type/:userId(\\d+)',
name: 'tunneledit',
component: () => import('@/views/edit/edit.vue'),
meta: {
@@ -42,7 +42,7 @@ const routes = [
}
},
{
path: '/site',
path: '/site/:userId(\\d+)',
name: 'site',
component: () => import('@/views/site/index.vue'),
meta: {
@@ -60,7 +60,7 @@ const routes = [
}
},
{
path: '/tunnel/:siteId(\\d+)',
path: '/tunnel/:siteId(\\d+)/:type/:userId(\\d+)',
name: 'tunnel',
component: () => import('@/views/tunnel-manage/index.vue'),
meta: {
@@ -69,7 +69,7 @@ const routes = [
}
},
{
path: '/device/:tunnelId(\\d+)',
path: '/device/:tunnelId(\\d+)/:type/:userId(\\d+)',
name: 'device',
component: () => import('@/views/device-manage/index.vue'),
meta: {
@@ -80,11 +80,12 @@ const routes = [
];
const router = createRouter({
history: createWebHashHistory(),
history: createWebHistory(),
routes,
});
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(() => {

170
src/store/modelSceneStore.js
View File

@@ -1,54 +1,146 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import { saveEquipment, initSceneData } from "../api/tunnelScene";
import { ElMessage } from "element-plus";
import { ref, toRaw } from "vue";
import { apiSaveEquipment, initSceneData } from "../api/tunnelScene";
export const useModelSceneStore = defineStore("modelSceneData", () => {
let equipmentList = ref("[]");
function initData(tunnelId = 1) {
initSceneData(tunnelId)
.then((res) => {
equipmentList.value = res.data.tunnelThreeConfig;
})
.catch((Error) => {
ElMessage.error("场景初始化异常！");
});
}
//默认初始化1号隧道
function saveSceneData(constructionLength, tunnelId, modelData) {
const temp = JSON.parse(equipmentList.value);
temp.push(modelData);
equipmentList.value = JSON.stringify(temp);
console.log("save:", equipmentList.value);
return saveEquipment(constructionLength, tunnelId, equipmentList.value);
}
// 删除设备
function deleteEquipment(constructionLength, tunnelId, EquipmentId) {
let temp = JSON.parse(equipmentList.value);
temp = temp.filter(
(item) => item.chooseEquipment.equipmentId != EquipmentId
);
equipmentList.value = JSON.stringify(temp);
return saveEquipment(constructionLength, tunnelId, equipmentList.value);
}
function getEquipmentList(tunnelId = 1) {
let equipmentList = ref([]);
let requestOtherConfig = ref({});
function initModelData(tunnelId, otherConfig) {
return new Promise((resolve, reject) => {
handleSettingOtherConfig(otherConfig, requestOtherConfig);
initSceneData(tunnelId)
.then((res) => {
equipmentList.value = res.data.tunnelThreeConfig;
resolve(JSON.parse(equipmentList.value));
if (res.data.tunnelThreeConfig) {
equipmentList.value = JSON.parse(res.data.tunnelThreeConfig);
} else {
equipmentList.value = [];
}
resolve(toRaw(equipmentList.value));
})
.catch((Error) => {
ElMessage.error("场景初始化异常！");
.catch((error) => {
reject();
});
});
}
function initModelDataPreview(tunnelId) {
if (tunnelId == 0) {
return new Promise((resolve, reject) => {
reject()
})
} else {
return new Promise((resolve, reject) => {
initSceneData(tunnelId)
.then((res) => {
if (res.data.tunnelThreeConfig) {
equipmentList.value = JSON.parse(res.data.tunnelThreeConfig);
} else {
equipmentList.value = [];
}
resolve(toRaw(equipmentList.value));
})
.catch((error) => {
reject();
});
});
}
}
function addEquipment(equipmentInfo, pointGap) {
return new Promise((resolve, reject) => {
if (hasEquipment(equipmentList.value, equipmentInfo.equipmentId)) {
reject(3000);
return;
}
equipmentList.value.push(equipmentInfo);
apiSaveEquipment({
constructionLength: autoComputeConstructionLength(
equipmentList.value,
pointGap
),
modelEquipmentList: toRaw(equipmentList.value),
...requestOtherConfig,
})
.then((res) => {
console.log("res", res);
resolve();
})
.catch((err) => {
console.log("res", err);
equipmentList.value.pop();
reject();
});
});
}
// 删除设备
function deleteEquipment(equipmentId, pointGap) {
let equipment = null;
equipmentList.value = equipmentList.value.filter((item) => {
if (item.equipmentId === equipmentId) {
equipment = item;
}
return item.equipmentId != equipmentId;
});
return new Promise((resolve, reject) => {
apiSaveEquipment({
constructionLength: autoComputeConstructionLength(
equipmentList.value,
pointGap
),
modelEquipmentList: toRaw(equipmentList.value),
...requestOtherConfig,
})
.then((res) => {
resolve();
})
.catch((err) => {
equipmentList.value.push(equipment);
reject();
});
});
}
return {
equipmentList,
initData,
saveSceneData,
initModelData,
addEquipment,
deleteEquipment,
getEquipmentList,
initModelDataPreview
};
});
function handleSettingOtherConfig(otherConfig, requestOtherConfig) {
requestOtherConfig.isDefault = otherConfig.isDefault;
requestOtherConfig.remarks = otherConfig.remarks;
requestOtherConfig.serialNumber = otherConfig.serialNumber;
requestOtherConfig.tunnelId = otherConfig.tunnelId;
requestOtherConfig.tunnelLength = otherConfig.totalLength;
requestOtherConfig.tunnelName = otherConfig.tunnelName;
}
function autoComputeConstructionLength(modelEquipmentList, pointGap) {
let maxLength = 0;
modelEquipmentList.forEach((item) => {
const length =
Number(
item.position.substring(
item.position.indexOf("_") + 1,
item.position.lastIndexOf("_")
) - 1
) * pointGap;
if (length > maxLength) {
maxLength = length;
}
});
return maxLength;
}
function hasEquipment(equipmentList, equipmentId) {
let result = false;
equipmentList.forEach((item) => {
if (item.equipmentId === equipmentId) result = true;
});
return result;
}

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;

595
src/views/device-manage/index.vue
View File

@@ -6,7 +6,7 @@
<span>返回</span>
</div>
<div class="tunnel-name">
一号隧道
{{ tunnelName }}
</div>
<div class="tunnel-title"></div>
</div>
@@ -26,9 +26,9 @@
<el-menu-item index="3">
<span>其他传感器</span>
</el-menu-item>
<el-menu-item index="4">
<span>分流器</span>
</el-menu-item>
<!-- <el-menu-item index="4">-->
<!-- <span>分流器</span>-->
<!-- </el-menu-item>-->
</el-menu>
</div>
<div class="box-right" v-if="changeIndex==1">
@@ -40,7 +40,7 @@
<input
type="number"
min="0"
v-model="collectionFrequency"
v-model="fanFrequency"
/>
</span>
</div>
@@ -50,20 +50,23 @@
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
<el-table-column prop="name" label="设备名称" align="center"/>
<el-table-column prop="currentA" label="A电流" align="center">
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
<el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>
<el-table-column prop="acurrentValue" label="A电流阈值" align="center">
<template #default="scope">
<el-input placeholder="请输入A电流" v-model="scope.row.currentA"></el-input>
<el-input placeholder="A电流" v-model="scope.row.acurrentValue"></el-input>
</template>
</el-table-column>
<el-table-column prop="currentB" label="B电流" align="center">
<el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>
<el-table-column prop="bcurrentValue" label="B电流阈值" align="center">
<template #default="scope">
<el-input placeholder="请输入B电流" v-model="scope.row.currentB"></el-input>
<el-input placeholder="B电流" v-model="scope.row.bcurrentValue"></el-input>
</template>
</el-table-column>
<el-table-column prop="currentC" label="C电流" align="center">
<el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>
<el-table-column prop="ccurrentValue" label="C电流阈值" align="center">
<template #default="scope">
<el-input placeholder="请输入C电流" v-model="scope.row.currentC"></el-input>
<el-input placeholder="C电流" v-model="scope.row.ccurrentValue"></el-input>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center">
@@ -71,15 +74,15 @@
<div class="switch">
<div
:class="{ active: scope.row.state }"
@click=" scope.row.state = true"
@click="scope.row.state = 1"
>
启动
启用
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = false"
@click=" scope.row.state = 0"
>
停止
停用
</div>
</div>
</template>
@@ -87,10 +90,10 @@
</el-table>
</div>
<div class="btns">
<div class="cancel-btn">
<div class="cancel-btn" @click="router.back(-1)">
取消
</div>
<div class="sure-btn" @click="router.back(-1)">
<div class="sure-btn" @click="handleEditFan">
确定
</div>
</div>
@@ -104,7 +107,7 @@
<input
type="number"
min="0"
v-model="collectionFrequency"
v-model="windFrequency"
/>
</span>
</div>
@@ -114,28 +117,32 @@
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="winData">
<el-table-column prop="name" label="设备名称" align="center"/>
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
<el-table-column prop="offset" label="偏移量" align="center"/>
<el-table-column prop="unit" label="单位" align="center"/>
<el-table-column prop="thresholdValue" label="阈值" align="center">
<el-table-column prop="unit" label="单位" align="center">
<template #default="scope">
<el-input placeholder="请输入阈值" v-model="scope.row.thresholdValue"></el-input>
<el-input placeholder="单位" v-model="scope.row.unit"></el-input>
</template>
</el-table-column>
<el-table-column prop="alarmValue" label="阈值" align="center">
<template #default="scope">
<el-input placeholder="阈值" v-model="scope.row.alarmValue"></el-input>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center">
<template #default="scope">
<div class="switch">
<div class="switch wind-switch">
<div
:class="{ active: scope.row.state }"
@click=" scope.row.state = true"
@click=" scope.row.state = 1;"
>
启动
启用
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = false"
@click=" scope.row.state = 0;"
>
停止
停用
</div>
</div>
</template>
@@ -143,10 +150,10 @@
</el-table>
</div>
<div class="btns">
<div class="cancel-btn">
<div class="cancel-btn" @click="router.back(-1)">
取消
</div>
<div class="sure-btn" @click="router.back(-1)">
<div class="sure-btn" @click="handleEditWind">
确定
</div>
</div>
@@ -160,7 +167,7 @@
<input
type="number"
min="0"
v-model="collectionFrequency"
v-model="otherFrequency"
/>
</span>
</div>
@@ -170,32 +177,32 @@
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="otherData">
<el-table-column prop="name" label="设备名称" align="center"/>
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
<el-table-column prop="offset" label="偏移量" align="center"/>
<el-table-column prop="unit" label="单位" align="center">
<template #default="scope">
<el-input placeholder="请输入单位" v-model="scope.row.unit"></el-input>
<el-input placeholder="单位" v-model="scope.row.unit"></el-input>
</template>
</el-table-column>
<el-table-column prop="thresholdValue" label="阈值" align="center">
<el-table-column prop="alarmValue" label="阈值" align="center">
<template #default="scope">
<el-input placeholder="请输入阈值" v-model="scope.row.thresholdValue"></el-input>
<el-input placeholder="阈值" v-model="scope.row.alarmValue"></el-input>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center">
<template #default="scope">
<div class="switch">
<div class="switch wind-switch">
<div
:class="{ active: scope.row.state }"
@click=" scope.row.state = true"
@click=" scope.row.state = 1;"
>
启动
启用
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = false"
@click=" scope.row.state = 0;"
>
停止
停用
</div>
</div>
</template>
@@ -203,10 +210,10 @@
</el-table>
</div>
<div class="btns">
<div class="cancel-btn" @click="isVisited=false">
<div class="cancel-btn" @click="router.back(-1)">
取消
</div>
<div class="sure-btn" @click="router.back(-1)">
<div class="sure-btn" @click="handleEditOther">
确定
</div>
</div>
@@ -220,7 +227,7 @@
<input
type="number"
min="0"
v-model="collectionFrequency"
v-model="fenFrequency"
/>
</span>
</div>
@@ -234,7 +241,7 @@
<el-table-column prop="offset" label="偏移量" align="center"/>
<el-table-column prop="thresholdValue" label="阈值" align="center">
<template #default="scope">
<el-input placeholder="请输入阈值" v-model="scope.row.thresholdValue"></el-input>
<el-input placeholder="阈值" v-model="scope.row.thresholdValue"></el-input>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center">
@@ -244,13 +251,13 @@
:class="{ active: scope.row.state }"
@click=" scope.row.state = true"
>
启动
启用
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = false"
>
停止
停用
</div>
</div>
</template>
@@ -258,10 +265,10 @@
</el-table>
</div>
<div class="btns">
<div class="cancel-btn" @click="isVisited=false">
<div class="cancel-btn" @click="router.back(-1)">
取消
</div>
<div class="sure-btn" @click="router.back(-1)">
<div class="sure-btn" @click="handleEditFen">
确定
</div>
</div>
@@ -272,195 +279,292 @@
</template>
<script setup>
import {getEquipmentList, editFan} from "@/api/tunnelManage";
import {ElMessage} from "element-plus";
import {editEquipment, getTunnelDetail} from "@/api/tunnelManage";
import {editAcquisitions} from "../../api/tunnelManage";
const router = useRouter()
const collectionFrequency = ref(0)
const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
const userId = reactive(router.currentRoute.value.params.userId)
const type = reactive(router.currentRoute.value.params.type)
const fanFrequency = ref(0)
const windFrequency = ref(0)
const otherFrequency = ref(0)
const changeIndex = ref(1)
const fanData = [
{
name: '一号风机',
currentA: '2342',
currentB: '2342',
currentC: '2342',
state: false,
},
{
name: '二号风机',
currentA: '2342',
currentB: '2342',
currentC: '2342',
state: true,
},
{
name: '三号风机',
currentA: '2342',
currentB: '2342',
currentC: '2342',
state: false,
const fanData = ref([
// {
// name: '一号风机',
// currentA: '2342',
// currentB: '2342',
// currentC: '2342',
// state: false,
// },
// {
// name: '二号风机',
// currentA: '2342',
// currentB: '2342',
// currentC: '2342',
// state: true,
// },
// {
// name: '三号风机',
// currentA: '2342',
// currentB: '2342',
// currentC: '2342',
// state: false,
// }
])
const winData = ref([
// {
// name: '1号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '2号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '3号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '4号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '5号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '6号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '7号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '8号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '9号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
// {
// name: '10号风压',
// offset: '2342',
// unit: 'Pa',
// thresholdValue: '2342',
// state: false,
// },
])
const otherData = ref([
// {
// name: '风速',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '氧 气',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '温 度',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '湿 度',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '粉 尘',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '二氧化碳',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '一氧化碳',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '二氧化氮',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '一氧化氮',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '二氧化硫',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '硫 化 氢',
// offset: '2342',
// unit: 'm/s',
// thresholdValue: '2342',
// state: false,
// }
])
const fenliuData = ref([
// {
// name: '1号分流器',
// offset: '2342',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '2号分流器',
// offset: '2342',
// thresholdValue: '2342',
// state: false,
// }, {
// name: '3号分流器',
// offset: '2342',
// thresholdValue: '2342',
// state: false,
// }
])
const siteId = ref(0)
const tunnelName = ref('')
const changeFrequency = (acquisition, typeKey) => {
const data = {
acquisitionPeriod: acquisition,
tunnelId: tunnelId,
typeKey: typeKey
}
]
const winData = [
{
name: '1号风压',
offset: '2342',
unit: 'Pa',
thresholdValue: '2342',
state: false,
},
{
name: '2号风压',
offset: '2342',
unit: 'Pa',
thresholdValue: '2342',
state: false,
},
{
name: '3号风压',
offset: '2342',
unit: 'Pa',
thresholdValue: '2342',
state: false,
},
{
name: '4号风压',
offset: '2342',
unit: 'Pa',
thresholdValue: '2342',
state: false,
},
{
name: '5号风压',
offset: '2342',
unit: 'Pa',
thresholdValue: '2342',
state: false,
},
{
name: '6号风压',
offset: '2342',
unit: 'Pa',
thresholdValue: '2342',
state: false,
},
{
name: '7号风压',
offset: '2342',
unit: 'Pa',
thresholdValue: '2342',
state: false,
},
{
name: '8号风压',
offset: '2342',
unit: 'Pa',
thresholdValue: '2342',
state: false,
},
{
name: '9号风压',
offset: '2342',
unit: 'Pa',
thresholdValue: '2342',
state: false,
},
{
name: '10号风压',
offset: '2342',
unit: 'Pa',
thresholdValue: '2342',
state: false,
},
]
const otherData = [
{
name: '风速',
offset: '2342',
unit: 'm/s',
thresholdValue: '2342',
state: false,
}, {
name: '氧 气',
offset: '2342',
unit: 'm/s',
thresholdValue: '2342',
state: false,
}, {
name: '温 度',
offset: '2342',
unit: 'm/s',
thresholdValue: '2342',
state: false,
}, {
name: '湿 度',
offset: '2342',
unit: 'm/s',
thresholdValue: '2342',
state: false,
}, {
name: '粉 尘',
offset: '2342',
unit: 'm/s',
thresholdValue: '2342',
state: false,
}, {
name: '二氧化碳',
offset: '2342',
unit: 'm/s',
thresholdValue: '2342',
state: false,
}, {
name: '一氧化碳',
offset: '2342',
unit: 'm/s',
thresholdValue: '2342',
state: false,
}, {
name: '二氧化氮',
offset: '2342',
unit: 'm/s',
thresholdValue: '2342',
state: false,
}, {
name: '一氧化氮',
offset: '2342',
unit: 'm/s',
thresholdValue: '2342',
state: false,
}, {
name: '二氧化硫',
offset: '2342',
unit: 'm/s',
thresholdValue: '2342',
state: false,
}, {
name: '硫 化 氢',
offset: '2342',
unit: 'm/s',
thresholdValue: '2342',
state: false,
}
]
const fenliuData = [
{
name: '1号分流器',
offset: '2342',
thresholdValue: '2342',
state: false,
}, {
name: '2号分流器',
offset: '2342',
thresholdValue: '2342',
state: false,
}, {
name: '3号分流器',
offset: '2342',
thresholdValue: '2342',
state: false,
}
]
editAcquisitions([data]).then(res => {
if (res.code === 1000) {
} else {
ElMessage.error(res.msg)
}
})
}
const handleEditFan = () => {
editFan(fanData.value).then(res => {
if (res.code === 1000) {
ElMessage.success('修改成功')
router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
} else {
ElMessage.error(res.msg)
}
})
changeFrequency(fanFrequency.value, 'frequency')
}
const handleEditWind = () => {
editEquipment(winData.value).then(res => {
if (res.code === 1000) {
ElMessage.success('修改成功')
router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
} else {
ElMessage.error(res.msg)
}
})
changeFrequency(windFrequency.value, 'windPressure')
}
const handleEditOther = () => {
editEquipment(otherData.value).then(res => {
if (res.code === 1000) {
ElMessage.success('修改成功')
router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
} else {
ElMessage.error(res.msg)
}
})
changeFrequency(otherFrequency.value, 'sensor')
}
const handleChangeMenu = (e) => {
console.log('切换', e)
changeIndex.value = e
}
const getList = () => {
getEquipmentList(tunnelId).then(res => {
if (res.code === 1000) {
fanData.value = res.data.frequencyChangerList
res.data.windPressureSensorList.forEach(item => {
item.offset = item.offset + 4000
})
winData.value = res.data.windPressureSensorList
res.data.sensorList.forEach(item => {
item.offset = item.offset + 4000
})
otherData.value = res.data.sensorList
res.data.acquisitionList.map(item => {
if(item.typeKey === 'frequency'){
fanFrequency.value = item.acquisitionPeriod
}else if(item.typeKey === 'windPressure'){
windFrequency.value = item.acquisitionPeriod
}else if(item.typeKey ==='sensor'){
otherFrequency.value = item.acquisitionPeriod
}
})
}
})
}
const getTunnel = () => {
getTunnelDetail(tunnelId).then((res) => {
if (res?.code === 1000) {
siteId.value = res.data.siteId
tunnelName.value = res.data.tunnelName
console.log('设备详情', res.data)
}
});
}
getTunnel()
const handleGoTunnelMgr = () => {
router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
}
getList()
</script>
<style scoped lang="scss">
@@ -552,9 +656,10 @@ const handleChangeMenu = (e) => {
&:nth-child(2) {
letter-spacing: 120px;
}
&:last-child{
letter-spacing: 40px;
}
//&:nth-child(4) {
// letter-spacing: 40px;
//}
}
}
}
@@ -589,7 +694,7 @@ const handleChangeMenu = (e) => {
position: relative;
input {
width: 166px;
width: 220px;
height: 50px;
border: 1px solid #05FEFF;
background: transparent;
@@ -622,16 +727,20 @@ const handleChangeMenu = (e) => {
.device-table {
margin-top: 50px;
margin-left: 97px;
margin-left: 60px;
.active {
color: #FFFFFF;
background: #0f7da9;
}
.wind-switch {
margin-left: 65px;
}
.switch {
margin-top: 22px;
margin-left: 60px;
display: flex;
width: 200px;
height: 50px;
@@ -650,7 +759,7 @@ const handleChangeMenu = (e) => {
}
:deep(.el-table--fit) {
width: 1700px !important;
width: 1780px !important;
}
:deep(.cell) {
@@ -669,11 +778,13 @@ const handleChangeMenu = (e) => {
}
:deep(.el-table__row--striped) {
background-color: #13849C!important;
background-color: #13849C !important;
}
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell){
background-color: #13849C!important;
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
background-color: #13849C !important;
}
:deep(.el-table__cell) {
.el-input {
width: 180px;
@@ -688,6 +799,8 @@ const handleChangeMenu = (e) => {
.el-input__inner {
color: #FFFFFF;
font-size: 40px;
height: auto;
line-height: normal;
}
}
}

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

@@ -1,264 +1,246 @@
<template>
<div id="main">
<div class="box-top">
<manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" />
<div class="tunnel-title"></div>
<manage-length class="tunnel-length"></manage-length>
<div class="top-right">
<div class="current-site">
当前站点：<span>{{ currentSite }}</span>
<el-dropdown trigger="click" @command="handleCommand">
<div class="toggle"></div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ item.label
}}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<div class="current-user">
上午好：<span>{{ currentUser }}</span>
<span>今天是：{{ currentDate }}</span>
<div class="logout" @click="handleLogout"></div>
</div>
</div>
</div>
<!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
<tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" />
<div id="main">
<div class="box-top">
<div class="back-tunnel" @click="handleGoTunnelMgr">
<div class="back-icon"></div>
<span>返回</span>
</div>
<div class="tunnel-title"></div>
<div class="btn-right">
<div class="del-btn" @click="handleGotoDevice">设备管理</div>
<div class="del-btn" @click="handleSave">保存</div>
</div>
</div>
<div class="edit-box">
<el-form :model="form" :label-position="right" label-width="188px">
<el-form-item label="隧道名称">
<el-input v-model="form.tunnelName" placeholder="请输入隧道名称" />
</el-form-item>
<el-form-item label="序列号">
<el-input v-model="form.serialNumber" placeholder="请输入序列号" />
</el-form-item>
<el-form-item label="隧道长度">
<el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度" />
</el-form-item>
<el-form-item label="是否默认">
<el-radio-group v-model="form.isDefault">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="隧道备注">
<el-input v-model="form.remarks" placeholder="请输入隧道备注" />
</el-form-item>
</el-form>
</div>
<!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
<tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" :form="form" ref="tunnelScene"
:tunnelLength="tunnelLength" />
</div>
</template>
<script setup>
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
import ManageBtn from "@/components/manageBtn/index.vue";
import ManageLength from "@/components/manageLength/index.vue";
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 { getUserInfo } from "@/api/login";
import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
import { computed, provide } from "vue";
import { useModelSceneStore } from "@/store/modelSceneStore";
import { ElMessage } from "element-plus";
import {initSceneData} from "../../api/tunnelScene";
const authStore = useAuthStore();
const router = useRouter();
const selectIndex = ref(-1);
const showFan = ref(false);
const drawerLeft = ref(true);
const drawerRight = ref(true);
const currentSite = ref("");
const siteList = ref([])
const currentUser = ref("");
const currentDate = ref(dateFormat());
const tunnelBtn = ref();
const tunnelList = ref([]);
const tunnelId = ref(0);
const routeList = ref([]);
let socket = reactive("");
const serialNumber = ref("SC00DY00GH00ELBT");
let token = getToken();
let send = {
type: "ping",
};
const largeScreenData = ref(null);
const socketData = reactive({
leftData: [],
windPressure: [],
sensor: [],
const tunnelId = reactive(router.currentRoute.value.params.tunnelId);
const userId = reactive(router.currentRoute.value.params.userId);
const type = reactive(router.currentRoute.value.params.type);
const modelStore = useModelSceneStore();
const form = ref({
tunnelName: "",
serialNumber: "",
totalLength: "",
isDefault: false,
remarks: "",
});
onMounted(() => {
nextTick(() => {
showFan.value = true;
});
getUser()
getOtherInfo()
});
const getUser = () => {
getUserInfo().then(res => {
currentUser.value = res.data.user.userName
})
}
const getOtherInfo = () => {
getLargeScreenInfo().then((res) => {
if (res?.code === 1000) {
routeList.value = res.data.routeList
currentSite.value = res.data.siteOption[0].label
siteList.value = res.data.siteOption
tunnelId.value = res.data.tunnelOption[0].value
getTunnel(res.data.siteOption[0].value)
getScreenInfo(tunnelId.value);
}
});
};
const getScreenInfo = async (id) => {
await getLargeScreen(id).then((res) => {
if (res?.code === 1000) {
largeScreenData.value = res.data;
}
});
};
//根据站点id获取隧道信息
const getTunnel = (id) => {
getTunnelBySiteId(id).then((res) => {
if (res?.code === 1000) {
tunnelList.value = res.data
getScreenInfo(res.data[0].value)
}
});
}
const changeTunnel = (e) => {
tunnelId.value = e
let newObj = {}
tunnelList.value.forEach((item, index) => {
if (index === e) {
newObj = item
}
})
getScreenInfo(newObj.value)
nextTick(() => {
showFan.value = true;
});
}
const manageSelect = (index) => {
console.log("首页点击-", index);
if (index === 0) {
router.push("/site");
} else if (index === 1) {
router.push("/tunnel/1");
} else if (index === 2) {
router.push("/user");
const getTunnel = () => {
getTunnelDetail(tunnelId).then((res) => {
if (res?.code === 1000) {
form.value = res.data;
console.log('form.value ',form.value )
}
});
};
const handleCommand = (item) => {
console.log('commads', item)
currentSite.value = item.label
getTunnel(item.value)
}
const closeLeft = () => {
drawerLeft.value = !drawerLeft.value;
getTunnel();
const tunnelLength = computed(() => form.value.totalLength);
const handleGotoDevice = () => {
if (type === 's') {
router.push('/device/' + tunnelId + '/s/' + userId)
} else if (type === 'i') {
router.push('/device/' + tunnelId + '/i/' + userId)
}
};
const closeRight = () => {
drawerRight.value = !drawerRight.value;
const handleGoTunnelMgr = () => {
router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
};
const handleLogout = () => {
ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
authStore.userLogout();
router.push("/login");
})
const handleSave = async () => {
if(form.value.constructionLength==null){
form.value.constructionLength=0
}
const data = {
tunnelId: tunnelId,
tunnelName: form.value.tunnelName,
serialNumber: form.value.serialNumber,
remarks: form.value.remarks,
constructionLength: form.value.constructionLength,
// constructionLength: 500,
tunnelLength: form.value.totalLength,
isDefault: form.value.isDefault,
modelEquipmentList: await modelStore.initModelDataPreview(tunnelId),
};
editTunnel(data).then((res) => {
if (res?.code === 1000) {
ElMessage.success(res.msg);
router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
} else {
ElMessage.error(res.msg);
}
});
};
const previousBtn = () => {
tunnelBtn.value.prev();
};
const nextBtn = () => {
tunnelBtn.value.next();
};
const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
console.log(wsUrl);
socket = new WebSocket(wsUrl);
//连接发生错误的回调方法
socket.onerror = function () {
console.log("ws连接发生错误");
};
//连接成功建立的回调方法
socket.onopen = function () {
console.log("ws连接成功");
};
//接收到消息的回调方法
socket.onmessage = function (event) {
console.log("服务器返回的信息: ", JSON.parse(event.data));
const type = JSON.parse(event.data).type;
const data = JSON.parse(event.data).data;
if (type === "equipment") {
data.forEach((item) => {
if (item.typeKey === "frequency") {
socketData.leftData = data;
} else if (item.typeKey === "windPressure") {
socketData.windPressure = data;
} else if (item.typeKey === "sensor") {
socketData.sensor = data;
}
});
}
};
//连接关闭的回调方法
socket.onclose = function () {
console.log("ws连接关闭");
// initWebSocket()
};
setInterval(() => {
socket.send(JSON.stringify(send));
}, 30000);
};
const closeSocket = () => {
socket.close();
};
initWebSocket();
</script>
<style lang="scss">
.el-dropdown__popper.el-popper {
background: transparent;
//border: none;
border: 1px solid #0E7DAA;
border-radius: 10px;
}
.is-light {
background: rgba(7, 35, 72, 0.9);
}
.el-popper {
padding: 20px;
margin-left: 50px;
width: 150px;
background: rgba(7, 35, 72, 0.9);
.el-scrollbar__wrap {
.el-dropdown__list {
.el-dropdown-menu {
background-color: rgba(7, 35, 72, 0.9);
border-radius: 10px;
padding: 5px;
.el-dropdown-menu__item {
color: #FFFFFF;
//border:none;
padding: 5px;
border-bottom: 1px solid #05FEFF;
&:last-child {
border-bottom: none;
}
}
.el-dropdown-menu__item.hover,
.el-dropdown-menu__item:hover {
background-color: transparent !important;
color: #F7B500;
}
}
}
}
}
</style>
<style lang="scss" scoped>
#main {
height: 100%;
width: 100%;
background-color: #072348;
position: relative;
height: 100%;
width: 100%;
background-color: #072348;
#tunnel-box {
height: 100%;
.box-top {
display: flex;
align-items: center;
justify-content: space-between;
.back-tunnel {
z-index: 2;
position: absolute;
top: 100px;
//left: 80px;
cursor: pointer;
margin: 0 0 0 80px;
display: flex;
align-items: center;
width: 180px;
height: 80px;
line-height: 70px;
border-radius: 11px;
border: 2px solid #08b7b8;
font-size: 42px;
color: #ffffff;
.back-icon {
margin-right: 20px;
margin-left: 23px;
width: 35px;
height: 35px;
background-image: url("@/assets/images/site/zdgl_icon_fh.png");
}
}
.btn-right {
display: flex;
z-index: 2;
position: absolute;
top: 100px;
right: 80px;
.del-btn {
&:first-child {
width: 220px;
margin-right: 40px;
}
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
width: 180px;
height: 80px;
border-radius: 11px;
border: 2px solid #08b7b8;
color: #ffffff;
font-size: 42px;
}
}
}
#tunnel-box {
height: 100%;
}
.edit-box {
z-index: 2;
position: absolute;
top: 250px;
left: 80px;
width: 830px;
//height: 500px;
background-image: url(@/assets/images/transducer/bg.png);
padding: 20px 30px;
box-sizing: border-box;
:deep(.el-radio-group) {
margin-top: 10px;
}
:deep(.el-radio__label) {
color: #ffffff;
font-size: 38px;
}
:deep(.el-radio__inner) {
width: 40px;
height: 40px;
border-radius: 25px;
border: 4px solid #05feff;
background-color: transparent;
}
:deep(.el-radio__input.is-checked + .el-radio__label) {
color: #ffffff;
}
:deep(.el-radio__input.is-checked .el-radio__inner) {
background: #064b66;
border-color: #05feff !important;
}
:deep(.el-radio__inner::after) {
width: 18px;
height: 18px;
background: #05feff;
}
:deep(.el-form-item) {
margin-top: 40px;
}
:deep(.el-form-item__label) {
font-size: 38px;
color: #ffffff;
margin-right: 12px;
line-height: 50px;
}
:deep(.el-input) {
height: 75px;
.el-input__wrapper {
background-color: transparent;
border: 1px solid #08b7b8;
.el-input__inner {
height: auto;
color: #fff;
font-size: 38px;
}
}
}
}
}
</style>

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

@@ -45,8 +45,10 @@ 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: "administrator",
// password: "",
code: "",
uuid: "",
});

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

@@ -22,19 +22,20 @@
<div class="site-box" v-for="item in siteList" :key="item.siteId">
<div class="top">
<span>站点名称：{{ item.siteName }}</span>
<el-checkbox v-model="item.checked" size="large" @change="handleClickSite(item)"/>
<el-checkbox v-if="!item.isDefault" v-model="item.checked" size="large" @change="handleClickSite(item)"/>
<span v-else>默认</span>
</div>
<div class="box-center">
<div class="left-img"></div>
<div class="right-tunnel">
<div>隧道数量：{{ item.tunnelList.length }}条
<div>隧道数量：{{ item.totalTunnel }}条
</div>
<div>
<div class="tunnel" v-if="item.info.tunnelName">
<div class="tunnel" v-if="item.info.tunnelName" @click="goToAddTunnel(item.siteId)">
<div>{{ item.info.tunnelName }}</div>
<div class="tunnel-icon"></div>
<div>施工长度{{ item.info.constructionLength }}米</div>
<div>实现长度{{ item.info.totalLength }}公里
<div>实现长度{{ item.info.totalLength }}米
</div>
</div>
<div class="tunnel-add" @click="goToAddTunnel(item.siteId)">
@@ -65,6 +66,12 @@
<el-form-item label="站点名称">
<el-input v-model="form.siteName" placeholder="请输入站点名称"/>
</el-form-item>
<el-form-item label="是否默认">
<el-radio-group v-model="form.isDefault">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="站点地址">
<el-input v-model="form.address" placeholder="请输入站点地址"/>
</el-form-item>
@@ -86,11 +93,11 @@
</template>
</el-dialog>
<div class="pagination">
<span>首页</span>
<span @click="firstPage" v-if="showFirst">首页</span>
<el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
:total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
@current-change="handleCurrentChange"/>
<span>尾页</span>
@current-change="handleCurrentChange" :hide-on-single-page="true"/>
<span @click="lastPage" v-if="showFirst">尾页</span>
</div>
</div>
</template>
@@ -100,6 +107,7 @@ import {editSite, getSiteDetail, getSiteList, addSite, deleteSite} from "@/api/s
import {ElMessage, ElMessageBox} from "element-plus";
const router = useRouter()
const userId = reactive(router.currentRoute.value.params.userId)
const siteList = ref([
// {
// siteName: '松江站',
@@ -137,8 +145,8 @@ const info = ref({
totalLength: 0
})
const title = ref('新增站点')
const isClick = ref(false);
const isVisited = ref(false);
const showFirst = ref(true)
const total = ref(10);
const showAddIcon = ref(true)
const pageInfo = reactive({
@@ -148,7 +156,8 @@ const pageInfo = reactive({
const form = ref({
address: '',
siteName: '',
describe: ''
describe: '',
isDefault: false
});
const formRules = ref({
siteName: [{required: true, message: '请输入站点名称', trigger: 'blur'}]
@@ -156,10 +165,16 @@ const formRules = ref({
const formInstance = ref()
const getList = () => {
getSiteList({
userId:userId,
...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) {
item.info = info.value
@@ -170,7 +185,6 @@ const getList = () => {
})
siteList.value = res.data.rows;
console.log('res',siteList.value)
});
}
getList()
@@ -192,15 +206,16 @@ const handleClickSite = (type) => {
}
}
const goToAddTunnel = (siteId) => {
router.push('/tunnel/' + siteId)
// router.push('/tunnel/1')
router.push('/tunnel/' + siteId+'/s'+'/'+userId)
}
//重置from表单
const restFrom = () => {
form.value = {
address: '',
siteName: '',
describe: ''
describe: '',
isDefault: false
}
}
const handleEdit = (item) => {
@@ -223,14 +238,24 @@ const handleSubmit = (instance) => {
instance.validate(async (valid) => {
if (!valid) return
if (title.value === '编辑站点') {
editSite(form.value).then(() => {
isVisited.value = false
getList()
editSite(form.value).then((res) => {
if(res.code===1000){
isVisited.value = false
getList()
ElMessage.success(res.msg)
}else {
ElMessage.warning(res.msg)
}
});
} else {
addSite(form.value).then(() => {
isVisited.value = false
getList()
addSite(form.value).then((res) => {
if(res.code===1000){
isVisited.value = false
getList()
ElMessage.success(res.msg)
}else {
ElMessage.warning(res.msg)
}
});
}
})
@@ -238,32 +263,63 @@ const handleSubmit = (instance) => {
const handleChooseAll=()=>{
siteList.value.map(item=>{
item.checked=!item.checked
if(item.checked&&!item.isDefault){
siteIds.value.push(item.siteId)
}else if(!item.checked&&!item.isDefault){
siteIds.value.map((newItem, index) => {
if (newItem === item.siteId) {
siteIds.value.splice(index, 1)
}
})
}
})
}
const handleMoreDelete = () => {
if (siteIds.value.length === 0) {
ElMessage.warning('请先选择站点进行删除')
} else {
ElMessageBox.confirm(`是否确定删除该站点`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
customClass: 'delBox'
}).then(() => {
deleteSite(siteIds.value).then(res => {
if (res.code === 1000) {
ElMessage.success(res.msg)
getList()
siteIds.value = []
siteNameList.value = []
} else {
ElMessage.error(res.msg)
let flag=false
siteList.value.map(item=>{
siteIds.value.map(siteItem=>{
if(item.siteId===siteItem){
if(item.tunnelList.length!==0){
ElMessage.error('该站点下存在隧道，不能删除!')
flag=false
}else {
flag=true
}
}
})
})
if(flag){
ElMessageBox.confirm(`是否确定删除该站点`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
customClass: 'delBox'
}).then(() => {
deleteSite(siteIds.value).then(res => {
if (res.code === 1000) {
ElMessage.success(res.msg)
getList()
siteIds.value = []
siteNameList.value = []
} else {
ElMessage.error(res.msg)
}
})
})
}
}
}
const firstPage=()=>{
pageInfo.pageNum = 1
getList()
}
const lastPage=()=>{
pageInfo.pageNum = total.value/pageInfo.pageSize
getList()
}
//点击页码进行分页功能
const handleCurrentChange = (val) => {
pageInfo.pageNum = val
@@ -272,6 +328,37 @@ const handleCurrentChange = (val) => {
</script>
<style scoped lang="scss">
:deep(.el-radio-group) {
margin-top: 10px;
}
:deep(.el-radio__label) {
color: #FFFFFF;
font-size: 38px;
}
:deep(.el-radio__inner) {
width: 40px;
height: 40px;
border-radius: 25px;
border: 4px solid #05FEFF;
background-color: transparent;
}
:deep(.el-radio__input.is-checked+.el-radio__label) {
color: #FFFFFF;
}
:deep(.el-radio__input.is-checked .el-radio__inner ) {
background: #064B66;
border-color: #05FEFF !important;
}
:deep(.el-radio__inner::after) {
width: 18px;
height: 18px;
background: #05FEFF;
}
.clickColor {
position: absolute;
top: 7px;
@@ -407,7 +494,7 @@ const handleCurrentChange = (val) => {
flex-wrap: wrap;
padding-left: 100px;
padding-right: 100px;
justify-content: space-between;
//justify-content: space-between;
box-sizing: border-box;
overflow: hidden;
@@ -431,7 +518,7 @@ const handleCurrentChange = (val) => {
.site-box {
margin-top: 122px;
//margin-right: 1%;
margin-right: 32px;
padding: 40px 50px;
width: 1250px;
height: 750px;
@@ -451,12 +538,12 @@ const handleCurrentChange = (val) => {
color: #FFFFFF;
line-height: 42px;
> div:last-child {
cursor: pointer;
width: 40px;
height: 40px;
> span:last-child {
padding:1px 8px;
font-size: 32px;
border: 2px solid #05FEFF;
border-radius: 25px;
border-radius:10px;
position: relative;
}
}
@@ -487,6 +574,7 @@ const handleCurrentChange = (val) => {
margin-top: 29px;
.tunnel {
cursor: pointer;
margin-right: 20px;
width: 280px;
height: 350px;
@@ -520,6 +608,7 @@ const handleCurrentChange = (val) => {
}
.tunnel-add {
cursor: pointer;
width: 280px;
height: 350px;
background: #1891A3;

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

@@ -1,10 +1,13 @@
<template>
<div class="tunnel-bgc">
<div class="box-top">
<div class="back-tunnel" @click="router.back(-1)">
<div class="back-tunnel" @click="handleGoSiteOrIndex">
<div class="back-icon"></div>
<span>返回</span>
</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">
@@ -19,22 +22,22 @@
</div>
</div>
<div class="box-content">
<div class="site-box" v-for="item in tunnelList" :key="item.tunnelId"
@click="handleGoToEditTunnel(item.tunnelId)">
<div class="site-box" v-for="item in tunnelList" :key="item.tunnelId">
<div class="top">
<span>{{ item.tunnelName }}</span>
<span>施工长度500米 隧道长度10公里</span>
<el-checkbox v-model="item.checked" size="large" @change="handleClickSite(item)"/>
<span>施工长度{{ item.constructionLength }}米 隧道长度{{ item.totalLength }}米</span>
<el-checkbox v-if="!item.isDefault" v-model="item.checked" size="large" @change="handleClickSite(item)"/>
<span v-else>默认</span>
</div>
<div class="box-center">
<div>
<div class="left-img"></div>
<div>
<div class="edit-btn" @click.stop="handleEdit">
<div class="edit-btn" @click.stop="handleGoToEditTunnel(item.tunnelId)">
<div class="edit-icon"></div>
<div>隧道编辑</div>
</div>
<div class="edit-btn" @click.stop="handleEditDevice">
<div class="edit-btn" @click.stop="handleEditDevice(item.tunnelId)">
<div class="edit-icon-two"></div>
<div>设备管理</div>
</div>
@@ -46,9 +49,9 @@
<span>风机异常</span>
</div>
<div class="icons-block">
<div v-for="item in iconsList" :key="item.icon" class="icon-text">
<div :style="{ backgroundImage: 'url(' +getImageUrl(item.icon)+')' }" class="icon"></div>
<span>{{ item.name }}：{{ item.num }}</span>
<div v-for="equItem in iconsList" :key="item.icon" class="icon-text">
<div :style="{ backgroundImage: 'url(' +getImageUrl(equItem.icon)+')' }" class="icon"></div>
<span>{{ equItem.name }}：{{ item.tunnelEquipmentAmountInfo[equItem.type] }}</span>
</div>
</div>
</div>
@@ -63,15 +66,21 @@
<div class="siteId">
<span>{{ title }}</span>
</div>
<el-form :model="form" :label-position="right" label-width="168px">
<el-form-item label="隧道名称">
<el-input v-model="form.name" placeholder="请输入隧道名称"/>
<el-form :model="form" :label-position="right" label-width="188px" :rules="formRules" ref="formInstance">
<el-form-item label="隧道名称" required>
<el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
</el-form-item>
<el-form-item label="序列号">
<el-form-item label="序列号" required>
<el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
</el-form-item>
<el-form-item label="隧道长度">
<el-input type="number" v-model="form.tunnelLength" placeholder="请输入隧道长度"/>
<el-form-item label="隧道长度" required>
<el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
</el-form-item>
<el-form-item label="是否默认">
<el-radio-group v-model="form.isDefault">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="隧道备注">
<el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
@@ -81,25 +90,38 @@
<div class="cancel-btn" @click="isVisited=false">
取消
</div>
<div class="sure-btn">
<div class="sure-btn" @click="handleSubmit(formInstance)">
确定
</div>
</div>
</el-dialog>
<div class="pagination">
<span>首页</span>
<el-pagination background :page-size="6" :total="50" prev-text="上一页" next-text="下一页" layout="prev, pager, next"/>
<span>尾页</span>
<span @click="firstPage" v-if="showFirst">首页</span>
<el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
:total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
@current-change="handleCurrentChange" :hide-on-single-page="true"/>
<span @click="lastPage" v-if="showFirst">尾页</span>
</div>
</div>
</template>
<script setup>
import {ElMessage, ElMessageBox} from "element-plus";
import {getTunnelList, addTunnel, deleteTunnel} from "@/api/tunnelManage";
import {onMounted} from "vue";
import {getSiteDetail} from "@/api/site";
const router = useRouter()
const showAddIcon = ref(true)
const siteId = reactive(router.currentRoute.value.params.siteId)
const userId = reactive(router.currentRoute.value.params.userId)
const type = reactive(router.currentRoute.value.params.type)
const formRules = ref({
tunnelName: [{required: true, message: '请输入隧道名称', trigger: 'blur'}],
serialNumber: [{required: true, message: '请输入序列号', trigger: 'blur'}]
})
const showFirst = ref(true)
const formInstance = ref()
const tunnelList = ref([
{
tunnelName: '一号隧道',
@@ -172,75 +194,175 @@ const iconsList = ref([
{
icon: 'sd_icon_fj.png',
name: '风机',
num: 2
type: 'frequency',
num: 0
},
{
icon: 'sd_icon_sd.png',
name: '湿度',
num: '无'
type: 'humidness',
num: 0
},
{
icon: 'sd_icon_fy.png',
name: '风压',
num: 10
type: 'windPressure',
num: 0
},
{
icon: 'sd_icon_yq.png',
name: '氧气',
num: '无'
type: 'oxygen',
num: 0
},
{
icon: 'sd_icon_fs.png',
name: '风速',
num: 11
type: 'windSpeed',
num: 0
},
{
icon: 'sd_icon_fc.png',
name: '粉尘',
type: 'dust',
num: 1
},
{
icon: 'sd_icon_wd.png',
name: '温度',
num: 11
type: 'temperature',
num: 0
},
{
icon: 'sd_icon_qt.png',
name: '有害气体',
num: '无'
type: 'harmfulGas',
num: 0
},
])
const title = ref('新增隧道')
const isVisited = ref(false);
const tunnelIds = ref([])
const tunnelNameList = ref([])
const siteName = ref('')
const form = ref({
name: '',
tunnelName: '',
serialNumber: '',
tunnelLength: '',
remarks: ''
totalLength: '',
remarks: '',
isDefault: false
});
const isEdit = ref(false)
const bgImage = computed(() => (isEdit.value ? "zdgl_bj.png" : "sdgl_bjtq.png"));
const pageInfo = reactive({
pageNum: 1,
pageSize: 12
});
const total = ref(10);
onMounted(() => {
// getSiteDetail(siteId).then((res) => {
// siteName.value = res.data.siteName
// });
})
const handleGoSiteOrIndex = () => {
if (type === 's') {
router.push('/site/' + userId)
} else if (type === 'i') {
router.push('/')
}
}
const getList = () => {
getTunnelList({
siteId: siteId,
...pageInfo
}).then(res => {
if (res.code === 1000) {
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 = () => {
pageInfo.pageNum = 1
getList()
}
const lastPage = () => {
pageInfo.pageNum = total.value / pageInfo.pageSize
getList()
}
//点击页码进行分页功能
const handleCurrentChange = (val) => {
pageInfo.pageNum = val
getList()
}
const handleSubmit = (instance) => {
// if (!instance) return
// console.log('instance',instance)
// instance.validate(async (valid) => {
// console.log('valid',valid)
// if (!valid) return
const data = {
siteId: siteId,
...form.value
}
if (form.value.tunnelName && form.value.serialNumber && form.value.totalLength) {
addTunnel(data).then(res => {
if (res.code === 1000) {
ElMessage.success('新增成功')
getList()
isVisited.value = false
} else {
ElMessage.warning(res.msg)
}
})
} else {
ElMessage.warning('请先完善信息再新增')
}
// })
}
const handleGoToEditTunnel = (tunnelId) => {
isEdit.value = true
router.push('/edit')
if (type === 's') {
router.push('/edit/' + tunnelId + '/s/' + userId)
} else if (type === 'i') {
router.push('/edit/' + tunnelId + '/i/' + userId)
}
}
const handleChooseAll = () => {
tunnelList.value.map(item => {
item.checked = !item.checked
if (item.checked && !item.isDefault) {
tunnelIds.value.push(item.tunnelId)
} else if (!item.checked && !item.isDefault) {
tunnelIds.value.map((newItem, index) => {
if (newItem === item.tunnelId) {
tunnelIds.value.splice(index, 1)
}
})
}
})
}
const handleEdit = () => {
title.value = '编辑隧道'
isVisited.value = true
const handleEditDevice = (tunnelId) => {
if (type === 's') {
router.push('/device/' + tunnelId + '/s/' + userId)
} else if (type === 'i') {
router.push('/device/' + tunnelId + '/i/' + userId)
}
}
const handleEditDevice = () => {
router.push('/device/' + 1)
const restFrom = () => {
form.value = {
tunnelName: '',
serialNumber: '',
totalLength: '',
remarks: '',
isDefault: false
}
}
const handleAdd = () => {
restFrom()
title.value = '新增隧道'
isVisited.value = true
}
@@ -249,19 +371,19 @@ const getImageUrl = (name) => {
}
const handleClickSite = (type) => {
if (type.checked) {
tunnelIds.value.push(type.siteId)
tunnelNameList.value.push(type.siteName)
tunnelIds.value.push(type.tunnelId)
tunnelNameList.value.push(type.tunnelName)
} else {
// tunnelIds.value.map((item, index) => {
// if (item === type.siteId) {
// tunnelIds.value.splice(index, 1)
// }
// })
// tunnelNameList.value.map((item, index) => {
// if (item === type.siteName) {
// tunnelNameList.value.splice(index, 1)
// }
// })
tunnelIds.value.map((item, index) => {
if (item === type.tunnelId) {
tunnelIds.value.splice(index, 1)
}
})
tunnelNameList.value.map((item, index) => {
if (item === type.tunnelName) {
tunnelNameList.value.splice(index, 1)
}
})
}
}
const handleMoreDelete = () => {
@@ -274,16 +396,16 @@ const handleMoreDelete = () => {
type: 'warning',
customClass: 'delBox'
}).then(() => {
// deleteSite(tunnelIds.value).then(res => {
// if (res.code === 1000) {
// ElMessage.success(res.msg)
// getList()
// tunnelIds.value = []
// tunnelNameList.value = []
// } else {
// ElMessage.error(res.msg)
// }
// })
deleteTunnel(tunnelIds.value).then(res => {
if (res.code === 1000) {
ElMessage.success(res.msg)
getList()
tunnelIds.value = []
tunnelNameList.value = []
} else {
ElMessage.error(res.msg)
}
})
})
}
}
@@ -291,6 +413,50 @@ const handleMoreDelete = () => {
</script>
<style scoped lang="scss">
.site-name {
position: absolute;
left: 250px;
z-index: 2;
margin-left: 120px;
height: 61px;
font-size: 46px;
font-weight: bold;
color: #FFFFFF;
line-height: 61px;
}
:deep(.el-radio-group) {
margin-top: 10px;
}
:deep(.el-radio__label) {
color: #FFFFFF;
font-size: 38px;
}
:deep(.el-radio__inner) {
width: 40px;
height: 40px;
border-radius: 25px;
border: 4px solid #05FEFF;
background-color: transparent;
}
:deep(.el-radio__input.is-checked+.el-radio__label) {
color: #FFFFFF;
}
:deep(.el-radio__input.is-checked .el-radio__inner ) {
background: #064B66;
border-color: #05FEFF !important;
}
:deep(.el-radio__inner::after) {
width: 18px;
height: 18px;
background: #05FEFF;
}
:deep(.el-dialog) {
border: 2px solid #05FEFF;
background: #0D6578;
@@ -408,7 +574,7 @@ const handleMoreDelete = () => {
flex-wrap: wrap;
padding-left: 67px;
padding-right: 70px;
justify-content: space-between;
//justify-content: space-between;
box-sizing: border-box;
overflow: hidden;
@@ -431,7 +597,7 @@ const handleMoreDelete = () => {
}
.site-box {
cursor: pointer;
//cursor: pointer;
margin-top: 50px;
margin-right: 1.5%;
padding: 40px 30px;
@@ -441,9 +607,9 @@ const handleMoreDelete = () => {
//box-sizing: border-box;
position: relative;
&:hover {
background-image: url('@/assets/images/tunnel/sdgl_bjtq.png');
}
//&:hover {
// background-image: url('@/assets/images/tunnel/sdgl_bjtq.png');
//}
&:nth-child(4n) {
margin-right: 0;
@@ -462,23 +628,13 @@ const handleMoreDelete = () => {
color: #5CE4F2;
}
> div:last-child {
cursor: pointer;
width: 40px;
height: 40px;
border: 2px solid #05FEFF;
border-radius: 25px;
position: relative;
.clickColor {
position: absolute;
top: 7px;
left: 6.5px;
width: 25px;
height: 25px;
background-color: #05FEFF;
border-radius: 25px;
}
> span:last-child {
padding: 1px 8px;
font-size: 32px;
border: 2px solid #05FEFF;
border-radius: 10px;
position: relative;
}
}

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

@@ -1,18 +1,24 @@
<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>
<!-- <manage-length class="tunnel-length"></manage-length>-->
<div class="top-length">
<span>隧道总长度: {{ tunnelLength }}米</span>
<span>当前施工长度: {{ constructionLength }}米</span>
</div>
<div class="top-right">
<div class="current-site">
当前站点：<span>{{ currentSite }}</span>
<el-dropdown trigger="click" @command="handleCommand">
<el-dropdown trigger="click" @command="handleChangeSite">
<div class="toggle"></div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ item.label
}}</el-dropdown-item>
<el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
item.label
}}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@@ -24,9 +30,10 @@
</div>
</div>
</div>
<!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->\
<!-- 一进去的话应该是预览模式，所以引入这个组件 -->
<preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId"></preview-scene>
<!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
<!-- 一进去的话应该是预览模式，所以引入这个组件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">
@@ -63,22 +70,22 @@
</template>
<script setup>
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
import PreviewScene from "@/components/content/tunnelScene/PreviewScene.vue"
import FanInfo from "@/components/content/fanInfo/FanInfo.vue";
import TransducerList from "@/components/content/transducerList/TransducerList.vue";
import UsedEle from "@/components/content/usedEle/UsedEle.vue";
import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/index.vue";
import ManageLength from "@/components/manageLength/index.vue";
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";
import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
const authStore = useAuthStore();
const router = useRouter();
@@ -86,16 +93,54 @@ 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([])
const currentUser = ref("");
const currentUserId = ref(0);
const currentDate = ref(dateFormat());
const tunnelBtn = ref();
const tunnelList = ref([]);
const tunnelId = ref(0);
const tunnelLength = ref(0);
const constructionLength = ref(0);
const routeList = ref([]);
// const form = ref({
// tunnelName: "",
// serialNumber: "",
// totalLength: "",
// isDefault: false,
// remarks: "",
// });
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 = {
@@ -107,51 +152,72 @@ const socketData = reactive({
windPressure: [],
sensor: [],
});
onMounted(() => {
nextTick(() => {
showFan.value = true;
});
getUser()
getOtherInfo()
});
const getUser = () => {
getUserInfo().then(res => {
currentUser.value = res.data.user.userName
currentUserId.value = res.data.user.userId
})
}
const getDefaultSite = (siteId) => {
// console.log('siteList.value',siteList.value)
// getSiteDetail(siteId).then((res) => {
// console.log('res',res)
// });
}
const getOtherInfo = () => {
getLargeScreenInfo().then((res) => {
if (res?.code === 1000) {
routeList.value = res.data.routeList
let routeArr = [];
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[0].value
currentSite.value = res.data.siteOption[0].label
siteList.value = res.data.siteOption
tunnelId.value = res.data.tunnelOption[0].value
tunnelList.value = res.data.tunnelOption
getTunnel(res.data.siteOption[0].value)
getScreenInfo(tunnelId.value);
}
});
};
const getScreenInfo = async (id) => {
await getLargeScreen(id).then((res) => {
if (res?.code === 1000) {
largeScreenData.value = res.data;
}
});
const getScreenInfo = (id) => {
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)
}
});
}
const changeTunnel = (e) => {
tunnelId.value = e
let newObj = {}
tunnelList.value.forEach((item, index) => {
if (index === e) {
@@ -165,17 +231,28 @@ const changeTunnel = (e) => {
}
const manageSelect = (index) => {
console.log("首页点击-", index);
if (index === 0) {
router.push("/site");
} else if (index === 1) {
router.push("/tunnel/"+tunnelId.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 handleCommand = (item) => {
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;
@@ -243,8 +320,33 @@ const closeSocket = () => {
socket.close();
};
initWebSocket();
// watch(
// () => tunnelId.value,
// (now) => {
// tunnelId.value = now
// },
// { deep: true }
// )
// const getTunnelPreview = () => {
// getTunnelDetail(tunnelId).then((res) => {
// if (res?.code === 1000) {
// form.value = res.data;
// }
// });
// };
// getTunnelPreview();
</script>
<style lang="scss">
//.el-drawer__body{
// width: 100%;
// display: flex!important;
// flex-direction: column!important;
// flex: 1;
// height: 100%;
//}
.el-dropdown__popper.el-popper {
background: transparent;
//border: none;

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

@@ -10,9 +10,9 @@
<!-- <div class="all-btn" @click="handleAll">-->
<!-- 全选-->
<!-- </div>-->
<div class="all-btn del-btn" @click="handleDelete">
删除
</div>
<!-- <div class="all-btn del-btn" @click="handleDelete">-->
<!-- 删除-->
<!-- </div>-->
</div>
</div>
<div class="user-content">
@@ -24,12 +24,18 @@
v-model="username"
clearable
placeholder="输入搜索内容"
@clear="getInfo"
/>
</div>
<el-button type="primary" :icon="Search" style="margin-left: 20px" @click="getInfo">搜索</el-button>
</div>
<div>用户管理</div>
<div class="add-btn" @click="handleAddUser">添加用户</div>
<div class="all-del-btn">
<div class="add-btn" @click="handleAddUser">添加用户</div>
<div class="all-btn del-btn" @click="handleDelete">
删除
</div>
</div>
</div>
<div class="device-table">
<el-table stripe ref="multipleTable" @select="handleSelect"
@@ -41,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;"
@@ -58,30 +69,38 @@
<span>{{ title }}</span>
</div>
<el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="240px">
<el-form-item label="输入用户名称">
<el-input v-model="form.userName" placeholder="请输入用户名称"/>
<el-form-item label="当前站点">
<div class="current-site">{{ currentSite }}<span>如果需要切换站点,请返回首屏切换</span></div>
</el-form-item>
<el-form-item label="输入用户昵称">
<el-input v-model="form.nickName" 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="请输入密码"/>
</el-form-item>
<el-form-item label="输入昵称">
<el-input v-model="form.nickName" placeholder="请输入昵称"/>
</el-form-item>
<el-form-item label="输入电话号码">
<el-input v-model="form.phoneNumber" placeholder="输入电话号码"/>
</el-form-item>
<el-form-item label="输入密码" v-if="title==='添加用户'">
<el-input v-model="form.password" placeholder="请输入密码"/>
<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
@@ -89,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"
@@ -109,11 +128,11 @@
</template>
</el-dialog>
<div class="pagination">
<span>首页</span>
<span @click="firstPage" v-if="showFirst">首页</span>
<el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
:total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
@current-change="handleCurrentChange"/>
<span>尾页</span>
@current-change="handleCurrentChange" :hide-on-single-page="true"/>
<span @click="lastPage" v-if="showFirst">尾页</span>
</div>
</div>
</template>
@@ -124,6 +143,7 @@ import {addUser, editUser, getUser, getRoleOption} from "@/api/user";
import {ElMessage, ElMessageBox} from "element-plus";
import {getTunnelOption} from "@/api/tunnel";
import {deleteUser, getUserDetail} from "../../api/user";
import {getSiteDetail} from "@/api/site";
const router = useRouter()
const title = ref('添加用户')
@@ -131,11 +151,13 @@ const siteId = reactive(router.currentRoute.value.params.siteId)
const tunnelIndex = ref()
const username = ref()
const userIds = ref()
const showFirst = ref(true)
const currentSite = ref('')
const formInstance = ref()
const userData = ref([])
const pageInfo = reactive({
pageNum: 1,
pageSize: 6
pageSize: 10
});
const total = ref(10);
const isVisited = ref(false);
@@ -144,34 +166,41 @@ 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
}
})
}
const handleAddUser = () => {
reset()
title.value = '添加用户'
isVisited.value = true
getSiteDetail(siteId).then((res) => {
currentSite.value = res.data.siteName
});
}
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 = '修改用户'
@@ -181,18 +210,22 @@ const handleAll = () => {
multipleTable.value.toggleAllSelection()
}
const handleDelete = () => {
ElMessageBox.confirm(`是否确认删除该用户吗?`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteUser(userIds.value).then(res => {
if (res.code === 1000) {
ElMessage.success(res.msg)
getInfo()
}
if (userIds.value ===undefined) {
ElMessage.warning('请先选择用户进行删除')
} else {
ElMessageBox.confirm(`是否确认删除该用户吗?`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteUser(userIds.value).then(res => {
if (res.code === 1000) {
ElMessage.success(res.msg)
getInfo()
}
})
})
})
}
}
const reset = () => {
form.value = {
@@ -200,8 +233,9 @@ const reset = () => {
userName: '',
nickName: '',
phoneNumber: '',
state: '1',
roleId: [],
tunnelIds: []
tunnelList: []
}
}
const getRoleOptionInfo = () => {
@@ -215,39 +249,64 @@ getRoleOptionInfo()
const getInfo = () => {
getUser({
siteId: siteId,
userName: username.value
userName: username.value,
...pageInfo
}).then(res => {
if (res.code === 1000) {
console.log('res', res)
userData.value = res.data.rows
total.value = res.data.total
showFirst.value = total.value / pageInfo.pageSize >= 1;
}
})
}
getInfo()
const firstPage = () => {
pageInfo.pageNum = 1
getInfo()
}
const lastPage = () => {
pageInfo.pageNum = total.value / pageInfo.pageSize
getInfo()
}
//点击页码进行分页功能
const handleCurrentChange = (val) => {
pageInfo.pageNum = val
getInfo()
}
const handleSubmit = async (formInstance) => {
if (!formInstance) return;
formInstance.validate(async (valid) => {
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 => {
if (res.code === 1000) {
getInfo()
isVisited.value = false
ElMessage.success(res.msg)
} else {
ElMessage.warning(res.msg)
}
})
} 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
ElMessage.success(res.msg)
} else {
ElMessage.warning(res.msg)
}
@@ -270,6 +329,26 @@ const handleSelect = async (selection, row) => {
</script>
<style scoped lang="scss">
:deep(.el-input .el-input__password) {
font-size: 60px;
}
:deep(.el-input__clear) {
font-size: 40px;
}
.current-site {
font-size: 41px;
color: #FFFFFF;
margin-top: 12px;
> span {
font-size: 38px !important;
color: darkgray !important;
margin-left: 20px;
}
}
:deep(.el-table__header-wrapper .el-checkbox) {
display: none
}
@@ -357,31 +436,32 @@ const handleSelect = async (selection, row) => {
}
}
.all-del-btn {
display: flex;
.del-btn {
width: 168px;
height: 60px;
background: #08B7B8;
border-radius: 11px;
}
}
.all-btn {
cursor: pointer;
padding-left: 53px;
width: 178px;
height: 70px;
line-height: 70px;
border-radius: 11px;
border: 2px solid #08B7B8;
color: #FFFFFF;
font-size: 38px;
.all-del-btn {
display: flex;
&:last-child {
margin-left: 40px;
margin-right: 70px;
}
.del-btn {
width: 168px;
height: 60px;
background: #08B7B8;
border-radius: 11px;
}
.all-btn {
cursor: pointer;
padding-left: 53px;
width: 178px;
height: 70px;
line-height: 70px;
border-radius: 11px;
border: 2px solid #08B7B8;
color: #FFFFFF;
font-size: 38px;
&:last-child {
margin-left: 40px;
}
}
}
@@ -400,7 +480,7 @@ const handleSelect = async (selection, row) => {
border-radius: 20px;
border: 2px solid #05FEFF;
box-sizing: border-box;
padding: 73px 98px;
padding: 73px 58px;
.user-top {
width: 100%;
@@ -419,14 +499,15 @@ const handleSelect = async (selection, row) => {
.add-btn {
cursor: pointer;
width: 170px;
height: 60px;
line-height: 60px;
width: 180px;
height: 70px;
line-height: 70px;
background: #08B7B8;
border-radius: 6px;
color: #FFFFFF;
font-size: 35px;
font-size: 38px;
padding-left: 19px;
//margin-left: 20px;
}
.search-box {
@@ -434,25 +515,25 @@ const handleSelect = async (selection, row) => {
:deep(.el-button) {
width: 140px;
height: 60px;
height: 70px;
background: #08B7B8;
border-radius: 6px;
border: none;
font-size: 35px;
font-size: 38px;
color: #FFFFFF;
}
:deep(.el-input__wrapper) {
width: 292px;
height: 60px;
width: 300px;
height: 70px;
border-radius: 6px;
border: 1px solid #05FEFF;
background-color: transparent;
font-size: 35px;
font-size: 38px;
.el-input__inner {
height: 60px;
line-height: 60px;
height: 70px;
line-height: 70px;
color: #FFFFFF;
}
}
@@ -460,7 +541,7 @@ const handleSelect = async (selection, row) => {
}
:deep(.el-table--fit) {
width: 2000px !important;
width: 2110px !important;
}
:deep(.cell) {