初始化项目
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
<div class="card-item" v-for="(item, index) in cardList" :key="index">
|
||||
<div class="card-left">
|
||||
<div class="icon-box">
|
||||
<Icon :icon="item.iconImg" class="icon-img" :style="{ filter: item.iconFilter }" />
|
||||
<Icon :icon="item.iconImg" class="icon-img" />
|
||||
</div>
|
||||
<div class="card-text">
|
||||
<div class="module-name">{{ item.module }}</div>
|
||||
@@ -19,25 +19,40 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { MyPageIndex, myPageIndexListAll } from '@jeesite/biz/api/biz/myPageIndex';
|
||||
|
||||
const cardList = ref<MyPageIndex[]>();
|
||||
import { ScreenTop, ErpChartTop } from '@jeesite/erp/api/erp/screen';
|
||||
|
||||
const props = defineProps({
|
||||
formParams: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const cardList = ref<ScreenTop[]>();
|
||||
|
||||
async function getList() {
|
||||
try {
|
||||
const reqParams = {
|
||||
indexCode: 'werpIndex',
|
||||
...props.formParams,
|
||||
};
|
||||
const res = await myPageIndexListAll(reqParams);
|
||||
const res = await ErpChartTop(reqParams);
|
||||
cardList.value = res || [];
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
cardList.value = [];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
watch(
|
||||
() => props.formParams,
|
||||
() => {
|
||||
getList();
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { ChartDataItem, CategoryChart } from '@jeesite/erp/api/erp/screen';
|
||||
import { ChartDataItem, ErpCategoryChart } from '@jeesite/erp/api/erp/screen';
|
||||
|
||||
const props = defineProps({
|
||||
formParams: {
|
||||
@@ -35,7 +35,7 @@
|
||||
...props.formParams,
|
||||
flowType: '1',
|
||||
};
|
||||
const res = await CategoryChart(params);
|
||||
const res = await ErpCategoryChart(params);
|
||||
vList.value = res || [];
|
||||
} catch (error) {
|
||||
console.error('获取支出数据失败:', error);
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { ChartDataItem, CategoryChart } from '@jeesite/erp/api/erp/screen';
|
||||
import { ChartDataItem, ErpCategoryChart } from '@jeesite/erp/api/erp/screen';
|
||||
|
||||
const props = defineProps({
|
||||
formParams: {
|
||||
@@ -35,7 +35,7 @@
|
||||
...props.formParams,
|
||||
flowType: '2',
|
||||
};
|
||||
const res = await CategoryChart(params);
|
||||
const res = await ErpCategoryChart(params);
|
||||
vList.value = res || [];
|
||||
} catch (error) {
|
||||
console.error('获取收入数据失败:', error);
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { ChartDataItem, CategoryChart } from '@jeesite/erp/api/erp/screen';
|
||||
import { ChartDataItem, ErpCategoryChart } from '@jeesite/erp/api/erp/screen';
|
||||
|
||||
const props = defineProps({
|
||||
formParams: {
|
||||
@@ -30,7 +30,7 @@
|
||||
...props.formParams,
|
||||
flowType: '1',
|
||||
};
|
||||
const res = await CategoryChart(params);
|
||||
const res = await ErpCategoryChart(params);
|
||||
vList.value = res || [];
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="erp-layout-container">
|
||||
<div class="erp-section erp-top-header">
|
||||
<div class="erp-card full-card">
|
||||
<ChartTop />
|
||||
<ChartTop :formParams="FormValues" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="card-item" v-for="(item, index) in cardList" :key="index">
|
||||
<div class="card-left">
|
||||
<div class="icon-box">
|
||||
<Icon :icon="item.iconImg" class="icon-img" :style="{ filter: item.iconFilter }" />
|
||||
<Icon :icon="item.iconImg" class="icon-img" />
|
||||
</div>
|
||||
<div class="card-text">
|
||||
<div class="module-name">{{ item.module }}</div>
|
||||
@@ -21,17 +21,9 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { MyPageIndex, myPageIndexListAll } from '@jeesite/biz/api/biz/myPageIndex';
|
||||
|
||||
const cardList = ref<MyPageIndex[]>();
|
||||
|
||||
async function getList() {
|
||||
try {
|
||||
const reqParams = {
|
||||
indexCode: 'homeIndex',
|
||||
};
|
||||
const res = await myPageIndexListAll(reqParams);
|
||||
cardList.value = res || [];
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
cardList.value = [];
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="card-item" v-for="(item, index) in cardList" :key="index">
|
||||
<div class="card-left">
|
||||
<div class="icon-box">
|
||||
<Icon :icon="item.iconImg" class="icon-img" :style="{ filter: item.iconFilter }" />
|
||||
<Icon :icon="item.iconImg" class="icon-img" />
|
||||
</div>
|
||||
<div class="card-text">
|
||||
<div class="module-name">{{ item.module }}</div>
|
||||
@@ -21,17 +21,9 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { MyPageIndex, myPageIndexListAll } from '@jeesite/biz/api/biz/myPageIndex';
|
||||
|
||||
const cardList = ref<MyPageIndex[]>();
|
||||
|
||||
async function getList() {
|
||||
try {
|
||||
const reqParams = {
|
||||
indexCode: 'sysIndex',
|
||||
};
|
||||
const res = await myPageIndexListAll(reqParams);
|
||||
cardList.value = res || [];
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
cardList.value = [];
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="card-item" v-for="(item, index) in cardList" :key="index">
|
||||
<div class="card-left">
|
||||
<div class="icon-box">
|
||||
<Icon :icon="item.iconImg" class="icon-img" :style="{ filter: item.iconFilter }" />
|
||||
<Icon :icon="item.iconImg" class="icon-img" />
|
||||
</div>
|
||||
<div class="card-text">
|
||||
<div class="module-name">{{ item.module }}</div>
|
||||
@@ -21,17 +21,9 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { MyPageIndex, myPageIndexListAll } from '@jeesite/biz/api/biz/myPageIndex';
|
||||
|
||||
const cardList = ref<MyPageIndex[]>();
|
||||
|
||||
async function getList() {
|
||||
try {
|
||||
const reqParams = {
|
||||
indexCode: 'workIndex',
|
||||
};
|
||||
const res = await myPageIndexListAll(reqParams);
|
||||
cardList.value = res || [];
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
cardList.value = [];
|
||||
|
||||
@@ -4,63 +4,47 @@
|
||||
<span>常用应用</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<button v-for="item in appList" :key="item.id" class="biz-apps-item" type="button" @click="handleOpen(item)">
|
||||
<button v-for="item in bizAppData" class="biz-apps-item" type="button" @click="handleOpen(item)">
|
||||
<div class="biz-apps-item__main">
|
||||
<div class="biz-apps-item__pane biz-apps-item__pane--left">左侧区域</div>
|
||||
<div class="biz-apps-item__pane biz-apps-item__pane--right">右侧区域</div>
|
||||
<div class="biz-apps-item__pane">
|
||||
<img class="biz-apps-item__icon" :src="item.systemIcon" :alt="item.systemName" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="biz-apps-item__name">{{ item.name }}</div>
|
||||
<div class="biz-apps-item__name">{{ item.systemName }}</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { ref } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { MyQuickLogin, myQuickLoginListAll } from '@jeesite/biz/api/biz/myQuickLogin';
|
||||
|
||||
interface BizAppItem {
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
const router = useRouter();
|
||||
const bizAppData = ref<MyQuickLogin[]>([]);
|
||||
|
||||
async function getList() {
|
||||
try {
|
||||
const reqParams = {
|
||||
ustatus: '1',
|
||||
systemType: '1',
|
||||
};
|
||||
const res = await myQuickLoginListAll(reqParams);
|
||||
bizAppData.value = res || [];
|
||||
} catch (error) {
|
||||
bizAppData.value = [];
|
||||
}
|
||||
}
|
||||
|
||||
const appList = ref<BizAppItem[]>([
|
||||
{
|
||||
id: 'oa',
|
||||
name: '协同办公',
|
||||
url: '/oa',
|
||||
},
|
||||
{
|
||||
id: 'erp',
|
||||
name: 'ERP系统',
|
||||
url: '/erp',
|
||||
},
|
||||
{
|
||||
id: 'mes',
|
||||
name: 'MES平台',
|
||||
url: '/mes',
|
||||
},
|
||||
{
|
||||
id: 'crm',
|
||||
name: 'CRM系统',
|
||||
url: '/crm',
|
||||
},
|
||||
{
|
||||
id: 'hr',
|
||||
name: '人资门户',
|
||||
url: '/hr',
|
||||
},
|
||||
{
|
||||
id: 'bi',
|
||||
name: '数据驾驶舱',
|
||||
url: '/bi',
|
||||
},
|
||||
]);
|
||||
|
||||
function handleOpen(item: BizAppItem) {
|
||||
ElMessage.success(`准备进入：${item.name}`);
|
||||
function handleOpen(item: MyQuickLogin) {
|
||||
if (!item.systemUrl) return;
|
||||
router.push(item.systemUrl);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@@ -76,8 +60,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 37px;
|
||||
padding: 8px 16px;
|
||||
height: var(--analysis-card-title-height, 37px);
|
||||
padding: var(--analysis-card-title-padding, 8px 16px);
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
@@ -91,11 +75,11 @@
|
||||
.card-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 8px 12px 12px;
|
||||
padding: var(--analysis-card-content-padding, 8px 12px 12px);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
gap: var(--analysis-card-item-gap, 8px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -108,10 +92,11 @@
|
||||
min-height: 0;
|
||||
padding: 8px;
|
||||
border: 1px solid rgb(226 232 240);
|
||||
border-radius: 10px;
|
||||
border-radius: var(--analysis-card-radius, 10px);
|
||||
background: rgb(255, 255, 255);
|
||||
box-shadow: 0 8px 24px rgb(148 163 184 / 14%);
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
@@ -128,25 +113,33 @@
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
padding: 8px;
|
||||
gap: 8px;
|
||||
padding: 2px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&__pane {
|
||||
flex: 1 1 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
background: rgb(255, 255, 255);
|
||||
background: linear-gradient(135deg, rgb(239 246 255), rgb(224 242 254));
|
||||
color: rgb(51 65 85);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
box-shadow: 0 8px 24px rgb(148 163 184 / 14%);
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&__name {
|
||||
@@ -185,11 +178,8 @@
|
||||
box-shadow: 0 14px 32px rgb(37 99 235 / 22%);
|
||||
}
|
||||
|
||||
&__pane,
|
||||
&__pane--left,
|
||||
&__pane--right {
|
||||
background: linear-gradient(180deg, rgb(20, 20, 20) 0%, rgb(28 28 28) 100%);
|
||||
color: rgb(226 232 240);
|
||||
&__pane {
|
||||
background: linear-gradient(135deg, rgb(30 41 59), rgb(15 23 42));
|
||||
box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
|
||||
}
|
||||
|
||||
@@ -203,8 +193,8 @@
|
||||
@media (max-width: 768px) {
|
||||
.biz-apps-card {
|
||||
.card-content {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -221,8 +221,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 37px;
|
||||
padding: 8px 16px;
|
||||
height: var(--analysis-card-title-height, 37px);
|
||||
padding: var(--analysis-card-title-padding, 8px 16px);
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
@@ -266,7 +266,7 @@
|
||||
.card-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 8px 12px 12px;
|
||||
padding: var(--analysis-card-content-padding, 8px 12px 12px);
|
||||
color: rgb(71 85 105);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
>
|
||||
<el-table-column prop="projectCode" label="项目编码" min-width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="projectName" label="项目名称" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="projectType" label="项目类型" width="120" show-overflow-tooltip>
|
||||
<el-table-column prop="projectType" label="项目类型" width="100" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ getDictLabel(projectTypeDict, row.projectType) }}
|
||||
</template>
|
||||
@@ -64,12 +64,13 @@
|
||||
{{ getDictLabel(projectStatusDict, row.projectStatus) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="budget" label="项目预算(元)" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="treeName" label="项目区域" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="personName" label="项目人员" min-width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="startDate" label="开始日期" width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="endDate" label="结束日期" width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="budget" label="项目预算(元)" width="120" show-overflow-tooltip />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div class="pagination-panel">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
@@ -208,8 +209,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 37px;
|
||||
padding: 8px 16px;
|
||||
height: var(--analysis-card-title-height, 37px);
|
||||
padding: var(--analysis-card-title-padding, 8px 16px);
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
@@ -223,7 +224,7 @@
|
||||
.card-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 8px 12px 12px;
|
||||
padding: var(--analysis-card-content-padding, 8px 12px 12px);
|
||||
color: rgb(71 85 105);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
@@ -231,7 +232,7 @@
|
||||
background: transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: var(--analysis-card-item-gap, 8px);
|
||||
}
|
||||
|
||||
.query-panel,
|
||||
|
||||
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<div ref="provinceCardRef" class="province-card">
|
||||
<div class="card-title">
|
||||
<span>社区分布</span>
|
||||
<el-tooltip content="刷新" placement="top" :show-after="200">
|
||||
<el-button
|
||||
class="card-title__refresh"
|
||||
link
|
||||
type="primary"
|
||||
:icon="RefreshRight"
|
||||
:loading="loading"
|
||||
@click="getList"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="province-chart-panel">
|
||||
<div ref="chartRef" class="province-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { RefreshRight } from '@element-plus/icons-vue';
|
||||
import { ChartInfo, ProvinceChart } from '@jeesite/biz/api/biz/myAnalysis';
|
||||
|
||||
const chartData = ref<ChartInfo[]>([]);
|
||||
const loading = ref(false);
|
||||
const provinceCardRef = ref<HTMLElement>();
|
||||
const chartRef = ref<HTMLElement>();
|
||||
|
||||
async function getList() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await ProvinceChart();
|
||||
chartData.value = res || [];
|
||||
nextTick(() => {
|
||||
renderChart();
|
||||
});
|
||||
} catch (error) {
|
||||
chartData.value = [];
|
||||
nextTick(() => {
|
||||
renderChart();
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
let resizeObserver: ResizeObserver | null = null;
|
||||
let themeObserver: MutationObserver | null = null;
|
||||
|
||||
function renderChart() {
|
||||
if (!chartRef.value) return;
|
||||
|
||||
if (!chartInstance) {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
}
|
||||
|
||||
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
|
||||
const axisLabelRotate = chartData.value.length > 10 ? 45 : chartData.value.length > 6 ? 30 : 0;
|
||||
|
||||
chartInstance.setOption({
|
||||
grid: {
|
||||
left: 12,
|
||||
right: 12,
|
||||
top: 36,
|
||||
bottom: 8,
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
backgroundColor: isDark ? 'rgba(20, 20, 20, 0.96)' : 'rgba(255, 255, 255, 0.96)',
|
||||
borderColor: isDark ? 'rgb(51 65 85)' : 'rgb(226 232 240)',
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
color: isDark ? '#e2e8f0' : '#334155',
|
||||
},
|
||||
formatter: (params: any) => {
|
||||
const current = Array.isArray(params) ? params[0] : params;
|
||||
const label = current?.axisValue || current?.name || '-';
|
||||
const value = current?.value ?? 0;
|
||||
const total = chartData.value.reduce((sum, item) => sum + Number(item.value || 0), 0);
|
||||
const percent = total > 0 ? ((Number(value) / total) * 100).toFixed(2) : '0.00';
|
||||
return `区域：${label}<br/>数量：${value}<br/>占比：${percent}%`;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: chartData.value.map((item) => item.label || '-'),
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: isDark ? '#475569' : '#cbd5e1',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: isDark ? '#cbd5e1' : '#64748b',
|
||||
margin: 10,
|
||||
rotate: axisLabelRotate,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '数量',
|
||||
nameTextStyle: {
|
||||
color: isDark ? '#94a3b8' : '#64748b',
|
||||
padding: [0, 0, 4, 0],
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: isDark ? 'rgba(71, 85, 105, 0.35)' : 'rgba(203, 213, 225, 0.55)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: isDark ? '#94a3b8' : '#64748b',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: '24%',
|
||||
data: chartData.value.map((item) => ({
|
||||
value: item.value,
|
||||
itemStyle: {
|
||||
color: item.color || '#3B82F6',
|
||||
borderRadius: [6, 6, 0, 0],
|
||||
},
|
||||
})),
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: isDark ? '#cbd5e1' : '#475569',
|
||||
fontSize: 11,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
function resizeChart() {
|
||||
chartInstance?.resize();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
|
||||
if (provinceCardRef.value) {
|
||||
resizeObserver = new ResizeObserver(() => {
|
||||
resizeChart();
|
||||
});
|
||||
resizeObserver.observe(provinceCardRef.value);
|
||||
}
|
||||
|
||||
window.addEventListener('resize', resizeChart);
|
||||
|
||||
themeObserver = new MutationObserver(() => {
|
||||
nextTick(() => {
|
||||
renderChart();
|
||||
});
|
||||
});
|
||||
themeObserver.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ['data-theme'],
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
resizeObserver?.disconnect();
|
||||
themeObserver?.disconnect();
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
chartInstance?.dispose();
|
||||
chartInstance = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.province-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: rgb(255, 255, 255);
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 37px;
|
||||
padding: 8px 16px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
color: rgb(51 65 85);
|
||||
border-bottom: 1px solid rgb(226 232 240);
|
||||
background: transparent;
|
||||
|
||||
&__refresh {
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 8px 12px 12px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.province-chart-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
background: rgb(255, 255, 255);
|
||||
box-shadow: 0 8px 24px rgb(148 163 184 / 14%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.province-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .province-card {
|
||||
background: rgb(20, 20, 20);
|
||||
|
||||
.card-title {
|
||||
color: rgb(203 213 225);
|
||||
border-bottom-color: rgb(51 65 85);
|
||||
|
||||
&__refresh:deep(.el-icon) {
|
||||
color: rgb(147 197 253);
|
||||
}
|
||||
}
|
||||
|
||||
.province-chart-panel {
|
||||
background: linear-gradient(180deg, rgb(20, 20, 20) 0%, rgb(28 28 28) 100%);
|
||||
box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -21,16 +21,16 @@
|
||||
}"
|
||||
>
|
||||
<button
|
||||
v-for="item in displayList"
|
||||
:key="item.renderKey"
|
||||
v-for="item in quickData"
|
||||
:key="item.quickId || item.systemName"
|
||||
class="quick-login-item"
|
||||
type="button"
|
||||
@click="handleLogin(item)"
|
||||
>
|
||||
<div class="quick-login-item__image-wrap">
|
||||
<img class="quick-login-item__image" :src="item.logo" :alt="item.name" />
|
||||
<img class="quick-login-item__image" :src="item.systemIcon" :alt="item.systemName" />
|
||||
</div>
|
||||
<div class="quick-login-item__name">{{ item.name }}</div>
|
||||
<div class="quick-login-item__name">{{ item.systemName }}</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -52,55 +52,10 @@
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
|
||||
interface QuickLoginItem {
|
||||
id: string;
|
||||
name: string;
|
||||
logo: string;
|
||||
url: string;
|
||||
}
|
||||
import { MyQuickLogin, myQuickLoginListAll } from '@jeesite/biz/api/biz/myQuickLogin';
|
||||
|
||||
interface RenderQuickLoginItem extends QuickLoginItem {
|
||||
renderKey: string;
|
||||
}
|
||||
|
||||
const baseList = ref<QuickLoginItem[]>([
|
||||
{
|
||||
id: 'oa',
|
||||
name: '协同办公',
|
||||
logo: 'https://dummyimage.com/96x96/2563eb/ffffff.png&text=OA',
|
||||
url: '/oa',
|
||||
},
|
||||
{
|
||||
id: 'erp',
|
||||
name: 'ERP系统',
|
||||
logo: 'https://dummyimage.com/96x96/0891b2/ffffff.png&text=ERP',
|
||||
url: '/erp',
|
||||
},
|
||||
{
|
||||
id: 'mes',
|
||||
name: 'MES平台',
|
||||
logo: 'https://dummyimage.com/96x96/7c3aed/ffffff.png&text=MES',
|
||||
url: '/mes',
|
||||
},
|
||||
{
|
||||
id: 'crm',
|
||||
name: 'CRM系统',
|
||||
logo: 'https://dummyimage.com/96x96/ea580c/ffffff.png&text=CRM',
|
||||
url: '/crm',
|
||||
},
|
||||
{
|
||||
id: 'hr',
|
||||
name: '人资门户',
|
||||
logo: 'https://dummyimage.com/96x96/16a34a/ffffff.png&text=HR',
|
||||
url: '/hr',
|
||||
},
|
||||
{
|
||||
id: 'bi',
|
||||
name: '数据驾驶舱',
|
||||
logo: 'https://dummyimage.com/96x96/db2777/ffffff.png&text=BI',
|
||||
url: '/bi',
|
||||
},
|
||||
]);
|
||||
const quickData = ref<MyQuickLogin[]>([]);
|
||||
const loading = ref(false);
|
||||
|
||||
const itemWidth = 136;
|
||||
const gapWidth = 8;
|
||||
@@ -111,22 +66,15 @@
|
||||
let resizeObserver: ResizeObserver | null = null;
|
||||
let autoScrollTimer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
const canScroll = computed(() => baseList.value.length > visibleCount.value);
|
||||
const canScroll = computed(() => quickData.value.length > visibleCount.value);
|
||||
|
||||
const maxIndex = computed(() => {
|
||||
const value = baseList.value.length - visibleCount.value;
|
||||
const value = quickData.value.length - visibleCount.value;
|
||||
return value > 0 ? value : 0;
|
||||
});
|
||||
|
||||
const currentOffset = computed(() => currentIndex.value * stepWidth);
|
||||
|
||||
const displayList = computed<RenderQuickLoginItem[]>(() => {
|
||||
return baseList.value.map((item, index) => ({
|
||||
...item,
|
||||
renderKey: `${item.id}-${index}`,
|
||||
}));
|
||||
});
|
||||
|
||||
function updateVisibleCount() {
|
||||
const width = viewportRef.value?.clientWidth || 0;
|
||||
if (!width) return;
|
||||
@@ -162,11 +110,33 @@
|
||||
}
|
||||
}
|
||||
|
||||
function handleLogin(item: QuickLoginItem) {
|
||||
ElMessage.success(`准备进入：${item.name}`);
|
||||
function handleLogin(item: MyQuickLogin) {
|
||||
window.open(item.systemUrl, '_blank');
|
||||
}
|
||||
|
||||
async function getList() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const reqParams = {
|
||||
ustatus: '1',
|
||||
systemType: '2',
|
||||
};
|
||||
const res = await myQuickLoginListAll(reqParams);
|
||||
quickData.value = res || [];
|
||||
currentIndex.value = 0;
|
||||
nextTick(() => {
|
||||
updateVisibleCount();
|
||||
startAutoScroll();
|
||||
});
|
||||
} catch (error) {
|
||||
quickData.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
nextTick(() => {
|
||||
updateVisibleCount();
|
||||
startAutoScroll();
|
||||
@@ -199,8 +169,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 37px;
|
||||
padding: 8px 16px;
|
||||
height: var(--analysis-card-title-height, 37px);
|
||||
padding: var(--analysis-card-title-padding, 8px 16px);
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
@@ -214,12 +184,12 @@
|
||||
.card-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 8px 12px 12px;
|
||||
padding: var(--analysis-card-content-padding, 8px 12px 12px);
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
gap: var(--analysis-card-item-gap, 8px);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -243,7 +213,7 @@
|
||||
|
||||
.quick-login-track {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: var(--analysis-card-item-gap, 8px);
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
@@ -262,7 +232,7 @@
|
||||
height: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid rgb(226 232 240);
|
||||
border-radius: 10px;
|
||||
border-radius: var(--analysis-card-radius, 10px);
|
||||
background: rgb(255, 255, 255);
|
||||
box-shadow: 0 8px 24px rgb(148 163 184 / 14%);
|
||||
cursor: pointer;
|
||||
@@ -285,7 +255,7 @@
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 8px;
|
||||
padding: 2px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@@ -293,7 +263,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&__name {
|
||||
@@ -343,7 +313,7 @@
|
||||
@media (max-width: 768px) {
|
||||
.quick-login-card {
|
||||
.card-content {
|
||||
padding: 8px 12px 12px;
|
||||
padding: var(--analysis-card-content-padding, 8px 12px 12px);
|
||||
}
|
||||
|
||||
.quick-login-item {
|
||||
|
||||
@@ -268,8 +268,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 37px;
|
||||
padding: 8px 16px;
|
||||
height: var(--analysis-card-title-height, 37px);
|
||||
padding: var(--analysis-card-title-padding, 8px 16px);
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
@@ -313,7 +313,7 @@
|
||||
.card-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 8px 12px 12px;
|
||||
padding: var(--analysis-card-content-padding, 8px 12px 12px);
|
||||
color: rgb(71 85 105);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
|
||||
@@ -90,12 +90,20 @@
|
||||
}
|
||||
|
||||
.mySpring-analysis .analysis-layout {
|
||||
--analysis-gap: 12px;
|
||||
--analysis-row-height: calc((100% - var(--analysis-gap) * 2) / 3);
|
||||
--analysis-double-row-height: calc(var(--analysis-row-height) * 2 + var(--analysis-gap));
|
||||
--analysis-card-title-height: 37px;
|
||||
--analysis-card-title-padding: 8px 16px;
|
||||
--analysis-card-content-padding: 8px 12px 12px;
|
||||
--analysis-card-item-gap: 8px;
|
||||
--analysis-card-radius: 10px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
min-height: 0;
|
||||
gap: 12px;
|
||||
gap: var(--analysis-gap);
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
@@ -110,14 +118,14 @@
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
min-height: 0;
|
||||
gap: 12px;
|
||||
gap: var(--analysis-gap);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mySpring-analysis .analysis-right-top {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
gap: var(--analysis-gap);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
@@ -129,7 +137,7 @@
|
||||
|
||||
.mySpring-analysis .analysis-right {
|
||||
flex: 3 1 0;
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
grid-template-rows: minmax(0, var(--analysis-row-height)) minmax(0, var(--analysis-double-row-height));
|
||||
}
|
||||
|
||||
.mySpring-analysis .analysis-panel {
|
||||
@@ -139,7 +147,7 @@
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
border-radius: 10px;
|
||||
border-radius: var(--analysis-card-radius);
|
||||
border: 1px solid rgb(226 232 240);
|
||||
background: rgb(255, 255, 255);
|
||||
box-shadow: 0 1px 3px rgb(15 23 42 / 0.06);
|
||||
|
||||
@@ -142,7 +142,10 @@
|
||||
{ label: '进行中', color: '#3B82F6', field: 'value02' },
|
||||
{ label: '已完成', color: '#10B981', field: 'value03' },
|
||||
] as const;
|
||||
const months = chartData.value.map((item) => item.axisName || '-');
|
||||
const months = chartData.value.map((item) => {
|
||||
const axisName = item.axisName || '-';
|
||||
return axisName.endsWith('月') ? axisName : `${axisName}月`;
|
||||
});
|
||||
const pendingData = chartData.value.map((item) => Number(item.value01 || 0));
|
||||
const processingData = chartData.value.map((item) => Number(item.value02 || 0));
|
||||
const finishedData = chartData.value.map((item) => Number(item.value03 || 0));
|
||||
|
||||
@@ -7,13 +7,15 @@
|
||||
<div class="workbench-layout">
|
||||
<div class="workbench-row">
|
||||
<div class="workbench-col">
|
||||
<NoteInfo />
|
||||
</div>
|
||||
<div class="workbench-col">上右</div>
|
||||
<NoteInfo />
|
||||
</div>
|
||||
<div class="workbench-col">
|
||||
上右
|
||||
</div>
|
||||
</div>
|
||||
<div class="workbench-row">
|
||||
<div class="workbench-col">中左</div>
|
||||
<div class="workbench-col">中右</div>
|
||||
<div class="workbench-col">下左</div>
|
||||
<div class="workbench-col">下右</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,11 +48,11 @@
|
||||
.jeesite-workbench .workbench-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
padding: 2px;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
@@ -60,7 +62,7 @@
|
||||
.jeesite-workbench .workbench-row {
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user