@@ -1,7 +1,7 @@ | |||||
### | ### | ||||
# @Author: zhp | # @Author: zhp | ||||
# @Date: 2024-04-28 13:42:51 | # @Date: 2024-04-28 13:42:51 | ||||
# @LastEditTime: 2024-06-03 09:21:15 | |||||
# @LastEditTime: 2024-06-04 08:56:35 | |||||
# @LastEditors: DY | # @LastEditors: DY | ||||
# @Description: | # @Description: | ||||
### | ### | ||||
@@ -4,16 +4,16 @@ function __resizeHandler(entries) { | |||||
console.log(entries) | console.log(entries) | ||||
for (const entry of entries) { | for (const entry of entries) { | ||||
if (entry.contentBoxSize) { | if (entry.contentBoxSize) { | ||||
// const contentBoxSize = Array.isArray(entry.contentBoxSize) | |||||
// ? entry.contentBoxSize[0] | |||||
// : entry.contentBoxSize; | |||||
// this.chart_mixin_chartInstance.resize({ | |||||
// width: | |||||
// contentBoxSize.inlineSize < this.MIN_WIDTH | |||||
// ? this.MIN_WIDTH | |||||
// : contentBoxSize.inlineSize, | |||||
// height: contentBoxSize.blockSize, | |||||
// }); | |||||
const contentBoxSize = Array.isArray(entry.contentBoxSize) | |||||
? entry.contentBoxSize[0] | |||||
: entry.contentBoxSize; | |||||
this.chart_mixin_chartInstance.resize({ | |||||
width: | |||||
contentBoxSize.inlineSize < this.MIN_WIDTH | |||||
? this.MIN_WIDTH | |||||
: contentBoxSize.inlineSize, | |||||
height: contentBoxSize.blockSize, | |||||
}); | |||||
} else { | } else { | ||||
// manipulate contentRect | // manipulate contentRect | ||||
this.chart_mixin_chartInstance.resize({ | this.chart_mixin_chartInstance.resize({ | ||||
@@ -1,14 +1,14 @@ | |||||
<!-- | <!-- | ||||
* @Author: zhp | * @Author: zhp | ||||
* @Date: 2024-05-07 10:25:10 | * @Date: 2024-05-07 10:25:10 | ||||
* @LastEditTime: 2024-05-31 16:38:29 | |||||
* @LastEditTime: 2024-06-03 16:40:45 | |||||
* @LastEditors: zhp | * @LastEditors: zhp | ||||
* @Description: | * @Description: | ||||
--> | --> | ||||
<template> | <template> | ||||
<!-- <div class="order"> --> | <!-- <div class="order"> --> | ||||
<div class="std-rate" style="width: 100%; overflow: hidden scroll; height: 400px"> | |||||
<div class="std-rate" style="width: 100%"> | |||||
<!-- <div class="span-2"> | <!-- <div class="span-2"> | ||||
<StdRateItem :period="period" :city="cities[5]" /> | <StdRateItem :period="period" :city="cities[5]" /> | ||||
</div> --> | </div> --> | ||||
@@ -106,12 +106,12 @@ export default { | |||||
<style scoped lang="scss"> | <style scoped lang="scss"> | ||||
.std-rate { | .std-rate { | ||||
display: flex; | display: flex; | ||||
// gap: 1px; | |||||
gap: 16px; | |||||
// flex: 1 1 auto; | // flex: 1 1 auto; | ||||
flex-direction: column; | |||||
// display: -webkit-box; | // display: -webkit-box; | ||||
flex-wrap: wrap; | |||||
align-items: center; | |||||
// flex-wrap: wrap; | |||||
// align-items: center; | |||||
// grid-template-columns: repeat(2, 1fr); | // grid-template-columns: repeat(2, 1fr); | ||||
// grid-template-rows: repeat(4, 1fr); | // grid-template-rows: repeat(4, 1fr); | ||||
} | } | ||||
@@ -120,10 +120,10 @@ export default { | |||||
} | } | ||||
.flex-item{ | .flex-item{ | ||||
// flex: 1 1 auto; | // flex: 1 1 auto; | ||||
width: 50%; | |||||
// width: 50%; | |||||
} | } | ||||
.span-2 { | .span-2 { | ||||
// flex: 1 1 auto; | |||||
flex-basis: 100%; | |||||
flex: 1 1 auto; | |||||
// flex-basis: 100%; | |||||
} | } | ||||
</style> | </style> |
@@ -1,7 +1,7 @@ | |||||
<!-- | <!-- | ||||
* @Author: zhp | * @Author: zhp | ||||
* @Date: 2024-05-07 13:22:43 | * @Date: 2024-05-07 13:22:43 | ||||
* @LastEditTime: 2024-05-31 15:55:00 | |||||
* @LastEditTime: 2024-06-03 16:13:52 | |||||
* @LastEditors: zhp | * @LastEditors: zhp | ||||
* @Description: | * @Description: | ||||
--> | --> | ||||
@@ -11,7 +11,7 @@ | |||||
<span v-for="(item,index) in legend" :key="index" class="legend-item" | <span v-for="(item,index) in legend" :key="index" class="legend-item" | ||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> | :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> | ||||
</div> | </div> | ||||
<div ref="oeeChart" style="height:100%;width:100%"></div> | |||||
<div ref="oeeChart" style="height:94%;width:100%"></div> | |||||
</chart-container> | </chart-container> | ||||
</template> | </template> | ||||
@@ -22,7 +22,7 @@ import ChartContainer from "../../../../components/ChartContainer.vue"; | |||||
import { debounce } from "@/utils/debounce"; | import { debounce } from "@/utils/debounce"; | ||||
import * as echarts from "echarts"; | import * as echarts from "echarts"; | ||||
export default { | export default { | ||||
name: "BarChartBase", | |||||
name: "barChartBaseoee", | |||||
components: { | components: { | ||||
ChartContainer, | ChartContainer, | ||||
}, | }, | ||||
@@ -220,30 +220,30 @@ export default { | |||||
this.canvasReset() | this.canvasReset() | ||||
}, | }, | ||||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | ||||
// isFullscreen(val) { | |||||
// this.actualOptions.series.map((item) => { | |||||
// item.barWidth = val ? 18 : 12; | |||||
// }); | |||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | |||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | |||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | |||||
// // if (val === false && this.isOpen === true) { | |||||
// // console.log(val) | |||||
// // this.width = 97 + '%' | |||||
// // this.canvasReset() | |||||
// // } else if (val === false && this.isOpen === false) { | |||||
// // this.width = 100 + '%' | |||||
// // this.canvasReset() | |||||
// // } | |||||
// // this.actualOptions.series.map((item) => { | |||||
// // item.barWidth = val ? 18 : 12; | |||||
// // }); | |||||
// // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | |||||
// // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | |||||
// // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | |||||
// this.initChart(this.actualOptions) | |||||
// this.canvasReset() | |||||
// }, | |||||
isFullscreen(val) { | |||||
// this.actualOptions.series.map((item) => { | |||||
// item.barWidth = val ? 18 : 12; | |||||
// }); | |||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | |||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | |||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | |||||
// if (val === false && this.isOpen === true) { | |||||
// console.log(val) | |||||
// this.width = 97 + '%' | |||||
// this.canvasReset() | |||||
// } else if (val === false && this.isOpen === false) { | |||||
// this.width = 100 + '%' | |||||
// this.canvasReset() | |||||
// } | |||||
// this.actualOptions.series.map((item) => { | |||||
// item.barWidth = val ? 18 : 12; | |||||
// }); | |||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | |||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | |||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | |||||
this.initChart(this.actualOptions) | |||||
this.canvasReset() | |||||
}, | |||||
series(val) { | series(val) { | ||||
if (!val) { | if (!val) { | ||||
this.initChart(this.options); | this.initChart(this.options); | ||||
@@ -268,11 +268,11 @@ export default { | |||||
// this.isFullscreen = screenfull.isFullscreen; | // this.isFullscreen = screenfull.isFullscreen; | ||||
// }); | // }); | ||||
// } | // } | ||||
// if (screenfull.isEnabled) { | |||||
// screenfull.on("change", () => { | |||||
// this.isFullscreen = screenfull.isFullscreen; | |||||
// }); | |||||
// } | |||||
if (screenfull.isEnabled) { | |||||
screenfull.on("change", () => { | |||||
this.isFullscreen = screenfull.isFullscreen; | |||||
}); | |||||
} | |||||
this.actualOptions = this.options | this.actualOptions = this.options | ||||
this.canvasReset(); | this.canvasReset(); | ||||
window.addEventListener("resize", this.canvasReset); | window.addEventListener("resize", this.canvasReset); | ||||
@@ -1,7 +1,7 @@ | |||||
<!-- | <!-- | ||||
* @Author: zhp | * @Author: zhp | ||||
* @Date: 2024-05-23 15:50:44 | * @Date: 2024-05-23 15:50:44 | ||||
* @LastEditTime: 2024-05-31 15:54:41 | |||||
* @LastEditTime: 2024-06-03 16:14:03 | |||||
* @LastEditors: zhp | * @LastEditors: zhp | ||||
* @Description: | * @Description: | ||||
--> | --> | ||||
@@ -11,7 +11,7 @@ | |||||
<span v-for="(item,index) in legend" :key="index" class="legend-item" | <span v-for="(item,index) in legend" :key="index" class="legend-item" | ||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> | :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> | ||||
</div> | </div> | ||||
<div ref="oeeChart" style="height:100%;width:100%"></div> | |||||
<div ref="oeeChart" style="height:94%;width:100%"></div> | |||||
</chart-container> | </chart-container> | ||||
</template> | </template> | ||||
@@ -22,7 +22,7 @@ import ChartContainer from "../../../../components/ChartContainer.vue"; | |||||
import { debounce } from "@/utils/debounce"; | import { debounce } from "@/utils/debounce"; | ||||
import * as echarts from "echarts"; | import * as echarts from "echarts"; | ||||
export default { | export default { | ||||
name: "BarChartBase", | |||||
name: "barChartBaseoee", | |||||
components: { | components: { | ||||
ChartContainer, | ChartContainer, | ||||
}, | }, | ||||
@@ -221,12 +221,12 @@ export default { | |||||
}, | }, | ||||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | ||||
isFullscreen(val) { | isFullscreen(val) { | ||||
this.actualOptions.series.map((item) => { | |||||
item.barWidth = val ? 18 : 12; | |||||
}); | |||||
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | |||||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | |||||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | |||||
// this.actualOptions.series.map((item) => { | |||||
// item.barWidth = val ? 18 : 12; | |||||
// }); | |||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | |||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | |||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | |||||
// if (val === false && this.isOpen === true) { | // if (val === false && this.isOpen === true) { | ||||
// console.log(val) | // console.log(val) | ||||
// this.width = 97 + '%' | // this.width = 97 + '%' | ||||
@@ -241,8 +241,8 @@ export default { | |||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | ||||
// this.initChart(this.actualOptions) | |||||
// this.canvasReset() | |||||
this.initChart(this.actualOptions) | |||||
this.canvasReset() | |||||
}, | }, | ||||
series(val) { | series(val) { | ||||
if (!val) { | if (!val) { | ||||
@@ -267,11 +267,11 @@ export default { | |||||
// this.isFullscreen = screenfull.isFullscreen; | // this.isFullscreen = screenfull.isFullscreen; | ||||
// }); | // }); | ||||
// } | // } | ||||
// if (screenfull.isEnabled) { | |||||
// screenfull.on("change", () => { | |||||
// this.isFullscreen = screenfull.isFullscreen; | |||||
// }); | |||||
// } | |||||
if (screenfull.isEnabled) { | |||||
screenfull.on("change", () => { | |||||
this.isFullscreen = screenfull.isFullscreen; | |||||
}); | |||||
} | |||||
this.actualOptions = this.options | this.actualOptions = this.options | ||||
this.canvasReset(); | this.canvasReset(); | ||||
window.addEventListener("resize", this.canvasReset); | window.addEventListener("resize", this.canvasReset); | ||||
@@ -270,7 +270,7 @@ export default { | |||||
display: flex; | display: flex; | ||||
flex-direction: column; | flex-direction: column; | ||||
align-items: center; | align-items: center; | ||||
justify-content: center; | |||||
// justify-content: center; | |||||
gap: 3px; | gap: 3px; | ||||
backdrop-filter: blur(24px); | backdrop-filter: blur(24px); | ||||
.cities { | .cities { | ||||
@@ -283,6 +283,7 @@ export default { | |||||
flex: 1 1 auto; | flex: 1 1 auto; | ||||
padding: 0 15%; | padding: 0 15%; | ||||
/* margin: 10%; */ | /* margin: 10%; */ | ||||
height: 16vh; | |||||
/* min-width: 300px; */ | /* min-width: 300px; */ | ||||
align-self: stretch; | align-self: stretch; | ||||
} | } | ||||
@@ -1,25 +1,31 @@ | |||||
<!-- | <!-- | ||||
* @Author: zhp | * @Author: zhp | ||||
* @Date: 2024-05-07 10:04:53 | * @Date: 2024-05-07 10:04:53 | ||||
* @LastEditTime: 2024-05-31 13:19:34 | |||||
* @LastEditTime: 2024-06-03 16:08:27 | |||||
* @LastEditors: zhp | * @LastEditors: zhp | ||||
* @Description: | * @Description: | ||||
--> | --> | ||||
<template> | <template> | ||||
<div class="efficiency-copilot"> | <div class="efficiency-copilot"> | ||||
<Container title="芯片良率" icon="chip2"> | |||||
<ChipRate :period="period" :than="than" /> | |||||
</Container> | |||||
<Container title="标准组件良率" icon="std"> | |||||
<StdRate :period="period" :than="than" /> | |||||
</Container> | |||||
<Container title="芯片OEE" icon="chip"> | |||||
<ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" /> | |||||
</Container> | |||||
<Container title="转化效率" icon="cube"> | |||||
<TransformRate :transformRate="transformRate" :period="period" :than="than" /> | |||||
</Container> | |||||
<section class="top flex"> | |||||
<Container title="芯片良率" icon="chip2"> | |||||
<ChipRate :period="period" :than="than" /> | |||||
</Container> | |||||
<Container title="标准组件良率" icon="std"> | |||||
<StdRate :period="period" :than="than" /> | |||||
</Container> | |||||
</section> | |||||
<section class="bottom flex"> | |||||
<Container title="芯片OEE" icon="chip"> | |||||
<ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" /> | |||||
</Container> | |||||
<Container title="转化效率" icon="cube"> | |||||
<TransformRate :transformRate="transformRate" :period="period" :than="than" /> | |||||
</Container> | |||||
</section> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -31,7 +37,7 @@ import StdRateVue from "./components/StdRate.vue"; | |||||
import TransformRateVue from "./components/TransformRate.vue"; | import TransformRateVue from "./components/TransformRate.vue"; | ||||
export default { | export default { | ||||
name: "EfficiencyCopilot", | |||||
name: "efficiencyCopilot", | |||||
components: { | components: { | ||||
Container, | Container, | ||||
ChipOee: ChipOeeVue, | ChipOee: ChipOeeVue, | ||||
@@ -88,7 +94,30 @@ export default { | |||||
}; | }; | ||||
</script> | </script> | ||||
<style scoped> | <style scoped> | ||||
.efficiency-copilot { | |||||
flex: 1; | |||||
display: flex; | |||||
flex-direction: column; | |||||
gap: 16px; | |||||
} | |||||
.flex { | |||||
display: flex; | |||||
gap: 16px; | |||||
flex: 1; | |||||
} | |||||
.top > div, | |||||
.bottom > div { | |||||
height: 100%; | |||||
} | |||||
</style> | |||||
<!-- <style scoped> | |||||
.efficiency-copilot { | .efficiency-copilot { | ||||
flex: 1; | flex: 1; | ||||
display: grid; | display: grid; | ||||
@@ -100,4 +129,4 @@ export default { | |||||
.efficiency-copilot > div { | .efficiency-copilot > div { | ||||
height: 100%; | height: 100%; | ||||
} | } | ||||
</style> | |||||
</style> --> |
@@ -22,7 +22,7 @@ export default ({ | |||||
textAlign: "center", | textAlign: "center", | ||||
textStyle: { | textStyle: { | ||||
fontWeight: 600, | fontWeight: 600, | ||||
fontSize: 32, | |||||
fontSize: 26, | |||||
color: "#fffd", | color: "#fffd", | ||||
}, | }, | ||||
subtext: `\u2002${subtitle}\u2002`, | subtext: `\u2002${subtitle}\u2002`, | ||||
@@ -1,7 +1,7 @@ | |||||
<!-- | <!-- | ||||
* @Author: zhp | * @Author: zhp | ||||
* @Date: 2024-05-20 16:04:18 | * @Date: 2024-05-20 16:04:18 | ||||
* @LastEditTime: 2024-05-31 13:16:26 | |||||
* @LastEditTime: 2024-06-03 15:45:58 | |||||
* @LastEditors: zhp | * @LastEditors: zhp | ||||
* @Description: | * @Description: | ||||
--> | --> | ||||
@@ -95,13 +95,14 @@ export default { | |||||
</script> | </script> | ||||
<style> | <style> | ||||
.copilot-layout { | .copilot-layout { | ||||
padding: 16px; | padding: 16px; | ||||
background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat; | background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat; | ||||
position: absolute; | position: absolute; | ||||
left: -16px; | left: -16px; | ||||
/* top: -8px; */ | /* top: -8px; */ | ||||
height: calc(100% + 240px); | |||||
height: calc(100% + 30px); | |||||
width: calc(100% + 30px); | width: calc(100% + 30px); | ||||
z-index: 1001; | z-index: 1001; | ||||
color: #fff; | color: #fff; | ||||
@@ -110,12 +111,12 @@ export default { | |||||
gap: 8px; | gap: 8px; | ||||
} | } | ||||
.produce{ | |||||
/* .produce{ | |||||
height: calc(100% + 38px); | height: calc(100% + 38px); | ||||
} | |||||
.other { | |||||
} */ | |||||
/* .other { */ | |||||
/* height: calc(100% + 240px); */ | /* height: calc(100% + 240px); */ | ||||
} | |||||
/* } */ | |||||
.copilot-footer { | .copilot-footer { | ||||
/** position: absolute; | /** position: absolute; | ||||
bottom: 10px; **/ | bottom: 10px; **/ | ||||
@@ -1,7 +1,7 @@ | |||||
<!-- | <!-- | ||||
* @Author: zhp | * @Author: zhp | ||||
* @Date: 2024-05-20 13:32:59 | * @Date: 2024-05-20 13:32:59 | ||||
* @LastEditTime: 2024-05-31 15:05:20 | |||||
* @LastEditTime: 2024-06-03 16:26:24 | |||||
* @LastEditors: zhp | * @LastEditors: zhp | ||||
* @Description: | * @Description: | ||||
--> | --> | ||||
@@ -151,7 +151,7 @@ export default { | |||||
]; | ]; | ||||
} | } | ||||
let titleValue = | let titleValue = | ||||
vt[1] != null && vt[2] !== 0 | |||||
vt[1] != null && (vt[2] !== 0 && vt[2] !== undefined) | |||||
? this.formatNumber((vt[1] / vt[2] * 100)) + '%' | ? this.formatNumber((vt[1] / vt[2] * 100)) + '%' | ||||
: (vt[1] != 0 && vt[1] != null) && vt[2] == 0 | : (vt[1] != 0 && vt[1] != null) && vt[2] == 0 | ||||
? "100%" : '0%', | ? "100%" : '0%', | ||||
@@ -1,17 +1,10 @@ | |||||
<!-- | <!-- | ||||
* @Author: zhp | * @Author: zhp | ||||
* @Date: 2024-05-30 16:00:50 | * @Date: 2024-05-30 16:00:50 | ||||
* @LastEditTime: 2024-05-31 16:15:51 | |||||
* @LastEditTime: 2024-06-03 16:26:03 | |||||
* @LastEditors: zhp | * @LastEditors: zhp | ||||
* @Description: | * @Description: | ||||
--> | --> | ||||
<!-- | |||||
filename: DoubleRingWrapper.vue | |||||
author: liubin | |||||
date: 2024-04-17 09:55:12 | |||||
description: | |||||
--> | |||||
<template> | <template> | ||||
<div class="double-ring-wrapper"> | <div class="double-ring-wrapper"> | ||||
<template> | <template> | ||||
@@ -22,7 +22,7 @@ export default ({ | |||||
textAlign: "center", | textAlign: "center", | ||||
textStyle: { | textStyle: { | ||||
fontWeight: 600, | fontWeight: 600, | ||||
fontSize: 32, | |||||
fontSize: 20, | |||||
color: "#fffd", | color: "#fffd", | ||||
}, | }, | ||||
subtext: `\u2002${subtitle}\u2002`, | subtext: `\u2002${subtitle}\u2002`, | ||||
@@ -38,7 +38,7 @@ export default ({ | |||||
{ | { | ||||
type: "pie", | type: "pie", | ||||
name: "当前目标", | name: "当前目标", | ||||
radius: ["70%", "85%"], | |||||
radius: ["80%", "90%"], | |||||
center: ["45%", "52%"], | center: ["45%", "52%"], | ||||
emptyCircleStyle: { | emptyCircleStyle: { | ||||
color: "#042c5f33", | color: "#042c5f33", | ||||
@@ -47,7 +47,7 @@ export default ({ | |||||
// 数据 series | // 数据 series | ||||
{ | { | ||||
type: "pie", | type: "pie", | ||||
radius: ["70%", "85%"], | |||||
radius: ["80%", "90%"], | |||||
center: ["45%", "52%"], | center: ["45%", "52%"], | ||||
avoidLabelOvervlap: false, | avoidLabelOvervlap: false, | ||||
label: { | label: { | ||||
@@ -92,7 +92,7 @@ export default ({ | |||||
// 数据 series2 - 2023累计 | // 数据 series2 - 2023累计 | ||||
{ | { | ||||
type: "pie", | type: "pie", | ||||
radius: ["55%", "70%"], | |||||
radius: ["70%", "80%"], | |||||
center: ["45%", "52%"], | center: ["45%", "52%"], | ||||
avoidLabelOvervlap: false, | avoidLabelOvervlap: false, | ||||
label: { | label: { | ||||
@@ -1,16 +1,10 @@ | |||||
<!-- | <!-- | ||||
* @Author: zhp | * @Author: zhp | ||||
* @Date: 2024-04-28 13:42:51 | * @Date: 2024-04-28 13:42:51 | ||||
* @LastEditTime: 2024-05-31 16:14:09 | |||||
* @LastEditTime: 2024-06-03 08:55:42 | |||||
* @LastEditors: zhp | * @LastEditors: zhp | ||||
* @Description: | * @Description: | ||||
--> | --> | ||||
<!-- | |||||
filename: Bipv.vue | |||||
author: liubin | |||||
date: 2024-04-10 15:39:54 | |||||
description: | |||||
--> | |||||
<template> | <template> | ||||
<right-chart-base | <right-chart-base | ||||
@@ -31,7 +25,7 @@ export default { | |||||
data() { | data() { | ||||
const year = new Date().getFullYear(); | const year = new Date().getFullYear(); | ||||
// 城市数组的顺序必须是固定的 | // 城市数组的顺序必须是固定的 | ||||
const cities = ["瑞昌", "邯郸", | |||||
const cities = [ "邯郸", | |||||
// "株洲", "佳木斯", "成都", "凯盛", "蚌埠" | // "株洲", "佳木斯", "成都", "凯盛", "蚌埠" | ||||
]; | ]; | ||||
@@ -80,15 +74,15 @@ export default { | |||||
return [ | return [ | ||||
{ | { | ||||
name: `${new Date().getFullYear()}年目标值`, | name: `${new Date().getFullYear()}年目标值`, | ||||
data: bipvOutput.target, | |||||
data: bipvOutput.target.splice(0, 1), | |||||
}, | }, | ||||
{ | { | ||||
name: `${new Date().getFullYear() - 1}年`, | name: `${new Date().getFullYear() - 1}年`, | ||||
data: bipvOutput.previous, | |||||
data: bipvOutput.previous.splice(0, 1) | |||||
}, | }, | ||||
{ | { | ||||
name: `${new Date().getFullYear()}年`, | name: `${new Date().getFullYear()}年`, | ||||
data: bipvOutput.current, | |||||
data: bipvOutput.current.splice(0, 1), | |||||
}, | }, | ||||
]; | ]; | ||||
}, | }, | ||||
@@ -111,18 +111,16 @@ export default { | |||||
name: '', // this.series[0].name, | name: '', // this.series[0].name, | ||||
type: "bar", | type: "bar", | ||||
barWidth: 12, | barWidth: 12, | ||||
label: { | |||||
show: true, //开启显示 | |||||
position: 'top', //在上方显示 | |||||
textStyle: { //数值样式 | |||||
color: '#DFF1FE', | |||||
fontSize: 16 | |||||
} | |||||
}, | |||||
itemStyle: { | itemStyle: { | ||||
borderRadius: [10, 10, 0, 0], | borderRadius: [10, 10, 0, 0], | ||||
normal: { | |||||
label: { | |||||
show: true, //开启显示 | |||||
position: 'top', //在上方显示 | |||||
textStyle: { //数值样式 | |||||
color: '#DFF1FE', | |||||
fontSize: 16 | |||||
} | |||||
} | |||||
}, | |||||
color: { | color: { | ||||
type: "linear", | type: "linear", | ||||
x: 0, | x: 0, | ||||
@@ -156,8 +154,19 @@ export default { | |||||
name: '', // this.series[1].name, | name: '', // this.series[1].name, | ||||
type: "bar", | type: "bar", | ||||
barWidth: 12, | barWidth: 12, | ||||
label: { | |||||
show: true, //开启显示 | |||||
position: 'top', //在上方显示 | |||||
textStyle: { //数值样式 | |||||
color: '#DFF1FE', | |||||
fontSize: 16 | |||||
} | |||||
}, | |||||
itemStyle: { | itemStyle: { | ||||
borderRadius: [10, 10, 0, 0], | borderRadius: [10, 10, 0, 0], | ||||
// normal: { | |||||
// }, | |||||
color: { | color: { | ||||
type: "linear", | type: "linear", | ||||
x: 0, | x: 0, | ||||
@@ -3,8 +3,8 @@ | |||||
<div id="map-container"> | <div id="map-container"> | ||||
<!-- <div v-if="visible" class="cdLine"></div> --> | <!-- <div v-if="visible" class="cdLine"></div> --> | ||||
<!-- <div v-if="visible" class="zzLine"></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="rcLine"></div> --> | |||||
<!-- <div v-if="visible" class="rcLineTwo"></div> --> | |||||
<div v-if="visible" class="hdLine"></div> | <div v-if="visible" class="hdLine"></div> | ||||
<div v-if="visible" class="hdLineTwo"></div> | <div v-if="visible" class="hdLineTwo"></div> | ||||
<!-- <div v-if="visible" class="ksLine"></div> --> | <!-- <div v-if="visible" class="ksLine"></div> --> | ||||
@@ -39,12 +39,12 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<company-info v-if="visible" :info="info" :position="rcHintPosition" /> | <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" /> | |||||
<!-- <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" /> | <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" /> | |||||
<!-- <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> | </div> | ||||
</template> | </template> | ||||
@@ -69,13 +69,17 @@ const LOCATIONS = [ | |||||
// 蚌埠2 | // 蚌埠2 | ||||
// { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' }, | // { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' }, | ||||
// 江西 瑞昌 | // 江西 瑞昌 | ||||
{ x: 60, y: 58, tx: 68, ty: 52, path: 'factoryData/factory-data' }, | |||||
{ x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:68.8,lty:52, path: 'factoryData/factory-data' }, | |||||
// 湖南 株洲 | // 湖南 株洲 | ||||
// { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' }, | // { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' }, | ||||
// 邯郸 | // 邯郸 | ||||
{ x: 58, y: 45, tx: 47, ty: 34, path: 'factoryData/hdIndex' }, | |||||
{ x: 58, y: 45, tx: 47, ty: 34, lx: 58.7, ly: 34, ltx: 53, lty: 34, path: 'factoryData/hdIndex' }, | |||||
]; | ]; | ||||
// rcLine.style.left = `66.8%`; | |||||
// rcLine.style.top = `52%`; | |||||
// rcLineTwo.className = "rcLineTwo"; | |||||
// rcLineTwo.style.left = `58.7%`; | |||||
// rcLineTwo.style.top = `34%`; | |||||
export default { | export default { | ||||
name: "Index", | name: "Index", | ||||
components: { | components: { | ||||
@@ -247,7 +251,17 @@ export default { | |||||
// templateInfo.items[3].value = this.homeStore.stdOutput.current[5]; | // templateInfo.items[3].value = this.homeStore.stdOutput.current[5]; | ||||
// this.ksInfo = templateInfo; | // this.ksInfo = templateInfo; | ||||
// } | // } | ||||
(position === LOCATIONS[0]) { | |||||
(position === LOCATIONS[0]) { | |||||
const rcLine = document.createElement("div"); | |||||
const rcLineTwo = document.createElement("div"); | |||||
rcLine.className = "rcLine"; | |||||
rcLine.style.left = `${position.lx}%`; | |||||
rcLine.style.top = `${position.ly}%`; | |||||
rcLineTwo.className = "rcLineTwo"; | |||||
rcLineTwo.style.left = `${position.ltx}%`; | |||||
rcLineTwo.style.top = `${position.lty}%`; | |||||
document.getElementById("map-container").appendChild(rcLine); | |||||
document.getElementById("map-container").appendChild(rcLineTwo); | |||||
this.rcHintPosition = position; | this.rcHintPosition = position; | ||||
templateInfo.companyName = "瑞昌中建材"; | templateInfo.companyName = "瑞昌中建材"; | ||||
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[0]; | templateInfo.items[0].value = this.homeStore.ftoInvest?.current[0]; | ||||
@@ -264,6 +278,16 @@ export default { | |||||
// templateInfo.items[3].value = this.homeStore.stdOutput.current[2]; | // templateInfo.items[3].value = this.homeStore.stdOutput.current[2]; | ||||
// this.zzInfo = templateInfo; | // this.zzInfo = templateInfo; | ||||
} else if (position === LOCATIONS[1]) { | } else if (position === LOCATIONS[1]) { | ||||
const hdLine = document.createElement("div"); | |||||
const hdLineTwo = document.createElement("div"); | |||||
hdLine.className = "hdLine"; | |||||
hdLine.style.left = `${position.lx}%`; | |||||
hdLine.style.top = `${position.ly}%`; | |||||
hdLineTwo.className = "hdLineTwo"; | |||||
hdLineTwo.style.left = `${position.ltx}%`; | |||||
hdLineTwo.style.top = `${position.lty}%`; | |||||
document.getElementById("map-container").appendChild(hdLine); | |||||
document.getElementById("map-container").appendChild(hdLineTwo); | |||||
this.hdHintPosition = position; | this.hdHintPosition = position; | ||||
templateInfo.companyName = "邯郸中建材"; | templateInfo.companyName = "邯郸中建材"; | ||||
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[1]; | templateInfo.items[0].value = this.homeStore.ftoInvest?.current[1]; | ||||
@@ -350,22 +374,22 @@ export default { | |||||
.rcLine { | .rcLine { | ||||
display: inline-block; | display: inline-block; | ||||
position: absolute; | position: absolute; | ||||
left: 61%; | |||||
width: 100px; | |||||
top: 61.5%; | |||||
/* left: 61%; */ | |||||
width: 7.9vw; | |||||
/* top: 61.5%; */ | |||||
/* x: 60, y: 58, */ | /* x: 60, y: 58, */ | ||||
height: 1px; | |||||
height: 1px; | |||||
border: 2px dashed #FFCF00; | border: 2px dashed #FFCF00; | ||||
} | } | ||||
.rcLineTwo { | .rcLineTwo { | ||||
position: absolute; | position: absolute; | ||||
left: 66.8%; | |||||
/* left: 66.8%; */ | |||||
width: 1px; | width: 1px; | ||||
top: 52%; | |||||
/* top: 52%; */ | |||||
display: inline-block; | display: inline-block; | ||||
/* // x: 60, y: 58, */ | /* // x: 60, y: 58, */ | ||||
height: 90px; | |||||
height: 5vw; | |||||
border: 2px dashed #FFCF00; | border: 2px dashed #FFCF00; | ||||
} | } | ||||
@@ -376,13 +400,13 @@ export default { | |||||
top: 34%; | top: 34%; | ||||
display: inline-block; | display: inline-block; | ||||
/* // x: 60, y: 58, */ | /* // x: 60, y: 58, */ | ||||
height: 100px; | |||||
height: 6vw; | |||||
border: 2px dashed #FFCF00; | border: 2px dashed #FFCF00; | ||||
} | } | ||||
.hdLineTwo { | .hdLineTwo { | ||||
position: absolute; | position: absolute; | ||||
left: 53%; | left: 53%; | ||||
width: 90px; | |||||
width: 5vw; | |||||
top: 34%; | top: 34%; | ||||
display: inline-block; | display: inline-block; | ||||
/* // x: 60, y: 58, */ | /* // x: 60, y: 58, */ | ||||