adjust file structures
This commit is contained in:
		@@ -62,7 +62,7 @@ onMounted(() => {
 | 
			
		||||
 | 
			
		||||
<style scoped>
 | 
			
		||||
.chart {
 | 
			
		||||
  height: 300px;
 | 
			
		||||
  /* height: 300px; */
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.chart-inner {}
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										63
									
								
								src/components/datapage/LatestWeekYield.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										63
									
								
								src/components/datapage/LatestWeekYield.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,63 @@
 | 
			
		||||
export const options = {
 | 
			
		||||
  grid: {
 | 
			
		||||
    top: 10,
 | 
			
		||||
    bottom: 0,
 | 
			
		||||
    left: 12,
 | 
			
		||||
    right: 10,
 | 
			
		||||
    containLabel: true,
 | 
			
		||||
  },
 | 
			
		||||
  xAxis: {
 | 
			
		||||
    type: "category",
 | 
			
		||||
    data: [],
 | 
			
		||||
    axisLabel: {
 | 
			
		||||
      fontSize: 16,
 | 
			
		||||
      color: '#fff8'
 | 
			
		||||
    },
 | 
			
		||||
    axisLine: {
 | 
			
		||||
      show: true,
 | 
			
		||||
      lineStyle: {
 | 
			
		||||
        color: "#e6e6e633",
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  yAxis: {
 | 
			
		||||
    type: "value",
 | 
			
		||||
    axisLine: {
 | 
			
		||||
      show: true,
 | 
			
		||||
      lineStyle: {
 | 
			
		||||
        color: "#e6e6e633",
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
    splitLine: {
 | 
			
		||||
      lineStyle: {
 | 
			
		||||
        color: '#e6e6e633'
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    axisLabel: {
 | 
			
		||||
      fontSize: 16,
 | 
			
		||||
      color: '#fff8'
 | 
			
		||||
    },
 | 
			
		||||
    minInterval: 1,
 | 
			
		||||
    max: 100,
 | 
			
		||||
    min: 1
 | 
			
		||||
  },
 | 
			
		||||
  series: [
 | 
			
		||||
    {
 | 
			
		||||
      data: [],
 | 
			
		||||
      // data: Array.from({ length: 7 }, () => Math.random() * 100),
 | 
			
		||||
      type: "bar",
 | 
			
		||||
      // barWidth: 20,
 | 
			
		||||
      showBackground: true,
 | 
			
		||||
      backgroundStyle: {
 | 
			
		||||
        color: "rgba(180, 180, 180, 0.2)",
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
  ],
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export default function setup(echartInstance, timeArr, dataArr) {
 | 
			
		||||
  const new_options = { ...options };
 | 
			
		||||
  new_options.xAxis.data = timeArr;
 | 
			
		||||
  new_options.series[0].data = dataArr;
 | 
			
		||||
  echartInstance.setOption(new_options);
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										116
									
								
								src/components/datapage/LatestWeekYield.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										116
									
								
								src/components/datapage/LatestWeekYield.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,116 @@
 | 
			
		||||
<script setup>
 | 
			
		||||
import { ref, watch, onMounted, nextTick } from "vue";
 | 
			
		||||
import * as echarts from "echarts";
 | 
			
		||||
import Container from "../Base/Container.vue";
 | 
			
		||||
import { useWsStore } from "../../store";
 | 
			
		||||
import chartSetup from "./LatestWeekYield";
 | 
			
		||||
 | 
			
		||||
const store = useWsStore();
 | 
			
		||||
const chartChart = ref(null);
 | 
			
		||||
const chart = ref(null);
 | 
			
		||||
// 小时数据
 | 
			
		||||
const hourData = ref([
 | 
			
		||||
  // { lineName: '001', hour: '00:00', num: 10 },
 | 
			
		||||
  // { lineName: '002', hour: '00:20', num: 20 },
 | 
			
		||||
  // { lineName: '003', hour: '00:30', num: 30 },
 | 
			
		||||
  // { lineName: '004', hour: '00:40', num: 14 },
 | 
			
		||||
  // { lineName: '005', hour: '00:50', num: 50 }
 | 
			
		||||
]);
 | 
			
		||||
store.$subscribe((mutation, state) => {
 | 
			
		||||
  // console.log("[HourChart] =======>", state.data2.lineHourList?.length);
 | 
			
		||||
  if (
 | 
			
		||||
    state.data2.lineHourList == undefined ||
 | 
			
		||||
    state.data2.lineHourList?.length == 0
 | 
			
		||||
  ) {
 | 
			
		||||
    // console.log("[HourChart] 清除数据");
 | 
			
		||||
    hourData.value.splice(0);
 | 
			
		||||
    if (chart.value) chart.value.dispose();
 | 
			
		||||
    return;
 | 
			
		||||
  }
 | 
			
		||||
  // console.log("[HourChart]  ===> 有数据: ", state.data2.lineHourList);
 | 
			
		||||
  hourData.value = (state.data2?.lineHourList ?? [
 | 
			
		||||
    // { lineName: '001', hour: '00:00', num: 10 },
 | 
			
		||||
    // { lineName: '002', hour: '00:20', num: 20 },
 | 
			
		||||
    // { lineName: '003', hour: '00:30', num: 30 },
 | 
			
		||||
    // { lineName: '004', hour: '00:40', num: 14 },
 | 
			
		||||
    // { lineName: '005', hour: '00:50', num: 50 },
 | 
			
		||||
  ]).map((item, index) => ({
 | 
			
		||||
    id: `${item.lineName}_${index}`,
 | 
			
		||||
    hour: item.hour || `${index}`.padStart(2, "0"),
 | 
			
		||||
    data: item.num || Math.floor(Math.random() * 100),
 | 
			
		||||
  }));
 | 
			
		||||
  setupChart();
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
function setupChart() {
 | 
			
		||||
  if (chart.value) chart.value.dispose();
 | 
			
		||||
  nextTick(() => {
 | 
			
		||||
    chart.value = echarts.init(chartChart.value);
 | 
			
		||||
    // console.log("[HourChart]  ===> 设置chart: ", chart.value, hourData.value.map((item) => item.hour), hourData.value.map((item) => item.data));
 | 
			
		||||
    chartSetup(
 | 
			
		||||
      chart.value,
 | 
			
		||||
      hourData.value.map((item) => item.hour),
 | 
			
		||||
      hourData.value.map((item) => item.data)
 | 
			
		||||
    );
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  // chart.value.setOption({
 | 
			
		||||
  //   xAxis: {
 | 
			
		||||
  //     type: "category",
 | 
			
		||||
  //     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
 | 
			
		||||
  //   },
 | 
			
		||||
  //   yAxis: {
 | 
			
		||||
  //     type: "value",
 | 
			
		||||
  //   },
 | 
			
		||||
  //   series: [
 | 
			
		||||
  //     {
 | 
			
		||||
  //       data: [150, 230, 224, 218, 135, 147, 260],
 | 
			
		||||
  //       type: "line",
 | 
			
		||||
  //     },
 | 
			
		||||
  //   ],
 | 
			
		||||
  // });
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
onMounted(() => {
 | 
			
		||||
  chartChart.value.classList.add("h-full");
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <Container class="chart" title="小时数据" icon="cube">
 | 
			
		||||
    <div ref="chartChart" class="chart-chart" style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"></div>
 | 
			
		||||
    <p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
 | 
			
		||||
      暂无数据
 | 
			
		||||
    </p>
 | 
			
		||||
  </Container>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<style scoped>
 | 
			
		||||
.chart {
 | 
			
		||||
  height: 300px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.chart-chart {
 | 
			
		||||
  height: 100%;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
<style>
 | 
			
		||||
.empty-data-hint {
 | 
			
		||||
  color: #c5c5c5;
 | 
			
		||||
  letter-spacing: 1px;
 | 
			
		||||
  font-size: 24px;
 | 
			
		||||
  line-height: 1.25;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  position: absolute;
 | 
			
		||||
  top: 0;
 | 
			
		||||
  left: 0;
 | 
			
		||||
  right: 0;
 | 
			
		||||
  bottom: 0;
 | 
			
		||||
  margin: auto;
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  width: 200px;
 | 
			
		||||
  height: 32px;
 | 
			
		||||
  user-select: none;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										73
									
								
								src/components/datapage/LineMonth.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										73
									
								
								src/components/datapage/LineMonth.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,73 @@
 | 
			
		||||
<script setup>
 | 
			
		||||
import { ref, onMounted, nextTick } from "vue";
 | 
			
		||||
import * as echarts from "echarts";
 | 
			
		||||
import Container from "../Base/Container.vue";
 | 
			
		||||
import { useWsStore } from "../../store";
 | 
			
		||||
import setupFn from "./LineMonthOptions";
 | 
			
		||||
 | 
			
		||||
const store = useWsStore();
 | 
			
		||||
const chartChart = ref(null);
 | 
			
		||||
const chart = ref(null);
 | 
			
		||||
 | 
			
		||||
const monthData = ref(null);
 | 
			
		||||
store.$subscribe((mutation, state) => {
 | 
			
		||||
  console.log("[ChartMonth]  ===>  state: ", state.data2.monthlyTarget);
 | 
			
		||||
  if (
 | 
			
		||||
    state.data2.monthlyTarget == undefined ||
 | 
			
		||||
    state.data2.monthlyTarget?.length == 0
 | 
			
		||||
  ) {
 | 
			
		||||
    console.log("[ChartMonth]  ===>  清除状态");
 | 
			
		||||
    monthData.value = null;
 | 
			
		||||
    if (chart.value) chart.value.dispose();
 | 
			
		||||
    return;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  if (!state.data2.monthlyTarget[0]) return;
 | 
			
		||||
  const { targetProduction, nowProduction, targetYield, nowYield } =
 | 
			
		||||
    state.data2.monthlyTarget[0];
 | 
			
		||||
  monthData.value = { targetProduction, nowProduction, targetYield, nowYield };
 | 
			
		||||
  setupChart();
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// 绿色:24FF5E
 | 
			
		||||
// 黄色:FFB524
 | 
			
		||||
// 红色:FF3737
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
function setupChart() {
 | 
			
		||||
  if (chart.value) chart.value.dispose();
 | 
			
		||||
  nextTick(() => {
 | 
			
		||||
    console.log("[ChartMonth]  ===>  初始化表格: ", monthData.value);
 | 
			
		||||
    chart.value = echarts.init(chartChart.value);
 | 
			
		||||
    setupFn(chart.value, monthData.value);
 | 
			
		||||
  });
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
onMounted(() => {
 | 
			
		||||
  chartChart.value.classList.add("h-full");
 | 
			
		||||
  // nextTick(() => {
 | 
			
		||||
  //   setupChart();
 | 
			
		||||
  // })
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <Container class="chart" title="本月班组情况" icon="cube">
 | 
			
		||||
    <div ref="chartChart" class="chart-chart" style="{opacity: (monthData) ? 1 : 0}"></div>
 | 
			
		||||
    <p v-show="!monthData" class="empty-data-hint">暂无数据</p>
 | 
			
		||||
  </Container>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<style scoped>
 | 
			
		||||
.chart {
 | 
			
		||||
  height: 300px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.chart-inner {}
 | 
			
		||||
 | 
			
		||||
.chart-chart {
 | 
			
		||||
  height: 100%;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										176
									
								
								src/components/datapage/LineMonthOptions.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										176
									
								
								src/components/datapage/LineMonthOptions.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,176 @@
 | 
			
		||||
export const options = {
 | 
			
		||||
  grid: {
 | 
			
		||||
    top: 0,
 | 
			
		||||
    left: 0,
 | 
			
		||||
    right: 0,
 | 
			
		||||
    bottom: 0
 | 
			
		||||
  },
 | 
			
		||||
  title: [
 | 
			
		||||
    {
 | 
			
		||||
      text: "当前产量:" + 100 + " 片",
 | 
			
		||||
      left: "27%",
 | 
			
		||||
      textAlign: "center",
 | 
			
		||||
      top: "70%",
 | 
			
		||||
      textStyle: {
 | 
			
		||||
        fontSize: 16,
 | 
			
		||||
        color: '#fffa'
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      text: "目标产量:" + 100 + " 片",
 | 
			
		||||
      left: "27%",
 | 
			
		||||
      textAlign: "center",
 | 
			
		||||
      top: "85%",
 | 
			
		||||
      textStyle: {
 | 
			
		||||
        fontSize: 16,
 | 
			
		||||
        color: '#fffa'
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      text: "当前成品率:" + 22 + "%",
 | 
			
		||||
      left: "72%",
 | 
			
		||||
      textAlign: "center",
 | 
			
		||||
      top: "70%",
 | 
			
		||||
      textStyle: {
 | 
			
		||||
        fontSize: 16,
 | 
			
		||||
        color: '#fffa'
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      text: "目标成品率:" + 22 + "%",
 | 
			
		||||
      left: "72%",
 | 
			
		||||
      textAlign: "center",
 | 
			
		||||
      top: "85%",
 | 
			
		||||
      textStyle: {
 | 
			
		||||
        fontSize: 16,
 | 
			
		||||
        color: '#fffa'
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
  ],
 | 
			
		||||
  series: [
 | 
			
		||||
    {
 | 
			
		||||
      type: "gauge",
 | 
			
		||||
      startAngle: 90,
 | 
			
		||||
      center: ["27%", "35%"],
 | 
			
		||||
      endAngle: -270,
 | 
			
		||||
      radius: "55%",
 | 
			
		||||
      progress: {
 | 
			
		||||
        show: true,
 | 
			
		||||
        width: 12,
 | 
			
		||||
      },
 | 
			
		||||
      axisLine: {
 | 
			
		||||
        lineStyle: {
 | 
			
		||||
          width: 12,
 | 
			
		||||
        },
 | 
			
		||||
      },
 | 
			
		||||
      pointer: {
 | 
			
		||||
        show: false,
 | 
			
		||||
      },
 | 
			
		||||
      axisTick: {
 | 
			
		||||
        show: false,
 | 
			
		||||
      },
 | 
			
		||||
      splitLine: {
 | 
			
		||||
        show: false,
 | 
			
		||||
      },
 | 
			
		||||
      axisLabel: {
 | 
			
		||||
        show: false,
 | 
			
		||||
      },
 | 
			
		||||
      detail: {
 | 
			
		||||
        valueAnimation: true,
 | 
			
		||||
        fontSize: 16,
 | 
			
		||||
        offsetCenter: [0, "0%"],
 | 
			
		||||
        formatter: "{value}%",
 | 
			
		||||
        color: "rgba(255, 255, 255, 1)",
 | 
			
		||||
      },
 | 
			
		||||
      data: [
 | 
			
		||||
        {
 | 
			
		||||
          // value: (nowProduction / targetProduction * 100).toFixed(1),
 | 
			
		||||
          value: 100,
 | 
			
		||||
        },
 | 
			
		||||
      ],
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      type: "gauge",
 | 
			
		||||
      startAngle: 90,
 | 
			
		||||
      center: ["73%", "35%"],
 | 
			
		||||
      endAngle: -270,
 | 
			
		||||
      radius: "55%",
 | 
			
		||||
      progress: {
 | 
			
		||||
        show: true,
 | 
			
		||||
        width: 12,
 | 
			
		||||
      },
 | 
			
		||||
      axisLine: {
 | 
			
		||||
        lineStyle: {
 | 
			
		||||
          width: 12,
 | 
			
		||||
        },
 | 
			
		||||
      },
 | 
			
		||||
      pointer: {
 | 
			
		||||
        show: false,
 | 
			
		||||
      },
 | 
			
		||||
      axisTick: {
 | 
			
		||||
        show: false,
 | 
			
		||||
      },
 | 
			
		||||
      splitLine: {
 | 
			
		||||
        show: false,
 | 
			
		||||
      },
 | 
			
		||||
      axisLabel: {
 | 
			
		||||
        show: false,
 | 
			
		||||
      },
 | 
			
		||||
      detail: {
 | 
			
		||||
        show: true,
 | 
			
		||||
        valueAnimation: true,
 | 
			
		||||
        fontSize: 16,
 | 
			
		||||
        offsetCenter: [0, "0%"],
 | 
			
		||||
        // formatter: 0 + "%",
 | 
			
		||||
        // formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
 | 
			
		||||
        color: "#fff",
 | 
			
		||||
      },
 | 
			
		||||
      data: [
 | 
			
		||||
        {
 | 
			
		||||
          // value: targetYield,
 | 
			
		||||
          value: 100,
 | 
			
		||||
          name: "Perfect",
 | 
			
		||||
          title: {
 | 
			
		||||
            show: false,
 | 
			
		||||
          },
 | 
			
		||||
          detail: {
 | 
			
		||||
            show: false,
 | 
			
		||||
            valueAnimation: true,
 | 
			
		||||
            offsetCenter: ["0%", "-20%"],
 | 
			
		||||
          },
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          value: 100,
 | 
			
		||||
          // value: nowYield,
 | 
			
		||||
          name: "Good",
 | 
			
		||||
          title: {
 | 
			
		||||
            show: false,
 | 
			
		||||
          },
 | 
			
		||||
          detail: {
 | 
			
		||||
            show: false,
 | 
			
		||||
            valueAnimation: true,
 | 
			
		||||
            offsetCenter: ["0%", "10%"],
 | 
			
		||||
          },
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          value: 0,
 | 
			
		||||
          detail: {
 | 
			
		||||
            show: true,
 | 
			
		||||
          },
 | 
			
		||||
        },
 | 
			
		||||
      ],
 | 
			
		||||
    },
 | 
			
		||||
  ],
 | 
			
		||||
};
 | 
			
		||||
export default function setup(echartInstance, data) {
 | 
			
		||||
  const new_options = { ...options };
 | 
			
		||||
  new_options.title[0].text = "当前产量:" + data.nowProduction + " 片";
 | 
			
		||||
  new_options.title[1].text = "目标产量:" + data.targetProduction + " 片";
 | 
			
		||||
  new_options.title[2].text = "当前成品率:" + data.nowYield + "%";
 | 
			
		||||
  new_options.title[3].text = "目标成品率:" + data.targetYield + "%";
 | 
			
		||||
  new_options.series[0].data[0].value = (data.nowProduction / data.targetProduction * 100).toFixed(1)
 | 
			
		||||
  new_options.series[1].data[0].value = data.targetYield
 | 
			
		||||
  new_options.series[1].data[1].value = data.nowYield
 | 
			
		||||
  new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%',
 | 
			
		||||
  echartInstance.setOption(new_options);
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										73
									
								
								src/components/datapage/LineToday.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										73
									
								
								src/components/datapage/LineToday.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,73 @@
 | 
			
		||||
<script setup>
 | 
			
		||||
import { ref, onMounted, nextTick } from "vue";
 | 
			
		||||
import * as echarts from "echarts";
 | 
			
		||||
import Container from "../Base/Container.vue";
 | 
			
		||||
import { useWsStore } from "../../store";
 | 
			
		||||
import setupFn from "./LineTodayOptions";
 | 
			
		||||
 | 
			
		||||
const store = useWsStore();
 | 
			
		||||
const chartChart = ref(null);
 | 
			
		||||
const chart = ref(null);
 | 
			
		||||
 | 
			
		||||
const monthData = ref(null);
 | 
			
		||||
store.$subscribe((mutation, state) => {
 | 
			
		||||
  console.log("[ChartMonth]  ===>  state: ", state.data2.monthlyTarget);
 | 
			
		||||
  if (
 | 
			
		||||
    state.data2.monthlyTarget == undefined ||
 | 
			
		||||
    state.data2.monthlyTarget?.length == 0
 | 
			
		||||
  ) {
 | 
			
		||||
    console.log("[ChartMonth]  ===>  清除状态");
 | 
			
		||||
    monthData.value = null;
 | 
			
		||||
    if (chart.value) chart.value.dispose();
 | 
			
		||||
    return;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  if (!state.data2.monthlyTarget[0]) return;
 | 
			
		||||
  const { targetProduction, nowProduction, targetYield, nowYield } =
 | 
			
		||||
    state.data2.monthlyTarget[0];
 | 
			
		||||
  monthData.value = { targetProduction, nowProduction, targetYield, nowYield };
 | 
			
		||||
  setupChart();
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// 绿色:24FF5E
 | 
			
		||||
// 黄色:FFB524
 | 
			
		||||
// 红色:FF3737
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
function setupChart() {
 | 
			
		||||
  if (chart.value) chart.value.dispose();
 | 
			
		||||
  nextTick(() => {
 | 
			
		||||
    console.log("[ChartMonth]  ===>  初始化表格: ", monthData.value);
 | 
			
		||||
    chart.value = echarts.init(chartChart.value);
 | 
			
		||||
    setupFn(chart.value, monthData.value);
 | 
			
		||||
  });
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
onMounted(() => {
 | 
			
		||||
  chartChart.value.classList.add("h-full");
 | 
			
		||||
  // nextTick(() => {
 | 
			
		||||
  //   setupChart();
 | 
			
		||||
  // })
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <Container class="chart" title="本月班组情况" icon="cube">
 | 
			
		||||
    <div ref="chartChart" class="chart-chart" style="{opacity: (monthData) ? 1 : 0}"></div>
 | 
			
		||||
    <p v-show="!monthData" class="empty-data-hint">暂无数据</p>
 | 
			
		||||
  </Container>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<style scoped>
 | 
			
		||||
.chart {
 | 
			
		||||
  height: 300px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.chart-inner {}
 | 
			
		||||
 | 
			
		||||
.chart-chart {
 | 
			
		||||
  height: 100%;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										176
									
								
								src/components/datapage/LineTodayOptions.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										176
									
								
								src/components/datapage/LineTodayOptions.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,176 @@
 | 
			
		||||
export const options = {
 | 
			
		||||
  grid: {
 | 
			
		||||
    top: 0,
 | 
			
		||||
    left: 0,
 | 
			
		||||
    right: 0,
 | 
			
		||||
    bottom: 0
 | 
			
		||||
  },
 | 
			
		||||
  title: [
 | 
			
		||||
    {
 | 
			
		||||
      text: "当前产量:" + 100 + " 片",
 | 
			
		||||
      left: "27%",
 | 
			
		||||
      textAlign: "center",
 | 
			
		||||
      top: "70%",
 | 
			
		||||
      textStyle: {
 | 
			
		||||
        fontSize: 16,
 | 
			
		||||
        color: '#fffa'
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      text: "目标产量:" + 100 + " 片",
 | 
			
		||||
      left: "27%",
 | 
			
		||||
      textAlign: "center",
 | 
			
		||||
      top: "85%",
 | 
			
		||||
      textStyle: {
 | 
			
		||||
        fontSize: 16,
 | 
			
		||||
        color: '#fffa'
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      text: "当前成品率:" + 22 + "%",
 | 
			
		||||
      left: "72%",
 | 
			
		||||
      textAlign: "center",
 | 
			
		||||
      top: "70%",
 | 
			
		||||
      textStyle: {
 | 
			
		||||
        fontSize: 16,
 | 
			
		||||
        color: '#fffa'
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      text: "目标成品率:" + 22 + "%",
 | 
			
		||||
      left: "72%",
 | 
			
		||||
      textAlign: "center",
 | 
			
		||||
      top: "85%",
 | 
			
		||||
      textStyle: {
 | 
			
		||||
        fontSize: 16,
 | 
			
		||||
        color: '#fffa'
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
  ],
 | 
			
		||||
  series: [
 | 
			
		||||
    {
 | 
			
		||||
      type: "gauge",
 | 
			
		||||
      startAngle: 90,
 | 
			
		||||
      center: ["27%", "35%"],
 | 
			
		||||
      endAngle: -270,
 | 
			
		||||
      radius: "55%",
 | 
			
		||||
      progress: {
 | 
			
		||||
        show: true,
 | 
			
		||||
        width: 12,
 | 
			
		||||
      },
 | 
			
		||||
      axisLine: {
 | 
			
		||||
        lineStyle: {
 | 
			
		||||
          width: 12,
 | 
			
		||||
        },
 | 
			
		||||
      },
 | 
			
		||||
      pointer: {
 | 
			
		||||
        show: false,
 | 
			
		||||
      },
 | 
			
		||||
      axisTick: {
 | 
			
		||||
        show: false,
 | 
			
		||||
      },
 | 
			
		||||
      splitLine: {
 | 
			
		||||
        show: false,
 | 
			
		||||
      },
 | 
			
		||||
      axisLabel: {
 | 
			
		||||
        show: false,
 | 
			
		||||
      },
 | 
			
		||||
      detail: {
 | 
			
		||||
        valueAnimation: true,
 | 
			
		||||
        fontSize: 16,
 | 
			
		||||
        offsetCenter: [0, "0%"],
 | 
			
		||||
        formatter: "{value}%",
 | 
			
		||||
        color: "rgba(255, 255, 255, 1)",
 | 
			
		||||
      },
 | 
			
		||||
      data: [
 | 
			
		||||
        {
 | 
			
		||||
          // value: (nowProduction / targetProduction * 100).toFixed(1),
 | 
			
		||||
          value: 100,
 | 
			
		||||
        },
 | 
			
		||||
      ],
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      type: "gauge",
 | 
			
		||||
      startAngle: 90,
 | 
			
		||||
      center: ["73%", "35%"],
 | 
			
		||||
      endAngle: -270,
 | 
			
		||||
      radius: "55%",
 | 
			
		||||
      progress: {
 | 
			
		||||
        show: true,
 | 
			
		||||
        width: 12,
 | 
			
		||||
      },
 | 
			
		||||
      axisLine: {
 | 
			
		||||
        lineStyle: {
 | 
			
		||||
          width: 12,
 | 
			
		||||
        },
 | 
			
		||||
      },
 | 
			
		||||
      pointer: {
 | 
			
		||||
        show: false,
 | 
			
		||||
      },
 | 
			
		||||
      axisTick: {
 | 
			
		||||
        show: false,
 | 
			
		||||
      },
 | 
			
		||||
      splitLine: {
 | 
			
		||||
        show: false,
 | 
			
		||||
      },
 | 
			
		||||
      axisLabel: {
 | 
			
		||||
        show: false,
 | 
			
		||||
      },
 | 
			
		||||
      detail: {
 | 
			
		||||
        show: true,
 | 
			
		||||
        valueAnimation: true,
 | 
			
		||||
        fontSize: 16,
 | 
			
		||||
        offsetCenter: [0, "0%"],
 | 
			
		||||
        // formatter: 0 + "%",
 | 
			
		||||
        // formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
 | 
			
		||||
        color: "#fff",
 | 
			
		||||
      },
 | 
			
		||||
      data: [
 | 
			
		||||
        {
 | 
			
		||||
          // value: targetYield,
 | 
			
		||||
          value: 100,
 | 
			
		||||
          name: "Perfect",
 | 
			
		||||
          title: {
 | 
			
		||||
            show: false,
 | 
			
		||||
          },
 | 
			
		||||
          detail: {
 | 
			
		||||
            show: false,
 | 
			
		||||
            valueAnimation: true,
 | 
			
		||||
            offsetCenter: ["0%", "-20%"],
 | 
			
		||||
          },
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          value: 100,
 | 
			
		||||
          // value: nowYield,
 | 
			
		||||
          name: "Good",
 | 
			
		||||
          title: {
 | 
			
		||||
            show: false,
 | 
			
		||||
          },
 | 
			
		||||
          detail: {
 | 
			
		||||
            show: false,
 | 
			
		||||
            valueAnimation: true,
 | 
			
		||||
            offsetCenter: ["0%", "10%"],
 | 
			
		||||
          },
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          value: 0,
 | 
			
		||||
          detail: {
 | 
			
		||||
            show: true,
 | 
			
		||||
          },
 | 
			
		||||
        },
 | 
			
		||||
      ],
 | 
			
		||||
    },
 | 
			
		||||
  ],
 | 
			
		||||
};
 | 
			
		||||
export default function setup(echartInstance, data) {
 | 
			
		||||
  const new_options = { ...options };
 | 
			
		||||
  new_options.title[0].text = "当前产量:" + data.nowProduction + " 片";
 | 
			
		||||
  new_options.title[1].text = "目标产量:" + data.targetProduction + " 片";
 | 
			
		||||
  new_options.title[2].text = "当前成品率:" + data.nowYield + "%";
 | 
			
		||||
  new_options.title[3].text = "目标成品率:" + data.targetYield + "%";
 | 
			
		||||
  new_options.series[0].data[0].value = (data.nowProduction / data.targetProduction * 100).toFixed(1)
 | 
			
		||||
  new_options.series[1].data[0].value = data.targetYield
 | 
			
		||||
  new_options.series[1].data[1].value = data.nowYield
 | 
			
		||||
  new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%',
 | 
			
		||||
  echartInstance.setOption(new_options);
 | 
			
		||||
}
 | 
			
		||||
@@ -3,17 +3,25 @@
 | 
			
		||||
import HourChart from "../components/datapage/HourChart.vue";
 | 
			
		||||
import TeamChartDay from "../components/datapage/TeamChartDay.vue";
 | 
			
		||||
import TeamChartMonth from "../components/datapage/TeamChartMonth.vue";
 | 
			
		||||
 | 
			
		||||
import LatestWeekYield from '../components/datapage/LatestWeekYield.vue'
 | 
			
		||||
import LineToday from '../components/datapage/LineToday.vue';
 | 
			
		||||
import LineMonth from '../components/datapage/LineMonth.vue';
 | 
			
		||||
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="data-page">
 | 
			
		||||
    <!-- 小时数据 -->
 | 
			
		||||
    <HourChart />
 | 
			
		||||
    <!-- 近7日产量 -->
 | 
			
		||||
    <LatestWeekYield />
 | 
			
		||||
    <!-- 本日生产线情况 -->
 | 
			
		||||
    <LineToday />
 | 
			
		||||
    <!-- 本月生产线情况 -->
 | 
			
		||||
    <LineMonth />
 | 
			
		||||
    <!-- 本日班组情况 -->
 | 
			
		||||
    <TeamChartDay />
 | 
			
		||||
    <TeamChartMonth />
 | 
			
		||||
    <HourChart />
 | 
			
		||||
    <TeamChartDay />
 | 
			
		||||
    <!-- 本月班组情况 -->
 | 
			
		||||
    <TeamChartMonth />
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user