|
@@ -0,0 +1,288 @@
|
|
|
+<template>
|
|
|
+ <el-row :gutter="14">
|
|
|
+ <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
|
|
+ <el-card class="box-card blueCard text-sm" :body-style="{ padding: '10px !important' }">
|
|
|
+ <div class="flex" :class="undex == 0?'margin-bottom':''"
|
|
|
+ v-for="(utem,undex) in unitConsData" :key="undex">
|
|
|
+ <div style="width: 70%;position: relative;">
|
|
|
+ <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%;" class="text-white">
|
|
|
+ <el-form ref="oilsFormRef" :model="oilsForm" label-width="0px">
|
|
|
+ <el-form-item style="margin-bottom: 0px;">
|
|
|
+ <div>开始时间:</div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="oilsForm.startTime"
|
|
|
+ type="date"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%;"
|
|
|
+ start-placeholder="开始日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="margin-bottom: 8px;">
|
|
|
+ <div>结束时间:</div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="oilsForm.endTime"
|
|
|
+ type="date"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%;"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="margin-bottom: 0;">
|
|
|
+ <el-button style="width: 100%;" type="primary" size="small">查询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
|
|
+ <el-card class="box-card blueCard text-sm" :body-style="{ padding: '10px !important' }">
|
|
|
+ <div class="flex" :class="sndex == 0?'margin-bottom':''"
|
|
|
+ v-for="(stem,sndex) in timeConsData" :key="sndex">
|
|
|
+ <div style="width: 70%;position: relative;">
|
|
|
+ <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%;" class="text-white">
|
|
|
+ <el-form ref="oilsFormRef" :model="oilsForm" label-width="0px">
|
|
|
+ <el-form-item style="margin-bottom: 0px;">
|
|
|
+ <div>开始时间:</div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="oilsForm.startTime"
|
|
|
+ type="date"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%;"
|
|
|
+ start-placeholder="开始日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="margin-bottom: 8px;">
|
|
|
+ <div>结束时间:</div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="oilsForm.endTime"
|
|
|
+ type="date"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%;"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="margin-bottom: 0;">
|
|
|
+ <el-button style="width: 100%;" type="primary" size="small">查询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" :xs="24">
|
|
|
+ <el-card class="box-card blueCard margin-top-sm" :body-style="{ padding: '10px !important' }">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <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 class="sTitleSty" style="letter-spacing: 2px;">{{item.name}}</div>
|
|
|
+ <line-chart :name="item.className" :data="item" height="calc(40vh - 88px)"/>
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ </el-col>
|
|
|
+ </template>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import lineChart from "@/components/Echarts/LineChart";
|
|
|
+ const timeUnitOptions = ref([]);
|
|
|
+ const data = reactive({
|
|
|
+ unitConsData: [{
|
|
|
+ name: "单位航行距离燃油消耗量",
|
|
|
+ className: "distanceCons",
|
|
|
+ xAxis: ["5月1日", "5月2日", "5月3日", "5月4日", "5月5日", "5月6日", "5月7日", "5月8日", "5月9日", "5月10日"],
|
|
|
+ data: [{
|
|
|
+ name: '主机',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ unit: "℃",
|
|
|
+ smooth: true,
|
|
|
+ data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4, 14.1, 16.1, 13.1, 16.4]
|
|
|
+ },{
|
|
|
+ name: '辅机',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ smooth: true,
|
|
|
+ data: [120, 104, 118, 119, 103, 106, 158, 129, 133, 140]
|
|
|
+ },{
|
|
|
+ name: '锅炉',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ smooth: true,
|
|
|
+ data: [10, 14, 18, 19, 13, 10, 18, 19, 13, 10]
|
|
|
+ }]
|
|
|
+ },{
|
|
|
+ name: "单位运输功燃油消耗量",
|
|
|
+ className: "transportCons",
|
|
|
+ xAxis: ["5月1日", "5月2日", "5月3日", "5月4日", "5月5日", "5月6日", "5月7日", "5月8日", "5月9日", "5月10日"],
|
|
|
+ data: [{
|
|
|
+ name: '主机',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ unit: "℃",
|
|
|
+ smooth: true,
|
|
|
+ data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4, 14.1, 16.1, 13.1, 16.4]
|
|
|
+ },{
|
|
|
+ name: '辅机',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ smooth: true,
|
|
|
+ data: [120, 104, 118, 119, 103, 106, 158, 129, 133, 140]
|
|
|
+ },{
|
|
|
+ name: '锅炉',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ smooth: true,
|
|
|
+ data: [10, 14, 18, 19, 13, 10, 18, 19, 13, 10]
|
|
|
+ }]
|
|
|
+ }],
|
|
|
+ timeConsData: [{
|
|
|
+ name: "燃油小时消耗量",
|
|
|
+ className: "hourCons",
|
|
|
+ xAxis: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
|
|
|
+ data: [{
|
|
|
+ name: '主机',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ unit: "℃",
|
|
|
+ smooth: true,
|
|
|
+ areaStyle: {},
|
|
|
+ data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4, 14.1, 16.1, 13.1, 16.4]
|
|
|
+ },{
|
|
|
+ name: '辅机',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ smooth: true,
|
|
|
+ areaStyle: {},
|
|
|
+ data: [120, 104, 118, 119, 103, 106, 158, 129, 133, 140]
|
|
|
+ },{
|
|
|
+ name: '锅炉',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ smooth: true,
|
|
|
+ areaStyle: {},
|
|
|
+ data: [10, 14, 18, 19, 13, 10, 18, 19, 13, 10]
|
|
|
+ }]
|
|
|
+ },{
|
|
|
+ name: "燃油日消耗量",
|
|
|
+ className: "dayCons",
|
|
|
+ xAxis: ["5月1日", "5月2日", "5月3日", "5月4日", "5月5日", "5月6日", "5月7日", "5月8日", "5月9日", "5月10日"],
|
|
|
+ data: [{
|
|
|
+ name: '主机',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ unit: "℃",
|
|
|
+ smooth: true,
|
|
|
+ data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4, 14.1, 16.1, 13.1, 16.4]
|
|
|
+ },{
|
|
|
+ name: '辅机',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ smooth: true,
|
|
|
+ data: [120, 104, 118, 119, 103, 106, 158, 129, 133, 140]
|
|
|
+ },{
|
|
|
+ name: '锅炉',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ smooth: true,
|
|
|
+ data: [10, 14, 18, 19, 13, 10, 18, 19, 13, 10]
|
|
|
+ }]
|
|
|
+ }],
|
|
|
+ linesData: [{
|
|
|
+ name: "燃油航次消耗量",
|
|
|
+ className: "VoyageCons",
|
|
|
+ xAxis: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
|
|
|
+ data: [{
|
|
|
+ name: '青岛-广州',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ unit: "℃",
|
|
|
+ smooth: true,
|
|
|
+ data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4, 14.1, 16.1, 13.1, 16.4]
|
|
|
+ },{
|
|
|
+ name: '上海-唐山',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ smooth: true,
|
|
|
+ data: [10, 14, 18, 19, 13, 10, 18, 19, 13, 10]
|
|
|
+ },{
|
|
|
+ name: '唐山-福州',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ smooth: true,
|
|
|
+ data: [120, 104, 118, 119, 103, 106, 158, 129, 133, 140]
|
|
|
+ }]
|
|
|
+ },{
|
|
|
+ name: "CO2排放指标",
|
|
|
+ className: "CoDischarge",
|
|
|
+ xAxis: ["5月1日", "5月2日", "5月3日", "5月4日", "5月5日", "5月6日", "5月7日", "5月8日", "5月9日", "5月10日"],
|
|
|
+ data: [{
|
|
|
+ name: '主机',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ unit: "℃",
|
|
|
+ smooth: true,
|
|
|
+ data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4, 14.1, 16.1, 13.1, 16.4]
|
|
|
+ },{
|
|
|
+ name: '辅机',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ smooth: true,
|
|
|
+ data: [120, 104, 118, 119, 103, 106, 158, 129, 133, 140]
|
|
|
+ },{
|
|
|
+ name: '锅炉',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ smooth: true,
|
|
|
+ data: [10, 14, 18, 19, 13, 10, 18, 19, 13, 10]
|
|
|
+ }]
|
|
|
+ },{
|
|
|
+ name: "EEOI排放指标",
|
|
|
+ className: "EeoioDischarge",
|
|
|
+ xAxis: ["5月1日", "5月2日", "5月3日", "5月4日", "5月5日", "5月6日", "5月7日", "5月8日", "5月9日", "5月10日"],
|
|
|
+ data: [{
|
|
|
+ name: '主机',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ unit: "℃",
|
|
|
+ smooth: true,
|
|
|
+ data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4, 14.1, 16.1, 13.1, 16.4]
|
|
|
+ },{
|
|
|
+ name: '辅机',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ smooth: true,
|
|
|
+ data: [120, 104, 118, 119, 103, 106, 158, 129, 133, 140]
|
|
|
+ },{
|
|
|
+ name: '锅炉',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ smooth: true,
|
|
|
+ data: [10, 14, 18, 19, 13, 10, 18, 19, 13, 10]
|
|
|
+ }]
|
|
|
+ }],
|
|
|
+ oilsForm: {
|
|
|
+ timeUnit: null,
|
|
|
+ startTime: null,
|
|
|
+ endTime: null
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const { linesData, oilsForm, timeConsData, unitConsData } = toRefs(data);
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .sTitleSty{
|
|
|
+ font-size: 0.8rem;
|
|
|
+ }
|
|
|
+</style>
|