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

feat : 站点管理新增上传图纸按钮,隧道管理新增图纸导航模式

Browse Source
This commit is contained in:
odjbin
2024-02-29 21:58:30 +08:00
parent 47d23d37d7
commit d11401fd12
6 changed files with 239 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template>
<div class="site-bgc">
<div class="box-top">
<div class="back-tunnel" @click="handleGoHome">
<div class="back-tunnel" @click="handleGoHome">
<div class="back-icon"></div>
<span>返回</span>
</div>
@@ -42,15 +42,23 @@
<div class="add-icon"></div>
</div>
</div>
<div class="more" @click="goToAddTunnel(item.siteId)" v-if="item.info.tunnelName">
<div class="more" @click="goToAddTunnel(item.siteId)" v-if="item.info.tunnelName">
更多
<div class="icon"></div>
</div>
</div>
</div>
<div class="edit-btn" @click="handleEdit(item)">
<div class="edit-icon"></div>
<div>站点编辑</div>
<div class="edit-btn">
<div @click="handleEdit(item)">
<div class="edit-icon"></div>
<div>站点编辑</div>
</div>
<div v-if="item.totalTunnel!==0" @click="handleUpload(item.siteId)">
<el-icon style="margin-left: 20px">
<UploadFilled/>
</el-icon>
<div>上传图纸</div>
</div>
</div>
</div>
<div class="site-box add-box" v-if="showAddIcon" @click="handleAdd">
@@ -80,10 +88,37 @@
placeholder="请输入站点信息"/>
</el-form-item>
</el-form>
<template #footer>
<div class="btns">
<div class="cancel-btn" @click="isVisited=false">
<div class="cancel-btn" @click="isVisited=false;">
取消
</div>
<div class="sure-btn" @click="handleSubmit(formInstance)">
确定
</div>
</div>
</template>
</el-dialog>
<el-dialog :close-on-click-modal="false" v-model="isUploadVisited" width="1558px">
<el-upload
class="upload-demo"
drag
limit="1"
:action="uploadFileUrl"
:auto-upload="false"
:on-success="handleUploadSuccess"
>
<el-icon>
<upload-filled/>
</el-icon>
<div class="el-upload__text">
拖拽一张图纸到这里 或者 <em>点击上传</em>
</div>
</el-upload>
<template #footer>
<div class="btns">
<div class="cancel-btn" @click="isUploadVisited=false">
取消
</div>
<div class="sure-btn" @click="handleSubmit(formInstance)">
@@ -96,7 +131,7 @@
<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"/>
@current-change="handleCurrentChange" :hide-on-single-page="true"/>
<span @click="lastPage" v-if="showFirst">尾页</span>
</div>
</div>
@@ -113,6 +148,9 @@ const siteId = reactive(router.currentRoute.value.params.siteId)
const siteList = ref([])
const siteIds = ref([])
const siteNameList = ref([])
const baseURL = import.meta.env.VITE_BASE_URL
// const uploadFileUrl = ref(baseURL + "/workflow/process/file");
const uploadFileUrl = ref("#");
const info = ref({
tunnelName: '',
constructionLength: 0,
@@ -120,6 +158,7 @@ const info = ref({
})
const title = ref('新增站点')
const isVisited = ref(false);
const isUploadVisited = ref(false);
const showFirst = ref(true)
const total = ref(10);
const showAddIcon = ref(true)
@@ -134,29 +173,38 @@ const form = ref({
isDefault: false
});
const formRules = ref({
siteName: [{required: true, message: '请输入站点名称', trigger:['blur','change']}]
siteName: [{required: true, message: '请输入站点名称', trigger: ['blur', 'change']}]
})
const formInstance = ref()
const handleUploadSuccess = (res, file) => {
console.log('file', file)
if (res.code !== 1000) {
ElMessage.error("上传失败");
}
let data = res.data;
// attachmentList.value.push(data);
};
const handleGoHome = () => {
router.push('/' + 'siteToHome/' + siteId)
}
const getList = () => {
getSiteList({
userId:userId,
userId: userId,
...pageInfo
}).then((res) => {
total.value = res.data.total;
if(total.value==0){
if (total.value == 0) {
}else {
showAddIcon.value = total.value % 6!==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
}else{
item.info=item.tunnelList[0]
} else {
item.info = item.tunnelList[0]
}
item.checked = false
})
@@ -184,7 +232,7 @@ const handleClickSite = (type) => {
}
const goToAddTunnel = (siteId) => {
router.push('/tunnel/' + siteId+'/bySite'+'/'+userId)
router.push('/tunnel/' + siteId + '/bySite' + '/' + userId)
}
//重置from表单
@@ -205,7 +253,9 @@ const handleEdit = (item) => {
isVisited.value = true
});
}
const handleUpload = (siteId) => {
isUploadVisited.value = true
}
const handleAdd = () => {
restFrom()
title.value = '新增站点'
@@ -217,33 +267,33 @@ const handleSubmit = (instance) => {
if (!valid) return
if (title.value === '编辑站点') {
editSite(form.value).then((res) => {
if(res.code===1000){
if (res.code === 1000) {
isVisited.value = false
getList()
ElMessage.success(res.msg)
}else {
} else {
ElMessage.warning(res.msg)
}
});
} else {
addSite(form.value).then((res) => {
if(res.code===1000){
if (res.code === 1000) {
isVisited.value = false
getList()
ElMessage.success(res.msg)
}else {
} else {
ElMessage.warning(res.msg)
}
});
}
})
}
const handleChooseAll=()=>{
siteList.value.map(item=>{
item.checked=!item.checked
if(item.checked&&!item.isDefault){
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){
} else if (!item.checked && !item.isDefault) {
siteIds.value.map((newItem, index) => {
if (newItem === item.siteId) {
siteIds.value.splice(index, 1)
@@ -256,20 +306,20 @@ const handleMoreDelete = () => {
if (siteIds.value.length === 0) {
ElMessage.warning('请先选择站点进行删除')
} else {
let flag=false
siteList.value.map(item=>{
siteIds.value.map(siteItem=>{
if(item.siteId===siteItem){
if(item.tunnelList.length!==0){
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
flag = false
} else {
flag = true
}
}
})
})
if(flag){
if (flag) {
ElMessageBox.confirm(`是否确定删除该站点`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@@ -290,12 +340,12 @@ const handleMoreDelete = () => {
}
}
}
const firstPage=()=>{
const firstPage = () => {
pageInfo.pageNum = 1
getList()
}
const lastPage=()=>{
pageInfo.pageNum = total.value/pageInfo.pageSize
const lastPage = () => {
pageInfo.pageNum = total.value / pageInfo.pageSize
getList()
}
//点击页码进行分页功能
@@ -306,9 +356,50 @@ const handleCurrentChange = (val) => {
</script>
<style scoped lang="scss">
:deep(.el-form-item__error){
:deep(.el-upload-dragger) {
background-color: transparent;
box-shadow: none;
border: 1px solid #05FEFF;
&:hover {
border: 1px solid #05FEFF;
}
.el-icon {
font-size: 250px;
color: #FFFFFF;
}
.el-upload__text {
font-size: 50px;
color: #FFFFFF;
em{
color: #05FEFF;
}
}
}
:deep(.el-upload-list) {
.el-upload-list__item{
&:hover {
background-color: transparent;
}
.el-icon{
font-size: 61px;
color: #FFFFFF;
}
}
.el-upload-list__item-name {
font-size: 61px !important;
color: #FFFFFF;
}
}
:deep(.el-form-item__error) {
font-size: 35px;
}
:deep(.el-radio-group) {
margin-top: 10px;
}
@@ -340,6 +431,7 @@ const handleCurrentChange = (val) => {
height: 18px;
background: #05FEFF;
}
.clickColor {
position: absolute;
top: 7px;
@@ -521,10 +613,10 @@ const handleCurrentChange = (val) => {
> span:last-child {
padding:1px 8px;
padding: 1px 8px;
font-size: 32px;
border: 2px solid #05FEFF;
border-radius:10px;
border-radius: 10px;
position: relative;
}
}
@@ -630,7 +722,6 @@ const handleCurrentChange = (val) => {
}
.edit-btn {
cursor: pointer;
margin-top: 117px;
display: flex;
align-items: center;
@@ -638,11 +729,23 @@ const handleCurrentChange = (val) => {
color: #60DDDE;
margin-left: 492px;
.edit-icon {
width: 42px;
height: 44px;
background-image: url('@/assets/images/site/zdgl_icon_bj.png');
margin-right: 16px;
> div:first-child {
display: flex;
align-items: center;
cursor: pointer;
.edit-icon {
width: 42px;
height: 44px;
background-image: url('@/assets/images/site/zdgl_icon_bj.png');
margin-right: 16px;
}
}
> div:last-child {
cursor: pointer;
display: flex;
align-items: center;
}
}
}