|
|
@@ -88,14 +88,72 @@
|
|
|
<div ref="statusChartRef" class="h-[320px]"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
- <el-col :span="7">
|
|
|
+ <el-col :span="10">
|
|
|
<el-card class="chart-card" shadow="never">
|
|
|
<template #header>
|
|
|
- <div class="flex items-center">
|
|
|
- <span class="text-base font-medium" style="color: #b6c8da">{{t('stat.projectDevice')}}</span>
|
|
|
+ <div style="display: flex; flex-direction: row; justify-content: space-between">
|
|
|
+ <span class="text-base font-medium" style="color: #b6c8da">{{t('stat.deviceRate')}}</span>
|
|
|
+ <div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="rateQueryParams.createTime"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ type="daterange"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
|
|
+ class="!w-220px"
|
|
|
+ @change="handleDateChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <div ref="topContainer" class="h-[320px]"></div>
|
|
|
+<!-- <div ref="topContainer" class="h-[320px]"></div>-->
|
|
|
+ <div class="table-container">
|
|
|
+ <el-table
|
|
|
+ class="custom-table"
|
|
|
+ :data="materialTableData"
|
|
|
+ border
|
|
|
+ @row-click="handleRowClick"
|
|
|
+ style="width: 100%; color: #4c4c4c;"
|
|
|
+ :header-cell-style="{
|
|
|
+ 'background-color': '#2196df',
|
|
|
+ 'color': 'white',
|
|
|
+ 'border-color': '#457794'
|
|
|
+ }"
|
|
|
+ :cell-style="{
|
|
|
+ 'border-color': '#457794',
|
|
|
+ 'background-color': '#284D72',
|
|
|
+ 'color':'#F1D209'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="projectDeptName"
|
|
|
+ label="项目部"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="teamCount"
|
|
|
+ label="队伍数量"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="cumulativeDays"
|
|
|
+ label="累计天数"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="constructionDays"
|
|
|
+ label="施工天数"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="utilizationRate"
|
|
|
+ label="设备利用率"
|
|
|
+ align="center"
|
|
|
+ :formatter="formatRate"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<!-- <el-col :span="7">-->
|
|
|
@@ -108,7 +166,7 @@
|
|
|
<!-- <div ref="topContainer" class="h-[320px]"></div>-->
|
|
|
<!-- </el-card>-->
|
|
|
<!-- </el-col>-->
|
|
|
- <el-col :span="11">
|
|
|
+ <el-col :span="8">
|
|
|
<el-card class="chart-card" shadow="never">
|
|
|
<template #header>
|
|
|
<div class="flex items-center justify-between">
|
|
|
@@ -168,6 +226,53 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ v-model="teamDialogVisible"
|
|
|
+ :title="t('stat.teamDetail')"
|
|
|
+ width="80vh"
|
|
|
+ :before-close="handleDialogClose"
|
|
|
+ class="custom-scroll-dialog"
|
|
|
+ >
|
|
|
+ <div class="dialog-scroll-content">
|
|
|
+ <el-table
|
|
|
+ :data="teamTableData"
|
|
|
+ border
|
|
|
+ style="width: 100%;"
|
|
|
+ :header-cell-style="{
|
|
|
+ 'background-color': 'rgba(0, 0, 0, 0.2)',
|
|
|
+ 'color': 'black',
|
|
|
+ 'border-color': '#457794'
|
|
|
+ }"
|
|
|
+ :cell-style="{
|
|
|
+ 'border-color': '#457794',
|
|
|
+ 'background-color': 'transparent'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="teamName"
|
|
|
+ label="队伍名称"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="cumulativeDays"
|
|
|
+ label="累计天数"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="constructionDays"
|
|
|
+ label="施工天数"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="utilizationRate"
|
|
|
+ label="设备利用率"
|
|
|
+ align="center"
|
|
|
+ :formatter="formatRate"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="Index">
|
|
|
@@ -209,6 +314,45 @@ echarts.use([
|
|
|
BarChart
|
|
|
])
|
|
|
const { t } = useI18n() // 国际化
|
|
|
+const teamDialogVisible = ref(false)
|
|
|
+const teamTableData = ref([])
|
|
|
+const currentDeptId = ref('')
|
|
|
+const currentDateRange = ref([])
|
|
|
+const materialTableData = ref([])
|
|
|
+const handleDateChange = () => {
|
|
|
+ IotStatApi.getRyRate(rateQueryParams).then((res) =>{
|
|
|
+ materialTableData.value = res
|
|
|
+ })
|
|
|
+}
|
|
|
+const rateQueryParams = reactive({
|
|
|
+ createTime: [],
|
|
|
+})
|
|
|
+const handleDialogClose = () => {
|
|
|
+ teamDialogVisible.value = false
|
|
|
+ teamTableData.value = [] // 清空表格数据
|
|
|
+}
|
|
|
+// 格式化利用率为百分比
|
|
|
+const formatRate = (row) => {
|
|
|
+ return (row.utilizationRate * 100).toFixed(2) + '%'
|
|
|
+}
|
|
|
+const handleRowClick = (row, column, event) => {
|
|
|
+ console.log('点击的行数据：', row);
|
|
|
+ currentDeptId.value = row.deptId // 假设行数据中包含deptId字段
|
|
|
+ currentDateRange.value = rateQueryParams.createTime
|
|
|
+
|
|
|
+ // 打开弹窗并加载队伍详情数据
|
|
|
+ teamDialogVisible.value = true
|
|
|
+ // fetchTeamDetailData(row.deptId, rateQueryParams.createTime)
|
|
|
+ debugger
|
|
|
+ const teamParams = {
|
|
|
+ deptId: row.projectDeptId,
|
|
|
+ createTime: rateQueryParams.createTime
|
|
|
+ }
|
|
|
+ IotStatApi.getRyTeamRate(teamParams).then(res => {
|
|
|
+ teamTableData.value = res
|
|
|
+ })
|
|
|
+
|
|
|
+};
|
|
|
const dateRange = ref<[Date, Date] | null>(null)
|
|
|
const by = ref({
|
|
|
todo: undefined,
|
|
|
@@ -343,15 +487,16 @@ const getStats = () => {
|
|
|
|
|
|
IotStatApi.getRepairRigWork('repair').then((res) => {
|
|
|
repairWorkloadData.value = res
|
|
|
- initRepairWorkloadChart();
|
|
|
+ initRepairWorkloadChart(res);
|
|
|
})
|
|
|
IotStatApi.getRepairRigWork('rig').then((res) => {
|
|
|
drillingWorkloadData.value = res
|
|
|
- initDrillingWorkloadChart();
|
|
|
+ initDrillingWorkloadChart(res);
|
|
|
})
|
|
|
IotStatApi.getRigFinished().then((res) => {
|
|
|
+ debugger
|
|
|
drillingWellData.value = res
|
|
|
- initDrillingWellChart();
|
|
|
+ initDrillingWellChart(res);
|
|
|
})
|
|
|
const fillQueryParams = reactive({
|
|
|
startTime: Date.now() - 7 * 24 * 60 * 60 * 1000, // 设置默认开始时间为 7 天前
|
|
|
@@ -367,13 +512,35 @@ const getStats = () => {
|
|
|
IotStatApi.getDeptStatistics(fillQueryParams).then((res) => {
|
|
|
fill.value = res.totalList[0] || []
|
|
|
})
|
|
|
- IotStatApi.getProject('ry').then((res) => {
|
|
|
- typeData.value = res;
|
|
|
- initProjectCharts()
|
|
|
+ // IotStatApi.getProject('ry').then((res) => {
|
|
|
+ // typeData.value = res;
|
|
|
+ // initProjectCharts()
|
|
|
+ // })
|
|
|
+
|
|
|
+ // 计算近一周时间
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 7 * 24 * 60 * 60 * 1000);
|
|
|
+
|
|
|
+ // 格式化日期为后端需要的格式
|
|
|
+ const formatDate = (date) => {
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
|
+ const day = String(date.getDate()).padStart(2, '0');
|
|
|
+ const hours = String(date.getHours()).padStart(2, '0');
|
|
|
+ const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
|
+ const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
|
+ return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
+ };
|
|
|
+
|
|
|
+ rateQueryParams.createTime = [formatDate(start), formatDate(end)];
|
|
|
+ IotStatApi.getRyRate(rateQueryParams).then((res) =>{
|
|
|
+ materialTableData.value = res
|
|
|
})
|
|
|
+
|
|
|
}
|
|
|
|
|
|
-const initDrillingWorkloadChart = () => {
|
|
|
+const initDrillingWorkloadChart = (res) => {
|
|
|
if (!drillingWorkloadChartRef.value) return
|
|
|
const chart = echarts.init(drillingWorkloadChartRef.value)
|
|
|
const option = {
|
|
|
@@ -384,7 +551,7 @@ const initDrillingWorkloadChart = () => {
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
- data: drillingWorkloadData.value.series.map((item) => item.name),
|
|
|
+ data: res.series.map((item) => item.name),
|
|
|
textStyle: {
|
|
|
color: '#B6C8DA'
|
|
|
}
|
|
|
@@ -397,7 +564,7 @@ const initDrillingWorkloadChart = () => {
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- data: drillingWorkloadData.value.xAxis,
|
|
|
+ data: res.xAxis,
|
|
|
axisLabel: {
|
|
|
color: '#B6C8DA'
|
|
|
},
|
|
|
@@ -428,7 +595,7 @@ const initDrillingWorkloadChart = () => {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- series: drillingWorkloadData.value.series.map((item) => ({
|
|
|
+ series: res.series.map((item) => ({
|
|
|
name: item.name,
|
|
|
type: 'bar',
|
|
|
data: item.data
|
|
|
@@ -438,7 +605,7 @@ const initDrillingWorkloadChart = () => {
|
|
|
}
|
|
|
|
|
|
// 新增：初始化修井工作量情况图表
|
|
|
-const initRepairWorkloadChart = () => {
|
|
|
+const initRepairWorkloadChart = (res) => {
|
|
|
if (!repairWorkloadChartRef.value) return
|
|
|
const chart = echarts.init(repairWorkloadChartRef.value)
|
|
|
const option = {
|
|
|
@@ -449,7 +616,7 @@ const initRepairWorkloadChart = () => {
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
- data: repairWorkloadData.value.series.map((item) => item.name),
|
|
|
+ data: res.series.map((item) => item.name),
|
|
|
textStyle: {
|
|
|
color: '#B6C8DA'
|
|
|
}
|
|
|
@@ -462,7 +629,7 @@ const initRepairWorkloadChart = () => {
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- data: repairWorkloadData.value.xAxis,
|
|
|
+ data: res.xAxis,
|
|
|
axisLabel: {
|
|
|
color: '#B6C8DA'
|
|
|
},
|
|
|
@@ -493,7 +660,7 @@ const initRepairWorkloadChart = () => {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- series: repairWorkloadData.value.series.map((item) => ({
|
|
|
+ series: res.series.map((item) => ({
|
|
|
name: item.name,
|
|
|
type: 'bar',
|
|
|
data: item.data
|
|
|
@@ -998,7 +1165,7 @@ const initRepairWellChart = () => {
|
|
|
}
|
|
|
|
|
|
// 新增：初始化钻井完成情况图表
|
|
|
-const initDrillingWellChart = () => {
|
|
|
+const initDrillingWellChart = (res) => {
|
|
|
if (!drillingWellChartRef.value) return
|
|
|
const option = {
|
|
|
tooltip: {
|
|
|
@@ -1008,7 +1175,7 @@ const initDrillingWellChart = () => {
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
- data: drillingWellData.value.series.map((item) => item.name),
|
|
|
+ data: res.series.map((item) => item.name),
|
|
|
top: 10,
|
|
|
textStyle: {
|
|
|
color: '#B6C8DA'
|
|
|
@@ -1022,7 +1189,7 @@ const initDrillingWellChart = () => {
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- data: drillingWellData.value.xAxis,
|
|
|
+ data: res.xAxis,
|
|
|
axisLabel: {
|
|
|
color: '#B6C8DA',
|
|
|
formatter: (value) => value.split('-').join('/') // 显示为 2023/01
|
|
|
@@ -1055,7 +1222,7 @@ const initDrillingWellChart = () => {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- series: drillingWellData.value.series.map((item) => ({
|
|
|
+ series: res.series.map((item) => ({
|
|
|
name: item.name,
|
|
|
type: 'bar',
|
|
|
data: item.data
|
|
|
@@ -1077,9 +1244,9 @@ onMounted(() => {
|
|
|
// fetchTop()
|
|
|
window.addEventListener('resize', () => topInstance?.resize())
|
|
|
initRepairWellChart()
|
|
|
- initDrillingWellChart()
|
|
|
- initDrillingWorkloadChart()
|
|
|
- initRepairWorkloadChart()
|
|
|
+ // initDrillingWellChart()
|
|
|
+ //initDrillingWorkloadChart()
|
|
|
+ //initRepairWorkloadChart()
|
|
|
})
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
@@ -1170,4 +1337,58 @@ onBeforeUnmount(() => {
|
|
|
border-bottom: none !important;
|
|
|
padding-bottom: 0;
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+.table-container {
|
|
|
+ padding: 16px;
|
|
|
+ height: 320px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ // 滚动条样式优化
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ background-color: rgba(255, 255, 255, 0.2);
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 修复表格hover样式
|
|
|
+::v-deep .el-table__row:hover > td {
|
|
|
+ background-color: rgba(255, 255, 255, 0.05) !important;
|
|
|
+}
|
|
|
+.custom-scroll-dialog {
|
|
|
+ /* 可选：限制对话框整体最大高度（避免超出屏幕） */
|
|
|
+ max-height: 90vh;
|
|
|
+ overflow: hidden; /* 隐藏整体溢出，避免出现双重滚动条 */
|
|
|
+}
|
|
|
+/* 滚动内容容器：核心样式 */
|
|
|
+.dialog-scroll-content {
|
|
|
+ max-height: 60vh; /* 固定最大高度（可根据需求调整，如500px） */
|
|
|
+ overflow-y: auto; /* 垂直方向溢出时显示滚动条 */
|
|
|
+ padding-right: 8px; /* 避免滚动条遮挡内容（可选） */
|
|
|
+}
|
|
|
+
|
|
|
+/* 优化滚动条样式（可选，提升UI体验） */
|
|
|
+.dialog-scroll-content::-webkit-scrollbar {
|
|
|
+ width: 6px; /* 滚动条宽度 */
|
|
|
+}
|
|
|
+.dialog-scroll-content::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #e5e7eb; /* 滚动条滑块颜色 */
|
|
|
+ border-radius: 3px; /* 滚动条圆角 */
|
|
|
+}
|
|
|
+.dialog-scroll-content::-webkit-scrollbar-thumb:hover {
|
|
|
+ background-color: #d1d5db; /* hover时滑块颜色 */
|
|
|
+}
|
|
|
+.custom-table :deep .el-table__row {
|
|
|
+ height: 45px !important; /* 高度根据需求调整 */
|
|
|
+}
|
|
|
</style>
|
