|
|
@@ -29,14 +29,14 @@
|
|
|
</el-button>
|
|
|
</div>
|
|
|
<div class="view_link">
|
|
|
- <span class="text-hover text-blue link_span">查看系统操作手册</span>
|
|
|
+ <span class="link_span text-hover text-blue">查看系统操作手册</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-header>
|
|
|
- <el-container class=" mt-8 ">
|
|
|
+ <el-container class="mt-8">
|
|
|
<el-aside :width="`${isWbsTreeShow ? leftWidth : 100}%`">
|
|
|
- <div class="border left_box contain_box">
|
|
|
+ <div class="left_box contain_box border">
|
|
|
<div class="title_box">
|
|
|
<span>工程内业进度统计表</span>
|
|
|
</div>
|
|
|
@@ -47,10 +47,10 @@
|
|
|
:row-class-name="tableRowClassName"
|
|
|
:data="tableData1"
|
|
|
style="width: 100%;height:100%"
|
|
|
-
|
|
|
+
|
|
|
row-key="id"
|
|
|
- border
|
|
|
- lazy
|
|
|
+
|
|
|
+ lazy border
|
|
|
:load="loadData"
|
|
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
|
>
|
|
|
@@ -75,7 +75,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-aside>
|
|
|
- <div class="right_box border ">
|
|
|
+ <div class="right_box border">
|
|
|
<el-main class="contain_box">
|
|
|
<div class="hc-expansion-contraction-tree" @click="setWbsTreeShow">
|
|
|
<HcIcon v-show="!isWbsTreeShow" name="arrow-left-s" />
|
|
|
@@ -89,16 +89,23 @@
|
|
|
<div class="card_box mt-4">
|
|
|
<div class="box_item">
|
|
|
<div class="card_title1 ml-2">
|
|
|
- <HcIcon name="notification-2" fill style="color: orange;" class="mr-2" /> 291
|
|
|
+ <HcIcon name="notification-2" fill style="color: orange;" class="mr-2" />
|
|
|
+ 291
|
|
|
</div>
|
|
|
<div class="card_title mt-4">上报超过7天</div>
|
|
|
</div>
|
|
|
<div class="box_item">
|
|
|
- <div class="card_title1 ml-2"> <HcIcon name="notification-2" fill style="color: blue;" class="mr-2" />291</div>
|
|
|
+ <div class="card_title1 ml-2">
|
|
|
+ <HcIcon name="notification-2" fill style="color: blue;" class="mr-2" />
|
|
|
+ 291
|
|
|
+ </div>
|
|
|
<div class="card_title mt-4">上报超过1天</div>
|
|
|
</div>
|
|
|
<div class="box_item">
|
|
|
- <div class="card_title1 ml-2"> <HcIcon name="notification-2" fill style="color: red;" class="mr-2" />291</div>
|
|
|
+ <div class="card_title1 ml-2">
|
|
|
+ <HcIcon name="notification-2" fill style="color: red;" class="mr-2" />
|
|
|
+ 291
|
|
|
+ </div>
|
|
|
<div class="card_title mt-4">上报超过30天</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -109,7 +116,10 @@
|
|
|
<div>{{ item.name }}</div>
|
|
|
<div>
|
|
|
<!-- <HcIcon name="notification-2" fill style="color:rgb(119, 40, 245); pu;font-size: 24px;" class="mr-2" /> -->
|
|
|
- <el-button type="primary" size="small" style="background-color: #0081ff;border: none;">
|
|
|
+ <el-button
|
|
|
+ type="primary" size="small"
|
|
|
+ style="background-color: #0081ff;border: none;"
|
|
|
+ >
|
|
|
审批
|
|
|
</el-button>
|
|
|
</div>
|
|
|
@@ -127,6 +137,7 @@
|
|
|
<script setup>
|
|
|
import { ref, watch } from 'vue'
|
|
|
import { useAppStore } from '~src/store'
|
|
|
+
|
|
|
const userStore = useAppStore()
|
|
|
const userInfo = ref(userStore.getUserInfo)
|
|
|
import avatarPng from '~src/assets/images/avatar.png'
|
|
|
@@ -139,7 +150,7 @@ watch(() => [
|
|
|
|
|
|
const isWbsTreeShow = ref(true)
|
|
|
//是否展示右边表格
|
|
|
-const setWbsTreeShow = ()=>{
|
|
|
+const setWbsTreeShow = () => {
|
|
|
isWbsTreeShow.value = !isWbsTreeShow.value
|
|
|
}
|
|
|
|
|
|
@@ -149,251 +160,249 @@ const url = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171j
|
|
|
|
|
|
const loadData = async (row, treeNode, resolve) => {
|
|
|
resolve([
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- date: '路基工程',
|
|
|
- name: '单位工程',
|
|
|
- address: '3232',
|
|
|
- address1: '3232',
|
|
|
- type:'1',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- date: '路基工程',
|
|
|
- name: '单位工程',
|
|
|
- address: '3232',
|
|
|
- address1: '3232',
|
|
|
- type:'1',
|
|
|
- },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ date: '路基工程',
|
|
|
+ name: '单位工程',
|
|
|
+ address: '3232',
|
|
|
+ address1: '3232',
|
|
|
+ type: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ date: '路基工程',
|
|
|
+ name: '单位工程',
|
|
|
+ address: '3232',
|
|
|
+ address1: '3232',
|
|
|
+ type: '1',
|
|
|
+ },
|
|
|
])
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
|
const tableData1 = ref([
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- date: '路基工程路基工程路基工程路基工程程路基工程',
|
|
|
- name: '单位工程',
|
|
|
- address: '3232',
|
|
|
- address1: '3232',
|
|
|
- type:'1',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- date: '路基工程',
|
|
|
- name: '单位工程',
|
|
|
- address: '3232',
|
|
|
- address1: '3232',
|
|
|
- type:'1',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- date: '路基工程',
|
|
|
- name: '单位工程',
|
|
|
- address: '3232',
|
|
|
- address1: '3232',
|
|
|
- type:'1',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- date: '路基工程',
|
|
|
- name: '分部工程',
|
|
|
- address: '3232',
|
|
|
- address1: '3232',
|
|
|
- type:'2',
|
|
|
- children:[
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ date: '路基工程路基工程路基工程路基工程程路基工程',
|
|
|
+ name: '单位工程',
|
|
|
+ address: '3232',
|
|
|
+ address1: '3232',
|
|
|
+ type: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ date: '路基工程',
|
|
|
+ name: '单位工程',
|
|
|
+ address: '3232',
|
|
|
+ address1: '3232',
|
|
|
+ type: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ date: '路基工程',
|
|
|
+ name: '单位工程',
|
|
|
+ address: '3232',
|
|
|
+ address1: '3232',
|
|
|
+ type: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ date: '路基工程',
|
|
|
+ name: '分部工程',
|
|
|
+ address: '3232',
|
|
|
+ address1: '3232',
|
|
|
+ type: '2',
|
|
|
+ children: [
|
|
|
{
|
|
|
- id: 4,
|
|
|
- date: '路基工程',
|
|
|
- name: '分部工程',
|
|
|
- address: '3232',
|
|
|
- address1: '3232',
|
|
|
- type:'2',
|
|
|
- },
|
|
|
- ],
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- date: '路基工程',
|
|
|
- name: '分项工程',
|
|
|
- address: '3232',
|
|
|
- address1: '3232',
|
|
|
- type:'3',
|
|
|
- },
|
|
|
+ id: 4,
|
|
|
+ date: '路基工程',
|
|
|
+ name: '分部工程',
|
|
|
+ address: '3232',
|
|
|
+ address1: '3232',
|
|
|
+ type: '2',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ date: '路基工程',
|
|
|
+ name: '分项工程',
|
|
|
+ address: '3232',
|
|
|
+ address1: '3232',
|
|
|
+ type: '3',
|
|
|
+ },
|
|
|
])
|
|
|
- // 某行
|
|
|
+// 某行
|
|
|
|
|
|
- const tableRowClassName = ({ row, rowIndex })=> {
|
|
|
- if (row.type === '1') { // 判断条件
|
|
|
- return 'demo1'
|
|
|
- } else if (row.type === '2') {
|
|
|
- return 'demo2'
|
|
|
- } else if (row.type === '3') {
|
|
|
- return 'demo3'
|
|
|
- }
|
|
|
+const tableRowClassName = ({ row, rowIndex }) => {
|
|
|
+ if (row.type === '1') { // 判断条件
|
|
|
+ return 'demo1'
|
|
|
+ } else if (row.type === '2') {
|
|
|
+ return 'demo2'
|
|
|
+ } else if (row.type === '3') {
|
|
|
+ return 'demo3'
|
|
|
}
|
|
|
+}
|
|
|
const taskList = ref([
|
|
|
- { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.任务名称There little thoughts are the rustle of leaves; they have their whisperof' },
|
|
|
- { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
- { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
- { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
- { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
- { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
- { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
- { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
- { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
- { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
- { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
- { name:'任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
+ { name: '任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.任务名称There little thoughts are the rustle of leaves; they have their whisperof' },
|
|
|
+ { name: '任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
+ { name: '任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
+ { name: '任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
+ { name: '任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
+ { name: '任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
+ { name: '任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
+ { name: '任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
+ { name: '任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
+ { name: '任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
+ { name: '任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
+ { name: '任务名称There little thoughts are the rustle of leaves; they have their whisperof joy in my mind.' },
|
|
|
])
|
|
|
</script>
|
|
|
|
|
|
-<style lang='scss' scoped>
|
|
|
-.home{
|
|
|
- .header{
|
|
|
+<style lang="scss" scoped>
|
|
|
+.home {
|
|
|
+ .header {
|
|
|
border: 2px dashed var(--el-color-primary) !important;;
|
|
|
height: 180px;
|
|
|
- .header_box{
|
|
|
+ .header_box {
|
|
|
padding-top: 20px;
|
|
|
padding-bottom: 10px;
|
|
|
display: flex;
|
|
|
-
|
|
|
- .headr_img{
|
|
|
+
|
|
|
+ .headr_img {
|
|
|
width: 131px;
|
|
|
height: 131px;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
- .header_title{
|
|
|
+ .header_title {
|
|
|
margin-left: 30px;
|
|
|
- .font1{
|
|
|
+ .font1 {
|
|
|
font-size: 28px;
|
|
|
font-weight: 700;
|
|
|
margin-top: 5px;
|
|
|
}
|
|
|
- .font2{
|
|
|
+ .font2 {
|
|
|
font-size: 20px;
|
|
|
font-weight: 700;
|
|
|
margin-top: 15px;
|
|
|
}
|
|
|
- .font3{
|
|
|
+ .font3 {
|
|
|
margin-top: 40px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
- .header_right{
|
|
|
- position: absolute;
|
|
|
- right: 40px;
|
|
|
- .btn_blue{
|
|
|
- background-color: rgb(231, 247, 255);
|
|
|
- border-color: rgb(145, 213, 255);
|
|
|
- color: rgb(46, 154, 255);
|
|
|
- }
|
|
|
- .btn_green{
|
|
|
- border-color: rgb(135, 232, 222);
|
|
|
- background: rgb(230, 255, 251);
|
|
|
- color: rgb(29, 197, 196);
|
|
|
- }
|
|
|
- .view_link{
|
|
|
+ .header_right {
|
|
|
position: absolute;
|
|
|
- top: 110px;
|
|
|
- right: 7px;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 700;
|
|
|
- .link_span{
|
|
|
- text-decoration: underline;
|
|
|
+ right: 40px;
|
|
|
+ .btn_blue {
|
|
|
+ background-color: rgb(231, 247, 255);
|
|
|
+ border-color: rgb(145, 213, 255);
|
|
|
+ color: rgb(46, 154, 255);
|
|
|
+ }
|
|
|
+ .btn_green {
|
|
|
+ border-color: rgb(135, 232, 222);
|
|
|
+ background: rgb(230, 255, 251);
|
|
|
+ color: rgb(29, 197, 196);
|
|
|
+ }
|
|
|
+ .view_link {
|
|
|
+ position: absolute;
|
|
|
+ top: 110px;
|
|
|
+ right: 7px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ .link_span {
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
- .border{
|
|
|
+ .border {
|
|
|
border: 2px dashed var(--el-color-primary) !important;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
- .contain_box{
|
|
|
+ .contain_box {
|
|
|
height: calc(100vh - 300px);
|
|
|
overflow: hidden;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
- .left_box{
|
|
|
+ .left_box {
|
|
|
position: relative;
|
|
|
margin-right: 20px;
|
|
|
padding: 15px;
|
|
|
- .title_box{
|
|
|
+ .title_box {
|
|
|
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .right_box{
|
|
|
+
|
|
|
+ .right_box {
|
|
|
position: relative;
|
|
|
// height: 100%;
|
|
|
- width:100%;
|
|
|
-
|
|
|
- .card{
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .card {
|
|
|
height: 129px;
|
|
|
width: 100%;
|
|
|
background: rgb(255, 255, 255);
|
|
|
border-radius: 15px;
|
|
|
padding: 15px;
|
|
|
- .card_title{
|
|
|
- color:rgb(136, 136, 136);
|
|
|
+ .card_title {
|
|
|
+ color: rgb(136, 136, 136);
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
- .card_title1{
|
|
|
+ .card_title1 {
|
|
|
color: black;
|
|
|
font-weight: 700;
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
- .card_box{
|
|
|
+ .card_box {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
width: 100%;
|
|
|
-
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .task_box {
|
|
|
+ padding-right: 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 200px);
|
|
|
+ overflow-y: auto;
|
|
|
+ .task_item_box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
- .task_box{
|
|
|
- padding-right: 10px;
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 200px);
|
|
|
- overflow-y: auto;
|
|
|
- .task_item_box{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.hc-expansion-contraction-tree {
|
|
|
- position: absolute;
|
|
|
- left: -20px;
|
|
|
- top: 0;
|
|
|
- width: 18px;
|
|
|
- height: 100%;
|
|
|
- user-select: none;
|
|
|
- cursor: pointer;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: #8c9099;
|
|
|
- font-size: 22px;
|
|
|
- border-radius: 5px;
|
|
|
- transition: background 0.2s;
|
|
|
- background: rgba(255, 255, 255, 0);
|
|
|
- &:hover {
|
|
|
- background: #f1f5f8;
|
|
|
- color: var(--el-color-primary);
|
|
|
+ position: absolute;
|
|
|
+ left: -20px;
|
|
|
+ top: 0;
|
|
|
+ width: 18px;
|
|
|
+ height: 100%;
|
|
|
+ user-select: none;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #8c9099;
|
|
|
+ font-size: 22px;
|
|
|
+ border-radius: 5px;
|
|
|
+ transition: background 0.2s;
|
|
|
+ background: rgba(255, 255, 255, 0);
|
|
|
+ z-index: 1000;
|
|
|
+ &:hover {
|
|
|
+ background: #f1f5f8;
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ }
|
|
|
}
|
|
|
- z-index: 1000;
|
|
|
-}
|
|
|
-.hc-expansion-contraction-tree {
|
|
|
+ .hc-expansion-contraction-tree {
|
|
|
color: var(--hc-label-color);
|
|
|
&:hover {
|
|
|
color: var(--el-color-primary);
|
|
|
@@ -401,36 +410,35 @@ const taskList = ref([
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
-<style lang='scss'>
|
|
|
-.index_table_box{
|
|
|
+<style lang="scss">
|
|
|
+.index_table_box {
|
|
|
height: 95%;
|
|
|
width: 100%;
|
|
|
|
|
|
.el-table {
|
|
|
- --el-table-border-color:var(--el-color-primary) !important;
|
|
|
-
|
|
|
+ --el-table-border-color: var(--el-color-primary) !important;
|
|
|
+
|
|
|
}
|
|
|
.demo1_pro .el-progress-bar__inner {
|
|
|
- background-color:rgba(84,188,189,1) !important;
|
|
|
- }
|
|
|
- .demo2_pro .el-progress-bar__inner {
|
|
|
- background-color:rgba(233,157,66,1) !important;
|
|
|
- }
|
|
|
- .demo3_pro .el-progress-bar__inner {
|
|
|
- background-color:rgb(119, 40, 245);
|
|
|
- }
|
|
|
- .demo1{
|
|
|
- color: rgba(84,188,189,1) !important;
|
|
|
+ background-color: rgba(84, 188, 189, 1) !important;
|
|
|
}
|
|
|
- .demo2{
|
|
|
- color:rgba(233,157,66,1) !important;
|
|
|
+ .demo2_pro .el-progress-bar__inner {
|
|
|
+ background-color: rgba(233, 157, 66, 1) !important;
|
|
|
}
|
|
|
- .demo3{
|
|
|
- color:rgb(119, 40, 245) !important;
|
|
|
+ .demo3_pro .el-progress-bar__inner {
|
|
|
+ background-color: rgb(119, 40, 245);
|
|
|
+ }
|
|
|
+ .demo1 {
|
|
|
+ color: rgba(84, 188, 189, 1) !important;
|
|
|
+ }
|
|
|
+ .demo2 {
|
|
|
+ color: rgba(233, 157, 66, 1) !important;
|
|
|
+ }
|
|
|
+ .demo3 {
|
|
|
+ color: rgb(119, 40, 245) !important;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
