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

Merge pull request '邓洁: 接口部分对接' (#194) from dengjie into dev

Browse Source 
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/194
This commit is contained in:
odjbin
2023-12-28 08:23:26 +00:00
parent 452d76f198 64b3052348
commit 9017465b15
8 changed files with 479 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
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 { .top-right {
z-index: 2; z-index: 2;
position: absolute; position: absolute;
@@ -487,43 +504,53 @@ body,
background: #072247 !important; background: #072247 !important;
border: 1px solid #0F82AF !important; border: 1px solid #0F82AF !important;
} }
.el-popper { .el-popper {
max-width: 200px !important; max-width: 200px !important;
box-sizing: border-box; box-sizing: border-box;
} }
.el-popper__arrow::before { .el-popper__arrow::before {
display: none; 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; color: #FFFFFF;
} }
} }
.el-select .el-input .el-select__caret { .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; .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
width:198px!important; background-color: #064B66 !important;
width: 198px !important;
} }
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
background-color: #064B66!important; .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
width:200px!important; background-color: #064B66 !important;
width: 200px !important;
} }
.el-select-tags-wrapper{
.el-tag{ .el-select-tags-wrapper {
padding: 28px 20px!important; .el-tag {
padding: 28px 20px !important;
font-size: 35px; font-size: 35px;
.el-icon{
.el-icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
font-size: 40px!important; font-size: 40px !important;
} }
} }
} }
.current-site { .current-site {
.el-select-dropdown { .el-select-dropdown {
width: 200px !important; width: 200px !important;

6
src/router/index.js
View File

@@ -24,7 +24,7 @@ const routes = [
}, },
}, },
{ {
path: '/edit/:tunnelId(\\d+)', path: '/edit/:tunnelId(\\d+)/:type',
name: 'tunneledit', name: 'tunneledit',
component: () => import('@/views/edit/edit.vue'), component: () => import('@/views/edit/edit.vue'),
meta: { meta: {
@@ -60,7 +60,7 @@ const routes = [
} }
}, },
{ {
path: '/tunnel/:siteId(\\d+)', path: '/tunnel/:siteId(\\d+)/:type',
name: 'tunnel', name: 'tunnel',
component: () => import('@/views/tunnel-manage/index.vue'), component: () => import('@/views/tunnel-manage/index.vue'),
meta: { meta: {
@@ -69,7 +69,7 @@ const routes = [
} }
}, },
{ {
path: '/device/:tunnelId(\\d+)', path: '/device/:tunnelId(\\d+)/:type',
name: 'device', name: 'device',
component: () => import('@/views/device-manage/index.vue'), component: () => import('@/views/device-manage/index.vue'),
meta: { meta: {

15
src/store/modelSceneStore.js
View File

@@ -44,24 +44,11 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
}); });
}); });
} }
function getTunnelEditAllList(tunnelId = 1) {
return new Promise((resolve, reject) => {
initSceneData(tunnelId)
.then((res) => {
allEditList.value = res.data;
resolve(JSON.parse(allEditList.value));
})
.catch((Error) => {
reject();
});
});
}
return { return {
equipmentList, equipmentList,
initData, initData,
saveSceneData, saveSceneData,
deleteEquipment, deleteEquipment,
getEquipmentList, getEquipmentList
getTunnelEditAllList,
}; };
}); });

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

@@ -1,12 +1,12 @@
<template> <template>
<div class="tunnel-bgc"> <div class="tunnel-bgc">
<div class="box-top"> <div class="box-top">
<div class="back-tunnel" @click="router.back(-1)"> <div class="back-tunnel" @click="handleGoTunnelMgr">
<div class="back-icon"></div> <div class="back-icon"></div>
<span>返回</span> <span>返回</span>
</div> </div>
<div class="tunnel-name"> <div class="tunnel-name">
一号隧道 {{ tunnelName }}
</div> </div>
<div class="tunnel-title"></div> <div class="tunnel-title"></div>
</div> </div>
@@ -281,10 +281,10 @@
<script setup> <script setup>
import {getEquipmentList, editFan} from "@/api/tunnelManage"; import {getEquipmentList, editFan} from "@/api/tunnelManage";
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";
import {editEquipment} from "../../api/tunnelManage"; import {editEquipment, getTunnelDetail} from "@/api/tunnelManage";
const router = useRouter() const router = useRouter()
const tunnelId = reactive(router.currentRoute.value.params.tunnelId) const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
const type = reactive(router.currentRoute.value.params.type)
const collectionFrequency = ref(0) const collectionFrequency = ref(0)
const changeIndex = ref(1) const changeIndex = ref(1)
const fanData = ref([ const fanData = ref([
@@ -472,6 +472,9 @@ const fenliuData = ref([
const fanItem=ref({}) const fanItem=ref({})
const windItem=ref({}) const windItem=ref({})
const sensorItem=ref({}) const sensorItem=ref({})
const siteId=ref(0)
const tunnelName=ref('')
const changeCurrent = (row) => { const changeCurrent = (row) => {
fanItem.value=getFanEditItem(row) fanItem.value=getFanEditItem(row)
windItem.value=getWindEditItem(row) windItem.value=getWindEditItem(row)
@@ -547,6 +550,19 @@ const getList = () => {
} }
}) })
} }
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)
}
getList() getList()
</script> </script>

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

@@ -1,202 +1,241 @@
<template> <template>
<div id="main"> <div id="main">
<div class="box-top"> <div class="box-top">
<div class="back-tunnel" @click="router.back(-1)"> <div class="back-tunnel" @click="handleGoTunnelMgr">
<div class="back-icon"></div> <div class="back-icon"></div>
<span>返回</span> <span>返回</span>
</div> </div>
<div class="tunnel-title"></div> <div class="tunnel-title"></div>
<div class="btn-right"> <div class="btn-right">
<div class="del-btn" @click="handleGotoDevice"> <div class="del-btn" @click="handleGotoDevice">
设备管理 设备管理
</div>
<div class="del-btn" @click="handleSave">
保存
</div>
</div>
</div> </div>
<div class="edit-box"> <div class="del-btn" @click="handleSave">
<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-input v-model="form.remarks" placeholder="请输入隧道备注" />
</el-form-item>
</el-form>
</div> </div>
</div>
<!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
<tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" ref="tunnelScene" :tunnelLength="tunnelLength" />
</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" ref="tunnelScene" :tunnelLength="tunnelLength"/>
</div>
</template> </template>
<script setup> <script setup>
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue"; import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
import { editTunnel, getTunnelDetail } from "@/api/tunnelManage"; import {editTunnel, getTunnelDetail} from "@/api/tunnelManage";
import { computed } from "vue"; import {computed} from "vue";
import { useModelSceneStore } from "@/store/modelSceneStore"; import {useModelSceneStore} from "@/store/modelSceneStore";
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";
const router = useRouter(); const router = useRouter();
const tunnelId = reactive(router.currentRoute.value.params.tunnelId) const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
const type = reactive(router.currentRoute.value.params.type)
const store = useModelSceneStore(); const store = useModelSceneStore();
const form = ref({ const form = ref({
tunnelName: '', tunnelName: '',
serialNumber: '', serialNumber: '',
totalLength: '', totalLength: '',
remarks: '' isDefault: false,
remarks: ''
}); });
const equipmentList = ref([]) const equipmentList = ref([])
onMounted(async () => { onMounted(async () => {
equipmentList.value = await store.getEquipmentList(); equipmentList.value = await store.getEquipmentList();
}) })
const getTunnel = () => { const getTunnel = () => {
getTunnelDetail(tunnelId).then((res) => { getTunnelDetail(tunnelId).then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
form.value = res.data form.value = res.data
console.log('for', form.value) }
} });
});
} }
getTunnel() getTunnel()
const tunnelLength = computed(() => form.value.totalLength); const tunnelLength = computed(() => form.value.totalLength);
const handleGotoDevice = () => { const handleGotoDevice = () => {
router.push('/device/' + tunnelId) router.push('/device/' + tunnelId)
} }
const handleSave =async () => { const handleGoTunnelMgr=()=>{
const data = { router.push('/tunnel/' + form.value.siteId+'/'+type)
tunnelId: tunnelId, }
tunnelName: form.value.tunnelName, const handleSave = async () => {
serialNumber: form.value.serialNumber, const data = {
remarks: form.value.remarks, tunnelId: tunnelId,
// constructionLength:form.value.constructionLength, tunnelName: form.value.tunnelName,
constructionLength: 500, serialNumber: form.value.serialNumber,
tunnelLength: form.value.totalLength, remarks: form.value.remarks,
tunnelThreeConfig: JSON.stringify(await store.getEquipmentList()) // constructionLength:form.value.constructionLength,
constructionLength: 500,
tunnelLength: form.value.totalLength,
isDefault: form.value.isDefault,
tunnelThreeConfig: JSON.stringify(await store.getEquipmentList())
}
editTunnel(data).then((res) => {
if (res?.code === 1000) {
ElMessage.success(res.msg)
router.push('/tunnel/' + form.value.siteId+'/'+type)
} }
console.log('data', data, form.value.tunnelLength) });
editTunnel(data).then((res) => {
if (res?.code === 1000) {
console.log('re---s', res)
ElMessage.success(res.msg)
router.push('/tunnel/'+tunnelId)
// form.value=res.data
}
});
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#main { #main {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: #072348; background-color: #072348;
.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;
}
.box-top {
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
justify-content: space-between; cursor: pointer;
width: 180px;
.back-tunnel { height: 80px;
z-index: 2; border-radius: 11px;
position: absolute; border: 2px solid #08B7B8;
top: 100px; color: #FFFFFF;
//left: 80px; font-size: 42px;
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%;
#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;
} }
.edit-box { :deep(.el-radio__label) {
z-index: 2; color: #FFFFFF;
position: absolute; font-size: 38px;
top: 250px;
left: 80px;
width: 830px;
height: 500px;
background-image: url(@/assets/images/transducer/bg.png);
padding: 0 30px;
box-sizing: border-box;
: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;
}
}
}
} }
: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> </style>

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

@@ -30,7 +30,7 @@
<div>隧道数量：{{ item.totalTunnel }}条 <div>隧道数量：{{ item.totalTunnel }}条
</div> </div>
<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>{{ item.info.tunnelName }}</div>
<div class="tunnel-icon"></div> <div class="tunnel-icon"></div>
<div>施工长度{{ item.info.constructionLength }}米</div> <div>施工长度{{ item.info.constructionLength }}米</div>
@@ -41,7 +41,7 @@
<div class="add-icon"></div> <div class="add-icon"></div>
</div> </div>
</div> </div>
<div class="more" @click="goToMoreTunnel(item.siteId)" v-if="item.info.tunnelName"> <div class="more" @click="goToAddTunnel(item.siteId)" v-if="item.info.tunnelName">
更多 更多
<div class="icon"></div> <div class="icon"></div>
</div> </div>
@@ -65,6 +65,12 @@
<el-form-item label="站点名称"> <el-form-item label="站点名称">
<el-input v-model="form.siteName" placeholder="请输入站点名称"/> <el-input v-model="form.siteName" placeholder="请输入站点名称"/>
</el-form-item> </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-form-item label="站点地址">
<el-input v-model="form.address" placeholder="请输入站点地址"/> <el-input v-model="form.address" placeholder="请输入站点地址"/>
</el-form-item> </el-form-item>
@@ -148,7 +154,8 @@ const pageInfo = reactive({
const form = ref({ const form = ref({
address: '', address: '',
siteName: '', siteName: '',
describe: '' describe: '',
isDefault: false
}); });
const formRules = ref({ const formRules = ref({
siteName: [{required: true, message: '请输入站点名称', trigger: 'blur'}] siteName: [{required: true, message: '请输入站点名称', trigger: 'blur'}]
@@ -192,19 +199,16 @@ const handleClickSite = (type) => {
} }
} }
const goToAddTunnel = (siteId) => { const goToAddTunnel = (siteId) => {
router.push('/tunnel/' + siteId) router.push('/tunnel/' + siteId+'/s')
// router.push('/tunnel/1')
}
const goToMoreTunnel = (siteId) => {
router.push('/tunnel/' + siteId)
// router.push('/tunnel/1')
} }
//重置from表单 //重置from表单
const restFrom = () => { const restFrom = () => {
form.value = { form.value = {
address: '', address: '',
siteName: '', siteName: '',
describe: '' describe: '',
isDefault: false
} }
} }
const handleEdit = (item) => { const handleEdit = (item) => {
@@ -294,6 +298,37 @@ const handleCurrentChange = (val) => {
</script> </script>
<style scoped lang="scss"> <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 { .clickColor {
position: absolute; position: absolute;
top: 7px; top: 7px;
@@ -509,6 +544,7 @@ const handleCurrentChange = (val) => {
margin-top: 29px; margin-top: 29px;
.tunnel { .tunnel {
cursor: pointer;
margin-right: 20px; margin-right: 20px;
width: 280px; width: 280px;
height: 350px; height: 350px;
@@ -542,6 +578,7 @@ const handleCurrentChange = (val) => {
} }
.tunnel-add { .tunnel-add {
cursor: pointer;
width: 280px; width: 280px;
height: 350px; height: 350px;
background: #1891A3; background: #1891A3;

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

@@ -1,10 +1,13 @@
<template> <template>
<div class="tunnel-bgc"> <div class="tunnel-bgc">
<div class="box-top"> <div class="box-top">
<div class="back-tunnel" @click="router.back(-1)"> <div class="back-tunnel" @click="handleGoSiteOrIndex">
<div class="back-icon"></div> <div class="back-icon"></div>
<span>返回</span> <span>返回</span>
</div> </div>
<div class="site-name">
{{siteName}}
</div>
<div class="tunnel-title"></div> <div class="tunnel-title"></div>
<div class="all-del-btn"> <div class="all-del-btn">
<div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd"> <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
@@ -72,6 +75,12 @@
<el-form-item label="隧道长度" required> <el-form-item label="隧道长度" required>
<el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/> <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
</el-form-item> </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-form-item label="隧道备注">
<el-input v-model="form.remarks" placeholder="请输入隧道备注"/> <el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
</el-form-item> </el-form-item>
@@ -99,6 +108,7 @@
import {ElMessage, ElMessageBox} from "element-plus"; import {ElMessage, ElMessageBox} from "element-plus";
import {getTunnelList,addTunnel, deleteTunnel} from "@/api/tunnelManage"; import {getTunnelList,addTunnel, deleteTunnel} from "@/api/tunnelManage";
import {onMounted} from "vue"; import {onMounted} from "vue";
import { getSiteDetail} from "@/api/site";
const router = useRouter() const router = useRouter()
const showAddIcon = ref(true) const showAddIcon = ref(true)
@@ -231,11 +241,13 @@ const title = ref('新增隧道')
const isVisited = ref(false); const isVisited = ref(false);
const tunnelIds = ref([]) const tunnelIds = ref([])
const tunnelNameList = ref([]) const tunnelNameList = ref([])
const siteName = ref('')
const form = ref({ const form = ref({
tunnelName: '', tunnelName: '',
serialNumber: '', serialNumber: '',
totalLength: '', totalLength: '',
remarks: '' remarks: '',
isDefault:false
}); });
const isEdit = ref(false) const isEdit = ref(false)
const pageInfo = reactive({ const pageInfo = reactive({
@@ -244,13 +256,18 @@ const pageInfo = reactive({
}); });
const total = ref(10); const total = ref(10);
onMounted(()=>{ onMounted(()=>{
console.log('type',type) getSiteDetail(siteId).then((res) => {
if(type==='add'){ siteName.value = res.data.siteName
restFrom() });
title.value = '新增隧道'
isVisited.value = true
}
}) })
const handleGoSiteOrIndex=()=>{
if(type==='s'){
router.push('/site')
}else if(type==='i'){
router.push('/')
}
}
const getList = () => { const getList = () => {
getTunnelList({ getTunnelList({
siteId:siteId, siteId:siteId,
@@ -294,26 +311,31 @@ const handleSubmit = (instance) => {
} }
const handleGoToEditTunnel = (tunnelId) => { const handleGoToEditTunnel = (tunnelId) => {
isEdit.value = true isEdit.value = true
router.push('/edit/' + tunnelId) if(type==='s'){
router.push('/edit/' + tunnelId+'/s')
}else if(type==='i'){
router.push('/edit/' + tunnelId+'/i')
}
} }
const handleChooseAll = () => { const handleChooseAll = () => {
tunnelList.value.map(item => { tunnelList.value.map(item => {
item.checked = !item.checked item.checked = !item.checked
}) })
} }
const handleEdit = () => {
title.value = '编辑隧道'
// isVisited.value = true
}
const handleEditDevice = (tunnelId) => { const handleEditDevice = (tunnelId) => {
router.push('/device/' + tunnelId) if(type==='s'){
router.push('/device/' + tunnelId+'/s')
}else if(type==='i'){
router.push('/device/' + tunnelId+'/i')
}
} }
const restFrom = () => { const restFrom = () => {
form.value = { form.value = {
tunnelName: '', tunnelName: '',
serialNumber: '', serialNumber: '',
totalLength: '', totalLength: '',
remarks: '' remarks: '',
isDefault:false
} }
} }
const handleAdd = () => { const handleAdd = () => {
@@ -345,29 +367,87 @@ const handleMoreDelete = () => {
if (tunnelIds.value.length === 0) { if (tunnelIds.value.length === 0) {
ElMessage.warning('请先选择隧道进行删除') ElMessage.warning('请先选择隧道进行删除')
} else { } else {
ElMessageBox.confirm(`是否确定删除该隧道`, '系统提示', { let flag=false
confirmButtonText: '确定', siteList.value.map(item=>{
cancelButtonText: '取消', siteIds.value.map(siteItem=>{
type: 'warning', if(item.siteId===siteItem){
customClass: 'delBox' console.log('item.tunnelList',item.tunnelList)
}).then(() => { if(item.tunnelList.length!==0){
deleteTunnel(tunnelIds.value).then(res => { ElMessage.error('该站点下存在隧道，不能删除!')
if (res.code === 1000) { flag=false
ElMessage.success(res.msg) }else {
getList() flag=true
tunnelIds.value = [] }
tunnelNameList.value = []
} else {
ElMessage.error(res.msg)
} }
}) })
}) })
if(flag){
ElMessageBox.confirm(`是否确定删除该隧道`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
customClass: 'delBox'
}).then(() => {
deleteTunnel(tunnelIds.value).then(res => {
if (res.code === 1000) {
ElMessage.success(res.msg)
getList()
tunnelIds.value = []
tunnelNameList.value = []
} else {
ElMessage.error(res.msg)
}
})
})
}
} }
} }
</script> </script>
<style scoped lang="scss"> <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) { :deep(.el-dialog) {
border: 2px solid #05FEFF; border: 2px solid #05FEFF;
background: #0D6578; background: #0D6578;
@@ -508,7 +588,7 @@ const handleMoreDelete = () => {
} }
.site-box { .site-box {
cursor: pointer; //cursor: pointer;
margin-top: 50px; margin-top: 50px;
margin-right: 1.5%; margin-right: 1.5%;
padding: 40px 30px; padding: 40px 30px;

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

@@ -1,18 +1,24 @@
<template> <template>
<div id="main"> <div id="main">
<div class="box-top"> <div class="box-top">
<manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" /> <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList"/>
<div class="tunnel-title"></div> <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="top-right">
<div class="current-site"> <div class="current-site">
当前站点：<span>{{ currentSite }}</span> 当前站点：<span>{{ currentSite }}</span>
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleChangeSite">
<div class="toggle"></div> <div class="toggle"></div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ item.label <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
}}</el-dropdown-item> item.label
}}
</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
@@ -24,26 +30,26 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->\ <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
<!-- 一进去的话应该是预览模式，所以引入这个组件 --> <!-- 一进去的话应该是预览模式，所以引入这个组件 -->
<preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId"></preview-scene> <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId"></preview-scene>
<div class="left"> <div class="left">
<el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false" <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"> :close-on-click-modal="false" :close-on-press-escape="false">
<fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData" <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
:transducer-data="largeScreenData" /> :transducer-data="largeScreenData"/>
<!-- <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />--> <!-- <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />-->
<used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" /> <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/>
</el-drawer> </el-drawer>
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div> <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
<div v-else class="shrink-left" @click="closeLeft"></div> <div v-else class="shrink-left" @click="closeLeft"></div>
</div> </div>
<div class="right"> <div class="right">
<el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false" <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
:close-on-click-modal="false" :close-on-press-escape="false"> :close-on-click-modal="false" :close-on-press-escape="false">
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" /> <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/>
<air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" /> <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
<bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" /> <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"/>
</el-drawer> </el-drawer>
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div> <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
<div v-else class="shrink-right" @click="closeRight"></div> <div v-else class="shrink-right" @click="closeRight"></div>
@@ -63,22 +69,21 @@
</template> </template>
<script setup> <script setup>
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
import PreviewScene from "@/components/content/tunnelScene/PreviewScene.vue" import PreviewScene from "@/components/content/tunnelScene/PreviewScene.vue"
import FanInfo from "@/components/content/fanInfo/FanInfo.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 UsedEle from "@/components/content/usedEle/UsedEle.vue";
import WindPressureList from "@/components/content/windPressure/WindPressureList.vue"; import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
import AirInfo from "@/components/content/airInfo/AirInfo.vue"; import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue"; import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/index.vue"; import ManageBtn from "@/components/manageBtn/index.vue";
import ManageLength from "@/components/manageLength/index.vue"; import {dateFormat} from "@/utils/date.js";
import { dateFormat } from "@/utils/date.js"; import {getToken} from "@/utils/auth";
import { getToken } from "@/utils/auth"; import {useAuthStore} from "@/store/userstore.js";
import { useAuthStore } from "@/store/userstore.js"; import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen"; import {ElMessageBox} from "element-plus";
import { ElMessageBox } from "element-plus"; import {getUserInfo} from "@/api/login";
import { getUserInfo } from "@/api/login"; import {initSceneData} from "@/api/tunnelScene";
import {getSiteDetail} from "../../api/site";
const authStore = useAuthStore(); const authStore = useAuthStore();
const router = useRouter(); const router = useRouter();
@@ -94,6 +99,8 @@ const currentDate = ref(dateFormat());
const tunnelBtn = ref(); const tunnelBtn = ref();
const tunnelList = ref([]); const tunnelList = ref([]);
const tunnelId = ref(0); const tunnelId = ref(0);
const tunnelLength = ref(0);
const constructionLength = ref(0);
const routeList = ref([]); const routeList = ref([]);
let socket = reactive(""); let socket = reactive("");
const serialNumber = ref("SC00DY00GH00ELBT"); const serialNumber = ref("SC00DY00GH00ELBT");
@@ -107,7 +114,6 @@ const socketData = reactive({
windPressure: [], windPressure: [],
sensor: [], sensor: [],
}); });
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
showFan.value = true; showFan.value = true;
@@ -120,37 +126,45 @@ const getUser = () => {
currentUser.value = res.data.user.userName currentUser.value = res.data.user.userName
}) })
} }
const getDefaultSite=(siteId)=>{
// console.log('siteList.value',siteList.value)
// getSiteDetail(siteId).then((res) => {
// console.log('res',res)
// });
}
const getOtherInfo = () => { const getOtherInfo = () => {
getLargeScreenInfo().then((res) => { getLargeScreenInfo().then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
routeList.value = res.data.routeList routeList.value = res.data.routeList
currentSiteId.value = res.data.siteOption[0].value
currentSite.value = res.data.siteOption[0].label
siteList.value = res.data.siteOption siteList.value = res.data.siteOption
tunnelId.value = res.data.tunnelOption[0].value currentSiteId.value = res.data.siteOption[res.data.siteOption.length-1].value
getTunnel(res.data.siteOption[0].value) currentSite.value = res.data.siteOption[res.data.siteOption.length-1].label
getScreenInfo(tunnelId.value); getTunnel(res.data.siteOption[res.data.siteOption.length-1].value)
} }
}); });
}; };
const getScreenInfo = (id) => { const getScreenInfo = (id) => {
getLargeScreen(id).then((res) => { tunnelId.value=id
getLargeScreen(id).then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
largeScreenData.value = res.data; largeScreenData.value = res.data;
} }
}); });
initSceneData(id).then((res) => {
tunnelLength.value=res.data.tunnelLength
constructionLength.value=res.data.constructionLength
})
}; };
//根据站点id获取隧道信息 //根据站点id获取隧道信息
const getTunnel = (id) => { const getTunnel = (id) => {
getTunnelBySiteId(id).then((res) => { getTunnelBySiteId(id).then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
tunnelList.value = res.data tunnelList.value = res.data
// getScreenInfo(res.data[0].value) getScreenInfo(res.data[0].value)
} }
}); });
} }
const changeTunnel = (e) => { const changeTunnel = (e) => {
tunnelId.value = e
let newObj = {} let newObj = {}
tunnelList.value.forEach((item, index) => { tunnelList.value.forEach((item, index) => {
if (index === e) { if (index === e) {
@@ -158,21 +172,21 @@ const changeTunnel = (e) => {
} }
}) })
getScreenInfo(newObj.value) getScreenInfo(newObj.value)
nextTick(() => { // nextTick(() => {
showFan.value = true; // showFan.value = true;
}); // });
} }
const manageSelect = (index) => { const manageSelect = (index) => {
console.log("首页点击-", index); console.log("首页点击-", index);
if (index === 0) { if (index === 0) {
router.push("/site"); router.push("/site");
} else if (index === 1) { } else if (index === 1) {
router.push("/tunnel/"+tunnelId.value); router.push("/tunnel/" + currentSiteId.value+'/i');
} else if (index === 2) { } else if (index === 2) {
router.push("/user/"+currentSiteId.value); router.push("/user/" + currentSiteId.value);
} }
}; };
const handleCommand = (item) => { const handleChangeSite = (item) => {
currentSite.value = item.label currentSite.value = item.label
currentSiteId.value = item.value currentSiteId.value = item.value
getTunnel(item.value) getTunnel(item.value)