Merge pull request '报表样式' (#41) from projects/mescc/zjl into projects/mescc/develop

Reviewed-on: #41
2024-06-13 17:13:17 +08:00 · 2024-06-13 17:13:17 +08:00 · 7232486f8d
--- a/src/views/report/chipOEEBM/index.vue
+++ b/src/views/report/chipOEEBM/index.vue
@ -114,15 +114,14 @@ export default {
        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
        xData: ["成都", "邯郸", "瑞昌"],
        yName: "单位/%",
-        yAxisLabel: {
-          formatter: function (value) {
-            return value + ".00%";
-          },
-        },
        series: [
          {
            name: "2024年4月目标值",
-            data: [85, 85, 85],
+            data: [
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+            ],
            type: "line",
            symbol: "circle",
            symbolSize: 6,
@ -136,7 +135,11 @@ export default {
          },
          {
            name: "2023年4月",
-            data: [57.5, 21.66, 18.4],
+            data: [
+              { name: "%", value: 57.5 },
+              { name: "%", value: 21.66 },
+              { name: "%", value: 18.4 },
+            ],
            type: "bar",
            barWidth: 20,
            label: {
@ -150,7 +153,11 @@ export default {
          },
          {
            name: "2024年4月",
-            data: [23.33, 7.02, 80.2],
+            data: [
+              { name: "%", value: 23.33 },
+              { name: "%", value: 7.02 },
+              { name: "%", value: 80.2 },
+            ],
            type: "bar",
            barWidth: 20,
            label: {
--- a/src/views/report/chipOutputBM/index.vue
+++ b/src/views/report/chipOutputBM/index.vue
@ -114,11 +114,6 @@ export default {
        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
        xData: ["成都", "邯郸", "瑞昌"],
        yName: "单位/片",
-        yAxisLabel: {
-          formatter: function (value) {
-            return value;
-          },
-        },
        series: [
          {
            name: "2024年4月目标值",
--- a/src/views/report/chipPerCapitaBM/index.vue
+++ b/src/views/report/chipPerCapitaBM/index.vue
@ -114,11 +114,6 @@ export default {
        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
        xData: ["成都", "邯郸", "瑞昌"],
        yName: "单位/片",
-        yAxisLabel: {
-          formatter: function (value) {
-            return value;
-          },
-        },
        series: [
          {
            name: "2024年4月目标值",
--- a/src/views/report/chipYieldBM/index.vue
+++ b/src/views/report/chipYieldBM/index.vue
@ -114,15 +114,14 @@ export default {
        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
        xData: ["成都", "邯郸", "瑞昌"],
        yName: "单位/%",
-        yAxisLabel: {
-          formatter: function (value) {
-            return value + ".00%";
-          },
-        },
        series: [
          {
            name: "2024年4月目标值",
-            data: [85, 85, 85],
+            data: [
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+            ],
            type: "line",
            symbol: "circle",
            symbolSize: 6,
@ -136,7 +135,11 @@ export default {
          },
          {
            name: "2023年4月",
-            data: [57.5, 21.66, 18.4],
+            data: [
+              { name: "%", value: 57.5 },
+              { name: "%", value: 21.66 },
+              { name: "%", value: 18.4 },
+            ],
            type: "bar",
            barWidth: 20,
            label: {
@ -150,7 +153,11 @@ export default {
          },
          {
            name: "2024年4月",
-            data: [23.33, 7.02, 80.2],
+            data: [
+              { name: "%", value: 23.33 },
+              { name: "%", value: 7.02 },
+              { name: "%", value: 80.2 },
+            ],
            type: "bar",
            barWidth: 20,
            label: {
--- a/src/views/report/components/bmLineBar.vue
+++ b/src/views/report/components/bmLineBar.vue
@ -1,30 +1,38 @@
 <template>
  <div>
+    <!-- 暂无数据 -->
+    <div
+      class="no-data-bg"
+      style="position: relative; left: 50%; transform: translateX(-50%)"
+      v-show="this.chartMsg.series.length === 0"
+    ></div>
    <!-- 图例 -->
-    <div class="legend">
-      <span class="item" v-for="item in legendList" :key="item.id">
-        <span
-          v-if="item.type === 1"
-          class="block"
-          :style="{ backgroundColor: item.color }"
-        ></span>
-        <span
-          v-if="item.type === 2"
-          class="line"
-          :style="{ backgroundColor: item.color }"
-        >
+    <div v-show="this.chartMsg.series.length > 0">
+      <div class="legend">
+        <span class="item" v-for="item in legendList" :key="item.id">
          <span
-            class="line-block"
+            v-if="item.type === 1"
+            class="block"
            :style="{ backgroundColor: item.color }"
          ></span>
-        </span>
-        {{ item.name }}</span
-      >
+          <span
+            v-if="item.type === 2"
+            class="line"
+            :style="{ backgroundColor: item.color }"
+          >
+            <span
+              class="line-block"
+              :style="{ backgroundColor: item.color }"
+            ></span>
+          </span>
+          {{ item.name }}</span
+        >
+      </div>
+      <div
+        :id="chartId"
+        :style="{ width: '100%', height: chartHeight + 'px' }"
+      ></div>
    </div>
-    <div
-      :id="chartId"
-      :style="{ width: '100%', height: chartHeight + 'px' }"
-    ></div>
  </div>
 </template>
 <script>
@ -53,14 +61,18 @@ export default {
            },
          },
          formatter: function (params) {
-            console.log(params);
-            var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].name}</span>`;
+            var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`;
            for (var i = 0, l = params.length; i < l; i++) {
              res +=
                "<br/>" +
                `<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
                `<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
-                `<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].value}</span>`;
+                `<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${
+                  params[i].name === "%"
+                    ? (params[i].value ? params[i].value.toFixed(2) : 0.0) +
+                      params[i].name
+                    : params[i].value
+                }</span>`;
            }
            return res;
          },
@ -121,7 +133,7 @@ export default {
    },
    chartMsg: {
      handler(newVal) {
-        this.getMes();
+        this.canvasReset();
      },
      deep: true,
    },
@ -144,7 +156,23 @@ export default {
      this.option.color = this.chartMsg.color;
      this.option.xAxis.data = this.chartMsg.xData;
      this.option.yAxis.name = this.chartMsg.yName;
-      this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
+      if (
+        this.chartMsg.series.length > 0 &&
+        this.chartMsg.series[0].data[0].name === "%"
+      ) {
+        this.option.yAxis.axisLabel = {
+          formatter: function (value) {
+            return value + ".00%";
+          },
+        };
+      } else {
+        this.option.yAxis.axisLabel = {
+          formatter: function (value) {
+            return value;
+          },
+        };
+      }
+      // this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
      this.option.series = this.chartMsg.series;
      this.myChart.setOption(this.option);
    },
--- a/src/views/report/conversionEfficiencyBM/index.vue
+++ b/src/views/report/conversionEfficiencyBM/index.vue
@ -114,15 +114,14 @@ export default {
        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
        xData: ["成都", "邯郸", "瑞昌"],
        yName: "单位/%",
-        yAxisLabel: {
-          formatter: function (value) {
-            return value + ".00%";
-          },
-        },
        series: [
          {
            name: "2024年4月目标值",
-            data: [85, 85, 85],
+            data: [
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+            ],
            type: "line",
            symbol: "circle",
            symbolSize: 6,
@ -136,7 +135,11 @@ export default {
          },
          {
            name: "2023年4月",
-            data: [57.5, 21.66, 18.4],
+            data: [
+              { name: "%", value: 57.5 },
+              { name: "%", value: 21.66 },
+              { name: "%", value: 18.4 },
+            ],
            type: "bar",
            barWidth: 20,
            label: {
@ -150,7 +153,11 @@ export default {
          },
          {
            name: "2024年4月",
-            data: [23.33, 7.02, 80.2],
+            data: [
+              { name: "%", value: 23.33 },
+              { name: "%", value: 7.02 },
+              { name: "%", value: 80.2 },
+            ],
            type: "bar",
            barWidth: 20,
            label: {
--- a/src/views/report/ftoOutputBM/index.vue
+++ b/src/views/report/ftoOutputBM/index.vue
@ -114,11 +114,6 @@ export default {
        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
        xData: ["成都", "邯郸", "瑞昌"],
        yName: "单位/片",
-        yAxisLabel: {
-          formatter: function (value) {
-            return value;
-          },
-        },
        series: [
          {
            name: "2024年4月目标值",
@ -212,10 +207,58 @@ export default {
    },
    getSearch(val) {
      console.log(val);
-      console.log("=========================");
+      console.log("==========下面是测试代码，需删除");
+      this.chartMsg.series = [];
    },
    handleExport() {
-      console.log("导出");
+      console.log("导出=====下面是测试代码，需删除");
+      this.chartMsg.series = [
+        {
+          name: "2024年4月目标值1",
+          // data: [3000, 2000, 3000],
+          // data: [6800, 5000, 8900],
+          // data: [12000, 17000, 19000],
+          data: [560000, 540000, 600000],
+          type: "line",
+          symbol: "circle",
+          symbolSize: 6,
+          label: {
+            show: true,
+            color: "#FFAE17",
+          },
+        },
+        {
+          name: "2023年4月",
+          // data: [2100, 800, 1500],
+          // data: [9500, 7200, 9901],
+          // data: [14666, 15000, 17888],
+          data: [550000, 456666, 590000],
+          type: "bar",
+          barWidth: 20,
+          label: {
+            show: true,
+            // position: [-5, -16],
+            // position: [-5, -16],
+            // position: [-10, -16],
+            position: [-17, -16],
+            color: "#68C483",
+          },
+        },
+        {
+          name: "2024年4月",
+          // data: [2100, 900, 1300],
+          // data: [9100, 7300, 9700],
+          // data: [14666, 15300, 18000],
+          data: [556666, 456666, 650000],
+          type: "bar",
+          barWidth: 20,
+          label: {
+            show: true,
+            position: [0, -16],
+            color: "#288AFF",
+          },
+        },
+      ];
    },
  },
 };
--- a/src/views/report/packageOEEBM/index.vue
+++ b/src/views/report/packageOEEBM/index.vue
@ -114,15 +114,14 @@ export default {
        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
        xData: ["成都", "邯郸", "瑞昌"],
        yName: "单位/%",
-        yAxisLabel: {
-          formatter: function (value) {
-            return value + ".00%";
-          },
-        },
        series: [
          {
            name: "2024年4月目标值",
-            data: [85, 85, 85],
+            data: [
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+            ],
            type: "line",
            symbol: "circle",
            symbolSize: 6,
@ -136,7 +135,11 @@ export default {
          },
          {
            name: "2023年4月",
-            data: [57.5, 21.66, 18.4],
+            data: [
+              { name: "%", value: 57.5 },
+              { name: "%", value: 21.66 },
+              { name: "%", value: 18.4 },
+            ],
            type: "bar",
            barWidth: 20,
            label: {
@ -150,7 +153,11 @@ export default {
          },
          {
            name: "2024年4月",
-            data: [23.33, 7.02, 80.2],
+            data: [
+              { name: "%", value: 23.33 },
+              { name: "%", value: 7.02 },
+              { name: "%", value: 80.2 },
+            ],
            type: "bar",
            barWidth: 20,
            label: {
--- a/src/views/report/scOutputBM/index.vue
+++ b/src/views/report/scOutputBM/index.vue
@ -114,11 +114,6 @@ export default {
        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
        xData: ["成都", "邯郸", "瑞昌"],
        yName: "单位/片",
-        yAxisLabel: {
-          formatter: function (value) {
-            return value;
-          },
-        },
        series: [
          {
            name: "2024年4月目标值",
--- a/src/views/report/scPerCapitaBM/index.vue
+++ b/src/views/report/scPerCapitaBM/index.vue
@ -114,11 +114,6 @@ export default {
        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
        xData: ["成都", "邯郸", "瑞昌"],
        yName: "单位/片",
-        yAxisLabel: {
-          formatter: function (value) {
-            return value;
-          },
-        },
        series: [
          {
            name: "2024年4月目标值",
--- a/src/views/report/scYieldBM/index.vue
+++ b/src/views/report/scYieldBM/index.vue
@ -11,7 +11,7 @@
      />
    </div>
    <div class="containerBottom">
-      <div class="smallTitle">标准组件良率对标</div>
+      <div class="smallTitle">芯片良率对标</div>
      <base-table
        :table-props="tableProps"
        :page="listQuery.current"
@ -114,15 +114,14 @@ export default {
        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
        xData: ["成都", "邯郸", "瑞昌"],
        yName: "单位/%",
-        yAxisLabel: {
-          formatter: function (value) {
-            return value + ".00%";
-          },
-        },
        series: [
          {
            name: "2024年4月目标值",
-            data: [85, 85, 85],
+            data: [
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+              { name: "%", value: 85 },
+            ],
            type: "line",
            symbol: "circle",
            symbolSize: 6,
@ -136,7 +135,11 @@ export default {
          },
          {
            name: "2023年4月",
-            data: [57.5, 21.66, 18.4],
+            data: [
+              { name: "%", value: 57.5 },
+              { name: "%", value: 21.66 },
+              { name: "%", value: 18.4 },
+            ],
            type: "bar",
            barWidth: 20,
            label: {
@ -150,7 +153,11 @@ export default {
          },
          {
            name: "2024年4月",
-            data: [23.33, 7.02, 80.2],
+            data: [
+              { name: "%", value: 23.33 },
+              { name: "%", value: 7.02 },
+              { name: "%", value: 80.2 },
+            ],
            type: "bar",
            barWidth: 20,
            label: {
--- a/src/views/report/turnoverRateBM/index.vue
+++ b/src/views/report/turnoverRateBM/index.vue
@ -60,7 +60,13 @@ const tableProps = [
  },
  {
    prop: "mubiao",
-    label: "目标值",
+    label: "月目标值",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mubiao2",
+    label: "年目标值",
    minWidth: 150,
    showOverflowtooltip: true,
  },
@ -115,15 +121,14 @@ export default {
        color: ["#8EF0AB", "#63BDFF", "#288AFF", "#7164FF"],
        xData: ["成都", "邯郸", "瑞昌"],
        yName: "单位/%",
-        yAxisLabel: {
-          formatter: function (value) {
-            return value + ".00%";
-          },
-        },
        series: [
          {
            name: "2023年4月",
-            data: [12.64, 12.29, 12.33],
+            data: [
+              { name: "%", value: 12.64444444 },
+              { name: "%", value: 12.29 },
+              { name: "%", value: 12.33 },
+            ],
            type: "bar",
            barWidth: 20,
            barGap: 0.5,
@ -139,7 +144,11 @@ export default {
          },
          {
            name: "2024年4月",
-            data: [14.92, 15.31, 15.36],
+            data: [
+              { name: "%", value: 14.92 },
+              { name: "%", value: 15.31 },
+              { name: "%", value: 15.36 },
+            ],
            type: "bar",
            barWidth: 20,
            label: {
@ -154,7 +163,11 @@ export default {
          },
          {
            name: "2024年4月目标值",
-            data: [15.36, 15.52, 15.63],
+            data: [
+              { name: "%", value: 15.36 },
+              { name: "%", value: 15.52 },
+              { name: "%", value: 15.63 },
+            ],
            type: "bar",
            barWidth: 20,
            label: {
@ -169,7 +182,11 @@ export default {
          },
          {
            name: "2024年目标值",
-            data: [15.63, 15.69, 15.78],
+            data: [
+              { name: "%", value: 15.63 },
+              { name: "%", value: 15.69 },
+              { name: "%", value: 15.78 },
+            ],
            type: "bar",
            barWidth: 20,
            label: {