0909
13
src/api/enterpriseLarge/index.ts
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import request from '@/utils/request';
|
||||||
|
import { AxiosPromise } from 'axios';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查询企业关键指标
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const keyIndex = () => {
|
||||||
|
return request({
|
||||||
|
url: '/enterprise/big/screen/keyIndex',
|
||||||
|
method: 'get'
|
||||||
|
});
|
||||||
|
};
|
BIN
src/assets/images/beUnder.png
Normal file
After Width: | Height: | Size: 4.5 KiB |
BIN
src/assets/images/break.png
Normal file
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/images/constructor.png
Normal file
After Width: | Height: | Size: 40 KiB |
BIN
src/assets/images/manager.png
Normal file
After Width: | Height: | Size: 37 KiB |
BIN
src/assets/images/subcontractor.png
Normal file
After Width: | Height: | Size: 35 KiB |
BIN
src/assets/images/todayConstruction.png
Normal file
After Width: | Height: | Size: 3.9 KiB |
BIN
src/assets/images/totalCapacity.png
Normal file
After Width: | Height: | Size: 1.4 KiB |
@ -80,7 +80,7 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/digitalizationScreen',
|
path: '/digitalizationScreen',
|
||||||
component: () => import('@/views/projectLarge/digitalizationScreen/index.vue'),
|
component: () => import('@/views/enterpriseLarge/digitalizationScreen/index.vue'),
|
||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -0,0 +1,540 @@
|
|||||||
|
<template>
|
||||||
|
<div class="leftPage">
|
||||||
|
<div class="topPage">
|
||||||
|
<Title style="font-size: 22px" title="企业关键指标" />
|
||||||
|
<div class="indicators">
|
||||||
|
<div class="indicator-card" v-for="indicator in indicators" :key="indicator.id">
|
||||||
|
<div style="display: flex; align-items: baseline; gap: 4px; margin-bottom: 5px">
|
||||||
|
<div class="indicator-value">{{ indicator.value }}</div>
|
||||||
|
<div class="indicator-unit">{{ indicator.unit }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="indicator-name">{{ indicator.name }}</div>
|
||||||
|
<div class="indicator-icon">
|
||||||
|
<img :src="indicator.iconPath" :alt="indicator.name" v-if="indicator.iconPath" style="width: 50px; height: 50px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="endPage">
|
||||||
|
<Title style="font-size: 22px" title="人员情况" />
|
||||||
|
<div class="map">
|
||||||
|
<div class="project_attendance_chart">
|
||||||
|
<Title style="font-size: 22px" title="各项目人员出勤率" />
|
||||||
|
<div class="chart_content" ref="attendanceChartRef"></div>
|
||||||
|
</div>
|
||||||
|
<div class="attendance_tag">
|
||||||
|
<div class="tag_item">
|
||||||
|
<img src="@/assets/projectLarge/people.svg" alt="" />
|
||||||
|
<div class="tag_title">出勤人</div>
|
||||||
|
<div class="tag_info">
|
||||||
|
{{ attendanceCount }}
|
||||||
|
<span style="font-size: 14px">人</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tag_item">
|
||||||
|
<img src="@/assets/projectLarge/people.svg" alt="" />
|
||||||
|
<div class="tag_title">在岗人</div>
|
||||||
|
<div class="tag_info">
|
||||||
|
{{ peopleCount }}
|
||||||
|
<span style="font-size: 14px">人</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tag_item">
|
||||||
|
<img src="@/assets/projectLarge/people.svg" alt="" />
|
||||||
|
<div class="tag_title">出勤率</div>
|
||||||
|
<div class="tag_info">
|
||||||
|
{{ attendanceRate }}
|
||||||
|
<span style="font-size: 14px">%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="attendance_tag"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 项目出勤率柱状图 -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import Title from './title.vue';
|
||||||
|
import { getScreenNews, getScreenPeople } from '@/api/projectScreen';
|
||||||
|
import { keyIndex } from '@/api/enterpriseLarge/index';
|
||||||
|
import { mapOption } from './optionList';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
projectId: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let mapChart = null;
|
||||||
|
const mapChartRef = ref<HTMLDivElement | null>(null);
|
||||||
|
const indicators = ref([
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
name: '在建项目',
|
||||||
|
value: '28',
|
||||||
|
unit: '个',
|
||||||
|
iconPath: '/src/assets/images/beUnder.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
name: '合同总额',
|
||||||
|
value: '288.88',
|
||||||
|
unit: '亿元',
|
||||||
|
iconPath: '/src/assets/images/contract.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
name: '总容量',
|
||||||
|
value: '158.88',
|
||||||
|
unit: '个',
|
||||||
|
iconPath: '/src/assets/images/totalCapacity.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
name: '今日施工',
|
||||||
|
value: '18',
|
||||||
|
unit: '个',
|
||||||
|
iconPath: '/src/assets/images/todayConstruction.png'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const news = ref([]);
|
||||||
|
const newDetail = ref({
|
||||||
|
title: '',
|
||||||
|
content: ''
|
||||||
|
});
|
||||||
|
const newId = ref('');
|
||||||
|
const attendanceCount = ref(0);
|
||||||
|
const attendanceRate = ref(0);
|
||||||
|
const peopleCount = ref(0);
|
||||||
|
const teamAttendanceList = ref([{ id: '', teamName: '', attendanceNumber: 0, allNumber: 0, attendanceRate: 0, attendanceTime: '' }]);
|
||||||
|
|
||||||
|
// 项目出勤率数据
|
||||||
|
const projectAttendanceData = ref([
|
||||||
|
{ name: 'A项目', value: 62 },
|
||||||
|
{ name: 'B项目', value: 56 },
|
||||||
|
{ name: 'C项目', value: 95 },
|
||||||
|
{ name: 'D项目', value: 64 },
|
||||||
|
{ name: 'E项目', value: 97.5 }
|
||||||
|
]);
|
||||||
|
|
||||||
|
let attendanceChart = null;
|
||||||
|
const attendanceChartRef = ref<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取项目人员出勤数据
|
||||||
|
*/
|
||||||
|
const getPeopleData = async () => {
|
||||||
|
const res = await getScreenPeople(props.projectId);
|
||||||
|
const { data, code } = res;
|
||||||
|
if (code === 200) {
|
||||||
|
attendanceCount.value = data.attendanceCount;
|
||||||
|
attendanceRate.value = data.attendanceRate;
|
||||||
|
peopleCount.value = data.peopleCount;
|
||||||
|
teamAttendanceList.value = data.teamAttendanceList;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取企业关键指标数据
|
||||||
|
*/
|
||||||
|
const getKeyIndexData = async () => {
|
||||||
|
const res = await keyIndex();
|
||||||
|
const { data, code } = res;
|
||||||
|
if (code === 200) {
|
||||||
|
// 更新指标数据,使用接口返回的指定字段
|
||||||
|
indicators.value[0].value = data.ongoingProject || 0;
|
||||||
|
indicators.value[1].value = data.totalContractAmount || 0;
|
||||||
|
indicators.value[2].value = data.totalCapacity || 0;
|
||||||
|
indicators.value[3].value = data.todayProject || 0;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始化项目出勤率柱状图(美化版)
|
||||||
|
*/
|
||||||
|
const initAttendanceChart = () => {
|
||||||
|
if (!attendanceChartRef.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
attendanceChart = echarts.init(attendanceChartRef.value);
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
shadowStyle: {
|
||||||
|
color: 'rgba(29, 214, 255, 0.1)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(10, 24, 45, 0.8)',
|
||||||
|
borderColor: 'rgba(29, 214, 255, 0.3)',
|
||||||
|
borderWidth: 1,
|
||||||
|
textStyle: {
|
||||||
|
color: '#e6f7ff'
|
||||||
|
},
|
||||||
|
formatter: (params) => {
|
||||||
|
const data = params[0];
|
||||||
|
return `${data.name}<br/>出勤率: ${data.value}%`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: 40,
|
||||||
|
right: 30,
|
||||||
|
bottom: 40,
|
||||||
|
left: 30,
|
||||||
|
containLabel: true,
|
||||||
|
backgroundColor: 'rgba(10, 24, 45, 0.1)',
|
||||||
|
borderColor: 'rgba(29, 214, 255, 0.1)',
|
||||||
|
borderWidth: 1
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: projectAttendanceData.value.map((item) => item.name),
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(29, 214, 255, 0.3)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#e6f7ff',
|
||||||
|
fontSize: 14,
|
||||||
|
interval: 0,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
padding: [10, 0, 0, 0]
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true,
|
||||||
|
length: 5,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(29, 214, 255, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
interval: 20,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(29, 214, 255, 0.3)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#e6f7ff',
|
||||||
|
fontSize: 12,
|
||||||
|
formatter: '{value}%',
|
||||||
|
padding: [0, 10, 0, 0]
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(29, 214, 255, 0.15)',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: projectAttendanceData.value.map((item) => item.value),
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
color: function (params) {
|
||||||
|
// 根据数值动态调整渐变效果
|
||||||
|
const value = params.value;
|
||||||
|
const baseColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: 'rgba(29, 214, 255, 1)' },
|
||||||
|
{ offset: 1, color: 'rgba(10, 120, 200, 0.8)' }
|
||||||
|
]);
|
||||||
|
return baseColor;
|
||||||
|
},
|
||||||
|
borderRadius: [5, 5, 0, 0],
|
||||||
|
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||||||
|
borderWidth: 1
|
||||||
|
},
|
||||||
|
barWidth: '45%',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
color: '#e6f7ff',
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
formatter: '{c}%',
|
||||||
|
offset: [0, -10]
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: 'rgba(29, 214, 255, 1)' },
|
||||||
|
{ offset: 1, color: 'rgba(10, 120, 200, 1)' }
|
||||||
|
]),
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor: 'rgba(29, 214, 255, 0.5)',
|
||||||
|
borderColor: 'rgba(255, 255, 255, 0.5)'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
color: '#ffffff',
|
||||||
|
textShadowBlur: 2,
|
||||||
|
textShadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
animationDelay: function (idx) {
|
||||||
|
// 动画延迟,使柱子依次出现
|
||||||
|
return idx * 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 添加动画效果
|
||||||
|
animationEasing: 'elasticOut',
|
||||||
|
animationDelayUpdate: function (idx) {
|
||||||
|
return idx * 5;
|
||||||
|
},
|
||||||
|
// 添加单位标签
|
||||||
|
graphic: [
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
left: 10,
|
||||||
|
top: 10,
|
||||||
|
style: {
|
||||||
|
text: '单位: %',
|
||||||
|
fill: '#8ab2ff',
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
attendanceChart.setOption(option);
|
||||||
|
|
||||||
|
// 添加窗口大小变化时的图表更新
|
||||||
|
const handleResize = () => {
|
||||||
|
if (attendanceChart) {
|
||||||
|
attendanceChart.resize();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
// 清理函数
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始化地图
|
||||||
|
*/
|
||||||
|
const initMapChart = () => {
|
||||||
|
if (!mapChartRef.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
mapChart = echarts.init(mapChartRef.value);
|
||||||
|
mapChart.setOption(mapOption);
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// nextTick(() => {
|
||||||
|
// initMapChart();
|
||||||
|
// });
|
||||||
|
getPeopleData();
|
||||||
|
getKeyIndexData();
|
||||||
|
|
||||||
|
// 初始化项目出勤率柱状图
|
||||||
|
setTimeout(() => {
|
||||||
|
initAttendanceChart();
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
// if (mapChart) {
|
||||||
|
// mapChart.dispose();
|
||||||
|
// mapChart = null;
|
||||||
|
// }
|
||||||
|
|
||||||
|
if (attendanceChart) {
|
||||||
|
attendanceChart.dispose();
|
||||||
|
attendanceChart = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.leftPage {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.topPage,
|
||||||
|
.endPage {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px 0;
|
||||||
|
border: 1px solid rgba(29, 214, 255, 0.1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.endPage {
|
||||||
|
flex: 1;
|
||||||
|
margin-top: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project_attendance_chart {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px 0;
|
||||||
|
border: 1px solid rgba(29, 214, 255, 0.1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.chart_title {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #e6f7ff;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.chart_content {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicators {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 15px;
|
||||||
|
margin-top: 15px;
|
||||||
|
padding: 0 15px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-card {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
background: rgba(10, 24, 45, 0.7);
|
||||||
|
border: 1px solid rgba(29, 214, 255, 0.2);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 15px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg, rgba(29, 214, 255, 0.2) 0%, rgba(29, 214, 255, 0.6) 50%, rgba(29, 214, 255, 0.2) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-value {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #e6f7ff;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-unit {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #8ab2ff;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-name {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e6f7ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-icon {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
right: 10px;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-icon img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attendance_tag {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 30px;
|
||||||
|
margin-top: 15px;
|
||||||
|
|
||||||
|
.tag_item {
|
||||||
|
width: 28%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
border: 1px dashed rgba(29, 214, 255, 0.3);
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.tag_info {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: rgba(230, 247, 255, 1);
|
||||||
|
text-shadow: 0px 1.24px 6.21px rgba(0, 190, 247, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(230, 247, 255, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.attendance_list {
|
||||||
|
padding: 0px 30px;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
.attendance_item {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 3fr 2fr 2fr 3fr;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subfont {
|
||||||
|
color: rgba(138, 149, 165, 1);
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,46 @@
|
|||||||
|
<template>
|
||||||
|
<div class="title">
|
||||||
|
<div class="title_icon">
|
||||||
|
<img src="@/assets/projectLarge/section.svg" alt="" />
|
||||||
|
<img src="@/assets/projectLarge/border.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
<div>{{ title }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '标题'
|
||||||
|
|
||||||
|
},
|
||||||
|
prefix: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 3px;
|
||||||
|
font-family: 'AlimamaShuHeiTi', sans-serif;
|
||||||
|
|
||||||
|
.title_icon {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
& > img:last-child {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 4px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -180,7 +180,7 @@
|
|||||||
<!-- 不流转子项 -->
|
<!-- 不流转子项 -->
|
||||||
<div v-if="sonTransferLedgerList2.length > 0">
|
<div v-if="sonTransferLedgerList2.length > 0">
|
||||||
<h4 style="margin-top: 20px; margin-bottom: 10px; color: #ff6b6b">不流转</h4>
|
<h4 style="margin-top: 20px; margin-bottom: 10px; color: #ff6b6b">不流转</h4>
|
||||||
<el-table v-loading="sonLoading" :data="sonTransferLedgerList2" @selection-change="handleSonSelectionChange">
|
<el-table v-loading="sonLoading" :data="sonTransferLedgerList2" @selection-change="handleSonSelectionChange" width="100%">
|
||||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||||
<el-table-column label="土地类型" align="center" prop="landTypeName" />
|
<el-table-column label="土地类型" align="center" prop="landTypeName" />
|
||||||
<el-table-column label="地块" align="center" prop="landName" />
|
<el-table-column label="地块" align="center" prop="landName" />
|
||||||
@ -221,8 +221,8 @@
|
|||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
<!-- 新增子项对话框 -->
|
<!-- 新增子项对话框 -->
|
||||||
<el-dialog draggable :title="sonFormDialog.title" v-model="sonFormDialog.visible" width="600px" append-to-body>
|
<el-dialog draggable :title="sonFormDialog.title" v-model="sonFormDialog.visible" width="650px" append-to-body>
|
||||||
<el-form ref="sonLandTransferLedgerFormRef" :model="sonForm" :rules="sonRules" label-width="120px">
|
<el-form ref="sonLandTransferLedgerFormRef" :model="sonForm" :rules="sonRules" label-width="150px">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<el-form-item label="对应地块" prop="landBlockId">
|
<el-form-item label="对应地块" prop="landBlockId">
|
||||||
@ -329,7 +329,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="24" v-if="sonForm.transferStatus == '2'">
|
<el-col :span="24" v-if="sonForm.transferStatus == '2'" style="">
|
||||||
<el-form-item label="不签合同面积(亩)" prop="noContractArea">
|
<el-form-item label="不签合同面积(亩)" prop="noContractArea">
|
||||||
<el-input v-model="sonForm.noContractArea" type="number" placeholder="请输入不签合同面积" />
|
<el-input v-model="sonForm.noContractArea" type="number" placeholder="请输入不签合同面积" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
@ -1,326 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="leftPage">
|
|
||||||
<div class="topPage">
|
|
||||||
<Title title="企业关键指标" />
|
|
||||||
<div class="content">
|
|
||||||
<div class="content_item" v-for="item in news" :key="item.id">
|
|
||||||
<img src="@/assets/projectLarge/round.svg" alt="" />
|
|
||||||
<div class="ellipsis">
|
|
||||||
{{ item.title }}
|
|
||||||
<span @click="showNewsDetail(item)" style="color: rgba(138, 149, 165, 1)">{{ item.id === newId ? '关闭' : '查看' }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="detailBox" :class="{ 'show': newId }">
|
|
||||||
<!-- <div class="detail_title">{{ newDetail.title }}</div> -->
|
|
||||||
<div class="detail_content" v-html="newDetail.content"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="endPage">
|
|
||||||
<Title title="人员情况" />
|
|
||||||
<div class="map">
|
|
||||||
<img src="@/assets/projectLarge/map.svg" alt="" />
|
|
||||||
<!-- <div ref="mapChartRef"></div> -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="attendance_tag">
|
|
||||||
<div class="tag_item">
|
|
||||||
<img src="@/assets/projectLarge/people.svg" alt="" />
|
|
||||||
<div class="tag_title">出勤人</div>
|
|
||||||
<div class="tag_info">
|
|
||||||
{{ attendanceCount }}
|
|
||||||
<span style="font-size: 14px">人</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tag_item">
|
|
||||||
<img src="@/assets/projectLarge/people.svg" alt="" />
|
|
||||||
<div class="tag_title">在岗人</div>
|
|
||||||
<div class="tag_info">
|
|
||||||
{{ peopleCount }}
|
|
||||||
<span style="font-size: 14px">人</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tag_item">
|
|
||||||
<img src="@/assets/projectLarge/people.svg" alt="" />
|
|
||||||
<div class="tag_title">出勤率</div>
|
|
||||||
<div class="tag_info">
|
|
||||||
{{ attendanceRate }}
|
|
||||||
<span style="font-size: 14px">%</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="attendance_list">
|
|
||||||
<div class="attendance_item subfont">
|
|
||||||
<div class="attendance_item_title"></div>
|
|
||||||
<div class="attendance_item_title">在岗人数</div>
|
|
||||||
<div class="attendance_item_title">出勤率</div>
|
|
||||||
<div class="attendance_item_title">出勤时间</div>
|
|
||||||
</div>
|
|
||||||
<div v-for="item in teamAttendanceList" :key="item.id" class="attendance_item">
|
|
||||||
<div class="attendance_item_title">{{ item.teamName }}</div>
|
|
||||||
<div class="attendance_item_number">
|
|
||||||
{{ item.attendanceNumber }} <span class="subfont">人/{{ item.allNumber }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="attendance_item_rate">{{ item.attendanceRate }} %</div>
|
|
||||||
<div class="attendance_item_date subfont">{{ item.attendanceTime }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import Title from './title.vue';
|
|
||||||
import { getScreenNews, getScreenPeople } from '@/api/projectScreen';
|
|
||||||
import { mapOption } from './optionList';
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
projectId: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
let mapChart = null;
|
|
||||||
const mapChartRef = ref<HTMLDivElement | null>(null);
|
|
||||||
const news = ref([]);
|
|
||||||
const newDetail = ref({
|
|
||||||
title: '',
|
|
||||||
content: ''
|
|
||||||
});
|
|
||||||
const newId = ref('');
|
|
||||||
const attendanceCount = ref(0);
|
|
||||||
const attendanceRate = ref(0);
|
|
||||||
const peopleCount = ref(0);
|
|
||||||
const teamAttendanceList = ref([{ id: '', teamName: '', attendanceNumber: 0, allNumber: 0, attendanceRate: 0, attendanceTime: '' }]);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 显示新闻详情
|
|
||||||
*/
|
|
||||||
const showNewsDetail = (item: any) => {
|
|
||||||
if (newId.value === item.id) {
|
|
||||||
newId.value = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
newDetail.value = item;
|
|
||||||
newId.value = item.id;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取项目人员出勤数据
|
|
||||||
*/
|
|
||||||
const getPeopleData = async () => {
|
|
||||||
const res = await getScreenPeople(props.projectId);
|
|
||||||
const { data, code } = res;
|
|
||||||
if (code === 200) {
|
|
||||||
attendanceCount.value = data.attendanceCount;
|
|
||||||
attendanceRate.value = data.attendanceRate;
|
|
||||||
peopleCount.value = data.peopleCount;
|
|
||||||
teamAttendanceList.value = data.teamAttendanceList;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取项目新闻数据
|
|
||||||
*/
|
|
||||||
const getNewsData = async () => {
|
|
||||||
const res = await getScreenNews(props.projectId);
|
|
||||||
const { data, code } = res;
|
|
||||||
if (code === 200) {
|
|
||||||
news.value = data;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 初始化地图
|
|
||||||
*/
|
|
||||||
const initMapChart = () => {
|
|
||||||
if (!mapChartRef.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
mapChart = echarts.init(mapChartRef.value);
|
|
||||||
mapChart.setOption(mapOption);
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
// nextTick(() => {
|
|
||||||
// initMapChart();
|
|
||||||
// });
|
|
||||||
getPeopleData();
|
|
||||||
getNewsData();
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
// if (mapChart) {
|
|
||||||
// mapChart.dispose();
|
|
||||||
// mapChart = null;
|
|
||||||
// }
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.leftPage {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.topPage,
|
|
||||||
.endPage {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
padding: 15px 0;
|
|
||||||
border: 1px solid rgba(29, 214, 255, 0.1);
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.endPage {
|
|
||||||
flex: 1;
|
|
||||||
margin-top: 23px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
max-height: 100px;
|
|
||||||
margin: 0 15px;
|
|
||||||
padding: 0 10px;
|
|
||||||
margin-top: 15px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
background: rgba(204, 204, 204, 0.1);
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(29, 214, 255, 0.78);
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content_item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: rgba(230, 247, 255, 1);
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.ellipsis {
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin-top: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.map {
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attendance_tag {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 30px;
|
|
||||||
margin-top: 15px;
|
|
||||||
|
|
||||||
.tag_item {
|
|
||||||
width: 28%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
border: 1px dashed rgba(29, 214, 255, 0.3);
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
.tag_info {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: rgba(230, 247, 255, 1);
|
|
||||||
text-shadow: 0px 1.24px 6.21px rgba(0, 190, 247, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag_title {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: rgba(230, 247, 255, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.attendance_list {
|
|
||||||
padding: 0px 30px;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
.attendance_item {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 3fr 2fr 2fr 3fr;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.subfont {
|
|
||||||
color: rgba(138, 149, 165, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailBox {
|
|
||||||
position: absolute;
|
|
||||||
left: 20vw;
|
|
||||||
top: 0;
|
|
||||||
width: 300px;
|
|
||||||
height: 300px;
|
|
||||||
max-height: 500px;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 0 15px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
opacity: 0;
|
|
||||||
z-index: -1;
|
|
||||||
|
|
||||||
&.show {
|
|
||||||
left: 25vw;
|
|
||||||
opacity: 1;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailBox::before {
|
|
||||||
content: '';
|
|
||||||
/* 绝对定位相对于父元素 */
|
|
||||||
position: absolute;
|
|
||||||
/* 定位到左侧中间位置 */
|
|
||||||
left: -10px;
|
|
||||||
top: 50%;
|
|
||||||
/* 垂直居中 */
|
|
||||||
transform: translateY(-50%);
|
|
||||||
/* 利用边框创建三角形 */
|
|
||||||
border-width: 10px 10px 10px 0;
|
|
||||||
border-style: solid;
|
|
||||||
/* 三角形颜色与背景匹配,左侧边框透明 */
|
|
||||||
border-color: transparent rgba(255, 255, 255, 0.2) transparent transparent;
|
|
||||||
/* 确保三角形在内容下方 */
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,45 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="title">
|
|
||||||
<div class="title_icon">
|
|
||||||
<img src="@/assets/projectLarge/section.svg" alt="">
|
|
||||||
<img src="@/assets/projectLarge/border.svg" alt="">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
<div>{{ title }}</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
defineProps({
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '标题'
|
|
||||||
},
|
|
||||||
prefix: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.title {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 3px;
|
|
||||||
font-family: 'AlimamaShuHeiTi', sans-serif;
|
|
||||||
|
|
||||||
.title_icon {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&>img:last-child {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 4px;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -32,12 +32,10 @@
|
|||||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['supplierInput:supplierInput:add']">新增</el-button>
|
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['supplierInput:supplierInput:add']">新增</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button type="primary" plain icon="Download" @click="handleImport" v-hasPermi="['supplierInput:supplierInput:import']">导入</el-button>
|
<el-button type="warning" plain icon="Upload" @click="handleImport" v-hasPermi="['supplierInput:supplierInput:import']">导入</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button type="primary" plain icon="Upload" @click="handleExport" v-hasPermi="['supplierInput:supplierInput:export']"
|
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['supplierInput:supplierInput:export']">导出模板</el-button>
|
||||||
>导出模板</el-button
|
|
||||||
>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -700,12 +698,12 @@ const handleDelete = async (row?: SupplierInputVO) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 导出操作(下载静态模板文件) */
|
/** 导出操作 */
|
||||||
const handleExport = () => {
|
const handleExport = () => {
|
||||||
try {
|
try {
|
||||||
// 创建a标签并直接下载public目录下的静态文件
|
// 创建a标签并直接下载public目录下的静态文件
|
||||||
const link = document.createElement('a');
|
const link = document.createElement('a');
|
||||||
link.href = '/xx.xlsx'; // 使用public目录下现有的Excel文件作为模板
|
link.href = '/assets/files/供应商导入模板.xlsx'; // 使用public目录下现有的Excel文件作为模板
|
||||||
link.download = '供应商导入模板.xlsx';
|
link.download = '供应商导入模板.xlsx';
|
||||||
document.body.appendChild(link);
|
document.body.appendChild(link);
|
||||||
link.click();
|
link.click();
|
||||||
@ -748,7 +746,7 @@ const handleImport = () => {
|
|||||||
loading.value = true;
|
loading.value = true;
|
||||||
// 调用导入接口
|
// 调用导入接口
|
||||||
const res = await leadingIn(formData, queryParams.value.projectId);
|
const res = await leadingIn(formData, queryParams.value.projectId);
|
||||||
console.log('111111111111', queryParams.value.projectId);
|
console.log("111111111111",queryParams.value.projectId);
|
||||||
|
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
proxy?.$modal.msgSuccess('导入成功');
|
proxy?.$modal.msgSuccess('导入成功');
|
||||||
|