Compare commits
No commits in common. "75fbd857e7812ee582d1823b4ec7ecb2919a0321" and "ee65f1566594fdc472294168051880b4a05f95be" have entirely different histories.
75fbd857e7
...
ee65f15665
|
|
@ -1,454 +0,0 @@
|
|||
<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.month_s = month;
|
||||
that.day_s = day;
|
||||
// this.getEquipList();
|
||||
// this.getMaterialWarning();
|
||||
// this.getMaterialList();
|
||||
this.getEquipList();
|
||||
this.getMaterialWarning();
|
||||
this.getMaterialList();
|
||||
},
|
||||
methods: {
|
||||
// 动态绑定Class
|
||||
|
|
|
|||
Loading…
Reference in New Issue