邓洁: 接口部分对接
This commit is contained in:
邓洁
@@ -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;
|
||||
@@ -487,43 +504,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;
|
||||
|
||||
@@ -24,7 +24,7 @@ const routes = [
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/edit/:tunnelId(\\d+)',
|
||||
path: '/edit/:tunnelId(\\d+)/:type',
|
||||
name: 'tunneledit',
|
||||
component: () => import('@/views/edit/edit.vue'),
|
||||
meta: {
|
||||
@@ -60,7 +60,7 @@ const routes = [
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/tunnel/:siteId(\\d+)',
|
||||
path: '/tunnel/:siteId(\\d+)/:type',
|
||||
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',
|
||||
name: 'device',
|
||||
component: () => import('@/views/device-manage/index.vue'),
|
||||
meta: {
|
||||
|
||||
@@ -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 {
|
||||
equipmentList,
|
||||
initData,
|
||||
saveSceneData,
|
||||
deleteEquipment,
|
||||
getEquipmentList,
|
||||
getTunnelEditAllList,
|
||||
getEquipmentList
|
||||
};
|
||||
});
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="tunnel-bgc">
|
||||
<div class="box-top">
|
||||
<div class="back-tunnel" @click="router.back(-1)">
|
||||
<div class="back-tunnel" @click="handleGoTunnelMgr">
|
||||
<div class="back-icon"></div>
|
||||
<span>返回</span>
|
||||
</div>
|
||||
<div class="tunnel-name">
|
||||
一号隧道
|
||||
{{ tunnelName }}
|
||||
</div>
|
||||
<div class="tunnel-title"></div>
|
||||
</div>
|
||||
@@ -281,10 +281,10 @@
|
||||
<script setup>
|
||||
import {getEquipmentList, editFan} from "@/api/tunnelManage";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {editEquipment} from "../../api/tunnelManage";
|
||||
|
||||
import {editEquipment, getTunnelDetail} from "@/api/tunnelManage";
|
||||
const router = useRouter()
|
||||
const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
|
||||
const type = reactive(router.currentRoute.value.params.type)
|
||||
const collectionFrequency = ref(0)
|
||||
const changeIndex = ref(1)
|
||||
const fanData = ref([
|
||||
@@ -472,6 +472,9 @@ const fenliuData = ref([
|
||||
const fanItem=ref({})
|
||||
const windItem=ref({})
|
||||
const sensorItem=ref({})
|
||||
const siteId=ref(0)
|
||||
const tunnelName=ref('')
|
||||
|
||||
const changeCurrent = (row) => {
|
||||
fanItem.value=getFanEditItem(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()
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,202 +1,241 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
<div class="box-top">
|
||||
<div class="back-tunnel" @click="router.back(-1)">
|
||||
<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 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="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-input v-model="form.remarks" placeholder="请输入隧道备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="del-btn" @click="handleSave">
|
||||
保存
|
||||
</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>
|
||||
<script setup>
|
||||
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
|
||||
import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
|
||||
import { computed } from "vue";
|
||||
import { useModelSceneStore } from "@/store/modelSceneStore";
|
||||
import {editTunnel, getTunnelDetail} from "@/api/tunnelManage";
|
||||
import {computed} from "vue";
|
||||
import {useModelSceneStore} from "@/store/modelSceneStore";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
const router = useRouter();
|
||||
const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
|
||||
const type = reactive(router.currentRoute.value.params.type)
|
||||
const store = useModelSceneStore();
|
||||
const form = ref({
|
||||
tunnelName: '',
|
||||
serialNumber: '',
|
||||
totalLength: '',
|
||||
remarks: ''
|
||||
tunnelName: '',
|
||||
serialNumber: '',
|
||||
totalLength: '',
|
||||
isDefault: false,
|
||||
remarks: ''
|
||||
});
|
||||
const equipmentList = ref([])
|
||||
onMounted(async () => {
|
||||
equipmentList.value = await store.getEquipmentList();
|
||||
equipmentList.value = await store.getEquipmentList();
|
||||
})
|
||||
const getTunnel = () => {
|
||||
getTunnelDetail(tunnelId).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
form.value = res.data
|
||||
console.log('for', form.value)
|
||||
}
|
||||
});
|
||||
getTunnelDetail(tunnelId).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
form.value = res.data
|
||||
}
|
||||
});
|
||||
}
|
||||
getTunnel()
|
||||
const tunnelLength = computed(() => form.value.totalLength);
|
||||
const handleGotoDevice = () => {
|
||||
router.push('/device/' + tunnelId)
|
||||
router.push('/device/' + tunnelId)
|
||||
}
|
||||
const handleSave =async () => {
|
||||
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,
|
||||
tunnelThreeConfig: JSON.stringify(await store.getEquipmentList())
|
||||
const handleGoTunnelMgr=()=>{
|
||||
router.push('/tunnel/' + form.value.siteId+'/'+type)
|
||||
}
|
||||
const handleSave = async () => {
|
||||
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,
|
||||
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>
|
||||
<style lang="scss" scoped>
|
||||
#main {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #072348;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
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;
|
||||
justify-content: center;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
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__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>
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
<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>
|
||||
@@ -41,7 +41,7 @@
|
||||
<div class="add-icon"></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>
|
||||
@@ -65,6 +65,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>
|
||||
@@ -148,7 +154,8 @@ const pageInfo = reactive({
|
||||
const form = ref({
|
||||
address: '',
|
||||
siteName: '',
|
||||
describe: ''
|
||||
describe: '',
|
||||
isDefault: false
|
||||
});
|
||||
const formRules = ref({
|
||||
siteName: [{required: true, message: '请输入站点名称', trigger: 'blur'}]
|
||||
@@ -192,19 +199,16 @@ const handleClickSite = (type) => {
|
||||
}
|
||||
}
|
||||
const goToAddTunnel = (siteId) => {
|
||||
router.push('/tunnel/' + siteId)
|
||||
// router.push('/tunnel/1')
|
||||
}
|
||||
const goToMoreTunnel = (siteId) => {
|
||||
router.push('/tunnel/' + siteId)
|
||||
// router.push('/tunnel/1')
|
||||
router.push('/tunnel/' + siteId+'/s')
|
||||
}
|
||||
|
||||
//重置from表单
|
||||
const restFrom = () => {
|
||||
form.value = {
|
||||
address: '',
|
||||
siteName: '',
|
||||
describe: ''
|
||||
describe: '',
|
||||
isDefault: false
|
||||
}
|
||||
}
|
||||
const handleEdit = (item) => {
|
||||
@@ -294,6 +298,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;
|
||||
@@ -509,6 +544,7 @@ const handleCurrentChange = (val) => {
|
||||
margin-top: 29px;
|
||||
|
||||
.tunnel {
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
width: 280px;
|
||||
height: 350px;
|
||||
@@ -542,6 +578,7 @@ const handleCurrentChange = (val) => {
|
||||
}
|
||||
|
||||
.tunnel-add {
|
||||
cursor: pointer;
|
||||
width: 280px;
|
||||
height: 350px;
|
||||
background: #1891A3;
|
||||
|
||||
@@ -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">
|
||||
@@ -72,6 +75,12 @@
|
||||
<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="请输入隧道备注"/>
|
||||
</el-form-item>
|
||||
@@ -99,6 +108,7 @@
|
||||
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)
|
||||
@@ -231,11 +241,13 @@ const title = ref('新增隧道')
|
||||
const isVisited = ref(false);
|
||||
const tunnelIds = ref([])
|
||||
const tunnelNameList = ref([])
|
||||
const siteName = ref('')
|
||||
const form = ref({
|
||||
tunnelName: '',
|
||||
serialNumber: '',
|
||||
totalLength: '',
|
||||
remarks: ''
|
||||
remarks: '',
|
||||
isDefault:false
|
||||
});
|
||||
const isEdit = ref(false)
|
||||
const pageInfo = reactive({
|
||||
@@ -244,13 +256,18 @@ const pageInfo = reactive({
|
||||
});
|
||||
const total = ref(10);
|
||||
onMounted(()=>{
|
||||
console.log('type',type)
|
||||
if(type==='add'){
|
||||
restFrom()
|
||||
title.value = '新增隧道'
|
||||
isVisited.value = true
|
||||
}
|
||||
getSiteDetail(siteId).then((res) => {
|
||||
siteName.value = res.data.siteName
|
||||
});
|
||||
})
|
||||
const handleGoSiteOrIndex=()=>{
|
||||
if(type==='s'){
|
||||
router.push('/site')
|
||||
}else if(type==='i'){
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
}
|
||||
const getList = () => {
|
||||
getTunnelList({
|
||||
siteId:siteId,
|
||||
@@ -294,26 +311,31 @@ const handleSubmit = (instance) => {
|
||||
}
|
||||
const handleGoToEditTunnel = (tunnelId) => {
|
||||
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 = () => {
|
||||
tunnelList.value.map(item => {
|
||||
item.checked = !item.checked
|
||||
})
|
||||
}
|
||||
const handleEdit = () => {
|
||||
title.value = '编辑隧道'
|
||||
// isVisited.value = true
|
||||
}
|
||||
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 = () => {
|
||||
form.value = {
|
||||
tunnelName: '',
|
||||
serialNumber: '',
|
||||
totalLength: '',
|
||||
remarks: ''
|
||||
remarks: '',
|
||||
isDefault:false
|
||||
}
|
||||
}
|
||||
const handleAdd = () => {
|
||||
@@ -345,29 +367,87 @@ const handleMoreDelete = () => {
|
||||
if (tunnelIds.value.length === 0) {
|
||||
ElMessage.warning('请先选择隧道进行删除')
|
||||
} else {
|
||||
ElMessageBox.confirm(`是否确定删除该隧道`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
customClass: 'delBox'
|
||||
}).then(() => {
|
||||
deleteTunnel(tunnelIds.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
tunnelIds.value = []
|
||||
tunnelNameList.value = []
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
let flag=false
|
||||
siteList.value.map(item=>{
|
||||
siteIds.value.map(siteItem=>{
|
||||
if(item.siteId===siteItem){
|
||||
console.log('item.tunnelList',item.tunnelList)
|
||||
if(item.tunnelList.length!==0){
|
||||
ElMessage.error('该站点下存在隧道，不能删除!')
|
||||
flag=false
|
||||
}else {
|
||||
flag=true
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
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>
|
||||
|
||||
<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;
|
||||
@@ -508,7 +588,7 @@ const handleMoreDelete = () => {
|
||||
}
|
||||
|
||||
.site-box {
|
||||
cursor: pointer;
|
||||
//cursor: pointer;
|
||||
margin-top: 50px;
|
||||
margin-right: 1.5%;
|
||||
padding: 40px 30px;
|
||||
|
||||
@@ -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"/>
|
||||
<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,26 +30,26 @@
|
||||
</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>
|
||||
<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">
|
||||
:close-on-click-modal="false" :close-on-press-escape="false">
|
||||
<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" />-->
|
||||
<used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" />
|
||||
<used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/>
|
||||
</el-drawer>
|
||||
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
|
||||
<div v-else class="shrink-left" @click="closeLeft"></div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<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">
|
||||
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-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" />
|
||||
:close-on-click-modal="false" :close-on-press-escape="false">
|
||||
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-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"/>
|
||||
</el-drawer>
|
||||
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
|
||||
<div v-else class="shrink-right" @click="closeRight"></div>
|
||||
@@ -63,22 +69,21 @@
|
||||
</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 { getUserInfo } from "@/api/login";
|
||||
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 {initSceneData} from "@/api/tunnelScene";
|
||||
import {getSiteDetail} from "../../api/site";
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const router = useRouter();
|
||||
@@ -94,6 +99,8 @@ 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([]);
|
||||
let socket = reactive("");
|
||||
const serialNumber = ref("SC00DY00GH00ELBT");
|
||||
@@ -107,7 +114,6 @@ const socketData = reactive({
|
||||
windPressure: [],
|
||||
sensor: [],
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
showFan.value = true;
|
||||
@@ -120,37 +126,45 @@ const getUser = () => {
|
||||
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 = () => {
|
||||
getLargeScreenInfo().then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
routeList.value = res.data.routeList
|
||||
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
|
||||
getTunnel(res.data.siteOption[0].value)
|
||||
getScreenInfo(tunnelId.value);
|
||||
currentSiteId.value = res.data.siteOption[res.data.siteOption.length-1].value
|
||||
currentSite.value = res.data.siteOption[res.data.siteOption.length-1].label
|
||||
getTunnel(res.data.siteOption[res.data.siteOption.length-1].value)
|
||||
}
|
||||
});
|
||||
};
|
||||
const getScreenInfo = (id) => {
|
||||
getLargeScreen(id).then((res) => {
|
||||
const getScreenInfo = (id) => {
|
||||
tunnelId.value=id
|
||||
getLargeScreen(id).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
largeScreenData.value = res.data;
|
||||
}
|
||||
});
|
||||
initSceneData(id).then((res) => {
|
||||
tunnelLength.value=res.data.tunnelLength
|
||||
constructionLength.value=res.data.constructionLength
|
||||
})
|
||||
};
|
||||
//根据站点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) {
|
||||
@@ -158,21 +172,21 @@ const changeTunnel = (e) => {
|
||||
}
|
||||
})
|
||||
getScreenInfo(newObj.value)
|
||||
nextTick(() => {
|
||||
showFan.value = true;
|
||||
});
|
||||
// nextTick(() => {
|
||||
// showFan.value = true;
|
||||
// });
|
||||
}
|
||||
const manageSelect = (index) => {
|
||||
console.log("首页点击-", index);
|
||||
if (index === 0) {
|
||||
router.push("/site");
|
||||
} else if (index === 1) {
|
||||
router.push("/tunnel/"+tunnelId.value);
|
||||
router.push("/tunnel/" + currentSiteId.value+'/i');
|
||||
} else if (index === 2) {
|
||||
router.push("/user/"+currentSiteId.value);
|
||||
router.push("/user/" + currentSiteId.value);
|
||||
}
|
||||
};
|
||||
const handleCommand = (item) => {
|
||||
const handleChangeSite = (item) => {
|
||||
currentSite.value = item.label
|
||||
currentSiteId.value = item.value
|
||||
getTunnel(item.value)
|
||||
|
||||
Reference in New Issue
Block a user