|
|
@@ -0,0 +1,424 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="common-layout">
|
|
|
+ <el-container class="home">
|
|
|
+ <el-header class="header border">
|
|
|
+ <div class="header_box">
|
|
|
+ <div class="headr_img">
|
|
|
+ <el-image :src="url" style="width: 131px;height: 131px;" fit="cover" />
|
|
|
+ </div>
|
|
|
+ <div class="header_title">
|
|
|
+ <p class="font1">您好！张工</p>
|
|
|
+ <p class="font2">新的一天，祝您工作顺利哦！</p>
|
|
|
+ <div class="font3">
|
|
|
+ <span>参与填报量：2049</span>
|
|
|
+ <span class="ml-16">已上报量：2049</span>
|
|
|
+ <span class="ml-16">已废除量：2049</span>
|
|
|
+ <span class="ml-16">参与审批量：2049</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="header_right">
|
|
|
+ <div class="btn">
|
|
|
+ <el-button type="primary" plain class="btn_blue">
|
|
|
+ <HcIcon v-if="false" name="check" />
|
|
|
+ <HcIcon v-else name="close-circle" style="color: red;" />
|
|
|
+ 电签
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" plain class="btn_green">
|
|
|
+ 桥梁工程师
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="view_link">
|
|
|
+ <span class="text-hover text-blue link_span">查看系统操作手册</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-header>
|
|
|
+ <el-container class=" mt-8 ">
|
|
|
+ <el-aside :width="`${isWbsTreeShow ? leftWidth : 100}%`">
|
|
|
+ <div class="border left_box contain_box">
|
|
|
+ <div class="title_box">
|
|
|
+ <span>工程内业进度统计表</span>
|
|
|
+ </div>
|
|
|
+ <div class="index_table_box mt-4">
|
|
|
+ <el-table
|
|
|
+ :header-cell-style="{ height: '50px', backgroundColor: 'none', fontSize: '20px', textAlign: 'center' }"
|
|
|
+ :row-style="{ height: '50px', fontSize: '16px' }"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ :data="tableData1"
|
|
|
+ style="width: 100%;height:100%"
|
|
|
+
|
|
|
+ row-key="id"
|
|
|
+ border
|
|
|
+ lazy
|
|
|
+ :load="loadData"
|
|
|
+ :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
|
+ >
|
|
|
+ <el-table-column prop="date" label="工程名称" />
|
|
|
+ <el-table-column prop="name" label="工程类型" align="center" width="160" />
|
|
|
+ <el-table-column prop="address" label="内业进度" align="center" width="200">
|
|
|
+ <template #default="scope">
|
|
|
+ <div v-if="scope.row.type === '1'" class="demo1_pro">
|
|
|
+ <el-progress :text-inside="true" :stroke-width="26" :percentage="70" />
|
|
|
+ </div>
|
|
|
+ <div v-if="scope.row.type === '2'" class="demo2_pro">
|
|
|
+ <el-progress :text-inside="true" :stroke-width="26" :percentage="70" />
|
|
|
+ </div>
|
|
|
+ <div v-if="scope.row.type === '3'" class="demo3_pro">
|
|
|
+ <el-progress :text-inside="true" :stroke-width="26" :percentage="70" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="已审批量" align="center" width="160" />
|
|
|
+ <el-table-column prop="address1" label="未完成审批量" align="center" width="160" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-aside>
|
|
|
+ <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" />
|
|
|
+ <HcIcon v-show="isWbsTreeShow" name="arrow-right-s" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 任务管理
|
|
|
+ </div>
|
|
|
+ <div class="card mt-4">
|
|
|
+ <span class="card_title">未处理任务类别</span>
|
|
|
+ <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
|
|
|
+ </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_title mt-4">上报超过7天</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_title mt-4">上报超过7天</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="task_box mt-10">
|
|
|
+ <div v-for="item in taskList" :key="item.name">
|
|
|
+ <div class="task_item_box">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-divider style="font-size: 2px;color: white;" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
+ </div>
|
|
|
+ </el-container>
|
|
|
+ </el-container>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, watch } from 'vue'
|
|
|
+
|
|
|
+const isWbsTreeShow = ref(true)
|
|
|
+const setWbsTreeShow = ()=>{
|
|
|
+ isWbsTreeShow.value = !isWbsTreeShow.value
|
|
|
+}
|
|
|
+//左右拖动，改变树形结构宽度
|
|
|
+const leftWidth = ref(65)
|
|
|
+const url = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg')
|
|
|
+
|
|
|
+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',
|
|
|
+ },
|
|
|
+ ])
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+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: 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 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.' },
|
|
|
+])
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang='scss' scoped>
|
|
|
+.home{
|
|
|
+ .header{
|
|
|
+ border: 2px dashed var(--el-color-primary) !important;;
|
|
|
+ height: 180px;
|
|
|
+ .header_box{
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .headr_img{
|
|
|
+ width: 131px;
|
|
|
+ height: 131px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .header_title{
|
|
|
+ margin-left: 30px;
|
|
|
+ .font1{
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ .font2{
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+ .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{
|
|
|
+ position: absolute;
|
|
|
+ top: 110px;
|
|
|
+ right: 7px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ .link_span{
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .border{
|
|
|
+ border: 2px dashed var(--el-color-primary) !important;
|
|
|
+
|
|
|
+ }
|
|
|
+ .contain_box{
|
|
|
+ height: calc(100vh - 300px);
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ }
|
|
|
+ .left_box{
|
|
|
+ position: relative;
|
|
|
+ margin-right: 20px;
|
|
|
+ padding: 15px;
|
|
|
+ .title_box{
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right_box{
|
|
|
+ position: relative;
|
|
|
+ // height: 100%;
|
|
|
+ width:100%;
|
|
|
+
|
|
|
+ .card{
|
|
|
+ height: 129px;
|
|
|
+ width: 100%;
|
|
|
+ background: rgb(255, 255, 255);
|
|
|
+ border-radius: 15px;
|
|
|
+ padding: 15px;
|
|
|
+ .card_title{
|
|
|
+ color:rgb(136, 136, 136);
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .card_title1{
|
|
|
+ color: black;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .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);
|
|
|
+ }
|
|
|
+ z-index: 1000;
|
|
|
+}
|
|
|
+.hc-expansion-contraction-tree {
|
|
|
+ color: var(--hc-label-color);
|
|
|
+ &:hover {
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ background: var(--hc-shadow-color-1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang='scss'>
|
|
|
+.index_table_box{
|
|
|
+ height: 95%;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .el-table {
|
|
|
+ --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;
|
|
|
+ }
|
|
|
+ .demo2{
|
|
|
+ color:rgba(233,157,66,1) !important;
|
|
|
+ }
|
|
|
+ .demo3{
|
|
|
+ color:rgb(119, 40, 245) !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
