单项页面加条件

This commit is contained in:
2026-04-30 14:21:25 +08:00
parent c1acba7196
commit 31f23d1d77
8 changed files with 67 additions and 75 deletions

View File

@@ -91,7 +91,7 @@ export default {
totalData: {}, totalData: {},
trend: [], trend: [],
relatedData: {}, relatedData: {},
trendName: '采购单价', trendName: '成本',
meterialName:'', meterialName:'',
materialOptions: [ materialOptions: [
{value:'氢氧化铝',label:'氢氧化铝'}, {value:'氢氧化铝',label:'氢氧化铝'},

View File

@@ -38,7 +38,6 @@
gap: 12px; gap: 12px;
grid-template-columns: 1624px; grid-template-columns: 1624px;
"> ">
<!-- <monthlyRelatedMetrics :itemData="renderList" :title="'月度·相关指标分析'" /> -->
<relateSingleFuelCostAnalysis :fuelName='fuelName' :relatedData="relatedData" :title="'相关指标分析'" /> <relateSingleFuelCostAnalysis :fuelName='fuelName' :relatedData="relatedData" :title="'相关指标分析'" />
</div> </div>
@@ -53,14 +52,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="centerImg" style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* 确保在 backp 之上、内容之下 */
"></div> -->
</div> </div>
</template> </template>
<script> <script>
@@ -70,21 +61,11 @@ import screenfull from "screenfull";
import changeBase from "../components/changeBase.vue"; import changeBase from "../components/changeBase.vue";
import monthlyOverview from "../productionCostAnalysisComponents/monthlyOverview.vue"; import monthlyOverview from "../productionCostAnalysisComponents/monthlyOverview.vue";
import totalOverview from "../productionCostAnalysisComponents/totalOverview.vue"; import totalOverview from "../productionCostAnalysisComponents/totalOverview.vue";
// import totalOverview from "../operatingComponents/totalOverview.vue";
// import monthlyRelatedMetrics from "../procurementGainAnalysisComponents/monthlyRelatedMetrics.vue";
import relateSingleFuelCostAnalysis from "../productionCostAnalysisComponents/relateSingleCombustible.vue"; import relateSingleFuelCostAnalysis from "../productionCostAnalysisComponents/relateSingleCombustible.vue";
import dataTrend from "../productionCostAnalysisComponents/dataTrendSingleCombustible.vue"; import dataTrend from "../productionCostAnalysisComponents/dataTrendSingleCombustible.vue";
import { mapState } from "vuex"; import { mapState } from "vuex";
import { getSingleMaterialAnalysis } from '@/api/cockpit' import { getSingleMaterialAnalysis } from '@/api/cockpit'
// import PSDO from "./components/PSDO.vue";
// import psiLineChart from "./components/psiLineChart.vue";
// import coreBottomLeft from "./components/coreBottomLeft.vue";
// import orderProgress from "./components/orderProgress.vue";
// import keyWork from "./components/keyWork.vue";
import moment from "moment"; import moment from "moment";
// import html2canvas from 'html2canvas'
// import JsPDF from 'jspdf'
export default { export default {
name: "DayReport", name: "DayReport",
components: { components: {
@@ -95,7 +76,6 @@ export default {
totalOverview, totalOverview,
relateSingleFuelCostAnalysis, relateSingleFuelCostAnalysis,
dataTrend dataTrend
// psiLineChart
}, },
data() { data() {
return { return {
@@ -110,7 +90,7 @@ export default {
totalData: {}, totalData: {},
trend: [], trend: [],
relatedData: {}, relatedData: {},
trendName: '采购单价', trendName: '成本',
fuelName:'', fuelName:'',
fuelOptions: [ fuelOptions: [
{value:'天然气',label:'天然气'}, {value:'天然气',label:'天然气'},

View File

@@ -90,7 +90,7 @@ export default {
totalData: {}, totalData: {},
trend: [], trend: [],
relatedData: {}, relatedData: {},
trendName: '采购单价', trendName: '成本',
auxMatName:'', auxMatName:'',
auxMatOptions: [ auxMatOptions: [
{value:'镀膜液',label:'镀膜液'}, {value:'镀膜液',label:'镀膜液'},

View File

@@ -90,7 +90,7 @@ export default {
totalData: {}, totalData: {},
trend: [], trend: [],
relatedData: {}, relatedData: {},
trendName: '加工电成本', trendName: '成本',
fuelName:'', fuelName:'',
fuelOptions: [ fuelOptions: [
{value:'电',label:'电'}, {value:'电',label:'电'},
@@ -227,7 +227,6 @@ export default {
}, },
handleFuelChange(val) { handleFuelChange(val) {
this.fuelName = val this.fuelName = val
if(this.fuelName === '水' && this.trendName === '加工电成本') return
this.getData() this.getData()
}, },
selectChange(data) { selectChange(data) {

View File

@@ -29,13 +29,13 @@
</div> </div>
<div class="dropdown-container"> <div class="dropdown-container">
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow"> <div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
<span class="item-text profit-text">{{ selectedProfit || '请选择' }}</span> <span class="item-text profit-text">{{ selectedProfitLabel || '请选择' }}</span>
<span class="dropdown-arrow" :class="{ 'rotate': isDropdownShow }"></span> <span class="dropdown-arrow" :class="{ 'rotate': isDropdownShow }"></span>
</div> </div>
<div class="dropdown-options" v-if="isDropdownShow"> <div class="dropdown-options" v-if="isDropdownShow">
<div class="dropdown-option" v-for="(item, index) in profitOptions" :key="index" <div class="dropdown-option" v-for="(item, index) in profitOptions" :key="index"
@click.stop="selectProfit(item)"> @click.stop="selectProfit(item)">
{{ item.name }} {{ item.label }}
</div> </div>
</div> </div>
</div> </div>
@@ -60,8 +60,9 @@ export default {
data() { data() {
return { return {
isDropdownShow: false, isDropdownShow: false,
selectedProfit: '采购单价', selectedProfit: '成本',
unit:'元/m³' selectedProfitLabel:'单项燃动力成本',
unit:'元/㎡'
}; };
}, },
watch: { watch: {
@@ -89,26 +90,29 @@ export default {
profitOptions() { profitOptions() {
if (this.fuelName === '重油') { if (this.fuelName === '重油') {
return [ return [
{ name: '采购单价', unit: '元/'}, {label:'单项燃动力成本', name: '成本', unit: '元/'},
{ name: '产量', unit: ''}, {label:'采购单价', name: '采购单价', unit: '元/吨'},
{ name: '单耗', unit: '千克/㎡'}, {label:'产量', name: '产量', unit: '㎡'},
{ name: '消耗量', unit: ''}, {label:'单耗', name: '单耗', unit: '千克/㎡'},
{ name: '热耗', unit: '千卡/千克'} {label:'消耗量', name: '消耗量', unit: ''},
{label:'热耗', name: '热耗', unit: '千卡/千克'}
] ]
}else if(this.fuelName === '水'){ }else if(this.fuelName === '水'){
return [ return [
{ name: '采购单价', unit: '元/'}, {label:'单项燃动力成本', name: '成本', unit: '元/'},
{ name: '产量', unit: ''}, {label:'采购单价', name: '采购单价', unit: '元/m³'},
{ name: '单耗', unit: 'm³/㎡'}, {label:'产量', name: '产量', unit: '㎡'},
{ name: '消耗量', unit: 'm³'} {label:'单耗', name: '单耗', unit: 'm³/㎡'},
{label:'消耗量', name: '消耗量', unit: 'm³'}
] ]
}else{ }else{
return [ return [
{ name: '采购单价', unit: '元/'}, {label:'单项燃动力成本', name: '成本', unit: '元/'},
{ name: '产量', unit: ''}, {label:'采购单价', name: '采购单价', unit: '元/m³'},
{ name: '单耗', unit: 'm³/㎡'}, {label:'产量', name: '产量', unit: '㎡'},
{ name: '消耗量', unit: 'm³'}, {label:'单耗', name: '单耗', unit: 'm³/㎡'},
{ name: '热耗', unit: '千卡/千克'} {label:'消耗量', name: '消耗量', unit: ''},
{label:'热耗', name: '热耗', unit: '千卡/千克'}
] ]
} }
}, },
@@ -288,6 +292,7 @@ export default {
methods: { methods: {
selectProfit(item) { selectProfit(item) {
this.selectedProfit = item.name; this.selectedProfit = item.name;
this.selectedProfitLabel = item.label;
this.unit = item.unit; this.unit = item.unit;
this.isDropdownShow = false; this.isDropdownShow = false;
this.$emit('handleGetItemData', item.name) this.$emit('handleGetItemData', item.name)
@@ -445,7 +450,7 @@ export default {
} }
.profit-btn { .profit-btn {
width: 123px; width: 130px;
border-top-right-radius: 12px; border-top-right-radius: 12px;
border-bottom-right-radius: 12px; border-bottom-right-radius: 12px;
position: relative; position: relative;

View File

@@ -29,13 +29,13 @@
</div> </div>
<div class="dropdown-container"> <div class="dropdown-container">
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow"> <div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
<span class="item-text profit-text">{{ selectedProfit || '请选择' }}</span> <span class="item-text profit-text">{{ selectedProfitLabel || '请选择' }}</span>
<span class="dropdown-arrow" :class="{ 'rotate': isDropdownShow }"></span> <span class="dropdown-arrow" :class="{ 'rotate': isDropdownShow }"></span>
</div> </div>
<div class="dropdown-options" v-if="isDropdownShow"> <div class="dropdown-options" v-if="isDropdownShow">
<div class="dropdown-option" v-for="(item, index) in profitOptions" :key="index" <div class="dropdown-option" v-for="(item, index) in profitOptions" :key="index"
@click.stop="selectProfit(item)"> @click.stop="selectProfit(item)">
{{ item.name }} {{ item.label }}
</div> </div>
</div> </div>
</div> </div>
@@ -60,8 +60,9 @@ export default {
data() { data() {
return { return {
isDropdownShow: false, isDropdownShow: false,
selectedProfit: '', selectedProfit: '成本',
unit: '' selectedProfitLabel:'单项燃料成本',
unit: '元/㎡'
}; };
}, },
watch: { watch: {
@@ -89,19 +90,19 @@ export default {
profitOptions() { profitOptions() {
if (this.fuelName === '电') { if (this.fuelName === '电') {
return [ return [
// { name: '加工电成本', unit: '元/㎡' }, {label:'单项燃料成本', name: '成本', unit: '元/㎡' },
{ name: '采购单价', unit: '元/度' }, {label:'采购单价', name: '采购单价', unit: '元/度' },
{ name: '产量', unit: '㎡' }, {label:'产量', name: '产量', unit: '㎡' },
{ name: '单耗', unit: '度/㎡' }, {label:'单耗', name: '单耗', unit: '度/㎡' },
{ name: '消耗量', unit: '度' } {label:'消耗量', name: '消耗量', unit: '度' }
] ]
} else { } else {
return [ return [
// { name: '加工水成本', unit: '元/㎡' }, {label:'单项燃料成本', name: '成本', unit: '元/㎡' },
{ name: '采购单价', unit: '元/m³' }, {label:'采购单价', name: '采购单价', unit: '元/m³' },
{ name: '产量', unit: '㎡' }, {label:'产量', name: '产量', unit: '㎡' },
{ name: '单耗', unit: 'm³/㎡' }, {label:'单耗', name: '单耗', unit: 'm³/㎡' },
{ name: '消耗量', unit: 'm³' } {label:'消耗量', name: '消耗量', unit: 'm³' }
] ]
} }
}, },
@@ -281,6 +282,7 @@ export default {
methods: { methods: {
selectProfit(item) { selectProfit(item) {
this.selectedProfit = item.name; this.selectedProfit = item.name;
this.selectedProfitLabel = item.label;
this.unit = item.unit; this.unit = item.unit;
this.isDropdownShow = false; this.isDropdownShow = false;
this.$emit('handleGetItemData', item.name) this.$emit('handleGetItemData', item.name)

View File

@@ -29,13 +29,13 @@
</div> </div>
<div class="dropdown-container"> <div class="dropdown-container">
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow"> <div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
<span class="item-text profit-text">{{ selectedProfit || '请选择' }}</span> <span class="item-text profit-text">{{ selectedProfitLabel || '请选择' }}</span>
<span class="dropdown-arrow" :class="{ 'rotate': isDropdownShow }"></span> <span class="dropdown-arrow" :class="{ 'rotate': isDropdownShow }"></span>
</div> </div>
<div class="dropdown-options" v-if="isDropdownShow"> <div class="dropdown-options" v-if="isDropdownShow">
<div class="dropdown-option" v-for="(item, index) in profitOptions" :key="index" <div class="dropdown-option" v-for="(item, index) in profitOptions" :key="index"
@click.stop="selectProfit(item)"> @click.stop="selectProfit(item)">
{{ item.name }} {{ item.label }}
</div> </div>
</div> </div>
</div> </div>
@@ -60,13 +60,15 @@ export default {
data() { data() {
return { return {
isDropdownShow: false, isDropdownShow: false,
selectedProfit: '采购单价', // 选中的名称初始为null selectedProfit: '成本', // 选中的名称初始为null
unit:'元/千克', selectedProfitLabel:'单项辅料成本',
unit:'元/㎡',
profitOptions: [ profitOptions: [
{name:'采购单价',unit:'元/千克'}, {label:'单项辅料成本',name:'成本',unit:'元/'},
{name:'产量',unit:''}, {label:'采购单价',name:'采购单价',unit:'元/千克'},
{name:'单耗',unit:'千克/㎡'}, {label:'产量',name:'产量',unit:'㎡'},
{name:'消耗量',unit:'千克'} {label:'单耗',name:'单耗',unit:'千克/㎡'},
{label:'消耗量',name:'消耗量',unit:'千克'}
] ]
}; };
}, },
@@ -247,6 +249,7 @@ export default {
methods: { methods: {
selectProfit(item) { selectProfit(item) {
this.selectedProfit = item.name; this.selectedProfit = item.name;
this.selectedProfitLabel = item.label;
this.unit = item.unit; this.unit = item.unit;
this.isDropdownShow = false; this.isDropdownShow = false;
this.$emit('handleGetItemData', item.name) this.$emit('handleGetItemData', item.name)

View File

@@ -29,13 +29,13 @@
</div> </div>
<div class="dropdown-container"> <div class="dropdown-container">
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow"> <div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
<span class="item-text profit-text">{{ selectedProfit || '请选择' }}</span> <span class="item-text profit-text">{{ selectedProfitLabel || '请选择' }}</span>
<span class="dropdown-arrow" :class="{ 'rotate': isDropdownShow }"></span> <span class="dropdown-arrow" :class="{ 'rotate': isDropdownShow }"></span>
</div> </div>
<div class="dropdown-options" v-if="isDropdownShow"> <div class="dropdown-options" v-if="isDropdownShow">
<div class="dropdown-option" v-for="(item, index) in profitOptions" :key="index" <div class="dropdown-option" v-for="(item, index) in profitOptions" :key="index"
@click.stop="selectProfit(item)"> @click.stop="selectProfit(item)">
{{ item.name }} {{ item.label }}
</div> </div>
</div> </div>
</div> </div>
@@ -60,14 +60,16 @@ export default {
data() { data() {
return { return {
isDropdownShow: false, isDropdownShow: false,
selectedProfit: '采购单价', // 选中的名称初始为null selectedProfit: '成本', // 选中的名称初始为null
unit:'元/吨', selectedProfitLabel:'单项原料成本',
unit:'元/㎡',
profitOptions: [ profitOptions: [
{name:'采购单价',unit:'元/'}, {label:'单项原料成本',name:'成本',unit:'元/'},
{name:'产量',unit:''}, {label:'采购单价',name:'采购单价',unit:'元/吨'},
{name:'单耗',unit:'千克/㎡'}, {label:'产量',name:'产量',unit:'㎡'},
{name:'消耗量',unit:''}, {label:'单耗',name:'单耗',unit:'千克/㎡'},
{name:'日均消耗量',unit:'吨'} {label:'消耗量',name:'消耗量',unit:'吨'},
{label:'日均消耗量',name:'日均消耗量',unit:'吨'}
] ]
}; };
}, },
@@ -248,6 +250,7 @@ export default {
methods: { methods: {
selectProfit(item) { selectProfit(item) {
this.selectedProfit = item.name; this.selectedProfit = item.name;
this.selectedProfitLabel = item.label;
this.unit = item.unit; this.unit = item.unit;
this.isDropdownShow = false; this.isDropdownShow = false;
this.$emit('handleGetItemData', item.name) this.$emit('handleGetItemData', item.name)