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