|
|
@@ -1,73 +1,42 @@
|
|
|
<template>
|
|
|
- <el-dialog ref="dialogRef" v-model="show" :title="title" width="1000px" append-to-body @close="onClose">
|
|
|
+ <div class="dialog">
|
|
|
+ <div class="title gradient-text">启动预案</div>
|
|
|
+ <div class="close-icon" @click="onClose"></div>
|
|
|
+ <!-- 响应等级选择和操作按钮 -->
|
|
|
+ <div class="section-box">
|
|
|
+ <div class="title2">响应等级</div>
|
|
|
+ <el-select v-model="selectedLevel" placeholder="请选择响应等级" class="custom-select" style="width: 1200px;margin-left: 30px">
|
|
|
+ <el-option v-for="level in responseLevels" :key="level.value" :label="level.name" :value="level.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="btn" @click="onStartPlan">启动预案</div>
|
|
|
+ <div class="btn" @click="onTaskDelivery">预案任务下发</div>
|
|
|
+ </div>
|
|
|
+ <div class="title-box">{{ planTitle }}</div>
|
|
|
<div class="plan-content">
|
|
|
- <!-- 响应等级选择和操作按钮 -->
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <div class="section-title select-level-container">
|
|
|
- <span>响应等级</span>
|
|
|
- <el-select v-model="selectedLevel" placeholder="请选择响应等级" class="select-level">
|
|
|
- <el-option v-for="level in responseLevels" :key="level.value" :label="level.name" :value="level.value"></el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12" class="button-container">
|
|
|
- <el-button type="primary" @click="onStartPlan">启动预案</el-button>
|
|
|
- <el-button type="primary" @click="onTaskDelivery">预案任务下发</el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <!-- 预案名称 -->
|
|
|
- <h2>{{ planTitle }}</h2>
|
|
|
<!-- 预案内容的标签页 -->
|
|
|
- <el-row class="content-row">
|
|
|
- <el-tabs v-model="activeTab" type="border-card" @tab-click="onTabClick">
|
|
|
- <el-tab-pane label="总则" name="principles">
|
|
|
- <div>
|
|
|
- <!-- 锚点导航 -->
|
|
|
- <el-row>
|
|
|
- <el-col :span="4">
|
|
|
- <el-anchor :container="contentContainer" direction="vertical" type="default" :offset="30">
|
|
|
- <el-anchor-link href="#purpose" title="编制目的" />
|
|
|
- <el-anchor-link href="#basis" title="编制依据" />
|
|
|
- <el-anchor-link href="#scope" title="适用范围" />
|
|
|
- <el-anchor-link href="#principles" title="工作原则" />
|
|
|
- </el-anchor>
|
|
|
- </el-col>
|
|
|
- <!-- 可滚动的内容区域 -->
|
|
|
- <el-col :span="20">
|
|
|
- <div ref="contentContainer" style="height: 300px; overflow-y: auto">
|
|
|
- <div id="purpose" style="margin-top: 20px; font-size: 14px">
|
|
|
- <h3>1.1 编制目的</h3>
|
|
|
- <p>{{ planData.purpose }}</p>
|
|
|
- </div>
|
|
|
- <div id="basis" style="margin-top: 15px; font-size: 14px">
|
|
|
- <h3>1.2 编制依据</h3>
|
|
|
- <p>{{ planData.basis }}</p>
|
|
|
- </div>
|
|
|
- <div id="scope" style="margin-top: 15px; font-size: 14px">
|
|
|
- <h3>1.3 适用范围</h3>
|
|
|
- <p>{{ planData.scope }}</p>
|
|
|
- </div>
|
|
|
- <div id="principles" style="margin-top: 15px; font-size: 14px">
|
|
|
- <h3>1.4 工作原则</h3>
|
|
|
- <p>{{ planData.principles }}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="组织体系" name="second">组织体系</el-tab-pane>
|
|
|
- <el-tab-pane label="运行机制" name="third">运行机制</el-tab-pane>
|
|
|
- <el-tab-pane label="应急保障" name="fourth">应急保障</el-tab-pane>
|
|
|
- <el-tab-pane label="监督管理" name="fifth">监督管理</el-tab-pane>
|
|
|
- <el-tab-pane label="附则" name="sixth">附则</el-tab-pane>
|
|
|
- <el-tab-pane label="附件" name="seventh">附件</el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </el-row>
|
|
|
+ <div class="tabs">
|
|
|
+ <div v-for="(item, index) in tabs" :key="index" :class="index === activeTab ? 'tab tabActive' : 'tab'" @click="handleClickTab(index)">{{ item.label }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="tab-content">
|
|
|
+ <div class="tabs2">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in tabs[activeTab]?.children"
|
|
|
+ :key="index"
|
|
|
+ :class="index === activeTab2 ? 'tab tab-active2' : 'tab'"
|
|
|
+ @click="handleClickTab2(index)"
|
|
|
+ >
|
|
|
+ <div class="text">{{ item.label }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tab-content2">
|
|
|
+ {{
|
|
|
+ tabs[activeTab] && tabs[activeTab].children && tabs[activeTab].children[activeTab2] ? tabs[activeTab].children[activeTab2].content : ''
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <TaskDelivery v-model="taskDeliveryState.show" :title="taskDeliveryState.title" :plan-id="planData.plan_id" :event-id="props.eventId" />
|
|
|
- </el-dialog>
|
|
|
+ <TaskDelivery v-model="taskDeliveryState.show" :title="taskDeliveryState.title" :plan-id="plan_id" :event-id="props.eventId" />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
@@ -80,21 +49,12 @@ const planTitle = ref(''); // 预案名称
|
|
|
const selectedLevel = ref(''); // 默认响应等级为空
|
|
|
// 定义组件接收的属性类型
|
|
|
interface Props {
|
|
|
- modelValue: boolean;
|
|
|
+ show: boolean;
|
|
|
eventId: string;
|
|
|
title: string;
|
|
|
- show?: boolean; // 新增 show 属性
|
|
|
}
|
|
|
// 初始化组件属性
|
|
|
const props = defineProps<Props>();
|
|
|
-const show = ref(props.show ?? false); // 对话框是否可见
|
|
|
-watch(
|
|
|
- () => props.modelValue,
|
|
|
- () => {
|
|
|
- show.value = props.modelValue;
|
|
|
- },
|
|
|
- { immediate: true }
|
|
|
-);
|
|
|
|
|
|
const responseLevels = [
|
|
|
// 响应等级选项
|
|
|
@@ -103,22 +63,39 @@ const responseLevels = [
|
|
|
{ value: '3', name: '较大（III级）' },
|
|
|
{ value: '4', name: '一般（IV级）' }
|
|
|
];
|
|
|
-const activeTab = ref('principles'); // 当前激活的标签页
|
|
|
-const planData = reactive({
|
|
|
- purpose: '这是内容...', // 编制目的
|
|
|
- basis: '这是内容...', // 编制依据
|
|
|
- scope: '这是内容...', // 适用范围
|
|
|
- principles: '这是内容...', // 工作原则
|
|
|
- plan_id: '' // 添加 plan_id 属性
|
|
|
-});
|
|
|
+let plan_id = '';
|
|
|
+const tabs = ref([
|
|
|
+ {
|
|
|
+ label: '总则',
|
|
|
+ children: [
|
|
|
+ { label: '编制目的', content: '编制目的内容' },
|
|
|
+ { label: '编制依据', content: '编制依据内容' },
|
|
|
+ { label: '适用范围', content: '适用范围内容' },
|
|
|
+ { label: '工作原则', content: '工作原则内容' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ { label: '组织体系', children: [] },
|
|
|
+ { label: '运行机制', children: [] },
|
|
|
+ { label: '应急保障', children: [] },
|
|
|
+ { label: '附则', children: [] },
|
|
|
+ { label: '附件', children: [] }
|
|
|
+]);
|
|
|
+const activeTab = ref(0); // 当前激活的标签页
|
|
|
+const activeTab2 = ref(0); // 当前激活的标签页
|
|
|
+
|
|
|
+const handleClickTab = (key) => {
|
|
|
+ activeTab.value = key;
|
|
|
+};
|
|
|
+const handleClickTab2 = (key) => {
|
|
|
+ activeTab2.value = key;
|
|
|
+};
|
|
|
|
|
|
// 定义事件发射器
|
|
|
-const emit = defineEmits(['update:modelValue', 'update:show']);
|
|
|
+const emit = defineEmits(['update:show']);
|
|
|
|
|
|
// 对话框关闭时执行的操作
|
|
|
const onClose = () => {
|
|
|
emit('update:show', false);
|
|
|
- emit('update:modelValue', false);
|
|
|
};
|
|
|
|
|
|
// 处理启动预案的函数
|
|
|
@@ -226,25 +203,60 @@ watch(
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.start-plan-content .section-title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- white-space: nowrap; /* 防止文本换行 */
|
|
|
-}
|
|
|
-
|
|
|
-.start-plan-content .select-level-container {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.select-level-container span {
|
|
|
- margin-right: 8px;
|
|
|
- white-space: nowrap; /* 防止文本换行 */
|
|
|
+.dialog {
|
|
|
+ position: absolute;
|
|
|
+ top: 478px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 2839px;
|
|
|
+ height: 1263px;
|
|
|
+ background: url('@/assets/images/plan/dialog.png') no-repeat;
|
|
|
+ padding-top: 200px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 36px;
|
|
|
+ .title {
|
|
|
+ position: absolute;
|
|
|
+ top: 30px;
|
|
|
+ left: 55px;
|
|
|
+ font-size: 80px;
|
|
|
+ }
|
|
|
+ .close-icon {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ right: 0px;
|
|
|
+ width: 75px;
|
|
|
+ height: 70px;
|
|
|
+ background: url('@/assets/images/map/rightMenu/close.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .section-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 15px 60px;
|
|
|
+ border: 1px solid #16448c;
|
|
|
+ .btn {
|
|
|
+ width: 440px;
|
|
|
+ height: 120px;
|
|
|
+ background: url('@/assets/images/plan/btn.png') no-repeat;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title-box {
|
|
|
+ background-image: url('@/assets/images/plan/titleBox.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 354px 28px;
|
|
|
+ background-position: bottom left;
|
|
|
+ margin: 40px 60px 0;
|
|
|
+ font-family: 'YouSheBiaoTiHei';
|
|
|
+ font-size: 56px;
|
|
|
+ padding-left: 50px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.select-level {
|
|
|
- flex-grow: 1; /* 让下拉框尽可能占据剩余空间 */
|
|
|
-}
|
|
|
h2 {
|
|
|
text-align: center;
|
|
|
}
|
|
|
@@ -252,6 +264,7 @@ h2 {
|
|
|
.plan-content {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ margin: 40px 60px;
|
|
|
}
|
|
|
|
|
|
.button-container {
|
|
|
@@ -262,4 +275,101 @@ h2 {
|
|
|
.content-row {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
+.tabs {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ overflow-x: auto;
|
|
|
+ .tab {
|
|
|
+ width: 350px;
|
|
|
+ height: 78px;
|
|
|
+ background: url('@/assets/images/plan/tab.png') no-repeat;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-end;
|
|
|
+ margin-left: 50px;
|
|
|
+ font-family: 'YouSheBiaoTiHei';
|
|
|
+ font-size: 38px;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ background: url('@/assets/images/plan/tabActive.png') no-repeat;
|
|
|
+ }
|
|
|
+ &:first-child {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabActive {
|
|
|
+ background: url('@/assets/images/plan/tabActive.png') no-repeat;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tab-content {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 30px;
|
|
|
+ .tabs2 {
|
|
|
+ .tab {
|
|
|
+ width: 399px;
|
|
|
+ height: 70px;
|
|
|
+ background: url('@/assets/images/plan/tab2.png') no-repeat;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 76px;
|
|
|
+ color: #9badc4;
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 60px;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ width: 2px;
|
|
|
+ height: 68px;
|
|
|
+ background: #2b88bd;
|
|
|
+ position: absolute;
|
|
|
+ top: -63px;
|
|
|
+ left: 42px;
|
|
|
+ }
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ &::before {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ width: 439px;
|
|
|
+ background: url('@/assets/images/plan/tab2Active.png') no-repeat;
|
|
|
+ .text {
|
|
|
+ /* 设置字体透明 */
|
|
|
+ color: transparent;
|
|
|
+ /* 设置线性渐变，从红色渐变到蓝色 */
|
|
|
+ background-image: linear-gradient(to bottom, #fff 40%, #5CC4FA 50%, #40A2E7 100%);
|
|
|
+ /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ /* 非Webkit内核浏览器需要使用标准前缀 */
|
|
|
+ background-clip: text;
|
|
|
+ /* 把当前元素设置为行内块，以便能够应用背景 */
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab-active2 {
|
|
|
+ width: 439px;
|
|
|
+ background: url('@/assets/images/plan/tab2Active.png') no-repeat;
|
|
|
+ .text {
|
|
|
+ /* 设置字体透明 */
|
|
|
+ color: transparent;
|
|
|
+ /* 设置线性渐变，从红色渐变到蓝色 */
|
|
|
+ background-image: linear-gradient(to bottom, #fff 40%, #5CC4FA 50%, #40A2E7 100%);
|
|
|
+ /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ /* 非Webkit内核浏览器需要使用标准前缀 */
|
|
|
+ background-clip: text;
|
|
|
+ /* 把当前元素设置为行内块，以便能够应用背景 */
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab-content2 {
|
|
|
+ height: 620px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
