剩余报表

src/views/report/completionStatusIntrBM/components/bmBarComplete.vue

@@ -1,47 +1,81 @@
 <!-- 只适用于指标完成情况对标 -->
 <template>
   <div>
-    <!-- 暂无数据 -->
-    <div
-      :style="{ height: chartHeight + 'px' }"
-      v-show="this.chartMsg.series[0].data.length === 0"
-    >
-      <div
-        class="no-data-bg"
-        style="position: relative; left: 50%; transform: translateX(-50%)"
-      ></div>
-    </div>
     <!-- 图例 -->
-    <div v-show="this.chartMsg.series[0].data.length > 0">
-      <div class="legend">
-        <span class="item" v-for="item in legendList" :key="item.id">
+    <div
+      class="legend"
+      v-show="
+        this.chartMsg1.series[0].data.length > 0 ||
+        this.chartMsg2.series[0].data.length > 0
+      "
+    >
+      <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 }"
+        >
           <span
-            v-if="item.type === 1"
-            class="block"
+            class="line-block"
             :style="{ backgroundColor: item.color }"
           ></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>
+        </span>
+        {{ item.name }}</span
+      >
     </div>
     <!-- 图 -->
-    <base-chart
-      :chartHeight="chartHeight"
-      :legendList="legendList"
-      :chartMsg="chartMsg"
-      :chartId="chartId"
-      :chartNum="chartNum"
-    />
+    <div>
+      <div style="display: inline-block; width: 79%; vertical-align: top">
+        <base-chart
+          v-show="this.chartMsg1.series[0].data.length > 0"
+          :chartHeight="chartHeight"
+          :chartWidth="chartWidth1"
+          :chartMsg="chartMsg1"
+          chartId="targetChartLeft"
+          :chartNum="chartNum"
+        />
+        <!-- 暂无数据 -->
+        <div
+          :style="{ height: chartHeight + 'px' }"
+          v-show="this.chartMsg1.series[0].data.length === 0"
+        >
+          <div
+            class="no-data-bg"
+            style="position: relative; left: 50%; transform: translateX(-50%)"
+          ></div>
+        </div>
+      </div>
+      <div style="display: inline-block; width: 20%; vertical-align: top">
+        <base-chart
+          v-show="this.chartMsg2.series[0].data.length > 0"
+          :chartHeight="chartHeight"
+          :chartWidth="chartWidth2"
+          :chartMsg="chartMsg2"
+          chartId="targetChartRight"
+          :chartNum="chartNum"
+        />
+        <!-- 暂无数据 -->
+        <div
+          :style="{ height: chartHeight + 'px' }"
+          v-show="this.chartMsg2.series[0].data.length === 0"
+        >
+          <div
+            class="no-data-bg"
+            style="
+              position: relative;
+              left: 50%;
+              transform: translateX(-50%);
+              width: 80%;
+            "
+          ></div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -49,7 +83,10 @@ import baseChart from "./baseChart.vue";
 export default {
   name: "bmBarComplete",
   data() {
-    return;
+    return {
+      chartWidth1: "60%",
+      chartWidth2: "20%",
+    };
   },
   props: {
     chartHeight: {
@@ -60,13 +97,13 @@ export default {
       type: Array,
       default: () => [],
     },
-    chartMsg: {
+    chartMsg1: {
       type: Object,
       default: () => {},
     },
-    chartId: {
-      type: String,
-      default: "bmChart",
+    chartMsg2: {
+      type: Object,
+      default: () => {},
     },
     chartNum: {
       type: Number,