登录、echarts、设备管理

src/components/Form/src/BasicForm.vue

@@ -1,31 +1,33 @@
 <template>
-  <Form v-bind="getBindValue" :class="getFormClass" ref="formElRef" :model="formModel" @keypress.enter="handleEnterPress">
-    <Row v-bind="getRow">
-      <slot name="formHeader"></slot>
-      <template v-for="schema in getSchema" :key="schema.field">
-        <FormItem
-          :tableAction="tableAction"
-          :formActionType="formActionType"
-          :schema="schema"
-          :formProps="getProps"
-          :allDefaultValues="defaultValueRef"
-          :formModel="formModel"
-          :setFormModel="setFormModel"
-        >
-          <template #[item]="data" v-for="item in Object.keys($slots)">
+  <div class="vent-form">
+    <Form v-bind="getBindValue" :class="getFormClass" ref="formElRef" :model="formModel" @keypress.enter="handleEnterPress">
+      <Row v-bind="getRow">
+        <slot name="formHeader"></slot>
+        <template v-for="schema in getSchema" :key="schema.field">
+          <FormItem
+            :tableAction="tableAction"
+            :formActionType="formActionType"
+            :schema="schema"
+            :formProps="getProps"
+            :allDefaultValues="defaultValueRef"
+            :formModel="formModel"
+            :setFormModel="setFormModel"
+          >
+            <template #[item]="data" v-for="item in Object.keys($slots)">
+              <slot :name="item" v-bind="data || {}"></slot>
+            </template>
+          </FormItem>
+        </template>
+
+        <FormAction v-bind="getFormActionBindProps" @toggle-advanced="handleToggleAdvanced">
+          <template #[item]="data" v-for="item in ['resetBefore', 'submitBefore', 'advanceBefore', 'advanceAfter']">
             <slot :name="item" v-bind="data || {}"></slot>
           </template>
-        </FormItem>
-      </template>
-
-      <FormAction v-bind="getFormActionBindProps" @toggle-advanced="handleToggleAdvanced">
-        <template #[item]="data" v-for="item in ['resetBefore', 'submitBefore', 'advanceBefore', 'advanceAfter']">
-          <slot :name="item" v-bind="data || {}"></slot>
-        </template>
-      </FormAction>
-      <slot name="formFooter"></slot>
-    </Row>
-  </Form>
+        </FormAction>
+        <slot name="formFooter"></slot>
+      </Row>
+    </Form>
+  </div>
 </template>
 <script lang="ts">
   import type { FormActionType, FormProps, FormSchema } from './types/form';

src/components/Form/src/hooks/useForm.ts

@@ -6,9 +6,9 @@ import { ref, onUnmounted, unref, nextTick, watch } from 'vue';
 import { isProdMode } from '/@/utils/env';
 import { error } from '/@/utils/log';
 import { getDynamicProps, getValueType } from '/@/utils';
-import { add } from "/@/components/Form/src/componentMap";
+import { add } from '/@/components/Form/src/componentMap';
 //集成online专用控件
-import { OnlineSelectCascade, LinkTableCard, LinkTableSelect } from  '@jeecg/online';
+import { OnlineSelectCascade, LinkTableCard, LinkTableSelect } from '@jeecg/online';
 
 export declare type ValidateFields = (nameList?: NamePath[]) => Promise<Recordable>;
 
@@ -19,10 +19,10 @@ export function useForm(props?: Props): UseFormReturnType {
   const loadedRef = ref<Nullable<boolean>>(false);
 
   //集成online专用控件
-  add("OnlineSelectCascade", OnlineSelectCascade)
-  add("LinkTableCard", LinkTableCard)
-  add("LinkTableSelect", LinkTableSelect)
-  
+  add('OnlineSelectCascade', OnlineSelectCascade);
+  add('LinkTableCard', LinkTableCard);
+  add('LinkTableSelect', LinkTableSelect);
+
   async function getForm() {
     const form = unref(formRef);
     if (!form) {
@@ -93,9 +93,9 @@ export function useForm(props?: Props): UseFormReturnType {
     // TODO promisify
     getFieldsValue: <T>() => {
       //update-begin-author:taoyan date:2022-7-5 for: VUEN-1341【流程】编码方式 流程节点编辑表单时，填写数据报错 包括用户组件、部门组件、省市区
-      let values = unref(formRef)?.getFieldsValue() as T;
-      if(values){
-        Object.keys(values).map(key=>{
+      const values = unref(formRef)?.getFieldsValue() as T;
+      if (values) {
+        Object.keys(values).map((key) => {
           if (values[key] instanceof Array) {
             values[key] = values[key].join(',');
           }
@@ -128,11 +128,11 @@ export function useForm(props?: Props): UseFormReturnType {
      */
     validate: async (nameList?: NamePath[]): Promise<Recordable> => {
       const form = await getForm();
-      let getProps = props || form.getProps;
-      let values = form.validate(nameList).then((values) => {
-        for (let key in values) {
+      const getProps = props || form.getProps;
+      const values = form.validate(nameList).then((values) => {
+        for (const key in values) {
           if (values[key] instanceof Array) {
-            let valueType = getValueType(getProps, key);
+            const valueType = getValueType(getProps, key);
             if (valueType === 'string') {
               values[key] = values[key].join(',');
             }

src/components/Form/src/jeecg/components/JRangeDate.vue

@@ -0,0 +1,67 @@
+<template>
+  <a-range-picker v-model:value="rangeValue" @change="handleChange" :show-time="datetime" :placeholder="placeholder" :valueFormat="valueFormat" />
+</template>
+
+<script>
+  import { defineComponent, ref, watch, computed } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { Form } from 'ant-design-vue';
+
+  const placeholder = ['最小值', '最大值'];
+  /**
+   * 用于范围查询
+   */
+  export default defineComponent({
+    name: 'JRangeDate',
+    props: {
+      value: propTypes.string.def(''),
+      datetime: propTypes.bool.def(false),
+      placeholder: propTypes.string.def(''),
+    },
+    emits: ['change', 'update:value'],
+    setup(props, { emit }) {
+      const rangeValue = ref([]);
+      const formItemContext = Form.useInjectFormItemContext();
+
+      watch(
+        () => props.value,
+        (val) => {
+          if (val) {
+            rangeValue.value = val.split(',');
+          } else {
+            rangeValue.value = [];
+          }
+        },
+        { immediate: true }
+      );
+
+      const valueFormat = computed(() => {
+        if (props.datetime === true) {
+          return 'YYYY-MM-DD HH:mm:ss';
+        } else {
+          return 'YYYY-MM-DD';
+        }
+      });
+
+      function handleChange(arr) {
+        let str = '';
+        if (arr && arr.length > 0) {
+          if (arr[1] && arr[0]) {
+            str = arr.join(',');
+          }
+        }
+        emit('change', str);
+        emit('update:value', str);
+        formItemContext.onFieldChange();
+      }
+      return {
+        rangeValue,
+        placeholder,
+        valueFormat,
+        handleChange,
+      };
+    },
+  });
+</script>
+
+<style scoped></style>

src/components/JVxeCustom/src/components/JVxePcaCell.vue

@@ -0,0 +1,77 @@
+<template>
+  <a-cascader v-bind="getProps" class="pca-select" @change="handleChange" />
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import { regionData, getRealCode } from '/@/components/Form/src/utils/areaDataUtil';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+  import { dispatchEvent } from '/@/components/jeecg/JVxeTable/utils';
+
+  export default defineComponent({
+    name: 'JVxePcaCell',
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const { innerValue, cellProps, handleChangeCommon } = useJVxeComponent(props);
+
+      const selectedValue = computed(() => {
+        let val: any = innerValue.value;
+        if (!val) {
+          return [];
+        }
+        let arr = getRealCode(val, 3);
+        return arr;
+      });
+
+      const getProps = computed(() => {
+        return {
+          ...cellProps.value,
+          options: regionData,
+          showOverflow: false,
+          value: selectedValue.value,
+        };
+      });
+
+      function handleChange(arr) {
+        let str = '';
+        if (arr && arr.length == 3) {
+          str = arr[2];
+        }
+        handleChangeCommon(str);
+      }
+
+      return {
+        handleChange,
+        selectedValue,
+        getProps,
+      };
+    },
+    // 【组件增强】注释详见：JVxeComponent.Enhanced
+    enhanced: {
+      switches: {
+        visible: true,
+      },
+      translate: {
+        enabled: false,
+      },
+      aopEvents: {
+        editActived({ $event }) {
+          dispatchEvent({
+            $event,
+            props: this.props,
+            className: '.ant-select .ant-select-selection-search-input',
+            isClick: true,
+          });
+        },
+      },
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
+<style lang="less">
+  .pca-select {
+    .ant-select-selection-placeholder {
+      color: #bfbfbf !important;
+    }
+  }
+</style>

src/components/Modal/src/BasicModal.vue

@@ -1,61 +1,63 @@
 <template>
-  <Modal v-bind="getBindValue" @cancel="handleCancel">
-    <template #closeIcon v-if="!$slots.closeIcon">
-      <ModalClose
-        :canFullscreen="getProps.canFullscreen"
-        :fullScreen="fullScreenRef"
-        :commentSpan="commentSpan"
-        :enableComment="getProps.enableComment"
-        @comment="handleComment"
-        @cancel="handleCancel"
-        @fullscreen="handleFullScreen"
-      />
-    </template>
+  <div class="vent-modal">
+    <Modal v-bind="getBindValue" @cancel="handleCancel">
+      <template #closeIcon v-if="!$slots.closeIcon">
+        <ModalClose
+          :canFullscreen="getProps.canFullscreen"
+          :fullScreen="fullScreenRef"
+          :commentSpan="commentSpan"
+          :enableComment="getProps.enableComment"
+          @comment="handleComment"
+          @cancel="handleCancel"
+          @fullscreen="handleFullScreen"
+        />
+      </template>
 
-    <template #title v-if="!$slots.title">
-      <ModalHeader :helpMessage="getProps.helpMessage" :title="getMergeProps.title" @dblclick="handleTitleDbClick" />
-    </template>
+      <template #title v-if="!$slots.title">
+        <ModalHeader :helpMessage="getProps.helpMessage" :title="getMergeProps.title" @dblclick="handleTitleDbClick" />
+      </template>
 
-    <template #footer v-if="!$slots.footer">
-      <ModalFooter v-bind="getBindValue" @ok="handleOk" @cancel="handleCancel">
-        <template #[item]="data" v-for="item in Object.keys($slots)">
-          <slot :name="item" v-bind="data || {}"></slot>
-        </template>
-      </ModalFooter>
-    </template>
+      <template #footer v-if="!$slots.footer">
+        <ModalFooter v-bind="getBindValue" @ok="handleOk" @cancel="handleCancel">
+          <template #[item]="data" v-for="item in Object.keys($slots)">
+            <slot :name="item" v-bind="data || {}"></slot>
+          </template>
+        </ModalFooter>
+      </template>
 
-    <!-- update-begin-author:taoyan date:2022-7-18 for:  modal弹窗 支持评论 slot -->
-    <a-row class="jeecg-modal-wrapper">
-      <a-col :span="24 - commentSpan" class="jeecg-modal-content">
-        <ModalWrapper
-          :useWrapper="getProps.useWrapper"
-          :footerOffset="wrapperFooterOffset"
-          :fullScreen="fullScreenRef"
-          ref="modalWrapperRef"
-          :loading="getProps.loading"
-          :loading-tip="getProps.loadingTip"
-          :minHeight="getProps.minHeight"
-          :height="getWrapperHeight"
-          :visible="visibleRef"
-          :modalFooterHeight="footer !== undefined && !footer ? 0 : undefined"
-          v-bind="omit(getProps.wrapperProps, 'visible', 'height', 'modalFooterHeight')"
-          @ext-height="handleExtHeight"
-          @height-change="handleHeightChange"
-        >
-          <slot></slot>
-        </ModalWrapper>
-      </a-col>
+      <!-- update-begin-author:taoyan date:2022-7-18 for:  modal弹窗 支持评论 slot -->
+      <a-row class="jeecg-modal-wrapper">
+        <a-col :span="24 - commentSpan" class="jeecg-modal-content">
+          <ModalWrapper
+            :useWrapper="getProps.useWrapper"
+            :footerOffset="wrapperFooterOffset"
+            :fullScreen="fullScreenRef"
+            ref="modalWrapperRef"
+            :loading="getProps.loading"
+            :loading-tip="getProps.loadingTip"
+            :minHeight="getProps.minHeight"
+            :height="getWrapperHeight"
+            :visible="visibleRef"
+            :modalFooterHeight="footer !== undefined && !footer ? 0 : undefined"
+            v-bind="omit(getProps.wrapperProps, 'visible', 'height', 'modalFooterHeight')"
+            @ext-height="handleExtHeight"
+            @height-change="handleHeightChange"
+          >
+            <slot></slot>
+          </ModalWrapper>
+        </a-col>
 
-      <a-col :span="commentSpan" class="jeecg-comment-outer">
-        <slot name="comment"></slot>
-      </a-col>
-    </a-row>
-    <!-- update-end-author:taoyan date:2022-7-18 for:  modal弹窗 支持评论 slot -->
+        <a-col :span="commentSpan" class="jeecg-comment-outer">
+          <slot name="comment"></slot>
+        </a-col>
+      </a-row>
+      <!-- update-end-author:taoyan date:2022-7-18 for:  modal弹窗 支持评论 slot -->
 
-    <template #[item]="data" v-for="item in Object.keys(omit($slots, 'default'))">
-      <slot :name="item" v-bind="data || {}"></slot>
-    </template>
-  </Modal>
+      <template #[item]="data" v-for="item in Object.keys(omit($slots, 'default'))">
+        <slot :name="item" v-bind="data || {}"></slot>
+      </template>
+    </Modal>
+  </div>
 </template>
 <script lang="ts">
   import type { ModalProps, ModalMethods } from './typing';

src/components/chart/BarAndLine.vue

@@ -1,5 +1,6 @@
 <template>
-  <div ref="chartRef" :style="{ height, width }"></div>
+  <a-spin :spinning="spinning" style="width: 100%; height: 100%; position: fixed" />
+  <div v-if="!spinning" ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script lang="ts">
   import { defineComponent, PropType, ref, Ref, reactive, watchEffect, watch } from 'vue';
@@ -45,10 +46,12 @@
       },
     },
     setup(props) {
+      const spinning = ref<boolean>(true);
       const chartRef = ref<HTMLDivElement | null>(null);
       const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
       const chartData = getTableHeaderColumns(props.chartsColumnsType) || [];
       let chartsColumns = props.chartsColumns.length > 0 ? props.chartsColumns : chartData;
+
       const option = reactive({
         name: '',
         color: ['#7B68EE', '#0000CD', '#6495ED', '#00BFFF', '#AFEEEE', '#008080', '#00FA9A', '#2E8B57', '#FAFAD2', '#DAA520'],
@@ -80,7 +83,6 @@
       });
 
       watch([() => props.chartsType, () => props.chartsColumns], ([newChartsType, newChartsColumns]) => {
-        console.log('[ 1111 ] >', 1111, chartsColumns);
         chartsColumns = newChartsColumns;
         optionUtil.initChartOption(props.chartsType, chartsColumns);
       });
@@ -102,7 +104,15 @@
           setOptions(option, false);
         }
       }
-      return { chartRef };
+      setTimeout(() => {
+        spinning.value = false;
+      }, 1000);
+      return { chartRef, spinning };
     },
   });
 </script>
+<style>
+  .spin-state {
+    margin-top: 16px;
+  }
+</style>

src/components/chart/BarSingle.vue

@@ -0,0 +1,98 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, Ref, reactive, watchEffect, onMounted } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { toEchartsData } from '/@/utils/ventutil';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import EchartsUtil from '/@/utils/echartsUtil';
+
+  export default defineComponent({
+    name: 'BarAndLine',
+    props: {
+      chartsColumns: {
+        type: Array,
+        default: () => [],
+      },
+      chartsColumnsType: {
+        type: String,
+      },
+      dataSource: {
+        type: Object,
+        default: () => {},
+      },
+      xAxisData: {
+        type: Array,
+        default: () => [],
+      },
+      width: {
+        type: String as PropType<string>,
+        default: '100%',
+      },
+      height: {
+        type: String as PropType<string>,
+        default: 'calc(100vh - 78px)',
+      },
+    },
+    setup(props) {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const chartData = getTableHeaderColumns(props.chartsColumnsType) || [];
+      const chartsColumns = props.chartsColumns.length > 0 ? props.chartsColumns : chartData;
+      const option = reactive({
+        name: '',
+        color: ['#7B68EE', '#0000CD', '#6495ED', '#00BFFF', '#AFEEEE', '#008080', '#00FA9A', '#2E8B57', '#FAFAD2', '#DAA520'],
+        tooltip: null,
+        grid: null,
+        toolbox: {
+          feature: {
+            saveAsImage: {
+              iconStyle: {
+                normal: {
+                  borderColor: '#ffffff',
+                },
+              },
+              show: true,
+            },
+          },
+        },
+        dataZoom: null,
+        legend: null,
+        timeline: null,
+        xAxis: null,
+        yAxis: null,
+        series: null,
+      });
+
+      watchEffect(() => {
+        props.dataSource && option.series && initCharts();
+      });
+
+      function initChartsOption() {
+        const optionUtil = new EchartsUtil(option);
+        optionUtil.initChartOption('listMonitor', chartsColumns);
+        console.log('option----------->', option);
+      }
+      initChartsOption();
+
+      function initCharts() {
+        //轴数据
+        if (option.series) {
+          const xAxisData: string[] = [];
+          const seriesData = [];
+          props.xAxisData.forEach((item: any) => {
+            xAxisData.push(item['key']);
+            seriesData.push(props.dataSource[item.valueKey] || '');
+          });
+          option.series[0].data = seriesData;
+          option.xAxis[0].data = xAxisData;
+          console.log('option------------->', option);
+
+          setOptions(option, false);
+        }
+      }
+      return { chartRef };
+    },
+  });
+</script>

src/design/vent/antCss.less

@@ -205,12 +205,3 @@ ant-spin-container:hover {
 .ant-pagination {
   color: @vent-font-color !important;
 }
-
-.ant-drawer {
-  background: #080a2c11 !important;
-  .ant-drawer-body,
-  .ant-drawer-header,
-  .jeecg-basic-drawer-footer {
-    background: #080a2c11 !important;
-  }
-}

src/design/vent/index.less

@@ -9,9 +9,11 @@
 /* 表单 */
 .vent-form {
   .ant-form {
-    label {
-      color: #fff;
+    background-color: @vent-transparent !important;
+    .ant-form-item-label > label {
+      color: @vent-font-color !important;
     }
+
     .anticon.ant-input-clear-icon,
     .anticon {
       color: #fff !important;
@@ -21,65 +23,224 @@
       background-color: #ffffff00 !important;
     }
     .ant-form-item-control-input-content {
-      .ant-input-affix-wrapper {
-        background-color: #ffffff00 !important;
-      }
-      .ant-input,
-      .ant-form-item-control-input {
+      .ant-input-affix-wrapper,
+      .ant-input-number-handler-wrap {
         color: #fff;
-        background-color: #ffffff00 !important;
+        background-color: #ffffff17 !important;
+        border: 1px solid #b7b7b74f !important;
+      }
+      .ant-picker,
+      .ant-select-selector {
+        color: #fff !important;
+        background: #ffffff17 !important;
+        border: 1px solid #b7b7b74f !important;
       }
     }
-    .ant-input-number {
-      width: 100% !important;
-      background: #ffffff00;
-      color: #fff;
+    .ant-select-multiple {
+      .ant-select-selection-item-content {
+        color: #fff !important;
+      }
+    }
+    .ant-input,
+    .anticon,
+    input,
+    .ant-input-number,
+    .ant-select-selection-item,
+    .ant-input-group-addon,
+    .ant-picker-suffix {
+      color: #fff !important;
+      background: #ffffff00 !important;
+      border: none;
     }
+    .ant-select-selection-placeholder {
+      color: #b7b7b7 !important;
+    }
+    .ant-select-arrow,
+    .ant-picker-separator {
+      color: #fff !important;
+    }
+
     .ant-form-item {
       margin-right: 20px;
     }
+    .ant-select-dropdown {
+      border-bottom: 1px solid #ececec66;
+      background: #fff;
+    }
+    .ant-upload.ant-upload-select-picture-card {
+      background-color: @vent-transparent !important;
+    }
+    .input:-webkit-autofill {
+      -webkit-box-shadow: 0 0 0 1000px @vent-transparent inset !important;
+    }
+  }
+}
+.vent-modal {
+  .ant-drawer-content {
+    background-color: #03114c !important;
+  }
+}
+// .jeecg-basic-table-form-container .ant-form {
+//   background-color: @vent-transparent !important;
+//   color: @vent-font-color !important;
+//   border: 1px solid #ffffff22;
+
+//   .ant-form-item-label > label {
+//     color: @vent-font-color !important;
+//   }
+//   .ant-input-affix-wrapper,
+//   .ant-input-number-handler-wrap {
+//     color: #fff;
+//     background-color: #ffffff17 !important;
+//     border: 1px solid #b7b7b74f !important;
+//   }
+//   .ant-picker,
+//   .ant-select-selector {
+//     color: #fff !important;
+//     background: #ffffff17 !important;
+//     border: 1px solid #b7b7b74f !important;
+//   }
+//   .anticon,
+//   input,
+//   .ant-input-number,
+//   .ant-select-selection-item,
+//   .ant-picker-suffix {
+//     color: #fff !important;
+//     background: #ffffff00 !important;
+//     border: none;
+//   }
+//   .ant-select-selection-placeholder {
+//     color: #b7b7b7 !important;
+//   }
+//   .ant-select-arrow,
+//   .ant-picker-separator {
+//     color: #fff !important;
+//   }
+// }
+
+.jeecg-basic-table {
+  .ant-table-wrapper {
+    padding: 0 !important;
+  }
+}
+.jeecg-basic-drawer {
+  background: #080a2c11 !important;
+  .ant-drawer-content {
+    background-color: #03114c99 !important;
+    backdrop-filter: blur(20px);
+    .ant-drawer-title,
+    .ant-drawer-close {
+      color: #fff !important;
+    }
+    .ant-drawer-title {
+      .jeecg-basic-title {
+        color: #fff !important;
+      }
+    }
+    .ant-descriptions-bordered {
+      .ant-descriptions-item-label {
+        color: #fff !important;
+        background-color: #ffffff22 !important;
+      }
+      .ant-descriptions-item-content {
+        color: #fff !important;
+      }
+    }
+  }
+
+  .ant-drawer-body,
+  .ant-drawer-header,
+  .jeecg-basic-drawer-footer {
+    background: #080a2c11 !important;
+    border-color: #ffffff66 !important;
   }
 }
-.jeecg-basic-table-form-container .ant-form {
+.jeecg-tree {
   background-color: @vent-transparent !important;
-  color: @vent-font-color !important;
-  border: 1px solid #ffffff22;
+  .ant-tree {
+    background-color: @vent-transparent !important;
+    color: @vent-font-color !important;
+  }
+  .ant-tree-title,
+  .ant-tree-node-content-wrapper {
+    &:hover {
+      background-color: rgba(209, 209, 209, 0.1) !important;
+    }
+  }
+}
 
-  .ant-form-item-label > label {
+.ant-card {
+  border: 1px solid #4d7ad855;
+  border-radius: 2px;
+  background-color: @vent-transparent !important;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  box-shadow: 0 0 10px #5984e055 inset;
+  .ant-tree {
+    background-color: @vent-transparent !important;
     color: @vent-font-color !important;
   }
-  .ant-input-affix-wrapper,
-  .ant-input-number-handler-wrap {
-    color: #fff;
-    background-color: #ffffff17 !important;
-    border: 1px solid #b7b7b74f !important;
+  .ant-tree-title,
+  .ant-tree-node-content-wrapper {
+    &:hover {
+      background-color: rgba(209, 209, 209, 0.1) !important;
+    }
   }
-  .ant-picker,
-  .ant-select-selector {
-    color: #fff !important;
-    background: #ffffff17 !important;
-    border: 1px solid #b7b7b74f !important;
+  .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
+    background-color: #009bee;
   }
-  .anticon,
-  input,
-  .ant-input-number,
-  .ant-select-selection-item,
-  .ant-picker-suffix {
-    color: #fff !important;
-    background: #ffffff00 !important;
-    border: none;
+  .ant-input {
+    border: 1px solid #ececec66;
+    background-color: @vent-transparent !important;
   }
-  .ant-select-selection-placeholder {
-    color: #b7b7b7 !important;
+  .alert {
+    background-color: @vent-table-hover !important;
+    border-color: #ffffff22 !important;
+    .ant-alert-message {
+      color: @vent-font-color !important;
+    }
+  }
+}
+.ant-tabs {
+  border: 1px solid #4d7ad855;
+  border-radius: 2px;
+  background-color: @vent-transparent !important;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  box-shadow: 0 0 10px #5984e055 inset;
+  .ant-tabs-nav {
+    &::before {
+      border-color: #ffffff33 !important;
+    }
   }
-  .ant-select-arrow,
-  .ant-picker-separator {
-    color: #fff !important;
+  .ant-descriptions-bordered {
+    .ant-descriptions-item-label {
+      color: #fff !important;
+      background-color: #ffffff22 !important;
+    }
+    .ant-descriptions-item-content {
+      color: #fff !important;
+    }
+
+    .ant-descriptions-row,
+    .ant-descriptions-item-label {
+      border-color: #ffffff33 !important;
+    }
+    .ant-descriptions-view {
+      border-color: #ffffff11 !important;
+      box-shadow: 0 0 5px #5984e033 inset;
+    }
   }
 }
 
-.jeecg-basic-table {
-  .ant-table-wrapper {
-    padding: 0 !important;
+.jeecg-tree {
+  .jeecg-tree-header {
+    .jeecg-basic-title {
+      color: #fff !important;
+    }
+    .ant-input-affix-wrapper {
+      background-color: @vent-transparent !important;
+      border-color: #ffffff33 !important;
+    }
   }
 }

src/layouts/default/content/index.vue

@@ -2,12 +2,21 @@
   <div :class="[prefixCls, getLayoutContentMode, { 'layout-content-full': getShowFullHeader }]" v-loading="getOpenPageLoading && getPageLoading">
     <PageLayout />
     <!-- update-begin-author:zyf date:20211129 for:qiankun 挂载子应用盒子 -->
-    <div id="content" class="app-view-box" v-if="openQianKun == 'true'"></div>
+    <div v-if="!getShowFullHeader && loading" class="app-loading">
+      <div id="loader-wrapper" class="app-loading">
+        <div class="app-loading-wrap">
+          <div class="app-loading-dots">
+            <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="content" class="app-view-box" style="position: relative" v-if="openQianKun == 'true'"> </div>
     <!-- update-end-author:zyf date:20211129 for: qiankun 挂载子应用盒子-->
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, onMounted, unref, computed } from 'vue';
+  import { defineComponent, onMounted, unref, computed, ref } from 'vue';
   import PageLayout from '/@/layouts/page/index.vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
@@ -15,9 +24,10 @@
   import { useContentViewHeight } from './useContentViewHeight';
   import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
   import { useRouter } from 'vue-router';
-  import { start } from 'qiankun';
-  import registerApps from '/@/qiankun';
+  import { registerApps } from '/@/qiankun';
   import { useGlobSetting } from '/@/hooks/setting';
+  import { getActions } from '/@/qiankun/state';
+
   export default defineComponent({
     name: 'LayoutContent',
     components: { PageLayout },
@@ -30,11 +40,29 @@
       const { currentRoute } = router;
       const globSetting = useGlobSetting();
       const openQianKun = globSetting.openQianKun;
+      const loading = ref(true);
+      let actions;
+      if (openQianKun == 'true') {
+        actions = getActions();
+        actions.setGlobalState({ isMounted: false });
+        actions.onGlobalStateChange((newState, prev) => {
+          for (const key in newState) {
+            if (key === 'isMounted') {
+              if (newState[key] !== prev[key] && newState[key] === true) {
+                loading.value = false;
+                console.log('首页已经渲染完毕');
+              }
+            }
+          }
+        });
+      }
       useContentViewHeight();
+
       const getShowFullHeader = computed(() => {
         const route = unref(currentRoute);
         return getShowFullHeaderRef && !route.path.startsWith('/micro-');
       });
+
       onMounted(() => {
         //注册openQianKun
         // console.log('window.qiankunStarted------>', window.qiankunStarted);
@@ -52,11 +80,12 @@
         getLayoutContentMode,
         getPageLoading,
         getShowFullHeader,
+        loading,
       };
     },
   });
 </script>
-<style lang="less">
+<style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-layout-content';
 
   .@{prefix-cls} {
@@ -80,4 +109,115 @@
     margin-top: 48px;
     overflow-y: auto;
   }
+  .app-loading {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: #f4f7f900;
+  }
+
+  .app-loading .app-loading-wrap {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: flex;
+    -webkit-transform: translate3d(-50%, -50%, 0);
+    transform: translate3d(-50%, -50%, 0);
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  .app-loading .dots {
+    display: flex;
+    padding: 98px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .app-loading .app-loading-title {
+    display: flex;
+    margin-top: 30px;
+    font-size: 30px;
+    color: rgba(0, 0, 0, 0.85);
+    justify-content: center;
+    align-items: center;
+  }
+
+  .dot {
+    position: relative;
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    margin-top: 30px;
+    font-size: 32px;
+    transform: rotate(45deg);
+    box-sizing: border-box;
+    animation: antRotate 1.2s infinite linear;
+  }
+
+  .dot i {
+    position: absolute;
+    display: block;
+    width: 14px;
+    height: 14px;
+    background-color: #0065cc;
+    // background-color: #d1d1d1;
+    border-radius: 100%;
+    opacity: 0.3;
+    transform: scale(0.75);
+    animation: antSpinMove 1s infinite linear alternate;
+    transform-origin: 50% 50%;
+  }
+
+  .dot i:nth-child(1) {
+    top: 0;
+    left: 0;
+  }
+
+  .dot i:nth-child(2) {
+    top: 0;
+    right: 0;
+    -webkit-animation-delay: 0.4s;
+    animation-delay: 0.4s;
+  }
+
+  .dot i:nth-child(3) {
+    right: 0;
+    bottom: 0;
+    -webkit-animation-delay: 0.8s;
+    animation-delay: 0.8s;
+  }
+
+  .dot i:nth-child(4) {
+    bottom: 0;
+    left: 0;
+    -webkit-animation-delay: 1.2s;
+    animation-delay: 1.2s;
+  }
+  @keyframes antRotate {
+    to {
+      -webkit-transform: rotate(405deg);
+      transform: rotate(405deg);
+    }
+  }
+  @-webkit-keyframes antRotate {
+    to {
+      -webkit-transform: rotate(405deg);
+      transform: rotate(405deg);
+    }
+  }
+  @keyframes antSpinMove {
+    to {
+      opacity: 1;
+    }
+  }
+  @-webkit-keyframes antSpinMove {
+    to {
+      opacity: 1;
+    }
+  }
 </style>

src/layouts/default/header/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Header :class="[...getHeaderClass, { 'vent-header': currentRoute.path.startsWith('/monitorChannel/monitor-') }]">
+  <Header v-if="!getShowFullHeader" :class="[...getHeaderClass, { 'vent-header': currentRoute.path.startsWith('/monitorChannel/monitor-') }]">
     <!-- left start -->
     <div :class="`${prefixCls}-left`">
       <!-- logo -->
@@ -110,6 +110,7 @@
         getShowSearch,
         getUseLockPage,
         getShowBreadTitle,
+        getShowFullHeaderRef,
       } = useHeaderSetting();
 
       const { getShowLocalePicker } = useLocale();
@@ -128,6 +129,11 @@
         ];
       });
 
+      const getShowFullHeader = computed(() => {
+        const route = unref(currentRoute);
+        return getShowFullHeaderRef && route.path.startsWith('/micro-');
+      });
+
       const getShowSetting = computed(() => {
         if (!unref(getShowSettingButton)) {
           return false;
@@ -156,9 +162,9 @@
         return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
       });
 
-      /**
-       * 首页多租户部门弹窗逻辑
-       */
+      // /**
+      //  * 首页多租户部门弹窗逻辑
+      //  */
       const loginSelectRef = ref();
 
       function showLoginSelect() {
@@ -207,6 +213,7 @@
         loginSelectRef,
         currentRoute,
         title,
+        getShowFullHeader,
       };
     },
   });

src/layouts/default/header/index1.vue

@@ -38,7 +38,7 @@
       <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
     </div>
   </Header>
-  <LoginSelect ref="loginSelectRef" @success="loginSelectOk" />
+  <!-- <LoginSelect ref="loginSelectRef" @success="loginSelectOk" /> -->
 </template>
 <script lang="ts">
   import { defineComponent, unref, computed, ref, onMounted, toRaw } from 'vue';

src/layouts/default/index.vue

@@ -1,7 +1,8 @@
 <template>
   <Layout :class="prefixCls" v-bind="lockEvents" style="height: 100%">
     <LayoutFeatures />
-    <LayoutHeader fixed v-if="getShowFullHeader" />
+    <!-- <LayoutHeader fixed v-if="getShowFullHeader" /> -->
+    <LayoutHeader fixed />
     <Layout :class="[layoutClass]">
       <LayoutSideBar v-if="getShowSidebar || getIsMobile" />
       <Layout :class="[`${prefixCls}-main`, 'vent']">
@@ -14,7 +15,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, computed, unref, ref } from 'vue';
+  import { defineComponent, computed, unref } from 'vue';
   import { Layout } from 'ant-design-vue';
   import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
@@ -23,13 +24,11 @@
   import LayoutSideBar from './sider/index.vue';
   import LayoutMultipleHeader from './header/MultipleHeader.vue';
 
-  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useLockPage } from '/@/hooks/web/useLockPage';
 
   import { useAppInject } from '/@/hooks/web/useAppInject';
-  import { useRouter } from 'vue-router';
 
   export default defineComponent({
     name: 'DefaultLayout',
@@ -45,18 +44,11 @@
     setup() {
       const { prefixCls } = useDesign('default-layout');
       const { getIsMobile } = useAppInject();
-      const { getShowFullHeaderRef } = useHeaderSetting();
       const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting();
-      const router = useRouter();
-      const { currentRoute } = router;
 
       // Create a lock screen monitor
       const lockEvents = useLockPage();
 
-      const getShowFullHeader = computed(() => {
-        const route = unref(currentRoute);
-        return getShowFullHeaderRef && !route.path.startsWith('/micro-');
-      });
       const layoutClass = computed(() => {
         let cls: string[] = ['ant-layout'];
 
@@ -67,7 +59,6 @@
       });
 
       return {
-        getShowFullHeader,
         getShowSidebar,
         prefixCls,
         getIsMobile,

src/qiankun/index.ts

@@ -1,10 +1,10 @@
 /**
  * qiankun配置
  */
-import { registerMicroApps, setDefaultMountApp, start, runAfterFirstMounted, addGlobalUncaughtErrorHandler } from 'qiankun';
+import { registerMicroApps, start, runAfterFirstMounted, addGlobalUncaughtErrorHandler } from 'qiankun';
 import { apps } from './apps';
 import { getProps, initGlState } from './state';
-
+import { getToken } from '/@/utils/auth';
 /**
  * 重构apps
  */
@@ -12,6 +12,8 @@ function filterApps() {
   apps.forEach((item) => {
     //主应用需要传递给微应用的数据。
     item.props = getProps();
+    console.log('主应用给子应用传的数据', item.props);
+
     //微应用触发的路由规则
     // @ts-ignore
     item.activeRule = genActiveRule('/' + item.activeRule);
@@ -32,6 +34,7 @@ function genActiveRule(routerPrefix) {
  */
 function registerApps() {
   const _apps = filterApps();
+
   registerMicroApps(_apps, {
     beforeLoad: [
       // @ts-ignore
@@ -65,9 +68,10 @@ function registerApps() {
   // 添加全局的未捕获异常处理器。
   addGlobalUncaughtErrorHandler((event) => console.log(event));
   // 定义全局状态
-  initGlState();
+  initGlState({ token: getToken() });
   //启动qiankun
   start({
+    prefetch: 'all',
     // fetch: async (url: RequestInfo | URL, ...args: any) => {
     //   console.log(url);
     // },
@@ -76,6 +80,7 @@ function registerApps() {
     // },
     sandbox: false,
   });
+  // setDefaultMountApp('/micro-vent-3dModal');
 }
 
-export default registerApps;
+export { registerApps };

src/qiankun/state.ts

@@ -6,6 +6,8 @@ import { store } from '/@/store';
 import { router } from '/@/router';
 import { getToken } from '/@/utils/auth';
 
+let actions;
+
 //定义传入子应用的数据
 export function getProps() {
   return {
@@ -22,11 +24,15 @@ export function getProps() {
  * 定义全局状态，并返回通信方法,在主应用使用，微应用通过 props 获取通信方法。
  * @param state 主应用穿的公共数据
  */
-export function initGlState(info = { userName: 'admin' }) {
+export function initGlState(info: any = { token: '', userInfo: {}, isMounted: false }) {
+  if (actions) return;
   // 初始化state
-  const actions = initGlobalState(info);
+  actions = initGlobalState(info);
   // 设置新的值
-  actions.setGlobalState(info);
+  actions.setGlobalState({
+    token: getToken(),
+    isMounted: false,
+  });
   // 注册 观察者 函数 - 响应 globalState 变化，在 globalState 发生改变时触发该 观察者 函数。
   actions.onGlobalStateChange((newState, prev) => {
     // state: 变更后的状态; prev 变更前的状态
@@ -37,3 +43,8 @@ export function initGlState(info = { userName: 'admin' }) {
     }
   });
 }
+
+export function getActions() {
+  if (!actions) initGlState();
+  return actions;
+}

src/router/routes/basic.ts

@@ -50,6 +50,7 @@ export const QIANKUN_ROUTE: AppRouteRecordRaw = {
       path: '/micro-vent-3dModal/:path(.*)*',
       name: QIANKUN_ROUTE_NAME,
       component: import('/@/views/dashboard/Analysis/index.vue'),
+      // component: LAYOUT,
       meta: {
         title: '子应用',
         hideBreadcrumb: true,

src/router/types.ts

@@ -45,9 +45,8 @@ export interface Menu {
   tag?: MenuTag;
 
   hideMenu?: boolean;
-  
+
   alwaysShow?: boolean;
-  
 }
 
 export interface MenuModule {

src/store/modules/user.ts

@@ -18,6 +18,7 @@ import { isArray } from '/@/utils/is';
 import { useGlobSetting } from '/@/hooks/setting';
 import { JDragConfigEnum } from '/@/enums/jeecgEnum';
 import { useSso } from '/@/hooks/web/useSso';
+import { getActions } from '/@/qiankun/state';
 
 interface UserState {
   userInfo: Nullable<UserInfo>;
@@ -150,6 +151,7 @@ export const useUserStore = defineStore({
      */
     async afterLoginAction(goHome?: boolean, data?: any): Promise<any | null> {
       if (!this.getToken) return null;
+
       //获取用户信息
       const userInfo = await this.getUserInfoAction();
       const sessionTimeout = this.sessionTimeout;
@@ -172,6 +174,10 @@ export const useUserStore = defineStore({
         //update-end-author:liusq date:2022-5-5 for: 登录成功后缓存拖拽模块的接口前缀
         goHome && (await router.replace((userInfo && userInfo.homePath) || PageEnum.BASE_HOME));
       }
+      if (useGlobSetting().openQianKun) {
+        const actions = getActions();
+        actions.setGlobalState({ token: this.getToken, userInfo: userInfo, isMounted: false });
+      }
       return data;
     },
     /**

src/utils/common/compUtils.ts

@@ -15,9 +15,9 @@ export const getFileAccessHttpUrl = (fileUrl, prefix = 'http') => {
   try {
     if (fileUrl && fileUrl.length > 0 && !fileUrl.startsWith(prefix)) {
       //判断是否是数组格式
-      let isArray = fileUrl.indexOf('[') != -1;
+      const isArray = fileUrl.indexOf('[') != -1;
       if (!isArray) {
-        let prefix = `${baseApiUrl}/sys/common/static/`;
+        const prefix = `${baseApiUrl}/sys/common/static/`;
         // 判断是否已包含前缀
         if (!fileUrl.startsWith(prefix)) {
           result = `${prefix}${fileUrl}`;
@@ -32,7 +32,7 @@ export const getFileAccessHttpUrl = (fileUrl, prefix = 'http') => {
  * 触发 window.resize
  */
 export function triggerWindowResizeEvent() {
-  let event: any = document.createEvent('HTMLEvents');
+  const event: any = document.createEvent('HTMLEvents');
   event.initEvent('resize', true, true);
   event.eventType = 'message';
   window.dispatchEvent(event);
@@ -42,7 +42,7 @@ export function triggerWindowResizeEvent() {
  * 获取随机数
  *  @param length 数字位数
  */
-export const getRandom = (length: number = 1) => {
+export const getRandom = (length = 1) => {
   return '-' + parseInt(String(Math.random() * 10000 + 1), length);
 };
 
@@ -60,7 +60,7 @@ export function randomString(length: number, chats?: string) {
   }
   let str = '';
   for (let i = 0; i < length; i++) {
-    let num = random(0, chats.length - 1);
+    const num = random(0, chats.length - 1);
     str += chats[num];
   }
   return str;
@@ -134,7 +134,7 @@ export const toTree = (array, startPid, currentDept, opt) => {
  * @param fieldKeys 要计算合计的列字段
  */
 export function mapTableTotalSummary(tableData: Recordable[], fieldKeys: string[]) {
-  let totals: any = { _row: '合计', _index: '合计' };
+  const totals: any = { _row: '合计', _index: '合计' };
   fieldKeys.forEach((key) => {
     totals[key] = tableData.reduce((prev, next) => {
       prev += next[key];
@@ -158,7 +158,7 @@ export function mapTableTotalSummary(tableData: Recordable[], fieldKeys: string[
 export function simpleDebounce(fn, delay = 100) {
   let timer: any | null = null;
   return function () {
-    let args = arguments;
+    const args = arguments;
     if (timer) {
       clearTimeout(timer);
     }
@@ -213,8 +213,8 @@ export function dateFormat(date, block) {
  * 目前使用的地方：JVxeTable Span模式
  */
 export function getEventPath(event) {
-  let target = event.target;
-  let path = (event.composedPath && event.composedPath()) || event.path;
+  const target = event.target;
+  const path = (event.composedPath && event.composedPath()) || event.path;
 
   if (path != null) {
     return path.indexOf(window) < 0 ? path.concat(window) : path;
@@ -224,7 +224,7 @@ export function getEventPath(event) {
     return [window];
   }
 
-  let getParents = (node, memo) => {
+  const getParents = (node, memo) => {
     const parentNode = node.parentNode;
 
     if (!parentNode) {
@@ -244,7 +244,7 @@ export function getEventPath(event) {
  * @returns {boolean} 成功 push 返回 true，不处理返回 false
  */
 export function pushIfNotExist(array, value, key?) {
-  for (let item of array) {
+  for (const item of array) {
     if (key && item[key] === value[key]) {
       return false;
     } else if (item === value) {
@@ -264,7 +264,7 @@ export function filterObj(obj) {
     return;
   }
 
-  for (let key in obj) {
+  for (const key in obj) {
     if (obj.hasOwnProperty(key) && (obj[key] == null || obj[key] == undefined || obj[key] === '')) {
       delete obj[key];
     }
@@ -288,13 +288,13 @@ export function underLine2CamelCase(string: string) {
  */
 export function findTree(treeList: any[], fn: Fn, childrenKey = 'children') {
   for (let i = 0; i < treeList.length; i++) {
-    let item = treeList[i];
+    const item = treeList[i];
     if (fn(item, i, treeList)) {
       return item;
     }
-    let children = item[childrenKey];
+    const children = item[childrenKey];
     if (isArray(children)) {
-      let findResult = findTree(children, fn, childrenKey);
+      const findResult = findTree(children, fn, childrenKey);
       if (findResult) {
         return findResult;
       }
@@ -331,37 +331,37 @@ export function stringIsNull(str) {
  * @param node
  */
 export function getAutoScrollContainer(node: HTMLElement) {
-  let element: Nullable<HTMLElement> = node
+  let element: Nullable<HTMLElement> = node;
   while (element != null) {
     if (element.classList.contains('scrollbar__view')) {
       // 判断是否有滚动条
       if (element.clientHeight < element.scrollHeight) {
         // 有滚动条时，挂载到父级，解决滚动问题
-        return node.parentElement
+        return node.parentElement;
       } else {
         // 无滚动条时，挂载到body上，解决下拉框遮盖问题
-        return document.body
+        return document.body;
       }
     } else {
-      element = element.parentElement
+      element = element.parentElement;
     }
   }
   // 不在弹窗内，走默认逻辑
-  return node.parentElement
+  return node.parentElement;
 }
 
 /**
  * 判断子菜单是否全部隐藏
  * @param menuTreeItem
  */
-export  function checkChildrenHidden(menuTreeItem){
+export function checkChildrenHidden(menuTreeItem) {
   //是否是聚合路由
-  let alwaysShow=menuTreeItem.alwaysShow;
-  if(alwaysShow){
+  const alwaysShow = menuTreeItem.alwaysShow;
+  if (alwaysShow) {
     return false;
   }
-  if(!menuTreeItem.children){
-    return false
+  if (!menuTreeItem.children) {
+    return false;
   }
   return menuTreeItem.children?.find((item) => item.hideMenu == false) != null;
 }

src/utils/echartsUtil.ts

@@ -0,0 +1,263 @@
+import echarts from '/@/utils/lib/echarts';
+export default class echartsUtil {
+  option: any;
+  type: string;
+
+  constructor(option) {
+    this.option = option;
+  }
+  /**
+   * 获取数据渲染echarts图表
+   * @param type 类型目前两种 listMonitor(实时检测对应的图表)、history(历史数据对应的图表)
+   * @param echartsComponent echarts组件类
+   * @param chartcolumns EnumData文件对应图表类型配置属性
+   * @param listData 从后台获取到的数据
+   * @param devicetype 设备类型
+   * @param columnname 某些特定设备类型下，从后台获取到的数据中，属性名为columnname的属性值存放的是x轴的信息
+   */
+  initChartOption(type, chartColumns: any[] = []) {
+    if (!this.option) {
+      return;
+    }
+    const xdata = [], // 存放x轴的数据
+      ydata = [],
+      yAxis: any[] = [], // 存放图表y轴样式、数据
+      colors: string[] = [], // 存放每个图表系列的颜色
+      legends: string[] = [], // 存放每个图表系列的名字
+      series: any[] = []; // 存放每个图表系列的样式
+
+    let xAxis: any[] = [], //存放图表x轴样式、数据
+      timeline: any = null, //
+      grid = {},
+      tooltip = {},
+      dataZoom: any = null; //进度条
+    const columns = JSON.parse(JSON.stringify(chartColumns));
+    columns.forEach((column: any) => {
+      const ylist = [];
+      if (type == 'detail' || type == 'history') {
+        column.linetype = 'line';
+      }
+      if (column.color)
+        // ydata.push(ylist);
+        /** 获取静态文件配置的图表样式信息 */
+        colors.push(column.color); //获取每个图表系列的颜色
+      if (column.legend) legends.push(column.legend + (column.yname ? '(' + column.yname + ')' : '')); //获取每个图表系列的名字
+      series.push(this.getSeries(column, ylist)); //获取每个图表系列的样式
+      if (column.seriesName || column.seriesName == undefined) {
+        yAxis.push(this.getYAxis(column));
+      }
+    });
+
+    /* 如果是历史记录的话需要添加进度条 */
+    grid = this.getGrid(yAxis, type);
+    // timeline = this.getTimeline(xdata, ydata);
+    tooltip = this.getTooltip();
+    xAxis = this.getXAxis(xdata, series, type);
+
+    dataZoom = this.getDataZoom(type);
+
+    if (this.option) {
+      this.option['tooltip'] = tooltip;
+      this.option['grid'] = grid;
+      this.option['legend'] = this.getLegend(legends);
+      this.option['xAxis'] = xAxis;
+      this.option['yAxis'] = yAxis;
+      this.option['series'] = series;
+      this.option['dataZoom'] = dataZoom;
+    }
+  }
+  getDataZoom(type) {
+    if (type == 'history') {
+      return [
+        {
+          bottom: '10',
+          height: 20,
+          start: 100,
+          end: 0,
+          textStyle: {
+            color: '#ffffff',
+          },
+        },
+      ];
+    } else if (type == 'listMonitor' || type == 'detail') {
+      return {
+        start: 0,
+        type: 'inside',
+      };
+    }
+    return null;
+  }
+  getLegend(legend) {
+    const legendObj = {
+      textStyle: {
+        color: '#ffffff', // 字体颜色
+      },
+      data: legend,
+    };
+    return legendObj;
+  }
+
+  getXAxis(xdata, series, type) {
+    let rotate = 0;
+    const isHasBar = series.findIndex((item) => {
+      if (item.xRotate != undefined) rotate = item.xRotate;
+      return item.type == 'bar';
+    });
+    const xAxis = [
+      {
+        type: 'category',
+        axisTick: {
+          alignWithLabel: true,
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#ffffff88',
+            width: 1, // 这里是为了突出显示加上的
+          },
+        },
+        axisLabel: {
+          show: true,
+          color: '#ffffff',
+          rotate: rotate,
+        },
+        axisPointer: {
+          type: isHasBar > -1 ? 'shadow' : 'line',
+          shadowStyle: {
+            color: 'rgba(0,0,0,0.1)',
+          },
+        },
+        // prettier-ignore
+        data: xdata,
+      },
+    ];
+    return xAxis;
+  }
+  getYAxis(item) {
+    const yAxisobj = {
+      type: 'value',
+      name: item.seriesName ? item.seriesName : item.legend,
+      min: 0,
+      max: item.ymax,
+      position: item.yaxispos ? item.yaxispos : 'right',
+      offset: item.yaxispos == 'right' ? (item.sort - 2) * 60 : 0,
+      alignTicks: true,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#ffffff88',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: '#ffffffcc',
+        // formatter: '{value}' + item.yname
+      },
+      splitLine: {
+        lineStyle: {
+          color: item.color + '22',
+          type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
+        },
+        show: item.linetype == 'line' ? true : false,
+      },
+      showBackground: true,
+      backgroundStyle: {
+        color: 'rgba(205, 95, 255, 1)',
+      },
+    };
+    return yAxisobj;
+  }
+  getSeries(item, ylist) {
+    const seriesObj = {
+      name: item.legend + (item.yname ? '(' + item.yname + ')' : ''),
+      type: item.linetype,
+      yAxisIndex: item.sort - 1,
+      barCategoryGap: '30%',
+      data: [...ylist],
+      barMaxWidth: '20',
+      itemStyle: {
+        color:
+          item.linetype == 'bar'
+            ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: item.color + 'ff',
+                },
+                {
+                  offset: 1,
+                  color: item.color + '33',
+                },
+              ])
+            : item.color,
+        borderRadius: [15, 15, 0, 0],
+      },
+      lineStyle: {
+        shadowColor: '#ffffff99',
+        shadowBlur: 3,
+      },
+      smooth: true,
+    };
+    return seriesObj;
+  }
+  getGrid(yAxis, type) {
+    let rightnum = 0,
+      leftnum = 0;
+    yAxis.forEach((item) => {
+      if (item.position == 'right') {
+        ++rightnum;
+      } else if (item.position == 'left') {
+        ++leftnum;
+      }
+    });
+    const grid = {
+      top: '60px',
+      bottom: type == 'history' ? '40px' : '15px',
+      right: rightnum * 30 + 20 + 'px',
+      left: leftnum * 40 + 'px',
+      containLabel: true,
+    };
+    return grid;
+  }
+  getTooltip() {
+    const tooltip = {
+      backgroundColor: '#00000005',
+      borderColor: '#74E9FE44',
+      extraCssText: 'backdrop-filter: blur(15px); box-shadow: 0 0 0 rgba(0, 0, 0, 0);',
+      textStyle: {
+        color: '#ffffff', // 字体颜色
+      },
+      trigger: 'axis',
+      axisPointer: {
+        label: {
+          backgroundColor: 'rgba(30,120,50,0.8)',
+        },
+        type: 'cross',
+      },
+    };
+    return tooltip;
+  }
+  // 分页显示数据
+  getTimeline(xdata, ydata) {
+    // 结合x、y轴的数据量判断是否要分页（x轴分页）ydata长度的倍数就是X轴要显示的数量n
+    const n = Math.floor(20 / ydata.length);
+    const size = Math.ceil(xdata.length / n); //分页数量
+    if (size > 2) {
+      // 设置时间轴
+      const timeline = {
+        axisType: 'category',
+        // realtime: false,
+        // loop: false,
+        autoPlay: true,
+        // currentIndex: 2,
+        playInterval: 1000,
+        // controlStyle: {
+        //     position: 'left'
+        // },
+        data: [],
+      };
+      timeline.data = Array.from(new Array(size).keys());
+      return timeline;
+    } else {
+      return null;
+    }
+  }
+}

src/utils/ventutil.ts

@@ -0,0 +1,29 @@
+export function toEchartsData(list, option) {
+  option.legend['data'] = [];
+  option.yAxis.length = list.length;
+  option.yAxis.series = list.length;
+  list.forEach((item: any, index) => {
+    option.legend['data'].push(`${item['legend']}(${item['unit']})`);
+    const yAxiObj = {
+      type: 'value',
+      position: item['yaxispos'],
+      axisLabel: { formatter: `{value} ${item['unit']}` },
+    };
+    const serieObj = {
+      name: `${item['legend']}(${item['unit']})`,
+      type: item['linetype'],
+      yAxisIndex: item['sort'],
+    };
+    if (!option.yAxis[index]) {
+      option.yAxis[index] = yAxiObj;
+    } else {
+      Object.assign(option.yAxis[index], yAxiObj);
+    }
+    if (!option.series[index]) {
+      option.series[index] = serieObj;
+    } else {
+      Object.assign(option.series[index], serieObj);
+    }
+  });
+  return option;
+}

src/views/dashboard/Analysis/index.vue

@@ -5,16 +5,10 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue';
-  import registerApps from '/@/qiankun';
   import { useGlobSetting } from '/@/hooks/setting';
   const globSetting = useGlobSetting();
   const openQianKun = globSetting.openQianKun;
   if (openQianKun == 'true') {
-    if (!window.qiankunStarted) {
-      window.qiankunStarted = true;
-      registerApps();
-    }
   }
 </script>
 <style lang="less" scoped>

src/views/demo/jeecg/JVxeTableDemo/JVxeDemo4.vue

@@ -138,12 +138,12 @@
     // 如果parent为空，则查询第一级菜单
     if (parent === '') {
       result = await defHttp.get({
-        url: '/sys/permission/getSystemMenuList',
+        url: '/sys/permissionNew/getSystemMenuList',
         params: {},
       });
     } else {
       result = await defHttp.get({
-        url: '/sys/permission/getSystemSubmenu',
+        url: '/sys/permissionNew/getSystemSubmenu',
         params: { parentId: parent },
       });
     }

src/views/sys/login/Login.vue

@@ -1,55 +1,30 @@
 <template>
-  <div :class="prefixCls" class="relative w-full h-full px-4">
-    <AppLocalePicker class="absolute text-white top-4 right-4 enter-x xl:text-gray-600" :showText="false" v-if="!sessionTimeout && showLocale" />
-    <AppDarkModeToggle class="absolute top-3 right-7 enter-x" v-if="!sessionTimeout" />
+  <div class="login-container">
+    <div class="login-bg"></div>
     <span class="-enter-x xl:hidden">
       <AppLogo :alwaysShowTitle="true" />
     </span>
+    <div class="top-header">
+      <div class="top-bg"></div>
+      <div class="login-icon"></div>
+      <div class="title">{{ title }}</div>
+    </div>
 
-    <div class="container relative h-full py-2 mx-auto sm:px-10">
-      <div class="flex h-full">
-        <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
-          <AppLogo class="-enter-x" />
-          <div class="my-auto">
-            <img :alt="title" src="../../../assets/svg/login-box-bg.svg" class="w-1/2 -mt-16 -enter-x" />
-            <div class="mt-10 font-medium text-white -enter-x">
-              <span class="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span>
-            </div>
-            <div class="mt-5 font-normal text-white text-md dark:text-gray-500 -enter-x">
-              {{ t('sys.login.signInDesc') }}
-            </div>
-          </div>
-        </div>
-        <div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
-          <div
-            :class="`${prefixCls}-form`"
-            class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
-          >
-            <LoginForm />
-            <ForgetPasswordForm />
-            <RegisterForm />
-            <MobileForm />
-            <QrCodeForm />
-          </div>
-        </div>
-      </div>
+    <div class="flex center">
+      <LoginForm />
     </div>
+    <div class="bottom"> </div>
   </div>
 </template>
 <script lang="ts" setup>
   import { computed } from 'vue';
   import { AppLogo } from '/@/components/Application';
-  import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
   import LoginForm from './LoginForm.vue';
-  import ForgetPasswordForm from './ForgetPasswordForm.vue';
-  import RegisterForm from './RegisterForm.vue';
-  import MobileForm from './MobileForm.vue';
-  import QrCodeForm from './QrCodeForm.vue';
   import { useGlobSetting } from '/@/hooks/setting';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useLocaleStore } from '/@/store/modules/locale';
-  import { useLoginState, LoginStateEnum } from './useLogin';
+  import { useLoginState } from './useLogin';
   defineProps({
     sessionTimeout: {
       type: Boolean,
@@ -104,6 +79,81 @@
     }
   }
 
+  .login-container {
+    width: 100vw;
+    height: 100vh;
+    background: linear-gradient(to bottom, #000c37, #001e63);
+    padding: 0 !important;
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0px;
+      left: 0;
+      background-image: url('/@/assets/images/vent/login/bg.png');
+      background-size: cover;
+    }
+    .login-bg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      background: linear-gradient(to bottom, #000c3766, #001e6366);
+    }
+    .top-header {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      // padding-top: 70px;
+      .top-bg {
+        width: 100%;
+        height: 129px;
+
+        background-image: url('/@/assets/images/vent/login/top.png');
+        background-size: 100% auto;
+      }
+      .login-icon {
+        position: relative;
+        width: 237px;
+        height: 274px;
+        top: 10px;
+        background-image: url('/@/assets/images/vent/login/icon.png');
+      }
+      .title {
+        position: absolute;
+        top: 78px;
+        color: rgb(224, 224, 224);
+        font-size: 30px;
+        text-align: center;
+        text-shadow: 1px 1px 1px #fff, -1px -1px 1px #000;
+      }
+    }
+
+    .bottom {
+      width: 100%;
+      height: 118px;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      background-image: url('/@/assets/images/vent/login/down.png');
+      background-size: 100% auto;
+    }
+
+    .center {
+      width: 100%;
+      height: calc(100vh - 520px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+
   .@{prefix-cls} {
     min-height: 100%;
     overflow: hidden;
@@ -122,7 +172,7 @@
       width: 100%;
       height: 100%;
       margin-left: -48%;
-      background-image: url(/@/assets/svg/login-bg.svg);
+      // background-image: url(/@/assets/svg/login-bg.svg);
       background-position: 100%;
       background-repeat: no-repeat;
       background-size: auto 100%;

src/views/sys/login/LoginForm.vue

@@ -1,97 +1,34 @@
 <template>
-  <LoginFormTitle v-show="getShow" class="enter-x" />
-  <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef" v-show="getShow" @keypress.enter="handleLogin">
-    <FormItem name="account" class="enter-x">
-      <Input size="large" v-model:value="formData.account" :placeholder="t('sys.login.userName')" class="fix-auto-fill" />
-    </FormItem>
-    <FormItem name="password" class="enter-x">
-      <InputPassword size="large" visibilityToggle v-model:value="formData.password" :placeholder="t('sys.login.password')" />
-    </FormItem>
-
-    <!--验证码-->
-    <ARow class="enter-x">
-      <ACol :span="12">
-        <FormItem name="inputCode" class="enter-x">
-          <Input size="large" v-model:value="formData.inputCode" :placeholder="t('sys.login.inputCode')" style="min-width: 100px" />
-        </FormItem>
-      </ACol>
-      <ACol :span="8">
-        <FormItem :style="{ 'text-align': 'right', 'margin-left': '20px' }" class="enter-x">
-          <img
-            v-if="randCodeData.requestCodeSuccess"
-            style="margin-top: 2px; max-width: initial"
-            :src="randCodeData.randCodeImage"
-            @click="handleChangeCheckCode"
-          />
-          <img v-else style="margin-top: 2px; max-width: initial" src="../../../assets/images/checkcode.png" @click="handleChangeCheckCode" />
+  <div class="login-box">
+    <div class="center">
+      <!-- <LoginFormTitle v-show="getShow" class="enter-x" /> -->
+      <Form
+        class="p-4 enter-x"
+        :model="formData"
+        :rules="getFormRules"
+        ref="formRef"
+        v-show="getShow"
+        @keypress.enter="handleLogin"
+        autocomplete="off"
+      >
+        <FormItem name="account" class="enter-x">
+          <Input size="large" v-model:value="formData.account" :placeholder="t('sys.login.userName')" class="fix-auto-fill" />
         </FormItem>
-      </ACol>
-    </ARow>
-
-    <ARow class="enter-x">
-      <ACol :span="12">
-        <FormItem>
-          <!-- No logic, you need to deal with it yourself -->
-          <Checkbox v-model:checked="rememberMe" size="small">
-            {{ t('sys.login.rememberMe') }}
-          </Checkbox>
+        <FormItem name="password" class="enter-x">
+          <InputPassword size="large" visibilityToggle v-model:value="formData.password" :placeholder="t('sys.login.password')" />
         </FormItem>
-      </ACol>
-      <ACol :span="12">
-        <FormItem :style="{ 'text-align': 'right' }">
-          <!-- No logic, you need to deal with it yourself -->
-          <Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
-            {{ t('sys.login.forgetPassword') }}
-          </Button>
-        </FormItem>
-      </ACol>
-    </ARow>
-
-    <FormItem class="enter-x">
-      <Button type="primary" size="large" block @click="handleLogin" :loading="loading">
-        {{ t('sys.login.loginButton') }}
-      </Button>
-      <!-- <Button size="large" class="mt-4 enter-x" block @click="handleRegister">
-              {{ t('sys.login.registerButton') }}
-            </Button> -->
-    </FormItem>
-    <ARow class="enter-x">
-      <ACol :md="8" :xs="24">
-        <Button block @click="setLoginState(LoginStateEnum.MOBILE)">
-          {{ t('sys.login.mobileSignInFormTitle') }}
-        </Button>
-      </ACol>
-      <ACol :md="8" :xs="24" class="!my-2 !md:my-0 xs:mx-0 md:mx-2">
-        <Button block @click="setLoginState(LoginStateEnum.QR_CODE)">
-          {{ t('sys.login.qrSignInFormTitle') }}
-        </Button>
-      </ACol>
-      <ACol :md="7" :xs="24">
-        <Button block @click="setLoginState(LoginStateEnum.REGISTER)">
-          {{ t('sys.login.registerButton') }}
-        </Button>
-      </ACol>
-    </ARow>
-
-    <Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider>
-
-    <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">
-      <a @click="onThirdLogin('github')" title="github"><GithubFilled /></a>
-      <a @click="onThirdLogin('wechat_enterprise')" title="企业微信"> <icon-font class="item-icon" type="icon-qiyeweixin3" /></a>
-      <a @click="onThirdLogin('dingtalk')" title="钉钉"><DingtalkCircleFilled /></a>
-      <a @click="onThirdLogin('wechat_open')" title="微信"><WechatFilled /></a>
+      </Form>
+      <div class="btn-box">
+        <div class="btn" @click="handleLogin"> {{ t('sys.login.loginButton') }}</div>
+      </div>
     </div>
-  </Form>
-  <!-- 第三方登录相关弹框 -->
-  <ThirdModal ref="thirdModalRef"></ThirdModal>
+  </div>
 </template>
 <script lang="ts" setup>
   import { reactive, ref, toRaw, unref, computed, onMounted } from 'vue';
 
-  import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue';
-  import { GithubFilled, WechatFilled, DingtalkCircleFilled, createFromIconfontCN } from '@ant-design/icons-vue';
-  import LoginFormTitle from './LoginFormTitle.vue';
-  import ThirdModal from './ThirdModal.vue';
+  import { Checkbox, Form, Input, Row, Col, Button } from 'ant-design-vue';
+  import { createFromIconfontCN } from '@ant-design/icons-vue';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useMessage } from '/@/hooks/web/useMessage';
 
@@ -194,3 +131,87 @@
     handleChangeCheckCode();
   });
 </script>
+<style lang="less" scoped>
+  .login-box {
+    position: relative;
+    margin-top: 10px;
+    :deep(.ant-form-item) {
+      .ant-input-affix-wrapper-focused,
+      .ant-form-item-control-input-content,
+      .ant-input-password {
+        color: #fff !important;
+        background: #ffffff00 !important;
+        border: none !important;
+        box-shadow: none !important;
+
+        &:focus,
+        &:active,
+        &:hover {
+          color: #fff !important;
+          border: none !important;
+          box-shadow: none !important;
+        }
+      }
+      .ant-input-affix-wrapper {
+        padding: 0 !important;
+      }
+    }
+    :deep(.ant-input-password) {
+      input {
+        padding: 4px 11px;
+        padding-left: 20px !important;
+        margin-left: 20px !important;
+      }
+    }
+    :deep(.ant-form-item-control-input-content) {
+      display: flex;
+      justify-content: center;
+    }
+    :deep(.ant-input) {
+      width: 983px;
+      height: 96px;
+      color: #fff !important;
+      background: url('/@/assets/images/vent/login/input-normal.png') !important;
+      background-size: 100% auto;
+      border: none !important;
+      text-align: center;
+      padding-top: 20px !important;
+      font-size: 28px;
+      padding-left: 20px !important;
+      &:focus,
+      &:active {
+        background: #ffffff00 !important;
+        color: #fff !important;
+        border: none !important;
+        box-shadow: none !important;
+      }
+      &:focus {
+        background: url('/@/assets/images/vent/login/input-down.png') !important;
+      }
+    }
+    .btn-box {
+      width: 100%;
+      position: fixed;
+      bottom: 100px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      .btn {
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 28px;
+        padding-top: 20px;
+        width: 562px;
+        height: 137px;
+        background: url('/@/assets/images/vent/login/btn-bg.png');
+        background: 100% auto;
+        &:active {
+          background: url('/@/assets/images/vent/login/btn-bg-hover.png');
+        }
+      }
+    }
+  }
+</style>

src/views/sys/login/LoginSelect.vue

@@ -73,7 +73,7 @@
     tenantId: number;
   }
   export default defineComponent({
-    name: 'loginSelect',
+    name: 'LoginSelect',
     components: {
       Avatar,
       BasicModal,

src/views/system/depart/index.less

@@ -8,3 +8,7 @@
     }
   }
 }
+.j-box-bottom-button-float {
+  background-color: #ffffff00 !important;
+  border-color: #ffffff33 !important;
+}

src/views/system/depart/index.vue

@@ -4,7 +4,7 @@
       <DepartLeftTree ref="leftTree" @select="onTreeSelect" @rootTreeData="onRootTreeData" />
     </a-col>
     <a-col :xl="12" :lg="24" :md="24" style="margin-bottom: 10px">
-      <div style="height: 100%; background-color: white">
+      <div style="height: 100%">
         <a-tabs v-show="departData != null" defaultActiveKey="base-info">
           <a-tab-pane tab="基本信息" key="base-info" forceRender style="position: relative">
             <div style="padding: 20px">

src/views/system/departUser/index.vue

@@ -6,19 +6,20 @@
       </a-card>
     </a-col>
     <a-col :xl="18" :lg="16" :md="14" :sm="24" style="flex: 1">
-      <a-card :bordered="false" style="height: 100%">
-        <a-tabs defaultActiveKey="user-info">
-          <a-tab-pane tab="基本信息" key="base-info" forceRender>
-            <DepartBaseInfoTab :data="departData" />
-          </a-tab-pane>
-          <a-tab-pane tab="用户信息" key="user-info">
-            <DepartUserInfoTab :data="departData" />
-          </a-tab-pane>
-          <a-tab-pane tab="部门角色" key="role-info">
-            <DepartRoleInfoTab :data="departData" />
-          </a-tab-pane>
-        </a-tabs>
-      </a-card>
+      <!-- <a-card :bordered="false" style="height: 100%">
+        
+      </a-card> -->
+      <a-tabs defaultActiveKey="user-info">
+        <a-tab-pane tab="基本信息" key="base-info" forceRender>
+          <DepartBaseInfoTab :data="departData" />
+        </a-tab-pane>
+        <a-tab-pane tab="用户信息" key="user-info">
+          <DepartUserInfoTab :data="departData" />
+        </a-tab-pane>
+        <a-tab-pane tab="部门角色" key="role-info">
+          <DepartRoleInfoTab :data="departData" />
+        </a-tab-pane>
+      </a-tabs>
     </a-col>
   </a-row>
 </template>
@@ -46,4 +47,10 @@
 
 <style lang="less">
   @import './index.less';
+  .ant-tabs-tab {
+    padding: 12px !important;
+  }
+  .bg-white {
+    background-color: #ffffff00 !important;
+  }
 </style>

src/views/system/menu/menu.api.ts

@@ -11,6 +11,7 @@ enum Api {
   ruleSave = '/sys/permissionNew/addPermissionRule',
   ruleEdit = '/sys/permissionNew/editPermissionRule',
   ruleDelete = '/sys/permissionNew/deletePermissionRule',
+  checkPermDuplication = '/sys/permissionNew/checkPermDuplication',
 }
 
 /**

src/views/vent/comment/EditRowTable.vue

@@ -93,12 +93,11 @@
       async function handleSave(record: EditRecordRow) {
         // 校验
         msg.loading({ content: '正在保存...', duration: 0, key: 'saving' });
-        debugger;
         const valid = await record.onValid?.();
         if (valid) {
           try {
             //TODO 此处将数据提交给服务器保存
-            emit('saveOrUpdate', record.editValueRefs);
+            emit('saveOrUpdate', Object.assign(record, record.editValueRefs));
             // 保存之后提交编辑状态
             const pass = await record.onEdit?.(false, true);
             if (pass) {

src/views/vent/deviceManager/comment/DeviceModal.vue

@@ -13,18 +13,23 @@
       <a-tab-pane key="1" tab="基本信息" force-render>
         <FormModal :record="record" @saveOrUpdate="(values) => emit('saveOrUpdate', values)" />
       </a-tab-pane>
-      <a-tab-pane key="2" tab="点表设备关联">
-        <template v-if="deviceType == 'managesys'">
-          <WorkFacePointTable :columns="pointColumns" :deviceId="deviceData.id" @save="savePointData" @delete="deletePointById" />
-        </template>
-        <template v-else>
-          <PointTable :columns="pointColumns" :deviceId="deviceData.id" @save="savePointData" @delete="deletePointById" />
-        </template>
+      <a-tab-pane key="2" tab="点表关联">
+        <PointTable
+          v-if="record.strtype"
+          :columns="pointColumns"
+          :pointType="record.strtype"
+          :deviceId="deviceData.id"
+          @save="savePointData"
+          @delete="deletePointById"
+        />
       </a-tab-pane>
-      <a-tab-pane key="3" tab="报警字段配置">
-        <WarningTabel :deviceId="deviceData.id" />
+      <a-tab-pane key="3" tab="设备关联" v-if="deviceType == 'managesys'">
+        <WorkFacePointTable :columns="pointColumns" :deviceId="deviceData.id" @save="savePointData" @delete="deletePointById" />
       </a-tab-pane>
-      <a-tab-pane key="4" tab="摄像头配置"
+      <a-tab-pane key="4" tab="报警字段配置">
+        <WarningTabel :deviceId="deviceData.id" :pointType="record.strtype" />
+      </a-tab-pane>
+      <a-tab-pane key="5" tab="摄像头配置"
         ><EditRowTable
           :columns="cameraColumns"
           :list="cameraList.bind(null, { deviceId: deviceData.id })"
@@ -58,7 +63,7 @@
   const emit = defineEmits(['saveOrUpdate', 'register']);
   const isUpdate = inject('isUpdate');
   const deviceData = inject('formData') as any;
-  const record = reactive({});
+  const record = reactive({ strtype: '', strname: '' });
 
   //表单赋值
   const [registerModal, { setModalProps }] = useModalInner(async (data) => {
@@ -68,7 +73,9 @@
   });
 
   //设置标题
-  const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
+  const title = computed(() =>
+    !unref(isUpdate) ? `新增（${record.strname || record.systemname}）` : `编辑（${record.strname || record.systemname}）`
+  );
 
   const savePointData = (data) => {
     const record = cloneDeep(data.editValueRefs);

src/views/vent/deviceManager/comment/NormalTable.vue

@@ -34,7 +34,7 @@
   import { BasicTable, TableAction } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
   import DeviceModal from './DeviceModal.vue';
-  import DeviceModalTable from './pointTabel/DeviceModalTabel.vue';
+  import DeviceModalTable from './pointTabel/DeviceModalTable.vue';
   // import { getToken } from '/@/utils/auth';
   // import { useGlobSetting } from '/@/hooks/setting';
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';

src/views/vent/deviceManager/comment/pointTabel/DeviceModalTable.vue

@@ -0,0 +1,85 @@
+<template>
+  <BasicModal
+    ref="DeviceModalTable"
+    v-bind="$attrs"
+    @register="registerModal"
+    title="选择关联设备"
+    width="900px"
+    :showCancelBtn="false"
+    :showOkBtn="false"
+    :footer="null"
+    destroyOnClose
+  >
+    <div>
+      <!-- <ApiTreeSelect
+        @change="handleChange"
+        :api="deviceList.bind(null, { devicetype: '' })"
+        :fieldNames="{ children: 'children', label: 'itemText', value: 'itemValue' }"
+        v-model:value="deviceKind"
+        style="width: 200px"
+      /> -->
+      <a-button type="primary" @click="saveData"> 保存 </a-button>
+    </div>
+    <a-table
+      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+      :columns="columns"
+      :dataSource="dataSource"
+      :rowKey="(record) => record.deviceID"
+      size="small"
+    />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, defineEmits, onUpdated } from 'vue';
+  import { getDeviceId, workDeviceEdit } from './point.api';
+  import { deviceColumns } from './point.data';
+  // import { ApiTreeSelect } from '/@/components/Form';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  const DeviceModalTable = ref();
+  const props = defineProps({
+    deviceType: { type: String, default: '' },
+    deviceID: { type: String, default: '' },
+    devicePos: { type: String, default: '' },
+    selectionRowKeys: { type: Array, default: () => [] },
+  });
+  const emit = defineEmits(['reload', 'register']);
+
+  const deviceKind = ref('');
+  const dataSource = ref<any[]>([]);
+  const columns = ref<any[]>([]);
+  const selectedRowKeys = ref([]);
+  const selectionRows = ref([]);
+
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    setModalProps({ confirmLoading: false });
+  });
+
+  const getDataSource = async () => {
+    columns.value = deviceColumns;
+    dataSource.value = await getDeviceId({ devicetype: deviceKind.value || props.deviceType, deviceID: props.deviceID, devicePos: props.devicePos });
+  };
+
+  /**
+   * 复选框选中事件
+   * @param rowKeys
+   * @param rows
+   */
+  function onSelectChange(rowKeys, rows) {
+    selectedRowKeys.value = rowKeys;
+    selectionRows.value = rows;
+  }
+
+  const saveData = async () => {
+    await workDeviceEdit({ deviceKind: deviceKind.value || props.deviceType, ids: selectedRowKeys.value, sysid: props.deviceID });
+    closeModal();
+    emit('reload');
+  };
+  onUpdated(async () => {
+    await getDataSource();
+    const selectionRows = dataSource.value.filter((item) => props.selectionRowKeys.includes(item.deviceId));
+    onSelectChange(props.selectionRowKeys, selectionRows);
+  });
+  onMounted(async () => {});
+</script>
+<style scoped lang="less"></style>

src/views/vent/deviceManager/comment/pointTabel/PointTable.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="p-4">
+    <a-button v-if="isAdd" type="primary" @click="addRow"> 新增 </a-button>
+    <BasicTable @register="registerTable" :dataSource="dataSource" @edit-change="onEditChange">
+      <template #action="{ record, column }">
+        <TableAction :actions="createActions(record, column)" />
+      </template>
+      <template #bodyCell="{ record, column, index }">
+        <div v-if="record.editable && column.dataIndex === 'link_devicetype'">
+          <ApiTreeSelect
+            style="width: 100%"
+            :api="deviceList.bind(null, { devicetype: '' })"
+            :fieldNames="{ children: 'children', label: 'itemText', value: 'itemValue' }"
+            @change="handleChangeDeviceType($event, index)"
+            v-model:value="record['editValueRefs']['link_devicetype']"
+            placeholder="请选择设备分类"
+          />
+        </div>
+        <div v-if="record.editable && column.dataIndex === 'link_id'">
+          <Select
+            @change="handleChange($event, index)"
+            :options="options"
+            :fieldNames="{ label: 'deviceName', value: 'deviceID' }"
+            v-model:value="record['editValueRefs']['link_id']"
+            style="width: 100%"
+          />
+        </div>
+        <div v-if="record.editable && column.dataIndex === 'link_code'">
+          <Select
+            style="width: 100%"
+            :options="monitorParamsOptions"
+            :fieldNames="{ label: 'valuename', value: 'valuecode' }"
+            @change="handleChangeLinkCode($event, index)"
+            v-model:value="record['editValueRefs']['link_code']"
+          />
+        </div>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, nextTick, inject, onMounted } from 'vue';
+  import { BasicTable, useTable, TableAction, BasicColumn, ActionItem, EditRecordRow } from '/@/components/Table';
+  import { Select } from 'ant-design-vue';
+  import { ApiTreeSelect } from '/@/components/Form';
+  import { deviceId, getDeviceId, deviceList, list, pointEdit } from './point.api';
+  // import { nextTick } from 'process';
+
+  export default defineComponent({
+    components: { BasicTable, TableAction, Select, ApiTreeSelect },
+    props: {
+      columns: {
+        type: Array,
+        requried: true,
+      },
+      deviceId: {
+        type: String || Number,
+        requried: true,
+      },
+      pointType: {
+        type: String,
+        requried: true,
+      },
+      list: {
+        type: Function,
+        requried: true,
+      },
+      isAdd: {
+        type: Boolean,
+      },
+    },
+    emits: ['save', 'delete'],
+    setup(props, { emit }) {
+      const deviceType = inject('deviceType');
+      const options = ref([]);
+      const monitorParamsOptions = ref([]);
+      const currentEditKeyRef = ref('');
+      const dataSource = ref<any>([]);
+      const [registerTable, { insertTableDataRecord, reload }] = useTable({
+        title: '',
+        columns: props.columns as BasicColumn[],
+        showIndexColumn: false,
+        showTableSetting: false,
+        tableSetting: { fullScreen: true },
+        actionColumn: {
+          width: 160,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
+      });
+      function addRow() {
+        const record = {} as EditRecordRow;
+        insertTableDataRecord(record);
+        nextTick(() => {
+          handleEdit(record);
+        });
+      }
+      function handleEdit(record: EditRecordRow) {
+        currentEditKeyRef.value = record.key;
+        record.onEdit?.(true);
+        handleChange(record['link_id']);
+        handleChangeDeviceType(record['link_devicetype']);
+      }
+
+      function handleCancel(record: EditRecordRow) {
+        currentEditKeyRef.value = '';
+        record.onEdit?.(false, false);
+      }
+
+      function handleDelete(record: EditRecordRow) {
+        emit('delete', record.id, reload);
+      }
+      function getOptions(value) {
+        console.log(value);
+      }
+
+      function handleChange(id, index?) {
+        if (!id) return;
+        if (index !== undefined) dataSource['value'][index]['link_id'] = id;
+
+        deviceId({ id: id }).then((res) => {
+          monitorParamsOptions.value = res;
+          console.log(res);
+        });
+      }
+
+      function handleChangeDeviceType(e, index?) {
+        if (!e) return;
+        if (index !== undefined) dataSource['value'][index]['link_devicetype'] = e;
+        getDeviceId({ devicetype: e }).then((res) => {
+          options.value = res;
+        });
+      }
+
+      function handleChangeLinkCode(e, index?) {
+        if (!e) return;
+        if (index !== undefined) dataSource['value'][index]['link_code'] = e;
+      }
+
+      async function handleSave(record: EditRecordRow) {
+        dataSource.value.filter((item) => {
+          if (record.id && record.id === item.id) {
+            console.log(111);
+            Object.assign(item, record.editValueRefs);
+            item['test'] = '1212';
+            console.log(222, item, record.editValueRefs);
+          }
+        });
+        // await edit(dataSource.value);
+        await pointEdit({ deviceid: props.deviceId, linklist: dataSource.value });
+        record.onEdit?.(false, false);
+        await getDataSource();
+      }
+
+      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
+        if (!record.editable) {
+          if (props.isAdd) {
+            return [
+              {
+                label: '编辑',
+                disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                label: '删除',
+                disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+                onClick: handleDelete.bind(null, record),
+              },
+            ];
+          } else {
+            return [
+              {
+                label: '编辑',
+                disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+                onClick: handleEdit.bind(null, record),
+              },
+            ];
+          }
+        }
+        return [
+          {
+            label: '保存',
+            onClick: handleSave.bind(null, record, column),
+          },
+          {
+            label: '取消',
+            popConfirm: {
+              title: '是否取消编辑',
+              confirm: handleCancel.bind(null, record, column),
+            },
+          },
+        ];
+      }
+
+      function onEditChange({ column, value, record }) {
+        // 本例
+        if (column.dataIndex === 'devicetype') {
+          // record.editValueRefs.name4.value = `${value}`;
+        }
+        // console.log(column, value, record);
+      }
+      async function getDataSource() {
+        const result = await list({ devicetype: props.pointType, valuetype: 9, deviceid: props.deviceId });
+        dataSource.value = result.records;
+      }
+      onMounted(async () => {
+        await getDataSource();
+      });
+
+      return {
+        registerTable,
+        handleEdit,
+        createActions,
+        onEditChange,
+        addRow,
+        handleChange,
+        handleChangeDeviceType,
+        handleChangeLinkCode,
+        getOptions,
+        options,
+        monitorParamsOptions,
+        deviceList,
+        dataSource,
+      };
+    },
+  });
+</script>
+<style scoped lang="less">
+  :deep(.ant-table-body) {
+    height: auto !important;
+  }
+</style>

src/views/vent/deviceManager/comment/pointTabel/WorkFacePointTable copy.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="p-4">
+    <div class="btm-group vent-flex-row-between">
+      <div>
+        <label style="color: #fff">设备类型：</label>
+        <ApiTreeSelect
+          @change="handleChange"
+          :api="deviceList.bind(null, { devicetype: '' })"
+          :fieldNames="{ children: 'children', label: 'itemText', value: 'itemValue' }"
+          v-model:value="deviceKind"
+          style="width: 200px"
+        />
+        <a-button type="primary" @click="addRow"> 新增 </a-button>
+      </div>
+      <div>
+        <a-button type="primary" @click="handleSave"> 保存 </a-button>
+      </div>
+    </div>
+    <BasicTable @register="registerTable" :dataSource="dataSource" :columns="workFaceColumns" @edit-change="onEditChange">
+      <template #action="{ record, column }">
+        <TableAction :actions="createActions(record, column)" />
+      </template>
+    </BasicTable>
+    <DeviceModalTable
+      @register="registerModal"
+      :deviceType="deviceKind"
+      :deviceID="deviceId"
+      @reload="getWorkFaceList"
+      :selectionRowKeys="selectionRowKeys"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, nextTick, inject, onMounted } from 'vue';
+  import { BasicTable, useTable, TableAction, BasicColumn, ActionItem, EditRecordRow } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { ApiTreeSelect } from '/@/components/Form';
+  import DeviceModalTable from './DeviceModalTable.vue';
+  import { deviceId, workDeviceList, deviceList, list, edit } from './point.api';
+  import { workFaceColumns, deviceColumns } from './point.data';
+
+  export default defineComponent({
+    components: { BasicTable, TableAction, DeviceModalTable, ApiTreeSelect },
+    props: {
+      columns: {
+        type: Array,
+        requried: true,
+      },
+      deviceId: {
+        type: String || Number,
+        requried: true,
+      },
+      list: {
+        type: Function,
+        requried: true,
+      },
+      isAdd: {
+        type: Boolean,
+      },
+    },
+    emits: ['save', 'delete'],
+    setup(props, { emit }) {
+      const activeTab = ref('1');
+      const deviceKind = ref('');
+      const type = inject('deviceType') || '';
+
+      const currentEditKeyRef = ref('');
+      const options = ref([]);
+
+      const dataSource = ref<any>([]);
+      const selectionRowKeys = ref<any[]>([]);
+
+      const [registerModal, { openModal }] = useModal();
+
+      const [registerTable, { insertTableDataRecord, reload }] = useTable({
+        title: '',
+        showIndexColumn: true,
+        showTableSetting: false,
+        tableSetting: { fullScreen: true },
+        actionColumn: {
+          width: 160,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
+      });
+
+      function addRow() {
+        openModal();
+      }
+
+      function handleEdit(record: EditRecordRow) {
+        currentEditKeyRef.value = record.key;
+        record.onEdit?.(true);
+      }
+
+      function handleCancel(record: EditRecordRow) {
+        currentEditKeyRef.value = '';
+        record.onEdit?.(false, false);
+      }
+
+      function handleDelete(record: EditRecordRow) {
+        emit('delete', record.id, reload);
+      }
+      async function getOptions() {
+        const res = await deviceList({ devicetype: '' });
+        options.value = res;
+        deviceKind.value = options.value[0]['itemValue'];
+        getWorkFaceList();
+      }
+
+      function getWorkFaceList() {
+        workDeviceList({ deviceKind: deviceKind.value, sysId: props.deviceId }).then((res) => {
+          dataSource.value = res['records'];
+          selectionRowKeys.value = dataSource.value.map((item) => item.deviceId) || [];
+        });
+      }
+
+      function handleChange(id) {
+        deviceKind.value = id;
+        getWorkFaceList();
+      }
+
+      async function handleSave(record: EditRecordRow) {
+        dataSource.value.filter((item) => {
+          if (record.id && record.id === item.id) {
+            Object.assign(item, record.editValueRefs);
+          }
+        });
+        console.log('[ dataSource ] >', dataSource.value, record);
+        // 校验
+        await edit(dataSource.value);
+        record.editable = false;
+      }
+
+      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
+        if (!record.editable) {
+          if (props.isAdd) {
+            return [
+              {
+                label: '编辑',
+                disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                label: '删除',
+                disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+                onClick: handleDelete.bind(null, record),
+              },
+            ];
+          } else {
+            return [
+              {
+                label: '编辑',
+                disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+                onClick: handleEdit.bind(null, record),
+              },
+            ];
+          }
+        }
+        return [
+          {
+            label: '保存',
+            onClick: handleSave.bind(null, record, column),
+          },
+          {
+            label: '取消',
+            popConfirm: {
+              title: '是否取消编辑',
+              confirm: handleCancel.bind(null, record, column),
+            },
+          },
+        ];
+      }
+
+      function onEditChange({ column, value, record }) {
+        // 本例
+        if (column.dataIndex === 'devicetype') {
+          // record.editValueRefs.name4.value = `${value}`;
+        }
+        // console.log(column, value, record);
+      }
+
+      onMounted(async () => {
+        await getOptions();
+        getWorkFaceList();
+      });
+
+      return {
+        activeTab,
+        registerTable,
+        handleEdit,
+        createActions,
+        onEditChange,
+        addRow,
+        workFaceColumns,
+        deviceColumns,
+        getOptions,
+        options,
+        deviceList,
+        dataSource,
+        deviceKind,
+        handleChange,
+        registerModal,
+        handleSave,
+        selectionRowKeys,
+        getWorkFaceList,
+        // handleChangeDeviceType,
+        // handleChangeLinkCode,
+        // monitorParamsOptions,
+      };
+    },
+  });
+</script>
+<style scoped lang="less">
+  :deep(.ant-table-body) {
+    height: auto !important;
+  }
+  .btm-group {
+    padding-bottom: 2px;
+  }
+</style>

src/views/vent/deviceManager/comment/pointTabel/WorkFacePointTable.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="p-4">
+    <div class="btm-group vent-flex-row-between">
+      <div>
+        <label style="color: #fff">设备类型：</label>
+        <ApiTreeSelect
+          @change="handleChange"
+          :api="deviceList.bind(null, { devicetype: '' })"
+          :fieldNames="{ children: 'children', label: 'itemText', value: 'itemValue' }"
+          v-model:value="deviceKind"
+          style="width: 200px"
+        />
+        <a-button type="primary" @click="addRow"> 新增 </a-button>
+      </div>
+      <div>
+        <a-button type="primary" @click="handleSave()"> 保存 </a-button>
+      </div>
+    </div>
+    <BasicTable ref="editTable" @register="registerTable" :dataSource="dataSource" :columns="workFaceColumns" @edit-change="onEditChange">
+      <template #action="{ record, column }">
+        <TableAction :actions="createActions(record, column)" />
+      </template>
+    </BasicTable>
+    <DeviceModalTable
+      @register="registerModal"
+      :deviceType="deviceKind"
+      :deviceID="deviceId"
+      @reload="getWorkFaceList"
+      :selectionRowKeys="selectionRowKeys"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, nextTick, inject, onMounted } from 'vue';
+  import { BasicTable, useTable, TableAction, BasicColumn, ActionItem, EditRecordRow } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { ApiTreeSelect } from '/@/components/Form';
+  import DeviceModalTable from './DeviceModalTable.vue';
+  import { deviceId, workDeviceList, deviceList, list, edit } from './point.api';
+  import { workFaceColumns, deviceColumns } from './point.data';
+
+  export default defineComponent({
+    components: { BasicTable, TableAction, DeviceModalTable, ApiTreeSelect },
+    props: {
+      columns: {
+        type: Array,
+        requried: true,
+      },
+      deviceId: {
+        type: String || Number,
+        requried: true,
+      },
+      list: {
+        type: Function,
+        requried: true,
+      },
+      isAdd: {
+        type: Boolean,
+      },
+    },
+    emits: ['save', 'delete'],
+    setup(props, { emit }) {
+      const editTable = ref<any>(null);
+      const activeTab = ref('1');
+      const deviceKind = ref('');
+      const type = inject('deviceType') || '';
+
+      const currentEditKeyRef = ref('');
+      const options = ref([]);
+
+      const dataSource = ref<any>([]);
+      const selectionRowKeys = ref<any[]>([]);
+
+      const [registerModal, { openModal }] = useModal();
+
+      const [registerTable, { insertTableDataRecord, reload }] = useTable({
+        title: '',
+        showIndexColumn: true,
+        showTableSetting: false,
+        tableSetting: { fullScreen: true },
+        actionColumn: {
+          width: 160,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
+      });
+
+      function addRow() {
+        openModal();
+      }
+
+      function handleEdit(record: EditRecordRow) {
+        currentEditKeyRef.value = record.key;
+        record.onEdit?.(true);
+      }
+
+      function handleCancel(record: EditRecordRow) {
+        currentEditKeyRef.value = '';
+        record.onEdit?.(false, false);
+      }
+
+      function handleDelete(record: EditRecordRow) {
+        emit('delete', record.id, reload);
+      }
+      async function getOptions() {
+        const res = await deviceList({ devicetype: '' });
+        options.value = res;
+        deviceKind.value = options.value[0]['itemValue'];
+        getWorkFaceList();
+      }
+
+      function getWorkFaceList() {
+        workDeviceList({ deviceKind: deviceKind.value, sysId: props.deviceId }).then((res) => {
+          dataSource.value = res['records'];
+          selectionRowKeys.value = dataSource.value.map((item) => item.deviceId) || [];
+        });
+      }
+
+      function handleChange(id) {
+        deviceKind.value = id;
+        getWorkFaceList();
+      }
+
+      async function handleSave(record?: EditRecordRow) {
+        if (record) {
+          dataSource.value.filter((item) => {
+            if (record.id && record.id === item.id) {
+              Object.assign(item, record.editValueRefs);
+            }
+          });
+          console.log('[ dataSource ] >', dataSource.value, record);
+          // 校验
+          await edit(dataSource.value);
+          record.editable = false;
+        } else {
+          if (editTable.value && editTable?.value.getDataSource) {
+            const arr: any[] = [];
+            const dataList = editTable?.value.getDataSource();
+            dataList.forEach((element) => {
+              arr.push(Object.assign(element, element.editValueRefs));
+            });
+            dataSource.value = dataList;
+            await edit(dataSource.value);
+          }
+        }
+      }
+
+      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
+        if (!record.editable) {
+          if (props.isAdd) {
+            return [
+              {
+                label: '编辑',
+                disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                label: '删除',
+                disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+                onClick: handleDelete.bind(null, record),
+              },
+            ];
+          } else {
+            return [
+              {
+                label: '编辑',
+                disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+                onClick: handleEdit.bind(null, record),
+              },
+            ];
+          }
+        }
+        return [
+          {
+            label: '保存',
+            onClick: handleSave.bind(null, record, column),
+          },
+          {
+            label: '取消',
+            popConfirm: {
+              title: '是否取消编辑',
+              confirm: handleCancel.bind(null, record, column),
+            },
+          },
+        ];
+      }
+
+      function onEditChange({ column, value, record }) {
+        // 本例
+        if (column.dataIndex === 'devicetype') {
+          // record.editValueRefs.name4.value = `${value}`;
+        }
+        // console.log(column, value, record);
+      }
+
+      onMounted(async () => {
+        await getOptions();
+        getWorkFaceList();
+      });
+
+      return {
+        editTable,
+        activeTab,
+        registerTable,
+        handleEdit,
+        createActions,
+        onEditChange,
+        addRow,
+        workFaceColumns,
+        deviceColumns,
+        getOptions,
+        options,
+        deviceList,
+        dataSource,
+        deviceKind,
+        handleChange,
+        registerModal,
+        handleSave,
+        selectionRowKeys,
+        getWorkFaceList,
+        // handleChangeDeviceType,
+        // handleChangeLinkCode,
+        // monitorParamsOptions,
+      };
+    },
+  });
+</script>
+<style scoped lang="less">
+  :deep(.ant-table-body) {
+    height: auto !important;
+  }
+  .btm-group {
+    padding-bottom: 2px;
+  }
+</style>

src/views/vent/deviceManager/comment/pointTabel/point.api.ts

@@ -7,12 +7,14 @@ enum Api {
   getDeviceId = '/safety/ventanalyMonitorParams/getdevices',
   deviceId = '/safety/ventanalyMonitorParams/getByDeviceid',
   save = '/ventanaly-device/safety/ventanalyMonitorParams/add',
-  edit = '/ventanaly-device/safety/ventanalyMonitorParams/editlinkInfo',
+  edit = '/ventanaly-device/safety/managesysDevice/editlist',
   deleteById = '/ventanaly-device/safety/ventanalyMonitorParams/delete',
   deleteBatch = '/sys/user/deleteBatch',
   importExcel = '/sys/user/importExcel',
   exportXls = '/sys/user/exportXls',
 
+  pointEdit = '/ventanaly-device/safety/ventanalyMonitorParams/editlinkInfo',
+
   warningList = '/safety/ventanalyMonitorLimit/list',
   warningEdit = '/ventanaly-device/safety/ventanalyMonitorLimit/edit',
   warningDelete = '/safety/ventanalyMonitorLimit/delete',
@@ -42,7 +44,7 @@ export const list = (params) => defHttp.get({ url: Api.list, params });
  * 列表接口
  * @param params
  */
-export const edit = (params) => defHttp.put({ url: Api.edit, params });
+export const edit = (params) => defHttp.post({ url: Api.edit, params });
 
 /**
  * 设备类型列表接口
@@ -62,6 +64,8 @@ export const getDeviceId = (params) => defHttp.get({ url: Api.getDeviceId, param
  */
 export const deviceId = (params) => defHttp.get({ url: Api.deviceId, params });
 
+export const pointEdit = (params) => defHttp.put({ url: Api.pointEdit, params });
+
 /**
  * 获取设备id接口
  * @param params

src/views/vent/deviceManager/comment/pointTabel/point.data.ts

@@ -134,13 +134,17 @@ export const workFaceColumns: BasicColumn[] = [
     editComponentProps: {
       options: [
         {
-          label: '多参',
+          label: '进风',
           value: '1',
         },
         {
-          label: '测风',
+          label: '用风',
           value: '2',
         },
+        {
+          label: '回风',
+          value: '3',
+        },
       ],
     },
   },

src/views/vent/deviceManager/comment/warningTabel/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <EditRowTableVue
+      v-if="refreshParent"
+      :columns="warningColumns"
+      :list="list.bind(null, { deviceid: deviceId })"
+      @save-or-update="saveOrUpdateParent"
+      @delete-by-id="parentDeleteById"
+      @row-change="changeParentRow"
+      :isAdd="true"
+      :isRadio="true"
+    >
+      <template #filterCell="{ column, record }">
+        <template v-if="record.editable && column.dataIndex === 'monitorcode'">
+          <Select
+            :options="options"
+            v-model:value="record.editValueRefs['monitorcode']"
+            :fieldNames="{ label: 'valuename', value: 'valuecode' }"
+            size="small"
+            style="min-width: 100px"
+          />
+        </template>
+      </template>
+    </EditRowTableVue>
+    <EditRowTableVue
+      v-if="refresh && warningProId !== ''"
+      ref="RefChildComponent"
+      :columns="levelColumns"
+      :list="limitList.bind(null, { limitid: warningProId })"
+      @save-or-update="saveOrUpdateChild"
+      @delete-by-id="childDeleteById"
+      :isAdd="true"
+      style="margin-top: 10px"
+    />
+    <a-table v-else :dataSource="[]" :columns="levelColumns" style="margin-top: 10px" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { Select } from 'ant-design-vue';
+  import EditRowTableVue from '../../../comment/EditRowTable.vue';
+  import { warningColumns, levelColumns } from './warning.data';
+  import { list, limitList, edit, save, limitSave, limitEdit, deleteById, limitDeleteById } from './warning.api';
+  import { list as pointList } from '../pointTabel/point.api';
+  import { defineProps, ref, nextTick, inject, onMounted } from 'vue';
+
+  const props = defineProps({
+    deviceId: { type: String },
+    pointType: {
+      type: String,
+      requried: true,
+    },
+  });
+  const options = ref([]);
+  const RefChildComponent = ref(null);
+  const warningProId = ref('');
+  const currentParent = ref({});
+  const refresh = ref(true);
+  const refreshParent = ref(true);
+
+  async function saveOrUpdateParent(record) {
+    try {
+      if (record.id) {
+        await edit({ ...record });
+      } else {
+        await save({ ...record, deviceid: props.deviceId });
+      }
+      refreshParent.value = false;
+      nextTick(() => {
+        refreshParent.value = true;
+      });
+    } catch (error) {}
+  }
+  async function saveOrUpdateChild(record) {
+    if (record.id) {
+      await limitEdit({ ...record });
+    } else {
+      await limitSave({ ...record, limitid: warningProId.value, code: currentParent.value['monitorcode'] });
+    }
+    refresh.value = false;
+    nextTick(() => {
+      refresh.value = true;
+    });
+  }
+  function parentDeleteById(id, reload) {
+    deleteById({ id: id }, reload);
+  }
+  function childDeleteById(id, reload) {
+    limitDeleteById({ id: id }, reload);
+  }
+  function changeParentRow(id, rowData) {
+    warningProId.value = id;
+    currentParent.value = rowData;
+    refresh.value = false;
+    nextTick(() => {
+      refresh.value = true;
+    });
+  }
+
+  onMounted(async () => {
+    const res = await pointList({ devicetype: props.pointType, valuetype_begin: 2 });
+    options.value = res && res['records'] ? res['records'] : [];
+  });
+</script>
+
+<style scoped></style>

src/views/vent/deviceManager/comment/warningTabel/warning.api.ts

@@ -0,0 +1,65 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/ventanaly-device/safety/ventanalyMonitorLimit/list',
+  save = '/ventanaly-device/safety/ventanalyMonitorLimit/add',
+  edit = '/ventanaly-device/safety/ventanalyMonitorLimit/edit',
+  deleteById = '/ventanaly-device/safety/ventanalyMonitorLimit/delete',
+
+  limitList = '/ventanaly-device/safety/limitLevel/list',
+  limitSave = '/ventanaly-device/safety/limitLevel/add',
+  limitEdit = '/ventanaly-device/safety/limitLevel/edit',
+  limitDeleteById = '/ventanaly-device/safety/limitLevel/delete',
+
+  importExcel = '/sys/user/importExcel',
+  exportXls = '/sys/user/exportXls',
+}
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+export const save = (params) => defHttp.post({ url: Api.save, params });
+
+export const edit = (params) => defHttp.put({ url: Api.edit, params });
+
+export const limitSave = (params) => defHttp.post({ url: Api.limitSave, params });
+
+export const limitEdit = (params) => defHttp.put({ url: Api.limitEdit, params });
+
+export const limitDeleteById = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.limitDeleteById, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 删除用户
+ */
+export const deleteById = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteById, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 保存或者更新用户
+ * @param params
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  const url = isUpdate ? Api.edit : Api.save;
+  return defHttp.put({ url: url, params });
+};
+
+export const limitList = (params) => defHttp.get({ url: Api.limitList, params });

src/views/vent/deviceManager/comment/warningTabel/warning.data.ts

@@ -0,0 +1,182 @@
+import { BasicColumn } from '/@/components/Table';
+import { initDictOptions } from '/@/utils/dict';
+
+export const levelColumns: BasicColumn[] = [
+  {
+    title: '上限',
+    dataIndex: 'fmax',
+    width: 100,
+    editRow: true,
+    editComponent: 'InputNumber',
+  },
+  {
+    title: '下限',
+    width: 100,
+    editRow: true,
+    dataIndex: 'fmin',
+    editComponent: 'InputNumber',
+  },
+  {
+    title: '持续时间(s)',
+    dataIndex: 'timelength',
+    editRow: true,
+    width: 100,
+    editComponent: 'InputNumber',
+  },
+  {
+    title: '报警等级',
+    dataIndex: 'leveltype',
+    editRow: true,
+    editRule: true,
+    width: 100,
+    editComponent: 'ApiSelect',
+    editComponentProps: {
+      api: initDictOptions.bind(null, 'leveltype'),
+      labelField: 'label',
+      valueField: 'value',
+    },
+  },
+  {
+    title: '报警描述',
+    width: 180,
+    editRow: true,
+    dataIndex: 'des',
+    editComponent: 'Input',
+  },
+];
+
+export const warningColumns: BasicColumn[] = [
+  {
+    title: '',
+    dataIndex: 'id',
+    ifShow: false,
+  },
+  {
+    title: '监测参数',
+    dataIndex: 'monitorcode',
+    width: 150,
+    editRow: true,
+    editRule: true,
+  },
+  {
+    title: '模拟最小值',
+    width: 150,
+    dataIndex: 'ftestmin',
+    editRow: true,
+    editComponent: 'InputNumber',
+  },
+  {
+    title: '模拟最大值',
+    dataIndex: 'ftestmax',
+    editRow: true,
+    width: 150,
+    editComponent: 'InputNumber',
+  },
+  {
+    title: '备注',
+    dataIndex: 'des',
+    editRow: true,
+    width: 200,
+    editComponent: 'Input',
+  },
+];
+
+export const deviceColumns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'deviceName',
+    align: 'center',
+    width: 120,
+  },
+  {
+    title: '安装位置',
+    dataIndex: 'devicePos',
+    align: 'center',
+    width: 100,
+  },
+  {
+    title: '设备类型',
+    dataIndex: 'deviceType',
+    align: 'center',
+    width: 100,
+  },
+  {
+    title: '所属分站',
+    width: 150,
+    align: 'center',
+    dataIndex: 'subStationName',
+  },
+];
+
+export const workFaceColumns: BasicColumn[] = [
+  {
+    title: '安装位置',
+    dataIndex: 'devicePos',
+    width: 100,
+  },
+  {
+    title: '排序',
+    width: 100,
+    dataIndex: 'sort',
+    edit: true,
+    editComponent: 'InputNumber',
+  },
+  {
+    title: '是否在关键通风路线上',
+    width: 100,
+    dataIndex: 'pathflag',
+    edit: true,
+    editComponent: 'Switch',
+    editValueMap: (value) => {
+      return value ? '是' : '否';
+    },
+  },
+  {
+    title: '传感器类型',
+    width: 100,
+    dataIndex: 'sensorType',
+    edit: true,
+    editComponent: 'Select',
+    editComponentProps: {
+      options: [
+        {
+          label: '多参',
+          value: '1',
+        },
+        {
+          label: '测风',
+          value: '2',
+        },
+      ],
+    },
+  },
+  {
+    title: '风向',
+    width: 100,
+    dataIndex: 'winddir',
+    edit: true,
+    editComponent: 'Select',
+    editComponentProps: {
+      options: [
+        {
+          label: '多参',
+          value: '1',
+        },
+        {
+          label: '测风',
+          value: '2',
+        },
+      ],
+    },
+  },
+  {
+    title: '是否参与计算风量',
+    width: 100,
+    dataIndex: 'windflag',
+    edit: true,
+    editComponent: 'Switch',
+    editValueMap: (value) => {
+      return value ? '是' : '否';
+    },
+  },
+];

src/views/vent/deviceManager/tableColumns/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <NormalTable
+    :columns="columns"
+    :searchFormSchema="searchFormSchema"
+    :list="list"
+    :getImportUrl="getImportUrl"
+    :getExportUrl="getExportUrl"
+    :formSchema="formSchema"
+    :deleteById="deleteById"
+    :batchDelete="batchDeleteById"
+    :saveOrUpdate="saveOrUpdate"
+    designScope="tabel-columns"
+    title="字段裂变"
+    :showTab="false"
+  />
+</template>
+
+<script lang="ts" name="system-user" setup>
+  //ts语法
+  import NormalTable from '../comment/NormalTable.vue';
+  import { columns, searchFormSchema, formSchema } from './tableColumns.data';
+  import { list, getImportUrl, getExportUrl, deleteById, batchDeleteById, saveOrUpdate } from './tableColumns.api';
+</script>
+
+<style scoped></style>

src/views/vent/deviceManager/tableColumns/tableColumns.api.ts

@@ -0,0 +1,67 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/ventanaly-device/safety/ventanalyShowColum/list',
+  save = '/ventanaly-device/safety/ventanalyShowColum/add',
+  edit = '/ventanaly-device/safety/ventanalyShowColum/edit',
+  selectDevice = '/jeecg-system/sys/dict/DeviceKind/query',
+  deleteById = '/ventanaly-device/safety/ventanalyShowColum/delete',
+  deleteBatch = '/sys/user/deleteBatch',
+  importExcel = '/sys/user/importExcel',
+  exportXls = '/sys/user/exportXls',
+}
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 设备类型查询接口
+ * @param params
+ */
+export const selectDevice = (params) => defHttp.get({ url: Api.selectDevice, params });
+
+/**
+ * 删除用户
+ */
+export const deleteById = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteById, params: params.id }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 批量删除用户
+ * @param params
+ */
+export const batchDeleteById = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+/**
+ * 保存或者更新用户
+ * @param params
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  const url = isUpdate ? Api.edit : Api.save;
+  return isUpdate ? defHttp.put({ url: url, params }) : defHttp.post({ url: url, params });
+};

src/views/vent/deviceManager/tableColumns/tableColumns.data.ts

@@ -0,0 +1,136 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { selectDevice } from './tableColumns.api';
+import { rules } from '/@/utils/helper/validator';
+import { render } from '/@/utils/common/renderUtils';
+export const columns: BasicColumn[] = [
+  {
+    title: '显示类型',
+    dataIndex: 'devicekind',
+    width: 120,
+  },
+  {
+    title: '显示字段',
+    dataIndex: 'des',
+    width: 120,
+  },
+  {
+    title: '字段code',
+    dataIndex: 'monitorcode',
+    width: 100,
+  },
+  {
+    title: '数据类型',
+    dataIndex: 'datatype_dictText',
+    width: 100,
+  },
+  {
+    title: '排序',
+    dataIndex: 'sort',
+    width: 80,
+    // sorter: true,
+    // customRender: ({ text }) => {
+    //   return render.renderDict(text, 'sex');
+    // },
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '设备类型',
+    field: 'devicekind',
+    component: 'MTreeSelect',
+    colProps: { span: 6 },
+  },
+
+  {
+    label: '值名称',
+    field: 'valuename',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    label: '值code',
+    field: 'monitorcode',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '设备类型',
+    field: 'monitorflag',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'devicekind',
+      placeholder: '请选择状态',
+    },
+  },
+  {
+    label: '数据类型',
+    field: 'datatype',
+    component: 'Input',
+  },
+  {
+    label: '图表名',
+    field: 'legend',
+    component: 'Input',
+  },
+  {
+    label: '样式',
+    field: 'linetype',
+    component: 'Input',
+    // customRender: render.renderAvatar,
+  },
+  {
+    label: '显示范围',
+    field: 'maxshow',
+    component: 'Input',
+    // sorter: true,
+    // customRender: ({ text }) => {
+    //   return render.renderDict(text, 'sex');
+    // },
+  },
+  {
+    label: '是否显示',
+    field: 'showflag',
+    component: 'Input',
+  },
+  {
+    label: '编辑规则',
+    field: 'rules',
+    component: 'Input',
+  },
+  {
+    label: '单位',
+    field: 'unit',
+    component: 'Input',
+  },
+  {
+    label: '宽度',
+    field: 'width',
+    component: 'Input',
+  },
+  {
+    label: '坐标轴位置显示',
+    field: 'yaxispos',
+    component: 'Input',
+  },
+  {
+    label: 'y轴名称',
+    field: 'yname',
+    component: 'Input',
+  },
+  {
+    label: 'y轴最大值',
+    field: 'ymax',
+    component: 'Input',
+  },
+];

src/views/vent/deviceManager/workingFace/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <NormalTable
+    :columns="[]"
+    :searchFormSchema="searchFormSchema"
+    :list="list"
+    :getImportUrl="getImportUrl"
+    :getExportUrl="getExportUrl"
+    :formSchema="formSchema"
+    :deleteById="deleteById"
+    :batchDelete="batchDeleteById"
+    :saveOrUpdate="saveOrUpdate"
+    designScope="workingFace-tabel"
+    title="智能管控"
+    :showTab="true"
+    deviceType="managesys"
+    columnsType="managesys_list"
+  />
+</template>
+
+<script lang="ts" name="system-user" setup>
+  //ts语法
+  import NormalTable from '../comment/NormalTable.vue';
+  import { columns, searchFormSchema, formSchema } from './workingFace.data';
+  import { list, getImportUrl, getExportUrl, deleteById, batchDeleteById, saveOrUpdate } from './workingFace.api';
+</script>
+
+<style scoped></style>

src/views/vent/deviceManager/workingFace/workingFace.api.ts

@@ -0,0 +1,88 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/ventanaly-device/safety/ventanalyManageSystem/list',
+  save = '/ventanaly-device/safety/ventanalyManageSystem/add',
+  edit = '/ventanaly-device/safety/ventanalyManageSystem/edit',
+  modalList = '/ventanaly-model/Vmodel/ventanalyModel/list',
+  huifengids = '/ventanaly-device/safety/ventanalyManageSystem/queryHuifengList',
+  xufengids = '/ventanaly-device/safety/ventanalyManageSystem/queryXufengliangList',
+  getDeviceIds = '/safety/ventanalyMonitorParams/getdevices',
+  deleteById = '/ventanaly-device/safety/ventanalyManageSystem/delete',
+  deleteBatch = '/sys/user/deleteBatch',
+  importExcel = '/sys/user/importExcel',
+  exportXls = '/sys/user/exportXls',
+}
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const modalList = (params) => defHttp.get({ url: Api.modalList, params });
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const huifengids = (params) => defHttp.post({ url: Api.huifengids, params });
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const xufengids = (params) => defHttp.post({ url: Api.xufengids, params });
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const getDeviceIds = (params) => defHttp.get({ url: Api.getDeviceIds, params });
+
+/**
+ * 删除用户
+ */
+export const deleteById = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteById, params: params.id }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 批量删除用户
+ * @param params
+ */
+export const batchDeleteById = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+/**
+ * 保存或者更新用户
+ * @param params
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  const url = isUpdate ? Api.edit : Api.save;
+  return isUpdate ? defHttp.put({ url: url, params }) : defHttp.post({ url: url, params });
+};

src/views/vent/deviceManager/workingFace/workingFace.data.ts

@@ -0,0 +1,163 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { list, modalList, huifengids, xufengids, getDeviceIds } from './workingFace.api';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '系统名称',
+    dataIndex: 'strname',
+    width: 120,
+  },
+  {
+    title: '系统型号',
+    dataIndex: 'strinstallpos',
+    width: 100,
+  },
+  {
+    title: '系统Code',
+    dataIndex: 'nwindowtype_dictText',
+    width: 100,
+  },
+  {
+    title: '类型',
+    dataIndex: 'strtype',
+    width: 80,
+  },
+  {
+    title: '模型ID',
+    dataIndex: 'fperheight',
+    width: 100,
+  },
+  {
+    title: '控制策略',
+    dataIndex: 'nwindow',
+    width: 100,
+  },
+  {
+    title: '风向',
+    width: 150,
+    dataIndex: 'stationname',
+  },
+];
+
+export const recycleColumns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'strname',
+    width: 100,
+  },
+  {
+    title: '是否为常闭型',
+    dataIndex: 'bnormalclose',
+    width: 100,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '系统名称',
+    field: 'systemname',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '系统名称',
+    field: 'systemname',
+    component: 'Input',
+  },
+
+  {
+    label: '系统型号',
+    field: 'strsystype',
+    component: 'Input',
+  },
+  {
+    label: '系统Code',
+    field: 'code',
+    component: 'Input',
+  },
+  {
+    label: '系统类型',
+    field: 'strtype',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'syskind',
+      placeholder: '请选择系统型号',
+    },
+  },
+  {
+    label: '模型ID',
+    field: 'nmodelid',
+    component: 'ApiSelect',
+    componentProps: () => {
+      return {
+        api: modalList,
+        resultField: 'records',
+        labelField: 'strmodelname',
+        valueField: 'nmodelid',
+      };
+    },
+  },
+  {
+    label: '控制策略',
+    field: 'workmode',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'workmode',
+      placeholder: '请选择控制策略',
+      stringToNumber: true,
+    },
+  },
+  {
+    label: '点表',
+    field: 'strtype',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'syskind',
+      placeholder: '请选择状态',
+    },
+  },
+  {
+    label: '风向',
+    field: 'windkind',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'winddir',
+      placeholder: '请选择风向',
+      stringToNumber: true,
+    },
+  },
+  {
+    label: '所属回风系统',
+    field: 'huifengid',
+    component: 'ApiSelect',
+    componentProps: () => {
+      return {
+        api: huifengids,
+        labelField: 'huifengName',
+        valueField: 'id',
+      };
+    },
+  },
+  {
+    label: '关联需风量地点',
+    field: 'xufengliangid',
+    component: 'ApiSelect',
+    componentProps: () => {
+      return {
+        api: xufengids,
+        labelField: 'strmodelname',
+        valueField: 'nmodelid',
+      };
+    },
+  },
+];

src/views/vent/monitorManager/comment/AlarmHistoryTable.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="alarm-history-table">
+    <BasicTable @register="registerTable" />
+  </div>
+</template>
+
+<script lang="ts" name="system-user" setup>
+  //ts语法
+  import { BasicTable } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { defHttp } from '/@/utils/http/axios';
+
+  const list = (params) => defHttp.get({ url: '/ventanaly-device/safety/ventanalyAlarmLog/list', params });
+
+  const props = defineProps({
+    columnsType: {
+      type: String,
+      required: true,
+    },
+    deviceType: {
+      type: String,
+      required: true,
+    },
+    deviceListApi: {
+      type: Function,
+      required: true,
+    },
+    designScope: {
+      type: String,
+    },
+  });
+
+  const columns = getTableHeaderColumns(props.columnsType);
+  // 列表页面公共参数、方法
+  const { tableContext } = useListPage({
+    tableProps: {
+      api: list,
+      columns: columns,
+      canResize: true,
+      showTableSetting: false,
+      showActionColumn: false,
+      bordered: false,
+      size: 'small',
+      formConfig: {
+        labelAlign: 'left',
+        showAdvancedButton: false,
+        // autoAdvancedCol: 2,
+        schemas: [
+          {
+            label: '时间范围',
+            field: 'createTime',
+            component: 'RangePicker',
+            componentProps: {
+              valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            },
+          },
+          {
+            label: '查询设备',
+            field: 'gdeviceid',
+            component: 'ApiSelect',
+            componentProps: {
+              api: props.deviceListApi,
+              resultField: 'records',
+              labelField: 'strname',
+              valueField: 'id',
+            },
+          },
+        ],
+        fieldMapToTime: [['createTime', ['createTime_begin', 'createTime_end'], '']],
+      },
+      fetchSetting: {
+        listField: 'records',
+      },
+      pagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['5', '10', '20'],
+      },
+      beforeFetch(params) {
+        params.gdevicetype = props.deviceType + '*';
+      },
+    },
+  });
+  //注册table数据
+  const [registerTable] = tableContext;
+</script>
+
+<style scoped lang="less">
+  :deep(.ant-table-body) {
+    height: auto !important;
+  }
+  .alarm-history-table {
+    width: 100%;
+    :deep(.jeecg-basic-table-form-container) {
+      .ant-form {
+        padding: 0 !important;
+        border: none !important;
+        margin-bottom: 0 !important;
+        .ant-picker,
+        .ant-select-selector {
+          width: 100% !important;
+          background: #00000017;
+          border: 1px solid #b7b7b7;
+          input,
+          .ant-select-selection-item,
+          .ant-picker-suffix {
+            color: #fff;
+          }
+          .ant-select-selection-placeholder {
+            color: #ffffffaa;
+          }
+        }
+      }
+      .ant-table-title {
+        min-height: 0 !important;
+      }
+    }
+  }
+</style>

src/views/vent/monitorManager/comment/DeviceEcharts.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="charts-container">
+    <a-select ref="select" size="small" v-model:value="chartsType" style="position: absolute; z-index: 99; top: 2px; left: 2px; width: 98px">
+      <a-select-option value="listMonitor">实时监测</a-select-option>
+      <a-select-option value="detail">详情监测</a-select-option>
+      <a-select-option value="history">历史记录</a-select-option>
+    </a-select>
+
+    <div class="charts-box" v-if="chartsType === 'listMonitor'">
+      <BarAndLine
+        :chartsColumnsType="chartsColumnsType"
+        :xAxisPropType="xAxisPropType"
+        :dataSource="resultDataSource"
+        height="100%"
+        :chartsColumns="chartsColumns"
+        chartsType="listMonitor"
+      />
+    </div>
+    <div class="charts-box" v-else-if="chartsType === 'detail' && deviceListApi">
+      <Select
+        :options="options"
+        :fieldNames="{ label: 'strname', value: 'id' }"
+        v-model:value="deviceId"
+        placeholder="请选择查看的设备"
+        size="small"
+        style="position: absolute; z-index: 99; left: 102px; width: 150px; top: 2px"
+      />
+      <BarAndLine
+        :chartsColumnsType="chartsColumnsType"
+        :xAxisPropType="resultXAxisPropType"
+        :dataSource="detailDataSource"
+        height="100%"
+        :chartsColumns="chartsColumns"
+        chartsType="detail"
+      />
+    </div>
+    <div class="charts-box" v-else-if="chartsType === 'history'">
+      <Select
+        :options="options"
+        :fieldNames="{ label: 'strname', value: 'id' }"
+        v-model:value="deviceId"
+        placeholder="请选择查看的设备"
+        size="small"
+        style="position: absolute; z-index: 99; left: 102px; width: 150px; top: 2px"
+      />
+      <a-date-picker
+        v-model:value="historyParams.tData"
+        size="small"
+        valueFormat="YYYY-MM-DD"
+        placeholder="请选择查询日期"
+        style="position: absolute; z-index: 99; left: 254px; width: 150px; top: 2px"
+      />
+      <a-time-range-picker
+        v-model:value="historyParams.ttime"
+        size="small"
+        valueFormat="HH:mm:ss"
+        style="position: absolute; z-index: 99; left: 406px; width: 200px; top: 2px"
+      />
+      <a-select
+        ref="select"
+        size="small"
+        v-model:value="historyParams.skip"
+        placeholder="请选择间隔时间"
+        style="position: absolute; z-index: 99; top: 2px; left: 608px; width: 100px"
+      >
+        <a-select-option value="1">5秒</a-select-option>
+        <a-select-option value="2">10秒</a-select-option>
+        <a-select-option value="3">1分钟</a-select-option>
+        <a-select-option value="4">5分钟</a-select-option>
+        <a-select-option value="5">10分钟</a-select-option>
+      </a-select>
+      <Pagination
+        size="small"
+        v-model:current="currentPage"
+        v-model:page-size="pageSize"
+        :total="total"
+        :show-total="(total) => `共 ${total} 条`"
+        style="position: absolute; z-index: 99; top: 2px; right: 30px"
+      />
+      <BarAndLine
+        :chartsColumnsType="chartsColumnsType"
+        :xAxisPropType="resultXAxisPropType"
+        :dataSource="resultDataSource"
+        height="100%"
+        :chartsColumns="chartsColumns"
+        chartsType="history"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { ref, defineComponent, watch, reactive, onMounted, watchEffect } from 'vue';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import dayjs from 'dayjs';
+  import { defHttp } from '/@/utils/http/axios';
+  import { Select, Pagination } from 'ant-design-vue';
+  export default defineComponent({
+    name: 'DeviceEcharts',
+    components: { BarAndLine, Select, Pagination },
+    props: {
+      chartsColumns: {
+        type: Array,
+        default: () => [],
+      },
+      chartsColumnsType: {
+        type: String,
+        required: true,
+      },
+      dataSource: {
+        type: Array,
+        default: () => [],
+      },
+      deviceListApi: {
+        type: Function,
+        required: true,
+      },
+      deviceType: {
+        type: String,
+        required: true,
+      },
+      option: {
+        type: Object,
+        default: () => ({}),
+      },
+      xAxisPropType: {
+        type: String,
+        required: true,
+      },
+    },
+    setup(props) {
+      const historyList = (params) => defHttp.get({ url: '/ventanaly-device/safety/ventanalyMonitorData/list', params });
+      const chartsType = ref('listMonitor');
+      const deviceId = ref('');
+      const options = ref([]);
+      const historyParams = reactive({
+        tData: dayjs(),
+        ttime: ['', ''],
+        ttime_begin: null,
+        ttime_end: null,
+        skip: null,
+      });
+      const resultXAxisPropType = ref('');
+      const resultDataSource = ref<any[]>([]);
+      const detailDataSource = ref<any[]>([]);
+      const currentPage = ref<number>(1);
+      const pageSize = ref<number>(20);
+      const total = ref(0);
+      const onChange = (pageNumber: number) => {
+        console.log('Page: ', pageNumber);
+      };
+      watch(
+        [chartsType, deviceId, historyParams, pageSize, currentPage],
+        async (
+          [newChartsType, newDeviceId, newHistoryParams, newPageSize, newCurrentPage],
+          [oldChartsType, oldDeviceId, oldHistoryParams, oldPageSize, oldCurrentPage]
+        ) => {
+          console.log('[ historyParams ] >', historyParams.ttime, dayjs(historyParams.ttime).format('HH:mm:ss'));
+
+          if (newChartsType === 'listMonitor') {
+            // 实时监测所有
+            resultDataSource.value = props.dataSource;
+          } else if (newChartsType === 'history') {
+            // 历史
+            resultXAxisPropType.value = 'gcreatetime';
+            if (newChartsType !== oldChartsType || newDeviceId !== oldDeviceId) {
+              currentPage.value = 1;
+            }
+            const res = await historyList({
+              ttime_begin: historyParams.ttime[0] ? historyParams.ttime[0] : null,
+              ttime_end: historyParams.ttime[1] ? historyParams.ttime[1] : null,
+              tData: dayjs(historyParams.tData).format('YYYY-MM-DD'),
+              gdevicetype: props.deviceType + '*',
+              gdeviceid: newDeviceId,
+              skip: historyParams.skip,
+              pageSize: pageSize.value,
+              pageNo: currentPage.value,
+            });
+            resultDataSource.value = res.datalist.records.map((item) => Object.assign(item, item.readData));
+            total.value = res.datalist.total;
+          } else if (newChartsType === 'detail') {
+            // 设备详情
+            resultXAxisPropType.value = 'readTime';
+            if (newDeviceId !== oldDeviceId) {
+              detailDataSource.value = [];
+            }
+          }
+        }
+      );
+      watchEffect(() => {
+        if (chartsType.value === 'detail') {
+          const currentData = props.dataSource.find((item: any) => item.deviceID === deviceId.value);
+          if (currentData) {
+            const isHas = detailDataSource.value.find((item) => item[resultXAxisPropType.value] === currentData[resultXAxisPropType.value]);
+            if (!isHas) {
+              if (detailDataSource.value.length < 15) {
+                detailDataSource.value.push(currentData);
+              } else {
+                detailDataSource.value.shift();
+                detailDataSource.value.push(currentData);
+              }
+            }
+          }
+        }
+      });
+
+      onMounted(async () => {
+        const res = await props.deviceListApi();
+        options.value = res.records;
+        deviceId.value = options.value[0]['id'];
+      });
+
+      return {
+        chartsType,
+        deviceId,
+        resultDataSource,
+        historyParams,
+        options,
+        resultXAxisPropType,
+        detailDataSource,
+        currentPage,
+        pageSize,
+        total,
+        onChange,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  .charts-container {
+    position: relative;
+    height: 100%;
+    .charts-box {
+      height: 100%;
+    }
+    .ant-picker,
+    .ant-select-selector {
+      background: #00000017 !important;
+      border: 1px solid #b7b7b74f !important;
+      input,
+      .ant-select-selection-item,
+      .ant-picker-suffix {
+        color: #fff !important;
+      }
+      .ant-select-selection-placeholder {
+        color: #b7b7b7 !important;
+      }
+    }
+    .ant-select-arrow,
+    .ant-picker-separator {
+      color: #fff !important;
+    }
+  }
+</style>

src/views/vent/monitorManager/comment/HandlerHistoryTable.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="handler-history-table">
+    <BasicTable @register="registerTable" />
+  </div>
+</template>
+
+<script lang="ts" name="system-user" setup>
+  //ts语法
+  import { BasicTable } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { defHttp } from '/@/utils/http/axios';
+
+  const list = (params) => defHttp.get({ url: '/ventanaly-device/safety/ventanalyDevicesetLog/list', params });
+
+  const props = defineProps({
+    columnsType: {
+      type: String,
+      required: true,
+    },
+    deviceType: {
+      type: String,
+      required: true,
+    },
+    deviceListApi: {
+      type: Function,
+      required: true,
+    },
+    designScope: {
+      type: String,
+    },
+  });
+
+  const columns = getTableHeaderColumns(props.columnsType);
+  // 列表页面公共参数、方法
+  const { tableContext } = useListPage({
+    tableProps: {
+      api: list,
+      columns: columns,
+      canResize: true,
+      showTableSetting: false,
+      showActionColumn: false,
+      bordered: false,
+      size: 'small',
+      formConfig: {
+        labelAlign: 'left',
+        showAdvancedButton: false,
+        schemas: [
+          {
+            label: '时间范围',
+            field: 'createTime',
+            component: 'RangePicker',
+            componentProps: {
+              valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            },
+          },
+          {
+            label: '查询设备',
+            field: 'gdeviceid',
+            component: 'ApiSelect',
+            componentProps: {
+              api: props.deviceListApi,
+              resultField: 'records',
+              labelField: 'strname',
+              valueField: 'id',
+            },
+          },
+        ],
+        fieldMapToTime: [['createTime', ['createTime_begin', 'createTime_end'], '']],
+      },
+      fetchSetting: {
+        listField: 'records',
+      },
+      pagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['5', '10', '20'],
+      },
+      beforeFetch(params) {
+        params.gdevicetype = props.deviceType + '*';
+      },
+    },
+  });
+  //注册table数据
+  const [registerTable] = tableContext;
+</script>
+
+<style scoped lang="less">
+  :deep(.ant-table-body) {
+    height: auto !important;
+  }
+  .handler-history-table {
+    width: 100%;
+    :deep(.jeecg-basic-table-form-container) {
+      .ant-form {
+        padding: 0 !important;
+        border: none !important;
+        margin-bottom: 0 !important;
+        .ant-picker,
+        .ant-select-selector {
+          width: 100% !important;
+          background: #00000017;
+          border: 1px solid #b7b7b7;
+          input,
+          .ant-select-selection-item,
+          .ant-picker-suffix {
+            color: #fff;
+          }
+          .ant-select-selection-placeholder {
+            color: #ffffffaa;
+          }
+        }
+      }
+      .ant-table-title {
+        min-height: 0 !important;
+      }
+    }
+  }
+</style>

src/views/vent/monitorManager/comment/HistoryTable.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="history-table">
+    <BasicTable ref="historyTable" @register="registerTable" />
+  </div>
+</template>
+
+<script lang="ts" name="system-user" setup>
+  //ts语法
+  import { watchEffect, ref, reactive } from 'vue';
+  import { BasicTable } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { defHttp } from '/@/utils/http/axios';
+  import dayjs from 'dayjs';
+  const historyTable = ref();
+  const list = (params) => defHttp.get({ url: '/ventanaly-device/safety/ventanalyMonitorData/list', params });
+  const emit = defineEmits(['change']);
+  const props = defineProps({
+    columnsType: {
+      type: String,
+      required: true,
+    },
+    deviceType: {
+      type: String,
+      required: true,
+    },
+    deviceListApi: {
+      type: Function,
+      required: true,
+    },
+    designScope: {
+      type: String,
+    },
+  });
+
+  const columns = getTableHeaderColumns(props.columnsType);
+
+  // 列表页面公共参数、方法
+  const { tableContext } = useListPage({
+    tableProps: {
+      api: list,
+      columns: columns,
+      canResize: true,
+      showTableSetting: false,
+      showActionColumn: false,
+      bordered: false,
+      size: 'small',
+      formConfig: {
+        labelAlign: 'left',
+        showAdvancedButton: false,
+        // autoAdvancedCol: 2,
+
+        baseColProps: {
+          // offset: 0.5,
+          xs: 24,
+          sm: 24,
+          md: 24,
+          lg: 9,
+          xl: 7,
+          xxl: 4,
+        },
+        schemas: [
+          {
+            label: '查询日期',
+            field: 'tData',
+            component: 'DatePicker',
+            defaultValue: dayjs(),
+            componentProps: {
+              valueFormat: 'YYYY-MM-DD',
+            },
+          },
+          {
+            label: '时间区间',
+            field: 'tickectDate',
+            component: 'TimeRangePicker',
+            componentProps: {
+              placeholder: ['开始时间', '结束时间'],
+              valueFormat: 'HH:mm:ss',
+            },
+          },
+          {
+            label: '查询设备',
+            field: 'gdeviceid',
+            component: 'ApiSelect',
+            componentProps: {
+              api: props.deviceListApi,
+              resultField: 'records',
+              labelField: 'strname',
+              valueField: 'id',
+            },
+          },
+          {
+            label: '间隔时间',
+            field: 'skip',
+            component: 'Select',
+            componentProps: {
+              options: [
+                {
+                  label: '5秒',
+                  value: '1',
+                },
+                {
+                  label: '10秒',
+                  value: '2',
+                },
+                {
+                  label: '1分钟',
+                  value: '3',
+                },
+                {
+                  label: '5分钟',
+                  value: '4',
+                },
+                {
+                  label: '10分钟',
+                  value: '5',
+                },
+              ],
+            },
+          },
+        ],
+        fieldMapToTime: [['tickectDate', ['ttime_begin', 'ttime_end'], '']],
+      },
+      fetchSetting: {
+        listField: 'datalist.records',
+      },
+      pagination: {
+        current: 1,
+        pageSize: 5,
+        pageSizeOptions: ['5', '10', '20'],
+      },
+      beforeFetch(params) {
+        params.gdevicetype = props.deviceType + '*';
+      },
+      afterFetch(resultItems) {
+        resultItems.map((item) => {
+          Object.assign(item, item['readData']);
+        });
+        return resultItems;
+      },
+    },
+  });
+  //注册table数据
+  const [registerTable, { getDataSource }] = tableContext;
+
+  watchEffect(() => {
+    if (historyTable.value && getDataSource) {
+      const data = getDataSource() || [];
+      emit('change', data);
+      console.log('[ data ] >', data);
+    }
+  });
+</script>
+
+<style scoped lang="less">
+  :deep(.ant-table-body) {
+    height: auto !important;
+  }
+  .history-table {
+    width: 100%;
+    :deep(.jeecg-basic-table-form-container) {
+      .ant-form {
+        padding: 0 !important;
+        border: none !important;
+        margin-bottom: 0 !important;
+        .ant-picker,
+        .ant-select-selector {
+          width: 100% !important;
+          background: #00000017;
+          border: 1px solid #b7b7b74f !important;
+          input,
+          .ant-select-selection-item,
+          .ant-picker-suffix {
+            color: #fff;
+          }
+          .ant-select-selection-placeholder {
+            color: #b7b7b7;
+          }
+        }
+        .ant-select-arrow,
+        .ant-picker-separator {
+          color: #fff !important;
+        }
+      }
+      .ant-table-title {
+        min-height: 0 !important;
+      }
+    }
+  }
+</style>

src/views/vent/monitorManager/sensorMonitor/index.vue

@@ -0,0 +1,354 @@
+<template>
+  <div class="sensor-container">
+    <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
+      <a-tab-pane key="1" tab="实时监测">
+        <div class="box-bg table-box" style="margin-bottom: 10px">
+          <label style="color: #fff">设备类型：</label>
+          <Select
+            @change="handleChange"
+            :options="deviceTypeOption"
+            :fieldNames="{ label: 'itemText', value: 'itemValue' }"
+            v-model:value="deviceKind"
+            style="width: 200px; margin-bottom: 5px"
+            placeholder="请选择设备类型"
+            :allowClear="true"
+          />
+          <MonitorTable
+            columnsType="modelsensor_monitor"
+            :dataSource="dataSource"
+            design-scope="modelsensor_monitor"
+            @select-row="getSelectRow"
+            title="风窗监测"
+          />
+        </div>
+
+        <div class="charts-box box-bg">
+          <BarAndLine
+            v-if="chartsColumns.length > 0"
+            :chartsColumnsType="selectData.deviceType"
+            xAxisPropType="readTime"
+            :dataSource="detailDataSource"
+            height="100%"
+            :chartsColumns="chartsColumns"
+            chartsType="detail"
+          />
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="历史数据">
+        <div class="tab-item table-box box-bg padding-0">
+          <HistoryTable
+            columns-type="modelsensor_history"
+            device-type="modelsensor"
+            :device-list-api="baseList"
+            @change="historyDataSourceChange"
+            designScope="modelsensor-history"
+          />
+        </div>
+        <div class="charts-box box-bg">
+          <BarAndLine
+            v-if="chartsColumns.length > 0"
+            :chartsColumnsType="selectData.deviceType"
+            xAxisPropType="gcreatetime"
+            :dataSource="historyDataSource"
+            height="100%"
+            :chartsColumns="chartsColumns"
+            chartsType="history"
+          />
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="3" tab="报警历史">
+        <div class="tab-item box-bg">
+          <AlarmHistoryTable columns-type="alarm_history" device-type="modelsensor" :device-list-api="baseList" designScope="alarm-history" />
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="4" tab="操作历史">
+        <div class="tab-item box-bg">
+          <HandlerHistoryTable columns-type="alarm_history" device-type="modelsensor" :device-list-api="baseList" designScope="alarm-history" />
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+    <div class="title-text">
+      {{ selectData.strname }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import '/@/design/vent/modal.less';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  import { Select } from 'ant-design-vue';
+  import { onBeforeMount, ref, onMounted, onUnmounted, toRaw, reactive } from 'vue';
+  import MonitorTable from '../comment/MonitorTable.vue';
+  import HistoryTable from '../comment/HistoryTable.vue';
+  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
+  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
+  import { list, getTableList } from './sensor.api';
+  import { list as baseList } from '../../deviceManager/sensorTabel/sensor.api';
+  import { deviceList } from '../../deviceManager/comment/pointTabel/point.api';
+
+  const deviceBaseList = ref([]);
+  const activeKey = ref('1');
+  const deviceKind = ref(null);
+  const deviceTypeOption = ref([]);
+  // 默认初始是第一行
+  const selectRowIndex = ref(0);
+  const dataSource = ref([]);
+  const detailDataSource = ref<any[]>([]);
+  const historyDataSource = ref<any[]>([]);
+  const chartsColumns = ref<any[]>([]);
+  const selectData = reactive({
+    strname: '',
+    deviceType: '',
+  });
+
+  const tabChange = (activeKeyVal) => {
+    activeKey.value = activeKeyVal;
+    detailDataSource.value = [];
+  };
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  const getMonitor = () => {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(async () => {
+        await getDataSource(deviceKind.value);
+        if (timer) {
+          timer = null;
+        }
+        getMonitor();
+      }, 1000);
+    }
+  };
+
+  const getDataSource = async (devicetype) => {
+    const type = devicetype ? devicetype : 'modelsensor';
+    const res = await list({ devicetype: type, pagetype: 'normal' });
+    dataSource.value = res.msgTxt[0].datalist || [];
+    dataSource.value.map((data: any) => {
+      const readData = data.readData;
+      data = Object.assign(data, readData);
+      return data;
+    });
+    const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
+    Object.assign(selectData, data);
+
+    if (chartsColumns.value.length <= 0 && selectData.deviceType) {
+      handleChange(selectData.deviceType);
+    }
+
+    // 如果当前为监测tab
+    if (activeKey.value === '1') {
+      const isHas = detailDataSource.value.find((item) => item['readTime'] === selectData['readTime']);
+      // 获取选中数据
+      if (!isHas) {
+        if (detailDataSource.value.length < 15) {
+          detailDataSource.value.push({ ...selectData });
+        } else {
+          detailDataSource.value.shift();
+          detailDataSource.value.push({ ...selectData });
+        }
+      }
+    }
+    return data;
+  };
+
+  const getSelectRow = (selectRow, index) => {
+    if (!selectRow) return;
+    selectRowIndex.value = index;
+    const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
+    Object.assign(selectData, selectRow, baseData);
+    detailDataSource.value = [];
+    if (selectData.deviceType) handleChange(selectData.deviceType);
+  };
+
+  // 获取设备基本信息列表
+  const getDeviceBaseList = () => {
+    getTableList({ pageSize: 1000 }).then((res) => {
+      deviceBaseList.value = res.records;
+    });
+  };
+
+  function handleChange(type) {
+    if (type === 'modelsensor_multi') {
+      chartsColumns.value = [
+        {
+          legend: '气压值',
+          seriesName: '(Pa)',
+          ymax: 50,
+          yname: 'Pa',
+          linetype: 'bar',
+          yaxispos: 'left',
+          color: '#37BCF2',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'pa',
+        },
+        {
+          legend: '温度',
+          seriesName: '(℃)',
+          ymax: 50,
+          yname: '℃',
+          linetype: 'bar',
+          yaxispos: 'right',
+          color: '#FC4327',
+          sort: 2,
+          xRotate: 0,
+          dataIndex: 'temperature',
+        },
+      ];
+    } else if (type === 'modelsensor_smoke') {
+      chartsColumns.value = [
+        {
+          legend: '烟雾浓度',
+          seriesName: '(%)',
+          ymax: 20,
+          yname: '%',
+          linetype: 'bar',
+          yaxispos: 'left',
+          color: '#37BCF2',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'windSpeed',
+        },
+      ];
+    } else if (type === 'modelsensor_speed') {
+      chartsColumns.value = [
+        {
+          legend: '风速',
+          seriesName: '(m/s)',
+          ymax: 20,
+          yname: 'm/s',
+          linetype: 'bar',
+          yaxispos: 'left',
+          color: '#37BCF2',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'windSpeed',
+        },
+      ];
+    } else if (type === 'modelsensor_gas') {
+      chartsColumns.value = [
+        {
+          legend: '甲烷',
+          seriesName: '(%)',
+          ymax: 20,
+          yname: '%',
+          linetype: 'bar',
+          yaxispos: 'left',
+          color: '#37BCF2',
+          sort: 1,
+          xRotate: 0,
+          dataIndex: 'windSpeed',
+        },
+      ];
+    }
+    console.log('[ type ] >', type, chartsColumns.value);
+  }
+
+  function historyDataSourceChange(dataSource) {
+    historyDataSource.value = dataSource;
+    if (historyDataSource.value.length > 0) handleChange(historyDataSource.value[0].gdevicetype);
+  }
+
+  onBeforeMount(() => {
+    getDeviceBaseList();
+  });
+
+  onMounted(async () => {
+    getMonitor();
+    const res = await deviceList({ devicetype: 'modelsensor' });
+    const obj = res.find((item) => item.itemValue === 'modelsensor');
+    deviceTypeOption.value = obj ? obj.children : [];
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
+</script>
+<style lang="less" scoped>
+  .padding-0 {
+    padding: 10px 0 !important;
+  }
+  .sensor-container {
+    position: relative;
+    top: 20px;
+    padding: 10px;
+    z-index: 999;
+    max-height: calc(100vh - 100px);
+    .ant-tabs {
+      max-height: calc(100vh - 100px);
+      .tab-item {
+        max-height: calc(100vh - 170px);
+        overflow-y: auto;
+      }
+    }
+    .title-text {
+      position: absolute;
+      top: -14px;
+      left: 0;
+      width: 100%;
+      text-align: center;
+      color: #fff;
+    }
+    .table-box {
+      height: calc(60vh - 90px);
+      padding: 20px 10px;
+      overflow-y: auto;
+    }
+
+    .box-bg {
+      border: 1px solid #4d7ad855;
+      border-radius: 2px;
+      // background-color: #001d3055;
+      -webkit-backdrop-filter: blur(8px);
+      backdrop-filter: blur(8px);
+      box-shadow: 0 0 10px #5984e055 inset;
+    }
+    .charts-box {
+      height: calc(40vh - 80px);
+      padding: 5px 10px;
+      margin-top: 10px;
+    }
+  }
+  :deep(.ant-tabs-tabpane-active) {
+    overflow: auto;
+  }
+  :deep(.ant-tabs-card) {
+    .ant-tabs-tab {
+      background: linear-gradient(#2cd1ff55, #1eb0ff55);
+      border-color: #74e9fe;
+      border-radius: 0%;
+      &:hover {
+        color: #64d5ff;
+      }
+    }
+    .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+      color: aqua;
+    }
+    .ant-tabs-nav::before {
+      border-color: #74e9fe;
+    }
+    .ant-picker,
+    .ant-select-selector {
+      width: 100% !important;
+      background: #00000017 !important;
+      border: 1px solid #b7b7b74f !important;
+      input,
+      .ant-select-selection-item,
+      .ant-picker-suffix {
+        color: #fff !important;
+      }
+      .ant-select-selection-placeholder {
+        color: #b7b7b7 !important;
+      }
+    }
+    .ant-pagination-next,
+    .action,
+    .ant-select-arrow,
+    .ant-picker-separator {
+      color: #fff !important;
+    }
+  }
+</style>

src/views/vent/monitorManager/sensorMonitor/sensor.api.ts

@@ -0,0 +1,17 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/ventanaly-device/monitor/device',
+  baseList = '/ventanaly-device/safety/ventanalyWindow/list',
+}
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.post({ url: Api.list, params });
+
+/**
+ * 保存或者更新用户
+ * @param params
+ */
+export const getTableList = (params) => defHttp.get({ url: Api.baseList, params });