[Wip 0000] 可配置各个基础模块页面开发

src/views/vent/home/configurable/components/AirVolumeMonitor.vue

@@ -9,11 +9,17 @@
     </div>
   </CostumeHeader>
   <Bar
+    :option="chartOption"
     series-prop-type="valueA"
     x-axis-prop-type="x"
     :chart-data="[
       { valueA: 1, valueB: 1, x: 2 },
       { valueA: 1, valueB: 1, x: 4 },
+      { valueA: 1, valueB: 1, x: 4 },
+      { valueA: 1, valueB: 1, x: 4 },
+      { valueA: 2, valueB: 2, x: 4 },
+      { valueA: 3, valueB: 1, x: 4 },
+      { valueA: 1, valueB: 1, x: 4 },
     ]"
     height="250px"
   />
@@ -28,6 +34,7 @@
   import CostumeHeader from './CostumeHeader.vue';
   import { RightCircleOutlined } from '@ant-design/icons-vue';
   import Bar from '/@/components/chart/Bar.vue';
+  import { graphic } from 'echarts';
   // import MiniBoard from './MiniBoard.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
@@ -72,6 +79,25 @@
     });
   }
 
+  // 图表相关
+  const chartOption = {
+    series: [
+      {
+        name: 'bar',
+        type: 'bar',
+        itemStyle: {
+          color: new graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#0091ffff' },
+            { offset: 1, color: '#0091ff44' },
+          ]),
+          borderRadius: [50, 50, 0, 0],
+        },
+        barWidth: 30,
+        data: [],
+      },
+    ],
+  };
+
   onMounted(() => {
     fetchConfig();
   });

src/views/vent/home/configurable/components/DeviceWarning.vue

@@ -1,20 +1,26 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <CostumeHeader>
-    <template #select></template>
+    <template #select>
+      <!-- 填写空的div以覆盖默认的选择框 -->
+      <div></div>
+    </template>
     <div class="w-200px flex flex-items-center">
       <RightCircleOutlined class="w-30px" />
       <div class="flex-grow-1">
         网络断开
-        {{ warns.length }}
+        <span> {{ warns.length }}条 </span>
       </div>
     </div>
   </CostumeHeader>
-  <Timeline>
-    <TimelineItem v-for="(item, i) in warns" :key="`svvhccdw-${i}`">
-      {{ item.label }}
-    </TimelineItem>
-  </Timeline>
+  <div>
+    <div v-for="(item, i) in warns" :key="`svvhccdw-${i}`" class="flex items-center timeline-item">
+      <div class="timeline-item__icon" :class="`timeline-item__icon_${item.color}`"></div>
+      <div class="timeline-item__dot"></div>
+      <div class="timeline-item__label">{{ item.label }}</div>
+      <div :class="`timeline-item__value_${item.color}`">{{ item.count }}</div>
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue';
@@ -48,6 +54,22 @@
     {
       label: 'test',
       count: 0,
+      color: 'red',
+    },
+    {
+      label: 'test',
+      count: 0,
+      color: 'yellow',
+    },
+    {
+      label: 'test',
+      count: 0,
+      color: 'green',
+    },
+    {
+      label: 'test',
+      count: 0,
+      color: 'blue',
     },
   ]);
   // 获取全部局扇的数据，并以选项格式返回给 Header 消费
@@ -70,4 +92,60 @@
     // fetchConfig();
   });
 </script>
-<style scoped></style>
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .timeline-item {
+    height: 60px;
+  }
+  .timeline-item__icon_red {
+    background-image: url('@/assets/images/home-container/warn-icon.png');
+  }
+  .timeline-item__icon_yellow {
+    background-image: url('@/assets/images/home-container/warn-icon1.png');
+  }
+  .timeline-item__icon_green {
+    background-image: url('@/assets/images/home-container/warn-icon2.png');
+  }
+  .timeline-item__icon_blue {
+    background-image: url('@/assets/images/home-container/warn-icon3.png');
+  }
+  .timeline-item__icon {
+    width: 54px;
+    height: 45px;
+    margin: 0 50px 0 50px;
+  }
+  .timeline-item__dot {
+    width: 10px;
+    height: 10px;
+    margin: 0 50px 0 0;
+    background-color: @vent-gas-primary-bg;
+    border-radius: 5px;
+    position: relative;
+  }
+  .timeline-item__dot::before {
+    content: '';
+    position: absolute;
+    top: -3px;
+    left: -3px;
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+    border: 1px solid @vent-gas-tab-border;
+  }
+  .timeline-item__label {
+    width: 150px;
+  }
+  .timeline-item__value_red {
+    color: red;
+  }
+  .timeline-item__value_yellow {
+    color: yellow;
+  }
+  .timeline-item__value_green {
+    color: green;
+  }
+  .timeline-item__value_blue {
+    color: blue;
+  }
+</style>

src/views/vent/home/configurable/components/VentilateAnalysis.vue

@@ -8,6 +8,20 @@
       </div>
     </div>
   </CostumeHeader>
+  <Pie
+    :option="chartOption"
+    :chart-data="[
+      {
+        value: 70,
+        name: 'A',
+      },
+      {
+        value: 30,
+        name: 'B',
+      },
+    ]"
+    height="170px"
+  />
   <div class="flex justify-around mt-10px">
     <MiniBoard v-for="item in configs" :key="item.prop" :label="item.label" :value="selectedDevice[item.prop]" layout="label-top" type="D" />
   </div>
@@ -19,6 +33,8 @@
   import CostumeHeader from './CostumeHeader.vue';
   import { RightCircleOutlined } from '@ant-design/icons-vue';
   import MiniBoard from './MiniBoard.vue';
+  import Gauge from '/@/components/chart/Gauge.vue';
+  import Pie from '/@/components/chart/Pie.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
   // 设备类别，是个枚举 TODO: 将手动换为自动获取类别
@@ -62,6 +78,24 @@
     });
   }
 
+  // 图标相关
+  const chartOption = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['50%', '75%'],
+        center: ['50%', '55%'],
+        data: [],
+        labelLine: { show: true },
+        label: {
+          show: true,
+          formatter: '{b} \n ({d}%)',
+          color: '#B1B9D3',
+        },
+      },
+    ],
+  };
+
   onMounted(() => {
     fetchConfig();
   });

src/views/vent/home/configurable/components/WorkSurface.vue

@@ -9,6 +9,7 @@
     </div>
   </CostumeHeader>
   <LineMulti
+    :option="chartOption"
     :prop-type-arr="
       new Map([
         ['valueA', '值A'],
@@ -17,8 +18,12 @@
     "
     x-axis-prop-type="x"
     :chart-data="[
-      { valueA: 1, valueB: 1, x: 2 },
+      { valueA: 1, valueB: 3, x: 2 },
+      { valueA: 2, valueB: 1, x: 3 },
       { valueA: 1, valueB: 1, x: 4 },
+      { valueA: 3, valueB: 2, x: 5 },
+      { valueA: 2, valueB: 1, x: 6 },
+      { valueA: 1, valueB: 2, x: 7 },
     ]"
     height="170px"
   />
@@ -77,6 +82,25 @@
     });
   }
 
+  // 图表相关
+  const chartOption = {
+    legend: {
+      top: 10,
+      right: 10,
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: {
+        axisLabel: {
+          color: '#fff',
+        },
+        lineStyle: {
+          color: '#ffffff44',
+        },
+      },
+    },
+  };
+
   onMounted(() => {
     fetchConfig();
   });

src/views/vent/home/configurable/components/moduleBottom.vue

@@ -78,7 +78,7 @@
     .module-slot {
       height: calc(100% - 33px);
       width: 100%;
-      background-color: #259ccf60;
+      background-color: #259ccf22;
     }
   }
 

src/views/vent/home/configurable/components/moduleRight.vue

@@ -80,7 +80,7 @@
     .module-slot {
       height: calc(100% - 33px);
       width: 100%;
-      background-color: #259ccf60;
+      background-color: #259ccf22;
     }
   }