Compare commits
2 Commits
ee65f15665
...
75fbd857e7
| Author | SHA1 | Date |
|---|---|---|
|
|
75fbd857e7 | |
|
|
400b41ba87 |
|
|
@ -0,0 +1,454 @@
|
||||||
|
<template>
|
||||||
|
<div style="padding: 10px">
|
||||||
|
<div class="company-card-compact">
|
||||||
|
<div class="company-main-content">
|
||||||
|
<div class="company-header-compact">
|
||||||
|
<h2 class="company-name-compact">光芯科技</h2>
|
||||||
|
<div class="mission-tag-compact">
|
||||||
|
<span class="mission-icon-compact">✨</span>
|
||||||
|
<span class="mission-text-compact">材料创造美好世界</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="company-desc-compact">
|
||||||
|
<p>公司秉承"善用资源,服务建设"的核心理念,践行"材料创造美</p>
|
||||||
|
<p>好世界"的企业使命,坚持"创新、绩效、和谐、责任"的核心价</p>
|
||||||
|
<p>值观,努力成长为具有创新精神和全球视野的光芯材料领先企业。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="company-chip-compact">
|
||||||
|
<div class="chip-symbol">芯</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="statsContainer">
|
||||||
|
<div class="statCard" @click="goDuty">
|
||||||
|
<div class="statTitle">我的待办</div>
|
||||||
|
<div class="statNumber">{{ dutyCount }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="statCard" @click="goOwner">
|
||||||
|
<div class="statTitle">我提交的</div>
|
||||||
|
<div class="statNumber">{{ ownerCount }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="quickActionsCard">
|
||||||
|
<div class="quickActionsTitle">发起流程</div>
|
||||||
|
<div class="quickActionsGrid">
|
||||||
|
<div class="actionItem" v-for="group in wfOptions" :key="group.category" @click="startGroup(group)">
|
||||||
|
<div class="actionIcon">↗️</div>
|
||||||
|
<div class="actionLabel">{{ group.category }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog v-model="dialogVisible" :title="dialogTitle">
|
||||||
|
<el-card
|
||||||
|
v-for="item in currentWfList"
|
||||||
|
:key="item.id"
|
||||||
|
:body-style="{ padding: '10px', cursor: 'pointer' }"
|
||||||
|
style="width: 180px; display: inline-block; margin: 4px; background-color: #f5f7fa;"
|
||||||
|
shadow="hover"
|
||||||
|
@click="startTicket(item)"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</el-card>
|
||||||
|
</el-dialog>
|
||||||
|
<el-drawer v-model="drawer" size="90%" :show-close="false">
|
||||||
|
<template #header="{ close, titleId, titleClass }">
|
||||||
|
<h4 :id="titleId" :class="titleClass">{{drawerName}}</h4>
|
||||||
|
<el-button type="danger" @click="close">关闭</el-button>
|
||||||
|
</template>
|
||||||
|
<component :is="currentComponent" :ticketId="ticketId" :t_id="t_id" @closed="drawer = false"
|
||||||
|
@success="handleSuccess"></component>
|
||||||
|
</el-drawer>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, markRaw, defineAsyncComponent } from 'vue'
|
||||||
|
import API from '@/api'
|
||||||
|
import TOOL from "@/utils/tool.js";
|
||||||
|
const dutyCount = ref(0);
|
||||||
|
const ownerCount = ref(0);
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getTicketCount();
|
||||||
|
getWfOptions();
|
||||||
|
})
|
||||||
|
|
||||||
|
const getTicketCount = () => {
|
||||||
|
API.wf.ticket.list.req({page: 1, page_size: 0, category: "duty"}).then(res=>{
|
||||||
|
dutyCount.value = res.count
|
||||||
|
})
|
||||||
|
API.wf.ticket.list.req({page: 1, page_size: 0, category: "owner"}).then(res=>{
|
||||||
|
ownerCount.value = res.count
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const goDuty = () => {
|
||||||
|
window.location.href = "/#/wf/myticket?category=duty"
|
||||||
|
}
|
||||||
|
|
||||||
|
const goOwner = () => {
|
||||||
|
window.location.href = "/#/wf/myticket?category=owner"
|
||||||
|
}
|
||||||
|
|
||||||
|
const wfOptions = ref([])
|
||||||
|
|
||||||
|
const getWfOptions = () => {
|
||||||
|
let permissions = TOOL.data.get("PERMISSIONS");
|
||||||
|
const groups = {};
|
||||||
|
API.wf.workflow.list.req({ page: 0 }).then((res) => {
|
||||||
|
res.forEach((item) => {
|
||||||
|
if(item.key && permissions.includes(item.key)) {
|
||||||
|
let cate = item.cate;
|
||||||
|
if (!cate){cate="未分组"}
|
||||||
|
if (!groups[cate]) {
|
||||||
|
groups[cate] = [];
|
||||||
|
}
|
||||||
|
groups[cate].push(item);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 转换为数组形式,便于模板遍历
|
||||||
|
wfOptions.value = Object.keys(groups).map(category => ({
|
||||||
|
category,
|
||||||
|
items: groups[category]
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const currentWfList = ref([]);
|
||||||
|
const dialogTitle = ref("");
|
||||||
|
const startGroup = (group) => {
|
||||||
|
dialogVisible.value = true;
|
||||||
|
dialogTitle.value = group.category;
|
||||||
|
currentWfList.value = group.items;
|
||||||
|
}
|
||||||
|
|
||||||
|
const drawer = ref(false)
|
||||||
|
const drawerName = ref(null)
|
||||||
|
const currentComponent = ref(null)
|
||||||
|
const ticketId = ref(null)
|
||||||
|
const t_id = ref(null)
|
||||||
|
const startTicket = (item) => {
|
||||||
|
dialogVisible.value = false;
|
||||||
|
drawer.value = true;
|
||||||
|
t_id.value = null;
|
||||||
|
drawerName.value = item.name;
|
||||||
|
const viewPath = item.view_path;
|
||||||
|
// 动态 import
|
||||||
|
currentComponent.value = markRaw(
|
||||||
|
defineAsyncComponent(() => import(`@/views${viewPath}.vue`))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSuccess = () => {
|
||||||
|
drawer.value = false;
|
||||||
|
getTicketCount();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.company-card-compact {
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(58, 149, 255, 0.95) 0%,
|
||||||
|
rgba(27, 92, 255, 0.95) 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4px 12px rgba(27, 92, 255, 0.2);
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
height: auto;
|
||||||
|
min-height: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-card-compact::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle at 90% 20%,
|
||||||
|
rgba(255, 255, 255, 0.08) 0%,
|
||||||
|
transparent 60%
|
||||||
|
);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-main-content {
|
||||||
|
flex: 1;
|
||||||
|
padding-right: 15px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-header-compact {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-name-compact {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-tag-compact {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-icon-compact {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-text-compact {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
opacity: 0.95;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-desc-compact {
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-desc-compact p {
|
||||||
|
margin: 0 0 4px 0;
|
||||||
|
font-size: 12px;
|
||||||
|
opacity: 0.9;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-desc-compact p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-chip-compact {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip-symbol {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(255, 255, 255, 0.95) 0%,
|
||||||
|
rgba(255, 255, 255, 0.8) 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1b5cff;
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
/* transform: rotate(45deg); */
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip-symbol::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
left: 4px;
|
||||||
|
right: 4px;
|
||||||
|
bottom: 4px;
|
||||||
|
border: 1px solid rgba(27, 92, 255, 0.2);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 平板适配 */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.company-card-compact {
|
||||||
|
padding: 20px 25px;
|
||||||
|
min-height: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-name-compact {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-desc-compact p {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip-symbol {
|
||||||
|
width: 55px;
|
||||||
|
height: 55px;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 桌面适配 */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.company-card-compact {
|
||||||
|
padding: 20px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-name-compact {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-desc-compact p {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-chip-compact {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip-symbol {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 小屏幕手机适配 */
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
.company-card-compact {
|
||||||
|
padding: 16px;
|
||||||
|
min-height: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-name-compact {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-desc-compact p {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-tag-compact {
|
||||||
|
padding: 3px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-text-compact {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-chip-compact {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip-symbol {
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 数量统计卡片样式 */
|
||||||
|
.statsContainer {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statCard {
|
||||||
|
flex: 1;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statTitle {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statNumber {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 快速操作卡片样式 */
|
||||||
|
.quickActionsCard {
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.quickActionsTitle {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quickActionsGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(8, 1fr);
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionItem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionItem:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionIcon {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
background: #f0f7ff;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #1b5cff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionLabel {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.quickActionsGrid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.statsContainer {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -223,9 +223,9 @@ export default {
|
||||||
that.year_s = year;
|
that.year_s = year;
|
||||||
that.month_s = month;
|
that.month_s = month;
|
||||||
that.day_s = day;
|
that.day_s = day;
|
||||||
this.getEquipList();
|
// this.getEquipList();
|
||||||
this.getMaterialWarning();
|
// this.getMaterialWarning();
|
||||||
this.getMaterialList();
|
// this.getMaterialList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 动态绑定Class
|
// 动态绑定Class
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue