|
|
@@ -0,0 +1,1245 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="hc-layout-box">
|
|
|
+ <hc-card :scrollbar="true" action-size="lg">
|
|
|
+ <div class="warning-box">
|
|
|
+ <div class="demo-collapse">
|
|
|
+ <el-collapse v-model="activeNames" accordion @change="handleChange">
|
|
|
+ <el-collapse-item class="p-3" name="1">
|
|
|
+ <template #title>
|
|
|
+ <hc-icon class="font-bold" name="alarm-warning" style="font-size: 20px;" />
|
|
|
+ <span class="font-bold" style="font-size: 18px;">异常设置</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-collapse
|
|
|
+ v-model="activeNames1" accordion class="demo-collapse1"
|
|
|
+ @change="handleChange1"
|
|
|
+ >
|
|
|
+ <el-collapse-item class="p-10" name="1" 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">
|
|
|
+ <el-row style="height: 100%;">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="warn-item-inner-box">
|
|
|
+ <div class="ml-[50px] text-center" style="font-size: 16px;">
|
|
|
+ 第一季度
|
|
|
+ </div>
|
|
|
+ <div class="warn-item-inner-title ml-[50px] 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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: center; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :offset="6" :span="10">
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :offset="4" :span="10">
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="warn-item">
|
|
|
+ <div class="warn-item-tilte">建设进展缓慢</div>
|
|
|
+ <div class="warn-item-inner">
|
|
|
+ <el-row :gutter="4" style="height: 100%;">
|
|
|
+ <el-col :span="8">
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: center; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :offset="6" :span="8">
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: center; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: center; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :offset="6" :span="8">
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: center; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <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
|
|
|
+ class="flex"
|
|
|
+ style="text-align: right; align-items: center;"
|
|
|
+ >
|
|
|
+ <span class="mr-1"><</span>
|
|
|
+ <el-input
|
|
|
+ v-model="inputVal" class="warn-innput"
|
|
|
+ style="width: 50px;"
|
|
|
+ />
|
|
|
+ <span>%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="save-btn-left">
|
|
|
+ <el-button color="#20C98B" type="primary" @click="addClick">
|
|
|
+ <hc-icon class="text-white" name="save" />
|
|
|
+ <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 v-model="activeNames3" accordion @change="handleChange3">
|
|
|
+ <el-collapse-item class="p-3" name="1">
|
|
|
+ <template #title>
|
|
|
+ <hc-icon class="font-bold" name="microsoft" style="font-size: 20px;" />
|
|
|
+ <span class="font-bold" style="font-size: 18px;">其他设置</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-collapse
|
|
|
+ v-model="activeNames4" accordion class="demo-collapse1"
|
|
|
+ @change="handleChange4"
|
|
|
+ >
|
|
|
+ <el-collapse-item class="p-4" name="1">
|
|
|
+ <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>
|
|
|
+ <div class="main-project-item">
|
|
|
+ <div>
|
|
|
+ <span>项目阶段</span>
|
|
|
+ <hc-icon
|
|
|
+ class="ml-2 mr-2 font-bold" name="arrow-right-s"
|
|
|
+ style="font-size: 16px;"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div style="max-height:300px;overflow-y: auto;">
|
|
|
+ <div v-for="(item, index) in proStation" :key="index" class="mt-1">
|
|
|
+ <el-input
|
|
|
+ v-model="item.dictValue" placeholder="阶段名称"
|
|
|
+ style="width: 340px"
|
|
|
+ />
|
|
|
+ <el-link :underline="false" type="primary">
|
|
|
+ <hc-icon
|
|
|
+ class="font-bold" name="add"
|
|
|
+ style="font-size: 20px;" @click="addClick(item, index)"
|
|
|
+ />
|
|
|
+ </el-link>
|
|
|
+ <el-link :underline="false" type="primary">
|
|
|
+ <hc-icon
|
|
|
+ class="font-bold" name="close"
|
|
|
+ style="font-size: 20px;" @click="delClick(item, index)"
|
|
|
+ />
|
|
|
+ </el-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ml-38 mt-3">
|
|
|
+ <el-button
|
|
|
+ :loading="saveProStationLoad" class="ml-8" color="#20C98B"
|
|
|
+ type="primary" @click="saveProStation"
|
|
|
+ >
|
|
|
+ <hc-icon class="text-white" name="save" />
|
|
|
+ <span class="text-white">保存</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <div class="main-project-item">
|
|
|
+ <div>
|
|
|
+ <span>项目类型</span>
|
|
|
+ <hc-icon
|
|
|
+ class="ml-2 mr-2 font-bold" name="arrow-right-s"
|
|
|
+ style="font-size: 16px;"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div style="max-height:300px;overflow-y: auto;">
|
|
|
+ <div v-for="(item, index) in proType" :key="index" class="mt-1">
|
|
|
+ <el-input
|
|
|
+ v-model="item.dictValue" placeholder="类型名称"
|
|
|
+ style="width: 340px"
|
|
|
+ />
|
|
|
+ <el-link :underline="false" type="primary">
|
|
|
+ <hc-icon
|
|
|
+ class="font-bold" name="add"
|
|
|
+ style="font-size: 20px;"
|
|
|
+ @click="addClickType(item, index)"
|
|
|
+ />
|
|
|
+ </el-link>
|
|
|
+ <el-link :underline="false" type="primary">
|
|
|
+ <hc-icon
|
|
|
+ class="font-bold" name="close"
|
|
|
+ style="font-size: 20px;"
|
|
|
+ @click="delClickType(item, index)"
|
|
|
+ />
|
|
|
+ </el-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ml-38 mt-3">
|
|
|
+ <el-button
|
|
|
+ :loading="saveProTypenLoad" class="ml-8" color="#20C98B"
|
|
|
+ type="primary" @click="saveProType"
|
|
|
+ >
|
|
|
+ <hc-icon class="text-white" name="save" />
|
|
|
+ <span class="text-white">保存</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-divider class="mt-10" />
|
|
|
+ <div class="ml-4 font-bold">
|
|
|
+ 工作要点任务分工
|
|
|
+ </div>
|
|
|
+ <div class="main-project">
|
|
|
+ <div>
|
|
|
+ <div class="main-project-item">
|
|
|
+ <div>
|
|
|
+ <span>项目阶段</span>
|
|
|
+ <hc-icon
|
|
|
+ class="ml-2 mr-2 font-bold" name="arrow-right-s"
|
|
|
+ style="font-size: 16px;"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div style="max-height:300px;overflow-y: auto;">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in proStationTip" :key="index"
|
|
|
+ class="mt-1"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="item.dictValue" placeholder="阶段名称"
|
|
|
+ style="width: 340px"
|
|
|
+ />
|
|
|
+ <el-link :underline="false" type="primary">
|
|
|
+ <hc-icon
|
|
|
+ class="font-bold" name="add"
|
|
|
+ style="font-size: 20px;"
|
|
|
+ @click="addClickTip(item, index)"
|
|
|
+ />
|
|
|
+ </el-link>
|
|
|
+ <el-link :underline="false" type="primary">
|
|
|
+ <hc-icon
|
|
|
+ class="font-bold" name="close"
|
|
|
+ style="font-size: 20px;"
|
|
|
+ @click="delClickTip(item, index)"
|
|
|
+ />
|
|
|
+ </el-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div>
|
|
|
+ <el-button color="#20C98B" type="primary" class="ml-8" :loading="savProStationTipLoad" @click="saveProStationTip">
|
|
|
+ <hc-icon name="save" class="text-white" />
|
|
|
+ <span class="text-white">保存</span>
|
|
|
+ </el-button>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="ml-38 mt-3">
|
|
|
+ <el-button
|
|
|
+ :loading="savProStationTipLoad" class="ml-8" color="#20C98B"
|
|
|
+ type="primary" @click="saveProStationTip"
|
|
|
+ >
|
|
|
+ <hc-icon class="text-white" name="save" />
|
|
|
+ <span class="text-white">保存</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </hc-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { onMounted, ref } from 'vue'
|
|
|
+import { getDictionary, saveDict } from '~api/dictbiz'
|
|
|
+import { arrToKey, getArrValue, isArrItem } from 'js-fast-way'
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getProStation()
|
|
|
+ getProType()
|
|
|
+ getProStationTip()
|
|
|
+})
|
|
|
+
|
|
|
+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 activeNames3 = ref(['1'])
|
|
|
+const activeNames4 = ref(['1'])
|
|
|
+const handleChange4 = (val) => {
|
|
|
+ if (!val) {
|
|
|
+ activeNames3.value = ''
|
|
|
+ }
|
|
|
+}
|
|
|
+const handleChange3 = (val) => {
|
|
|
+ if (val) {
|
|
|
+ activeNames4.value = '1'
|
|
|
+ }
|
|
|
+}
|
|
|
+const proStation = ref([{ dictValue: '' }])
|
|
|
+
|
|
|
+const getProStation = async () => {
|
|
|
+ const { error, code, data } = await getDictionary({ code: 'projectStage' })
|
|
|
+ if (!error && code === 200) {
|
|
|
+ proStation.value = getArrValue(data)
|
|
|
+ if (proStation.value.length === 0) {
|
|
|
+ proStation.value = [
|
|
|
+ { dictValue: '' },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ proStation.value = []
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+const addClick = (item, index) => {
|
|
|
+ proStation.value.splice(index + 1, 0, { dictValue: '' })
|
|
|
+}
|
|
|
+const delClick = (item, index) => {
|
|
|
+ if (proStation.value.length === 1) {
|
|
|
+ window.$message.warning('请至少保留一条数据')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ proStation.value.splice(index, 1)
|
|
|
+}
|
|
|
+const saveProStationLoad = ref(false)
|
|
|
+const saveProStation = async () => {
|
|
|
+ const list = arrToKey(proStation.value, 'dictValue', ',').split(',')
|
|
|
+ const isIn = isArrItem(list, '') // true
|
|
|
+ if (isIn) {
|
|
|
+ window.$message.warning('请输入阶段名称')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ saveProStationLoad.value = true
|
|
|
+ const { error, code, msg } = await saveDict({ type: 'projectStage', list })
|
|
|
+ saveProStationLoad.value = false
|
|
|
+ if (!error && code === 200) {
|
|
|
+ window?.$message?.success(msg)
|
|
|
+ getProStation()
|
|
|
+ } else {
|
|
|
+ window.$message.error(msg ?? '操作失败')
|
|
|
+ }
|
|
|
+}
|
|
|
+const proType = ref([
|
|
|
+ { name: '铁路' },
|
|
|
+ { name: '建成项目' },
|
|
|
+
|
|
|
+])
|
|
|
+const getProType = async () => {
|
|
|
+ const { error, code, data } = await getDictionary({ code: 'projectType' })
|
|
|
+ if (!error && code === 200) {
|
|
|
+ proType.value = getArrValue(data)
|
|
|
+ if (proType.value.length === 0) {
|
|
|
+ proType.value = [
|
|
|
+ { dictValue: '' },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ proType.value = []
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+const addClickType = (item, index) => {
|
|
|
+
|
|
|
+ proType.value.splice(index + 1, 0, { dictValue: '' })
|
|
|
+}
|
|
|
+const delClickType = (item, index) => {
|
|
|
+ if (proType.value.length === 1) {
|
|
|
+ window.$message.warning('请至少保留一条数据')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ proType.value.splice(index, 1)
|
|
|
+}
|
|
|
+const saveProTypenLoad = ref(false)
|
|
|
+const saveProType = async () => {
|
|
|
+ const list = arrToKey(proType.value, 'dictValue', ',').split(',')
|
|
|
+ const isIn = isArrItem(list, '') // true
|
|
|
+ if (isIn) {
|
|
|
+ window.$message.warning('请输入类型名称')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ saveProTypenLoad.value = true
|
|
|
+ const { error, code, msg } = await saveDict({ type: 'projectType', list })
|
|
|
+ saveProTypenLoad.value = false
|
|
|
+ if (!error && code === 200) {
|
|
|
+ window?.$message?.success(msg)
|
|
|
+ getProType()
|
|
|
+ } else {
|
|
|
+ window.$message.error(msg ?? '操作失败')
|
|
|
+ }
|
|
|
+}
|
|
|
+const proStationTip = ref([])
|
|
|
+const getProStationTip = async () => {
|
|
|
+ const { error, code, data } = await getDictionary({ code: 'workFocusStage' })
|
|
|
+ if (!error && code === 200) {
|
|
|
+ proStationTip.value = getArrValue(data)
|
|
|
+ if (proStationTip.value.length === 0) {
|
|
|
+ proStationTip.value = [
|
|
|
+ { dictValue: '' },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ proStationTip.value = []
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+const addClickTip = (item, index) => {
|
|
|
+
|
|
|
+ proStationTip.value.splice(index + 1, 0, { dictValue: '' })
|
|
|
+}
|
|
|
+const delClickTip = (item, index) => {
|
|
|
+ if (proStationTip.value.length === 1) {
|
|
|
+ window.$message.warning('请至少保留一条数据')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ proStationTip.value.splice(index, 1)
|
|
|
+}
|
|
|
+const savProStationTipLoad = ref(false)
|
|
|
+const saveProStationTip = async () => {
|
|
|
+ const list = arrToKey(proType.value, 'dictValue', ',').split(',')
|
|
|
+ const isIn = isArrItem(list, '') // true
|
|
|
+ if (isIn) {
|
|
|
+ window.$message.warning('请输入阶段名称')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ savProStationTipLoad.value = true
|
|
|
+ const { error, code, msg } = await saveDict({ type: 'workFocusStage', list })
|
|
|
+ savProStationTipLoad.value = false
|
|
|
+ if (!error && code === 200) {
|
|
|
+ window?.$message?.success(msg)
|
|
|
+ getProStationTip()
|
|
|
+ } else {
|
|
|
+ window.$message.error(msg ?? '操作失败')
|
|
|
+ }
|
|
|
+}
|
|
|
+</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: 550px;
|
|
|
+
|
|
|
+ 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: -25px
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+.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;
|
|
|
+ text-align: center;
|
|
|
+ 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: 55px;
|
|
|
+ text-align: center;
|
|
|
+ // margin-top: 10px;
|
|
|
+
|
|
|
+}
|
|
|
+.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>
|
