taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

合并

Browse Source
This commit is contained in:
Teo
2025-09-12 19:38:17 +08:00
parent eb28d089cc 120a46d76c
commit 0c27426d80
15 changed files with 3197 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/views/projectLarge/ProjectScreen/components/leftPage.vue
View File

@ -2,13 +2,18 @@
<div class="leftPage">
<div class="topPage">
<Title title="项目公告" />
<div class="content" ref="contentRef" id="event_scroll" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
<div class="content_item" v-for="item in news" :key="item.id" @click="showNewsDetail(item)">
<img src="@/assets/projectLarge/round.svg" alt="">
<div
class="content"
ref="contentRef"
id="event_scroll"
@mouseenter.native="autoScrollTable(true, false)"
@mouseleave.native="autoScrollTable(false, true)"
>
<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 style="color: rgba(138, 149, 165, 1);">{{ item.id === newId ? '关闭' :
'查看' }}</span>
<span @click="showNewsDetail(item)" style="color: rgba(138, 149, 165, 1)">{{ item.id === newId ? '关闭' : '查看' }}</span>
</div>
</div>
</div>
@ -18,40 +23,40 @@
<!-- <div class="detail_title">{{ newDetail.title }}</div> -->
<div class="detail_content" v-html="newDetail.content"></div>
<div class="close" @click="newId = ''">
<CircleClose style="width: 1.2em; height: 1.2em;" />
<CircleClose style="width: 1.2em; height: 1.2em" />
</div>
</div>
<div class="endPage">
<Title title="人员情况" />
<div class="map">
<img src="@/assets/projectLarge/map.svg" alt="">
<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="">
<img src="@/assets/projectLarge/people.svg" alt="" />
<div class="tag_title">出勤人</div>
<div class="tag_info">
{{ attendanceCount }}
<span style="font-size: 14px;">人</span>
<span style="font-size: 14px">人</span>
</div>
</div>
<div class="tag_item">
<img src="@/assets/projectLarge/people.svg" alt="">
<img src="@/assets/projectLarge/people.svg" alt="" />
<div class="tag_title">在岗人</div>
<div class="tag_info">
{{ peopleCount }}
<span style="font-size: 14px;">人</span>
<span style="font-size: 14px">人</span>
</div>
</div>
<div class="tag_item">
<img src="@/assets/projectLarge/people.svg" alt="">
<img src="@/assets/projectLarge/people.svg" alt="" />
<div class="tag_title">出勤率</div>
<div class="tag_info">
{{ attendanceRate }}
<span style="font-size: 14px;">%</span>
<span style="font-size: 14px">%</span>
</div>
</div>
</div>
@ -65,8 +70,9 @@
</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_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>
@ -76,71 +82,80 @@
</template>
<script setup lang="ts">
import { ref } from "vue"
import Title from './title.vue'
import { getScreenNews, getScreenPeople } from '@/api/projectScreen';
import { ref } from 'vue';
import Title from './title.vue';
import { getScreenNews, getScreenPeople } from '@/api/projectScreen/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 contentRef = ref<HTMLDivElement | null>(null);
const news = ref([])
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 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
newId.value = '';
return;
}
newDetail.value = item
newId.value = item.id
}
newDetail.value = item;
newId.value = item.id;
};
/**
* 获取项目人员出勤数据
*/
const getPeopleData = async () => {
const res = await getScreenPeople(props.projectId);
const { data, code } = res
const { data, code } = res;
if (code === 200) {
attendanceCount.value = data.attendanceCount
attendanceRate.value = data.attendanceRate
peopleCount.value = data.peopleCount
teamAttendanceList.value = data.teamAttendanceList
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
const { data, code } = res;
if (code === 200) {
news.value = data
requestAnimationFrame((timestamp) => autoScrollTable(timestamp));
news.value = data;
autoScrollTable(5);
}
}
};
var lastTime = 0;
var scrolltimerTable = null
const state = reactive({
events: [],
outputList: [],
detialInfoShow: false,
notShowPro: [{ id: 37 }, { id: 44 }, { id: 48 }], //模块内容区域不展示的项目（中煤科工 广东户用光伏项目 兴隆光伏）
scrolltimerTable: null,
flagPause: true //滚动继续滚动
});
const autoScrollTable = (time: number) => {
const divData = document.getElementById('event_scroll');
@ -175,13 +190,14 @@ const resumeScroll = () => {
};
onMounted(() => {
getPeopleData()
getNewsData()
})
onUnmounted(() => {
// nextTick(() => {
// initMapChart();
// });
getPeopleData();
getNewsData();
});
onUnmounted(() => {});
</script>
<style scoped lang="scss">