[Wip 0000] 可配置首页样式调整

src/design/vent/color.less

@@ -24,4 +24,6 @@
 @vent-gas-primary-bg: #0091ff;
 @vent-gas-primary-trasparent-bg: #0091ff12;
 // vent/gas 模块下的客制ListItem组件背景色
-@vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
+@vent-gas-list-item-bg-img: linear-gradient(to right, #39a3ff55, #3977e500);
+@vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff55, #0091ff55);
+@vent-configurable-home-light-border: #3df6ff;

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

@@ -0,0 +1,136 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="monitor-center">
+    <div class="flex">
+      <div class="w-50% text-center">
+        <span>总供风量</span>
+        <p class="monitor-center__primary_text">123123</p>
+
+        <Pie
+          :option="chartOption"
+          :chart-data="[
+            {
+              value: 70,
+              name: 'A',
+            },
+            {
+              value: 30,
+              name: 'B',
+            },
+          ]"
+          height="100px"
+        />
+      </div>
+      <div class="w-50% text-center">
+        <span>总需风量</span>
+        <p class="monitor-center__primary_text">123123</p>
+
+        <Pie
+          :option="chartOption"
+          :chart-data="[
+            {
+              value: 70,
+              name: 'A',
+            },
+            {
+              value: 30,
+              name: 'B',
+            },
+          ]"
+          height="100px"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { list as cfgList } from '@/views/vent/deviceManager/configurationTable/configuration.api';
+  import { list } from '@/views/vent/deviceManager/deviceTable/device.api';
+  import Pie from '/@/components/chart/Pie.vue';
+  import { EChartsOption } from 'echarts';
+  // import mapComponent from './components/3Dmap/index.vue';
+
+  // 设备类别，是个枚举 TODO: 将手动换为自动获取类别
+  const devicekind = 'fanlocal';
+
+  const configs = ref<{ prop: string; label: string }[]>([]);
+  function fetchConfig() {
+    cfgList({
+      deviceType: 'devicekind',
+    }).then(({ records }) => {
+      const moduleData = JSON.parse(records[0]?.moduleData);
+      configs.value = Object.keys(moduleData).map((k) => {
+        return {
+          prop: k,
+          label: moduleData[k],
+        };
+      });
+    });
+  }
+
+  const devices = ref<any[]>([]);
+  const selectedDevice = ref<any>({});
+  function selectDeviceByID(id: string) {
+    selectedDevice.value = devices.value.find((e) => {
+      return e.id === id;
+    });
+  }
+  // 获取全部局扇的数据，并以选项格式返回给 Header 消费
+  function fetchOptions() {
+    return list({
+      devicekind,
+    }).then(({ records }) => {
+      devices.value = records;
+      selectDeviceByID(records[0]?.id);
+      return records.map((e) => {
+        return {
+          label: e.strinstallpos,
+          key: e.id,
+        };
+      });
+    });
+  }
+
+  // 图标相关
+  const chartOption: EChartsOption = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['50%', '75%'],
+        center: ['50%', '55%'],
+        data: [],
+        labelLine: { show: false },
+        label: {
+          show: false,
+          // formatter: '{b} \n ({d}%)',
+          // color: '#B1B9D3',
+        },
+        itemStyle: {
+          shadowBlur: 20,
+          shadowColor: '#259bcf',
+        },
+      },
+    ],
+    color: ['#d9a1ff', '#00d1ff', '#82fe78'],
+  };
+
+  onMounted(() => {
+    fetchConfig();
+  });
+</script>
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .monitor-center__primary_text {
+    font-size: 20px;
+    color: @vent-gas-primary-text;
+  }
+
+  .monitor-center {
+    width: 200px;
+    background-image: @vent-configurable-home-bg-img;
+    border-top: 2px solid @vent-configurable-home-light-border;
+    color: @white;
+  }
+</style>

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

@@ -93,7 +93,8 @@
           // color: '#B1B9D3',
         },
         itemStyle: {
-          shadowBlur: 10,
+          shadowBlur: 20,
+          shadowColor: '#259bcf',
         },
       },
     ],

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

@@ -39,6 +39,7 @@
   import { RightCircleOutlined } from '@ant-design/icons-vue';
   import MiniBoard from './MiniBoard.vue';
   import LineMulti from '/@/components/chart/LineMulti.vue';
+  import { EChartsOption } from 'echarts';
   // import mapComponent from './components/3Dmap/index.vue';
 
   // 设备类别，是个枚举 TODO: 将手动换为自动获取类别
@@ -83,22 +84,30 @@
   }
 
   // 图表相关
-  const chartOption = {
+  const chartOption: EChartsOption = {
     legend: {
       top: 10,
       right: 10,
+      textStyle: {
+        color: '#fff',
+      },
+    },
+    grid: {
+      top: 40,
+      height: '60%',
     },
     yAxis: {
       type: 'value',
       splitLine: {
-        axisLabel: {
-          color: '#fff',
-        },
         lineStyle: {
-          color: '#ffffff44',
+          color: '#fff',
+          opacity: 0.3,
         },
       },
     },
+    textStyle: {
+      color: '#fff',
+    },
   };
 
   onMounted(() => {

src/views/vent/home/configurable/index.vue

@@ -8,7 +8,9 @@
         全矿井通风检测
         <CaretDownOutlined />
       </a>
-      <template #overlay> <span class="color-#fff">全矿井通风检测</span> </template>
+      <template #overlay>
+        <MonitorCenter />
+      </template>
     </a-dropdown>
     <ModuleLeft class="module-left top-70px" title="局部通风机监测">
       <SubVentilate />
@@ -46,6 +48,7 @@
   import VentilateAnalysis from './components/VentilateAnalysis.vue';
   import WorkSurface from './components/WorkSurface.vue';
   import DeviceWarning from './components/DeviceWarning.vue';
+  import MonitorCenter from './components/MonitorCenter.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
   const mainTitle = ref('智能通风管控系统');
@@ -59,13 +62,13 @@
   .company-home {
     width: 100%;
     height: 100%;
-    color: #fff;
+    color: @white;
     position: relative;
 
     .top-bg {
       width: 100%;
       height: 56px;
-      background: url('../../../../assets/images/home-container/configurable/main_title_bg.png') no-repeat center;
+      background: url('@/assets/images/home-container/configurable/main_title_bg.png') no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {