<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-04-10 18:05:55
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-04-10 21:47:50
|
* @FilePath: \web\bigScreen\src\components\ContentDetailsPopup\index.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<template>
|
<div class="content-details-popup" ref="ContentDetailsPopup">
|
<div class="big-screen container content-center flex f-d-c">
|
<div class="header flex a-i-c j-c-s-b f24">
|
<div class="title">{{ title }}</div>
|
<div class="close">
|
<i @click="closeDetailsPopup" class="el-icon-close cursor-p"></i>
|
</div>
|
</div>
|
|
<div class="body flex f-d-c">
|
<div class="tabs flex j-c-c">
|
<div
|
class="f-16 flex a-i-c j-c-c"
|
v-for="(item, index) in tabs"
|
:key="index"
|
@click="tabsChages(item)"
|
:class="{ on: currentTabs(item.name) }"
|
>{{ item.name }}</div>
|
</div>
|
|
<div class="tabs-content">
|
<overview v-if="currentTabs('总览')"></overview>
|
<baseInfo v-if="currentTabs('基础信息')"></baseInfo>
|
<integrated-monitoring v-if="currentTabs('综合监测')"></integrated-monitoring>
|
<safety-management v-if="currentTabs('安全管理')"></safety-management>
|
<operations-management v-if="currentTabs('运行管理')"></operations-management>
|
<management-guarantee v-if="currentTabs('管理保障')"></management-guarantee>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import overview from "./components/overview";
|
import baseInfo from "./components/baseInfo";
|
import integratedMonitoring from "./components/integratedMonitoring";
|
import safetyManagement from "./components/safetyManagement";
|
import operationsManagement from "./components/operationsManagement";
|
import managementGuarantee from "./components/managementGuarantee";
|
|
export default {
|
name: "ContentDetailsPopup",
|
props: {
|
title: {
|
default: "洪山水库",
|
type: String
|
}
|
},
|
components: {
|
baseInfo,
|
integratedMonitoring,
|
managementGuarantee,
|
operationsManagement,
|
overview,
|
safetyManagement
|
},
|
|
computed: {
|
currentTabs() {
|
return item => {
|
return this.curTabs == item ? true : false;
|
};
|
}
|
},
|
|
data() {
|
return {
|
tabs: [
|
{
|
name: "总览"
|
},
|
{
|
name: "基础信息"
|
},
|
{
|
name: "综合监测"
|
},
|
{
|
name: "安全管理"
|
},
|
{
|
name: "运行管理"
|
},
|
{
|
name: "管理保障"
|
}
|
],
|
|
curTabs: "总览"
|
};
|
},
|
|
mounted() {
|
this.$nextTick(() => {
|
document.body.appendChild(this.$refs.ContentDetailsPopup);
|
});
|
},
|
|
methods: {
|
tabsChages(item) {
|
this.curTabs = item.name;
|
},
|
|
closeDetailsPopup() {
|
document.body.removeChild(this.$refs.ContentDetailsPopup);
|
}
|
},
|
|
destroyed() {
|
this.$refs.ContentDetailsPopup &&
|
document.body.removeChild(this.$refs.ContentDetailsPopup);
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/styles/contentDetails/index.scss";
|
</style>
|
