|
@@ -8,14 +8,15 @@
|
|
|
<div class="sTitleSty" style="letter-spacing: 2px;">{{utem.name}}</div>
|
|
|
<line-chart :name="utem.className" :data="utem" height="calc(30vh - 65px)"/>
|
|
|
</div>
|
|
|
- <div style="width: 30%;padding: 0 2%;">
|
|
|
- <el-form ref="oilsFormRef" :model="oilsForm" label-width="0px">
|
|
|
+ <div style="width: 30%;padding: 0 2% 0 4%;">
|
|
|
+ <el-form ref="unitsFormRef" :model="unitForm" label-width="0px">
|
|
|
<el-form-item style="margin-bottom: 0px;">
|
|
|
<div>开始时间:</div>
|
|
|
<el-date-picker
|
|
|
- v-model="oilsForm.startTime"
|
|
|
+ v-model="unitForm[undex].startTime"
|
|
|
type="date"
|
|
|
size="small"
|
|
|
+ class="dateSelet"
|
|
|
style="width: 100%;"
|
|
|
placeholder="开始日期">
|
|
|
</el-date-picker>
|
|
@@ -23,9 +24,10 @@
|
|
|
<el-form-item style="margin-bottom: 8px;">
|
|
|
<div>结束时间:</div>
|
|
|
<el-date-picker
|
|
|
- v-model="oilsForm.endTime"
|
|
|
+ v-model="unitForm[undex].endTime"
|
|
|
type="date"
|
|
|
size="small"
|
|
|
+ class="dateSelet"
|
|
|
style="width: 100%;"
|
|
|
placeholder="结束日期">
|
|
|
</el-date-picker>
|
|
@@ -46,14 +48,15 @@
|
|
|
<div class="sTitleSty" style="letter-spacing: 2px;">{{stem.name}}</div>
|
|
|
<line-chart :name="stem.className" :data="stem" height="calc(30vh - 65px)"/>
|
|
|
</div>
|
|
|
- <div style="width: 30%;padding: 0 2%;">
|
|
|
- <el-form ref="oilsFormRef" :model="oilsForm" label-width="0px">
|
|
|
+ <div style="width: 30%;padding: 0 2% 0 4%;">
|
|
|
+ <el-form ref="timesFormRef" :model="timeForm" label-width="0px">
|
|
|
<el-form-item style="margin-bottom: 0px;">
|
|
|
<div>开始时间:</div>
|
|
|
<el-date-picker
|
|
|
- v-model="oilsForm.startTime"
|
|
|
+ v-model="timeForm[sndex].startTime"
|
|
|
type="date"
|
|
|
size="small"
|
|
|
+ class="dateSelet"
|
|
|
style="width: 100%;"
|
|
|
placeholder="开始日期">
|
|
|
</el-date-picker>
|
|
@@ -61,9 +64,10 @@
|
|
|
<el-form-item style="margin-bottom: 8px;">
|
|
|
<div>结束时间:</div>
|
|
|
<el-date-picker
|
|
|
- v-model="oilsForm.endTime"
|
|
|
+ v-model="timeForm[sndex].endTime"
|
|
|
type="date"
|
|
|
size="small"
|
|
|
+ class="dateSelet"
|
|
|
style="width: 100%;"
|
|
|
placeholder="结束日期">
|
|
|
</el-date-picker>
|
|
@@ -81,39 +85,65 @@
|
|
|
<el-row :gutter="30">
|
|
|
<template v-for="(item,index) in linesData" :key="index">
|
|
|
<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
|
|
|
- <div style="position: relative;">
|
|
|
+ <div style="position: relative;padding: 0 3% 0 1%;">
|
|
|
<div class="sTitleSty" style="letter-spacing: 2px;">{{item.name}}</div>
|
|
|
<line-chart :name="item.className" :data="item" height="calc(40vh - 116px)"/>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <el-form ref="oilsFormRef" class="flex justify-center" :model="oilsForm" label-width="100px">
|
|
|
- <el-form-item style="margin-bottom: 0;" label="航次消耗对比:" v-if="index == 0">
|
|
|
- <el-select v-model="oilsForm.equipId" placeholder="请选择" size="small" style="width: 100%;">
|
|
|
+ <el-form v-if="index == 0" ref="voyageFormRef" class="flex justify-center" :model="voyageForm" label-width="100px">
|
|
|
+ <el-form-item style="margin-bottom: 0;" label="航次消耗对比:">
|
|
|
+ <el-select v-model="voyageForm.voyageId" placeholder="请选择" size="small" style="width: 100%;">
|
|
|
<el-option
|
|
|
- v-for="item in timeUnitOptions"
|
|
|
+ v-for="item in voyageOptions"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item style="margin-bottom: 0;" label="查询方式:" v-if="index != 0">
|
|
|
- <el-select v-model="oilsForm.equipId" placeholder="请选择" size="small" style="width: 100%;">
|
|
|
+ </el-form>
|
|
|
+ <el-form v-if="index == 1" ref="cotwoFormRef" class="flex justify-center" :model="cotwoForm" label-width="100px">
|
|
|
+ <el-form-item style="margin-bottom: 0;" label="查询方式:">
|
|
|
+ <el-select v-model="cotwoForm.cotwoId" placeholder="请选择" size="small" style="width: 100%;">
|
|
|
<el-option
|
|
|
- v-for="item in timeUnitOptions"
|
|
|
+ v-for="item in cotwoOptions"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="时间:" style="margin-bottom: 0px;" v-if="index != 0">
|
|
|
+ <el-form-item label="时间:" style="margin-bottom: 0px;">
|
|
|
<div></div>
|
|
|
<el-date-picker
|
|
|
- v-model="oilsForm.startTime"
|
|
|
+ v-model="cotwoForm.startEndTime"
|
|
|
type="daterange"
|
|
|
size="small"
|
|
|
- style="width: 50%;"
|
|
|
+ style="width: 50%;box-shadow: 0 0 7px 2px #dcdcdc;"
|
|
|
+ range-separator=" ~ "
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-form v-if="index == 2" ref="eeofFormRef" class="flex justify-center" :model="eeofForm" label-width="100px">
|
|
|
+ <el-form-item style="margin-bottom: 0;" label="查询方式:">
|
|
|
+ <el-select v-model="eeofForm.eeofId" placeholder="请选择" size="small" style="width: 100%;">
|
|
|
+ <el-option
|
|
|
+ v-for="item in eeofOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="时间:" style="margin-bottom: 0px;">
|
|
|
+ <div></div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="eeofForm.startEndTime"
|
|
|
+ type="daterange"
|
|
|
+ size="small"
|
|
|
+ style="width: 50%;box-shadow: 0 0 7px 2px #dcdcdc;"
|
|
|
range-separator=" ~ "
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期">
|
|
@@ -131,7 +161,10 @@
|
|
|
|
|
|
<script setup>
|
|
|
import lineChart from "@/components/Echarts/LineChart";
|
|
|
- const timeUnitOptions = ref([]);
|
|
|
+ const voyageOptions = ref([]);
|
|
|
+ const eeofOptions = ref([]);
|
|
|
+ const cotwoOptions = ref([]);
|
|
|
+
|
|
|
const data = reactive({
|
|
|
unitConsData: [{
|
|
|
name: "单位航行距离燃油消耗量",
|
|
@@ -307,13 +340,43 @@
|
|
|
data: [10, 14, 18, 19, 13, 10, 18, 19, 13, 10]
|
|
|
}]
|
|
|
}],
|
|
|
- oilsForm: {
|
|
|
- timeUnit: null,
|
|
|
- startTime: null,
|
|
|
- endTime: null
|
|
|
- }
|
|
|
+ voyageForm: {},
|
|
|
+ eeofForm: {},
|
|
|
+ cotwoForm: {},
|
|
|
+ unitForm: [{}, {}],
|
|
|
+ timeForm: [{}, {}]
|
|
|
});
|
|
|
- const { linesData, oilsForm, timeConsData, unitConsData } = toRefs(data);
|
|
|
+ const { linesData, voyageForm, eeofForm, cotwoForm, unitForm, timeForm, timeConsData, unitConsData } = toRefs(data);
|
|
|
+ const getOptions = function(){
|
|
|
+ voyageOptions.value = [{
|
|
|
+ label: "青岛-大连",
|
|
|
+ value: 0
|
|
|
+ },{
|
|
|
+ label: "大连-福州",
|
|
|
+ value: 1
|
|
|
+ },{
|
|
|
+ label: "福州-广州",
|
|
|
+ value: 2
|
|
|
+ },{
|
|
|
+ label: "上海-广州",
|
|
|
+ value: 3
|
|
|
+ }];
|
|
|
+ eeofOptions.value = [{
|
|
|
+ label: "时间",
|
|
|
+ value: 0
|
|
|
+ },{
|
|
|
+ label: "航次",
|
|
|
+ value: 1
|
|
|
+ }];
|
|
|
+ cotwoOptions.value = [{
|
|
|
+ label: "时间",
|
|
|
+ value: 0
|
|
|
+ },{
|
|
|
+ label: "航次",
|
|
|
+ value: 1
|
|
|
+ }];
|
|
|
+ }
|
|
|
+ getOptions();
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
@@ -324,4 +387,7 @@
|
|
|
.sTitleSty{
|
|
|
font-size: 0.8rem;
|
|
|
}
|
|
|
+ ::v-deep .dateSelet .el-input__wrapper{
|
|
|
+ box-shadow: 0 0 7px 2px #dcdcdc;
|
|
|
+ }
|
|
|
</style>
|