|
@@ -1,11 +1,858 @@
|
|
|
|
|
+<!-- -->
|
|
|
<template>
|
|
<template>
|
|
|
- <div>系统设置</div>
|
|
|
|
|
|
|
+ <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>
|
|
</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)
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
-<script setup>
|
|
|
|
|
|
|
+ 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>
|
|
|
|
|
|
|
|
-</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 scoped lang="scss">
|
|
|
|
|
|
|
+ <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;
|
|
|
|
|
|
|
|
-</style>
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+ .warn-innput .el-input__inner{
|
|
|
|
|
+ font-weight: 900;
|
|
|
|
|
+ }
|
|
|
|
|
+ </style>
|
