项目组总积分

hejianhao

2025-04-03 8e3cf8dea40d0ee4723ed6765697c093d7822a39

项目组总积分

 src/App.vue

@@ -5,25 +5,26 @@
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'App',
  data() {
    return {
      windowWidth: window.innerWidth,
      isCollapse: false
    }
  },
  watch: {
    windowWidth(newWidth) {
      // 当窗口宽度小于某个值时，可以触发折叠
      if (newWidth < 1200 && !this.isCollapse) {
        this.isCollapse = true
      if (newWidth < 1000) {
        this.$store.commit('SET_ISFOLD', true)
      } else if (newWidth >= 1200 && this.isCollapse) {
        this.isCollapse = false
      } else if (newWidth >= 1000 && this.isFold) {
        this.$store.commit('SET_ISFOLD', false)
      }
    }
  },
  computed: {
    ...mapState(['isFold'])
  },
  created() {
    // 初始化时检查窗口大小
@@ -39,6 +40,11 @@
  },
  methods: {
    handleResize() {
      if (window.innerWidth < 1000) {
        this.$store.commit('SET_ISFOLD', true)
      } else if (window.innerWidth >= 1000 && this.isFold) {
        this.$store.commit('SET_ISFOLD', false)
      }
      this.windowWidth = window.innerWidth
    }
  },
@@ -147,4 +153,21 @@
.el-tabs__active-bar {
  background-color: #009688;
}

.el-button+.el-button,
.el-checkbox.is-bordered+.el-checkbox.is-bordered {
  margin-left: 0;
}

.btn_box,
.search-btn-box .el-form-item__content {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.search-btn-box .el-form-item__content {

  margin-left: 63px;
}
</style>

 src/assets/font/SF Compact Display Black.ttf

Binary files differ

 src/assets/font/font.css

@@ -17,4 +17,11 @@
  src: url('./PingFangSCRegular.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SF Compact Display Black';
  src: url('./SF Compact Display Black.ttf');
  font-weight: normal;
  font-style: normal;
}

 src/router/index.js

@@ -229,6 +229,14 @@
                },
                component: () => import("../views/deliveryAssessment/projectTeamIntegral"),
            },
            {
                path: "projectTeamIntegral-detail",
                meta: {
                    title: "积分详情",
                    hide: true
                },
                component: () => import("../views/deliveryAssessment/projectTeamIntegral/detail.vue"),
            },
        ]
    }
];

 src/views/deliveryAssessment/projectTeamIntegral/detail.vue

New file
@@ -0,0 +1,233 @@
<template>
    <div>
        <div class="top-box-header">
            <div class="top-box-header-title">
                <div>项目组总积分表</div>
                <div class="top-box-header-time">
                    <div>评定开始时间：2024-02-09</div>
                    <div>评定结束始时间：2024-02-09</div>
                </div>
            </div>
            <div class="top-box-integral">
                <div :style="{ backgroundColor: ['rgba(232, 250, 246, 1)', 'rgba(255, 243, 213, 1)', 'rgba(254, 237, 220, 1)', 'rgba(239, 248, 255, 1)', 'rgba(255, 237, 238, 1)'][item - 1] }"
                    v-for="item in 5" :key="item" class="top-box-integral-card">
                    <div class="top-box-integral-card-title">{{ ['项目组总积分', '工艺工程师积分', '化验师积分', '实验员积分', '实验终止次数'][item -
                        1] }}</div>
                    <div :style="{ color: ['rgba(4, 156, 154, 1)', 'rgba(255, 197, 61, 1)', 'rgba(255, 147, 0, 1)', 'rgba(23, 119, 213, 1)', 'rgba(255, 73, 85, 1)'][item - 1] }"
                        class="top-box-integral-card-num">99.9</div>
                </div>
            </div>
        </div>
        <div class="integral-content">
            <div class="integral-content-box">
                <div class="integral-content-box-left">
                    <div class="integral-content-box-left-item" :class="item == 1 && 'activeItem'" v-for="item in 3"
                        :key="item">
                        <div>{{ ['工艺工程师', '化验师', '实验员'][item - 1] }}</div>
                        <div>工作内容评定</div>
                    </div>
                </div>
                <div class="integral-content-box-right">
                    <div class="integral-content-box-right-thead">
                        <div>评定项</div>
                        <div>评定情况</div>
                        <div>开始时间</div>
                        <div>结束时间</div>
                        <div>操作</div>
                    </div>
                    <div class="integral-content-box-right-body">
                        <div v-for="item in 8" :key="item" class="integral-content-box-right-body-item">
                            <div>评定项</div>
                            <div>评定情况</div>
                            <div>开始时间</div>
                            <div>结束时间</div>
                            <div>操作</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            actionsLeftTab: 1,
            actionspPersonnel: null,
        }
    },
}
</script>

<style scope lang="less">
.top-box-header {
    &-title {
        color: #FFFFFF;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        min-height: 58px;
        padding-bottom: 12px;
        font-size: 20px;
        background: linear-gradient(180deg, #05A0C1 0%, #05F2C2 100%);
        border-radius: 16px 16px 0px 0px;
        font-family: 'Source Han Sans CN Bold Bold';
    }

    &-time {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        font-family: 'SourceHanSansCN-Medium';
        font-size: 16px;

        div:first-child {
            margin-right: 57px;
        }
    }

    .top-box-integral {
        padding: 42px 30px 38px 30px;
        margin-top: -12px;
        background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.2) 100%);
        box-shadow: 0px 10px 19px 0px rgba(0, 0, 0, 0.06);
        border-radius: 16px;
        border: 4px solid #FFFFFF;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 28px;

        &-card {
            flex: 1;
            background: #E8FAF6;
            box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.06);
            border-radius: 10px;
            padding: 21px 20px;

            &-title {
                font-family: 'SourceHanSansCN-Medium';
                font-size: 14px;
                color: rgba(0, 0, 0, 0.8);
            }

            &-num {
                font-family: 'SF Compact Display Black';
                text-align: center;
                font-weight: 900;
                font-size: 50px;
                color: #049C9A;
                line-height: 60px;
            }
        }
    }
}

.integral-content {
    margin-top: 20px;
    padding: 30px 30px 95px 30px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 10px 19px 0px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    border: 4px solid #FFFFFF;

    &-box {
        display: flex;

        &-left {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-right: 30px;
            margin-top: 50px;

            .activeItem {
                background: linear-gradient(180deg, rgba(5, 160, 193, 0.4) 0%, rgba(5, 242, 194, 0) 100%);
                border-image: linear-gradient(180deg, rgba(10, 203, 202, 1), rgba(4, 156, 154, 0.2)) 1 1;
                clip-path: inset(0 round 10px);
                filter: hue-rotate(360deg);
            }

            &-item {
                cursor: pointer;
                flex: 1;
                min-width: 160px;
                min-height: 110px;
                font-family: 'Source Han Sans CN Bold Bold';
                font-weight: bold;
                font-size: 20px;
                color: #049C9A;
                display: flex;
                text-align: center;
                flex-direction: column;
                justify-content: center;
                line-height: 30px;
                background: #EFF8FA;
                border-radius: 10px;
                border: 1px solid;
                clip-path: inset(0px round 10px);
                filter: hue-rotate(360deg);
                border-image: linear-gradient(180deg, rgba(220, 223, 230, 1), rgba(220, 223, 230, 1)) 1 1;

                &:hover {
                    background: linear-gradient(180deg, rgba(5, 160, 193, 0.4) 0%, rgba(5, 242, 194, 0) 100%);
                    border-image: linear-gradient(180deg, rgba(10, 203, 202, 1), rgba(4, 156, 154, 0.2)) 1 1;
                    clip-path: inset(0 round 10px);
                    filter: hue-rotate(360deg);
                }
            }
        }

        &-right {
            flex: 1;

            &-thead {
                display: flex;
                flex-wrap: wrap;

                div {
                    font-family: 'SourceHanSansCN-Medium';
                    font-weight: 500;
                    font-size: 20px;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 40px;
                    flex: 1;
                    background: linear-gradient(270deg, #0ACBCA 0%, #049C9A 100%);
                    box-shadow: 0px 6px 10px 0px rgba(4, 156, 154, 0.09);
                    border-radius: 10px;
                }
            }

            &-body {
                margin-top: 10px;
                display: flex;
                flex-direction: column;
                gap: 10px;

                &-item {
                    display: flex;
                    flex-wrap: wrap;

                    div {
                        padding-left: 23px;
                        font-family: 'SourceHanSansCN-Medium';
                        flex: 1;
                        font-weight: 500;
                        font-size: 16px;
                        color: #606266;
                        line-height: 50px;
                        background: #D7EFF4;
                        box-shadow: 0px 6px 10px 0px rgba(4, 156, 154, 0.09);
                        border-radius: 10px;
                    }
                }
            }
        }
    }
}
</style>

 src/views/deliveryAssessment/projectTeamIntegral/index.vue

@@ -8,12 +8,14 @@
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="创建日期：">
                        
                        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="状态：">
                        <el-select placeholder="请选择"></el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 63px;">
                    <el-form-item class="search-btn-box">
                        <el-button>重置</el-button>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>
@@ -21,15 +23,13 @@
            </template>
            <template #table>
                <el-table-column prop="name" label="项目组名称" />
                <el-table-column prop="age" label="项目负责人" />
                <el-table-column prop="age" label="项目组成员" />
                <el-table-column prop="age" label="项目创建时间" />
                <el-table-column prop="age" label="状态">
                    <template #default="{ row }">
                        <el-tag v-if="row.status == 1" type="success">正常运作</el-tag>
                        <el-tag v-else type="danger">已封存</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="项目组总积分" />
                <el-table-column prop="age" label="工艺工程师积分" />
                <el-table-column prop="age" label="化验师积分" />
                <el-table-column prop="age" label="实验员积分" />
                <el-table-column prop="age" label="评定开始时间" />
                <el-table-column prop="age" label="评定结束时间" />
                <el-table-column prop="age" label="状态" />
                <el-table-column prop="age" label="操作">
                    <template #default="{ row }">
                        <el-button @click="goDetail" type="text">详情</el-button>

 src/views/projectList/index.vue

@@ -11,9 +11,11 @@
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="创建日期：">
                        <el-input v-model="form.name"></el-input>
                        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item style="margin-left: 63px;">
                    <el-form-item class="search-btn-box">
                        <el-button>重置</el-button>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>