|
|
@@ -1,1245 +0,0 @@
|
|
|
-<!-- -->
|
|
|
-<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>
|
