fix:修改指挥部大屏目录样式

This commit is contained in:
Vce 2024-07-02 11:38:27 +08:00
parent 20528ccbcd
commit c143cc6075
3 changed files with 66 additions and 62 deletions

View File

@ -26,9 +26,9 @@ export const staticRouter: RouteRecordRaw[] = [
name: "大屏", name: "大屏",
// component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版 // component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏 // component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
// component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏 component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏
// component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏 // component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏
component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏 // component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页) // component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
children: [ children: [
{ {
@ -310,7 +310,8 @@ export const staticRouter: RouteRecordRaw[] = [
} }
], ],
meta: { meta: {
title: "智慧工厂安全生产监管平台" // title: "数字化项目监管平台"
title: "智慧工厂安全生产监管平台" //指挥部大屏
} }
} }

View File

@ -80,7 +80,7 @@
</div> </div>
</div> </div>
<div class="classify-div"> <div class="classify-div">
<div class="classify-div-item" @click="openDialogData({ index: 1, title: '危大工程' })"> <div class="classify-div-item" @click="openDialogData({ index: 1, title: '' })">
<span style="font-size: 12px">危大工程&nbsp;&nbsp;{{ statsDirectorateBigScreen.dangerousEngineeringRecordNum }}</span> <span style="font-size: 12px">危大工程&nbsp;&nbsp;{{ statsDirectorateBigScreen.dangerousEngineeringRecordNum }}</span>
</div> </div>
<div class="classify-div-item" @click="openDialogData({ index: 2, title: '安全教育' })"> <div class="classify-div-item" @click="openDialogData({ index: 2, title: '安全教育' })">

View File

@ -12,25 +12,27 @@
<rightAll class="rightAll" @openDialog="openPeopleCountDialog"></rightAll> <rightAll class="rightAll" @openDialog="openPeopleCountDialog"></rightAll>
</div> </div>
<dataDialog ref="partyBuildRef"></dataDialog> <dataDialog ref="partyBuildRef"></dataDialog>
<div :class="{'contentsBox':true,'open-dialog': show,'hidden-dialog': !show}"> <div :class="{'contentsBox':true,'openDialog': show,'hiddenDialog': !show}">
<div style="height:10px"></div> <div class="topBox">
<div v-for="(item,i) in backendUrls" :key="i"> <div class="expand">
<div class="listItem" @click="goBackend(item)"> </div>
<div class="itemIcon" :style="{'background':item.color !== '#dc3c00' ? item.color: 'rgba(0,0,0,0)'}"> <div class="retract">
<el-icon :color="item.color == '#dc3c00' ? '#dc3c00' : '#fff'" size="32"><StarFilled /></el-icon> <el-icon color="#fff" size="26" v-show="show" @click="retract"><DArrowLeft /></el-icon>
</div>
<span class="itemText">{{ item.name }}</span>
</div> </div>
</div> </div>
<div class="retract" @click="retract"> <div class="bottomBox" v-if="show">
<el-icon color="#fff" size="32" style="margin-left: 10px;"><Back /></el-icon> <div v-for="(item,i) in backendUrls" :key="i">
<span style="margin-left: 10px;">收回</span> <div class="listItem" @click="goBackend(item)">
<div class="itemIcon" :style="{'background':item.color !== '#dc3c00' ? item.color: 'rgba(0,0,0,0)'}">
<el-icon :color="item.color == '#dc3c00' ? '#dc3c00' : '#fff'" size="32"><StarFilled /></el-icon>
</div>
<span class="itemText">{{ item.name }}</span>
</div>
</div>
</div> </div>
</div> </div>
<div class="expandBtn" v-if="!show" @click="expand"> <div class="expandBtn" v-if="!show" @click="expand">
<el-icon color="#fff" size="32" style="margin-left: 10px;"><Right /></el-icon> <el-icon color="#fff" size="26" v-show="!show" @click="expand"><DArrowRight /></el-icon>
<!-- <el-icon color="#fff" size="32" style="margin-left: 10px;"><Back /></el-icon> -->
<span style="margin: 0 10px;">目录展开</span>
</div> </div>
</div> </div>
</template> </template>
@ -117,7 +119,8 @@ function goBackend(item: any){
if(item.url != ''){ if(item.url != ''){
// window.location.replace('http://localhost:8080/#/login?command=1&pathItem='+ item.url +'&token=' + store.token); // window.location.replace('http://localhost:8080/#/login?command=1&pathItem='+ item.url +'&token=' + store.token);
console.log(BASEURL) console.log(BASEURL)
window.open(BASEURL + '/#/login?command=1&pathItem='+ item.url +'&token=' + store.token, '_blank'); // window.open(BASEURL + '/#/login?command=1&pathItem='+ item.url +'&token=' + store.token, '_blank');
window.open('http://10.0.1.77:8080' + '/#/login?command=1&pathItem='+ item.url +'&token=' + store.token, '_blank');
} }
} }
const show = ref(false as any) const show = ref(false as any)
@ -253,54 +256,53 @@ onMounted(() => {
position: fixed; position: fixed;
top: 1px; top: 1px;
left: 0px; left: 0px;
width: 15%; width: 15.3%;
height: calc(100% - 1px); height: 100%;
background: #0a1334;
// padding-top: 10px; // padding-top: 10px;
transition: left 0.5s; /* 添加过渡效果 */ // transition: left 0.5s; /* */
.listItem{ .topBox{
color: #fff; height: 3.7%;
width: 100%; width: 100%;
height: 50px; background-color: rgba($color: #000000, $alpha: 0);
// background-color: darkred;
display: flex; display: flex;
justify-content: flex-start; justify-content: space-between;
align-items: center; align-items: center;
cursor: pointer; .retract{
.itemIcon{ cursor: pointer;
margin-left: 10px;
width: 60px;
height: 45px;
// background-color: darkblue;
display: flex;
justify-content: center;
align-items: center;
}
.itemText{
margin-left: 10px;
font-size: 16px;
} }
} }
.retract{ .bottomBox{
cursor: pointer; height: 96.3%;
color: #fff; width: 93%;
position: absolute; background: #0a1334;
width: 100%; .listItem{
height: 50px; color: #fff;
bottom:0; height: 40px;
background-color: #061f51; // background-color: darkred;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
font-size: 18px; cursor: pointer;
margin-bottom: 5px; .itemIcon{
// margin-left: 10px; margin-left: 10px;
width: 60px;
height: 35px;
// background-color: darkblue;
display: flex;
justify-content: center;
align-items: center;
}
.itemText{
margin-left: 10px;
font-size: 16px;
}
}
} }
} }
.hidden-dialog{ .hiddenDialog{
left: -1000px; left: -1000px;
} }
.open-dialog{ .openDialog{
left: 0; left: 0;
} }
.expandBtn{ .expandBtn{
@ -308,15 +310,16 @@ onMounted(() => {
color: #fff; color: #fff;
position: fixed; position: fixed;
width: auto; width: auto;
height: 50px; height: 3.7%;
top:0;
left: 0; left: 0;
bottom:0; // background-color: #061f51;
background-color: #061f51; background-color: rgba($color: #000000, $alpha: 0);
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
font-size: 18px; font-size: 14px;
margin-bottom: 5px; // margin-bottom: 5px;
// margin-left: 10px; // margin-left: 10px;
} }
} }