产量和效率
This commit is contained in:
@@ -1,60 +1,47 @@
|
||||
<template>
|
||||
<div class="dashboard-factory-all">
|
||||
<div id="map-container">
|
||||
<div v-if="visible" class="cdLine"></div>
|
||||
<div v-if="visible" class="zzLine"></div>
|
||||
<div v-if="visible" class="rcLine"></div>
|
||||
<div v-if="visible" class="rcLineTwo"></div>
|
||||
<div v-if="visible" class="hdLine"></div>
|
||||
<div v-if="visible" class="ksLine"></div>
|
||||
<div v-if="visible" class="bbLine"></div>
|
||||
<div v-if="visible" class="bbLineTwo"></div>
|
||||
<div v-if="visible" class="bbLineThree"></div>
|
||||
<div class="databoard">
|
||||
<db-header class="db-header"></db-header>
|
||||
<div class="db-body">
|
||||
<div class="db-left">
|
||||
<db-container
|
||||
icon="cube"
|
||||
title="FTO投入"
|
||||
@refresh="() => (ftoKey = Math.random())"
|
||||
>
|
||||
<db-container icon="cube" title="FTO投入" @refresh="() => (ftoKey = Math.random())">
|
||||
<fto-chart :key="ftoKey" />
|
||||
</db-container>
|
||||
<db-container
|
||||
icon="chip2"
|
||||
title="芯片投入"
|
||||
@refresh="() => (chipInvestKey = Math.random())"
|
||||
>
|
||||
<db-container icon="chip2" title="芯片投入" @refresh="() => (chipInvestKey = Math.random())">
|
||||
<chip-invest-chart :key="chipInvestKey" />
|
||||
</db-container>
|
||||
</div>
|
||||
<div class="db-right">
|
||||
<db-container
|
||||
side="right"
|
||||
icon="chip"
|
||||
title="芯片产出"
|
||||
@refresh="() => (chipYieldKey = Math.random())"
|
||||
>
|
||||
<db-container side="right" icon="chip" title="芯片产出" @refresh="() => (chipYieldKey = Math.random())">
|
||||
<chip-yield-chart :key="chipYieldKey" />
|
||||
</db-container>
|
||||
<db-container
|
||||
side="right"
|
||||
icon="std"
|
||||
title="标准组件产出"
|
||||
@refresh="() => (stdKey = Math.random())"
|
||||
>
|
||||
<db-container side="right" icon="std" title="标准组件产出" @refresh="() => (stdKey = Math.random())">
|
||||
<std-chart :key="stdKey" />
|
||||
</db-container>
|
||||
<db-container
|
||||
side="right"
|
||||
icon="bipv"
|
||||
title="BIPV产出"
|
||||
@refresh="() => (bipvKey = Math.random())"
|
||||
>
|
||||
<db-container side="right" icon="bipv" title="BIPV产出" @refresh="() => (bipvKey = Math.random())">
|
||||
<bipv-chart :key="bipvKey" />
|
||||
</db-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<company-info
|
||||
v-if="visible"
|
||||
:info="info"
|
||||
:position="hintPosition"
|
||||
@close="closeHint"
|
||||
/>
|
||||
<company-info v-if="visible" :info="info" :position="rcHintPosition" />
|
||||
<ks-company-info v-if="visible" :info="ksInfo" :position="ksHintPosition" />
|
||||
<jms-company-info v-if="visible" :info="jmsInfo" :position="jmsHintPosition" />
|
||||
<hd-company-info v-if="visible" :info="hdInfo" :position="hdHintPosition" />
|
||||
<bb-company-info v-if="visible" :info="bbInfo" :position="bbHintPosition" />
|
||||
<cd-company-info v-if="visible" :info="cdInfo" :position="cdHintPosition" />
|
||||
<zz-company-info v-if="visible" :info="zzInfo" :position="zzHintPosition" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -71,25 +58,31 @@ import StdChart from "./dashboard/charts/StdChart.vue";
|
||||
|
||||
const LOCATIONS = [
|
||||
// 佳木斯
|
||||
{ x: 67, y: 20 },
|
||||
{ x: 67, y: 20, tx: 67, ty: 26, path: 'copilot/jmsIndex' },
|
||||
// 成都
|
||||
{ x: 46, y: 56 },
|
||||
{ x: 46, y: 56,tx:40,ty:93, path: 'copilot/cdIndex' },
|
||||
// 蚌埠1
|
||||
{ x: 60, y: 52 },
|
||||
{ x: 60, y: 52, tx: 33, ty: 48.3, path: 'copilot/bbIndex' },
|
||||
// 蚌埠2
|
||||
{ x: 61, y: 53 },
|
||||
{ x: 61, y: 53,tx:34,ty:68, path: 'copilot/ksIndex' },
|
||||
// 江西 瑞昌
|
||||
{ x: 60, y: 58 },
|
||||
{ x: 60, y: 58, tx: 68, ty: 52, path: 'copilot/factory-data' },
|
||||
// 湖南 株洲
|
||||
{ x: 56, y: 60 },
|
||||
{ x: 56, y: 60, tx: 60, ty: 95, path: 'copilot/zzIndex' },
|
||||
// 邯郸
|
||||
{ x: 58, y: 45 },
|
||||
{ x: 58, y: 45, tx: 49, ty: 34, path: 'copilot/hdIndex' },
|
||||
];
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {
|
||||
CompanyInfo,
|
||||
ksCompanyInfo: CompanyInfo,
|
||||
hdCompanyInfo: CompanyInfo,
|
||||
bbCompanyInfo: CompanyInfo,
|
||||
cdCompanyInfo: CompanyInfo,
|
||||
zzCompanyInfo: CompanyInfo,
|
||||
jmsCompanyInfo: CompanyInfo,
|
||||
DbHeader: DashboardHeader,
|
||||
DbContainer: Container,
|
||||
FtoChart,
|
||||
@@ -100,8 +93,15 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// homeStore:undefined,
|
||||
visible: false,
|
||||
hintPosition: null,
|
||||
zzHintPosition: null,
|
||||
ksHintPosition: null,
|
||||
bbHintPosition: null,
|
||||
hdHintPosition: null,
|
||||
cdHintPosition: null,
|
||||
jmsHintPosition: null,
|
||||
ftoKey: Math.random(),
|
||||
chipInvestKey: Math.random(),
|
||||
chipYieldKey: Math.random(),
|
||||
@@ -109,15 +109,20 @@ export default {
|
||||
bipvKey: Math.random(),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
homeStore() {
|
||||
return this.$store.getters.home
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch("copilot/initHome");
|
||||
this.$store.dispatch("copilot/initHome").then((res) => {
|
||||
this.$nextTick(() => {
|
||||
this.initPins();
|
||||
// 调整 echarts 大小
|
||||
window.onresize = () => { };
|
||||
})
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initPins();
|
||||
|
||||
// 调整 echarts 大小
|
||||
window.onresize = () => {};
|
||||
});
|
||||
},
|
||||
beforeRouteEnter(to, from, next) {
|
||||
next((vm) => {
|
||||
@@ -126,17 +131,25 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initPins() {
|
||||
|
||||
// console.log(" this.homeStore", this.$store.getters.home);
|
||||
LOCATIONS.map((loc) => {
|
||||
console.log("loc", loc);
|
||||
const pin = document.createElement("div");
|
||||
pin.className = "pin";
|
||||
pin.style.left = `${loc.x}%`;
|
||||
pin.style.top = `${loc.y}%`;
|
||||
pin.addEventListener("mouseenter", () => {
|
||||
// pin.addEventListener("mouseenter", () => {
|
||||
this.showHint(loc);
|
||||
});
|
||||
pin.addEventListener("mouseleave", () => {
|
||||
this.closeHint();
|
||||
});
|
||||
// });
|
||||
// pin.addEventListener("mouseleave", () => {
|
||||
// this.closeHint();
|
||||
// });
|
||||
// pin.addEventListener("click", () => {
|
||||
// this.$router.push({
|
||||
// path:loc.path
|
||||
// })
|
||||
// });
|
||||
document.getElementById("map-container").appendChild(pin);
|
||||
});
|
||||
},
|
||||
@@ -145,8 +158,6 @@ export default {
|
||||
this.hintPosition = null;
|
||||
},
|
||||
showHint(position) {
|
||||
const homeStore = this.$store.getters.home;
|
||||
this.hintPosition = position;
|
||||
const templateInfo = {
|
||||
companyName: "",
|
||||
items: [
|
||||
@@ -156,53 +167,63 @@ export default {
|
||||
{ label: "标准组件产出", value: 0 }, // Math.floor(Math.random() * 1000000) },
|
||||
],
|
||||
};
|
||||
|
||||
if (position === LOCATIONS[0]) {
|
||||
templateInfo.companyName = "佳木斯中建材光电材料有限公司";
|
||||
templateInfo.items[0].value = homeStore.ftoInvest.current[3];
|
||||
templateInfo.items[2].value = homeStore.chipInvest.current[3];
|
||||
templateInfo.items[1].value = homeStore.chipOutput.current[3];
|
||||
templateInfo.items[3].value = homeStore.stdOutput.current[3];
|
||||
this.jmsHintPosition = position;
|
||||
templateInfo.items[0].value = this.homeStore.ftoInvest.current[3];
|
||||
templateInfo.items[2].value = this.homeStore.chipInvest.current[3];
|
||||
templateInfo.items[1].value = this.homeStore.chipOutput.current[3];
|
||||
templateInfo.items[3].value = this.homeStore.stdOutput.current[3];
|
||||
this.jmsInfo = templateInfo;
|
||||
} else if (position === LOCATIONS[1]) {
|
||||
this.cdHintPosition = position;
|
||||
templateInfo.companyName = "成都中建材光电材料有限公司";
|
||||
templateInfo.items[0].value = homeStore.ftoInvest.current[4];
|
||||
templateInfo.items[2].value = homeStore.chipInvest.current[4];
|
||||
templateInfo.items[1].value = homeStore.chipOutput.current[4];
|
||||
templateInfo.items[3].value = homeStore.stdOutput.current[4];
|
||||
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[4];
|
||||
templateInfo.items[2].value = this.homeStore.chipInvest.current[4];
|
||||
templateInfo.items[1].value = this.homeStore.chipOutput.current[4];
|
||||
templateInfo.items[3].value = this.homeStore.stdOutput.current[4];
|
||||
this.cdInfo = templateInfo;
|
||||
} else if (position === LOCATIONS[2]) {
|
||||
this.bbHintPosition = position;
|
||||
templateInfo.companyName = "蚌埠兴科玻璃有限公司";
|
||||
templateInfo.items[0].value = homeStore.ftoInvest.current[6];
|
||||
templateInfo.items[2].value = homeStore.chipInvest.current[6];
|
||||
templateInfo.items[1].value = homeStore.chipOutput.current[6];
|
||||
templateInfo.items[3].value = homeStore.stdOutput.current[6];
|
||||
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[6];
|
||||
templateInfo.items[2].value = this.homeStore.chipInvest.current[6];
|
||||
templateInfo.items[1].value = this.homeStore.chipOutput?.current[6];
|
||||
templateInfo.items[3].value = this.homeStore.stdOutput.current[6];
|
||||
this.bbInfo = templateInfo;
|
||||
} else if (position === LOCATIONS[3]) {
|
||||
this.ksHintPosition = position;
|
||||
templateInfo.companyName = "凯盛光伏材料有限公司(本部)";
|
||||
templateInfo.items[0].value = homeStore.ftoInvest.current[5];
|
||||
templateInfo.items[2].value = homeStore.chipInvest.current[5];
|
||||
templateInfo.items[1].value = homeStore.chipOutput.current[5];
|
||||
templateInfo.items[3].value = homeStore.stdOutput.current[5];
|
||||
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[5];
|
||||
templateInfo.items[2].value = this.homeStore.chipInvest.current[5];
|
||||
templateInfo.items[1].value = this.homeStore.chipOutput.current[5];
|
||||
templateInfo.items[3].value = this.homeStore.stdOutput.current[5];
|
||||
this.ksInfo = templateInfo;
|
||||
} else if (position === LOCATIONS[4]) {
|
||||
this.rcHintPosition = position;
|
||||
templateInfo.companyName = "瑞昌中建材光电材料有限公司";
|
||||
templateInfo.items[0].value = homeStore.ftoInvest.current[0];
|
||||
templateInfo.items[2].value = homeStore.chipInvest.current[0];
|
||||
templateInfo.items[1].value = homeStore.chipOutput.current[0];
|
||||
templateInfo.items[3].value = homeStore.stdOutput.current[0];
|
||||
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[0];
|
||||
templateInfo.items[2].value = this.homeStore.chipInvest.current[0];
|
||||
templateInfo.items[1].value = this.homeStore.chipOutput.current[0];
|
||||
templateInfo.items[3].value = this.homeStore.stdOutput.current[0];
|
||||
this.info = templateInfo;
|
||||
} else if (position === LOCATIONS[5]) {
|
||||
this.zzHintPosition = position;
|
||||
templateInfo.companyName = "中建材(株洲)光电材料有限公司";
|
||||
templateInfo.items[0].value = homeStore.ftoInvest.current[2];
|
||||
templateInfo.items[2].value = homeStore.chipInvest.current[2];
|
||||
templateInfo.items[1].value = homeStore.chipOutput.current[2];
|
||||
templateInfo.items[3].value = homeStore.stdOutput.current[2];
|
||||
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[2];
|
||||
templateInfo.items[2].value = this.homeStore.chipInvest.current[2];
|
||||
templateInfo.items[1].value = this.homeStore.chipOutput.current[2];
|
||||
templateInfo.items[3].value = this.homeStore.stdOutput.current[2];
|
||||
this.zzInfo = templateInfo;
|
||||
} else if (position === LOCATIONS[6]) {
|
||||
this.hdHintPosition = position;
|
||||
templateInfo.companyName = "中建材(邯郸)光电材料有限公司";
|
||||
templateInfo.items[0].value = homeStore.ftoInvest.current[1];
|
||||
templateInfo.items[2].value = homeStore.chipInvest.current[1];
|
||||
templateInfo.items[1].value = homeStore.chipOutput.current[1];
|
||||
templateInfo.items[3].value = homeStore.stdOutput.current[1];
|
||||
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[1];
|
||||
templateInfo.items[2].value = this.homeStore.chipInvest.current[1];
|
||||
templateInfo.items[1].value = this.homeStore.chipOutput.current[1];
|
||||
templateInfo.items[3].value = this.homeStore.stdOutput.current[1];
|
||||
this.hdInfo = templateInfo
|
||||
}
|
||||
|
||||
this.info = templateInfo;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.visible = true;
|
||||
});
|
||||
@@ -225,8 +246,88 @@ export default {
|
||||
#map-container {
|
||||
height: 100%;
|
||||
background: url(../assets/bgearth.png) no-repeat 0 0 / 100% 100%;
|
||||
// background-size: cover;
|
||||
position: relative;
|
||||
|
||||
.cdLine{
|
||||
position: absolute;
|
||||
left: 46.71%;
|
||||
width: 2px;
|
||||
top: 59%;
|
||||
height: 148px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.zzLine {
|
||||
position: absolute;
|
||||
left: 56.8%;
|
||||
width: 2px;
|
||||
top: 60.8%;
|
||||
// x: 60, y: 58,
|
||||
height: 148px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.rcLine {
|
||||
position: absolute;
|
||||
left: 61%;
|
||||
width: 100px;
|
||||
top: 61.5%;
|
||||
// x: 60, y: 58,
|
||||
height: 1px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.rcLineTwo {
|
||||
position: absolute;
|
||||
left: 66.8%;
|
||||
width: 1px;
|
||||
top: 52%;
|
||||
// x: 60, y: 58,
|
||||
height: 90px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.hdLine {
|
||||
position: absolute;
|
||||
left: 58.7%;
|
||||
width: 1px;
|
||||
top: 34%;
|
||||
// x: 60, y: 58,
|
||||
height: 100px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.ksLine {
|
||||
position: absolute;
|
||||
left: 43.2%;
|
||||
width: 350px;
|
||||
top: 56.8%;
|
||||
// x: 60, y: 58,
|
||||
height: 1px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.bbLine{
|
||||
position: absolute;
|
||||
left: 42.4%;
|
||||
width: 350px;
|
||||
top: 55.5%;
|
||||
// x: 60, y: 58,
|
||||
height: 1px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.bbLineTwo{
|
||||
position: absolute;
|
||||
left: 42.4%;
|
||||
width: 1px;
|
||||
top: 48%;
|
||||
// x: 60, y: 58,
|
||||
height: 70px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.bbLineThree{
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
width: 40px;
|
||||
top: 48%;
|
||||
// x: 60, y: 58,
|
||||
height: 1px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.databoard {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
Reference in New Issue
Block a user