analysis/src/views/system/set.vue

<!--  -->
<template>
    <div class="hc-layout-box">
        <hc-card :scrollbar="true" action-size="lg">
            <div class="warning-box">
                <div class="demo-collapse">
                    <el-collapse v-model="activeNames" accordion @change="handleChange">
                        <el-collapse-item name="1" class="p-3">
                            <template #title>
                                <hc-icon name="alarm-warning" style="font-size: 20px;" class="font-bold" />
                                <span class="font-bold" style="font-size: 18px;">预警设置</span>
                            </template>
                       
                            <el-collapse v-model="activeNames1" accordion class="demo-collapse1" @change="handleChange1">
                                <el-collapse-item name="1" class="p-10" style="padding-bottom: 100px;">
                                    <template #title>
                                        <span style="font-size: 16px;">项目预警设置</span>
                                    </template>
                                    <div class="warn-box-items h-100 flex">
                                        <div class="warn-item">
                                            <div class="warn-item-tilte">投资进展缓慢</div>
                                            <div class="warn-item-inner">
                                                <hc-row style="height: 100%;" :gutter="30">
                                                    <hc-col :span="12">
                                                        <div class="warn-item-inner-box">
                                                            <div class="text-center" style="font-size: 16px;">第一季度</div>
                                                            <div class="warn-item-inner-title text-right">该季度投资计划完成比例</div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <!-- <div class="arrow">   |||</div> -->
                                                                <div class="arrow" style="width: auto;min-width:60px">   三级预警</div>
   
                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div style="text-align: center; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div class="arrow arrow-oringe" style="width: auto;min-width:60px">   二级预警</div>
   
                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div class="arrow arrow-red">   一级预警</div>
   
                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </hc-col>
                                                    <hc-col :span="12">
                                                        <div class="warn-item-inner-box">
                                                            <div class="text-center" style="font-size: 16px;">第二季度</div>
                                                            <div class="warn-item-inner-box-title">
                                                                <div class="flex-1" />
                                                                <div class="warn-item-inner-title flex-1">该季度投资计划完成比例</div>
                                                                <div class="warn-item-inner-title ml-2 flex-1">前两季度累计投资计化完成比例</div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow">   三级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-oringe">   二级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-red">   一级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </hc-col>
                                                    <hc-col :span="12">
                                                        <div class="warn-item-inner-box">
                                                            <div class="text-center" style="font-size: 16px;">第三季度</div>
                                                            <div class="warn-item-inner-box-title">
                                                                <div class="flex-1" />
                                                                <div class="warn-item-inner-title flex-1">该季度投资计划完成比例</div>
                                                                <div class="warn-item-inner-title ml-2 flex-1">前三季度累计投资计化完成比例</div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow">   三级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-oringe">   二级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-red">   一级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </hc-col>
                                                    <hc-col :span="12">
                                                        <div class="warn-item-inner-box">
                                                            <div class="text-center" style="font-size: 16px;">第四季度</div>
                                                            <div class="warn-item-inner-box-title">
                                                                <div class="flex-1" />
                                                                <div class="warn-item-inner-title flex-1">该季度投资计划完成比例</div>
                                                                <div class="warn-item-inner-title ml-2 flex-1">当年度累计投资计化完成比例</div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow">   三级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-oringe">   二级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-red">   一级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </hc-col>
                                                </hc-row>
                                            </div>
                                        </div>
                                        <div class="warn-item">
                                            <div class="warn-item-tilte">建设进展缓慢</div>
                                            <div class="warn-item-inner">
                                                <hc-row style="height: 100%;" :gutter="20">
                                                    <hc-col :span="12">
                                                        <div class="warn-item-inner-box">
                                                            <div class="text-center" style="font-size: 16px;">第一季度</div>
                                                            <div class="warn-item-inner-title text-right">该季度投资计划完成比例</div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <!-- <div class="arrow">   |||级预警</div> -->
                                                                <div class="arrow" style="width: auto;min-width:60px">   三级预警</div>
   
                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div style="text-align: center; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div class="arrow arrow-oringe" style="width: auto;min-width:60px">   二级预警</div>
   
                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div class="arrow arrow-red">   一级预警</div>
   
                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </hc-col>
                                                    <hc-col :span="12">
                                                        <div class="warn-item-inner-box">
                                                            <div class="text-center" style="font-size: 16px;">第二季度</div>
                                                            <div class="warn-item-inner-box-title">
                                                                <div class="flex-1" />
                                                                <div class="warn-item-inner-title flex-1">该季度投资计划完成比例</div>
                                                                <div class="warn-item-inner-title ml-2 flex-1">前两季度累计投资计化完成比例</div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow">   三级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-oringe">   二级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-red">   一级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </hc-col>
                                                    <hc-col :span="12">
                                                        <div class="warn-item-inner-box">
                                                            <div class="text-center" style="font-size: 16px;">第三季度</div>
                                                            <div class="warn-item-inner-box-title">
                                                                <div class="flex-1" />
                                                                <div class="warn-item-inner-title flex-1">该季度投资计划完成比例</div>
                                                                <div class="warn-item-inner-title ml-2 flex-1">前三季度累计投资计化完成比例</div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow">   三级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-oringe">   二级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-red">   一级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </hc-col>
                                                    <hc-col :span="12">
                                                        <div class="warn-item-inner-box">
                                                            <div class="text-center" style="font-size: 16px;">第四季度</div>
                                                            <div class="warn-item-inner-box-title">
                                                                <div class="flex-1" />
                                                                <div class="warn-item-inner-title flex-1">该季度投资计划完成比例</div>
                                                                <div class="warn-item-inner-title ml-2 flex-1">当年度累计投资计化完成比例</div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow">   三级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-oringe">   二级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-red">   一级预警</div>
   
                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                                <div style="text-align: right; align-items: center;" class="flex">
                                                                    <span><</span>
                                                                    <el-input v-model="inputVal" style="width: 50px;" class="warn-innput" />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </hc-col>
                                                </hc-row>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="save-btn-left">
                                        <el-button color="#20C98B" type="primary" @click="addClick">
                                            <hc-icon name="save" class="text-white" />
                                            <span class="text-white">保存</span>
                                        </el-button>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
            <div class="other-box">
                <div class="demo-collapse">
                    <el-collapse accordion>
                        <el-collapse-item name="1" class="p-3">
                            <template #title>
                                <hc-icon name="microsoft" style="font-size: 20px;" class="font-bold" />
                                <span class="font-bold" style="font-size: 18px;">其他设置</span>
                            </template>
                       
                            <el-collapse accordion class="demo-collapse1">
                                <el-collapse-item name="1" class="p-4">
                                    <template #title>
                                        <hc-icon name="projector" style="font-size: 18px;" />
                                        <span style="font-size: 16px;">项目相关</span>
                                    </template>
                                    <div class="ml-4 font-bold">
                                        重点项目推进计划
                                    </div>
                                    <div class="main-project">
                                        <div class="main-project-item">
                                            <div>
                                                <span>项目阶段</span>
                                                <hc-icon name="arrow-right-s" style="font-size: 16px;" class="ml-2 mr-2 font-bold" />
                                            </div>
                                            <div>
                                                <div v-for="(item, index) in proStation" :key="index" class="mt-1">
                                                    <el-input v-model="item.name" style="width: 340px" placeholder="阶段名称" /> 
                                                    <el-link :underline="false" type="primary">
                                                        <hc-icon name="add" style="font-size: 20px;" class="font-bold" @click="addClick(item, index)" />
                                                    </el-link> 
                                                    <el-link :underline="false" type="primary">
                                                        <hc-icon name="close" style="font-size: 20px;" class="font-bold" @click="delClick(item, index)" />
                                                    </el-link>
                                                </div>
                                              
                                              
                                              
                                                <div class="mt-3"> 
                                                    <el-button color="#20C98B" type="primary" class="ml-28">
                                                        <hc-icon name="save" class="text-white" />
                                                        <span class="text-white">保存</span>
                                                    </el-button>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="main-project-item">
                                            <div>
                                                <span>项目类型</span>
                                                <hc-icon name="arrow-right-s" style="font-size: 16px;" class="ml-2 mr-2 font-bold" />
                                            </div>
                                            <div>
                                                <div v-for="(item, index) in proType" :key="index" class="mt-1">
                                                    <el-input v-model="item.name" style="width: 340px" placeholder="类型名称" /> 
                                                    <el-link :underline="false" type="primary">
                                                        <hc-icon name="add" style="font-size: 20px;" class="font-bold" @click="addClickType(item, index)" />
                                                    </el-link> 
                                                    <el-link :underline="false" type="primary">
                                                        <hc-icon name="close" style="font-size: 20px;" class="font-bold" @click="delClickType(item, index)" />
                                                    </el-link>
                                                </div>
                                             
                                               
                                             
                                                <div class="mt-3"> 
                                                    <el-button color="#20C98B" type="primary" class="ml-28">
                                                        <hc-icon name="save" class="text-white" />
                                                        <span class="text-white">保存</span>
                                                    </el-button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <el-divider class="mt-10" />
                                    <div class="ml-4 font-bold">
                                        工作要点任务分工
                                    </div>
                                    <div class="main-project">
                                        <div class="main-project-item">
                                            <div>
                                                <span>项目阶段</span>
                                                <hc-icon name="arrow-right-s" style="font-size: 16px;" class="ml-2 mr-2 font-bold" />
                                            </div>
                                            <div>
                                                <div v-for="(item, index) in proStationTip" :key="index" class="mt-1">
                                                    <el-input v-model="item.name" style="width: 340px" placeholder="阶段名称" /> 
                                                    <el-link :underline="false" type="primary">
                                                        <hc-icon name="add" style="font-size: 20px;" class="font-bold" @click="addClickTip(item, index)" />
                                                    </el-link> 
                                                    <el-link :underline="false" type="primary">
                                                        <hc-icon name="close" style="font-size: 20px;" class="font-bold" @click="delClickTip(item, index)" />
                                                    </el-link>
                                                </div>
                                               
                                                <div class="mt-3"> 
                                                    <el-button color="#20C98B" type="primary" class="ml-28">
                                                        <hc-icon name="save" class="text-white" />
                                                        <span class="text-white">保存</span>
                                                    </el-button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
        </hc-card>
    </div>
</template>
   
   <script setup>
   import { ref, watch } from 'vue'
   const inputVal = ref(75)
   const inputVal2 = ref('')
   const activeNames = ref(['1'])
   const activeNames1 = ref(['1'])
   const handleChange1 = (val)=>{
        if (!val) {
            activeNames.value = ''
        }
   }
   const handleChange = (val)=>{
        if (val) {
            activeNames1.value = '1'
        }
   }
   const proStation = ref([
    { name:'新开项目' },
    { name:'建成项目' },
    { name:'在建项目' },
    { name:'加快前期工作项目' },
   ])
   const addClick = (item, index)=>{
  
    proStation.value.splice(index, 0, { name:'' })
   }
   const delClick = (item, index)=>{
    proStation.value.splice(index, 1)
   }
   const proType = ref([
   { name:'铁路' },
   { name:'建成项目' },
  
   ])
   const addClickType = (item, index)=>{
  
    proType.value.splice(index, 0, { name:'' })
 }
 const delClickType = (item, index)=>{
    proType.value.splice(index, 1)
 }

 const proStationTip = ref([
    { name:'紧盯重大项目，推动交通投资稳进增效' },
    { name:'深化战略研究，优化完善交通规划体系' },
  
   ])
   const addClickTip = (item, index)=>{
  
    proStationTip.value.splice(index, 0, { name:'' })
   }
   const delClickTip = (item, index)=>{
    proStationTip.value.splice(index, 1)
   }
   </script>

   <style lang='scss' scoped>
   .hc-layout-box{
    position: relative;
    height: 100%;
    width: 100%;
}
   .warning-box{
       width: 100%;
       height: auto;
       position: relative;
   
       // border:1px solid red;
       .warn-box-items{
      
           display: flex;
           justify-content: space-between;
        
           .warn-item{
               border:1px solid rgb(187, 187, 187);
               height: 520px;
            
               width: 48%;
             
               .warn-item-tilte{
                   height: 45px;
                   line-height: 45px;
                   background-color: #015EA7;
                   color: white;
                   font-size: 18px;
                   font-weight: 800;
                   text-align: center;
               }
               .warn-item-inner{
                   padding: 10px;
                   
                   .warn-item-inner-box{
                       padding: 15px;
                    
                    //    border:1px solid rgb(187, 187, 187);
                       .warn-item-inner-box-detail{
                           margin-top: 10px;
                           width: 100%;
                           display: flex;
                           justify-content: space-between;
                           align-items: center;
                       }
   
                   }
               }
           }
       }
       .save-btn-left{
        position: absolute;
        right:50px;
        bottom:0px
       }
       
   }
   .other-box{
       width: 100%;
        margin-top: 30px;
    //    border:1px solid black;
   }
   
   
   .arrow {
       color: white;
           position: relative;
           width: 80px; /* 矩形的宽度 */
           height: 30px; /* 矩形的高度 */
           line-height: 30px;
           background-color:#06B2F6; /* 矩形的背景颜色 */
           padding-left: 5px;
           width: auto;
           min-width:60px
       }
  
       .arrow::after {
           content: '';
           position: absolute;
           top: 50%;
           right: -15px; /* 三角形相对于右边缘的偏移量 */
           width: 0;
           height: 0;
           border-top: 15px solid transparent; /* 上三角形的大小 */
           border-bottom: 15px solid transparent; /* 下三角形的大小 */
           border-left:15px solid #06B2F6; /* 三角形的颜色 */
           transform: translateY(-50%);
       }
       .arrow-oringe::after{
            border-left:15px solid  #FF9102; /* 三角形的颜色 */
        }
        .arrow-red::after{
            border-left:15px solid  #FF0001; /* 三角形的颜色 */
        }
       .warn-item-inner-box-detail-right{
           margin-top: 10px;
                           width: 100%;
                           display: flex;
                           justify-content: space-around;
                           align-items: center;
       }
       
   .warn-item-inner-box-title{
       display: flex;
       text-align: right;
      
       
   }
   .demo-collapse{
       height: auto;
   }
   .warn-item-inner-title{
       height: 35px;
   }
   .main-project{
       display: flex;
       justify-content: space-between;
       padding-left: 40px;
       padding-right: 40px;
       width: 100%;
       padding-top: 20px;
      .main-project-item{
       flex: 1;
       display: flex;
       align-items: center;
      }
   }
   .arrow-oringe{
    background-color: #FF9102;
   }
   .arrow-red{
    background-color:#FF0001;
   }
</style>

   <style>
   .demo-collapse .el-collapse-item__wrap{
    border-bottom: none;
   }
   .demo-collapse .el-collapse{
    border-bottom: none;
   }
   .demo-collapse1 .el-collapse-item__header.is-active{
    border-bottom:1px solid var(--el-collapse-border-color);
    margin-bottom: 10px;
   }
   .demo-collapse .el-collapse-item__wrap{
    overflow: initial;

   }
   .warn-innput .el-input__inner{
    font-weight: 900;
   }
   </style>