修改工作日历看板的样式

src/views/factoryCalendar/components/StatisticsView.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="visual-stat-page">
+    <div class="factory-visual-layer" aria-hidden="true">
+      <span class="factory-roof"></span>
+      <span class="factory-stack stack-one"></span>
+      <span class="factory-stack stack-two"></span>
+      <span class="factory-conveyor"></span>
+    </div>
     <div class="visual-overview">
       <div class="overview-copy">
         <div class="overview-kicker">
@@ -41,152 +47,158 @@
     </div>
 
     <div class="visual-grid">
-      <div class="visual-card schedule-card">
-        <div class="panel-head">
-          <div>
-            <div class="chart-title">排班状态占比</div>
-            <p>工作日、空闲日与节假日构成</p>
+      <div class="visual-column visual-column-main">
+        <div class="visual-card schedule-card">
+          <div class="panel-head">
+            <div>
+              <div class="chart-title">排班状态占比</div>
+              <p>工作日、空闲日与节假日构成</p>
+            </div>
+            <el-tag
+              size="mini"
+              :type="vm.scheduleRate >= 90 ? 'success' : 'warning'"
+            >
+              {{ vm.scheduleRate >= 90 ? '状态良好' : '需关注' }}
+            </el-tag>
           </div>
-          <el-tag
-            size="mini"
-            :type="vm.scheduleRate >= 90 ? 'success' : 'warning'"
-          >
-            {{ vm.scheduleRate >= 90 ? '状态良好' : '需关注' }}
-          </el-tag>
-        </div>
-        <div class="donut-wrap">
-          <el-tooltip
-            placement="top"
-            effect="light"
-            :content="vm.scheduleTooltip"
-          >
-            <div
-              class="donut-chart"
-              :style="{ background: vm.scheduleDonutBackground }"
+          <div class="donut-wrap">
+            <el-tooltip
+              placement="top"
+              effect="light"
+              :content="vm.scheduleTooltip"
             >
-              <div class="donut-center">
-                <strong>{{ vm.scheduleRate }}%</strong>
-                <span>已排班率</span>
+              <div
+                class="donut-chart"
+                :style="{ background: vm.scheduleDonutBackground }"
+              >
+                <div class="donut-center">
+                  <strong>{{ vm.scheduleRate }}%</strong>
+                  <span>已排班率</span>
+                </div>
               </div>
+            </el-tooltip>
+            <div class="donut-legend">
+              <el-tooltip
+                v-for="item in vm.scheduleSegments"
+                :key="item.key"
+                placement="top"
+                effect="light"
+                :content="vm.getScheduleSegmentTooltip(item)"
+              >
+                <div class="donut-legend-item">
+                  <span
+                    class="legend-line"
+                    :style="{ background: item.color }"
+                  />
+                  <em>{{ item.label }}</em>
+                  <strong>{{ item.value }}</strong>
+                </div>
+              </el-tooltip>
             </div>
-          </el-tooltip>
-          <div class="donut-legend">
+          </div>
+        </div>
+
+        <div class="visual-card month-card">
+          <div class="panel-head">
+            <div>
+              <div class="chart-title">月度状态分布</div>
+              <p>按当前年月统计各类日期数量</p>
+            </div>
+          </div>
+          <div class="visual-bar-list">
             <el-tooltip
-              v-for="item in vm.scheduleSegments"
+              v-for="item in vm.visualMonthBars"
               :key="item.key"
               placement="top"
               effect="light"
-              :content="vm.getScheduleSegmentTooltip(item)"
+              :content="vm.getMonthBarTooltip(item)"
             >
-              <div class="donut-legend-item">
-                <span class="legend-line" :style="{ background: item.color }" />
-                <em>{{ item.label }}</em>
-                <strong>{{ item.value }}</strong>
+              <div class="visual-bar-item">
+                <div class="bar-head">
+                  <span>{{ item.label }}</span>
+                  <strong>{{ item.value }} 天</strong>
+                </div>
+                <div class="bar-track">
+                  <div
+                    class="bar-fill"
+                    :style="{
+                      width: item.percent + '%',
+                      background: item.color
+                    }"
+                  />
+                </div>
               </div>
             </el-tooltip>
           </div>
         </div>
       </div>
 
-      <div class="visual-card">
-        <div class="panel-head">
-          <div>
-            <div class="chart-title">月度状态分布</div>
-            <p>按当前年月统计各类日期数量</p>
+      <div class="visual-column visual-column-side">
+        <div class="visual-card type-card">
+          <div class="panel-head">
+            <div>
+              <div class="chart-title">日历类型分布</div>
+              <p>生产、设备、人员日历启停情况</p>
+            </div>
           </div>
-        </div>
-        <div class="visual-bar-list">
-          <el-tooltip
-            v-for="item in vm.visualMonthBars"
-            :key="item.key"
-            placement="top"
-            effect="light"
-            :content="vm.getMonthBarTooltip(item)"
-          >
-            <div class="visual-bar-item">
-              <div class="bar-head">
-                <span>{{ item.label }}</span>
-                <strong>{{ item.value }} 天</strong>
-              </div>
-              <div class="bar-track">
+          <div class="type-visual-list">
+            <el-tooltip
+              v-for="item in vm.calendarTypeStats"
+              :key="item.value"
+              placement="top"
+              effect="light"
+              :content="vm.getCalendarTypeTooltip(item)"
+            >
+              <div class="type-visual-item">
                 <div
-                  class="bar-fill"
+                  class="type-ring"
                   :style="{
-                    width: item.percent + '%',
-                    background: item.color
+                    '--ring-color': item.color,
+                    '--ring-percent': getCalendarTypePercent(item) + '%'
                   }"
-                />
+                >
+                  <strong>{{ item.count }}</strong>
+                </div>
+                <div>
+                  <span>{{ item.label }}</span>
+                  <p>{{ item.enabled }} 个启用 / {{ item.disabled }} 个禁用</p>
+                </div>
               </div>
-            </div>
-          </el-tooltip>
+            </el-tooltip>
+          </div>
         </div>
-      </div>
 
-      <div class="visual-card">
-        <div class="panel-head">
-          <div>
-            <div class="chart-title">日历类型分布</div>
-            <p>生产、设备、人员日历启停情况</p>
+        <div class="visual-card conflict-visual-card">
+          <div class="panel-head">
+            <div>
+              <div class="chart-title">冲突趋势</div>
+              <p>近 6 个时间点所在周冲突数量</p>
+            </div>
+            <el-tag size="mini" :type="conflictDayCount ? 'danger' : 'success'">
+              {{ conflictDayCount ? '存在冲突' : '无冲突' }}
+            </el-tag>
           </div>
-        </div>
-        <div class="type-visual-list">
-          <el-tooltip
-            v-for="item in vm.calendarTypeStats"
-            :key="item.value"
-            placement="top"
-            effect="light"
-            :content="vm.getCalendarTypeTooltip(item)"
-          >
-            <div class="type-visual-item">
-              <div
-                class="type-ring"
-                :style="{
-                  '--ring-color': item.color,
-                  '--ring-percent': getCalendarTypePercent(item) + '%'
-                }"
+          <div class="conflict-visual">
+            <div class="conflict-number">
+              <strong>{{ conflictDayCount }}</strong>
+              <span>当前月冲突天数</span>
+            </div>
+            <div class="spark-bars">
+              <el-tooltip
+                v-for="item in vm.conflictTrend"
+                :key="item.label"
+                placement="top"
+                effect="light"
+                :content="vm.getConflictTrendTooltip(item)"
               >
-                <strong>{{ item.count }}</strong>
-              </div>
-              <div>
-                <span>{{ item.label }}</span>
-                <p>{{ item.enabled }} 个启用 / {{ item.disabled }} 个禁用</p>
-              </div>
+                <span :style="{ height: item.height + '%' }">
+                  <b>{{ item.count }}</b>
+                  <em>{{ item.label }}</em>
+                </span>
+              </el-tooltip>
             </div>
-          </el-tooltip>
-        </div>
-      </div>
-
-      <div class="visual-card conflict-visual-card">
-        <div class="panel-head">
-          <div>
-            <div class="chart-title">冲突趋势</div>
-            <p>近 6 个时间点所在周冲突数量</p>
-          </div>
-          <el-tag size="mini" :type="conflictDayCount ? 'danger' : 'success'">
-            {{ conflictDayCount ? '存在冲突' : '无冲突' }}
-          </el-tag>
-        </div>
-        <div class="conflict-visual">
-          <div class="conflict-number">
-            <strong>{{ conflictDayCount }}</strong>
-            <span>当前月冲突天数</span>
           </div>
-          <div class="spark-bars">
-            <el-tooltip
-              v-for="item in vm.conflictTrend"
-              :key="item.label"
-              placement="top"
-              effect="light"
-              :content="vm.getConflictTrendTooltip(item)"
-            >
-              <span :style="{ height: item.height + '%' }">
-                <b>{{ item.count }}</b>
-                <em>{{ item.label }}</em>
-              </span>
-            </el-tooltip>
-          </div>
-        </div>
-        <!-- <el-button
+          <!-- <el-button
           size="small"
           type="warning"
           icon="el-icon-warning-outline"
@@ -194,6 +206,7 @@
         >
           重新检测
         </el-button> -->
+        </div>
       </div>
     </div>
   </div>