src/layouts/default/sider/bottomSideder.vue

@@ -49,7 +49,7 @@
     </div>
   </div>
   <div v-else-if="isShowMenu == 0" class="menu-show-icon">
-    <div class="icon" :class="themeIcon == 'styleTwo' ? 'icon2' : 'icon1'" @click="openMenu"></div>
+    <div class="icon" :class="themeIcon == 'styleTwo' ? 'icon-2' : 'icon-1'" @click="openMenu"></div>
   </div>
 </template>
 
@@ -357,7 +357,7 @@ export default defineComponent({
     }
   }
 
-  .icon1 {
+  .icon-1 {
     background-image: url('/@/assets/images/vent/bottom-icon/menu-icon-outer.png');
     background-position: center;
 
@@ -367,7 +367,7 @@ export default defineComponent({
     }
   }
 
-  .icon2 {
+  .icon-2 {
     background-image: url('/@/assets/images/vent/bottom-icon/1.png');
     background-position: center;
 

src/layouts/default/sider/bottomSideder1.vue

@@ -28,7 +28,7 @@
     </div>
   </div>
   <div v-else-if="isShowMenu == 0" class="menu-show-icon">
-    <div class="icon" :class="themeIcon == 'styleTwo' ? 'icon2' : 'icon1'" @click="openMenu"></div>
+    <div class="icon" :class="themeIcon == 'styleTwo' ? 'icon-2' : 'icon-1'" @click="openMenu"></div>
   </div>
 </template>
 
@@ -233,7 +233,7 @@ export default defineComponent({
     }
   }
 
-  .icon1 {
+  .icon-1 {
     background-image: url('/@/assets/images/vent/bottom-icon/menu-icon-outer.png');
     background-position: center;
 
@@ -243,7 +243,7 @@ export default defineComponent({
     }
   }
 
-  .icon2 {
+  .icon-2 {
     background-image: url('/@/assets/images/vent/bottom-icon/1.png');
     background-position: center;
 

src/views/monitor/log/index.vue

@@ -1,86 +1,110 @@
 <template>
-  <BasicTable @register="registerTable" :searchInfo="searchInfo" :columns="logColumns" :scroll="{ y: 660, x: true }">
-    <template #tableTitle>
-      <a-tabs defaultActiveKey="1" @change="tabChange" size="small">
-        <a-tab-pane tab="登录日志" key="1" />
-        <a-tab-pane tab="操作日志" key="2" />
-        <a-tab-pane tab="浏览日志" key="3" />
-      </a-tabs>
-    </template>
+  <a-tabs v-modal="searchInfo.logType" @change="tabChange" size="small">
+    <a-tab-pane tab="登录日志" key="1" />
+    <a-tab-pane tab="操作日志" key="2" />
+    <a-tab-pane tab="浏览日志" key="3" />
+    <a-tab-pane tab="登录统计" key="4" />
+  </a-tabs>
+  <BasicTable :key="searchInfo.logType" @register="registerTable" :api="logApi" :searchInfo="searchInfo"
+    :scroll="{ y: 660, x: true }">
     <template #expandedRowRender="{ record }">
       <div v-if="searchInfo.logType == 2">
         <div style="margin-bottom: 5px">
           <a-badge status="success" style="vertical-align: middle" />
-          <span style="vertical-align: middle">请求方法:{{ record.method }}</span></div
-        >
+          <span style="vertical-align: middle">请求方法:{{ record.method }}</span>
+        </div>
         <div>
           <a-badge status="processing" style="vertical-align: middle" />
-          <span style="vertical-align: middle">请求参数:{{ record.requestParam }}</span></div
-        >
+          <span style="vertical-align: middle">请求参数:{{ record.requestParam }}</span>
+        </div>
       </div>
     </template>
   </BasicTable>
 </template>
 <script lang="ts" name="monitor-log" setup>
-  import { ref } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { getLogList } from './log.api';
-  import { columns, searchFormSchema, operationLogColumn, browserColumn } from './log.data';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { useListPage } from '/@/hooks/system/useListPage';
-  const { createMessage } = useMessage();
-  const checkedKeys = ref<Array<string | number>>([]);
+import { ref } from 'vue';
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { getLogList, getUserLoginStats } from './log.api';
+import { columns, searchFormSchema, searchFormSchema1, operationLogColumn, browserColumn, loginTjColumn } from './log.data';
+import { useListPage } from '/@/hooks/system/useListPage';
+const checkedKeys = ref<Array<string | number>>([]);
 
-  const logColumns = ref<any>(columns);
-  const searchInfo = { logType: '1' };
-  // 列表页面公共参数、方法
-  const { prefixCls, tableContext } = useListPage({
-    designScope: 'user-list',
-    tableProps: {
-      title: '日志列表',
-      api: getLogList,
-      showActionColumn: false,
-      rowSelection: {
-        columnWidth: 20,
-      },
-      formConfig: {
-        schemas: searchFormSchema,
-        fieldMapToTime: [['fieldTime', ['createTime_begin', 'createTime_end'], 'YYYY-MM-DD']],
-      },
+const logColumns = ref<any>(columns);
+const logApi = ref<any>(getLogList)
+const logSchemas = ref<any[]>(searchFormSchema)
+const paramTime = ref<any[]>(['createTime_begin', 'createTime_end'])
+const searchInfo = { logType: '1' };
+// 列表页面公共参数、方法
+const { prefixCls, tableContext } = useListPage({
+  designScope: 'user-list',
+  tableProps: {
+    title: '',
+    columns: logColumns,
+    showActionColumn: false,
+    rowSelection: {
+      columnWidth: 20,
+    },
+    formConfig: {
+      schemas: logSchemas as any,
+      fieldMapToTime: paramTime as any,
     },
-  });
+  },
+});
 
-  const [registerTable, { reload }] = tableContext;
+const [registerTable, { reload }] = tableContext;
 
-  // 日志类型
-  function tabChange(key) {
-    searchInfo.logType = key;
-    //update-begin---author:wangshuai ---date:20220506  for：[VUEN-943]vue3日志管理列表翻译不对------------
-    switch (key) {
-      case '1':
-        logColumns.value = columns;
-        break;
-      case '2':
-        logColumns.value = operationLogColumn;
-        break;
-      case '3':
-        logColumns.value = browserColumn;
-        break;
-    }
-    //update-end---author:wangshuai ---date:20220506  for：[VUEN-943]vue3日志管理列表翻译不对--------------
-    reload();
+// 日志类型
+function tabChange(key) {
+  searchInfo.logType = key;
+  //update-begin---author:wangshuai ---date:20220506  for：[VUEN-943]vue3日志管理列表翻译不对------------
+  switch (key) {
+    case '1':
+      logColumns.value = columns;
+      logSchemas.value = searchFormSchema
+      paramTime.value = [['fieldTime', ['createTime_begin', 'createTime_end'], 'YYYY-MM-DD']]
+      logApi.value = getLogList
+      break;
+    case '2':
+      logColumns.value = operationLogColumn;
+      logSchemas.value = searchFormSchema
+      paramTime.value = [['fieldTime', ['createTime_begin', 'createTime_end'], 'YYYY-MM-DD']]
+      logApi.value = getLogList
+      break;
+    case '3':
+      logColumns.value = browserColumn;
+      logSchemas.value = searchFormSchema
+      paramTime.value = [['fieldTime', ['createTime_begin', 'createTime_end'], 'YYYY-MM-DD']]
+      logApi.value = getLogList
+      break;
+    case '4':
+      logColumns.value = loginTjColumn;
+      logSchemas.value = searchFormSchema1
+      paramTime.value = [['fieldTime', ['dayStart', 'dayEnd'], 'YYYY-MM-DD']]
+      logApi.value = getUserLoginStats
+      break;
   }
+  //update-end---author:wangshuai ---date:20220506  for：[VUEN-943]vue3日志管理列表翻译不对--------------
+  reload();
+}
 
-  /**
-   * 选择事件
-   */
-  function onSelectChange(selectedRowKeys: (string | number)[]) {
-    checkedKeys.value = selectedRowKeys;
-  }
+/**
+ * 选择事件
+ */
+function onSelectChange(selectedRowKeys: (string | number)[]) {
+  checkedKeys.value = selectedRowKeys;
+}
 </script>
 <style lang="less" scoped>
-  ::v-deep .table-form {
-    padding: 0 !important;
-    margin: 0 !important;
-  }
+::v-deep .table-form {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+::v-deep .zxm-table-title {
+  display: none !important;
+}
+
+::v-deep .zxm-tabs-nav-wrap {
+  padding: 0px 15px !important;
+}
 </style>

src/views/monitor/log/log.api.ts

@@ -2,6 +2,8 @@ import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
   list = '/sys/log/list',
+  getUserLoginStats='/sys/log/getUserLoginStats'
+
 }
 
 /**
@@ -11,3 +13,11 @@ enum Api {
 export const getLogList = (params) => {
   return defHttp.get({ url: Api.list, params });
 };
+
+/**
+ *统计用户登录记录
+ * @param params
+ */
+export const getUserLoginStats = (params) => {
+  return defHttp.post({ url: Api.getUserLoginStats, params });
+};

src/views/monitor/log/log.data.ts

@@ -71,6 +71,19 @@ export const searchFormSchema: FormSchema[] = [
     },
   },
 ];
+export const searchFormSchema1: FormSchema[] = [
+  {
+    field: 'fieldTime',
+    component: 'RangePicker',
+    label: '创建时间',
+    componentProps: {
+      valueType: 'Date',
+    },
+    colProps: {
+      span: 4,
+    },
+  },
+];
 
 export const browserColumn: BasicColumn[] = [
   {
@@ -112,3 +125,25 @@ export const browserColumn: BasicColumn[] = [
     width: 80,
   },
 ];
+
+export const loginTjColumn: BasicColumn[] = [
+  
+  {
+    title: '操作人ID',
+    dataIndex: 'userId',
+  },
+  {
+    title: '操作人',
+    dataIndex: 'userName',
+  },
+  {
+    title: '登录次数',
+    dataIndex: 'loginCount',
+  },
+  {
+    title: '最后登录时间',
+    dataIndex: 'lastLoginTime',
+  },
+ 
+];
+

src/views/vent/home/configurable/components/content-green.vue

@@ -19,7 +19,7 @@
               :dw="item.dw" :type="config.type" :layout="config.layout" />
           </div>
         </template>
-        
+
         <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
         <template v-if="config.name === 'chart'">
           <CustomChart class="content__module" :chart-config="config.config" :chart-data="config.data" />
@@ -86,14 +86,15 @@
           <DzCard></DzCard>
         </template>
         <template v-if="config.name === 'dz_dust'">
-         <DzDust></DzDust>
+          <DzDust></DzDust>
         </template>
-        <template v-if="config.name === 'dz_onfire'">
-          <DzScrollList></DzScrollList>
+        <template v-if="config.name === 'dz_risk'">
+          <DzRisk></DzRisk>
         </template>
-        <template v-if="config.name === 'dz_outfire'">
-          <DzUnScrollList></DzUnScrollList>
+        <template v-if="config.name === 'dz_fire'">
+          <DzFire :type="config.config.type" :titleData="config.config.titleData"></DzFire>
         </template>
+      
 
       </div>
     </div>
@@ -131,8 +132,8 @@ import DzChart from './preset/dz-chart.vue'
 import DzList from './preset/dz-list.vue'
 import DzCard from './preset/dz-card.vue'
 import DzDust from './preset/dz-dust.vue'
-import DzScrollList from './preset/dz-scroll-list.vue'
-import DzUnScrollList from './preset/dz-unscroll-list.vue'
+import DzFire from './preset/dz-fire.vue'
+import DzRisk from './preset/dz-risk.vue'
 // import FIreWarn from './preset/FIreWarn.vue';
 // import FIreControl from './preset/FIreControl.vue';
 

src/views/vent/home/configurable/components/preset/dz-chart.vue

@@ -62,226 +62,247 @@ category.forEach(value => {
 
 function getOption() {
 
-    nextTick(() => {
-        let myChart = echarts.init(chartRef.value);
-        let option = {
-            xAxis: {
-                max: 1000,
-                splitLine: {
-                    show: false
-                },
-                axisLine: {
-                    show: false
-                },
-                axisLabel: {
-                    show: false
-                },
-                axisTick: {
-                    show: false
-                },
+
+    let myChart = echarts.init(chartRef.value);
+    let option = {
+        xAxis: {
+            max: 1000,
+            splitLine: {
+                show: false
             },
-            grid: {
-                left: 10,
-                top: 15, // 设置条形图的边距
-                right: 10,
-                bottom: 15
+            axisLine: {
+                show: false
+            },
+            axisLabel: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+        },
+        grid: {
+            left: 10,
+            top: 15, // 设置条形图的边距
+            right: 10,
+            bottom: 15
+        },
+        yAxis: [{
+            type: "category",
+            inverse: false,
+            data: category,
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                show: false
             },
-            yAxis: [{
-                type: "category",
-                inverse: false,
-                data: category,
-                axisLine: {
-                    show: false
-                },
-                axisTick: {
-                    show: false
-                },
-                axisLabel: {
-                    show: false
-                },
 
 
-            }],
-            series: [
-                {
-                    // 内
-                    type: "bar",
-                    barWidth: 18,
-                    silent: true,
-                    itemStyle: {
-                        normal: {
-                            color: function (param) {
-                                const colors = ['#ff0000', '#ff7700', '#d8b66f', '#dbbf2e', '#61b4c5',];
-                                return colors[param.dataIndex % colors.length];
-                            }
+        }],
+        series: [
+            {
+                // 内
+                type: "bar",
+                barWidth: 18,
+                silent: true,
+                itemStyle: {
+                    normal: {
+                        color: function (param) {
+                            const colors = ['#ff0000', '#ff7700', '#d8b66f', '#dbbf2e', '#61b4c5',];
+                            return colors[param.dataIndex % colors.length];
                         }
-                    },
-                    label: {
-                        normal: {
-                            formatter: '{warnLevel1|{b}}', // 使用富文本占位符
-                            textStyle: {
-                                color: "#fff",
-                                fontSize: 14
-                            },
-                            position: [15, -26],
-                            show: true,
-                            rich: { //富文本
-                                warnLevel1: {
-                                    backgroundColor: {
-                                        image: 'image://' + warnLevel1,
-                                    }
+                    }
+                },
+                label: {
+                    normal: {
+                        // formatter: '{warnLevel1|}', // 使用富文本占位符
+                        formatter: (params) => {
+                            console.log(params,)
+                            let text;
+                            if (params.dataIndex == 0) {
+                                text = `{warnLevel5|\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
+                            } else if (params.dataIndex == 1) {
+                                // text = `{warnLevel4|${params.data.name}}`;
+                            } else if (params.dataIndex == 2) {
+                                //  text = `{warnLevel3|${params.data.name}}`;
+                            } else if (params.dataIndex == 3) {
+                                //  text = `{warnLevel2|${params.data.name}}`;
+                            } else if (params.dataIndex == 4) {
+                                //  text = `{warnLevel1|${params.data.name}}`;
+                            }
+                            return text;
+                        },
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 12
+                        },
+                        position: [20, -21],
+                        show: true,
+                        rich: { //富文本
+                            warnLevel1: {
+                                backgroundColor: {
+                                    image: warnLevel1,
                                 },
-                                warnLevel2: {
-                                    backgroundColor: { //这里可以添加你想自定义的图片
-                                        image: 'image://' + warnLevel2,
-                                    },
+                            },
+                            warnLevel2: {
+                                backgroundColor: { //这里可以添加你想自定义的图片
+                                    image: warnLevel2,
+
                                 },
-                                warnLevel3: {
-                                    backgroundColor: {
-                                        image: 'image://' + warnLevel3,
-                                    },
+                            },
+                            warnLevel3: {
+                                backgroundColor: {
+                                    image: warnLevel3,
                                 },
-                                warnLevel14: {
-                                    backgroundColor: { //这里可以添加你想自定义的图片
-                                        image: 'image://' + warnLevel4,
-                                    },
+                            },
+                            warnLevel4: {
+                                backgroundColor: { //这里可以添加你想自定义的图片
+                                    image: warnLevel4,
                                 },
-                                warnLevel15: {
-                                    backgroundColor: { //这里可以添加你想自定义的图片
-                                        image: 'image://' + warnLevel5,
-                                    },
+                            },
+                            warnLevel5: {
+                                backgroundColor: { //这里可以添加你想自定义的图片
+                                    image: warnLevel5,
                                 },
-
+                                height: 16,
+                                width: 16,
+                                align: 'left',
+                                padding: [0, 5, 0, 0]  // 右侧增加5px间距
                             },
 
-                        }
-                    },
-                    data: category,
-                    z: 1,
-                    animationEasing: "elasticOut"
+                        },
+
+                    }
                 },
+                data: category,
+                z: 1,
+                animationEasing: "elasticOut"
+            },
 
-                {
-                    // 分隔
-                    type: "pictorialBar",
-                    itemStyle: {
-                        normal: {
-                            color: "rgba(28, 48, 52)"
-                        }
-                    },
-                    symbolRepeat: "fixed",
-                    symbolMargin: 3,
-                    symbol: "rect",
-                    symbolClip: true,
-                    symbolSize: [10, 24],
-                    symbolPosition: "start",
-                    symbolOffset: [1, -4],
-                    symbolBoundingData: 1000,
-                    data: [1000, 1000, 1000, 1000, 1000],
-                    z: 2,
-                    animationEasing: "elasticOut",
+            {
+                // 分隔
+                type: "pictorialBar",
+                itemStyle: {
+                    normal: {
+                        color: "rgba(28, 48, 52)"
+                    }
+                },
+                symbolRepeat: "fixed",
+                symbolMargin: 3,
+                symbol: "rect",
+                symbolClip: true,
+                symbolSize: [10, 24],
+                symbolPosition: "start",
+                symbolOffset: [1, -4],
+                symbolBoundingData: 1000,
+                data: [1000, 1000, 1000, 1000, 1000],
+                z: 2,
+                animationEasing: "elasticOut",
 
 
+            },
+            {
+                // label
+                type: "pictorialBar",
+                symbolBoundingData: 1000,
+                itemStyle: {
+                    normal: {
+                        color: "none"
+                    }
                 },
-                {
-                    // label
-                    type: "pictorialBar",
-                    symbolBoundingData: 1000,
-                    itemStyle: {
-                        normal: {
-                            color: "none"
-                        }
-                    },
-                    label: {
-                        normal: {
-                            formatter: (params) => {
-                                let text;
-                                if (params.dataIndex == 0) {
-                                    text = '{a| ' + params.data + '}';
-                                } else if (params.dataIndex == 1) {
-                                    text = '{b| ' + params.data + '}';
-                                } else if (params.dataIndex == 2) {
-                                    text = '{c| ' + params.data + '}';
-                                } else if (params.dataIndex == 3) {
-                                    text = '{d| ' + params.data + '}';
-                                } else if (params.dataIndex == 4) {
-                                    text = '{e| ' + params.data + '}';
-                                } else {
-                                    text = '{f| ' + params.data + '}';
-                                }
-
-                                return text;
+                label: {
+                    normal: {
+                        formatter: (params) => {
+                            let text;
+                            if (params.dataIndex == 0) {
+                                text = '{a| ' + params.data + '}';
+                            } else if (params.dataIndex == 1) {
+                                text = '{b| ' + params.data + '}';
+                            } else if (params.dataIndex == 2) {
+                                text = '{c| ' + params.data + '}';
+                            } else if (params.dataIndex == 3) {
+                                text = '{d| ' + params.data + '}';
+                            } else if (params.dataIndex == 4) {
+                                text = '{e| ' + params.data + '}';
+                            } else {
+                                text = '{f| ' + params.data + '}';
+                            }
+
+                            return text;
+                        },
+                        rich: {
+                            a: {
+                                color: "#ff0000"
                             },
-                            rich: {
-                                a: {
-                                    color: "#ff0000"
-                                },
-                                b: {
-                                    color: "#ff7700"
-                                },
-                                c: {
-                                    color: "#d8b66f"
-                                },
-                                d: {
-                                    color: "#dbbf2e"
-                                },
-                                e: {
-                                    color: "#61b4c5"
-                                },
-                                f: {
-                                    color: "#fff"
-                                },
+                            b: {
+                                color: "#ff7700"
                             },
-                            position: [330, -15],
-                            show: true
-                        }
-                    },
-                    data: [612.5, 548.7, 300.2, 300, 299],
-                    z: 0,
+                            c: {
+                                color: "#d8b66f"
+                            },
+                            d: {
+                                color: "#dbbf2e"
+                            },
+                            e: {
+                                color: "#61b4c5"
+                            },
+                            f: {
+                                color: "#fff"
+                            },
+                        },
+                        position: [330, -15],
+                        show: true
+                    }
+                },
+                data: [612.5, 548.7, 300.2, 300, 299],
+                z: 0,
+
+            },
+
+            {
+                name: "外框",
+                type: "bar",
+                barGap: "-130%", // 设置外框粗细
+                data: [1000, 1000, 1000, 1000, 1000],
 
+                barWidth: 29,
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: [0, 0, 0, 0],
+                        color: "transparent", // 填充色
+                        barBorderColor: "#3ecca7", // 边框色
+                        barBorderWidth: 1, // 边框宽度
+
+                    }
                 },
 
-                {
-                    name: "外框",
-                    type: "bar",
-                    barGap: "-130%", // 设置外框粗细
-                    data: [1000, 1000, 1000, 1000, 1000],
-                
-                    barWidth: 29,
-                    itemStyle: {
-                        normal: {
-                            barBorderRadius: [0, 0, 0, 0],
-                            color: "transparent", // 填充色
-                            barBorderColor: "#3ecca7", // 边框色
-                            barBorderWidth: 1, // 边框宽度
-                            
-                        }
-                    },
-                
-                    z: 0
+                z: 0
+            },
+            {
+                type: 'scatter',
+                name: '条形',
+                symbol: 'roundRect',
+                symbolSize: [6, 14],
+                symbolOffset: [3, -3],
+                symbolKeepAspect: true,
+                itemStyle: {
+                    normal: {
+                        color: "#3ecca7"
+                    }
                 },
-                {
-                    type: 'scatter',
-                    name: '条形',
-                    symbol: 'roundRect',
-                    symbolSize: [6, 14],
-                    symbolOffset: [3, -3],
-                    symbolKeepAspect: true,
-                    itemStyle: {
-                        normal: {
-                            color: "#3ecca7"
-                        }
-                    },
-                    data: [1000, 1000, 1000, 1000,1000],
-                }
+                data: [1000, 1000, 1000, 1000, 1000],
+            }
+
+        ]
+    }
+    myChart.setOption(option);
+    window.onresize = function () {
+        myChart.resize();
+    };
 
-            ]
-        }
-        myChart.setOption(option);
-        window.onresize = function () {
-            myChart.resize();
-        };
-    });
 }
 
 

src/views/vent/home/configurable/components/preset/dz-dust.vue

@@ -179,221 +179,225 @@ const colors = [{
     ]
 }
 ];
-const barWidth = 30;
+
 
 function getOption() {
     nextTick(() => {
         let myChart = echarts.init(chartDust.value);
+        const offsetX = 8;
+        const offsetY = 4;
+        const colorList=[
+            ['rgba(63, 124, 136, 1)','rgba(77, 193, 211, 1)'],
+              ['rgba(145, 129, 47, 1)','rgba(211, 184, 46, 1)'],
+                ['rgba(159, 121, 69, 1)','rgba(226, 173, 101, 1)'],
+                  ['rgba(163, 90, 25, 1)','rgba(240, 114, 4, 1)'],
+                    ['rgba(158, 13, 13, 1)','rgba(239, 2, 2, 1)'],
+        ];
+        // 绘制左侧面
+        const CubeLeft = echarts.graphic.extendShape({
+            shape: {
+                x: 0,
+                y: 0,
+            },
+            buildPath: function (ctx, shape) {
+                const xAxisPoint = shape.xAxisPoint;
+                const c0 = [shape.x, shape.y];
+                const c1 = [shape.x - offsetX, shape.y - offsetY];
+                const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+                const c3 = [xAxisPoint[0], xAxisPoint[1]];
+                ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
+            },
+        });
+        // 绘制右侧面
+        const CubeRight = echarts.graphic.extendShape({
+            shape: {
+                x: 0,
+                y: 0,
+            },
+            buildPath: function (ctx, shape) {
+                const xAxisPoint = shape.xAxisPoint;
+                const c1 = [shape.x, shape.y];
+                const c2 = [xAxisPoint[0], xAxisPoint[1]];
+                const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+                const c4 = [shape.x + offsetX, shape.y - offsetY];
+                ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
+            },
+        });
+        // 绘制顶面
+        const CubeTop = echarts.graphic.extendShape({
+            shape: {
+                x: 0,
+                y: 0,
+            },
+            buildPath: function (ctx, shape) {
+                const c1 = [shape.x, shape.y];
+                const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+                const c3 = [shape.x, shape.y - offsetX];
+                const c4 = [shape.x - offsetX, shape.y - offsetY];
+                ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
+            },
+        });
+        // 注册三个面图形
+        echarts.graphic.registerShape('CubeLeft', CubeLeft);
+        echarts.graphic.registerShape('CubeRight', CubeRight);
+        echarts.graphic.registerShape('CubeTop', CubeTop);
         let option = {
             tooltip: {
-                trigger: "item"
+                trigger: 'item',
             },
             grid: {
-                left: 10,
-                right: 10,
-                bottom: 10,
-                top: 10,
-                containLabel: true
+                top: "8%",
+                left: "5%",
+                right: "5%",
+                bottom: "5%",
+                containLabel: true,
             },
             xAxis: {
-                data: ["1", "2", "3", "4", "5"],
-                axisTick: {
-                    show: true
-                },
+                type: 'category',
+                data: ['低风险', '一般风险', '较大风险', '重大风险', '报警'],
+                // X
                 axisLine: {
+                    show: true,
                     lineStyle: {
-                        color: '#425b78'
-                    }
+                        // width: 1,
+                        color: '#2B7BD6',
+                    },
+                },
+                axisTick: {
+                    show: false,
                 },
                 axisLabel: {
-                    color: '#b9bec6',
-                    fontSize: 14
-                }
-            },
-            yAxis: {
-                type: 'value',
-                name: '单位 / K㎡',
-                nameTextStyle: {
-                    color: "#b9bec6",
-                    fontSize: 12,
+                    fontSize: 14,
+                    interval: 0,
                 },
                 axisLine: {
-                    lineStyle: {
-                        color: '#425b78',
-                        fontSize: 14
-                    }
-                },
-                splitLine: {
                     show: true,
                     lineStyle: {
-                        color: '#587485',
+                        color: 'rgba(34, 55, 81,.7)',
                     },
                 },
                 axisLabel: {
-                    show: true,
                     textStyle: {
-                        color: '#b9bec6',
-
-                    },
-                },
-            },
-            series: [{
-                z: 1,
-                type: "bar",
-                barWidth: 30,
-                data: [{
-                    value: 220,
-                    itemStyle: {
-                        normal: {
-                            color: colors[1]
-                        }
-                    }
-                },
-                {
-                    value: 182,
-                    itemStyle: {
-                        normal: {
-                            color: colors[2]
-                        }
-                    }
-                },
-                {
-                    value: 191,
-                    itemStyle: {
-                        normal: {
-                            color: colors[3]
-                        }
-                    }
-                },
-                {
-                    value: 234,
-                    itemStyle: {
-                        normal: {
-                            color: colors[4]
-                        }
-                    }
-                },
-                {
-                    value: 290,
-                    itemStyle: {
-                        normal: {
-                            color: colors[5]
-                        }
+                        color: '#FFF',  //更改坐标轴文字颜色
+                        fontSize: 12     //更改坐标轴文字大小
                     }
                 }
-                ]
             },
-            {
-                z: 2,
-                name: "底部",
-                type: "pictorialBar",
-                data: [{
-                    value: 1,
-                    itemStyle: {
-                        normal: {
-                            color: colors[1]
-                        }
-                    }
+            yAxis: {
+                name: '',
+                type: 'value',
+                axisLine: {
+                    show: false,
                 },
-                {
-                    value: 1,
-                    itemStyle: {
-                        normal: {
-                            color: colors[2]
-                        }
-                    }
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        // type: 'dashed',
+                      color: 'rgba(34, 55, 81,.7)',
+                    },
                 },
-                {
-                    value: 1,
-                    itemStyle: {
-                        normal: {
-                            color: colors[3]
-                        }
-                    }
+                axisTick: {
+                    show: false,
                 },
-                {
-                    value: 1,
-                    itemStyle: {
-                        normal: {
-                            color: colors[4]
-                        }
-                    }
+                axisLabel: {
+                    fontSize: 14,
                 },
-                {
-                    value: 1,
-                    itemStyle: {
-                        normal: {
-                            color: colors[5]
-                        }
+                axisLabel: {
+                    textStyle: {
+                        color: '#FFF',  //更改坐标轴文字颜色
+                        fontSize: 12     //更改坐标轴文字大小
                     }
                 }
-                ],
-                symbol: "diamond",
-                symbolOffset: [0, "50%"],
-                symbolSize: [barWidth, 10]
             },
-            {
-                z: 3,
-                name: "上部1",
-                type: "pictorialBar",
-                symbolPosition: "end",
-                data: [{
-                    value: 220,
-                    itemStyle: {
-                        normal: {
-                            borderColor: colors[1],
-                            borderWidth: 2,
-                            color: colors[1]
-                        }
-                    }
-                },
-                {
-                    value: 182,
-                    itemStyle: {
-                        normal: {
-                            borderColor: colors[2],
-                            borderWidth: 2,
-                            color: colors[2]
-                        }
-                    }
-                },
-                {
-                    value: 191,
-                    itemStyle: {
-                        normal: {
-                            borderColor: colors[3],
-                            borderWidth: 2,
-                            color: colors[3]
-                        }
-                    }
-                },
+            series: [
+                // 柱体
                 {
-                    value: 234,
-                    itemStyle: {
-                        normal: {
-                            borderColor: colors[4],
-                            borderWidth: 2,
-                            color: colors[4]
-                        }
-                    }
+                    name: '',
+                    type: 'custom',
+                    stack: "Ad",
+                    renderItem: (params, api) => {
+                        console.log(params,'111---')
+                        const location = api.coord([api.value(0), api.value(1)]);
+                        return {
+                            type: 'group',
+                            x: 1,
+                            children: [
+                                {
+                                    type: 'CubeLeft',
+                                    shape: {
+                                        api,
+                                        xValue: api.value(0),
+                                        yValue: api.value(1),
+                                        x: location[0],
+                                        y: location[1],
+                                        xAxisPoint: api.coord([api.value(0), 0]),
+                                    },
+                                    style: {
+                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                            {
+                                                offset: 0,
+                                                color: colorList[params.dataIndex][0],
+                                            },
+                                            {
+                                                offset: 1,
+                                                color: colorList[params.dataIndex][1],
+                                            },
+                                        ]),
+                                    },
+                                },
+                                {
+                                    type: 'CubeRight',
+                                    shape: {
+                                        api,
+                                        xValue: api.value(0),
+                                        yValue: api.value(1),
+                                        x: location[0],
+                                        y: location[1],
+                                        xAxisPoint: api.coord([api.value(0), 0]),
+                                    },
+                                    style: {
+                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                            {
+                                                offset: 0,
+                                                color: colorList[params.dataIndex][0],
+                                            },
+                                            {
+                                                offset: 1,
+                                                color: colorList[params.dataIndex][1],
+                                            },
+                                        ]),
+                                    },
+                                },
+                                {
+                                    type: 'CubeTop',
+                                    shape: {
+                                        api,
+                                        xValue: api.value(0),
+                                        yValue: api.value(1),
+                                        x: location[0],
+                                        y: location[1],
+                                        xAxisPoint: api.coord([api.value(0), 0]),
+                                    },
+                                    style: {
+                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                            {
+                                                offset: 0,
+                                                color: colorList[params.dataIndex][0],
+                                            },
+                                            {
+                                                offset: 1,
+                                                color: colorList[params.dataIndex][1],
+                                            },
+                                        ]),
+                                    },
+                                },
+                            ],
+                        };
+                    },
+                    data: [21, 35, 44, 61, 74,],
                 },
-                {
-                    value: 290,
-                    itemStyle: {
-                        normal: {
-                            borderColor: colors[5],
-                            borderWidth: 2,
-                            color: colors[5]
-                        }
-                    }
-                }
-                ],
-                symbol: "diamond",
-                symbolOffset: [0, "-50%"],
-                symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth]
-            }
-            ]
-        }
+            ],
+        };
         myChart.setOption(option);
         window.onresize = function () {
             myChart.resize();
@@ -411,7 +415,8 @@ onMounted(() => {
 .dz-dust {
     position: relative;
     height: 100%;
-    .chartDust{
+
+    .chartDust {
         width: 100%;
         height: 100%;
     }

src/views/vent/home/configurable/components/preset/dz-fire.vue

@@ -0,0 +1,139 @@
+<template>
+    <div class="dz-fire">
+        <div class="fire-container" :class="`fire-container_${type}`">
+            <div class="title-box" :class="`title-box_${type}`">
+                <div :class="`title-box-label_${type}`">{{ titleData.label }}</div>
+                <div :class="`title-box-val_${type}`">{{ titleData.value }}</div>
+            </div>
+            <div class="content-box" :class="`content-box_${type}`">
+                <div class="content-box-item" v-for="(item, index) in List" :key="index">
+                    <div class="box-item-label">{{ item.label }}</div>
+                    <div class="box-item-value">{{ item.value }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, } from 'vue'
+
+let props = defineProps({
+    type: {
+        type: String,
+        defualt: '',
+    },
+    titleData: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+
+let List = ref<any[]>([
+    { label: '22煤', value: '20' },
+    { label: '32煤', value: '21' },
+    { label: '42煤', value: '22' },
+    { label: '52煤', value: '23' },
+
+])
+
+
+</script>
+
+<style lang="less" scoped>
+.dz-fire {
+    height: 100%;
+    padding: 10px 25px 0px 25px;
+    box-sizing: border-box;
+
+    .fire-container_A {
+        position: relative;
+        width: 100%;
+        height: 85px;
+        background: url('@/assets/images/home-green/1300.png') no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .fire-container_B {
+        position: relative;
+        width: 100%;
+        height: 85px;
+        background: url('@/assets/images/home-green/1200.png') no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .title-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        position: absolute;
+        left: 122px;
+        top: 0;
+    }
+
+    .content-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        position: absolute;
+        left: 122px;
+        top: 32px;
+    }
+    .content-box-item{
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+    }
+    .box-item-value{
+         font-family: 'douyuFont';
+                    font-size: 12px;
+    }
+
+
+    .title-box_A {
+        width: 398px;
+        height: 32px;
+    }
+
+    .title-box_B {
+        width: 398px;
+        height: 32px;
+    }
+
+    .title-box-label_A {
+        color: #b9ffe5;
+    }
+
+    .title-box-label_B {
+        color: #b9f1ff;
+    }
+
+    .title-box-val_A {
+        font-family: 'douyuFont';
+        color: #b9ffe5;
+    }
+
+    .title-box-val_B {
+        font-family: 'douyuFont';
+        color: #b9f1ff;
+    }
+
+    .content-box_A {
+        display: flex;
+        width: 398px;
+        height: 42px;
+    }
+    .content-box_B {
+        display: flex;
+        width: 398px;
+        height: 42px;
+    }
+
+
+}
+</style>

src/views/vent/home/configurable/components/preset/dz-risk.vue

@@ -0,0 +1,167 @@
+<template>
+    <div class="dz-risk">
+        <div class="risk-container">
+            <div class="risk-center"></div>
+            <div ref="riskPie" class="risk-pie"></div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, onMounted } from 'vue'
+import * as echarts from 'echarts';
+
+let riskPie = ref(null)
+
+function getOption() {
+    nextTick(() => {
+        const colorList = [
+            {
+                type: 'radial',
+                r: 1,
+                colorStops: [{
+                    offset: 0, color: 'rgba(182, 242, 255,1)' // 0% 处的颜色
+                }, {
+                    offset: 1, color: 'rgba(95, 228, 255,1)' // 100% 处的颜色
+                }],
+                // global: false // 缺省为 false
+            },
+            {
+                type: 'radial',
+                r: 1,
+                colorStops: [{
+                    offset: 0, color: 'rgba(176, 255, 236,1)' // 0% 处的颜色
+                }, {
+                    offset: 1, color: 'rgba(86, 255, 171,1)' // 100% 处的颜色
+                }],
+                // global: false // 缺省为 false
+            },
+            {
+                type: 'radial',
+                r: 1,
+                colorStops: [{
+                    offset: 0, color: 'rgba(255, 253, 176,1)' // 0% 处的颜色
+                }, {
+                    offset: 1, color: 'rgba(255, 255, 86,1)' // 100% 处的颜色
+                }],
+                // global: false // 缺省为 false
+            },
+            {
+                type: 'radial',
+                r: 1,
+                colorStops: [{
+                    offset: 0, color: 'rgba(215, 179, 255,1)' // 0% 处的颜色
+                }, {
+                    offset: 1, color: 'rgba(134, 88, 255,1)' // 100% 处的颜色
+                }],
+                // global: false // 缺省为 false
+            },
+        ]
+        const arr = [
+            { value: 123, name: '通风' },
+            { value: 102, name: '火灾' },
+            { value: 122, name: '瓦斯' },
+            { value: 137, name: '粉尘' },
+
+        ]
+        let myChart = echarts.init(riskPie.value);
+        let option = {
+            color: colorList,
+            tooltip: {
+                trigger: 'item'
+            },
+            series: [{
+                type: 'pie',
+                center: ['50%', '50%'],
+                radius: ['48%', '70%'],
+                // clockwise: false,
+                avoidLabelOverlap: false,
+                emphasis: {
+                    label: {
+                        show: true
+                    }
+                },
+                
+                // hoverOffset: 0,
+                 highlight: true,
+                itemStyle: {
+                    normal: {
+                        color: function (params) {
+                            return colorList[params.dataIndex]
+                        }
+                    }
+                },
+                label: {
+                    show: true,
+                    position: 'outside',
+                    formatter: '{a|{b}：{d}%}\n{hr|}',
+                  rich: {
+                hr: {
+                    backgroundColor: 't',
+                    borderRadius: 3,
+                    width: 3,
+                    height: 3,
+                    padding: [3, 3, 0, -12]
+                },
+                a: {
+                    padding: [-30, 15, -20, 15]
+                }
+            }
+                },
+
+
+                labelLine: {
+                    normal: {
+                        length: 10,
+                        length2: 20,
+                        lineStyle: {
+                            width: 1
+                        }
+                    }
+                },
+                data: arr,
+            }]
+        };
+        myChart.setOption(option);
+        window.onresize = function () {
+            myChart.resize();
+        };
+    });
+}
+
+onMounted(() => {
+    getOption()
+
+})
+</script>
+
+<style lang="less" scoped>
+.dz-risk {
+    height: 100%;
+
+    .risk-container {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        height: 210px;
+        background: url('@/assets/images/home-green/1400.png') no-repeat center;
+        background-size: auto 100%;
+
+        .risk-center {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 100%;
+            height: 80px;
+            background: url('@/assets/images/home-green/1500.png') no-repeat center;
+            background-size: auto 100%;
+        }
+
+        .risk-pie {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+</style>

src/views/vent/home/configurable/components/preset/dz-scroll-list.vue

@@ -1,248 +0,0 @@
-<template>
-    <div class="dzScrollList">
-        <div class="item item1">
-            <div class="icon"></div>
-            <vue3-seamless-scroll hover-stop="true" :list="fireMonitor1" :hover="true" :step="0.18"
-                :limit-scroll-num="fireMonitor1.length" class="seamless-warp1">
-                <div class="data-box" v-for="(item, index) in fireMonitor1" :key="index">
-                    <div class="box-item">
-                        <div :class="{
-                            value1: item.warnLevel == '绿色预警',
-                            value2: item.warnLevel == '黄色预警',
-                            value3: item.warnLevel == '红色预警',
-                        }">{{ item.value1 ? item.value1 : '--' }}</div>
-                        <div class="title">监测位置</div>
-                    </div>
-
-                    <div class="box-item">
-                        <div :class="{
-                            value1: item.warnLevel == '绿色预警',
-                            value2: item.warnLevel == '黄色预警',
-                            value3: item.warnLevel == '红色预警',
-                        }">{{ item.warnLevel || '-' }}
-                        </div>
-                        <div class="title">预警等级</div>
-                    </div>
-                    <div class="box-item1">
-                        <div :class="{
-                            value1: item.warnLevel == '绿色预警',
-                            value2: item.warnLevel == '黄色预警',
-                            value3: item.warnLevel == '红色预警',
-                        }">{{ item.smokeJd || '-' }}
-                        </div>
-                        <div class="title">煤自燃阶段</div>
-                    </div>
-                </div>
-            </vue3-seamless-scroll>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, reactive } from 'vue'
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-
-let fireMonitor1 = reactive<any[]>([
-    { warnLevel: '束管1', smokeJd: '绿色预警', value1: '潜伏期阶段' },
-    { warnLevel: '束管2', smokeJd: '黄色预警', value1: '加速氧化阶段' },
-]);
-
-</script>
-
-<style lang="less" scoped>
-.dzScrollList {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    .item {
-        height: 102px;
-        width: 100%;
-        position: relative;
-        display: flex;
-        align-content: center;
-        padding-top: 35px;
-
-        &::before {
-            content: '';
-            width: 100%;
-            height: 120px;
-            position: absolute;
-            top: 0px;
-            background: url(/src/assets/images/vent/fire-bg-top.png);
-            background-size: 100% 100%;
-        }
-
-        .icon {
-            width: 72px;
-            height: 36px;
-            margin: 0 15px 0 45px;
-            background: url(/src/assets/images/vent/icon-bottom-bg.png);
-            position: relative;
-            top: 30px;
-            background-size: 100% 100%;
-
-            &::after {
-                position: absolute;
-                content: '';
-                width: 50px;
-                height: 50px;
-                top: -25px;
-                left: 17px;
-                background: url(/src/assets/images/vent/outer-icon.svg) no-repeat;
-            }
-        }
-        .seamless-warp1 {
-            width: 382px;
-            height: 80%;
-            overflow: hidden;
-
-            .data-box {
-                display: flex;
-                width: 382px;
-                justify-content: center;
-                align-items: center;
-                margin: 30px auto;
-
-                .box-item {
-                    width: 30%;
-                    height: 100%;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    padding: 0 10px;
-
-                    .value {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        color: #2bdcff;
-                        margin-bottom: 5px;
-                    }
-
-                    .value1 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: rgb(145, 230, 9);
-                    }
-
-                    .value2 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ffff35;
-                    }
-
-                    .value3 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff0000;
-                    }
-
-                    .value4 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ffbe69;
-                    }
-
-                    .value5 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff6f00;
-                    }
-
-                    .value6 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff0000;
-                    }
-
-                    .title {
-                        font-size: 12px;
-                    }
-                }
-
-                .box-item1 {
-                    width: 40%;
-                    height: 100%;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    padding: 0 10px;
-
-                    .value {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        color: #2bdcff;
-                        margin-bottom: 5px;
-                    }
-
-                    .value1 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: rgb(145, 230, 9);
-                    }
-
-                    .value2 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ffff35;
-                    }
-
-                    .value3 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff0000;
-                    }
-
-                    .value4 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ffbe69;
-                    }
-
-                    .value5 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff6f00;
-                    }
-
-                    .value6 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff0000;
-                    }
-
-                    .title {
-                        font-size: 12px;
-                    }
-                }
-            }
-        }
-    }
-
-    .item1 {
-        top: 0px;
-
-        &::before {
-            transform: matrix(1, 0, 0, -1, 0, 0);
-        }
-
-        .icon {
-            &::after {
-                background: url('@/assets/images/vent/inner-icon.svg') no-repeat;
-            }
-        }
-    }
-}
-</style>

src/views/vent/home/configurable/components/preset/dz-unscroll-list.vue

@@ -1,291 +0,0 @@
-<template>
-    <div class="dzUnScrollList">
-        <div class="item">
-            <div class="icon"></div>
-            <div style="display: flex; justify-content: flex-start">
-                <div class="data-box1" v-for="(item, index) in fireMonitor" :key="index">
-                    <div class="value1"> {{ !item.value ? '低风险' : item.value == '正常' ? '低风险' : item.value }} </div>
-                    <div class="title">{{ item.title }}</div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-let fireMonitor=ref<any[]>([
-  {
-    title: '温度',
-    code: '',
-    level: null,
-    value: '正常',
-  },
-  {
-    title: '烟雾',
-    code: '',
-    level: null,
-    value: '正常',
-  },
-  {
-    title: '火焰',
-    code: '',
-    level: null,
-    value: '-',
-  },
-  {
-    title: 'CO最大值(ppm)',
-    code: '',
-    level: null,
-    value: '0',
-  },
-  
-])
-</script>
-
-<style lang="less" scoped>
-.dzUnScrollList {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    .item {
-        height: 102px;
-        width: 100%;
-        position: relative;
-        display: flex;
-        align-content: center;
-        padding-top: 42px;
-
-        &::before {
-            content: '';
-            width: 100%;
-            height: 120px;
-            position: absolute;
-            top: 0px;
-            background: url(/src/assets/images/vent/fire-bg-top.png);
-            background-size: 100% 100%;
-        }
-
-        .icon {
-            width: 72px;
-            height: 36px;
-            margin: 0 15px 0 45px;
-            background: url(/src/assets/images/vent/icon-bottom-bg.png);
-            position: relative;
-            top: 30px;
-            background-size: 100% 100%;
-
-            &::after {
-                position: absolute;
-                content: '';
-                width: 50px;
-                height: 50px;
-                top: -25px;
-                left: 17px;
-                background: url(/src/assets/images/vent/outer-icon.svg) no-repeat;
-            }
-        }
-
-        .data-box1 {
-            display: flex;
-            flex-direction: column;
-
-            width: 94px;
-            align-items: center;
-
-            .value {
-                font-size: 14px;
-                font-family: 'douyuFont';
-                color: #2bdcff;
-                margin-bottom: 5px;
-            }
-
-            .value1 {
-                font-size: 14px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: rgb(145, 230, 9);
-            }
-
-            .value2 {
-                font-size: 14px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: #ffff35;
-            }
-
-            .value3 {
-                font-size: 14px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: #ff0000;
-            }
-
-            .value4 {
-                font-size: 14px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: #ffbe69;
-            }
-
-            .value5 {
-                font-size: 14px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: #ff6f00;
-            }
-
-            .value6 {
-                font-size: 14px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: #ff0000;
-            }
-
-            .title {
-                font-size: 12px;
-            }
-        }
-
-        .seamless-warp1 {
-            width: 382px;
-            height: 80%;
-            overflow: hidden;
-
-            .data-box {
-                display: flex;
-                width: 382px;
-                justify-content: center;
-                align-items: center;
-                margin: 30px auto;
-
-                .box-item {
-                    width: 30%;
-                    height: 100%;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    padding: 0 10px;
-
-                    .value {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        color: #2bdcff;
-                        margin-bottom: 5px;
-                    }
-
-                    .value1 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: rgb(145, 230, 9);
-                    }
-
-                    .value2 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ffff35;
-                    }
-
-                    .value3 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff0000;
-                    }
-
-                    .value4 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ffbe69;
-                    }
-
-                    .value5 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff6f00;
-                    }
-
-                    .value6 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff0000;
-                    }
-
-                    .title {
-                        font-size: 12px;
-                    }
-                }
-
-                .box-item1 {
-                    width: 40%;
-                    height: 100%;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    padding: 0 10px;
-
-                    .value {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        color: #2bdcff;
-                        margin-bottom: 5px;
-                    }
-
-                    .value1 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: rgb(145, 230, 9);
-                    }
-
-                    .value2 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ffff35;
-                    }
-
-                    .value3 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff0000;
-                    }
-
-                    .value4 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ffbe69;
-                    }
-
-                    .value5 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff6f00;
-                    }
-
-                    .value6 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff0000;
-                    }
-
-                    .title {
-                        font-size: 12px;
-                    }
-                }
-            }
-        }
-    }
-}
-</style>

src/views/vent/home/configurable/configurable.data.ts

@@ -3334,11 +3334,11 @@ export const testConfigFusionGreen: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'dz_onfire',
+            name: 'dz_fire',
             basis: '50%',
           },
           {
-            name: 'dz_outfire',
+            name: 'dz_fire',
             basis: '50%',
           },
         ],
@@ -3352,10 +3352,22 @@ export const testConfigFusionGreen: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'dz_onfire',
+          readFrom: 'dz_fire',
+          type: 'A',
+          titleData: {
+            label: '安全监测系统监测点',
+            value: '25'
+          }
+
         },
         {
-          readFrom: 'dz_outfire',
+          readFrom: 'dz_fire',
+          type: 'B',
+          titleData: {
+            label: '瓦斯抽采系统监测点',
+            value: '25'
+          }
+
         },
       ],
       // mock: BDfireMock,
@@ -3383,6 +3395,7 @@ export const testConfigFusionGreen: Config[] = [
           value: '',
         },
       },
+
       background: {
         show: false,
         type: 'video',
@@ -3392,36 +3405,33 @@ export const testConfigFusionGreen: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'chart',
+            name: 'dz_risk',
             basis: '100%',
           },
         ],
       },
       board: [],
-      chart: [
-        {
-          type: 'pie_halo',
-          readFrom: '',
-          legend: { show: false, formatter: '{b}:{c}\n{d}%' },
-          xAxis: [{ show: false }],
-          yAxis: [{ show: false, name: '风量', position: 'left' }],
-          series: [{ readFrom: 'piechart', xprop: 'label', yprop: 'valMock', label: '' }],
-        },
-      ],
+      chart: [],
       gallery: [],
       gallery_list: [],
       table: [],
       list: [],
       complex_list: [],
-      preset: [],
+      preset: [
+        {
+          readFrom: 'dz_risk',
+        },
+      ],
       // mock: BDfireMock,
-    },
-    showStyle: {
-      size: 'width:360px;height:240px;',
-      version: '原版',
-      position: 'bottom:15px;right:450px',
-    },
-  },
+
+      showStyle: {
+        size: 'width:360px;height:240px;',
+        version: '原版',
+        position: 'bottom:15px;right:450px',
+      },
+    }
+  }
+
 ];
 
 export const testConfigVentNew: Config[] = [

src/views/vent/monitorManager/alarmMonitor/common.data.ts

@@ -197,7 +197,7 @@ export function getMonitorFlag() {
       typeFlag = '2';
       return typeFlag;
     default:
-      typeFlag = '';
+      typeFlag = '1';
       return typeFlag;
   }
 }