|
@@ -113,13 +113,17 @@
|
|
|
<el-row :gutter="16" class="mb-4">
|
|
|
<el-col :span="8">
|
|
|
<div class="flex flex-col justify-between">
|
|
|
- <el-card class="chart-card" shadow="never">
|
|
|
+ <el-card class="safety-days-card chart-card" shadow="never">
|
|
|
<template #header>
|
|
|
<div class="flex items-center">
|
|
|
- <span class="text-base font-medium text-gray-600">修井完成情况</span>
|
|
|
+ <span class="text-base font-medium text-gray-600">安全生产天数</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <div ref="repairWellChartRef" class="h-[150px]"></div>
|
|
|
+ <div class="safety-days-content">
|
|
|
+ <div class="days-number">{{ 165 }}</div>
|
|
|
+ <div class="days-label">天</div>
|
|
|
+ <div class="safety-desc">截至当前连续安全生产天数</div>
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
<el-card class="chart-card mt-1" shadow="never">
|
|
|
<template #header>
|
|
@@ -283,7 +287,7 @@ const repairWellData = ref({
|
|
|
const drillingWellData = ref({
|
|
|
xAxis: ['50010队', '四川宝石带压作业队'],
|
|
|
series: [
|
|
|
- { name: '日累完成井数', data: [5, 8] },
|
|
|
+ // { name: '日累完成井数', data: [5, 8] },
|
|
|
{ name: '月累完成井数', data: [40, 30] },
|
|
|
{ name: '年累完成井数', data: [180,150 ] }
|
|
|
]
|
|
@@ -301,9 +305,9 @@ const drillingWorkloadData = ref({
|
|
|
const repairWorkloadData = ref({
|
|
|
xAxis: ['SCP项目部', '伊拉克项目部', '陕西项目部'],
|
|
|
series: [
|
|
|
- { name: '日累进尺', data: [120,80, 160] },
|
|
|
- { name: '月累进尺', data: [1300,800, 1000] },
|
|
|
- { name: '年累进尺', data: [4000, 5000, 7000] }
|
|
|
+ // { name: '日累进尺', data: [120,80, 160] },
|
|
|
+ { name: '月完井数', data: [1300,800, 1000] },
|
|
|
+ { name: '年完井数', data: [4000, 5000, 7000] }
|
|
|
]
|
|
|
})
|
|
|
const repairWellChartRef = ref()
|
|
@@ -1023,4 +1027,42 @@ onBeforeUnmount(() => {
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.safety-days-card {
|
|
|
+ .safety-days-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 150px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .days-number {
|
|
|
+ font-size: 58px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1677ff;
|
|
|
+ line-height: 1;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .days-number:hover {
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .days-label {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #666;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .safety-desc {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ text-align: center;
|
|
|
+ width: 90%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|