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-05-09 18:41:08 +08:00
parent 609b4ba543
commit 8890fcfd95
8 changed files with 472 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/views/gisHome/component/leftMain.vue
View File

@ -21,21 +21,30 @@
<img src="@/assets/images/totalnumber.png" alt="" />
</div>
<p>总人数</p>
<div class="peopleNum"><span>259</span>人</div>
<div class="peopleNum">
<span>{{ constructionUserData?.peopleCount }}</span
>人
</div>
</div>
<div class="card">
<div class="iconImg">
<img src="@/assets/images/attendanceperson.png" alt="" />
</div>
<p>出勤人</p>
<div class="peopleNum"><span>259</span>人</div>
<div class="peopleNum">
<span>{{ constructionUserData?.attendanceCount }}</span
>人
</div>
</div>
<div class="card">
<div class="iconImg">
<img src="@/assets/images/Attendancerate.png" alt="" />
</div>
<p>出勤率</p>
<div class="peopleNum"><span>100</span>%</div>
<div class="peopleNum">
<span>{{ constructionUserData?.attendanceRate }}</span
>%
</div>
</div>
</div>
<div class="title">
@ -75,20 +84,57 @@
</template>
<script lang="ts" setup>
import { getConstructionUserList, getMachineryrList, getMaterialsList } from '@/api/gis';
import { ConstructionUserVO, MachineryrVO, MaterialsVO } from '@/api/gis/type';
import * as echarts from 'echarts';
import { useUserStoreHook } from '@/store/modules/user';
const userStore = useUserStoreHook();
//echarts节点
const myMachineryChart = ref(null);
const myOrderChart = ref(null);
type EChartsOption = echarts.EChartsOption;
const constructionUserData = ref<ConstructionUserVO>(null);
const machineryOption = ref<MachineryrVO[]>([]); //机械
const orderOption = ref<MaterialsVO[]>([]); //材料
const machineryDataAxis = computed(() => machineryOption.value.map((item) => item.machineryName)); //x轴数据
const machineryData = computed(() => machineryOption.value.map((item) => item.machineryCount)); //柱状图数据
const orderDataAxis = computed(() => orderOption.value.map((item) => item.materialsName)); //材料x轴数据
const orderPutData = computed(() => orderOption.value.map((item) => item.putCount)); //柱状图领用量数据
const orderOutData = computed(() => orderOption.value.map((item) => item.outCount)); //柱状图出库量数据
const orderRankingData = computed(() => orderOption.value.map((item) => item.value)); //柱状图库存数据
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
//获取施工人员信息
const getConstructionUserData = async () => {
const res = await getConstructionUserList({ projectId: currentProject.value.id });
if (res.code !== 200) return;
constructionUserData.value = res.data;
};
//查询大屏机械列表
const getMachineryData = async () => {
const res = await getMachineryrList({ projectId: currentProject.value.id });
if (res.code !== 200) return;
machineryOption.value = res.data;
initMachinerycharts();
};
//查询大屏材料信息
const getOrderData = async () => {
const res = await getMaterialsList({ projectId: currentProject.value.id });
if (res.code !== 200) return;
orderOption.value = res.data;
initOrderChart();
console.log(orderDataAxis);
};
const initMachinerycharts = () => {
let chartDom = document.getElementById('machineryMain');
let myMachineryChart = echarts.init(chartDom);
myMachineryChart.value = markRaw(echarts.init(chartDom));
let option: EChartsOption;
// prettier-ignore
let dataAxis = ['水泥机', '搅拌机', '拖拉机', '推土机', '推土机', '推土机','推土机', ];
// prettier-ignore
let data = [11, 23, 21, 20, 22, 24, 24];
option = {
title: {
subtext: '单位：台数'
@ -99,7 +145,7 @@ const initMachinerycharts = () => {
bottom: '50vh'
},
xAxis: {
data: dataAxis,
data: machineryDataAxis.value,
axisLabel: {
// inside: true,
color: 'rgba(202, 218, 226, 1)'
@ -163,7 +209,6 @@ const initMachinerycharts = () => {
},
showDataShadow: false,
// 手柄大小
handleSize: 0,
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
moveHandleSize: 0, //移动手柄的大小
// 滚动条高度
@ -190,7 +235,7 @@ const initMachinerycharts = () => {
},
start: 0,
// 计算初始结束百分比
end: (6 / data.length) * 100
end: (6 / machineryData.value.length) * 100
}
],
@ -205,21 +250,19 @@ const initMachinerycharts = () => {
])
},
barWidth: '13vh',
data: data
data: machineryData.value
}
]
};
option && myMachineryChart.setOption(option);
option && myMachineryChart.value.setOption(option);
};
const initOrderChart = () => {
let chartDom = document.getElementById('orderMain');
let myMachineryChart = echarts.init(chartDom);
let option: EChartsOption;
// prettier-ignore
let data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
myOrderChart.value = markRaw(echarts.init(chartDom));
let option: EChartsOption;
option = {
tooltip: {
@ -244,20 +287,21 @@ const initOrderChart = () => {
}
},
grid: {
left: '3%',
left: '5%', //距离dom间距
right: '4%',
bottom: '0',
containLabel: true,
width: '90%'
top: '20%',
bottom: '1%',
height: '80%'
},
xAxis: {
type: 'value',
show: false
},
yAxis: {
type: 'category',
data,
offset: 60,
data: orderDataAxis.value,
offset: 0,
axisLine: {
show: false
},
@ -266,13 +310,38 @@ const initOrderChart = () => {
},
inverse: true,
axisLabel: {
formatter: function (value, index) {
return `{${data[index]}|No.${index + 1}} {value|${value}}`;
formatter: function (value) {
let bgType = '';
let index = orderDataAxis.value.indexOf(value);
switch (index) {
case 0:
bgType = 'a';
break;
case 1:
bgType = 'b';
break;
case 2:
bgType = 'c';
break;
default:
return `No.${index + 1} {value|${value}}`;
}
return `{${bgType}|No.${index + 1}} {value|${value}}`;
},
align: 'left',
verticalAlign: 'bottom',
yAxisIndex: 0,
// 横坐标 分割线等取消显示
padding: [0, 10, 10, 6],
axisTick: {
show: false
},
axisLine: {
show: false
},
color: 'rgba(230, 247, 255, 1)',
rich: {
Mon: {
a: {
color: 'rgba(230, 247, 255, 1)',
fontSize: 12,
align: 'center',
@ -283,7 +352,7 @@ const initOrderChart = () => {
{ offset: 1, color: 'rgba(255, 208, 59, 0)' }
])
},
Tue: {
b: {
color: 'rgba(230, 247, 255, 1)',
fontSize: 12,
align: 'left',
@ -294,7 +363,7 @@ const initOrderChart = () => {
{ offset: 1, color: 'rgba(31, 189, 237, 0)' }
])
},
Wed: {
c: {
color: 'rgba(230, 247, 255, 1)',
fontSize: 12,
align: 'left',
@ -408,7 +477,7 @@ const initOrderChart = () => {
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 345, 356, 367],
data: orderPutData.value,
barWidth: 3
},
{
@ -421,7 +490,7 @@ const initOrderChart = () => {
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 152, 103, 150],
data: orderOutData.value,
showBackground: true,
barWidth: 3,
backgroundStyle: {
@ -430,12 +499,34 @@ const initOrderChart = () => {
}
]
};
option && myMachineryChart.setOption(option);
option && myOrderChart.value.setOption(option);
};
onMounted(() => {
// 防抖函数
const debounce = <T,>(func: (this: T, ...args: any[]) => void, delay: number) => {
let timer: ReturnType<typeof setTimeout> | null = null;
return function (this: T, ...args: any[]) {
const context = this;
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
func.apply(context, args);
}, delay);
};
};
// 窗口大小变化时触发的函数
const handleResize = () => {
myMachineryChart.value && myMachineryChart.value.dispose();
myOrderChart.value && myOrderChart.value.dispose();
initMachinerycharts();
initOrderChart();
};
const debouncedHandleResize = debounce(handleResize, 300);
onMounted(() => {
getOrderData();
getConstructionUserData();
getMachineryData();
window.addEventListener('resize', debouncedHandleResize); //监听窗口变化重新生成echarts
});
</script>