mt-fe-group/yudao-init
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update home

Browse Source
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
2024-04-18 17:01:10 +08:00
parent 67bfb9981a
commit a262fb96d4
55 changed files with 3836 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

338
src/views/index.vue
View File

@@ -1,98 +1,286 @@
<template>
<div class="dashboard-editor-container">
<!-- 首页http://localhost:81/index 数据展示 -->
<panel-group @handleSetLineChartData="handleSetLineChartData" />
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="lineChartData" />
</el-row>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<raddar-chart />
<div class="dashboard-factory-all">
<div id="map-container">
<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())"
>
<fto-chart :key="ftoKey" />
</db-container>
<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())"
>
<chip-yield-chart :key="chipYieldKey" />
</db-container>
<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())"
>
<bipv-chart :key="bipvKey" />
</db-container>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
</div>
</el-col>
</el-row>
</div>
</div>
<company-info
v-if="visible"
:info="info"
:position="hintPosition"
@close="closeHint"
/>
</div>
</template>
<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import store from "@/store";
import DashboardHeader from "./dashboard/components/Header.vue";
import CompanyInfo from "./dashboard/components/CompanyInfo.vue";
import Container from "./dashboard/components/Container.vue";
import FtoChart from "./dashboard/charts/Fto.vue";
import ChipInvestChart from "./dashboard/charts/ChipInvest.vue";
import BipvChart from "./dashboard/charts/Bipv.vue";
import ChipYieldChart from "./dashboard/charts/ChipYield.vue";
import StdChart from "./dashboard/charts/StdChart.vue";
const lineChartData = {
newVisitis: {
expectedData: [100, 120, 161, 134, 105, 160, 165],
actualData: [120, 82, 91, 154, 162, 140, 145]
},
messages: {
expectedData: [200, 192, 120, 144, 160, 130, 140],
actualData: [180, 160, 151, 106, 145, 150, 130]
},
purchases: {
expectedData: [80, 100, 121, 104, 105, 90, 100],
actualData: [120, 90, 100, 138, 142, 130, 130]
},
shoppings: {
expectedData: [130, 140, 141, 142, 145, 150, 160],
actualData: [120, 82, 91, 154, 162, 140, 130]
}
}
const LOCATIONS = [
// 佳木斯
{ x: 67, y: 20 },
// 成都
{ x: 46, y: 56 },
// 蚌埠1
{ x: 60, y: 52 },
// 蚌埠2
{ x: 61, y: 53 },
// 江西 瑞昌
{ x: 60, y: 58 },
// 湖南 株洲
{ x: 56, y: 60 },
// 邯郸
{ x: 58, y: 45 },
];
export default {
name: 'Index',
name: "Index",
components: {
PanelGroup,
LineChart,
RaddarChart,
PieChart,
BarChart
CompanyInfo,
DbHeader: DashboardHeader,
DbContainer: Container,
FtoChart,
ChipInvestChart,
ChipYieldChart,
BipvChart,
StdChart,
},
data() {
return {
lineChartData: lineChartData.newVisitis
}
visible: false,
hintPosition: null,
ftoKey: Math.random(),
chipInvestKey: Math.random(),
chipYieldKey: Math.random(),
stdKey: Math.random(),
bipvKey: Math.random(),
};
},
mounted() {
this.$store.dispatch("copilot/initHome");
this.$nextTick(() => {
this.initPins();
// 调整 echarts 大小
window.onresize = () => {};
});
},
beforeRouteEnter(to, from, next) {
next((vm) => {
store.dispatch("app/closeSideBar", { withoutAnimation: true });
});
},
methods: {
handleSetLineChartData(type) {
this.lineChartData = lineChartData[type]
}
}
}
initPins() {
LOCATIONS.map((loc) => {
const pin = document.createElement("div");
pin.className = "pin";
pin.style.left = `${loc.x}%`;
pin.style.top = `${loc.y}%`;
pin.addEventListener("mouseenter", () => {
this.showHint(loc);
});
pin.addEventListener("mouseleave", () => {
this.closeHint();
});
document.getElementById("map-container").appendChild(pin);
});
},
closeHint() {
this.visible = false;
this.hintPosition = null;
},
showHint(position) {
const homeStore = this.$store.getters.home;
this.hintPosition = position;
const templateInfo = {
companyName: "",
items: [
{ label: "FTO投入", value: 0 }, // Math.floor(Math.random() * 1000000) },
{ label: "芯片产出", value: 0 }, // Math.floor(Math.random() * 10000000) },
{ label: "芯片投入", value: 0 }, // Math.floor(Math.random() * 1000000) },
{ 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];
} else if (position === LOCATIONS[1]) {
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];
} else if (position === LOCATIONS[2]) {
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];
} else if (position === LOCATIONS[3]) {
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];
} else if (position === LOCATIONS[4]) {
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];
} else if (position === LOCATIONS[5]) {
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];
} else if (position === LOCATIONS[6]) {
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];
}
this.info = templateInfo;
this.$nextTick(() => {
this.visible = true;
});
},
},
};
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
position: relative;
<style>
.hideSidebar.mobile .dashboard-factory-all {
left: 0 !important;
width: 100vw !important;
}
</style>
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
<style lang="scss" scoped>
.dashboard-factory-all {
background: #151516;
position: fixed;
top: 0;
left: 54px;
height: 100vh;
width: calc(100vw - 54px);
z-index: 1001;
color: #fff;
}
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;
#map-container {
height: 100%;
background: url(../assets/bgearth.png) no-repeat 0 0 / 100% 100%;
position: relative;
.databoard {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
flex-direction: column;
}
.db-body {
flex: 1;
display: flex;
justify-content: space-between;
}
.db-left,
.db-right {
// width: 420px;
width: 24vw;
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
}
</style>
<style>
.pin {
display: inline-block;
position: absolute;
z-index: 9998;
width: 1.702vw;
height: 1.702vw;
/*
width: 32px;
height: 32px;
*/
background: url(../assets/pinicon.png) no-repeat 0 0 / 100% 100%;
transition: transform 0.1s linear;
cursor: pointer;
}
.pin:hover {
transform: scale(1.2);
}
</style>