554 lines
19 KiB
JavaScript
554 lines
19 KiB
JavaScript
const user = {
|
||
template: /*language=HTML*/ `
|
||
<div class="user-wrapper">
|
||
<!-- 用户容器：左右布局 -->
|
||
<div class="user-container">
|
||
<!-- 左侧：用户信息卡片 -->
|
||
<div class="user-info-card">
|
||
<div class="user-details">
|
||
<div class="user-name">${@auth.getPrincipalProperty('username')}</div>
|
||
|
||
<div class="user-meta-grid">
|
||
<div class="meta-row">
|
||
<span class="meta-icon">🆔</span>
|
||
<div>
|
||
<span class="meta-label">工号</span>
|
||
<span class="meta-value">${@auth.getPrincipalProperty('loginname')}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="meta-row">
|
||
<span class="meta-icon">🏢</span>
|
||
<div>
|
||
<span class="meta-label">单位信息</span>
|
||
<span class="meta-value">
|
||
<!--#if(!isEmpty(@auth.getPrincipalProperty('unit'))){#-->
|
||
${@auth.getPrincipalProperty('unit').getName()}
|
||
<!--#}#-->
|
||
(
|
||
<!--#if(!isEmpty(@auth.getPrincipalProperty('union'))){#-->
|
||
${@auth.getPrincipalProperty('union').getName()}
|
||
<!--#}#-->
|
||
)
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="meta-row">
|
||
<span class="meta-icon">🎭</span>
|
||
<div>
|
||
<span class="meta-label">角色</span>
|
||
<span class="meta-value">{{ roleNames || '—' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 天气区域 -->
|
||
<div v-if="weatherData" class="weather-section" :class="weatherData.bgClass">
|
||
<div style="display: flex; justify-content: space-around">
|
||
<div class="weather-header">
|
||
<span class="weather-location">{{ weatherData.name }}</span>
|
||
<span class="weather-text">{{ weatherData.text }}</span>
|
||
</div>
|
||
<div class="weather-main">
|
||
<span class="weather-emoji">{{ weatherData.emoji }}</span>
|
||
<span class="weather-temp">{{ weatherData.temp }}°</span>
|
||
</div>
|
||
</div>
|
||
<div class="weather-tip">{{ weatherData.tip }}</div>
|
||
</div>
|
||
<div v-else-if="weatherError" class="weather-error">
|
||
🌤️ 天气服务暂时不可用
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：待办中心 -->
|
||
<div class="todo-center">
|
||
<!-- 标题和标签 -->
|
||
<div class="header">
|
||
<h3>待办中心</h3>
|
||
<el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
|
||
<el-tab-pane :label="tabLabel('待办事宜', taskStats.todoCount)" name="todo"></el-tab-pane>
|
||
<el-tab-pane :label="tabLabel('已办事宜', taskStats.doneCount)" name="done"></el-tab-pane>
|
||
<el-tab-pane :label="tabLabel('我的发起', taskStats.startedCount)" name="started"></el-tab-pane>
|
||
<el-tab-pane :label="tabLabel('办结事务', taskStats.completedCount)" name="completed"></el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
|
||
<!-- 表格 -->
|
||
<el-table
|
||
:data="todoList"
|
||
style="width: 100%"
|
||
border
|
||
stripe
|
||
v-loading="loading"
|
||
:cell-style="{ padding: '8px' }"
|
||
:header-cell-style="{ background: '#f8f9fa', color: '#444', fontWeight: '500' }"
|
||
>
|
||
<el-table-column label="序号" type="index" :index="indexMethod" width="100px"></el-table-column>
|
||
<el-table-column prop="categoryName" label="流程分类" width="100"></el-table-column>
|
||
<el-table-column prop="title" label="流程名称" min-width="300">
|
||
<template slot-scope="scope">
|
||
<el-tooltip effect="dark" :content="scope.row.instanceName" placement="top">
|
||
<span class="table-title">{{ scope.row.instanceName }}</span>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="sender" label="申请人" width="120">
|
||
<template slot-scope="{row}">{{row.variable.initiatorName}}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="taskName" label="当前流程节点" width="140" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="date" label="发起日期" width="120">
|
||
<template slot-scope="{row}">
|
||
{{$moment(row.createdAt).format('YYYY-MM-DD')}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="100px" fixed="right">
|
||
<template slot-scope="scope">
|
||
<el-button type="primary" size="mini" @click="openView(scope.row)">查看</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!--#include("/layouts/pagination.html"){}#-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`,
|
||
mixins: [initTableMixins],
|
||
data() {
|
||
return {
|
||
activeTab: 'todo',
|
||
todoList: [],
|
||
loading: false,
|
||
pageForm: {
|
||
pageNum: 1,
|
||
pageSize: 5,
|
||
totalCount: 0
|
||
},
|
||
taskStats: {
|
||
todoCount: 0,
|
||
doneCount: 0,
|
||
startedCount: 0,
|
||
completedCount: 0
|
||
},
|
||
// 🔆 天气相关数据
|
||
weatherData: null,
|
||
weatherError: false,
|
||
// 🔑 和风天气 API Key（请替换为你自己的）
|
||
QWEATHER_KEY: 'f916578cbb0e4b55b778b0de5847ecf5', // ←← 务必替换！
|
||
roleNames: ""
|
||
|
||
};
|
||
},
|
||
methods: {
|
||
getWeatherInfo(iconCode, temp) {
|
||
const info = {
|
||
emoji: '🌤️',
|
||
tip: '今日天气宜人，心情也该放晴啦！',
|
||
bgClass: 'weather-sunny' // 用于 CSS 类
|
||
};
|
||
|
||
const tempNum = parseFloat(temp);
|
||
const isCold = tempNum < 10;
|
||
const isHot = tempNum > 28;
|
||
|
||
// 按照和风天气 iconCode 分类
|
||
if (['100'].includes(iconCode)) {
|
||
info.emoji = '☀️';
|
||
info.tip = isHot ? '高温预警！注意防暑降温，多喝水～' : '阳光灿烂，适合外出走走！';
|
||
info.bgClass = 'weather-sunny';
|
||
} else if (['101', '102', '103', '104'].includes(iconCode)) {
|
||
info.emoji = ['101', '103'].includes(iconCode) ? '⛅' : '☁️';
|
||
info.tip = isCold ? '天凉加衣，别让感冒找上门！' : '云层温柔，适合静心工作。';
|
||
info.bgClass = 'weather-cloudy';
|
||
} else if (['300', '301', '302', '305', '306', '399'].some(code => code === iconCode)) {
|
||
info.emoji = '🌧️';
|
||
info.tip = '🌧️ 下雨啦！记得带伞，小心路滑～';
|
||
info.bgClass = 'weather-rainy';
|
||
} else if (['307', '308', '309', '310'].includes(iconCode)) {
|
||
info.emoji = '⛈️';
|
||
info.tip = '⛈️ 雷雨天气，请减少外出，注意安全！';
|
||
info.bgClass = 'weather-storm';
|
||
} else if (['400', '401', '402', '403'].includes(iconCode)) {
|
||
info.emoji = '❄️';
|
||
info.tip = '❄️ 天寒地冻，保暖最重要！';
|
||
info.bgClass = 'weather-snowy';
|
||
} else if (['404', '405', '406', '407', '408', '409', '410'].includes(iconCode)) {
|
||
info.emoji = '🌫️';
|
||
info.tip = '🌫️ 能见度较低，出行请注意安全。';
|
||
info.bgClass = 'weather-foggy';
|
||
} else if (['500', '501', '502', '504'].includes(iconCode)) {
|
||
info.emoji = '🌀';
|
||
info.tip = '🌀 极端天气预警！请关注官方通知。';
|
||
info.bgClass = 'weather-extreme';
|
||
} else {
|
||
info.emoji = '🌤️';
|
||
info.tip = '今日天气未知，但愿你心情晴朗！';
|
||
info.bgClass = 'weather-default';
|
||
}
|
||
|
||
return info;
|
||
},
|
||
async getConfigKey(key) {
|
||
const resp = await this.$axios.post("/open/common/getConfigKey", { key })
|
||
return resp.data
|
||
},
|
||
// 🔆 获取天气
|
||
async fetchWeather() {
|
||
try {
|
||
// 存localStorage 112.13,32.01 广州 113.27,23.14
|
||
const AppMapCenterPointX = await this.getConfigKey("AppMapCenterPointX")
|
||
const AppMapCenterPointY = await this.getConfigKey("AppMapCenterPointY")
|
||
if (!AppMapCenterPointX || !AppMapCenterPointY){
|
||
return
|
||
}
|
||
|
||
// 1. 先通过城市名获取 locationId
|
||
this.$axios.get("https://mx5rk62kvj.re.qweatherapi.com/geo/v2/city/lookup?location=" + AppMapCenterPointX + "," + AppMapCenterPointY + "&key=" + this.QWEATHER_KEY).then((geoRes) => {
|
||
if (geoRes.code !== '200' || !geoRes.location?.[0]) {
|
||
console.log('城市未找到')
|
||
}
|
||
const locationId = geoRes.location[0].id;
|
||
|
||
// 2. 获取当前天气
|
||
this.$axios.get("https://mx5rk62kvj.re.qweatherapi.com/v7/weather/now?location=" + locationId + "&key=" + this.QWEATHER_KEY).then((weatherRes) => {
|
||
if (weatherRes.code !== '200') {
|
||
console.warn('天气数据异常:', weatherRes);
|
||
}
|
||
const weatherInfo = this.getWeatherInfo(weatherRes.now.icon, weatherRes.now.temp);
|
||
this.weatherData = {
|
||
...weatherInfo,
|
||
temp: weatherRes.now.temp,
|
||
text: weatherRes.now.text,
|
||
name: geoRes.location[0].name
|
||
};
|
||
this.weatherError = false;
|
||
})
|
||
|
||
|
||
})
|
||
|
||
} catch (err) {
|
||
console.warn('天气加载失败:', err);
|
||
this.weatherError = true;
|
||
this.weatherData = null;
|
||
}
|
||
},
|
||
// 获取任务列表
|
||
tabLabel(title, count) {
|
||
return title + "（" + (count || 0) + "）"
|
||
},
|
||
async getStatistics() {
|
||
try {
|
||
const res = await $.post("/flow/todoCenter/statistics")
|
||
if (res.code === 0) {
|
||
this.taskStats = Object.assign({}, this.taskStats, res.data)
|
||
}
|
||
} catch (error) {
|
||
console.error("获取待办统计失败:", error)
|
||
}
|
||
},
|
||
async getTasks() {
|
||
this.loading = true
|
||
try {
|
||
const res = await $.post("/flow/todoCenter/" + this.activeTab, this.pageForm)
|
||
if (res.code === 0) {
|
||
this.todoList = res.data.list
|
||
this.pageForm.totalCount = res.data.totalCount
|
||
}
|
||
} catch (error) {
|
||
this.$message.error("获取任务列表失败")
|
||
console.error("获取任务列表失败:", error)
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
pageData() {
|
||
this.getTasks()
|
||
this.getStatistics()
|
||
},
|
||
handleTabClick(tab) {
|
||
this.pageData()
|
||
console.log('切换到:', tab.name);
|
||
},
|
||
// 处理任务
|
||
async openView(task) {
|
||
console.log(task)
|
||
const {taskId, taskKey, taskState, instanceId, businessNo, formKey} = task
|
||
if (!formKey) {
|
||
this.$message.warning("当前流程没有配置地址")
|
||
return
|
||
}
|
||
window.open(formKey + "?taskId=" + taskId + "&bizId=" + businessNo + "&taskKey=" + taskKey + "&tab=" + this.activeTab)
|
||
},
|
||
getRoleNames() {
|
||
$.post("/platform/sys/role/getRoleNames").then(res => {
|
||
if (res.code === 0) {
|
||
this.roleNames = res.data.roleNames
|
||
}
|
||
})
|
||
|
||
}
|
||
},
|
||
created() {
|
||
this.pageData()
|
||
this.getRoleNames()
|
||
},
|
||
mounted() {
|
||
this.fetchWeather()
|
||
},
|
||
style: /*language=CSS*/ `
|
||
.user-wrapper {
|
||
width: 100%;
|
||
background-color: #f5f7fa;
|
||
}
|
||
|
||
.user-container {
|
||
width: 80%;
|
||
margin: 12px auto 20px;
|
||
display: grid;
|
||
grid-template-columns: 0.7fr 2.3fr;
|
||
gap: 24px;
|
||
align-items: stretch;
|
||
row-gap: 24px;
|
||
}
|
||
|
||
.user-info-card {
|
||
background: white;
|
||
border-radius: 16px;
|
||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
|
||
padding: 24px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||
}
|
||
|
||
.user-info-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 头像占位符 */
|
||
.user-avatar-placeholder {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #409eff, #1877f2);
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
margin: 0 auto;
|
||
box-shadow: 0 4px 10px rgba(24, 127, 255, 0.3);
|
||
}
|
||
|
||
/* 用户名 */
|
||
.user-name {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #1f2937;
|
||
text-align: center;
|
||
margin: 8px 0 0;
|
||
}
|
||
|
||
/* 元信息网格 */
|
||
.user-meta-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.meta-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
}
|
||
|
||
.meta-icon {
|
||
font-size: 18px;
|
||
min-width: 24px;
|
||
text-align: center;
|
||
color: #409eff;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.meta-row > div {
|
||
flex: 1;
|
||
}
|
||
|
||
.meta-label {
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
font-weight: 500;
|
||
display: block;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.meta-value {
|
||
font-size: 15px;
|
||
color: #1f2937;
|
||
font-weight: 600;
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* === 天气卡片 - 情感化设计 === */
|
||
.weather-section {
|
||
border-radius: 16px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
color: white;
|
||
background: linear-gradient(135deg, #a8edea, #fed6e3); /* 默认柔和渐变 */
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 不同天气的背景主题 */
|
||
.weather-sunny {
|
||
background: linear-gradient(135deg, #FFD700, #FFA500);
|
||
color: #2c3e50;
|
||
}
|
||
.weather-cloudy {
|
||
background: linear-gradient(135deg, #B0C4DE, #708090);
|
||
color: white;
|
||
}
|
||
.weather-rainy {
|
||
background: linear-gradient(135deg, #4A6FA5, #1E3F66);
|
||
color: white;
|
||
}
|
||
.weather-storm {
|
||
background: linear-gradient(135deg, #2F2F2F, #0D0D0D);
|
||
color: #FFD700;
|
||
}
|
||
.weather-snowy {
|
||
background: linear-gradient(135deg, #E0F7FA, #B3E5FC);
|
||
color: #01579B;
|
||
}
|
||
.weather-foggy {
|
||
background: linear-gradient(135deg, #D7CCC8, #A1887F);
|
||
color: white;
|
||
}
|
||
.weather-extreme {
|
||
background: linear-gradient(135deg, #FF5252, #B71C1C);
|
||
color: white;
|
||
}
|
||
.weather-default {
|
||
background: linear-gradient(135deg, #E0E0E0, #90A4AE);
|
||
color: #333;
|
||
}
|
||
|
||
/* 天气头部：城市 + 描述 */
|
||
.weather-header {
|
||
margin-bottom: 12px;
|
||
}
|
||
.weather-location {
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
display: block;
|
||
}
|
||
.weather-text {
|
||
font-size: 13px;
|
||
opacity: 0.9;
|
||
display: block;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* 主体：图标 + 温度 */
|
||
.weather-main {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 8px;
|
||
position: relative;
|
||
bottom: 8px;
|
||
}
|
||
.weather-emoji {
|
||
font-size: 36px;
|
||
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
|
||
}
|
||
.weather-temp {
|
||
font-size: 28px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
/* 贴心提示语 */
|
||
.weather-tip {
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
opacity: 0.95;
|
||
margin-top: 8px;
|
||
padding: 0 8px;
|
||
}
|
||
|
||
/* 错误状态 */
|
||
.weather-error {
|
||
text-align: center;
|
||
color: #94a3b8;
|
||
font-size: 14px;
|
||
padding: 16px;
|
||
background: #f8fafc;
|
||
border-radius: 12px;
|
||
border: 1px dashed #cbd5e1;
|
||
}
|
||
|
||
/* 右侧待办中心 */
|
||
.todo-center {
|
||
min-width: 320px;
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
padding: 16px;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.header h3 {
|
||
font-size: 18px;
|
||
color: #333;
|
||
margin: 0;
|
||
border-left: 4px solid #1890ff;
|
||
padding-left: 10px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.el-tabs {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.table-title {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: 280px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.pagination {
|
||
margin-top: 20px;
|
||
text-align: right;
|
||
}
|
||
|
||
/* 响应式：小屏下堆叠 */
|
||
@media (max-width: 768px) {
|
||
.user-container {
|
||
flex-direction: column;
|
||
width: 95%;
|
||
}
|
||
|
||
.user-info-card, .todo-center {
|
||
min-width: 100%;
|
||
width: 100%;
|
||
}
|
||
}
|
||
`
|
||
};
|