Forráskód Böngészése

系统设置页面

duy 1 éve
szülő
commit
dbdd477107
1 módosított fájl, 841 hozzáadás és 5 törlés
  1. 841 5
      src/views/system/set.vue

+ 841 - 5
src/views/system/set.vue

@@ -1,11 +1,847 @@
+<!--  -->
 <template>
-    <div>系统设置</div>
-</template>
+    <div class="hc-layout-box">
+        <hc-card :scrollbar="true" action-size="lg">
+            <div class="warning-box">
+                <div class="demo-collapse">
+                    <el-collapse accordion>
+                        <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 accordion class="demo-collapse1">
+                                <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>
+                                <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>
 
-<script setup>
+                                        <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('')
 
-</script>
+   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)
+ }
 
-<style scoped lang="scss">
+ 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>