更新成 品 仓 储 驾 驶 舱

src/views/OperationalOverview/components/storageCockpitArea.vue

@@ -0,0 +1,85 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-10-25 08:51:13
+ * @Description:
+-->
+<template>
+  <div class="container">
+    <div
+      v-for="i in areaArr"
+      :key="i"
+      :style="{ height: 135 * beilv + 'px', margin: 8 * beilv + 'px' + ' 0' }"
+      class="area"
+    >
+      <el-row>
+        <el-col :span="1"><div class="areaName">{{ i }}</div></el-col>
+        <el-col :span="23">
+          <div class="locationFlex">
+            <div
+              v-for="l in 72"
+              :key="l"
+              :class="l>Math.round(Math.random()*100)?'waring':''"
+              :style="{ marginRight: 6 * beilv + 'px',marginTop: 2 * beilv + 'px',marginBottom: 1 * beilv + 'px',width: 30 * beilv + 'px',height: 28 * beilv + 'px'}"
+              class="location"
+            >{{ l }}</div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+// import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
+
+export default {
+  // components: { SmallTitle },
+  props: {
+    beilv: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      areaArr: ['A区', 'B区', 'C区', 'D区', 'E区', 'F区']
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+.area {
+  background: url('../../../assets/img/OperationalOverview/编组36.png') no-repeat;
+  background-size: 100% 100%;
+  padding: 5px 10px;
+  margin: 3px 0;
+  text-align: center;
+  border-radius: 4px;
+  background-color: rgb(0, 0, 0, 0.5);
+}
+.areaName {
+  padding-top: 60%;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 30px;
+}
+.locationFlex{
+  margin-left: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: space-between;
+}
+.location{
+  background: #63cf74;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 25px;
+}
+.waring{
+  background: #FF5D6B;
+}
+</style>