[Pref 0000] 依赖项优化

README.md

@@ -406,7 +406,7 @@ function generateVueComponent(svgContent, elementInfoMap, keys) {
   return `
 <template>\n${svgContent}\n</template>\n\n
 <script setup lang="ts">
-import { onMounted, defineExpose, withDefaults, defineProps } from "vue";
+import { onMounted, defineExpose, withDefaults} from "vue";
 import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
 
 const props = withDefaults(defineProps<{

src/components/vent/BasicMonitoring.vue

@@ -96,7 +96,7 @@
   import { useRouter } from 'vue-router';
   import { Config } from '/@/views/vent/deviceManager/configurationTable/types';
   import { message, Modal } from 'ant-design-vue';
-  import _ from 'lodash';
+  import { set } from 'lodash-es';
   import PasswordModal from '/@/views/vent/monitorManager/comment/components/PasswordModal.vue';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { deviceControlApi } from '/@/api/vent';
@@ -266,7 +266,7 @@
         message.error('获取已绑定设备时发生了错误');
       });
       monitorData.value = msgTxt.reduce((obj, item) => {
-        _.set(obj, item.type, item.datalist);
+        set(obj, item.type, item.datalist);
         return obj;
       }, {});
     }

src/hooks/vent/useSvgAnimation.ts

@@ -1,5 +1,5 @@
 import { ref } from 'vue';
-import _ from 'lodash';
+import { clamp } from 'lodash-es';
 
 /**
  * svg二维模型动画使用的钩子，需要配合指定的组件使用，即svg模型组件（README里有更详细的说明）
@@ -66,7 +66,7 @@ export function useSvgAnimation(elementInfo: Map<string, { key: string; transfor
     const { duration = 3000, progress = 1 } = config;
     const el = animationElements.get(elementId);
     const info = elementInfo.get(elementId);
-    const percentage = _.clamp(progress, 0, 1);
+    const percentage = clamp(progress, 0, 1);
 
     if (!el || !info) return;
 

src/layouts/default/header/components/user-dropdown/UpdateHome.vue

@@ -4,7 +4,7 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { ref, unref, defineExpose } from 'vue';
+  import { ref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { useMessage } from '/@/hooks/web/useMessage';

src/router/guard/permissionGuard.ts

@@ -14,7 +14,7 @@ import { OAUTH2_THIRD_LOGIN_TENANT_ID } from '/@/enums/cacheEnum';
 
 import { useGlobSetting } from '/@/hooks/setting';
 
-import _ from 'lodash';
+import { isEmpty, assign } from 'lodash-es';
 import { MOCK_LOGIN_URL_QUERY, SKIP_SSO_URL_QUERY } from '../constant';
 import { useSso } from '/@/hooks/web/useSso';
 import { useAutoLogin } from '/@/hooks/vent/useAutoLogin';
@@ -62,8 +62,8 @@ export function createPermissionGuard(router: Router) {
       }
     }
 
-    if (_.isEmpty(history.state.current)) {
-      _.assign(history.state, { current: from.fullPath });
+    if (isEmpty(history.state.current)) {
+      assign(history.state, { current: from.fullPath });
     }
     if (
       from.path === ROOT_PATH &&

src/views/system/dict/components/DictItemModal.vue

@@ -1,15 +1,16 @@
 <template>
   <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" width="800px">
     <!-- update-begin---author:wangshuai---date:2023-10-23---for:【QQYUN-6804】后台模式字典没有颜色配置---  -->
-    <BasicForm @register="registerForm" >
+    <BasicForm @register="registerForm">
       <template #itemColor="{ model, field }">
         <div class="item-tool">
           <div
-              v-for="(item,index) in Colors"
-              :style="{ color: item[0] }"
-              :class="model.itemColor===item[0]?'item-active':''"
-              class="item-color"
-              @click="itemColorClick(item)">
+            v-for="(item, index) in Colors"
+            :style="{ color: item[0] }"
+            :class="model.itemColor === item[0] ? 'item-active' : ''"
+            class="item-color"
+            @click="itemColorClick(item)"
+          >
             <div class="item-color-border"></div>
             <div class="item-back" :style="{ background: item[0] }"></div>
           </div>
@@ -20,13 +21,13 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { defineProps, ref, computed, unref, reactive } from 'vue';
+  import { ref, computed, unref, reactive } from 'vue';
   import { BasicModal, useModalInner } from '/src/components/Modal';
   import { BasicForm, useForm } from '/src/components/Form';
   import { itemFormSchema } from '../dict.data';
   import { saveOrUpdateDictItem } from '../dict.api';
-  import { Colors } from '/@/utils/dict/DictColors.js'
-  
+  import { Colors } from '/@/utils/dict/DictColors.js';
+
   // 声明Emits
   const emit = defineEmits(['success', 'register']);
   const props = defineProps({ dictId: String });
@@ -78,26 +79,25 @@
       setModalProps({ confirmLoading: false });
     }
   }
-  
+
   /**
    * 字典颜色点击事件
-   * 
+   *
    * @param index
    * @param item
    * @param model
    */
   function itemColorClick(item) {
-    console.log(item)
-    setFieldsValue({ itemColor: item[0] })
+    console.log(item);
+    setFieldsValue({ itemColor: item[0] });
   }
-  
 </script>
 <style lang="less" scoped>
-   /*begin 字典颜色配置样式*/
-  .item-tool{
+  /*begin 字典颜色配置样式*/
+  .item-tool {
     display: flex;
     flex-wrap: wrap;
-    .item-color{
+    .item-color {
       width: 18px;
       display: flex;
       justify-content: center;
@@ -105,16 +105,16 @@
       align-items: center;
       margin-right: 10px;
     }
-    .item-back{
+    .item-back {
       width: 18px;
       height: 18px;
       border-radius: 50%;
     }
   }
-  .item-color-border{
+  .item-color-border {
     visibility: hidden;
   }
-  .item-active .item-color-border{
+  .item-active .item-color-border {
     visibility: visible;
     position: absolute;
     border: 1px solid;
@@ -122,5 +122,5 @@
     height: 24px;
     border-radius: 50%;
   }
-   /*end 字典颜色配置样式*/
+  /*end 字典颜色配置样式*/
 </style>

src/views/system/examples/demo/DemoModal.vue

@@ -4,7 +4,7 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { ref, computed, unref, defineProps } from 'vue';
+  import { ref, computed, unref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './demo.data';
@@ -32,13 +32,13 @@
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
     //重置表单
     await resetFields();
-    setModalProps({ confirmLoading: false, showOkBtn: !props.isDisabled});
+    setModalProps({ confirmLoading: false, showOkBtn: !props.isDisabled });
     isUpdate.value = !!data?.isUpdate;
-    if(data.createBy){
-      await setFieldsValue({createBy: data.createBy})
+    if (data.createBy) {
+      await setFieldsValue({ createBy: data.createBy });
     }
-    if(data.createTime){
-      await setFieldsValue({createTime: data.createTime})
+    if (data.createTime) {
+      await setFieldsValue({ createTime: data.createTime });
     }
     if (unref(isUpdate)) {
       //获取详情

src/views/system/menuModal/DataRuleModal.vue

@@ -4,7 +4,7 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { defineProps, ref, computed, unref } from 'vue';
+  import { ref, computed, unref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { dataRuleFormSchema } from './menu.data';

src/views/system/menuModalApp/DataRuleModal.vue

@@ -1,55 +1,54 @@
 <template>
-    <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" width="700px">
-      <BasicForm @register="registerForm" />
-    </BasicModal>
-  </template>
-  <script lang="ts" setup>
-    import { defineProps, ref, computed, unref } from 'vue';
-    import { BasicModal, useModalInner } from '/@/components/Modal';
-    import { BasicForm, useForm } from '/@/components/Form/index';
-    import { dataRuleFormSchema } from './menu.data';
-    import { saveOrUpdateRule } from './menu.api';
-    // 声明Emits
-    const emit = defineEmits(['success', 'register']);
-    const props = defineProps({ permissionId: String });
-    const isUpdate = ref(true);
-    //表单配置
-    const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
-      schemas: dataRuleFormSchema,
-      showActionButtonGroup: false,
-    });
-    //表单赋值
-    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-      //重置表单
-      await resetFields();
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" width="700px">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { dataRuleFormSchema } from './menu.data';
+  import { saveOrUpdateRule } from './menu.api';
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  const props = defineProps({ permissionId: String });
+  const isUpdate = ref(true);
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    schemas: dataRuleFormSchema,
+    showActionButtonGroup: false,
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+
+  //设置标题
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增规则' : '编辑规则'));
+
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      values.permissionId = props.permissionId;
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdateRule(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
       setModalProps({ confirmLoading: false });
-      isUpdate.value = !!data?.isUpdate;
-      if (unref(isUpdate)) {
-        //表单赋值
-        await setFieldsValue({
-          ...data.record,
-        });
-      }
-    });
-  
-    //设置标题
-    const getTitle = computed(() => (!unref(isUpdate) ? '新增规则' : '编辑规则'));
-  
-    //表单提交事件
-    async function handleSubmit() {
-      try {
-        const values = await validate();
-        values.permissionId = props.permissionId;
-        setModalProps({ confirmLoading: true });
-        //提交表单
-        await saveOrUpdateRule(values, isUpdate.value);
-        //关闭弹窗
-        closeModal();
-        //刷新列表
-        emit('success');
-      } finally {
-        setModalProps({ confirmLoading: false });
-      }
     }
-  </script>
-  
+  }
+</script>

src/views/vent/deviceManager/comment/faultConfigTable/components/operationTable.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="operation-table">
-    <a-form ref="formSta" :model="formState" layout="horizontal" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
-      autocomplete="off">
+    <a-form ref="formSta" :model="formState" layout="horizontal" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off">
       <a-form-item name="areaPercentThreshold" label="面积百分比阈值(%)">
         <a-input v-model:value="formState.areaPercentThreshold" type="number" allowClear placeholder="请输入面积百分比阈值"></a-input>
       </a-form-item>
@@ -23,99 +22,99 @@
       </a-form-item>
       <a-form-item label="摄像头" name="cameraId">
         <a-select ref="select" v-model:value="formState.cameraId">
-          <a-select-option v-for="(item, index) in cameraData" :key="index" :value="item.value">{{ item.label
-            }}</a-select-option>
+          <a-select-option v-for="(item, index) in cameraData" :key="index" :value="item.value">{{ item.label }}</a-select-option>
         </a-select>
       </a-form-item>
       <a-form-item label="任务状态" name="status">
         <a-select ref="select" v-model:value="formState.status">
-          <a-select-option v-for="(item, index) in taskData" :key="index" :value="item.value">{{ item.label
-            }}</a-select-option>
+          <a-select-option v-for="(item, index) in taskData" :key="index" :value="item.value">{{ item.label }}</a-select-option>
         </a-select>
       </a-form-item>
-
     </a-form>
-    <div style="display: flex;justify-content: flex-end;margin: 20px;">
-      <a-button style="margin-right: 10px;" type="primary" @click="handleConfirm">确定</a-button>
+    <div style="display: flex; justify-content: flex-end; margin: 20px">
+      <a-button style="margin-right: 10px" type="primary" @click="handleConfirm">确定</a-button>
       <a-button @click="handleCancel">取消</a-button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch,} from 'vue'
-import { saveOrUpdate,} from '../faultConfig.api'
-import {taskData} from '../faultConfig.data'
-import { useMessage } from '/@/hooks/web/useMessage';
-let props = defineProps({
-  gateId:{
-    type:String,
-    default:''
-  },
-  recordData: {
-    type: Object,
-    default: () => {
-      return {}
+  import { ref, reactive, watch } from 'vue';
+  import { saveOrUpdate } from '../faultConfig.api';
+  import { taskData } from '../faultConfig.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  let props = defineProps({
+    gateId: {
+      type: String,
+      default: '',
+    },
+    recordData: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    cameraData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  });
+  const { createMessage } = useMessage();
+  let formSta = ref();
+  let formState = reactive({
+    id: null,
+    gateId: null,
+    areaPercentThreshold: null,
+    cameraId: null,
+    detectInterval: null,
+    durationThreshold: null,
+    maxAreaBase: null,
+    pixelAreaRatio: null,
+    segModelPath: null,
+    status: null,
+  });
+  let $emit = defineEmits(['handleClose']);
+
+  //确定
+  async function handleConfirm() {
+    let res;
+    if (props.recordData.id) {
+      res = await saveOrUpdate(formState, true);
+    } else {
+      formState.gateId = props.gateId;
+      res = await saveOrUpdate(formState, false);
     }
-  },
-  cameraData:{
-    type:Array,
-    default:()=>{
-      return []
+    if (res.code == 200) {
+      createMessage.success('操作成功!');
+      formSta.value.resetFields();
+      $emit('handleClose');
+    } else {
+      createMessage.error('操作失败!');
     }
   }
-})
-const { createMessage } = useMessage();
-let formSta = ref()
-let formState = reactive({
-  id: null,
-  gateId:null,
-  areaPercentThreshold: null,
-  cameraId: null,
-  detectInterval: null,
-  durationThreshold: null,
-  maxAreaBase: null,
-  pixelAreaRatio: null,
-  segModelPath: null,
-  status: null,
-})
-let $emit = defineEmits(['handleClose'])
-
-//确定
-async function handleConfirm() {
-  let res
-  if (props.recordData.id) {
-    res = await saveOrUpdate(formState, true)
-  } else {
-    formState.gateId=props.gateId
-    res = await saveOrUpdate(formState, false)
-  }
-  if (res.code == 200) {
-    createMessage.success('操作成功!')
-    formSta.value.resetFields()
-    $emit('handleClose')
-  } else {
-    createMessage.error('操作失败!')
+  //取消
+  function handleCancel() {
+    formSta.value.resetFields();
+    $emit('handleClose');
   }
-}
-//取消
-function handleCancel() {
-  formSta.value.resetFields()
-  $emit('handleClose')
-}
-
-watch(()=>props.recordData,(newV,oldV)=>{
-  if (JSON.stringify(props.recordData) != '{}') {
-    formState = Object.assign(formState,newV) as any
-  }
-},{
-  immediate:true
-})
 
+  watch(
+    () => props.recordData,
+    (newV, oldV) => {
+      if (JSON.stringify(props.recordData) != '{}') {
+        formState = Object.assign(formState, newV) as any;
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
 </script>
 
 <style lang="less" scoped>
-.zxm-form {
-  padding: 20px 100px 20px 80px !important;
-}
+  .zxm-form {
+    padding: 20px 100px 20px 80px !important;
+  }
 </style>

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

@@ -51,7 +51,7 @@
   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, onBeforeMount } from 'vue';
+  import { ref, nextTick, inject, onMounted, onBeforeMount } from 'vue';
 
   const props = defineProps({
     deviceId: { type: String },

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

@@ -53,7 +53,7 @@
   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, onBeforeMount, onMounted } from 'vue';
+  import { ref, nextTick, onBeforeMount, onMounted } from 'vue';
 
   const props = defineProps({
     deviceId: { type: String },

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

@@ -59,7 +59,7 @@
   import { BasicModal } from '/@/components/Modal';
   import CodeEditor from '/@/components/CodeEditor/src/CodeEditor.vue';
   import { ModulePresetMap } from './options';
-  import _ from 'lodash';
+  import { pick } from 'lodash-es';
   /** @ts-ignore-next-line */
   import helpContext from './types?raw';
   import ModulePlain from './ModulePlain.vue';
@@ -173,7 +173,7 @@
 
   function handleConfig(record) {
     Object.assign(formData, toRaw(record));
-    configJSON.value = _.pick(formData, ['deviceType', 'pageType', 'moduleName', 'moduleData', 'showStyle']);
+    configJSON.value = pick(formData, ['deviceType', 'pageType', 'moduleName', 'moduleData', 'showStyle']);
     configModalCtx.openModal();
   }
 

src/views/vent/deviceManager/equipManager/component/normalBtnTable.vue

@@ -37,255 +37,254 @@
 </template>
 
 <script lang="ts" name="system-user" setup>
-//ts语法
-import { ref, provide, reactive, toRaw, defineExpose } from 'vue';
-import { BasicTable, TableAction } from '/@/components/Table';
-import { useModal } from '/@/components/Modal';
-import DeviceModal from './DeviceModal.vue';
-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-import { useListPage } from '/@/hooks/system/useListPage';
+  //ts语法
+  import { ref, reactive, toRaw } from 'vue';
+  import { BasicTable } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import DeviceModal from './DeviceModal.vue';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { useListPage } from '/@/hooks/system/useListPage';
 
-const props = defineProps({
-  columnsType: {
-    type: String,
-    // required: true,
-  },
-  columns: {
-    type: Array,
-    // required: true,
-    default: () => [],
-  },
-  formSchema: {
-    type: Array,
-    required: true,
-  },
-  list: {
-    type: Function,
-    required: true,
-  },
-  deleteById: {
-    type: Function,
-    required: true,
-  },
-  saveOrUpdate: {
-    type: Function,
-    required: true,
-  },
-  showTab: {
-    type: Boolean,
-    default: false,
-  },
-  designScope: {
-    type: String,
-  },
-  title: {
-    type: String,
-  },
-  deviceType: {
-    type: String,
-  },
-});
-const isAddorEdit=ref('')
-const emit = defineEmits(['submitSuccess']);
-const isUpdate = ref(false);
-//lxh
-let dictId = ref(null);
-const record = reactive({});
+  const props = defineProps({
+    columnsType: {
+      type: String,
+      // required: true,
+    },
+    columns: {
+      type: Array,
+      // required: true,
+      default: () => [],
+    },
+    formSchema: {
+      type: Array,
+      required: true,
+    },
+    list: {
+      type: Function,
+      required: true,
+    },
+    deleteById: {
+      type: Function,
+      required: true,
+    },
+    saveOrUpdate: {
+      type: Function,
+      required: true,
+    },
+    showTab: {
+      type: Boolean,
+      default: false,
+    },
+    designScope: {
+      type: String,
+    },
+    title: {
+      type: String,
+    },
+    deviceType: {
+      type: String,
+    },
+  });
+  const isAddorEdit = ref('');
+  const emit = defineEmits(['submitSuccess']);
+  const isUpdate = ref(false);
+  //lxh
+  let dictId = ref(null);
+  const record = reactive({});
 
-// const glob = useGlobSetting();
-const [registerModal, { openModal, closeModal }] = useModal();
+  // const glob = useGlobSetting();
+  const [registerModal, { openModal, closeModal }] = useModal();
 
-const columnList = getTableHeaderColumns(props.columnsType);
+  const columnList = getTableHeaderColumns(props.columnsType);
 
-// 列表页面公共参数、方法
-const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useListPage({
-  designScope: props.designScope,
-  tableProps: {
-    title: props.title, //table标题
-    api: props.list, //api请求
-    columns: props.columns.length > 0 ? (props.columns as any[]) : columnList, //列信息
-    showTableSetting: false,
-    // size: 'small',
-    // bordered: false,
-    formConfig: {
-      //表单配置
-      // labelWidth: 100,
-      labelAlign: 'left',
-      labelCol: {
-        xs: 24,
-        sm: 24,
-        md: 24,
-        lg: 9,
-        xl: 7,
-        xxl: 5,
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useListPage({
+    designScope: props.designScope,
+    tableProps: {
+      title: props.title, //table标题
+      api: props.list, //api请求
+      columns: props.columns.length > 0 ? (props.columns as any[]) : columnList, //列信息
+      showTableSetting: false,
+      // size: 'small',
+      // bordered: false,
+      formConfig: {
+        //表单配置
+        // labelWidth: 100,
+        labelAlign: 'left',
+        labelCol: {
+          xs: 24,
+          sm: 24,
+          md: 24,
+          lg: 9,
+          xl: 7,
+          xxl: 5,
+        },
+        schemas: props.searchFormSchema as any[],
+        showActionButtonGroup: false,
+      },
+      striped: true, //斑马纹
+      showIndexColumn: false, //是否显示序号列
+      actionColumn: {
+        //操作列配置
+        width: 180,
+      },
+      beforeFetch: (params) => {
+        return Object.assign({ column: 'createTime', order: 'desc' }, params);
       },
-      schemas: props.searchFormSchema as any[],
-      showActionButtonGroup: false,
     },
-    striped: true, //斑马纹
-    showIndexColumn: false, //是否显示序号列
-    actionColumn: {
-      //操作列配置
-      width: 180,
+    exportConfig: {
+      name: props.title,
+      url: props.getExportUrl,
     },
-    beforeFetch: (params) => {
-      return Object.assign({ column: 'createTime', order: 'desc' }, params);
+    importConfig: {
+      url: props.getImportUrl,
     },
-  },
-  exportConfig: {
-    name: props.title,
-    url: props.getExportUrl,
-  },
-  importConfig: {
-    url: props.getImportUrl,
-  },
-});
+  });
 
-//注册table数据
-const [registerTable, { reload }] = tableContext;
+  //注册table数据
+  const [registerTable, { reload }] = tableContext;
 
-const saveOrUpdateHandler = async (params) => {
-  if (!params['description']) params['description'] = '';
-  Object.assign(params, { dictId: dictId.value });
-  try {
-    await props.saveOrUpdate(params, isUpdate.value);
-    !props.showTab ? closeModal() : '';
-    await doRequest(props.list, { confirm: false });
-    // 清除数据
+  const saveOrUpdateHandler = async (params) => {
+    if (!params['description']) params['description'] = '';
+    Object.assign(params, { dictId: dictId.value });
+    try {
+      await props.saveOrUpdate(params, isUpdate.value);
+      !props.showTab ? closeModal() : '';
+      await doRequest(props.list, { confirm: false });
+      // 清除数据
+      dictId.value = null;
+    } catch (error) {
+      message.error('保存失败，请联系管理员');
+    }
+  };
+
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
     dictId.value = null;
-  } catch (error) {
-    message.error('保存失败，请联系管理员');
+    isAddorEdit.value = 'add';
+    for (let key in record) {
+      delete record[key];
+    }
+    isUpdate.value = false;
+    openModal(true, { addParent: true });
   }
-
-};
-
-/**
- * 新增事件
- */
-function handleAdd() {
-  dictId.value = null;
-   isAddorEdit.value='add'
-  for (let key in record) {
-    delete record[key];
+  /**
+   * 新增下级
+   */
+  function handleAdds(data) {
+    isAddorEdit.value = 'add';
+    dictId.value = data.subDictId;
+    for (let key in record) {
+      delete record[key];
+    }
+    isUpdate.value = false;
+    openModal(true, { addParent: false });
   }
-  isUpdate.value = false;
-  openModal(true, { addParent: true });
-}
-/**
- * 新增下级
- */
-function handleAdds(data) {
-  isAddorEdit.value='add'
-  dictId.value = data.subDictId;
-  for (let key in record) {
-    delete record[key];
+  /**
+   * 编辑事件
+   */
+  function handleEdit(data) {
+    isUpdate.value = true;
+    isAddorEdit.value = 'edit';
+    dictId.value = data.dictId;
+    Object.assign(record, toRaw(data));
+    openModal(true, {
+      record,
+    });
   }
-  isUpdate.value = false;
-  openModal(true, { addParent: false });
-}
-/**
- * 编辑事件
- */
-function handleEdit(data) {
-  isUpdate.value = true;
-  isAddorEdit.value='edit'
-  dictId.value = data.dictId;
-  Object.assign(record, toRaw(data));
-  openModal(true, {
-    record,
-  });
-}
 
-/**
- * 删除事件
- */
-async function handleDelete(record) {
-  await props.deleteById({ id: record.id }, reload);
-}
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await props.deleteById({ id: record.id }, reload);
+  }
 
-/**
- * 批量删除事件
- */
-async function batchHandleDelete() {
-  doRequest(() => props.batchDelete({ ids: selectedRowKeys.value }));
-}
-/**
- * 查看
- */
-// function handleDetail(record) {
-//   iframeUrl.value = `${glob.uploadUrl}/sys/annountCement/show/${record.id}?token=${getToken()}`;
-//   openDetail(true);
-// }
-/**
- * 操作列定义
- * @param record
- */
-function getActions(record) {
-  return [
-    {
-      label: '编辑',
-      onClick: handleEdit.bind(null, record),
-    },
-    {
-      label: '新增下级',
-      onClick: handleAdds.bind(null, record),
-    },
-    {
-      label: '删除',
-      popConfirm: {
-        title: '是否确认删除',
-        confirm: handleDelete.bind(null, record.id),
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    doRequest(() => props.batchDelete({ ids: selectedRowKeys.value }));
+  }
+  /**
+   * 查看
+   */
+  // function handleDetail(record) {
+  //   iframeUrl.value = `${glob.uploadUrl}/sys/annountCement/show/${record.id}?token=${getToken()}`;
+  //   openDetail(true);
+  // }
+  /**
+   * 操作列定义
+   * @param record
+   */
+  function getActions(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
       },
-    },
-    // {
-    //   label: '查看',
-    //   onClick: handleDetail.bind(null, record),
-    // },
-  ];
-}
-/**
- * 下拉操作栏
- */
-function getDropDownAction(record) {
-  return [
-    // {
-    //   label: '删除',
-    //   popConfirm: {
-    //     title: '是否确认删除',
-    //     confirm: handleDelete.bind(null, record),
-    //   },
-    // },
-    // {
-    //   label: '查看',
-    //   onClick: handleDetail.bind(null, record),
-    // },
-  ];
-}
-defineExpose({
-  doRequest,
-});
+      {
+        label: '新增下级',
+        onClick: handleAdds.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record.id),
+        },
+      },
+      // {
+      //   label: '查看',
+      //   onClick: handleDetail.bind(null, record),
+      // },
+    ];
+  }
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record) {
+    return [
+      // {
+      //   label: '删除',
+      //   popConfirm: {
+      //     title: '是否确认删除',
+      //     confirm: handleDelete.bind(null, record),
+      //   },
+      // },
+      // {
+      //   label: '查看',
+      //   onClick: handleDetail.bind(null, record),
+      // },
+    ];
+  }
+  defineExpose({
+    doRequest,
+  });
 </script>
 
 <style scoped lang="less">
-@ventSpace: zxm;
+  @ventSpace: zxm;
 
-@vent-table-no-hover: #00bfff10;
+  @vent-table-no-hover: #00bfff10;
 
-:deep(.@{ventSpace}-table-cell-row-hover) {
-  background: #264d8833 !important;
-}
+  :deep(.@{ventSpace}-table-cell-row-hover) {
+    background: #264d8833 !important;
+  }
 
-:deep(.@{ventSpace}-table-row-selected) {
-  background: #268bc522 !important;
-}
+  :deep(.@{ventSpace}-table-row-selected) {
+    background: #268bc522 !important;
+  }
 
-:deep(.@{ventSpace}-table-tbody > tr > td) {
-  background-color: #0dc3ff05;
-}
+  :deep(.@{ventSpace}-table-tbody > tr > td) {
+    background-color: #0dc3ff05;
+  }
 
-:deep(.jeecg-basic-table-row__striped) {
-  td {
-    background-color: @vent-table-no-hover !important;
+  :deep(.jeecg-basic-table-row__striped) {
+    td {
+      background-color: @vent-table-no-hover !important;
+    }
   }
-}
 </style>

src/views/vent/gas/components/list/index.vue

@@ -25,7 +25,7 @@
 
 <script setup lang="ts" name="gas-pump-monitor">
   // 该组件主要用于常见布局、样式的整合，同时提供slot以供更灵活的使用
-  import { computed, defineProps } from 'vue';
+  import { computed } from 'vue';
   import { Row, Col } from 'ant-design-vue';
   import ListItem from './listItem.vue';
   import ListTitle from './listTitle.vue';

src/views/vent/gas/gasAnalysis/components/echartBox.vue

@@ -1,219 +1,230 @@
 <template>
-    <div class="echartBar">
-        <div class="bar" ref="bar"></div>
-    </div>
+  <div class="echartBar">
+    <div class="bar" ref="bar"></div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { defineProps, ref, nextTick, reactive, watch, onMounted } from 'vue';
-import * as echarts from 'echarts';
+  import { ref, nextTick, reactive, watch, onMounted } from 'vue';
+  import * as echarts from 'echarts';
 
-let props = defineProps({
+  let props = defineProps({
     gridV: {
-        type: Object,
-        default: () => {
-            return {
-                left: '2%',
-                right: '4%',
-                bottom: '14%',
-                top: '16%',
-                containLabel: true
-            }
-        }
+      type: Object,
+      default: () => {
+        return {
+          left: '2%',
+          right: '4%',
+          bottom: '14%',
+          top: '16%',
+          containLabel: true,
+        };
+      },
     },
     legendV: {
-        type: Object,
-        default: () => {
-            return {}
-        }
+      type: Object,
+      default: () => {
+        return {};
+      },
     },
     xData: {
-        type: Array,
-        default: () => {
-            return []
-        }
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
     maxY: {
-        type: String,
-        default: '100'
+      type: String,
+      default: '100',
     },
     datazoomShow: {
-        type: Boolean,
-        default: false,
+      type: Boolean,
+      default: false,
     },
     yData1: {
-        type: Array,
-        default: () => {
-            return []
-        }
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
     yData2: {
-        type: Array,
-        default: () => {
-            return []
-        }
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
     typeV: {
-        type: String,
-        default: 'bar',
-    }
-});
-//获取dom元素节点
-let bar = ref<any>();
-let legendD = reactive({})
-function getOption() {
+      type: String,
+      default: 'bar',
+    },
+  });
+  //获取dom元素节点
+  let bar = ref<any>();
+  let legendD = reactive({});
+  function getOption() {
     nextTick(() => {
-        let myChart = echarts.init(bar.value);
-        let option = {
-            tooltip: {
-                trigger: 'item',
-                backgroundColor: 'rgba(0, 0, 0, .6)',
-                textStyle: {
-                    color: '#fff',
-                    fontSize: 12,
-                },
+      let myChart = echarts.init(bar.value);
+      let option = {
+        tooltip: {
+          trigger: 'item',
+          backgroundColor: 'rgba(0, 0, 0, .6)',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12,
+          },
+        },
+        grid: props.gridV,
+        legend: legendD || {},
+        xAxis: {
+          type: 'category',
+          data: props.xData || [],
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(36, 71, 76,1)',
             },
-            grid: props.gridV,
-            legend: legendD || {},
-            xAxis: {
-                type: 'category',
-                data: props.xData || [],
-                axisLine: {
-                    lineStyle: {
-                        color: 'rgba(36, 71, 76,1)'
-
-                    }
-                },
-                axisLabel: {
-                    interval: 'auto',
-                    fontSize: 14,
-                    rotate: 0,
-                    textStyle: {
-                        color: '#fff',
-                        fontFamily: 'Microsoft YaHei'
-                    }
-                },
+          },
+          axisLabel: {
+            interval: 'auto',
+            fontSize: 14,
+            rotate: 0,
+            textStyle: {
+              color: '#fff',
+              fontFamily: 'Microsoft YaHei',
             },
+          },
+        },
 
-            yAxis: {
-                type: 'value',
-                max: props.maxY,
-                axisLine: {
-                    show: false,
-                    lineStyle: {
-                        color: 'white'
-                    }
-                },
-                splitLine: {
-                    show: true,
-                    lineStyle: {
-                        color: 'rgba(36, 71, 76,.6)'
-                    }
-                },
-                axisLabel: {
-                    textStyle: {
-                        color: '#fff',
-                    },
-                    formatter: '{value}',
-                },
+        yAxis: {
+          type: 'value',
+          max: props.maxY,
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: 'white',
             },
-            // "dataZoom": [{
-            //     "show": props.datazoomShow,
-            //     "height": 12,
-            //     "xAxisIndex": [
-            //         0
-            //     ],
-            //     bottom: '8%',
-            //     "start": 10,
-            //     "end": 90,
-            //     handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
-            //     handleSize: '110%',
-            //     handleStyle: {
-            //         color: "#d3dee5",
-
-            //     },
-            //     textStyle: {
-            //         color: "#fff"
-            //     },
-            //     borderColor: "#90979c"
-            // }, {
-            //     "type": "inside",
-            //     "show": true,
-            //     "height": 15,
-            //     "start": 1,
-            //     "end": 35
-            // }],
-            series: [{
-                name: legendD['data'][0],
-                type: props.typeV || '',
-                barWidth: '10%',
-                itemStyle: {
-                    normal: {
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                            offset: 0,
-                            color: '#fccb05'
-                        }, {
-                            offset: 1,
-                            color: '#f5804d'
-                        }]),
-                        barBorderRadius: 12,
-                    },
-                },
-                data: props.yData1 || []
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(36, 71, 76,.6)',
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#fff',
             },
-            {
-                name: legendD['data'][1],
-                type: props.typeV || '',
-                barWidth: '10%',
-                itemStyle: {
-                    normal: {
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                            offset: 0,
-                            color: '#8bd46e'
-                        }, {
-                            offset: 1,
-                            color: '#09bcb7'
-                        }]),
-                        barBorderRadius: 12,
-                    }
+            formatter: '{value}',
+          },
+        },
+        // "dataZoom": [{
+        //     "show": props.datazoomShow,
+        //     "height": 12,
+        //     "xAxisIndex": [
+        //         0
+        //     ],
+        //     bottom: '8%',
+        //     "start": 10,
+        //     "end": 90,
+        //     handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+        //     handleSize: '110%',
+        //     handleStyle: {
+        //         color: "#d3dee5",
 
-                },
-                data: props.yData2 || []
+        //     },
+        //     textStyle: {
+        //         color: "#fff"
+        //     },
+        //     borderColor: "#90979c"
+        // }, {
+        //     "type": "inside",
+        //     "show": true,
+        //     "height": 15,
+        //     "start": 1,
+        //     "end": 35
+        // }],
+        series: [
+          {
+            name: legendD['data'][0],
+            type: props.typeV || '',
+            barWidth: '10%',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#fccb05',
+                  },
+                  {
+                    offset: 1,
+                    color: '#f5804d',
+                  },
+                ]),
+                barBorderRadius: 12,
+              },
             },
-            ]
-        };
-        myChart.setOption(option);
-        window.onresize = function () {
-            myChart.resize();
-        };
+            data: props.yData1 || [],
+          },
+          {
+            name: legendD['data'][1],
+            type: props.typeV || '',
+            barWidth: '10%',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#8bd46e',
+                  },
+                  {
+                    offset: 1,
+                    color: '#09bcb7',
+                  },
+                ]),
+                barBorderRadius: 12,
+              },
+            },
+            data: props.yData2 || [],
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
     });
-}
+  }
 
-watch(() => props.legendV, (newV, oldV) => {
-    if (JSON.stringify(newV) != '{}') {
-        legendD = Object.assign({}, newV)
-        getOption()
-        console.log(legendD, 'legendD')
+  watch(
+    () => props.legendV,
+    (newV, oldV) => {
+      if (JSON.stringify(newV) != '{}') {
+        legendD = Object.assign({}, newV);
+        getOption();
+        console.log(legendD, 'legendD');
+      }
+    },
+    {
+      immediate: true,
     }
-}, {
-    immediate: true,
-})
-watch(() => props.yData1, (newY, oldY) => {
-    getOption()
-}, { immediate: true })
-onMounted(() => {
-
-})
+  );
+  watch(
+    () => props.yData1,
+    (newY, oldY) => {
+      getOption();
+    },
+    { immediate: true }
+  );
+  onMounted(() => {});
 </script>
 
 <style scoped lang="less">
-.echartBar {
+  .echartBar {
     width: 100%;
     height: 100%;
 
     .bar {
-        width: 100%;
-        height: 100%;
+      width: 100%;
+      height: 100%;
     }
-}
-</style>
+  }
+</style>

src/views/vent/gas/gasHome/components/gasMonitor.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script setup lang="ts" name="gas-pump-monitor">
-  import { onMounted, defineProps, computed, ref } from 'vue';
+  import { onMounted, computed, ref } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import ListItem from '@/views/vent/gas/components/list/listItem.vue';
   import { sysInfo, gasPump, caikongqu } from '../gasHome.data';

src/views/vent/gas/gasPumpMonitor/components/monitor.vue

@@ -55,7 +55,7 @@
 
 <script setup lang="ts" name="gas-pump-monitor">
   import _ from 'lodash-es';
-  import { ref, defineProps, computed } from 'vue';
+  import { ref, computed } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import List from '@/views/vent/gas/components/list/index.vue';
   import BaseTab from '@/views/vent/gas/components/tab/baseTab.vue';

src/views/vent/gas/gasPumpMonitor/components/monitorChart.vue

@@ -25,7 +25,7 @@
   import { LimitedArray } from '/@/utils/limitedArray';
   import { onMounted, onUnmounted, ref } from 'vue';
   import { monitorCharts } from '../gasPumpMonitor.data';
-  import _ from 'lodash';
+  import { get } from 'lodash-es';
 
   const props = defineProps({
     device: {
@@ -48,7 +48,7 @@
 
   onMounted(() => {
     timer = setInterval(() => {
-      const data = Object.assign({ ...props.device }, _.get(props.device, 'datalist[0]'));
+      const data = Object.assign({ ...props.device }, get(props.device, 'datalist[0]'));
       chartData.value.push({
         ...data,
         date: new Date().getSeconds().toString(),

src/views/vent/home/billboard/components/CollapseTable.vue

@@ -26,8 +26,8 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, defineProps, ref } from 'vue';
-  import _ from 'lodash';
+  import { computed, ref } from 'vue';
+  import { get as GET } from 'lodash-es';
   import { Collapse, CollapsePanel } from 'ant-design-vue';
 
   let props = withDefaults(
@@ -60,7 +60,7 @@
   });
 
   function get(o, p) {
-    const d = _.get(o, p, props.defaultValue);
+    const d = GET(o, p, props.defaultValue);
     return d === null ? props.defaultValue : d;
   }
 </script>

src/views/vent/home/billboard/components/CommonTable.vue

@@ -17,7 +17,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, defineProps } from 'vue';
+  import { computed } from 'vue';
   import _ from 'lodash-es';
 
   let props = withDefaults(

src/views/vent/home/billboard/utils.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { get as GET } from 'lodash-es';
 // import { BillboardType, HeaderConfig, ListConfig, TableConfig, TitleConfig } from './billboard.data';
 
 /**
@@ -6,7 +6,7 @@ import _ from 'lodash';
  */
 export function get(object?: Object, path?: Array<string> | string, defaultValue: any = '/') {
   if (!object || path === undefined) return defaultValue;
-  const d = _.get(object, path, defaultValue);
+  const d = GET(object, path, defaultValue);
   return d === null ? defaultValue : d;
 }
 
@@ -41,13 +41,13 @@ export function get(object?: Object, path?: Array<string> | string, defaultValue
 //       config.columns.forEach((col) => {
 //         if (col._t) {
 //           const v = get(ele, col.prop);
-//           _.set(ele, col.prop, get(config.translation, v));
+//           set(ele, col.prop, get(config.translation, v));
 //         }
 //       });
 //       config.collapses.forEach((col) => {
 //         if (col._t) {
 //           const v = get(ele, col.prop);
-//           _.set(ele, col.prop, get(config.translation, v));
+//           set(ele, col.prop, get(config.translation, v));
 //         }
 //       });
 //       res.push(ele);

src/views/vent/home/clique/components/dialog-modal.vue

@@ -86,7 +86,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive, defineProps, watch } from 'vue';
+  import { ref, reactive, watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import { useAutoLogin } from '/@/hooks/vent/useAutoLogin';
   import { getAssetURL } from '/@/utils/ui';

src/views/vent/home/clique/components/echart-scene.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { defineProps, ref, nextTick, reactive, watch } from 'vue';
+  import { ref, nextTick, reactive, watch } from 'vue';
   import * as echarts from 'echarts';
 
   let props = defineProps({

src/views/vent/home/clique/components/file-share.vue

@@ -33,7 +33,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive, watch, defineProps } from 'vue';
+  import { ref, reactive, watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import { getAssetURL } from '/@/utils/ui';
 

src/views/vent/home/clique/components/mine-wind.vue

@@ -19,7 +19,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive, watch, defineProps } from 'vue';
+  import { ref, reactive, watch } from 'vue';
 
   let props = defineProps({
     airKjStatus: {

src/views/vent/home/clique/components/risk-warn.vue

@@ -108,7 +108,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, defineProps, watch } from 'vue';
+  import { ref, reactive, onMounted, watch } from 'vue';
   import { rainBg } from '/@/utils/ui.js';
 
   let props = defineProps({

src/views/vent/home/clique/components/scene-key.vue

@@ -33,10 +33,9 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, defineProps, watch } from 'vue';
+  import { ref, reactive, watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import echartScene from '../components/echart-scene.vue';
-  import _ from 'lodash';
 
   let props = defineProps({
     compositeData: {

src/views/vent/home/clique/components/wind-road-middle.vue

@@ -22,7 +22,7 @@
 </template>
 <script lang="ts" setup>
   // 该组件和wind-road组件基本上一摸一样，只不过该组件是适配首页中间的卡片而做的
-  import { ref, reactive, nextTick, defineProps, watch } from 'vue';
+  import { ref, reactive, nextTick, watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import * as echarts from 'echarts';
 

src/views/vent/home/clique/components/wind-road.vue

@@ -21,427 +21,427 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, nextTick, defineProps, watch } from 'vue';
-import { SvgIcon } from '/@/components/Icon';
-import * as echarts from 'echarts';
+  import { ref, reactive, nextTick, watch } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import * as echarts from 'echarts';
 
-let props = defineProps({
-  roadData: {
-    type: Object,
-    default: () => {
-      return {};
+  let props = defineProps({
+    roadData: {
+      type: Object,
+      default: () => {
+        return {};
+      },
     },
-  },
-});
+  });
 
-let roadTitle = ref('通风巷道长度统计');
-let road = ref(); //获取Dom节点
-let roadDatas = reactive({
-  label: '通风巷道总长度',
-  value: '',
-});
-let maxY = ref<any>(0);
-let minY=ref<any>(0)
+  let roadTitle = ref('通风巷道长度统计');
+  let road = ref(); //获取Dom节点
+  let roadDatas = reactive({
+    label: '通风巷道总长度',
+    value: '',
+  });
+  let maxY = ref<any>(0);
+  let minY = ref<any>(0);
 
-// let xData = reactive(['宝德', '榆家梁', '锦界', '大柳塔', '哈拉沟']);
-let xData = ref<any[]>([]);
-// var yData = reactive([200, 100, 200, 200, 100]);
-// var maxData = reactive([300, 200, 300, 300, 200]);
-let yData = ref<any[]>([]);
-let maxData = reactive<any[]>([]);
+  // let xData = reactive(['宝德', '榆家梁', '锦界', '大柳塔', '哈拉沟']);
+  let xData = ref<any[]>([]);
+  // var yData = reactive([200, 100, 200, 200, 100]);
+  // var maxData = reactive([300, 200, 300, 300, 200]);
+  let yData = ref<any[]>([]);
+  let maxData = reactive<any[]>([]);
 
-function getOption() {
-  nextTick(() => {
-    const myChart = echarts.init(road.value);
-    let color = ['#FF9A22', '#FFD56E', '#00EC28', '#5DF076', '#12B9DB', '#6F8EF2'];
-    let option = {
-      grid: {
-        top: '14%',
-        left: '2%',
-        bottom: '4%',
-        right: '2%',
-        containLabel: true,
-      },
-      xAxis: {
-        data: xData.value,
-        axisTick: {
-          show: false,
+  function getOption() {
+    nextTick(() => {
+      const myChart = echarts.init(road.value);
+      let color = ['#FF9A22', '#FFD56E', '#00EC28', '#5DF076', '#12B9DB', '#6F8EF2'];
+      let option = {
+        grid: {
+          top: '14%',
+          left: '2%',
+          bottom: '4%',
+          right: '2%',
+          containLabel: true,
         },
+        xAxis: {
+          data: xData.value,
+          axisTick: {
+            show: false,
+          },
 
-        axisLine: {
-          lineStyle: {
-            color: 'rgba(187, 187, 187,.2)',
-            type: 'dashed',
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(187, 187, 187,.2)',
+              type: 'dashed',
+            },
           },
-        },
-        splitLine: {
-          show: false,
-        },
-        axisLabel: {
-          interval: 0,
-          textStyle: {
-            color: '#fff',
-            fontSize: 14,
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#fff',
+              fontSize: 14,
+            },
+            margin: 20, //刻度标签与轴线之间的距离。
           },
-          margin: 20, //刻度标签与轴线之间的距离。
         },
-      },
 
-      yAxis: {
-        max: Math.ceil(roadDatas.value + 1000),
-        name: '长度(km)',
-        nameTextStyle: {
-          color: '#3df6ff',
-          fontSize: 12,
-          lineHeight: 20,
-        },
-        splitLine: {
-          lineStyle: {
-            color: 'rgba(187, 187, 187,.2)',
-            type: 'dashed',
+        yAxis: {
+          max: Math.ceil(roadDatas.value + 1000),
+          name: '长度(km)',
+          nameTextStyle: {
+            color: '#3df6ff',
+            fontSize: 12,
+            lineHeight: 20,
           },
-        },
-        axisTick: {
-          show: false,
-        },
-        axisLine: {
-          show: false,
-        },
-        axisLabel: {
-          textStyle: {
-            color: '#fff',
-            fontSize: 14,
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(187, 187, 187,.2)',
+              type: 'dashed',
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#fff',
+              fontSize: 14,
+            },
           },
         },
-      },
 
-      series: [
-        {
-          //三个最低下的圆片
-          name: '',
-          type: 'pictorialBar',
-          symbolSize: [30, 10],
-          symbolOffset: [0, 7],
-          z: 12,
-          itemStyle: {
-            opacity: 1,
-            color: function (params) {
-              console.log(params, 'index-----11111111111111111');
-              // var a = params.name.slice(0, 2);
+        series: [
+          {
+            //三个最低下的圆片
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [30, 10],
+            symbolOffset: [0, 7],
+            z: 12,
+            itemStyle: {
+              opacity: 1,
+              color: function (params) {
+                console.log(params, 'index-----11111111111111111');
+                // var a = params.name.slice(0, 2);
 
-              return new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  {
-                    offset: 0,
-                    color: color[params.seriesIndex], // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: color[params.seriesIndex + 1], // 100% 处的颜色
-                  },
-                ],
-                false
-              );
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: color[params.seriesIndex], // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: color[params.seriesIndex + 1], // 100% 处的颜色
+                    },
+                  ],
+                  false
+                );
+              },
             },
+            data: [1, 1, 1, 1, 1],
           },
-          data: [1, 1, 1, 1, 1],
-        },
 
-        //下半截柱状图
-        {
-          name: '2020',
-          type: 'bar',
-          barWidth: 30,
-          barGap: '-100%',
-          itemStyle: {
-            //lenged文本
-            opacity: 0.7,
-            color: function (params) {
-              console.log(params, 'index-----222222222222222');
-              return new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  {
-                    offset: 0,
-                    color: color[params.dataIndex], // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: color[params.dataIndex + 1], // 100% 处的颜色
-                  },
-                ],
-                false
-              );
-              // var a = params.name.slice(0, 2);
-              // if (a === '全矿') {
-              //   return new echarts.graphic.LinearGradient(
-              //     0,
-              //     0,
-              //     0,
-              //     1,
-              //     [
-              //       {
-              //         offset: 0,
-              //         color: '#FF9A22', // 0% 处的颜色
-              //       },
-              //       {
-              //         offset: 1,
-              //         color: '#FFD56E', // 100% 处的颜色
-              //       },
-              //     ],
-              //     false
-              //   );
-              // }
-              // // else if (a === '榆家' || a == '大柳') {
-              // //   return new echarts.graphic.LinearGradient(
-              // //     0,
-              // //     0,
-              // //     0,
-              // //     1,
-              // //     [
-              // //       {
-              // //         offset: 0,
-              // //         color: '#00EC28', // 0% 处的颜色
-              // //       },
-              // //       {
-              // //         offset: 1,
-              // //         color: '#5DF076', // 100% 处的颜色
-              // //       },
-              // //     ],
-              // //     false
-              // //   );
-              // // }
-              // // else if (a === '锦界' || a == '哈拉') {
-              // //   return new echarts.graphic.LinearGradient(
-              // //     0,
-              // //     0,
-              // //     0,
-              // //     1,
-              // //     [
-              // //       {
-              // //         offset: 0,
-              // //         color: '#12B9DB', // 0% 处的颜色
-              // //       },
-              // //       {
-              // //         offset: 1,
-              // //         color: '#6F8EF2', // 100% 处的颜色
-              // //       },
-              // //     ],
-              // //     false
-              // //   );
-              // // }
+          //下半截柱状图
+          {
+            name: '2020',
+            type: 'bar',
+            barWidth: 30,
+            barGap: '-100%',
+            itemStyle: {
+              //lenged文本
+              opacity: 0.7,
+              color: function (params) {
+                console.log(params, 'index-----222222222222222');
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: color[params.dataIndex], // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: color[params.dataIndex + 1], // 100% 处的颜色
+                    },
+                  ],
+                  false
+                );
+                // var a = params.name.slice(0, 2);
+                // if (a === '全矿') {
+                //   return new echarts.graphic.LinearGradient(
+                //     0,
+                //     0,
+                //     0,
+                //     1,
+                //     [
+                //       {
+                //         offset: 0,
+                //         color: '#FF9A22', // 0% 处的颜色
+                //       },
+                //       {
+                //         offset: 1,
+                //         color: '#FFD56E', // 100% 处的颜色
+                //       },
+                //     ],
+                //     false
+                //   );
+                // }
+                // // else if (a === '榆家' || a == '大柳') {
+                // //   return new echarts.graphic.LinearGradient(
+                // //     0,
+                // //     0,
+                // //     0,
+                // //     1,
+                // //     [
+                // //       {
+                // //         offset: 0,
+                // //         color: '#00EC28', // 0% 处的颜色
+                // //       },
+                // //       {
+                // //         offset: 1,
+                // //         color: '#5DF076', // 100% 处的颜色
+                // //       },
+                // //     ],
+                // //     false
+                // //   );
+                // // }
+                // // else if (a === '锦界' || a == '哈拉') {
+                // //   return new echarts.graphic.LinearGradient(
+                // //     0,
+                // //     0,
+                // //     0,
+                // //     1,
+                // //     [
+                // //       {
+                // //         offset: 0,
+                // //         color: '#12B9DB', // 0% 处的颜色
+                // //       },
+                // //       {
+                // //         offset: 1,
+                // //         color: '#6F8EF2', // 100% 处的颜色
+                // //       },
+                // //     ],
+                // //     false
+                // //   );
+                // // }
+              },
             },
+            data: yData.value,
           },
-          data: yData.value,
-        },
 
-        {
-          // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
-          type: 'bar',
-          barWidth: 30,
-          barGap: '-100%',
-          stack: '广告',
-          itemStyle: {
-            color: 'transparent',
+          {
+            // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
+            type: 'bar',
+            barWidth: 30,
+            barGap: '-100%',
+            stack: '广告',
+            itemStyle: {
+              color: 'transparent',
+            },
+            data: maxData,
           },
-          data: maxData,
-        },
 
-        {
-          name: '', //头部
-          type: 'pictorialBar',
-          symbolSize: [30, 10],
-          symbolOffset: [0, -7],
-          z: 12,
-          symbolPosition: 'end',
-          itemStyle: {
-            color: '#163F7A',
-            opacity: 1,
+          {
+            name: '', //头部
+            type: 'pictorialBar',
+            symbolSize: [30, 10],
+            symbolOffset: [0, -7],
+            z: 12,
+            symbolPosition: 'end',
+            itemStyle: {
+              color: '#163F7A',
+              opacity: 1,
+            },
+            data: maxData,
           },
-          data: maxData,
-        },
 
-        {
-          name: '',
-          type: 'pictorialBar',
-          symbolSize: [30, 10],
-          symbolOffset: [0, -7],
-          z: 12,
-          itemStyle: {
-            opacity: 1,
-            color: function (params) {
-              console.log(params, 'index-----333333333333333');
-              return new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  {
-                    offset: 0,
-                    color: color[params.dataIndex], // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: color[params.dataIndex + 1], // 100% 处的颜色
-                  },
-                ],
-                false
-              );
+          {
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [30, 10],
+            symbolOffset: [0, -7],
+            z: 12,
+            itemStyle: {
+              opacity: 1,
+              color: function (params) {
+                console.log(params, 'index-----333333333333333');
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: color[params.dataIndex], // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: color[params.dataIndex + 1], // 100% 处的颜色
+                    },
+                  ],
+                  false
+                );
+              },
             },
-          },
-          symbolPosition: 'end',
+            symbolPosition: 'end',
 
-          label: {
-            normal: {
-              show: true,
-              position: 'top',
-              fontSize: 12,
-              // fontWeight: 'bold',
-              color: '#fff',
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                fontSize: 12,
+                // fontWeight: 'bold',
+                color: '#fff',
+              },
             },
+            data: yData.value,
           },
-          data: yData.value,
-        },
 
-        {
-          name: '2019',
-          type: 'bar',
-          barWidth: 30,
-          barGap: '-100%',
-          z: 0,
-          itemStyle: {
-            color: '#163F7A',
-            opacity: 0.7,
-          },
+          {
+            name: '2019',
+            type: 'bar',
+            barWidth: 30,
+            barGap: '-100%',
+            z: 0,
+            itemStyle: {
+              color: '#163F7A',
+              opacity: 0.7,
+            },
 
-          data: maxData,
-        },
-      ],
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
+            data: maxData,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
 
-watch(
-  () => props.roadData,
-  (newR, oldR) => {
-    console.log(newR, '通风巷道长度数据-------');
-    if (JSON.stringify(newR) != '{}') {
-      maxData.length = 0;
-      roadDatas.value = newR.totallength;
-      maxY.value = (Number(roadDatas.value)*1.6).toFixed(0);
-      minY.value = (Number(roadDatas.value)*0.7).toFixed(0);
-      // if (maxY.value.length < 2 && Number(maxY.value) < 1) {
-      //   maxY.value = 1
-      // } else if (maxY.value.length < 2 && Number(maxY.value) >= 1) {
-      //   maxY.value = 10
-      // } else if (maxY.value.length < 3) {
-      //   maxY.value = (Number(maxY.value[0]) + 1) * 10
-      // } else if (maxY.value.length < 4) {
-      //   maxY.value = (Number(maxY.value[0]) + 1) * 100
-      // } else if (maxY.value.length < 5) {
-      //   maxY.value = (Number(maxY.value[0]) + 1) * 1000
-      // } else if (maxY.value.length < 6) {
-      //   maxY.value = (Number(maxY.value[0]) + 1) * 10000
-      // }
-      xData.value = newR.data1;
-      yData.value = newR.data;
-      yData.value.forEach((el) => {
-        maxData.push(el + 200);
-      });
-      getOption();
+  watch(
+    () => props.roadData,
+    (newR, oldR) => {
+      console.log(newR, '通风巷道长度数据-------');
+      if (JSON.stringify(newR) != '{}') {
+        maxData.length = 0;
+        roadDatas.value = newR.totallength;
+        maxY.value = (Number(roadDatas.value) * 1.6).toFixed(0);
+        minY.value = (Number(roadDatas.value) * 0.7).toFixed(0);
+        // if (maxY.value.length < 2 && Number(maxY.value) < 1) {
+        //   maxY.value = 1
+        // } else if (maxY.value.length < 2 && Number(maxY.value) >= 1) {
+        //   maxY.value = 10
+        // } else if (maxY.value.length < 3) {
+        //   maxY.value = (Number(maxY.value[0]) + 1) * 10
+        // } else if (maxY.value.length < 4) {
+        //   maxY.value = (Number(maxY.value[0]) + 1) * 100
+        // } else if (maxY.value.length < 5) {
+        //   maxY.value = (Number(maxY.value[0]) + 1) * 1000
+        // } else if (maxY.value.length < 6) {
+        //   maxY.value = (Number(maxY.value[0]) + 1) * 10000
+        // }
+        xData.value = newR.data1;
+        yData.value = newR.data;
+        yData.value.forEach((el) => {
+          maxData.push(el + 200);
+        });
+        getOption();
+      }
+    },
+    {
+      immediate: true,
+      deep: true,
     }
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-);
+  );
 </script>
 <style lang="less" scoped>
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../assets/font/douyuFont.otf');
-}
-
-.windRoad {
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  .road-title {
-    position: absolute;
-    left: 50px;
-    top: 10px;
-    color: #fff;
+  @font-face {
     font-family: 'douyuFont';
-    font-size: 14px;
+    src: url('../../../../assets/font/douyuFont.otf');
   }
 
-  .road-content {
-    position: relative;
+  .windRoad {
+    width: 100%;
     height: 100%;
-    padding: 52px 40px 23px 40px;
-    box-sizing: border-box;
-
-    .left-jt {
-      position: absolute;
-      top: 50%;
-      left: 18px;
-      transform: translate(0, -50%);
-    }
+    position: relative;
 
-    .right-jt {
+    .road-title {
       position: absolute;
-      top: 50%;
-      right: 18px;
-      transform: translate(0, -50%);
+      left: 50px;
+      top: 10px;
+      color: #fff;
+      font-family: 'douyuFont';
+      font-size: 14px;
     }
 
-    .road-card {
+    .road-content {
+      position: relative;
       height: 100%;
+      padding: 52px 40px 23px 40px;
+      box-sizing: border-box;
+
+      .left-jt {
+        position: absolute;
+        top: 50%;
+        left: 18px;
+        transform: translate(0, -50%);
+      }
+
+      .right-jt {
+        position: absolute;
+        top: 50%;
+        right: 18px;
+        transform: translate(0, -50%);
+      }
 
-      .head-nav {
-        height: 30px;
-        line-height: 30px;
-        padding-left: 58px;
-        box-sizing: border-box;
-        background: url('../../../../../assets/images/company/lentj.png') no-repeat center;
-        background-size: 100% 100%;
+      .road-card {
+        height: 100%;
 
-        span {
-          font-size: 14px;
+        .head-nav {
+          height: 30px;
+          line-height: 30px;
+          padding-left: 58px;
+          box-sizing: border-box;
+          background: url('../../../../../assets/images/company/lentj.png') no-repeat center;
+          background-size: 100% 100%;
 
-          &:nth-child(1) {
-            color: #fff;
-          }
+          span {
+            font-size: 14px;
 
-          &:nth-child(2) {
-            color: #3df6ff;
+            &:nth-child(1) {
+              color: #fff;
+            }
+
+            &:nth-child(2) {
+              color: #3df6ff;
+            }
           }
         }
-      }
 
-      .echart-box {
-        height: calc(100% - 30px);
+        .echart-box {
+          height: calc(100% - 30px);
 
-        .road {
-          width: 100%;
-          height: 100%;
+          .road {
+            width: 100%;
+            height: 100%;
+          }
         }
       }
     }
   }
-}
 </style>

src/views/vent/home/clique/dustComponents/dialog-modal.vue

@@ -66,7 +66,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive, defineProps, watch } from 'vue';
+  import { ref, reactive, watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import { useAutoLogin } from '/@/hooks/vent/useAutoLogin';
   import { getAssetURL } from '/@/utils/ui';

src/views/vent/home/clique/dustComponents/measure-detail.vue

@@ -56,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, defineProps, watch } from 'vue';
+  import { ref, watch } from 'vue';
   import { dustMonitorColumnTop, dustMonitorColumnBootom } from '../dust.data';
   import { ArrowRightOutlined } from '@ant-design/icons-vue';
   import { useGo } from '/@/hooks/web/usePage';

src/views/vent/home/clique/dustComponents/measure-point.vue

@@ -10,7 +10,7 @@
 </template>
 <script lang="ts" setup>
   // 该组件和wind-road组件基本上一摸一样，只不过该组件是适配首页中间的卡片而做的
-  import { ref, reactive, nextTick, defineProps, watch, onMounted } from 'vue';
+  import { ref, reactive, nextTick, watch, onMounted } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import * as echarts from 'echarts';
   import { useRouter } from 'vue-router';

src/views/vent/home/clique/dustComponents/mine-wind.vue

@@ -33,7 +33,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive, watch, defineProps, nextTick } from 'vue';
+  import { ref, reactive, watch, nextTick } from 'vue';
   import * as echarts from 'echarts';
   import { useGo } from '/@/hooks/web/usePage';
   import { ArrowRightOutlined } from '@ant-design/icons-vue';

src/views/vent/home/clique/dustComponents/risk-warn.vue

@@ -74,7 +74,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, defineProps, watch } from 'vue';
+  import { ref, reactive, onMounted, watch } from 'vue';
   import { rainBg } from '/@/utils/ui.js';
   import { ArrowRightOutlined } from '@ant-design/icons-vue';
   import { useGo } from '/@/hooks/web/usePage';

src/views/vent/home/colliery/components/EchartLineCharacter3.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
+  import { ref, reactive, onMounted, nextTick, watch } from 'vue';
   // import Utils from '@/utils/utils'
   // const echarts = require('echarts')
   import * as echarts from 'echarts';

src/views/vent/home/colliery/components/device-warn.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, defineProps, watch } from 'vue';
+  import { ref, reactive, watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import { getAssetURL } from '/@/utils/ui';
   let props = defineProps({

src/views/vent/home/colliery/components/fan-monitor.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
+  import { ref, reactive, onMounted, nextTick, watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import * as echarts from 'echarts';
   import { useGo } from '/@/hooks/web/usePage';

src/views/vent/home/colliery/components/main-monitor.vue

@@ -5,8 +5,13 @@
       <i class="icon-search">
         <SvgIcon class="icon" size="14" name="toggle" />
       </i>
-      <a-select v-model:value="searchValue" style="width: 180px; margin-right: 10px" :options="mainTypeList"
-        aria-placeholder="请选择" @change="changeSelect" />
+      <a-select
+        v-model:value="searchValue"
+        style="width: 180px; margin-right: 10px"
+        :options="mainTypeList"
+        aria-placeholder="请选择"
+        @change="changeSelect"
+      />
       <div class="status-yx">
         <div class="now-name">
           <i style="margin: 0px 5px 0px 5px">
@@ -30,451 +35,451 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
-import { SvgIcon } from '/@/components/Icon';
-import * as echarts from 'echarts';
-import { useGlobSetting } from '/@/hooks/setting';
-const { sysOrgCode } = useGlobSetting();
-let props = defineProps({
-  maindata: Array,
-});
-const emit = defineEmits(['goDetail']);
-let searchValue = ref('');
-let mainTypeList = reactive<any>([]); //下拉框
-let mainList = reactive<any[]>([]); //主风机列表
-let selectDataObj = ref({
-  dataQ: 0,
-  dataH: 0,
-});
-let maxM3 = ref(150); // 高家梁是150，其他400
-let maxMPa = ref(7000); //
-//风机启动状态
-let runStatus = ref('');
-//获取dom节点
-let main = ref<any>();
-//echart图表数据
-let echartData = reactive<any>({
-  xdata: [],
-  ydata: [],
-  ydata1: [],
-});
+  import { ref, reactive, onMounted, nextTick, watch } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import * as echarts from 'echarts';
+  import { useGlobSetting } from '/@/hooks/setting';
+  const { sysOrgCode } = useGlobSetting();
+  let props = defineProps({
+    maindata: Array,
+  });
+  const emit = defineEmits(['goDetail']);
+  let searchValue = ref('');
+  let mainTypeList = reactive<any>([]); //下拉框
+  let mainList = reactive<any[]>([]); //主风机列表
+  let selectDataObj = ref({
+    dataQ: 0,
+    dataH: 0,
+  });
+  let maxM3 = ref(150); // 高家梁是150，其他400
+  let maxMPa = ref(7000); //
+  //风机启动状态
+  let runStatus = ref('');
+  //获取dom节点
+  let main = ref<any>();
+  //echart图表数据
+  let echartData = reactive<any>({
+    xdata: [],
+    ydata: [],
+    ydata1: [],
+  });
 
-//跳转详情
-function getDetail() {
-  emit('goDetail', 'fanMain');
-}
-//选项切换
-function changeSelect(val) {
-  let objParam;
-  let objParam1;
-  searchValue.value = val;
-  const selectData = mainList.find((item) => item['deviceID'] == val);
-  if (selectData) {
-    runStatus.value =
-      selectData.readData.Fan1StartStatus && selectData.readData.Fan1StartStatus == '1'
-        ? '1#风机'
-        : selectData.readData.Fan2StartStatus && selectData.readData.Fan2StartStatus == '1'
+  //跳转详情
+  function getDetail() {
+    emit('goDetail', 'fanMain');
+  }
+  //选项切换
+  function changeSelect(val) {
+    let objParam;
+    let objParam1;
+    searchValue.value = val;
+    const selectData = mainList.find((item) => item['deviceID'] == val);
+    if (selectData) {
+      runStatus.value =
+        selectData.readData.Fan1StartStatus && selectData.readData.Fan1StartStatus == '1'
+          ? '1#风机'
+          : selectData.readData.Fan2StartStatus && selectData.readData.Fan2StartStatus == '1'
           ? '2#风机'
           : selectData.readData.Fan3StartStatus && selectData.readData.Fan3StartStatus == '1'
-            ? '3#风机'
-            : '--';
-    if (runStatus.value == '1#风机') {
-      objParam = {
-        dataQ: selectData.readData.Fan1m3 || 0,
-        dataH: Math.abs(Number(selectData.readData.Fan1FanPre || 0)),
-      };
-    } else if (runStatus.value == '2#风机') {
-      objParam = {
-        dataQ: selectData.readData.Fan2m3 || 0,
-        dataH: Math.abs(Number(selectData.readData.Fan2FanPre || 0)),
+          ? '3#风机'
+          : '--';
+      if (runStatus.value == '1#风机') {
+        objParam = {
+          dataQ: selectData.readData.Fan1m3 || 0,
+          dataH: Math.abs(Number(selectData.readData.Fan1FanPre || 0)),
+        };
+      } else if (runStatus.value == '2#风机') {
+        objParam = {
+          dataQ: selectData.readData.Fan2m3 || 0,
+          dataH: Math.abs(Number(selectData.readData.Fan2FanPre || 0)),
           // dataQ: 31248,
           // dataH:Math.abs(1973.96),
+        };
+      } else if (runStatus.value == '3#风机') {
+        objParam = {
+          dataQ: selectData.readData.Fan3m3 || 0,
+          dataH: Math.abs(Number(selectData.readData.Fan3FanPre || 0)),
+        };
+      } else {
+        objParam = {
+          dataQ: 0,
+          dataH: 0,
+        };
+      }
+
+      //  objParam = {
+      //     dataQ: selectData.readData.Fan1m3 || selectData.readData.Fan2m3 || selectData.readData.m3 || selectData.readData.Fanm3,
+      //     dataH: Math.abs(Number(selectData.readData.Fan1FanPre || selectData.readData.Fan2FanPre || selectData.readData.DataPa || selectData.readData.FanNegative || 0)),
+      //   }
+      objParam1 = {
+        dataha0: -0.056,
+        dataha1: 3.6491,
+        dataha2: 434.4,
+        dataha3: 100,
+        dataha4: -1000,
       };
-    } else if (runStatus.value == '3#风机') {
-      objParam = {
-        dataQ: selectData.readData.Fan3m3 || 0,
-        dataH: Math.abs(Number(selectData.readData.Fan3FanPre || 0)),
-      };
-    } else {
-      objParam = {
-        dataQ: 0,
-        dataH: 0,
-      };
+      setChart(objParam, objParam1);
+      getOption();
     }
-
-    //  objParam = {
-    //     dataQ: selectData.readData.Fan1m3 || selectData.readData.Fan2m3 || selectData.readData.m3 || selectData.readData.Fanm3,
-    //     dataH: Math.abs(Number(selectData.readData.Fan1FanPre || selectData.readData.Fan2FanPre || selectData.readData.DataPa || selectData.readData.FanNegative || 0)),
-    //   }
-    objParam1 = {
-      dataha0: -0.056,
-      dataha1: 3.6491,
-      dataha2: 434.4,
-      dataha3: 100,
-      dataha4: -1000,
-    };
-    setChart(objParam, objParam1);
-    getOption();
   }
-}
 
-function getOption() {
-  nextTick(() => {
-    const myChart = echarts.init(main.value);
-    let option = {
-      title: {
-        textStyle: {
-          color: '#3df6ff',
-          fontSize: 14, // 字体颜色
-        },
-        text: '',
-      },
-      grid: {
-        top: '25%',
-        left: '5%',
-        right: '19%',
-        bottom: '8%',
-        containLabel: true,
-      },
-      legend: {
-        // x:'right',
-        top: '5%',
-        textStyle: {
-          color: '#ffffff',
-          fontSize: 14, // 字体颜色
+  function getOption() {
+    nextTick(() => {
+      const myChart = echarts.init(main.value);
+      let option = {
+        title: {
+          textStyle: {
+            color: '#3df6ff',
+            fontSize: 14, // 字体颜色
+          },
+          text: '',
         },
-        data: ['风量', '负压'],
-      },
-      tooltip: {
-        backgroundColor: 'rgba(0,0,0,0.8)',
-        textStyle: {
-          color: '#3df6ff',
-          fontSize: 14, // 字体颜色
+        grid: {
+          top: '25%',
+          left: '5%',
+          right: '19%',
+          bottom: '8%',
+          containLabel: true,
         },
-        formatter: function (params, ticket, callback) {
-          // var res = '风量' + ' : ' + Math.round(params.data[0] * 60 * 10) / 10 + '(m³/min)<br/>'
-          // res = res + '&emsp;&emsp;&emsp;' + params.data[0] + '(m³/s)<br/>'
-          var res = '风量' + ' : ' + params.data[0] * 60 + '(m³/min)<br/>';
-          res = res + '&emsp;&emsp;&emsp;' + params.data[0].toFixed(2) + '(m³/s)<br/>';
-          res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>';
-          return res;
+        legend: {
+          // x:'right',
+          top: '5%',
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 14, // 字体颜色
+          },
+          data: ['风量', '负压'],
         },
-        trigger: 'item',
-      },
-      color: ['#00bb00', '#ffbb00', '#ff0000', '#0000ff'],
-      xAxis: [
-        {
-          name: '风量\r\n(m³/min)\r\n',
-          nameTextStyle: {
+        tooltip: {
+          backgroundColor: 'rgba(0,0,0,0.8)',
+          textStyle: {
             color: '#3df6ff',
-            fontSize: 12,
+            fontSize: 14, // 字体颜色
           },
-          axisLine: {
-            lineStyle: {
-              color: '#0092d5',
-              width: 1, // 这里是为了突出显示加上的
-            },
+          formatter: function (params, ticket, callback) {
+            // var res = '风量' + ' : ' + Math.round(params.data[0] * 60 * 10) / 10 + '(m³/min)<br/>'
+            // res = res + '&emsp;&emsp;&emsp;' + params.data[0] + '(m³/s)<br/>'
+            var res = '风量' + ' : ' + params.data[0] * 60 + '(m³/min)<br/>';
+            res = res + '&emsp;&emsp;&emsp;' + params.data[0].toFixed(2) + '(m³/s)<br/>';
+            res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>';
+            return res;
           },
-          splitLine: {
-            show: false, // 网格线
-            lineStyle: {
-              color: '#006c9d',
-              type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
+          trigger: 'item',
+        },
+        color: ['#00bb00', '#ffbb00', '#ff0000', '#0000ff'],
+        xAxis: [
+          {
+            name: '风量\r\n(m³/min)\r\n',
+            nameTextStyle: {
+              color: '#3df6ff',
+              fontSize: 12,
             },
-          },
-          axisLabel: {
-            show: true,
-            position: 'bottom',
-            textStyle: {
-              color: '#b3b8cc',
-              fontSize: 14,
+            axisLine: {
+              lineStyle: {
+                color: '#0092d5',
+                width: 1, // 这里是为了突出显示加上的
+              },
             },
-            formatter: function (value) {
-              return value * 60 + '';
+            splitLine: {
+              show: false, // 网格线
+              lineStyle: {
+                color: '#006c9d',
+                type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
+              },
             },
-          },
-          type: 'value',
-          min: 0,
-          max: maxM3.value, // 高家梁最大9000,
-        },
-        {
-          name: '',
-          nameTextStyle: {
-            color: '#3df6ff',
-            fontSize: 12,
-          },
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: '#0092d5',
-              width: 1, // 这里是为了突出显示加上的
+            axisLabel: {
+              show: true,
+              position: 'bottom',
+              textStyle: {
+                color: '#b3b8cc',
+                fontSize: 14,
+              },
+              formatter: function (value) {
+                return value * 60 + '';
+              },
             },
+            type: 'value',
+            min: 0,
+            max: maxM3.value, // 高家梁最大9000,
           },
-          splitLine: {
-            show: false, // 网格线
-            lineStyle: {
-              color: '#006c9d',
-              type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
+          {
+            name: '',
+            nameTextStyle: {
+              color: '#3df6ff',
+              fontSize: 12,
             },
-          },
-          axisLabel: {
-            show: false,
-            textStyle: {
-              color: '#b3b8cc',
-              fontSize: 14,
+            axisTick: {
+              show: false,
             },
-          },
-          type: 'value',
-          min: 0,
-          // max: 400,
-          data: echartData.xdata,
-        },
-      ],
-      yAxis: [
-        {
-          name: '负压(Pa)',
-          splitNumber: 5,
-          nameTextStyle: {
-            color: '#3df6ff',
-            fontSize: 12,
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: '#0092d5',
-              width: 1, // 这里是为了突出显示加上的
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#0092d5',
+                width: 1, // 这里是为了突出显示加上的
+              },
             },
-          },
-          splitLine: {
-            show: true, // 网格线
-            lineStyle: {
-              color: '#006c9d',
-              type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
+            splitLine: {
+              show: false, // 网格线
+              lineStyle: {
+                color: '#006c9d',
+                type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
+              },
+            },
+            axisLabel: {
+              show: false,
+              textStyle: {
+                color: '#b3b8cc',
+                fontSize: 14,
+              },
             },
+            type: 'value',
+            min: 0,
+            // max: 400,
+            data: echartData.xdata,
           },
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#b3b8cc',
-              fontSize: 14,
+        ],
+        yAxis: [
+          {
+            name: '负压(Pa)',
+            splitNumber: 5,
+            nameTextStyle: {
+              color: '#3df6ff',
+              fontSize: 12,
             },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#0092d5',
+                width: 1, // 这里是为了突出显示加上的
+              },
+            },
+            splitLine: {
+              show: true, // 网格线
+              lineStyle: {
+                color: '#006c9d',
+                type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#b3b8cc',
+                fontSize: 14,
+              },
+            },
+            type: 'value',
+            min: 0,
+            max: maxMPa.value,
           },
-          type: 'value',
-          min: 0,
-          max: maxMPa.value,
-        },
-      ],
-      series: [
-        {
-          type: 'effectScatter',
-          symbolSize: 5,
-          // symbolOffset:[1, 1],
-          showEffectOn: 'render',
-          // 涟漪特效相关配置。
-          rippleEffect: {
-            // 波纹的绘制方式，可选 'stroke' 和 'fill'。
-            brushType: 'stroke',
+        ],
+        series: [
+          {
+            type: 'effectScatter',
+            symbolSize: 5,
+            // symbolOffset:[1, 1],
+            showEffectOn: 'render',
+            // 涟漪特效相关配置。
+            rippleEffect: {
+              // 波纹的绘制方式，可选 'stroke' 和 'fill'。
+              brushType: 'stroke',
+            },
+            zlevel: 1,
+            z: 999,
+            itemStyle: {
+              color: '#ff0000',
+            },
+            data: echartData.ydata2,
           },
-          zlevel: 1,
-          z: 999,
-          itemStyle: {
-            color: '#ff0000',
+          {
+            name: '风量',
+            yAxisIndex: 0,
+            xAxisIndex: 1,
+            type: 'line',
+            smooth: true,
+            animationDuration: 1000,
+            showSymbol: false,
+            data: echartData.ydata,
           },
-          data: echartData.ydata2,
-        },
-        {
-          name: '风量',
-          yAxisIndex: 0,
-          xAxisIndex: 1,
-          type: 'line',
-          smooth: true,
-          animationDuration: 1000,
-          showSymbol: false,
-          data: echartData.ydata,
-        },
-        {
-          name: '负压',
-          yAxisIndex: 0,
-          xAxisIndex: 1,
-          type: 'line',
-          smooth: true,
-          animationDuration: 1000,
-          showSymbol: false,
+          {
+            name: '负压',
+            yAxisIndex: 0,
+            xAxisIndex: 1,
+            type: 'line',
+            smooth: true,
+            animationDuration: 1000,
+            showSymbol: false,
 
-          data: echartData.ydata1,
-        },
-      ],
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
+            data: echartData.ydata1,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
 
-// 设置曲线数据
-function setChart(param, character) {
-  var dataQ = 300;
-  var dataH = character.dataha0 * dataQ * dataQ + character.dataha1 * dataQ + character.dataha2;
-  let Q1 = Math.round((parseFloat(param.dataQ) / 60) * 100) / 100;
-  let H1 = parseFloat(param.dataH);
+  // 设置曲线数据
+  function setChart(param, character) {
+    var dataQ = 300;
+    var dataH = character.dataha0 * dataQ * dataQ + character.dataha1 * dataQ + character.dataha2;
+    let Q1 = Math.round((parseFloat(param.dataQ) / 60) * 100) / 100;
+    let H1 = parseFloat(param.dataH);
 
-  selectDataObj.value.dataH = H1;
-  selectDataObj.value.dataQ = Q1;
+    selectDataObj.value.dataH = H1;
+    selectDataObj.value.dataQ = Q1;
 
-  let q = Q1 - dataQ;
-  let h = H1 - dataH;
-  // 风压特性曲线1
-  let data = [];
-  // 风压特性曲线2
-  let data2 = [];
-  let datax = [];
-  maxM3.value = Q1 < 100 ? 150 : Q1 < 200 ? 250 : Q1 < 300 ? 400 : Q1 < 400 ? 500 : Q1 < 600 ? 800 : 1000;
-  maxMPa.value = H1 < 2000 ? 7000 : H1 < 2500 ? 9000 : 10000;
+    let q = Q1 - dataQ;
+    let h = H1 - dataH;
+    // 风压特性曲线1
+    let data = [];
+    // 风压特性曲线2
+    let data2 = [];
+    let datax = [];
+    maxM3.value = Q1 < 100 ? 150 : Q1 < 200 ? 250 : Q1 < 300 ? 400 : Q1 < 400 ? 500 : Q1 < 600 ? 800 : 1000;
+    maxMPa.value = H1 < 2000 ? 7000 : H1 < 2500 ? 9000 : 10000;
 
-  for (let i = 30; i <= maxM3.value; i++) {
-    let x = i;
-    let y4 = character.dataha0 * (x - q) * (x - q) + character.dataha1 * (x - q) + character.dataha2 + h;
-    data2.push([x, y4]);
-  }
-  for (let i = 0; i <= maxM3.value; i++) {
-    let x = i;
-    let y = (H1 / Q1 / Q1) * x * x;
-    data.push([x, y]);
-    datax.push(x * 60);
+    for (let i = 30; i <= maxM3.value; i++) {
+      let x = i;
+      let y4 = character.dataha0 * (x - q) * (x - q) + character.dataha1 * (x - q) + character.dataha2 + h;
+      data2.push([x, y4]);
+    }
+    for (let i = 0; i <= maxM3.value; i++) {
+      let x = i;
+      let y = (H1 / Q1 / Q1) * x * x;
+      data.push([x, y]);
+      datax.push(x * 60);
+    }
+    echartData.xdata = datax;
+    echartData.ydata = data;
+    echartData.ydata1 = data2;
+    echartData.ydata2 = [[Q1, H1]];
   }
-  echartData.xdata = datax;
-  echartData.ydata = data;
-  echartData.ydata1 = data2;
-  echartData.ydata2 = [[Q1, H1]];
-}
 
-watch(
-  () => props.maindata,
-  (val) => {
-    mainList = val;
-    mainTypeList.length = 0;
-    mainList.forEach((el) => {
-      mainTypeList.push({
-        label: el.strinstallpos,
-        value: el.deviceID,
+  watch(
+    () => props.maindata,
+    (val) => {
+      mainList = val;
+      mainTypeList.length = 0;
+      mainList.forEach((el) => {
+        mainTypeList.push({
+          label: el.strinstallpos,
+          value: el.deviceID,
+        });
       });
-    });
 
-    if (searchValue.value) {
-      changeSelect(searchValue.value);
-    } else {
-      searchValue.value = mainTypeList[0].value;
-      changeSelect(searchValue.value);
+      if (searchValue.value) {
+        changeSelect(searchValue.value);
+      } else {
+        searchValue.value = mainTypeList[0].value;
+        changeSelect(searchValue.value);
+      }
+    },
+    {
+      deep: true,
     }
-  },
-  {
-    deep: true,
-  }
-);
-onMounted(() => { });
+  );
+  onMounted(() => {});
 </script>
 
 <style lang="less" scoped>
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../../assets/font/douyuFont.otf');
-}
-
-.mainMonitor {
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  .title-top {
-    position: absolute;
-    top: 9px;
-    left: 46px;
-    color: #fff;
-    font-size: 16px;
+  @font-face {
     font-family: 'douyuFont';
-    cursor: pointer;
-
-    &:hover {
-      color: #66ffff;
-    }
+    src: url('../../../../../assets/font/douyuFont.otf');
   }
 
-  .toggle-search {
-    position: absolute;
-    left: 9px;
-    top: 37px;
-    display: flex;
+  .mainMonitor {
+    width: 100%;
+    height: 100%;
+    position: relative;
 
-    .icon-search {
+    .title-top {
       position: absolute;
-      top: 50%;
-      left: 5px;
-      transform: translate(0%, -50%);
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+
+      &:hover {
+        color: #66ffff;
+      }
     }
 
-    .status-yx {
-      height: 30px;
-      width: 180px;
-      background-color: rgba(8, 148, 255, 0.3);
-      border: 1px solid #1d80da;
+    .toggle-search {
+      position: absolute;
+      left: 9px;
+      top: 37px;
       display: flex;
-      justify-content: space-between;
-      align-items: center;
 
-      .now-status {
-        margin-right: 5px;
-        padding-top: 3px;
-        font-family: 'douyuFont';
-        color: #3df6ff;
+      .icon-search {
+        position: absolute;
+        top: 50%;
+        left: 5px;
+        transform: translate(0%, -50%);
       }
-    }
-  }
 
-  .main-contents {
-    position: relative;
-    top: 66px;
-    left: 0;
-    height: calc(100% - 66px);
-    width: 100%;
+      .status-yx {
+        height: 30px;
+        width: 180px;
+        background-color: rgba(8, 148, 255, 0.3);
+        border: 1px solid #1d80da;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-    .point-des-box {
-      position: absolute;
-      background: #0d0d0dbd;
-      padding: 5px 8px;
-      border-radius: 10px;
-      border: 1px solid #ffffff;
-      z-index: 999;
-      color: #fff;
-      right: 20px;
-      top: 10px;
+        .now-status {
+          margin-right: 5px;
+          padding-top: 3px;
+          font-family: 'douyuFont';
+          color: #3df6ff;
+        }
+      }
     }
 
-    .main {
+    .main-contents {
+      position: relative;
+      top: 66px;
+      left: 0;
+      height: calc(100% - 66px);
       width: 100%;
-      height: 100%;
-      overflow-x: hidden;
+
+      .point-des-box {
+        position: absolute;
+        background: #0d0d0dbd;
+        padding: 5px 8px;
+        border-radius: 10px;
+        border: 1px solid #ffffff;
+        z-index: 999;
+        color: #fff;
+        right: 20px;
+        top: 10px;
+      }
+
+      .main {
+        width: 100%;
+        height: 100%;
+        overflow-x: hidden;
+      }
     }
   }
-}
 
-:deep .zxm-select-selector {
-  width: 100%;
-  height: 30px !important;
-  padding: 0 11px 0px 25px !important;
-  background-color: rgba(8, 148, 255, 0.3) !important;
-  border: 1px solid #1d80da !important;
-}
+  :deep .zxm-select-selector {
+    width: 100%;
+    height: 30px !important;
+    padding: 0 11px 0px 25px !important;
+    background-color: rgba(8, 148, 255, 0.3) !important;
+    border: 1px solid #1d80da !important;
+  }
 
-:deep .zxm-select-selection-item {
-  color: #fff !important;
-  line-height: 28px !important;
-}
+  :deep .zxm-select-selection-item {
+    color: #fff !important;
+    line-height: 28px !important;
+  }
 
-:deep .zxm-select-arrow {
-  color: #fff !important;
-}
+  :deep .zxm-select-arrow {
+    color: #fff !important;
+  }
 </style>

src/views/vent/home/colliery/components/wind-device.vue

@@ -32,374 +32,374 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, defineProps, watch } from 'vue';
-import { getAssetURL } from '/@/utils/ui';
-let props = defineProps({
-  devicedata: Object,
-});
-const emit = defineEmits(['goDetail']);
-let iconsMonitor = reactive({
-  fanmain: {
-    url: getAssetURL('vent/alarm-icons/zhushan.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  fanlocal: {
-    url: getAssetURL('vent/alarm-icons/js.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  fanlocaldp: {
-    url: getAssetURL('vent/alarm-icons/js.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  gate: {
-    url: getAssetURL('vent/alarm-icons/fm.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  window: {
-    url: getAssetURL('vent/alarm-icons/fc.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  windrect: {
-    url: getAssetURL('vent/alarm-icons/cf.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  forcFan: {
-    url: getAssetURL('vent/alarm-icons/yafeng.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  spray: {
-    url: getAssetURL('vent/alarm-icons/penlin.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  dustdev: {
-    url: getAssetURL('vent/alarm-icons/penfen.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  nitrogen: {
-    url: getAssetURL('vent/alarm-icons/zhudan.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  pulping: {
-    url: getAssetURL('vent/alarm-icons/zhujiang.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  atomizing: {
-    url: getAssetURL('vent/alarm-icons/pw.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  dustsensor: {
-    url: getAssetURL('vent/alarm-icons/ccq.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  gas: {
-    url: getAssetURL('vent/alarm-icons/wasichoucaig.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  pump: {
-    url: getAssetURL('vent/alarm-icons/wasibeng.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-  modelsensor: {
-    url: getAssetURL('vent/alarm-icons/cf.png'),
-    level: 100,
-    text: '',
-    allText: '总数',
-    warnText: '报警数',
-    closeText: '断开数',
-    allCount: 0,
-    warnCount: 0,
-    closeCount: 0,
-  },
-});
+  import { ref, reactive, watch } from 'vue';
+  import { getAssetURL } from '/@/utils/ui';
+  let props = defineProps({
+    devicedata: Object,
+  });
+  const emit = defineEmits(['goDetail']);
+  let iconsMonitor = reactive({
+    fanmain: {
+      url: getAssetURL('vent/alarm-icons/zhushan.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    fanlocal: {
+      url: getAssetURL('vent/alarm-icons/js.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    fanlocaldp: {
+      url: getAssetURL('vent/alarm-icons/js.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    gate: {
+      url: getAssetURL('vent/alarm-icons/fm.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    window: {
+      url: getAssetURL('vent/alarm-icons/fc.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    windrect: {
+      url: getAssetURL('vent/alarm-icons/cf.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    forcFan: {
+      url: getAssetURL('vent/alarm-icons/yafeng.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    spray: {
+      url: getAssetURL('vent/alarm-icons/penlin.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    dustdev: {
+      url: getAssetURL('vent/alarm-icons/penfen.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    nitrogen: {
+      url: getAssetURL('vent/alarm-icons/zhudan.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    pulping: {
+      url: getAssetURL('vent/alarm-icons/zhujiang.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    atomizing: {
+      url: getAssetURL('vent/alarm-icons/pw.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    dustsensor: {
+      url: getAssetURL('vent/alarm-icons/ccq.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    gas: {
+      url: getAssetURL('vent/alarm-icons/wasichoucaig.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    pump: {
+      url: getAssetURL('vent/alarm-icons/wasibeng.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+    modelsensor: {
+      url: getAssetURL('vent/alarm-icons/cf.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
+  });
 
-const resetScroll = (e: Event) => {
-  if (e.target && e.target) (e.target as Element).scrollTop = 0;
-};
+  const resetScroll = (e: Event) => {
+    if (e.target && e.target) (e.target as Element).scrollTop = 0;
+  };
 
-//跳转详情
-function getDetail() {
-  // emit('goDetail', 'windrect')
-}
-
-watch(
-  () => props.devicedata,
-  (val) => {
-    Object.keys(iconsMonitor).forEach((el) => {
-      if (val && val[el]) {
-        iconsMonitor[el].level = val[el].maxLevel;
-        iconsMonitor[el]['text'] = val[el].name;
-        // iconsMonitor[el]['count'] = val[el].count;
-        iconsMonitor[el].allCount = val[el].totalcount;
-        iconsMonitor[el].warnCount = val[el].count;
-        iconsMonitor[el].closeCount = val[el].netstatus;
-      }
-    });
-  },
-  {
-    deep: true,
+  //跳转详情
+  function getDetail() {
+    // emit('goDetail', 'windrect')
   }
-);
+
+  watch(
+    () => props.devicedata,
+    (val) => {
+      Object.keys(iconsMonitor).forEach((el) => {
+        if (val && val[el]) {
+          iconsMonitor[el].level = val[el].maxLevel;
+          iconsMonitor[el]['text'] = val[el].name;
+          // iconsMonitor[el]['count'] = val[el].count;
+          iconsMonitor[el].allCount = val[el].totalcount;
+          iconsMonitor[el].warnCount = val[el].count;
+          iconsMonitor[el].closeCount = val[el].netstatus;
+        }
+      });
+    },
+    {
+      deep: true,
+    }
+  );
 </script>
 
 <style lang="less" scoped>
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../../assets/font/douyuFont.otf');
-}
-
-.windDevice {
-  width: 100%;
-  // min-width: ;
-  height: 100%;
-  position: relative;
-
-  .title-top {
-    position: absolute;
-    top: 9px;
-    left: 46px;
-    color: #fff;
-    font-size: 16px;
+  @font-face {
     font-family: 'douyuFont';
-    cursor: pointer;
-
-    &:hover {
-      color: #66ffff;
-    }
+    src: url('../../../../../assets/font/douyuFont.otf');
   }
 
-  .device-contents {
-    position: absolute;
-    top: 30px;
-    left: 0;
-    height: calc(100% - 30px);
-    padding: 10px 15px;
-    box-sizing: border-box;
+  .windDevice {
     width: 100%;
-    overflow-y: auto;
+    // min-width: ;
+    height: 100%;
+    position: relative;
 
-    .icons-box {
-      height: 100%;
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
 
-      .icon-item {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 3px;
-        // animation: move 10s linear infinite;lxh
+      &:hover {
+        color: #66ffff;
+      }
+    }
 
-        .level-text {
-          width: 220px;
-          position: absolute;
-          top: 47px;
-          left: 185px;
-          color: #ffffffe0;
-          font-size: 13px;
-          text-align: center;
-          letter-spacing: 1px;
+    .device-contents {
+      position: absolute;
+      top: 30px;
+      left: 0;
+      height: calc(100% - 30px);
+      padding: 10px 15px;
+      box-sizing: border-box;
+      width: 100%;
+      overflow-y: auto;
 
-          .all-count {
-            margin-right: 10px;
-          }
+      .icons-box {
+        height: 100%;
 
-          .num-count,
-          .num-count1 {
-            font-family: 'douyuFont';
-            font-size: 12px;
-          }
+        .icon-item {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 3px;
+          // animation: move 10s linear infinite;lxh
+
+          .level-text {
+            width: 220px;
+            position: absolute;
+            top: 47px;
+            left: 185px;
+            color: #ffffffe0;
+            font-size: 13px;
+            text-align: center;
+            letter-spacing: 1px;
 
-          .warn-count {
-            margin-right: 10px;
-            .num-count {
-              color: #ffffffe0;
+            .all-count {
+              margin-right: 10px;
             }
 
+            .num-count,
             .num-count1 {
-              color: #ff0000;
+              font-family: 'douyuFont';
+              font-size: 12px;
             }
-          }
 
-          .close-count {
-            .num-count {
-              color: #ffffffe0;
+            .warn-count {
+              margin-right: 10px;
+              .num-count {
+                color: #ffffffe0;
+              }
+
+              .num-count1 {
+                color: #ff0000;
+              }
             }
 
-            .num-count1 {
-              color: #ff0000;
+            .close-count {
+              .num-count {
+                color: #ffffffe0;
+              }
+
+              .num-count1 {
+                color: #ff0000;
+              }
             }
           }
-        }
 
-        .allText {
-          display: flex;
-          justify-content: flex-start;
-        }
+          .allText {
+            display: flex;
+            justify-content: flex-start;
+          }
 
-        .unallText {
-          display: flex;
-          justify-content: flex-start;
-        }
+          .unallText {
+            display: flex;
+            justify-content: flex-start;
+          }
 
-        img {
-          width: 427px;
-          height: 79px;
+          img {
+            width: 427px;
+            height: 79px;
+          }
         }
-      }
 
-      @keyframes move {
-        0% {
-          transform: translateY(0px);
-        }
+        @keyframes move {
+          0% {
+            transform: translateY(0px);
+          }
 
-        100% {
-          transform: translateY(-269px);
+          100% {
+            transform: translateY(-269px);
+          }
         }
-      }
 
-      @keyframes move1 {
-        0% {
-          transform: translateY(0px);
+        @keyframes move1 {
+          0% {
+            transform: translateY(0px);
+          }
         }
-      }
 
-      .wrapper {
-        position: absolute;
-        top: 47px;
-        left: 100px;
-        color: #ffffffe0;
-        font-size: 13px;
-        text-align: center;
-        letter-spacing: 1px;
-      }
+        .wrapper {
+          position: absolute;
+          top: 47px;
+          left: 100px;
+          color: #ffffffe0;
+          font-size: 13px;
+          text-align: center;
+          letter-spacing: 1px;
+        }
 
-      .level-warning {
-        font-weight: 600;
-        color: #ff2e2e;
-        text-shadow: 2px 2px 4px #000000;
+        .level-warning {
+          font-weight: 600;
+          color: #ff2e2e;
+          text-shadow: 2px 2px 4px #000000;
+        }
       }
     }
   }
-}
 
-:deep .zxm-select-selector {
-  width: 100%;
-  height: 30px !important;
-  padding: 0 11px 0px 25px !important;
-  background-color: rgba(8, 148, 255, 0.3) !important;
-  border: 1px solid #1d80da !important;
-}
+  :deep .zxm-select-selector {
+    width: 100%;
+    height: 30px !important;
+    padding: 0 11px 0px 25px !important;
+    background-color: rgba(8, 148, 255, 0.3) !important;
+    border: 1px solid #1d80da !important;
+  }
 
-:deep .zxm-select-selection-item {
-  color: #fff !important;
-  line-height: 28px !important;
-}
+  :deep .zxm-select-selection-item {
+    color: #fff !important;
+    line-height: 28px !important;
+  }
 
-:deep .zxm-select-arrow {
-  color: #fff !important;
-}
+  :deep .zxm-select-arrow {
+    color: #fff !important;
+  }
 </style>

src/views/vent/home/colliery/components/wind-line.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
+  import { ref, reactive, onMounted, nextTick, watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import * as echarts from 'echarts';
   import { formatNum } from '/@/utils/ventutil';

src/views/vent/home/colliery/components/wind-monitor.vue

@@ -8,304 +8,304 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
-import * as echarts from 'echarts';
-import { getMaxY, getMinY } from '../clique.data'
-const emit = defineEmits(['goDetail']);
+  import { ref, reactive, nextTick, onMounted, watch } from 'vue';
+  import * as echarts from 'echarts';
+  import { getMaxY, getMinY } from '../clique.data';
+  const emit = defineEmits(['goDetail']);
 
-let props = defineProps({
-  flList: Array,
-});
+  let props = defineProps({
+    flList: Array,
+  });
 
-//获取dom节点
-let windBar = ref<any>();
-//坐标轴最大值
-let maxY = ref<any>(0);
-let minY = ref<any>(0)
-//echart数据
-let echartData = reactive<any>({ ydata: [], xdata: [] });
-//跳转详情
-function getDetail() {
-  emit('goDetail', 'windrect');
-}
-function getOption() {
-  nextTick(() => {
-    const myChart = echarts.init(windBar.value);
-    let option = {
-      color: [
-        '#63caff',
-        '#49beff',
-        'rgba(74, 205, 255,.1)',
-        '#03387a',
-        '#03387a',
-        '#6c93ee',
-        '#a9abff',
-        '#f7a23f',
-        '#27bae7',
-        '#ff6d9d',
-        '#cb79ff',
-        '#f95b5a',
-        '#ccaf27',
-        '#38b99c',
-        '#93d0ff',
-        '#bd74e0',
-        '#fd77da',
-        '#dea700',
-      ],
-      grid: {
-        containLabel: true,
-        left: 30,
-        right: 30,
-        bottom: echartData.xdata.length > 8 ? 30 : 15,
-        top: 40,
-      },
+  //获取dom节点
+  let windBar = ref<any>();
+  //坐标轴最大值
+  let maxY = ref<any>(0);
+  let minY = ref<any>(0);
+  //echart数据
+  let echartData = reactive<any>({ ydata: [], xdata: [] });
+  //跳转详情
+  function getDetail() {
+    emit('goDetail', 'windrect');
+  }
+  function getOption() {
+    nextTick(() => {
+      const myChart = echarts.init(windBar.value);
+      let option = {
+        color: [
+          '#63caff',
+          '#49beff',
+          'rgba(74, 205, 255,.1)',
+          '#03387a',
+          '#03387a',
+          '#6c93ee',
+          '#a9abff',
+          '#f7a23f',
+          '#27bae7',
+          '#ff6d9d',
+          '#cb79ff',
+          '#f95b5a',
+          '#ccaf27',
+          '#38b99c',
+          '#93d0ff',
+          '#bd74e0',
+          '#fd77da',
+          '#dea700',
+        ],
+        grid: {
+          containLabel: true,
+          left: 30,
+          right: 30,
+          bottom: echartData.xdata.length > 8 ? 30 : 15,
+          top: 40,
+        },
 
-      xAxis: {
-        type: 'category',
-        data: echartData.xdata,
-        axisLabel: {
-          formatter: function (params) {
-            var newParamsName = ''; // 最终拼接成的字符串
-            var paramsNameNumber = params.length; // 实际标签的个数
-            var provideNumber = 6; // 每行能显示的字的个数
-            var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
-            /**
-             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-             */
-            // 条件等同于rowNumber>1
-            if (paramsNameNumber > provideNumber) {
-              /** 循环每一行,p表示行 */
-              for (var p = 0; p < rowNumber; p++) {
-                var tempStr = ''; // 表示每一次截取的字符串
-                var start = p * provideNumber; // 开始截取的位置
-                var end = start + provideNumber; // 结束截取的位置
-                // 此处特殊处理最后一行的索引值
-                if (p == rowNumber - 1) {
-                  // 最后一次不换行
-                  tempStr = params.substring(start, paramsNameNumber);
-                } else {
-                  // 每一次拼接字符串并换行
-                  tempStr = params.substring(start, end) + '\n';
+        xAxis: {
+          type: 'category',
+          data: echartData.xdata,
+          axisLabel: {
+            formatter: function (params) {
+              var newParamsName = ''; // 最终拼接成的字符串
+              var paramsNameNumber = params.length; // 实际标签的个数
+              var provideNumber = 6; // 每行能显示的字的个数
+              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
+              /**
+               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+               */
+              // 条件等同于rowNumber>1
+              if (paramsNameNumber > provideNumber) {
+                /** 循环每一行,p表示行 */
+                for (var p = 0; p < rowNumber; p++) {
+                  var tempStr = ''; // 表示每一次截取的字符串
+                  var start = p * provideNumber; // 开始截取的位置
+                  var end = start + provideNumber; // 结束截取的位置
+                  // 此处特殊处理最后一行的索引值
+                  if (p == rowNumber - 1) {
+                    // 最后一次不换行
+                    tempStr = params.substring(start, paramsNameNumber);
+                  } else {
+                    // 每一次拼接字符串并换行
+                    tempStr = params.substring(start, end) + '\n';
+                  }
+                  newParamsName += tempStr; // 最终拼成的字符串
                 }
-                newParamsName += tempStr; // 最终拼成的字符串
+              } else {
+                // 将旧标签的值赋给新标签
+                newParamsName = params;
               }
-            } else {
-              // 将旧标签的值赋给新标签
-              newParamsName = params;
-            }
-            //将最终的字符串返回
-            return newParamsName;
+              //将最终的字符串返回
+              return newParamsName;
+            },
+            fontSize: 14,
+            margin: 15,
+            interval: 0,
+            textStyle: {
+              color: '#b3b8cc',
+            },
           },
-          fontSize: 14,
-          margin: 15,
-          interval: 0,
-          textStyle: {
-            color: '#b3b8cc',
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(62, 103, 164)',
+            },
           },
-        },
-        axisLine: {
-          lineStyle: {
-            color: 'rgba(62, 103, 164)',
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
           },
         },
-        splitLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-      },
 
-      yAxis: {
-        type: 'value',
-        name: '(m³/min)',
-        // max: maxY.value,
-        // min:minY.value,
-        axisLabel: {
-          textStyle: {
-            fontSize: 14,
-            color: '#b3b8cc',
+        yAxis: {
+          type: 'value',
+          name: '(m³/min)',
+          // max: maxY.value,
+          // min:minY.value,
+          axisLabel: {
+            textStyle: {
+              fontSize: 14,
+              color: '#b3b8cc',
+            },
           },
-        },
-        nameTextStyle: {
-          color: '#fff',
-          fontSize: 12,
-          lineHeight: 10,
-        },
-        splitLine: {
-          lineStyle: {
-            color: 'rgba(62, 103, 164,.4)',
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 12,
+            lineHeight: 10,
           },
-        },
-        axisLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-      },
-      series: [
-        {
-          data: echartData.ydata,
-          type: 'bar',
-          barMaxWidth: 'auto',
-          barWidth: 25,
-          itemStyle: {
-            color: {
-              x: 0,
-              y: 0,
-              x2: 0,
-              y2: 1,
-              type: 'linear',
-              global: false,
-              colorStops: [
-                {
-                  offset: 0,
-                  color: '#0b9eff',
-                },
-                {
-                  offset: 1,
-                  color: '#63caff',
-                },
-              ],
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(62, 103, 164,.4)',
             },
           },
-          label: {
-            show: true,
-            position: 'top',
-            distance: 10,
-            color: '#fff',
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
           },
         },
-        {
-          data: [1, 1, 1, 1, 1, 1, 1, 1],
-          type: 'pictorialBar',
-          barMaxWidth: '25',
-          symbol: 'diamond',
-          symbolOffset: [0, '50%'],
-          symbolSize: [25, 15],
-        },
-        {
-          data: echartData.ydata,
-          type: 'pictorialBar',
-          barMaxWidth: '25',
-          symbolPosition: 'end',
-          symbol: 'diamond',
-          symbolOffset: [0, '-50%'],
-          symbolSize: [25, 12],
-          zlevel: 2,
-        },
-        {
-          data: [741, 741, 741, 741, 741, 741, 741, 741],
-          type: 'bar',
-          barMaxWidth: 'auto',
-          barWidth: 25,
-          barGap: '-100%',
-          zlevel: -1,
-        },
-        {
-          data: [1, 1, 1, 1, 1, 1, 1, 1],
-          type: 'pictorialBar',
-          barMaxWidth: '25',
-          symbol: 'diamond',
-          symbolOffset: [0, '50%'],
-          symbolSize: [25, 15],
-          zlevel: -2,
-        },
-        {
-          data: [741, 741, 741, 741, 741, 741, 741, 741],
-          type: 'pictorialBar',
-          barMaxWidth: '25',
-          symbolPosition: 'end',
-          symbol: 'diamond',
-          symbolOffset: [0, '-50%'],
-          symbolSize: [25, 12],
-          zlevel: -1,
-        },
-      ],
-      dataZoom: [
-        {
-          // 这部分是关键
-          show: echartData.xdata.length > 8 ? true : false,
-          type: 'slider', // 这里可以选择你需要的类型，例如 'inside'
-          start: 0, // 数据窗口范围的起始百分比
-          end: echartData.xdata.length > 8 && echartData.xdata.length <= 16 ? 50 : echartData.xdata.length > 16 ? 25 : 100, // 数据窗口范围的结束百分比
-          height: 10, // 设置缩放条高度
-          left: 'center',
-          bottom: 25,
-          labelPrecision: 0, // 标签精度，默认为auto
-          showDetail: false, // 是否显示详情
-          showDataShadow: false, // 是否显示数据阴影
+        series: [
+          {
+            data: echartData.ydata,
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 25,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#0b9eff',
+                  },
+                  {
+                    offset: 1,
+                    color: '#63caff',
+                  },
+                ],
+              },
+            },
+            label: {
+              show: true,
+              position: 'top',
+              distance: 10,
+              color: '#fff',
+            },
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '25',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [25, 15],
+          },
+          {
+            data: echartData.ydata,
+            type: 'pictorialBar',
+            barMaxWidth: '25',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [25, 12],
+            zlevel: 2,
+          },
+          {
+            data: [741, 741, 741, 741, 741, 741, 741, 741],
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 25,
+            barGap: '-100%',
+            zlevel: -1,
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '25',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [25, 15],
+            zlevel: -2,
+          },
+          {
+            data: [741, 741, 741, 741, 741, 741, 741, 741],
+            type: 'pictorialBar',
+            barMaxWidth: '25',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [25, 12],
+            zlevel: -1,
+          },
+        ],
+        dataZoom: [
+          {
+            // 这部分是关键
+            show: echartData.xdata.length > 8 ? true : false,
+            type: 'slider', // 这里可以选择你需要的类型，例如 'inside'
+            start: 0, // 数据窗口范围的起始百分比
+            end: echartData.xdata.length > 8 && echartData.xdata.length <= 16 ? 50 : echartData.xdata.length > 16 ? 25 : 100, // 数据窗口范围的结束百分比
+            height: 10, // 设置缩放条高度
+            left: 'center',
+            bottom: 25,
+            labelPrecision: 0, // 标签精度，默认为auto
+            showDetail: false, // 是否显示详情
+            showDataShadow: false, // 是否显示数据阴影
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+          show: false,
         },
-      ],
-      tooltip: {
-        trigger: 'axis',
-        show: false,
-      },
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
-watch(
-  () => props.flList,
-  (val) => {
-    echartData.xdata.length = 0;
-    echartData.ydata.length = 0;
-    val.forEach((el: any) => {
-      if (el.readData.m3) {
-        echartData.xdata.push(el.strinstallpos);
-        echartData.ydata.push(el.readData.m3);
-      } else {
-        echartData.xdata.push(el.strinstallpos);
-        echartData.ydata.push('0');
-      }
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
     });
-    maxY.value = getMaxY(echartData.ydata)
-    minY.value = getMinY(echartData.ydata)
-    getOption();
-  },
-  {
-    deep: true,
   }
-);
+  watch(
+    () => props.flList,
+    (val) => {
+      echartData.xdata.length = 0;
+      echartData.ydata.length = 0;
+      val.forEach((el: any) => {
+        if (el.readData.m3) {
+          echartData.xdata.push(el.strinstallpos);
+          echartData.ydata.push(el.readData.m3);
+        } else {
+          echartData.xdata.push(el.strinstallpos);
+          echartData.ydata.push('0');
+        }
+      });
+      maxY.value = getMaxY(echartData.ydata);
+      minY.value = getMinY(echartData.ydata);
+      getOption();
+    },
+    {
+      deep: true,
+    }
+  );
 
-onMounted(() => { });
+  onMounted(() => {});
 </script>
 
 <style lang="less" scoped>
-.windMonitor {
-  width: 100%;
-  height: 100%;
-  position: relative;
+  .windMonitor {
+    width: 100%;
+    height: 100%;
+    position: relative;
 
-  .title-top {
-    position: absolute;
-    top: 9px;
-    left: 46px;
-    color: #fff;
-    font-size: 16px;
-    font-family: 'douyuFont';
-    cursor: pointer;
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
 
-    &:hover {
-      color: #66ffff;
+      &:hover {
+        color: #66ffff;
+      }
     }
-  }
-
-  .wind-contents {
-    position: absolute;
-    left: 0;
-    top: 36px;
-    width: 100%;
-    height: calc(100% - 36px);
 
-    .wind-bar {
+    .wind-contents {
+      position: absolute;
+      left: 0;
+      top: 36px;
       width: 100%;
-      height: 100%;
+      height: calc(100% - 36px);
+
+      .wind-bar {
+        width: 100%;
+        height: 100%;
+      }
     }
   }
-}
 </style>

src/views/vent/home/colliery/components/work-monitor.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
+  import { ref, reactive, nextTick, onMounted, watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import * as echarts from 'echarts';
   import { getDate } from '../clique.data';

src/views/vent/home/configurable/belt/components/ModuleCommonDual.vue

@@ -21,177 +21,177 @@
 </template>
 
 <script setup lang="ts">
-import Content from '../../components/content.vue';
-import { defineProps, defineEmits, computed, ref, watch } from 'vue';
-import { ModuleData, ShowStyle } from '../../../../deviceManager/configurationTable/types';
-import { useInitModule } from '../../hooks/useInit';
-
-const props = defineProps<{
-  moduleDataA: ModuleData;
-  moduleNameA: string;
-  deviceTypeA: string;
-  moduleDataB: ModuleData;
-  moduleNameB: string;
-  deviceTypeB: string;
-  showStyle: ShowStyle;
-  visible: boolean;
-  data: any;
-}>();
-const emit = defineEmits(['close', 'select']);
-
-const index = ref(0);
-
-const headerA = props.moduleDataA.header;
-const headerB = props.moduleDataB.header;
-
-const {
-  selectedDeviceID: selectedDeviceIDA,
-  selectedDevice: selectedDeviceA,
-  options: optionsA,
-  init: initA,
-} = useInitModule(props.deviceTypeA, props.moduleDataA);
-const {
-  selectedDeviceID: selectedDeviceIDB,
-  selectedDevice: selectedDeviceB,
-  options: optionsB,
-  init: initB,
-} = useInitModule(props.deviceTypeB, props.moduleDataB);
-
-const style = computed(() => {
-  const size = props.showStyle.size;
-  const position = props.showStyle.position;
-  return size + position;
-});
-
-// 根据配置里的定位判断应该使用哪个module组件
-const daneClass = computed(() => {
-  const position = props.showStyle.position;
-  const size = props.showStyle.size;
-  const [_, width] = size.match(/width:([0-9]+)px/) || [];
-  if (position.includes('bottom') || parseInt(width) > 800) {
-    return 'dane-w';
-  }
-  if (position.includes('left')) {
-    return 'dane-m';
-  }
-  if (position.includes('right')) {
+  import Content from '../../components/content.vue';
+  import { defineEmits, computed, ref, watch } from 'vue';
+  import { ModuleData, ShowStyle } from '../../../../deviceManager/configurationTable/types';
+  import { useInitModule } from '../../hooks/useInit';
+
+  const props = defineProps<{
+    moduleDataA: ModuleData;
+    moduleNameA: string;
+    deviceTypeA: string;
+    moduleDataB: ModuleData;
+    moduleNameB: string;
+    deviceTypeB: string;
+    showStyle: ShowStyle;
+    visible: boolean;
+    data: any;
+  }>();
+  const emit = defineEmits(['close', 'select']);
+
+  const index = ref(0);
+
+  const headerA = props.moduleDataA.header;
+  const headerB = props.moduleDataB.header;
+
+  const {
+    selectedDeviceID: selectedDeviceIDA,
+    selectedDevice: selectedDeviceA,
+    options: optionsA,
+    init: initA,
+  } = useInitModule(props.deviceTypeA, props.moduleDataA);
+  const {
+    selectedDeviceID: selectedDeviceIDB,
+    selectedDevice: selectedDeviceB,
+    options: optionsB,
+    init: initB,
+  } = useInitModule(props.deviceTypeB, props.moduleDataB);
+
+  const style = computed(() => {
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
+    return size + position;
+  });
+
+  // 根据配置里的定位判断应该使用哪个module组件
+  const daneClass = computed(() => {
+    const position = props.showStyle.position;
+    const size = props.showStyle.size;
+    const [_, width] = size.match(/width:([0-9]+)px/) || [];
+    if (position.includes('bottom') || parseInt(width) > 800) {
+      return 'dane-w';
+    }
+    if (position.includes('left')) {
+      return 'dane-m';
+    }
+    if (position.includes('right')) {
+      return 'dane-m';
+    }
     return 'dane-m';
-  }
-  return 'dane-m';
-});
-
-watch(
-  () => props.data,
-  (d) => {
-    initA(d);
-    initB(d);
-    if (!selectedDeviceIDA.value) selectedDeviceIDA.value = optionsA.value[0]?.value;
-    if (!selectedDeviceIDB.value) selectedDeviceIDB.value = optionsB.value[0]?.value;
-  },
-  {
-    immediate: true,
-  }
-);
+  });
+
+  watch(
+    () => props.data,
+    (d) => {
+      initA(d);
+      initB(d);
+      if (!selectedDeviceIDA.value) selectedDeviceIDA.value = optionsA.value[0]?.value;
+      if (!selectedDeviceIDB.value) selectedDeviceIDB.value = optionsB.value[0]?.value;
+    },
+    {
+      immediate: true,
+    }
+  );
 </script>
 
 <style scoped lang="less">
-@import '/@/design/theme.less';
-.dane-bd {
-  --image-module-title: url('/@/assets/images/beltFire/1-1.png');
-  --image-common-border: url('/@/assets/images/beltFire/1-5.png');
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-image: var(--image-common-border);
-  background-repeat: no-repeat;
-  background-position: center top;
-  background-size: 100% 100%;
-  z-index: 2;
-
-  .dane-title {
-    display: flex;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: space-between;
+  @import '/@/design/theme.less';
+  .dane-bd {
+    --image-module-title: url('/@/assets/images/beltFire/1-1.png');
+    --image-common-border: url('/@/assets/images/beltFire/1-5.png');
+    position: absolute;
     width: 100%;
-    height: 34px;
-    padding: 0 40px 0 50px;
-    background: var(--image-module-title);
+    height: 100%;
+    background-image: var(--image-common-border);
     background-repeat: no-repeat;
-    .common-navL {
+    background-position: center top;
+    background-size: 100% 100%;
+    z-index: 2;
+
+    .dane-title {
       display: flex;
-      position: relative;
+      box-sizing: border-box;
       align-items: center;
-      color: #fff;
-      font-size: 14px;
-      font-style: italic;
-      font-weight: bold;
+      justify-content: space-between;
+      width: 100%;
+      height: 34px;
+      padding: 0 40px 0 50px;
+      background: var(--image-module-title);
+      background-repeat: no-repeat;
+      .common-navL {
+        display: flex;
+        position: relative;
+        align-items: center;
+        color: #fff;
+        font-size: 14px;
+        font-style: italic;
+        font-weight: bold;
+      }
+    }
+
+    .dane-content {
+      height: calc(100% - 34px);
     }
   }
 
-  .dane-content {
-    height: calc(100% - 34px);
+  .deactived {
+    cursor: pointer;
+    color: #8087a1;
+  }
+
+  :deep(.zxm-select-selector) {
+    height: 22px !important;
+    border: none !important;
+    // background-color: rgb(15 64 88) !important;
+    background-color: transparent !important;
+    color: #8087a1 !important;
+  }
+
+  :deep(.zxm-select-selection-placeholder) {
+    color: #8087a1 !important;
+  }
+
+  :deep(.zxm-select-arrow) {
+    color: #8087a1 !important;
+  }
+
+  :deep(.zxm-picker) {
+    border: none !important;
+    background-color: rgb(15 64 88) !important;
+    box-shadow: none;
+    color: #a1dff8 !important;
+  }
+
+  :deep(.zxm-picker-input > input) {
+    color: #a1dff8 !important;
+    text-align: center !important;
+  }
+
+  :deep(.zxm-picker-separator) {
+    color: #a1dff8 !important;
+  }
+
+  :deep(.zxm-picker-active-bar) {
+    display: none !important;
+  }
+
+  :deep(.zxm-picker-suffix) {
+    color: #a1dff8 !important;
+  }
+
+  :deep(.zxm-switch) {
+    min-width: 48px !important;
+  }
+
+  :deep(.zxm-switch-checked) {
+    background-color: rgb(15 64 89) !important;
+  }
+
+  :deep(.zxm-switch-handle::before) {
+    background-color: rgb(33 179 247) !important;
+  }
+
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
   }
-}
-
-.deactived {
-  cursor: pointer;
-  color: #8087a1;
-}
-
-:deep(.zxm-select-selector) {
-  height: 22px !important;
-  border: none !important;
-  // background-color: rgb(15 64 88) !important;
-  background-color: transparent !important;
-  color: #8087a1 !important;
-}
-
-:deep(.zxm-select-selection-placeholder) {
-  color: #8087a1 !important;
-}
-
-:deep(.zxm-select-arrow) {
-  color: #8087a1 !important;
-}
-
-:deep(.zxm-picker) {
-  border: none !important;
-  background-color: rgb(15 64 88) !important;
-  box-shadow: none;
-  color: #a1dff8 !important;
-}
-
-:deep(.zxm-picker-input > input) {
-  color: #a1dff8 !important;
-  text-align: center !important;
-}
-
-:deep(.zxm-picker-separator) {
-  color: #a1dff8 !important;
-}
-
-:deep(.zxm-picker-active-bar) {
-  display: none !important;
-}
-
-:deep(.zxm-picker-suffix) {
-  color: #a1dff8 !important;
-}
-
-:deep(.zxm-switch) {
-  min-width: 48px !important;
-}
-
-:deep(.zxm-switch-checked) {
-  background-color: rgb(15 64 89) !important;
-}
-
-:deep(.zxm-switch-handle::before) {
-  background-color: rgb(33 179 247) !important;
-}
-
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
 </style>

src/views/vent/home/configurable/belt/components/detail/CustomTableBelt.vue

@@ -21,153 +21,153 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, defineProps, ref } from 'vue';
-import _ from 'lodash';
-import { useAutoScroll } from '/@/hooks/core/useAutoScroll';
+  import { computed, ref } from 'vue';
+  import { get as GET, isNil } from 'lodash-es';
+  import { useAutoScroll } from '/@/hooks/core/useAutoScroll';
 
-let props = withDefaults(
-  defineProps<{
-    /** B | C */
-    type: string;
-    autoScroll: boolean;
-    /** 列表表头配置，每个prop都有其对应的slot来提供定制化功能 */
-    columns: { prop: string; name: string }[];
-    data: any[];
-    defaultValue: string;
-  }>(),
-  {
-    type: 'B',
-    autoScroll: false,
-    columns: () => [],
-    data: () => [],
-    defaultValue: '-',
-  }
-);
+  let props = withDefaults(
+    defineProps<{
+      /** B | C */
+      type: string;
+      autoScroll: boolean;
+      /** 列表表头配置，每个prop都有其对应的slot来提供定制化功能 */
+      columns: { prop: string; name: string }[];
+      data: any[];
+      defaultValue: string;
+    }>(),
+    {
+      type: 'B',
+      autoScroll: false,
+      columns: () => [],
+      data: () => [],
+      defaultValue: '-',
+    }
+  );
 
-const scrollRef = ref(null);
-if (props.autoScroll) {
-  useAutoScroll(scrollRef);
-}
-const getStatusClass = (status) => {
-  switch (status) {
-    case '在线':
-      return 'online';
-    case '开启':
-      return 'open';
-    case '关闭':
-    case '离线':
-      return 'offline';
-    default:
-      return '';
+  const scrollRef = ref(null);
+  if (props.autoScroll) {
+    useAutoScroll(scrollRef);
   }
-};
-const flexBasis = computed(() => {
-  return Math.fround(100 / props.columns.length) + '%';
-});
+  const getStatusClass = (status) => {
+    switch (status) {
+      case '在线':
+        return 'online';
+      case '开启':
+        return 'open';
+      case '关闭':
+      case '离线':
+        return 'offline';
+      default:
+        return '';
+    }
+  };
+  const flexBasis = computed(() => {
+    return Math.fround(100 / props.columns.length) + '%';
+  });
 
-function get(o, p) {
-  const d = _.get(o, p);
-  return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
-}
+  function get(o, p) {
+    const d = GET(o, p);
+    return isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
+  }
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@import '@/design/theme.less';
+  @import '/@/design/theme.less';
+  @import '@/design/theme.less';
 
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-.table__content {
-  --image-content-label: url('/@/assets/images/beltFire/4-1.png');
-  --image-content-text: url('/@/assets/images/beltFire/4-2.png');
-  --image-content-label-d: url(/@/assets/images/home-container/configurable/minehome/content-label.png);
-  --image-content-body-d: url('/@/assets/images/home-container/configurable/minehome/content-body.png');
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 5px 0;
-
-  .table__content_label {
-    padding: 10px;
-    width: 400px;
-    height: 32px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    .label-t {
-      text-align: center;
-      font-size: 14px;
-    }
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
   }
-  .table__content_label_C {
-    background-position: center 100%;
-    background-size: 100% 40px;
-    background-repeat: no-repeat;
-    background-image: var(--image-content-label);
-    height: 40px;
-    .label-t {
-      background-repeat: no-repeat;
-      background-size: 80% auto;
-      background-position: center;
-      background-image: var(--image-list-head);
-    }
-  }
-
-  .table__content_list {
-    height: calc(100% - 32px);
-    width: 400px;
+  .table__content {
+    --image-content-label: url('/@/assets/images/beltFire/4-1.png');
+    --image-content-text: url('/@/assets/images/beltFire/4-2.png');
+    --image-content-label-d: url(/@/assets/images/home-container/configurable/minehome/content-label.png);
+    --image-content-body-d: url('/@/assets/images/home-container/configurable/minehome/content-body.png');
+    height: 100%;
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
+    align-items: center;
     padding: 5px 0;
-    box-sizing: border-box;
-    overflow-y: auto;
-    .table__content_list_row {
-      width: 100%;
+
+    .table__content_label {
+      padding: 10px;
+      width: 400px;
+      height: 32px;
       display: flex;
       justify-content: space-around;
       align-items: center;
-      color: #fff;
-      margin-bottom: 5px;
-      span {
-        display: inline-block;
+      .label-t {
         text-align: center;
+        font-size: 14px;
       }
     }
-  }
-  .table__content_list_C {
-    .table__content_list_row {
-      min-height: 50px;
-      background-size: 100% auto;
+    .table__content_label_C {
+      background-position: center 100%;
+      background-size: 100% 40px;
       background-repeat: no-repeat;
-      background-position: center bottom;
-      background-image: var(--image-content-text);
+      background-image: var(--image-content-label);
+      height: 40px;
+      .label-t {
+        background-repeat: no-repeat;
+        background-size: 80% auto;
+        background-position: center;
+        background-image: var(--image-list-head);
+      }
     }
-  }
-  .status-dot {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    margin-right: 4px;
-  }
 
-  .status-dot.online {
-    background-color: #46ff9c;
-    box-shadow: 0 0 6px 2px rgba(76, 248, 142, 0.6);
-  }
+    .table__content_list {
+      height: calc(100% - 32px);
+      width: 400px;
+      display: flex;
+      flex-direction: column;
+      padding: 5px 0;
+      box-sizing: border-box;
+      overflow-y: auto;
+      .table__content_list_row {
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        margin-bottom: 5px;
+        span {
+          display: inline-block;
+          text-align: center;
+        }
+      }
+    }
+    .table__content_list_C {
+      .table__content_list_row {
+        min-height: 50px;
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        background-position: center bottom;
+        background-image: var(--image-content-text);
+      }
+    }
+    .status-dot {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      margin-right: 4px;
+    }
 
-  .status-dot.open {
-    background-color: #2cb6ff;
-    box-shadow: 0 0 6px 2px rgba(34, 125, 245, 0.425);
-  }
+    .status-dot.online {
+      background-color: #46ff9c;
+      box-shadow: 0 0 6px 2px rgba(76, 248, 142, 0.6);
+    }
+
+    .status-dot.open {
+      background-color: #2cb6ff;
+      box-shadow: 0 0 6px 2px rgba(34, 125, 245, 0.425);
+    }
 
-  .status-dot.offline,
-  .status-dot.closed {
-    background-color: gray;
-    box-shadow: 0 0 6px 2px rgba(105, 105, 105, 0.6);
+    .status-dot.offline,
+    .status-dot.closed {
+      background-color: gray;
+      box-shadow: 0 0 6px 2px rgba(105, 105, 105, 0.6);
+    }
   }
-}
 </style>

src/views/vent/home/configurable/belt/components/detail/gateBoard.vue

@@ -55,368 +55,368 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, defineProps, watch, inject, onUnmounted } from 'vue';
-import { getFormattedText } from '../../../hooks/helper';
-import HandleModal from '/@/views/vent/monitorManager/gateMonitor/modal.vue';
-import { message } from 'ant-design-vue';
-import { deviceControlApi } from '/@/api/vent/index';
-import gateSVG from '../../../../../monitorManager/gateMonitor/components/gateDualSVG.vue';
-const props = defineProps<{
-  config: {
+  import { ref, onMounted, watch, inject, onUnmounted } from 'vue';
+  import { getFormattedText } from '../../../hooks/helper';
+  import HandleModal from '/@/views/vent/monitorManager/gateMonitor/modal.vue';
+  import { message } from 'ant-design-vue';
+  import { deviceControlApi } from '/@/api/vent/index';
+  import gateSVG from '../../../../../monitorManager/gateMonitor/components/gateDualSVG.vue';
+  const props = defineProps<{
     config: {
-      tilte: string;
-      items: {
-        value: string;
-        label: string;
-        trans?: any;
-      }[];
+      config: {
+        tilte: string;
+        items: {
+          value: string;
+          label: string;
+          trans?: any;
+        }[];
+      };
     };
-  };
-  data: {
-    [key: string]: any;
-  }[];
-}>();
-const refreshDeviceData = inject<(deviceId?: string) => Promise<void>>('refreshDeviceData', async () => {});
-
-const modalIsShow = ref<boolean>(false); // 是否显示模态框
-const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
-const modalType = ref(''); // 模态框内容显示类型，设备操作类型
-const paramcode = ref(''); // 模态框操作代码
-const deviceID = ref('');
-const deviceType = ref('');
-const globalConfig = inject<any>('globalConfig');
-const childRefs = ref<(InstanceType<typeof gateSVG> | null)[]>([]);
-const isOperating = ref(false); // 防止重复操作
-const setChildRef = (el, index) => {
-  if (el) {
-    childRefs.value[index] = el;
-  }
-};
+    data: {
+      [key: string]: any;
+    }[];
+  }>();
+  const refreshDeviceData = inject<(deviceId?: string) => Promise<void>>('refreshDeviceData', async () => {});
 
-function monitorAnimation(selectData, index) {
-  if (!selectData?.readData) return;
-  const frontOpen = selectData.readData.frontGateOpen === '1';
-  const midOpen = selectData.readData.midGateOpen === '1';
-  const rearOpen = selectData.readData.rearGateOpen === '1';
-  if (childRefs.value[index]) {
-    childRefs.value[index].animate(frontOpen, midOpen, rearOpen);
-  }
-}
+  const modalIsShow = ref<boolean>(false); // 是否显示模态框
+  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
+  const modalType = ref(''); // 模态框内容显示类型，设备操作类型
+  const paramcode = ref(''); // 模态框操作代码
+  const deviceID = ref('');
+  const deviceType = ref('');
+  const globalConfig = inject<any>('globalConfig');
+  const childRefs = ref<(InstanceType<typeof gateSVG> | null)[]>([]);
+  const isOperating = ref(false); // 防止重复操作
+  const setChildRef = (el, index) => {
+    if (el) {
+      childRefs.value[index] = el;
+    }
+  };
 
-const playAnimation = (title, flag, id, type) => {
-  if (isOperating.value) {
-    message.warning('正在执行操作，请稍后再试');
-    return;
-  }
-  modalType.value = flag + '';
-  modalTitle.value = title;
-  modalIsShow.value = true;
-  deviceID.value = id;
-  deviceType.value = type;
-};
+  function monitorAnimation(selectData, index) {
+    if (!selectData?.readData) return;
+    const frontOpen = selectData.readData.frontGateOpen === '1';
+    const midOpen = selectData.readData.midGateOpen === '1';
+    const rearOpen = selectData.readData.rearGateOpen === '1';
+    if (childRefs.value[index]) {
+      childRefs.value[index].animate(frontOpen, midOpen, rearOpen);
+    }
+  }
 
-// 控制
-async function handleOK(passWord, handlerState, value?) {
-  console.log('handleOK', passWord, handlerState, value);
-  if (!passWord && !globalConfig?.simulatedPassword) {
-    message.warning('请输入密码');
-    return;
-  }
-  if (isOperating.value) {
-    message.warning('正在执行操作，请稍后再试');
-    return;
-  }
-  isOperating.value = true;
-  let data = {
-    deviceid: deviceID.value,
-    devicetype: deviceType.value,
-    paramcode: handlerState,
-    password: passWord || globalConfig?.simulatedPassword,
-    value: value ? value : null,
+  const playAnimation = (title, flag, id, type) => {
+    if (isOperating.value) {
+      message.warning('正在执行操作，请稍后再试');
+      return;
+    }
+    modalType.value = flag + '';
+    modalTitle.value = title;
+    modalIsShow.value = true;
+    deviceID.value = id;
+    deviceType.value = type;
   };
-  try {
-    const res = await deviceControlApi(data);
-    if (res.success) {
-      message.success('指令已下发成功！');
-      handleCancel();
-      await refreshDeviceData();
-    } else {
-      message.error(res.message || '指令下发失败');
+
+  // 控制
+  async function handleOK(passWord, handlerState, value?) {
+    console.log('handleOK', passWord, handlerState, value);
+    if (!passWord && !globalConfig?.simulatedPassword) {
+      message.warning('请输入密码');
+      return;
+    }
+    if (isOperating.value) {
+      message.warning('正在执行操作，请稍后再试');
+      return;
+    }
+    isOperating.value = true;
+    let data = {
+      deviceid: deviceID.value,
+      devicetype: deviceType.value,
+      paramcode: handlerState,
+      password: passWord || globalConfig?.simulatedPassword,
+      value: value ? value : null,
+    };
+    try {
+      const res = await deviceControlApi(data);
+      if (res.success) {
+        message.success('指令已下发成功！');
+        handleCancel();
+        await refreshDeviceData();
+      } else {
+        message.error(res.message || '指令下发失败');
+        handleCancel();
+      }
+    } catch (error) {
+      message.error('设备控制失败，请重试');
       handleCancel();
+    } finally {
+      // 延迟重置操作状态，防止快速重复点击
+      setTimeout(() => {
+        isOperating.value = false;
+      }, 2000);
     }
-  } catch (error) {
-    message.error('设备控制失败，请重试');
-    handleCancel();
-  } finally {
-    // 延迟重置操作状态，防止快速重复点击
-    setTimeout(() => {
-      isOperating.value = false;
-    }, 2000);
-  }
-}
+  }
 
-function handleCancel() {
-  modalIsShow.value = false;
-  modalTitle.value = '';
-  modalType.value = '';
-  deviceID.value = '';
-  deviceType.value = '';
-}
-watch(
-  () => props.data,
-  (newData) => {
-    if (!newData || !newData.length) return;
-    newData.forEach((item, index) => {
-      monitorAnimation(item, index);
-    });
-  },
-  {
-    deep: true,
-    immediate: true, // 初始化立刻执行
-  }
-);
+  function handleCancel() {
+    modalIsShow.value = false;
+    modalTitle.value = '';
+    modalType.value = '';
+    deviceID.value = '';
+    deviceType.value = '';
+  }
+  watch(
+    () => props.data,
+    (newData) => {
+      if (!newData || !newData.length) return;
+      newData.forEach((item, index) => {
+        monitorAnimation(item, index);
+      });
+    },
+    {
+      deep: true,
+      immediate: true, // 初始化立刻执行
+    }
+  );
 </script>
 
 <style scoped lang="less">
-.wind-control-page {
-  width: 100%;
-  height: 100%;
-  margin-top: -20px;
-}
+  .wind-control-page {
+    width: 100%;
+    height: 100%;
+    margin-top: -20px;
+  }
 
-.title {
-  margin-top: 20px;
-  background: url('/@/assets/images/beltFire/yjkf/1-2title.png') no-repeat;
-  background-size: 100% 100%;
-  height: 50px;
-}
+  .title {
+    margin-top: 20px;
+    background: url('/@/assets/images/beltFire/yjkf/1-2title.png') no-repeat;
+    background-size: 100% 100%;
+    height: 50px;
+  }
 
-.panel-title {
-  height: 40px;
-  color: #fff;
-  border-radius: 4px;
-  font-size: 14px;
-  line-height: 50px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.tab-title {
-  margin-top: 12px;
-  margin-left: 20px;
-  background: linear-gradient(180deg, #34b7f1 0%, #1890ff 100%);
-  border: 1px solid #40c4ff;
-  color: #fff;
-  font-size: 12px;
-  padding: 2px 8px;
-  height: 24px;
-  box-shadow: 0 0 6px 2px rgba(24, 144, 255, 0.4);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.btn {
-  margin-top: 22px;
-  margin-right: 20px;
-  background: linear-gradient(180deg, #34b7f1 0%, #1890ff 100%);
-  border: 1px solid #40c4ff;
-  color: #fff;
-  font-size: 12px;
-  padding: 2px 8px;
-  height: 24px;
-  box-shadow: 0 0 6px 2px rgba(24, 144, 255, 0.4);
-}
-.content-layout {
-  display: flex;
-  height: calc(100% - 54px);
-  width: 100%;
-}
+  .panel-title {
+    height: 40px;
+    color: #fff;
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 50px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .tab-title {
+    margin-top: 12px;
+    margin-left: 20px;
+    background: linear-gradient(180deg, #34b7f1 0%, #1890ff 100%);
+    border: 1px solid #40c4ff;
+    color: #fff;
+    font-size: 12px;
+    padding: 2px 8px;
+    height: 24px;
+    box-shadow: 0 0 6px 2px rgba(24, 144, 255, 0.4);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .btn {
+    margin-top: 22px;
+    margin-right: 20px;
+    background: linear-gradient(180deg, #34b7f1 0%, #1890ff 100%);
+    border: 1px solid #40c4ff;
+    color: #fff;
+    font-size: 12px;
+    padding: 2px 8px;
+    height: 24px;
+    box-shadow: 0 0 6px 2px rgba(24, 144, 255, 0.4);
+  }
+  .content-layout {
+    display: flex;
+    height: calc(100% - 54px);
+    width: 100%;
+  }
 
-.center-panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.left-panel {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 10px;
-}
+  .center-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .left-panel {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 10px;
+  }
 
-.door-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  flex: 1;
-}
+  .door-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    flex: 1;
+  }
 
-.door-card {
-  background: url('/@/assets/images/beltFire/yjkf/2-1.png') no-repeat;
-  background-size: 100% 100%;
-  border-radius: 4px;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.door-position {
-  background: url('/@/assets/images/beltFire/yjkf/1-5.png') no-repeat;
-  background-size: 100% 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  color: #fff;
-}
-.door-position .position {
-  background: url('/@/assets/images/beltFire/yjkf/1-1-1.svg') no-repeat;
-  background-size: 100% 100%;
-  width: 16px;
-  height: 16px;
-  margin-top: 8px;
-  margin-left: 8px;
-}
-.door-position .door-name {
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  font-size: 12px;
-  font-weight: bold;
-  color: #c4ebff;
-  margin: 0 25px 0 25px;
-  line-height: 33px;
-  font-style: italic;
-}
-.door-btn {
-  background: linear-gradient(180deg, #34b7f1 0%, #1890ff 100%);
-  border: 1px solid #40c4ff;
-  color: #fff;
-  font-size: 12px;
-  padding: 2px 8px;
-  height: 24px;
-  margin: auto;
-  margin-left: 3px;
-  box-shadow: 0 0 6px 2px rgba(24, 144, 255, 0.4);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.door-header {
-  display: flex;
-  flex-direction: row;
-  gap: 6px;
-}
-.info-column {
-  background: url('/@/assets/images/beltFire/yjkf/1-3-1.png') no-repeat;
-  background-size: 100% 100%;
-  height: 60px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  flex: 1;
-}
-.col-label {
-  padding-top: 5px;
-  font-size: 12px;
-  color: #fff;
-  font-weight: normal;
-}
-.col-value {
-  font-size: 12px;
-  font-weight: bold;
-  font-style: italic;
-  color: #fff;
-}
-.col {
-  flex: 1;
-  padding: 0 4px;
-}
-.status-dot {
-  position: relative;
-  padding-left: 12px;
-}
-.status-open::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #52c41a;
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  box-shadow: 0 0 6px 2px rgba(82, 196, 26, 0.6);
-}
-.status-close::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #3a3a3a;
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  box-shadow: 0 0 6px 2px rgba(90, 90, 90, 0.6);
-}
-.one-key-btn {
-  padding: 2px 8px;
-  font-size: 12px;
-  background: #1890ff;
-  border-color: #1890ff;
-}
-.model-placeholder {
-  width: 100%;
-  height: 180px;
-  background: url('/@/assets/images/beltFire/yjkf/1-4-1.png') no-repeat;
-  background-size: 100% 100%;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.model-img {
-  width: 22%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  gap: 10px;
-  object-fit: cover;
-}
-.right-panel {
-  width: 22%;
-  display: flex;
-  flex-direction: column;
-}
-.video-card {
-  background: rgba(15, 36, 87, 0.6);
-  border: 1px solid #2a52be;
-  border-radius: 4px;
-  padding: 12px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-.video-title {
-  margin: 0;
-  font-size: 18px;
-  color: #fff;
-  text-align: center;
-}
-.video-placeholder {
-  flex: 1;
-}
-.video-frame {
-  width: 100%;
-  height: 100%;
-  border: 2px solid #2a52be;
-  border-radius: 4px;
-  background: transparent;
-  position: relative;
-}
-</style>
+  .door-card {
+    background: url('/@/assets/images/beltFire/yjkf/2-1.png') no-repeat;
+    background-size: 100% 100%;
+    border-radius: 4px;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .door-position {
+    background: url('/@/assets/images/beltFire/yjkf/1-5.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    color: #fff;
+  }
+  .door-position .position {
+    background: url('/@/assets/images/beltFire/yjkf/1-1-1.svg') no-repeat;
+    background-size: 100% 100%;
+    width: 16px;
+    height: 16px;
+    margin-top: 8px;
+    margin-left: 8px;
+  }
+  .door-position .door-name {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    font-size: 12px;
+    font-weight: bold;
+    color: #c4ebff;
+    margin: 0 25px 0 25px;
+    line-height: 33px;
+    font-style: italic;
+  }
+  .door-btn {
+    background: linear-gradient(180deg, #34b7f1 0%, #1890ff 100%);
+    border: 1px solid #40c4ff;
+    color: #fff;
+    font-size: 12px;
+    padding: 2px 8px;
+    height: 24px;
+    margin: auto;
+    margin-left: 3px;
+    box-shadow: 0 0 6px 2px rgba(24, 144, 255, 0.4);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .door-header {
+    display: flex;
+    flex-direction: row;
+    gap: 6px;
+  }
+  .info-column {
+    background: url('/@/assets/images/beltFire/yjkf/1-3-1.png') no-repeat;
+    background-size: 100% 100%;
+    height: 60px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    flex: 1;
+  }
+  .col-label {
+    padding-top: 5px;
+    font-size: 12px;
+    color: #fff;
+    font-weight: normal;
+  }
+  .col-value {
+    font-size: 12px;
+    font-weight: bold;
+    font-style: italic;
+    color: #fff;
+  }
+  .col {
+    flex: 1;
+    padding: 0 4px;
+  }
+  .status-dot {
+    position: relative;
+    padding-left: 12px;
+  }
+  .status-open::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #52c41a;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    box-shadow: 0 0 6px 2px rgba(82, 196, 26, 0.6);
+  }
+  .status-close::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #3a3a3a;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    box-shadow: 0 0 6px 2px rgba(90, 90, 90, 0.6);
+  }
+  .one-key-btn {
+    padding: 2px 8px;
+    font-size: 12px;
+    background: #1890ff;
+    border-color: #1890ff;
+  }
+  .model-placeholder {
+    width: 100%;
+    height: 180px;
+    background: url('/@/assets/images/beltFire/yjkf/1-4-1.png') no-repeat;
+    background-size: 100% 100%;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .model-img {
+    width: 22%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    gap: 10px;
+    object-fit: cover;
+  }
+  .right-panel {
+    width: 22%;
+    display: flex;
+    flex-direction: column;
+  }
+  .video-card {
+    background: rgba(15, 36, 87, 0.6);
+    border: 1px solid #2a52be;
+    border-radius: 4px;
+    padding: 12px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .video-title {
+    margin: 0;
+    font-size: 18px;
+    color: #fff;
+    text-align: center;
+  }
+  .video-placeholder {
+    flex: 1;
+  }
+  .video-frame {
+    width: 100%;
+    height: 100%;
+    border: 2px solid #2a52be;
+    border-radius: 4px;
+    background: transparent;
+    position: relative;
+  }
+</style>

src/views/vent/home/configurable/belt/components/detail/workFaceHistory.vue

@@ -4,22 +4,22 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, defineProps } from 'vue';
-// import HistoryTable from '../../comment/HistoryTable.vue';
-import HistoryTable from '/@/views/vent/comment/history/HistoryTable.vue';
-const props = defineProps({
-  deviceType: {
-    type: String,
-    required: true,
-  },
-  deviceId: {
-    type: String,
-    required: true,
-  },
-});
+  import { ref } from 'vue';
+  // import HistoryTable from '../../comment/HistoryTable.vue';
+  import HistoryTable from '/@/views/vent/comment/history/HistoryTable.vue';
+  const props = defineProps({
+    deviceType: {
+      type: String,
+      required: true,
+    },
+    deviceId: {
+      type: String,
+      required: true,
+    },
+  });
 </script>
 <style lang="less" scoped>
-.history-box {
-  pointer-events: auto;
-}
+  .history-box {
+    pointer-events: auto;
+  }
 </style>

src/views/vent/home/configurable/belt/configurable.api.ts

@@ -1,5 +1,4 @@
 import { defHttp } from '/@/utils/http/axios';
-import _ from 'lodash';
 
 enum Api {
   monitorAndAlertBelt = '/ventanaly-device/monitor/disaster/monitorAndAlertBelt',

src/views/vent/home/configurable/belt/threejs/sprinklerPanel.vue

@@ -56,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, defineProps, onMounted, onUnmounted } from 'vue';
+  import { ref, onMounted, onUnmounted } from 'vue';
   import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
   import type { Scene, Camera } from 'three';
 

src/views/vent/home/configurable/blue/components/ModuleFireNew.vue

@@ -31,202 +31,202 @@
 </template>
 
 <script setup lang="ts">
-import ContentFireNew from './content-FireNew.vue';
-import { defineProps, defineEmits, computed, watch } from 'vue';
-import { useInitModule } from '../../hooks/useInit';
-import { getFormattedText } from '../../hooks/helper';
-import { openWindow } from '/@/utils';
-// import { ModuleProps } from '../types';
-
-const props = defineProps<{
-  /** 配置的详细模块信息 */
-  moduleData: any;
-  /** 配置的详细样式信息 */
-  showStyle: any;
-  /** 该模块配置中的设备标识符 */
-  deviceType: string;
-  /** api返回的数据 */
-  data: any;
-  moduleName: string;
-  visible: boolean;
-}>();
-const emit = defineEmits(['close', 'select']);
-
-const { header } = props.moduleData;
-
-const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
-
-const style = computed(() => {
-  const size = props.showStyle.size;
-  const position = props.showStyle.position;
-  return size + position;
-});
-
-// 根据配置里的定位判断应该使用哪个module组件
-const daneClass = computed(() => {
-  const position = props.showStyle.position;
-  const size = props.showStyle.size;
-  const [_, width] = size.match(/width:([0-9]+)px/) || [];
-  if (position.includes('bottom') || parseInt(width) > 800) {
-    return 'dane-w';
-  }
-  if (position.includes('left')) {
-    return 'dane-m';
-  }
-  if (position.includes('right')) {
-    return 'dane-m';
-  }
-  // return 'dane-m';
-  return 'dane-m'; // 默认返回顶部模块
-});
-//切换时间选项
-// function onChange(value, dateString) {
-//   console.log('Selected Time: ', value);
-//   console.log('Formatted Selected Time: ', dateString);
-// }
-// function onOk(val) {
-//   console.log('onOk: ', val);
-// }
-
-//下拉框选项切换
-function selectHandler(id) {
-  selectedDeviceID.value = id;
-  emit('select', selectedDevice);
-}
-
-function redirectTo() {
-  const { to } = props.moduleData;
-  if (!to) return;
-  openWindow(to);
-}
-
-watch(
-  () => props.data,
-  (d) => {
-    init(d);
-    selectedDeviceID.value = options.value[0]?.value;
-  },
-  {
-    immediate: true,
-  }
-);
+  import ContentFireNew from './content-FireNew.vue';
+  import { defineEmits, computed, watch } from 'vue';
+  import { useInitModule } from '../../hooks/useInit';
+  import { getFormattedText } from '../../hooks/helper';
+  import { openWindow } from '/@/utils';
+  // import { ModuleProps } from '../types';
+
+  const props = defineProps<{
+    /** 配置的详细模块信息 */
+    moduleData: any;
+    /** 配置的详细样式信息 */
+    showStyle: any;
+    /** 该模块配置中的设备标识符 */
+    deviceType: string;
+    /** api返回的数据 */
+    data: any;
+    moduleName: string;
+    visible: boolean;
+  }>();
+  const emit = defineEmits(['close', 'select']);
+
+  const { header } = props.moduleData;
+
+  const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
+
+  const style = computed(() => {
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
+    return size + position;
+  });
+
+  // 根据配置里的定位判断应该使用哪个module组件
+  const daneClass = computed(() => {
+    const position = props.showStyle.position;
+    const size = props.showStyle.size;
+    const [_, width] = size.match(/width:([0-9]+)px/) || [];
+    if (position.includes('bottom') || parseInt(width) > 800) {
+      return 'dane-w';
+    }
+    if (position.includes('left')) {
+      return 'dane-m';
+    }
+    if (position.includes('right')) {
+      return 'dane-m';
+    }
+    // return 'dane-m';
+    return 'dane-m'; // 默认返回顶部模块
+  });
+  //切换时间选项
+  // function onChange(value, dateString) {
+  //   console.log('Selected Time: ', value);
+  //   console.log('Formatted Selected Time: ', dateString);
+  // }
+  // function onOk(val) {
+  //   console.log('onOk: ', val);
+  // }
+
+  //下拉框选项切换
+  function selectHandler(id) {
+    selectedDeviceID.value = id;
+    emit('select', selectedDevice);
+  }
+
+  function redirectTo() {
+    const { to } = props.moduleData;
+    if (!to) return;
+    openWindow(to);
+  }
+
+  watch(
+    () => props.data,
+    (d) => {
+      init(d);
+      selectedDeviceID.value = options.value[0]?.value;
+    },
+    {
+      immediate: true,
+    }
+  );
 </script>
 
 <style scoped lang="less">
-@import '/@/design/theme.less';
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-@{theme-deepblue} {
-  .dane-bd {
-    --image-Content: url('@/assets/images/fireNew/4-3.png');
-    --image-Select: url('@/assets/images/fireNew/5.png');
+  @import '/@/design/theme.less';
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
   }
-}
-
-.dane-bd {
-  --image-Select: url('@/assets/images/fireNew/5.png');
-  --image-Content: url('@/assets/images/fireNew/4-3.png');
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-
-  .dane-title {
-    width: 94%;
-    height: 40px;
-    text-align: center;
-    padding-top: 9px;
-
-    .common-navL {
-      position: relative;
-      align-items: center;
-      color: #fff;
-      font-size: 13px;
-      font-weight: bold;
-      font-family: 'douyuFont';
+  @{theme-deepblue} {
+    .dane-bd {
+      --image-Content: url('@/assets/images/fireNew/4-3.png');
+      --image-Select: url('@/assets/images/fireNew/5.png');
     }
   }
 
-  .dane-content {
-    height: calc(100% - 38px);
-    box-sizing: border-box;
-    border-top: none;
-    .common-navR {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--image-Select) no-repeat;
-      background-size: 100% 100%;
-      width: 87%;
-      margin-left: 30px;
+  .dane-bd {
+    --image-Select: url('@/assets/images/fireNew/5.png');
+    --image-Content: url('@/assets/images/fireNew/4-3.png');
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+
+    .dane-title {
+      width: 94%;
+      height: 40px;
+      text-align: center;
+      padding-top: 9px;
+
+      .common-navL {
+        position: relative;
+        align-items: center;
+        color: #fff;
+        font-size: 13px;
+        font-weight: bold;
+        font-family: 'douyuFont';
+      }
+    }
+
+    .dane-content {
+      height: calc(100% - 38px);
+      box-sizing: border-box;
+      border-top: none;
+      .common-navR {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--image-Select) no-repeat;
+        background-size: 100% 100%;
+        width: 87%;
+        margin-left: 30px;
+      }
     }
   }
-}
-.dane-m {
-  background: var(--image-Content) no-repeat;
-  background-size: 100% 100%;
-}
-:deep(.zxm-select-selector) {
-  height: 22px !important;
-  border: none !important;
-  // background-color: rgb(15 64 88) !important;
-  background-color: transparent !important;
-  color: #8087a1 !important;
-}
-
-:deep(.zxm-select-selection-placeholder) {
-  color: #8087a1 !important;
-}
-
-:deep(.zxm-select-arrow) {
-  color: #8087a1 !important;
-}
-
-:deep(.zxm-picker) {
-  border: none !important;
-  background-color: rgb(15 64 88) !important;
-  box-shadow: none;
-  color: #a1dff8 !important;
-}
-
-:deep(.zxm-picker-input > input) {
-  color: #a1dff8 !important;
-  text-align: center !important;
-}
-
-:deep(.zxm-picker-separator) {
-  color: #a1dff8 !important;
-}
-
-:deep(.zxm-picker-active-bar) {
-  display: none !important;
-}
-
-:deep(.zxm-picker-suffix) {
-  color: #a1dff8 !important;
-}
-
-:deep(.zxm-switch) {
-  min-width: 48px !important;
-}
-
-:deep(.zxm-switch-checked) {
-  background-color: rgb(15 64 89) !important;
-}
-
-:deep(.zxm-switch-handle::before) {
-  background-color: rgb(33 179 247) !important;
-}
-
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
-
-.zxm-select-single.zxm-select-sm:not(.zxm-select-customize-input) .zxm-select-selector::after,
-.zxm-select-single.zxm-select-sm:not(.zxm-select-customize-input) .zxm-select-selector .zxm-select-selection-item,
-.zxm-select-single.zxm-select-sm:not(.zxm-select-customize-input) .zxm-select-selector .zxm-select-selection-placeholder {
-  line-height: 27px !important;
-}
+  .dane-m {
+    background: var(--image-Content) no-repeat;
+    background-size: 100% 100%;
+  }
+  :deep(.zxm-select-selector) {
+    height: 22px !important;
+    border: none !important;
+    // background-color: rgb(15 64 88) !important;
+    background-color: transparent !important;
+    color: #8087a1 !important;
+  }
+
+  :deep(.zxm-select-selection-placeholder) {
+    color: #8087a1 !important;
+  }
+
+  :deep(.zxm-select-arrow) {
+    color: #8087a1 !important;
+  }
+
+  :deep(.zxm-picker) {
+    border: none !important;
+    background-color: rgb(15 64 88) !important;
+    box-shadow: none;
+    color: #a1dff8 !important;
+  }
+
+  :deep(.zxm-picker-input > input) {
+    color: #a1dff8 !important;
+    text-align: center !important;
+  }
+
+  :deep(.zxm-picker-separator) {
+    color: #a1dff8 !important;
+  }
+
+  :deep(.zxm-picker-active-bar) {
+    display: none !important;
+  }
+
+  :deep(.zxm-picker-suffix) {
+    color: #a1dff8 !important;
+  }
+
+  :deep(.zxm-switch) {
+    min-width: 48px !important;
+  }
+
+  :deep(.zxm-switch-checked) {
+    background-color: rgb(15 64 89) !important;
+  }
+
+  :deep(.zxm-switch-handle::before) {
+    background-color: rgb(33 179 247) !important;
+  }
+
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
+
+  .zxm-select-single.zxm-select-sm:not(.zxm-select-customize-input) .zxm-select-selector::after,
+  .zxm-select-single.zxm-select-sm:not(.zxm-select-customize-input) .zxm-select-selector .zxm-select-selection-item,
+  .zxm-select-single.zxm-select-sm:not(.zxm-select-customize-input) .zxm-select-selector .zxm-select-selection-placeholder {
+    line-height: 27px !important;
+  }
 </style>

src/views/vent/home/configurable/blue/components/ModuleFireNewDual.vue

@@ -47,232 +47,232 @@
 </template>
 
 <script setup lang="ts">
-import Content from './content-FireNew.vue';
-import { defineProps, defineEmits, computed, ref, watch } from 'vue';
-import { ModuleData, ShowStyle } from '../../../../deviceManager/configurationTable/types';
-import { useInitModule } from '../../hooks/useInit';
+  import Content from './content-FireNew.vue';
+  import { defineEmits, computed, ref, watch } from 'vue';
+  import { ModuleData, ShowStyle } from '../../../../deviceManager/configurationTable/types';
+  import { useInitModule } from '../../hooks/useInit';
 
-const props = defineProps<{
-  moduleDataA: ModuleData;
-  moduleNameA: string;
-  deviceTypeA: string;
-  moduleDataB: ModuleData;
-  moduleNameB: string;
-  deviceTypeB: string;
-  showStyle: ShowStyle;
-  visible: boolean;
-  data: any;
-}>();
-const emit = defineEmits(['close', 'select']);
+  const props = defineProps<{
+    moduleDataA: ModuleData;
+    moduleNameA: string;
+    deviceTypeA: string;
+    moduleDataB: ModuleData;
+    moduleNameB: string;
+    deviceTypeB: string;
+    showStyle: ShowStyle;
+    visible: boolean;
+    data: any;
+  }>();
+  const emit = defineEmits(['close', 'select']);
 
-const index = ref(0);
+  const index = ref(0);
 
-const headerA = props.moduleDataA.header;
-const headerB = props.moduleDataB.header;
+  const headerA = props.moduleDataA.header;
+  const headerB = props.moduleDataB.header;
 
-const {
-  selectedDeviceID: selectedDeviceIDA,
-  selectedDevice: selectedDeviceA,
-  options: optionsA,
-  init: initA,
-} = useInitModule(props.deviceTypeA, props.moduleDataA);
-const {
-  selectedDeviceID: selectedDeviceIDB,
-  selectedDevice: selectedDeviceB,
-  options: optionsB,
-  init: initB,
-} = useInitModule(props.deviceTypeB, props.moduleDataB);
+  const {
+    selectedDeviceID: selectedDeviceIDA,
+    selectedDevice: selectedDeviceA,
+    options: optionsA,
+    init: initA,
+  } = useInitModule(props.deviceTypeA, props.moduleDataA);
+  const {
+    selectedDeviceID: selectedDeviceIDB,
+    selectedDevice: selectedDeviceB,
+    options: optionsB,
+    init: initB,
+  } = useInitModule(props.deviceTypeB, props.moduleDataB);
 
-const style = computed(() => {
-  const size = props.showStyle.size;
-  const position = props.showStyle.position;
-  return size + position;
-});
+  const style = computed(() => {
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
+    return size + position;
+  });
 
-// 根据配置里的定位判断应该使用哪个module组件
-const daneClass = computed(() => {
-  const headerPosition = props.showStyle.headerPosition;
-  const size = props.showStyle.size;
-  const [_, width] = size.match(/width:([0-9]+)px/) || [];
-  // if (position.includes('bottom') || parseInt(width) > 800) {
-  //   return 'dane-w';
-  // }
-  // if (position.includes('left')) {
-  //   return 'dane-m';
+  // 根据配置里的定位判断应该使用哪个module组件
+  const daneClass = computed(() => {
+    const headerPosition = props.showStyle.headerPosition;
+    const size = props.showStyle.size;
+    const [_, width] = size.match(/width:([0-9]+)px/) || [];
+    // if (position.includes('bottom') || parseInt(width) > 800) {
+    //   return 'dane-w';
+    // }
+    // if (position.includes('left')) {
+    //   return 'dane-m';
+    // }
+    // if (position.includes('right')) {
+    //   return 'dane-m';
+    // }
+    if (headerPosition === 'centerBottom') {
+      return 'center-Bottom';
+    }
+    if (headerPosition === 'centerTop') {
+      return 'center-Top';
+    }
+    return 'dane-m'; // 默认返回顶部模块
+  });
+
+  //切换时间选项
+  // function onChange(value, dateString) {
+  //   console.log('Selected Time: ', value);
+  //   console.log('Formatted Selected Time: ', dateString);
   // }
-  // if (position.includes('right')) {
-  //   return 'dane-m';
+  // function onOk(val) {
+  //   console.log('onOk: ', val);
   // }
-  if (headerPosition === 'centerBottom') {
-    return 'center-Bottom';
+
+  //下拉框选项切换
+  function selectHandlerA(id) {
+    selectedDeviceIDA.value = id;
+    emit('select', selectedDeviceA);
   }
-  if (headerPosition === 'centerTop') {
-    return 'center-Top';
+  function selectHandlerB(id) {
+    selectedDeviceIDB.value = id;
+    emit('select', selectedDeviceB);
   }
-  return 'dane-m'; // 默认返回顶部模块
-});
 
-//切换时间选项
-// function onChange(value, dateString) {
-//   console.log('Selected Time: ', value);
-//   console.log('Formatted Selected Time: ', dateString);
-// }
-// function onOk(val) {
-//   console.log('onOk: ', val);
-// }
-
-//下拉框选项切换
-function selectHandlerA(id) {
-  selectedDeviceIDA.value = id;
-  emit('select', selectedDeviceA);
-}
-function selectHandlerB(id) {
-  selectedDeviceIDB.value = id;
-  emit('select', selectedDeviceB);
-}
-
-watch(
-  () => props.data,
-  (d) => {
-    initA(d);
-    initB(d);
-    selectedDeviceIDA.value = optionsA.value[0]?.value;
-    selectedDeviceIDB.value = optionsB.value[0]?.value;
-  },
-  {
-    immediate: true,
-  }
-);
+  watch(
+    () => props.data,
+    (d) => {
+      initA(d);
+      initB(d);
+      selectedDeviceIDA.value = optionsA.value[0]?.value;
+      selectedDeviceIDB.value = optionsB.value[0]?.value;
+    },
+    {
+      immediate: true,
+    }
+  );
 </script>
 
 <style scoped lang="less">
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
+  }
+  @{theme-deepblue} {
+    .dane-bd {
+      --image-CenterBottom: url('@/assets/images/fireNew/4-2.png');
+      --image-CenterTop: url('@/assets/images/fireNew/3-1.png');
+    }
+  }
 
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-@{theme-deepblue} {
   .dane-bd {
     --image-CenterBottom: url('@/assets/images/fireNew/4-2.png');
     --image-CenterTop: url('@/assets/images/fireNew/3-1.png');
-  }
-}
-
-.dane-bd {
-  --image-CenterBottom: url('@/assets/images/fireNew/4-2.png');
-  --image-CenterTop: url('@/assets/images/fireNew/3-1.png');
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-repeat: no-repeat;
-  background-position: center top;
-  background-size: 100% auto;
-  z-index: 2;
-  .dane-title {
-    display: flex;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: space-between;
+    position: absolute;
     width: 100%;
-    height: 34px;
-    padding: 20px 173px 15px 133px;
-    .common-navL {
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center top;
+    background-size: 100% auto;
+    z-index: 2;
+    .dane-title {
       display: flex;
-      position: relative;
+      box-sizing: border-box;
       align-items: center;
-      color: #fff;
-      font-size: 15px;
-      font-family: 'douyuFont';
-
-      .common-navR {
+      justify-content: space-between;
+      width: 100%;
+      height: 34px;
+      padding: 20px 173px 15px 133px;
+      .common-navL {
         display: flex;
+        position: relative;
         align-items: center;
-        justify-content: flex-end;
-        .common-navR-select {
-          background: url('@/assets/images/fireNew/4-1.png') no-repeat;
-          background-size: 100% 100%;
+        color: #fff;
+        font-size: 15px;
+        font-family: 'douyuFont';
+
+        .common-navR {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          .common-navR-select {
+            background: url('@/assets/images/fireNew/4-1.png') no-repeat;
+            background-size: 100% 100%;
+          }
         }
       }
     }
+    .dane-content {
+      height: calc(100% - 34px);
+      box-sizing: border-box;
+      border-top: none;
+    }
+  }
+  .center-Top {
+    background: var(--image-CenterTop) no-repeat;
+    background-size: 100% 100%;
   }
-  .dane-content {
-    height: calc(100% - 34px);
-    box-sizing: border-box;
-    border-top: none;
+  .center-Bottom {
+    background: var(--image-CenterBottom) no-repeat;
+    background-size: 100% 100%;
+  }
+  .dane-m {
+    background-image: var(--image-MidBottom);
+    background-size: 100% 100%;
   }
-}
-.center-Top {
-  background: var(--image-CenterTop) no-repeat;
-  background-size: 100% 100%;
-}
-.center-Bottom {
-  background: var(--image-CenterBottom) no-repeat;
-  background-size: 100% 100%;
-}
-.dane-m {
-  background-image: var(--image-MidBottom);
-  background-size: 100% 100%;
-}
 
-.deactived {
-  cursor: pointer;
-  color: #8087a1;
-}
+  .deactived {
+    cursor: pointer;
+    color: #8087a1;
+  }
 
-:deep(.zxm-select-selector) {
-  height: 22px !important;
-  border: none !important;
-  // background-color: rgb(15 64 88) !important;
-  background-color: transparent !important;
-  color: #8087a1 !important;
-}
+  :deep(.zxm-select-selector) {
+    height: 22px !important;
+    border: none !important;
+    // background-color: rgb(15 64 88) !important;
+    background-color: transparent !important;
+    color: #8087a1 !important;
+  }
 
-:deep(.zxm-select-selection-placeholder) {
-  color: #8087a1 !important;
-}
+  :deep(.zxm-select-selection-placeholder) {
+    color: #8087a1 !important;
+  }
 
-:deep(.zxm-select-arrow) {
-  color: #8087a1 !important;
-}
+  :deep(.zxm-select-arrow) {
+    color: #8087a1 !important;
+  }
 
-:deep(.zxm-picker) {
-  border: none !important;
-  background-color: rgb(15 64 88) !important;
-  box-shadow: none;
-  color: #a1dff8 !important;
-}
+  :deep(.zxm-picker) {
+    border: none !important;
+    background-color: rgb(15 64 88) !important;
+    box-shadow: none;
+    color: #a1dff8 !important;
+  }
 
-:deep(.zxm-picker-input > input) {
-  color: #a1dff8 !important;
-  text-align: center !important;
-}
+  :deep(.zxm-picker-input > input) {
+    color: #a1dff8 !important;
+    text-align: center !important;
+  }
 
-:deep(.zxm-picker-separator) {
-  color: #a1dff8 !important;
-}
+  :deep(.zxm-picker-separator) {
+    color: #a1dff8 !important;
+  }
 
-:deep(.zxm-picker-active-bar) {
-  display: none !important;
-}
+  :deep(.zxm-picker-active-bar) {
+    display: none !important;
+  }
 
-:deep(.zxm-picker-suffix) {
-  color: #a1dff8 !important;
-}
+  :deep(.zxm-picker-suffix) {
+    color: #a1dff8 !important;
+  }
 
-:deep(.zxm-switch) {
-  min-width: 48px !important;
-}
+  :deep(.zxm-switch) {
+    min-width: 48px !important;
+  }
 
-:deep(.zxm-switch-checked) {
-  background-color: rgb(15 64 89) !important;
-}
+  :deep(.zxm-switch-checked) {
+    background-color: rgb(15 64 89) !important;
+  }
 
-:deep(.zxm-switch-handle::before) {
-  background-color: rgb(33 179 247) !important;
-}
+  :deep(.zxm-switch-handle::before) {
+    background-color: rgb(33 179 247) !important;
+  }
 
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
 </style>

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

@@ -49,7 +49,7 @@
 
 <script setup lang="ts">
   import Content from './content.vue';
-  import { defineProps, defineEmits, computed, watch } from 'vue';
+  import { defineEmits, computed, watch } from 'vue';
   import { useInitModule } from '../hooks/useInit';
   import { getFormattedText } from '../hooks/helper';
   import { openWindow } from '/@/utils';

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

@@ -66,7 +66,7 @@
 
 <script setup lang="ts">
   import Content from './content.vue';
-  import { defineProps, defineEmits, computed, ref, watch } from 'vue';
+  import { defineEmits, computed, ref, watch } from 'vue';
   import { ModuleData, ShowStyle } from '../../../deviceManager/configurationTable/types';
   import { useInitModule } from '../hooks/useInit';
 

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

@@ -33,7 +33,7 @@
 <script setup lang="ts">
   // 引入内容组件
   import Content from './content.vue';
-  import { defineProps, defineEmits, computed, watch } from 'vue';
+  import { defineEmits, computed, watch } from 'vue';
   import { useInitModule } from '../hooks/useInit';
   import { getFormattedText } from '../hooks/helper';
   import { openWindow } from '/@/utils';

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

@@ -43,7 +43,7 @@
   import { onMounted, ref } from 'vue';
   import Chart from '/@/components/chart/Chart.vue';
   import { EChartsOption } from 'echarts';
-  import _ from 'lodash';
+  import { pad } from 'lodash-es';
   // import mapComponent from './components/3Dmap/index.vue';
 
   // 设备类别，是个枚举 TODO: 将手动换为自动获取类别
@@ -191,9 +191,9 @@
     }).then((r: any) => {
       data.value = r;
       const reference = [r.p1, r.p2, r.p3, r.p4];
-      r.eStr = _.pad(r.e.toString(), 5, '0');
-      r.m3Str = _.pad(r.m3.toString(), 5, '0');
-      r.paStr = _.pad(r.pa.toString(), 5, '0');
+      r.eStr = pad(r.e.toString(), 5, '0');
+      r.m3Str = pad(r.m3.toString(), 5, '0');
+      r.paStr = pad(r.pa.toString(), 5, '0');
       chartOptions.value.forEach((item, i) => {
         item.option = getChartOption(reference[i]);
       });

src/views/vent/home/configurable/components/belt/CustomTableBelt.vue

@@ -22,181 +22,181 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import _ from 'lodash';
-import { useAutoScroll } from '/@/hooks/core/useAutoScroll';
-let props = withDefaults(
-  defineProps<{
-    type: string;
-    autoScroll: boolean;
-    columns: { prop: string; name: string }[];
-    data: any[];
-    defaultValue: string;
-  }>(),
-  {
-    type: 'B',
-    autoScroll: false,
-    columns: () => [],
-    data: () => [],
-    defaultValue: '-',
-  }
-);
-
-const scrollRef = ref(null);
-if (props.autoScroll) {
-  useAutoScroll(scrollRef);
-}
-const showData = ref<any[]>([]);
-
-watch(
-  () => props.data,
-  (newData) => {
-    const list = newData || [];
-    // 空数据时显示一行“暂无数据”
-    if (list.length === 0) {
-      showData.value = [{ _empty: true }];
-    } else {
-      showData.value = list;
+  import { computed, ref, watch } from 'vue';
+  import { get as GET, isNil } from 'lodash-es';
+  import { useAutoScroll } from '/@/hooks/core/useAutoScroll';
+  let props = withDefaults(
+    defineProps<{
+      type: string;
+      autoScroll: boolean;
+      columns: { prop: string; name: string }[];
+      data: any[];
+      defaultValue: string;
+    }>(),
+    {
+      type: 'B',
+      autoScroll: false,
+      columns: () => [],
+      data: () => [],
+      defaultValue: '-',
     }
-  },
-  { deep: true, immediate: true }
-);
+  );
 
-const getStatusClass = (status) => {
-  switch (status) {
-    case 1:
-    case '1':
-      return 'online';
-    case '0':
-    case 0:
-      return 'offline';
-    default:
-      return '';
+  const scrollRef = ref(null);
+  if (props.autoScroll) {
+    useAutoScroll(scrollRef);
   }
-};
+  const showData = ref<any[]>([]);
+
+  watch(
+    () => props.data,
+    (newData) => {
+      const list = newData || [];
+      // 空数据时显示一行“暂无数据”
+      if (list.length === 0) {
+        showData.value = [{ _empty: true }];
+      } else {
+        showData.value = list;
+      }
+    },
+    { deep: true, immediate: true }
+  );
 
-const flexBasis = computed(() => {
-  return Math.fround(100 / props.columns.length) + '%';
-});
+  const getStatusClass = (status) => {
+    switch (status) {
+      case 1:
+      case '1':
+        return 'online';
+      case '0':
+      case 0:
+        return 'offline';
+      default:
+        return '';
+    }
+  };
 
-function get(o, p) {
-  if (o._empty) return props.defaultValue;
-  const d = _.get(o, p);
-  return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
-}
+  const flexBasis = computed(() => {
+    return Math.fround(100 / props.columns.length) + '%';
+  });
 
-function formatValue(obj, path) {
-  if (obj._empty) {
-    return '暂无数据';
-  }
-  const value = _.get(obj, path);
-  if (_.isNil(value) || value === '') {
-    return props.defaultValue;
+  function get(o, p) {
+    if (o._empty) return props.defaultValue;
+    const d = GET(o, p);
+    return isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
   }
-  switch (path) {
-    case 'status':
-      return value === 1 ? '连接' : '断开';
-    case 'rearGateOpen':
-    case 'frontGateOpen':
-      return value === '1' ? '打开' : '关闭';
-    default:
-      return value;
+
+  function formatValue(obj, path) {
+    if (obj._empty) {
+      return '暂无数据';
+    }
+    const value = GET(obj, path);
+    if (isNil(value) || value === '') {
+      return props.defaultValue;
+    }
+    switch (path) {
+      case 'status':
+        return value === 1 ? '连接' : '断开';
+      case 'rearGateOpen':
+      case 'frontGateOpen':
+        return value === '1' ? '打开' : '关闭';
+      default:
+        return value;
+    }
   }
-}
 </script>
 
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@import '@/design/theme.less';
-
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-.table__content {
-  --image-content-label: url('/@/assets/images/beltFire/4-1.png');
-  --image-content-text: url('/@/assets/images/beltFire/4-2.png');
-  --image-content-label-d: url(/@/assets/images/home-container/configurable/minehome/content-label.png);
-  --image-content-body-d: url('/@/assets/images/home-container/configurable/minehome/content-body.png');
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 5px 0;
+  @import '/@/design/theme.less';
+  @import '@/design/theme.less';
 
-  .table__content_label {
-    padding: 10px;
-    width: 90%;
-    height: 32px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    .label-t {
-      text-align: center;
-      font-size: 14px;
-    }
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
   }
-  .table__content_label_C {
-    background-position: center 100%;
-    background-size: 100% 40px;
-    background-repeat: no-repeat;
-    background-image: var(--image-content-label);
-    height: 40px;
-    .label-t {
-      background-repeat: no-repeat;
-      background-size: 80% auto;
-      background-position: center;
-      background-image: var(--image-list-head);
-    }
-  }
-
-  .table__content_list {
-    height: calc(100% - 32px);
-    width: 90%;
+  .table__content {
+    --image-content-label: url('/@/assets/images/beltFire/4-1.png');
+    --image-content-text: url('/@/assets/images/beltFire/4-2.png');
+    --image-content-label-d: url(/@/assets/images/home-container/configurable/minehome/content-label.png);
+    --image-content-body-d: url('/@/assets/images/home-container/configurable/minehome/content-body.png');
+    height: 100%;
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
+    align-items: center;
     padding: 5px 0;
-    box-sizing: border-box;
-    overflow-y: auto;
-    .table__content_list_row {
-      width: 100%;
+
+    .table__content_label {
+      padding: 10px;
+      width: 90%;
+      height: 32px;
       display: flex;
       justify-content: space-around;
       align-items: center;
-      color: #fff;
-      margin-bottom: 5px;
-      span {
-        display: inline-block;
+      .label-t {
         text-align: center;
+        font-size: 14px;
       }
     }
-  }
-  .table__content_list_C {
-    .table__content_list_row {
-      min-height: 50px;
-      background-size: 100% auto;
+    .table__content_label_C {
+      background-position: center 100%;
+      background-size: 100% 40px;
       background-repeat: no-repeat;
-      background-position: center bottom;
-      background-image: var(--image-content-text);
+      background-image: var(--image-content-label);
+      height: 40px;
+      .label-t {
+        background-repeat: no-repeat;
+        background-size: 80% auto;
+        background-position: center;
+        background-image: var(--image-list-head);
+      }
     }
-  }
-  .status-dot {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    margin-right: 4px;
-  }
 
-  .status-dot.online {
-    background-color: #46ff9c;
-    box-shadow: 0 0 6px 2px rgba(76, 248, 142, 0.6);
-  }
-  .status-dot.offline,
-  .status-dot.closed {
-    background-color: gray;
-    box-shadow: 0 0 6px 2px rgba(105, 105, 105, 0.6);
+    .table__content_list {
+      height: calc(100% - 32px);
+      width: 90%;
+      display: flex;
+      flex-direction: column;
+      padding: 5px 0;
+      box-sizing: border-box;
+      overflow-y: auto;
+      .table__content_list_row {
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        margin-bottom: 5px;
+        span {
+          display: inline-block;
+          text-align: center;
+        }
+      }
+    }
+    .table__content_list_C {
+      .table__content_list_row {
+        min-height: 50px;
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        background-position: center bottom;
+        background-image: var(--image-content-text);
+      }
+    }
+    .status-dot {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      margin-right: 4px;
+    }
+
+    .status-dot.online {
+      background-color: #46ff9c;
+      box-shadow: 0 0 6px 2px rgba(76, 248, 142, 0.6);
+    }
+    .status-dot.offline,
+    .status-dot.closed {
+      background-color: gray;
+      box-shadow: 0 0 6px 2px rgba(105, 105, 105, 0.6);
+    }
   }
-}
-</style>
+</style>

src/views/vent/home/configurable/components/belt/ExecuteAdvice.vue

@@ -21,135 +21,135 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, defineProps, defineEmits } from 'vue';
-import { defHttp } from '/@/utils/http/axios';
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  data: {
-    type: Array,
-    default: () => [],
-  },
-});
-const emit = defineEmits(['update:visible']);
-const close = () => {
-  emit('update:visible', false);
-};
+  import { ref, watch, defineEmits } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  });
+  const emit = defineEmits(['update:visible']);
+  const close = () => {
+    emit('update:visible', false);
+  };
 </script>
 
 <style scoped lang="less">
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 999;
-  background: rgba(0, 0, 0, 0.5);
-}
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 999;
+    background: rgba(0, 0, 0, 0.5);
+  }
 
-.modal-container {
-  width: 50%;
-  max-width: 450px;
-  min-height: 200px;
-  background: url('/@/assets/images/beltFire/plan/1-5.png') no-repeat;
-  background-size: 100% 100%;
-  border-radius: 6px;
-  color: #fff;
-  position: relative;
-  padding: 20px;
-}
+  .modal-container {
+    width: 50%;
+    max-width: 450px;
+    min-height: 200px;
+    background: url('/@/assets/images/beltFire/plan/1-5.png') no-repeat;
+    background-size: 100% 100%;
+    border-radius: 6px;
+    color: #fff;
+    position: relative;
+    padding: 20px;
+  }
 
-.dialog-header {
-  text-align: center;
-  color: #fff;
-  background: url('/@/assets/images/beltFire/fireMonitor/historyTitle.png') no-repeat;
-  background-size: 100% 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  span {
-    font-size: 15px;
+  .dialog-header {
+    text-align: center;
     color: #fff;
-    font-family: 'douyuFont';
+    background: url('/@/assets/images/beltFire/fireMonitor/historyTitle.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span {
+      font-size: 15px;
+      color: #fff;
+      font-family: 'douyuFont';
+    }
   }
-}
 
-.dialog-body {
-  padding: 0px 15px;
-  margin-top: 10px;
-}
-.title {
-  padding: 5px 0;
-  text-align: center;
-  font-size: 16px;
-  color: #fff;
-  background: url('/@/assets/images/beltFire/plan/1-1.png') no-repeat;
-  background-size: 100% 100%;
-}
-.device-list {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  background: url('/@/assets/images/beltFire/plan/1-2.png') no-repeat;
-  background-size: 100% 100%;
-  padding-left: 10px;
-  padding-bottom: 10px;
-  position: relative;
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 6px;
-    background: url('/@/assets/images/beltFire/plan/1-3.png') no-repeat center;
-    background-size: 100% auto;
-    z-index: 1;
+  .dialog-body {
+    padding: 0px 15px;
+    margin-top: 10px;
   }
-}
-.device-item {
-  padding: 8px 0;
-  font-size: 14px;
-  border: none;
-}
-.password-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-top: 15px;
-  input {
-    flex: 1;
-    padding: 8px 12px;
-    border-radius: 4px;
-    border: none;
-    background: url('/@/assets/images/beltFire/plan/1-4.png') no-repeat;
-    background-size: 100% 100%;
+  .title {
+    padding: 5px 0;
+    text-align: center;
+    font-size: 16px;
     color: #fff;
-    outline: none;
+    background: url('/@/assets/images/beltFire/plan/1-1.png') no-repeat;
+    background-size: 100% 100%;
   }
-  button {
-    white-space: nowrap;
-    background: #1ba5aa !important;
+  .device-list {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    background: url('/@/assets/images/beltFire/plan/1-2.png') no-repeat;
+    background-size: 100% 100%;
+    padding-left: 10px;
+    padding-bottom: 10px;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 6px;
+      background: url('/@/assets/images/beltFire/plan/1-3.png') no-repeat center;
+      background-size: 100% auto;
+      z-index: 1;
+    }
+  }
+  .device-item {
+    padding: 8px 0;
+    font-size: 14px;
+    border: none;
+  }
+  .password-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 15px;
+    input {
+      flex: 1;
+      padding: 8px 12px;
+      border-radius: 4px;
+      border: none;
+      background: url('/@/assets/images/beltFire/plan/1-4.png') no-repeat;
+      background-size: 100% 100%;
+      color: #fff;
+      outline: none;
+    }
+    button {
+      white-space: nowrap;
+      background: #1ba5aa !important;
+    }
   }
-}
 
-.close-btn {
-  position: absolute;
-  top: -12px;
-  right: -20px;
-  width: 30px;
-  height: 30px;
-  cursor: pointer;
-  z-index: 10;
-  img {
-    width: 100%;
-    height: 100%;
-    display: block;
+  .close-btn {
+    position: absolute;
+    top: -12px;
+    right: -20px;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    z-index: 10;
+    img {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
   }
-}
-</style>
+</style>

src/views/vent/home/configurable/components/belt/ExecutePlan.vue

@@ -26,181 +26,181 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, defineProps, defineEmits } from 'vue';
-import { message } from 'ant-design-vue';
-import { defHttp } from '/@/utils/http/axios';
-const edit = (params) => {
-  defHttp.post({
-    url: '/ventanaly-device/safety/managesysAutoLog/edit',
-    params,
+  import { ref, watch, defineEmits } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { defHttp } from '/@/utils/http/axios';
+  const edit = (params) => {
+    defHttp.post({
+      url: '/ventanaly-device/safety/managesysAutoLog/edit',
+      params,
+    });
+  };
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
   });
-};
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  data: {
-    type: Array,
-    default: () => [],
-  },
-});
-const emit = defineEmits(['update:visible']);
-const close = () => {
-  emit('update:visible', false);
-  password.value = '';
-};
+  const emit = defineEmits(['update:visible']);
+  const close = () => {
+    emit('update:visible', false);
+    password.value = '';
+  };
 
-// 密码
-const password = ref('');
+  // 密码
+  const password = ref('');
 
-// 确认执行
-const confirm = async () => {
-  if (!password.value) {
-    message.warning('请输入授权密码！');
-    return;
-  }
-  if (!props.data || props.data.length === 0) {
-    message.warning('暂无预案数据！');
-    return;
-  }
-  const params = {
-    monitorType: 1,
-    alarmLogId: props.data.map((item) => item.alarmId).join(','),
-    alarmList: props.data.map((item) => item.id).join(','),
-    password: password.value,
-  };
+  // 确认执行
+  const confirm = async () => {
+    if (!password.value) {
+      message.warning('请输入授权密码！');
+      return;
+    }
+    if (!props.data || props.data.length === 0) {
+      message.warning('暂无预案数据！');
+      return;
+    }
+    const params = {
+      monitorType: 1,
+      alarmLogId: props.data.map((item) => item.alarmId).join(','),
+      alarmList: props.data.map((item) => item.id).join(','),
+      password: password.value,
+    };
 
-  try {
-    // 调用接口
-    await edit(params);
-    message.success('执行成功！');
-    close();
-  } catch (err) {
-    message.error('执行失败：' + err);
-    console.error('接口报错：', err);
-  }
-};
+    try {
+      // 调用接口
+      await edit(params);
+      message.success('执行成功！');
+      close();
+    } catch (err) {
+      message.error('执行失败：' + err);
+      console.error('接口报错：', err);
+    }
+  };
 </script>
 
 <style scoped lang="less">
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 999;
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.modal-container {
-  width: 50%;
-  max-width: 450px;
-  min-height: 320px;
-  background: url('/@/assets/images/beltFire/plan/1-5.png') no-repeat;
-  background-size: 100% 100%;
-  border-radius: 6px;
-  color: #fff;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  padding: 20px;
-}
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 999;
+    background: rgba(0, 0, 0, 0.5);
+  }
 
-.dialog-header {
-  text-align: center;
-  color: #fff;
-  background: url('/@/assets/images/beltFire/fireMonitor/historyTitle.png') no-repeat;
-  background-size: 100% 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  span {
-    font-size: 15px;
+  .modal-container {
+    width: 50%;
+    max-width: 450px;
+    min-height: 320px;
+    background: url('/@/assets/images/beltFire/plan/1-5.png') no-repeat;
+    background-size: 100% 100%;
+    border-radius: 6px;
     color: #fff;
-    font-family: 'douyuFont';
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: 20px;
   }
-}
 
-.dialog-body {
-  flex: 1;
-  padding: 0px 15px;
-  margin-top: 10px;
-}
-.title {
-  padding: 5px 0;
-  text-align: center;
-  font-size: 16px;
-  color: #fff;
-  background: url('/@/assets/images/beltFire/plan/1-1.png') no-repeat;
-  background-size: 100% 100%;
-}
-.device-list {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  background: url('/@/assets/images/beltFire/plan/1-2.png') no-repeat;
-  background-size: 100% 100%;
-  padding-left: 10px;
-  padding-bottom: 10px;
-  position: relative;
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 6px;
-    background: url('/@/assets/images/beltFire/plan/1-3.png') no-repeat center;
-    background-size: 100% auto;
-    z-index: 1;
+  .dialog-header {
+    text-align: center;
+    color: #fff;
+    background: url('/@/assets/images/beltFire/fireMonitor/historyTitle.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span {
+      font-size: 15px;
+      color: #fff;
+      font-family: 'douyuFont';
+    }
   }
-}
-.device-item {
-  padding: 8px 0;
-  font-size: 14px;
-  border: none;
-}
-.password-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-top: 15px;
-  input {
+
+  .dialog-body {
     flex: 1;
-    padding: 8px 12px;
-    border-radius: 4px;
-    border: none;
-    background: url('/@/assets/images/beltFire/plan/1-4.png') no-repeat;
+    padding: 0px 15px;
+    margin-top: 10px;
+  }
+  .title {
+    padding: 5px 0;
+    text-align: center;
+    font-size: 16px;
+    color: #fff;
+    background: url('/@/assets/images/beltFire/plan/1-1.png') no-repeat;
     background-size: 100% 100%;
-    color: #ffff;
-    outline: none;
-    &::placeholder {
-      color: #ffffff !important;
-      opacity: 0.8;
+  }
+  .device-list {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    background: url('/@/assets/images/beltFire/plan/1-2.png') no-repeat;
+    background-size: 100% 100%;
+    padding-left: 10px;
+    padding-bottom: 10px;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 6px;
+      background: url('/@/assets/images/beltFire/plan/1-3.png') no-repeat center;
+      background-size: 100% auto;
+      z-index: 1;
     }
   }
-  button {
-    white-space: nowrap;
-    background: #1ba5aa !important;
+  .device-item {
+    padding: 8px 0;
+    font-size: 14px;
+    border: none;
+  }
+  .password-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 15px;
+    input {
+      flex: 1;
+      padding: 8px 12px;
+      border-radius: 4px;
+      border: none;
+      background: url('/@/assets/images/beltFire/plan/1-4.png') no-repeat;
+      background-size: 100% 100%;
+      color: #ffff;
+      outline: none;
+      &::placeholder {
+        color: #ffffff !important;
+        opacity: 0.8;
+      }
+    }
+    button {
+      white-space: nowrap;
+      background: #1ba5aa !important;
+    }
   }
-}
 
-.close-btn {
-  position: absolute;
-  top: -12px;
-  right: -20px;
-  width: 30px;
-  height: 30px;
-  cursor: pointer;
-  z-index: 10;
-  img {
-    width: 100%;
-    height: 100%;
-    display: block;
+  .close-btn {
+    position: absolute;
+    top: -12px;
+    right: -20px;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    z-index: 10;
+    img {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
   }
-}
-</style>
+</style>

src/views/vent/home/configurable/components/detail/CustomChart-SJZX.vue

@@ -9,7 +9,6 @@
   import { color, EChartsOption, graphic } from 'echarts';
   import { getData, getFormattedText } from '../../hooks/helper';
   import { getAssetURL } from '/@/utils/ui';
-  import { size } from 'lodash';
 
   const props = withDefaults(
     defineProps<{

src/views/vent/home/configurable/components/detail/CustomChart.vue

@@ -9,7 +9,6 @@
   import { color, EChartsOption, graphic } from 'echarts';
   import { getData, getFormattedText } from '../../hooks/helper';
   import { getAssetURL } from '/@/utils/ui';
-  import { size } from 'lodash';
 
   const props = withDefaults(
     defineProps<{

src/views/vent/home/configurable/components/detail/CustomTable-New.vue

@@ -15,8 +15,8 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, defineProps } from 'vue';
-  import _ from 'lodash';
+  import { computed } from 'vue';
+  import { get as GET, isNil } from 'lodash-es';
 
   let props = withDefaults(
     defineProps<{
@@ -40,8 +40,8 @@
   });
 
   function get(o, p) {
-    const d = _.get(o, p);
-    return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
+    const d = GET(o, p);
+    return isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
   }
 </script>
 <style lang="less" scoped>

src/views/vent/home/configurable/components/detail/CustomTable-fire.vue

@@ -15,138 +15,138 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, defineProps } from 'vue';
-import _ from 'lodash';
+  import { computed } from 'vue';
+  import { get as GET, isNil } from 'lodash-es';
 
-let props = withDefaults(
-  defineProps<{
-    /** B | C */
-    type: string;
-    /** 列表表头配置，每个prop都有其对应的slot来提供定制化功能 */
-    columns: { prop: string; name: string }[];
-    data: any[];
-    defaultValue: string;
-  }>(),
-  {
-    type: 'B',
-    columns: () => [],
-    data: () => [],
-    defaultValue: '-',
-  }
-);
+  let props = withDefaults(
+    defineProps<{
+      /** B | C */
+      type: string;
+      /** 列表表头配置，每个prop都有其对应的slot来提供定制化功能 */
+      columns: { prop: string; name: string }[];
+      data: any[];
+      defaultValue: string;
+    }>(),
+    {
+      type: 'B',
+      columns: () => [],
+      data: () => [],
+      defaultValue: '-',
+    }
+  );
 
-const flexBasis = computed(() => {
-  return Math.fround(100 / props.columns.length) + '%';
-});
+  const flexBasis = computed(() => {
+    return Math.fround(100 / props.columns.length) + '%';
+  });
 
-function get(o, p) {
-  const d = _.get(o, p);
-  return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
-}
+  function get(o, p) {
+    const d = GET(o, p);
+    return isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
+  }
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@import '@/design/theme.less';
-
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
+  @import '/@/design/theme.less';
+  @import '@/design/theme.less';
 
-@{theme-deepblue} {
-  .table__content {
-    --image-content-label: url('/@/assets/images/fireNew/11-1.png');
-    --image-content-back: url('/@/assets/images/fireNew/11-2.png');
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
   }
-}
-
-.table__content {
-  --image-content-label: url('/@/assets/images/fireNew/11-1.png');
-  --image-content-back: url('/@/assets/images/fireNew/11-2.png');
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 13px;
 
-  .table__content_label {
-    width: 400px;
-    height: 32px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    .label-t {
-      text-align: center;
-      font-size: 14px;
-    }
-  }
-  .table__content_label_A {
-    background-image: var(--image-content-label);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    margin-top: 10px;
-  }
-  .table__content_label_B {
-    background-image: linear-gradient(to top, #04698c, #04698c00);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    color: #31b9ef;
-  }
-  .table__content_label_C {
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    background-image: var(--image-content-label);
-    margin-top: 10px;
-    .label-t {
+  @{theme-deepblue} {
+    .table__content {
+      --image-content-label: url('/@/assets/images/fireNew/11-1.png');
+      --image-content-back: url('/@/assets/images/fireNew/11-2.png');
     }
   }
 
-  .table__content_list {
-    height: calc(100% - 50px);
-    width: 380px;
+  .table__content {
+    --image-content-label: url('/@/assets/images/fireNew/11-1.png');
+    --image-content-back: url('/@/assets/images/fireNew/11-2.png');
+    height: 100%;
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    padding: 5px 0;
-    box-sizing: border-box;
-    overflow-y: auto;
-    background-image: var(--image-content-back);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    background-position: center;
-    .table__content_list_row {
-      width: 100%;
+    align-items: center;
+    padding: 13px;
+
+    .table__content_label {
+      width: 400px;
+      height: 32px;
       display: flex;
       justify-content: space-around;
       align-items: center;
-      color: #fff;
-      margin-bottom: 5px;
-      span {
-        display: inline-block;
+      .label-t {
         text-align: center;
+        font-size: 14px;
       }
     }
-  }
-
-  .table__content_list_A {
-    .table__content_list_row {
-      &:nth-child(2n) {
-        background: #0b2d3d;
+    .table__content_label_A {
+      background-image: var(--image-content-label);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      margin-top: 10px;
+    }
+    .table__content_label_B {
+      background-image: linear-gradient(to top, #04698c, #04698c00);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      color: #31b9ef;
+    }
+    .table__content_label_C {
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-image: var(--image-content-label);
+      margin-top: 10px;
+      .label-t {
       }
-      &:nth-child(2n + 1) {
-        background: transparent;
+    }
+
+    .table__content_list {
+      height: calc(100% - 50px);
+      width: 380px;
+      display: flex;
+      flex-direction: column;
+      padding: 5px 0;
+      box-sizing: border-box;
+      overflow-y: auto;
+      background-image: var(--image-content-back);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: center;
+      .table__content_list_row {
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        margin-bottom: 5px;
+        span {
+          display: inline-block;
+          text-align: center;
+        }
       }
     }
-  }
-  .table__content_list_C {
-    .table__content_list_row {
-      &:nth-child(2n) {
-        background: #0b2d3d;
+
+    .table__content_list_A {
+      .table__content_list_row {
+        &:nth-child(2n) {
+          background: #0b2d3d;
+        }
+        &:nth-child(2n + 1) {
+          background: transparent;
+        }
       }
-      &:nth-child(2n + 1) {
-        background: transparent;
+    }
+    .table__content_list_C {
+      .table__content_list_row {
+        &:nth-child(2n) {
+          background: #0b2d3d;
+        }
+        &:nth-child(2n + 1) {
+          background: transparent;
+        }
       }
     }
   }
-}
 </style>

src/views/vent/home/configurable/components/detail/CustomTable.vue

@@ -15,8 +15,8 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, defineProps, ref } from 'vue';
-  import _ from 'lodash';
+  import { computed, ref } from 'vue';
+  import { get as GET, isNil } from 'lodash-es';
   import { useAutoScroll } from '/@/hooks/core/useAutoScroll';
 
   let props = withDefaults(
@@ -48,8 +48,8 @@
   });
 
   function get(o, p) {
-    const d = _.get(o, p);
-    return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
+    const d = GET(o, p);
+    return isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
   }
 </script>
 <style lang="less" scoped>

src/views/vent/home/configurable/components/preset/DeviceAlarm.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { reactive, defineProps, watch } from 'vue';
+  import { reactive, watch } from 'vue';
   import { getAssetURL } from '/@/utils/ui';
   let props = withDefaults(
     defineProps<{

src/views/vent/home/configurable/components/preset/MeasureDetail.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, defineProps, watch } from 'vue';
+  import { ref, watch } from 'vue';
   import { dustMonitorColumnTop, dustMonitorColumnBootom } from '../../../clique/dust.data';
 
   let props = defineProps({

src/views/vent/home/configurable/components/preset/QHCurve.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, nextTick, defineProps, watch } from 'vue';
+  import { ref, reactive, nextTick, watch } from 'vue';
   import * as echarts from 'echarts';
   import { get } from 'lodash-es';
   //   import { useGlobSetting } from '/@/hooks/setting';

src/views/vent/home/configurable/components/preset/partition.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, defineEmits, defineProps, withDefaults } from 'vue';
+  import { computed, defineEmits, withDefaults } from 'vue';
   const props = withDefaults(
     defineProps<{
       // 分隔条类型，类型为：'A' | 'B'

src/views/vent/home/configurable/configurable.api.fireDoorMonitor.ts

@@ -1,5 +1,4 @@
 import { defHttp } from '/@/utils/http/axios';
-import _ from 'lodash';
 
 enum Api {
   manageFireGateHome = '/ventanaly-device/monitor/disaster/manageFireGateHome',

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

@@ -3,7 +3,7 @@ import { defHttp } from '/@/utils/http/axios';
 import { get } from '../billboard/utils';
 import { useGlobSetting } from '/@/hooks/setting';
 import { reactive } from 'vue';
-import _ from 'lodash';
+import { sortBy } from 'lodash-es';
 
 enum Api {
   list = '/safety/ventanalyDevice/homedata2',
@@ -130,7 +130,7 @@ export const list = (params) => {
       const { sysOrgCode } = useGlobSetting();
       // 沙坪
       if (sysOrgCode === 'jsnyspmy') {
-        res.safetymonitor = _.sortBy(res.safetymonitor, (e) => {
+        res.safetymonitor = sortBy(res.safetymonitor, (e) => {
           const map = new Map([
             ['1960160466651189249', 1],
             ['1960160465543892994', 2],

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

@@ -15,8 +15,8 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, defineProps } from 'vue';
-  import _ from 'lodash';
+  import { computed } from 'vue';
+  import { get as GET, isNil } from 'lodash-es';
 
   let props = withDefaults(
     defineProps<{
@@ -40,8 +40,8 @@
   });
 
   function get(o, p) {
-    const d = _.get(o, p);
-    return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
+    const d = GET(o, p);
+    return isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
   }
 </script>
 <style lang="less" scoped>

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

@@ -49,7 +49,7 @@
 
 <script setup lang="ts">
   import Content from './content-green.vue';
-  import { defineProps, defineEmits, computed, watch } from 'vue';
+  import { defineEmits, computed, watch } from 'vue';
   import { useInitModule } from '../../hooks/useInit';
   import { getFormattedText } from '../../hooks/helper';
   import { openWindow } from '/@/utils';
@@ -204,7 +204,7 @@
     }
 
     .dane-content {
-      height: calc(100% - 38px);  
+      height: calc(100% - 38px);
     }
   }
 

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

@@ -14,12 +14,26 @@
       <div class="common-navR">
         <!-- 下拉框 -->
         <div class="common-navR-select" v-if="index === 0 && headerA.show && headerA.selector.show">
-          <a-select style="width: 140px" size="small" placeholder="请选择" v-model:value="selectedDeviceIDA" allowClear
-            :options="optionsA" @change="selectHandlerA" />
+          <a-select
+            style="width: 140px"
+            size="small"
+            placeholder="请选择"
+            v-model:value="selectedDeviceIDA"
+            allowClear
+            :options="optionsA"
+            @change="selectHandlerA"
+          />
         </div>
         <div class="common-navR-select" v-if="index === 1 && headerB.show && headerB.selector.show">
-          <a-select style="width: 140px" size="small" placeholder="请选择" v-model:value="selectedDeviceIDB" allowClear
-            :options="optionsB" @change="selectHandlerB" />
+          <a-select
+            style="width: 140px"
+            size="small"
+            placeholder="请选择"
+            v-model:value="selectedDeviceIDB"
+            allowClear
+            :options="optionsB"
+            @change="selectHandlerB"
+          />
         </div>
         <!-- 日期组件 -->
         <!-- <div class="common-navR-date" v-if="header.show && header.showSlot">
@@ -51,253 +65,253 @@
 </template>
 
 <script setup lang="ts">
-import Content from './content-green.vue';
-import { defineProps, defineEmits, computed, ref, watch } from 'vue';
-import { ModuleData, ShowStyle } from '../../../../deviceManager/configurationTable/types';
-import { useInitModule } from '../../hooks/useInit';
-
-const props = defineProps<{
-  moduleDataA: ModuleData;
-  moduleNameA: string;
-  deviceTypeA: string;
-  moduleDataB: ModuleData;
-  moduleNameB: string;
-  deviceTypeB: string;
-  showStyle: ShowStyle;
-  visible: boolean;
-  data: any;
-}>();
-const emit = defineEmits(['close', 'select']);
-
-const index = ref(0);
-
-const headerA = props.moduleDataA.header;
-const headerB = props.moduleDataB.header;
-
-const {
-  selectedDeviceID: selectedDeviceIDA,
-  selectedDevice: selectedDeviceA,
-  options: optionsA,
-  init: initA,
-} = useInitModule(props.deviceTypeA, props.moduleDataA);
-const {
-  selectedDeviceID: selectedDeviceIDB,
-  selectedDevice: selectedDeviceB,
-  options: optionsB,
-  init: initB,
-} = useInitModule(props.deviceTypeB, props.moduleDataB);
-
-const style = computed(() => {
-  const size = props.showStyle.size;
-  const position = props.showStyle.position;
-  return size + position;
-});
-
-// 根据配置里的定位判断应该使用哪个module组件
-const daneClass = computed(() => {
-  const position = props.showStyle.position;
-  const size = props.showStyle.size;
-  const [_, width] = size.match(/width:([0-9]+)px/) || [];
-  if (position.includes('bottom') || parseInt(width) > 800) {
-    return 'dane-w';
-  }
-  if (position.includes('left')) {
-    return 'dane-m';
-  }
-  if (position.includes('right')) {
+  import Content from './content-green.vue';
+  import { defineEmits, computed, ref, watch } from 'vue';
+  import { ModuleData, ShowStyle } from '../../../../deviceManager/configurationTable/types';
+  import { useInitModule } from '../../hooks/useInit';
+
+  const props = defineProps<{
+    moduleDataA: ModuleData;
+    moduleNameA: string;
+    deviceTypeA: string;
+    moduleDataB: ModuleData;
+    moduleNameB: string;
+    deviceTypeB: string;
+    showStyle: ShowStyle;
+    visible: boolean;
+    data: any;
+  }>();
+  const emit = defineEmits(['close', 'select']);
+
+  const index = ref(0);
+
+  const headerA = props.moduleDataA.header;
+  const headerB = props.moduleDataB.header;
+
+  const {
+    selectedDeviceID: selectedDeviceIDA,
+    selectedDevice: selectedDeviceA,
+    options: optionsA,
+    init: initA,
+  } = useInitModule(props.deviceTypeA, props.moduleDataA);
+  const {
+    selectedDeviceID: selectedDeviceIDB,
+    selectedDevice: selectedDeviceB,
+    options: optionsB,
+    init: initB,
+  } = useInitModule(props.deviceTypeB, props.moduleDataB);
+
+  const style = computed(() => {
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
+    return size + position;
+  });
+
+  // 根据配置里的定位判断应该使用哪个module组件
+  const daneClass = computed(() => {
+    const position = props.showStyle.position;
+    const size = props.showStyle.size;
+    const [_, width] = size.match(/width:([0-9]+)px/) || [];
+    if (position.includes('bottom') || parseInt(width) > 800) {
+      return 'dane-w';
+    }
+    if (position.includes('left')) {
+      return 'dane-m';
+    }
+    if (position.includes('right')) {
+      return 'dane-m';
+    }
     return 'dane-m';
+  });
+
+  //切换时间选项
+  // function onChange(value, dateString) {
+  //   console.log('Selected Time: ', value);
+  //   console.log('Formatted Selected Time: ', dateString);
+  // }
+  // function onOk(val) {
+  //   console.log('onOk: ', val);
+  // }
+
+  //下拉框选项切换
+  function selectHandlerA(id) {
+    selectedDeviceIDA.value = id;
+    emit('select', selectedDeviceA);
   }
-  return 'dane-m';
-});
-
-//切换时间选项
-// function onChange(value, dateString) {
-//   console.log('Selected Time: ', value);
-//   console.log('Formatted Selected Time: ', dateString);
-// }
-// function onOk(val) {
-//   console.log('onOk: ', val);
-// }
-
-//下拉框选项切换
-function selectHandlerA(id) {
-  selectedDeviceIDA.value = id;
-  emit('select', selectedDeviceA);
-}
-function selectHandlerB(id) {
-  selectedDeviceIDB.value = id;
-  emit('select', selectedDeviceB);
-}
-
-watch(
-  () => props.data,
-  (d) => {
-    initA(d);
-    initB(d);
-    if (!selectedDeviceIDA.value) selectedDeviceIDA.value = optionsA.value[0]?.value;
-    if (!selectedDeviceIDB.value) selectedDeviceIDB.value = optionsB.value[0]?.value;
-  },
-  {
-    immediate: true,
+  function selectHandlerB(id) {
+    selectedDeviceIDB.value = id;
+    emit('select', selectedDeviceB);
   }
-);
+
+  watch(
+    () => props.data,
+    (d) => {
+      initA(d);
+      initB(d);
+      if (!selectedDeviceIDA.value) selectedDeviceIDA.value = optionsA.value[0]?.value;
+      if (!selectedDeviceIDB.value) selectedDeviceIDB.value = optionsB.value[0]?.value;
+    },
+    {
+      immediate: true,
+    }
+  );
 </script>
 
 <style scoped lang="less">
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .dane-bd {
+      --image-module-title: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/module-title.png');
+      --image-common-border: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/common-border.png');
+      --image-common-border2: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/common-border2.png');
+      --image-module-title-long: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/green-bd-bottom.png');
+    }
+  }
 
-@{theme-deepblue} {
   .dane-bd {
-    --image-module-title: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/module-title.png');
-    --image-common-border: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/common-border.png');
-    --image-common-border2: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/common-border2.png');
-    --image-module-title-long: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/green-bd-bottom.png');
-  }
-}
-
-.dane-bd {
-  --image-module-title: url('@/assets/images/home-container/configurable/firehome/module-title.png');
-  --image-common-border: url('@/assets/images/home-container/configurable/firehome/common-border.png');
-  --image-common-border2: url('@/assets/images/home-container/configurable/firehome/common-border2.png');
-  --image-module-title-long: url('@/assets/images/home-container/configurable/firehome/green-bd-bottom.png');
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-image: var(--image-module-title);
-  background-repeat: no-repeat;
-  background-position: center top;
-  background-size: 100% auto;
-  z-index: 2;
-  padding: 15px 10px 0px 10px;
-  box-sizing: border-box;
-
-  .dane-title {
-    display: flex;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: space-between;
+    --image-module-title: url('@/assets/images/home-container/configurable/firehome/module-title.png');
+    --image-common-border: url('@/assets/images/home-container/configurable/firehome/common-border.png');
+    --image-common-border2: url('@/assets/images/home-container/configurable/firehome/common-border2.png');
+    --image-module-title-long: url('@/assets/images/home-container/configurable/firehome/green-bd-bottom.png');
+    position: absolute;
     width: 100%;
-    height: 30px;
-    padding: 0 0 0 36px;
-    background: url('@/assets/images/home-green/green-title-bg.png') no-repeat;
-    background-size: auto 100%;
+    height: 100%;
+    background-image: var(--image-module-title);
+    background-repeat: no-repeat;
+    background-position: center top;
+    background-size: 100% auto;
+    z-index: 2;
+    padding: 15px 10px 0px 10px;
+    box-sizing: border-box;
 
-    .common-navL {
+    .dane-title {
       display: flex;
-      position: relative;
+      box-sizing: border-box;
       align-items: center;
-      color: #fff;
-      font-family: 'douyuFont';
-      // font-size: 12px;
+      justify-content: space-between;
+      width: 100%;
+      height: 30px;
+      padding: 0 0 0 36px;
+      background: url('@/assets/images/home-green/green-title-bg.png') no-repeat;
+      background-size: auto 100%;
+
+      .common-navL {
+        display: flex;
+        position: relative;
+        align-items: center;
+        color: #fff;
+        font-family: 'douyuFont';
+        // font-size: 12px;
+      }
+
+      .common-navR {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+
+      // .common-navR-switch {
+      //   display: flex;
+      //   align-items: center;
+      //   justify-content: space-around;
+      //   width: 90%;
+
+      //   .status-text {
+      //     color: #1fb3f7;
+      //     font-size: 14px;
+      //   }
+
+      //   .status-text1 {
+      //     color: #a1dff8;
+      //     font-size: 14px;
+      //   }
+      // }
     }
 
-    .common-navR {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
+    .dane-content {
+      height: calc(100% - 34px);
     }
+  }
+
+  .dane-l {
+    background: var(--image-common-border) no-repeat;
+    background-size: 100% auto;
+  }
+
+  .dane-m {
+    // background: url('@/assets/images/home-container/configurable/firehome/common-border1.png') no-repeat;
+    background-size: 100% auto;
+  }
+
+  .dane-s {
+    background: var(--image-common-border2) no-repeat;
+    background-size: 100% auto;
+  }
+
+  .dane-w {
+    background-image: var(--image-module-title-long);
+    background-size: 100% auto;
+  }
+
+  .deactived {
+    cursor: pointer;
+    color: #8087a1;
+  }
+
+  :deep(.zxm-select-selector) {
+    height: 22px !important;
+    border: none !important;
+    // background-color: rgb(15 64 88) !important;
+    background-color: transparent !important;
+    color: #8087a1 !important;
+  }
+
+  :deep(.zxm-select-selection-placeholder) {
+    color: #8087a1 !important;
+  }
+
+  :deep(.zxm-select-arrow) {
+    color: #8087a1 !important;
+  }
+
+  :deep(.zxm-picker) {
+    border: none !important;
+    background-color: rgb(15 64 88) !important;
+    box-shadow: none;
+    color: #a1dff8 !important;
+  }
+
+  :deep(.zxm-picker-input > input) {
+    color: #a1dff8 !important;
+    text-align: center !important;
+  }
+
+  :deep(.zxm-picker-separator) {
+    color: #a1dff8 !important;
+  }
+
+  :deep(.zxm-picker-active-bar) {
+    display: none !important;
+  }
+
+  :deep(.zxm-picker-suffix) {
+    color: #a1dff8 !important;
+  }
+
+  :deep(.zxm-switch) {
+    min-width: 48px !important;
+  }
+
+  :deep(.zxm-switch-checked) {
+    background-color: rgb(15 64 89) !important;
+  }
 
-    // .common-navR-switch {
-    //   display: flex;
-    //   align-items: center;
-    //   justify-content: space-around;
-    //   width: 90%;
-
-    //   .status-text {
-    //     color: #1fb3f7;
-    //     font-size: 14px;
-    //   }
-
-    //   .status-text1 {
-    //     color: #a1dff8;
-    //     font-size: 14px;
-    //   }
-    // }
+  :deep(.zxm-switch-handle::before) {
+    background-color: rgb(33 179 247) !important;
   }
 
-  .dane-content {
-    height: calc(100% - 34px);
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
   }
-}
-
-.dane-l {
-  background: var(--image-common-border) no-repeat;
-  background-size: 100% auto;
-}
-
-.dane-m {
-  // background: url('@/assets/images/home-container/configurable/firehome/common-border1.png') no-repeat;
-  background-size: 100% auto;
-}
-
-.dane-s {
-  background: var(--image-common-border2) no-repeat;
-  background-size: 100% auto;
-}
-
-.dane-w {
-  background-image: var(--image-module-title-long);
-  background-size: 100% auto;
-}
-
-.deactived {
-  cursor: pointer;
-  color: #8087a1;
-}
-
-:deep(.zxm-select-selector) {
-  height: 22px !important;
-  border: none !important;
-  // background-color: rgb(15 64 88) !important;
-  background-color: transparent !important;
-  color: #8087a1 !important;
-}
-
-:deep(.zxm-select-selection-placeholder) {
-  color: #8087a1 !important;
-}
-
-:deep(.zxm-select-arrow) {
-  color: #8087a1 !important;
-}
-
-:deep(.zxm-picker) {
-  border: none !important;
-  background-color: rgb(15 64 88) !important;
-  box-shadow: none;
-  color: #a1dff8 !important;
-}
-
-:deep(.zxm-picker-input > input) {
-  color: #a1dff8 !important;
-  text-align: center !important;
-}
-
-:deep(.zxm-picker-separator) {
-  color: #a1dff8 !important;
-}
-
-:deep(.zxm-picker-active-bar) {
-  display: none !important;
-}
-
-:deep(.zxm-picker-suffix) {
-  color: #a1dff8 !important;
-}
-
-:deep(.zxm-switch) {
-  min-width: 48px !important;
-}
-
-:deep(.zxm-switch-checked) {
-  background-color: rgb(15 64 89) !important;
-}
-
-:deep(.zxm-switch-handle::before) {
-  background-color: rgb(33 179 247) !important;
-}
-
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
 </style>

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

@@ -105,7 +105,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive, watch, defineProps, nextTick } from 'vue';
+  import { ref, reactive, watch, nextTick } from 'vue';
   import customHeader from '/@/components/vent/customHeader.vue';
   import * as echarts from 'echarts';
   import type { SelectProps } from 'ant-design-vue';

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

@@ -198,7 +198,7 @@
   import { deviceControlApi } from '/@/api/vent/index';
   import { message } from 'ant-design-vue';
   import { list, getTableList } from './deviceMonitor.api';
-  import lodash from 'lodash';
+  import { cloneDeep } from 'lodash-es';
   import { setDivHeight } from '/@/utils/event';
   import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
   import { useRouter } from 'vue-router';
@@ -269,7 +269,7 @@
   };
 
   // 监测数据
-  const selectData = reactive(lodash.cloneDeep(initData));
+  const selectData = reactive(cloneDeep(initData));
   function deviceEdit(e: Event, type: string, record) {
     e.stopPropagation();
     openModal(true, {

src/views/vent/monitorManager/airDoor/components/gateDualSVG.ssl.vue

@@ -6,7 +6,10 @@
     preserveAspectRatio="none"
     x="0px"
     y="0px"
-   width="360px" height="204" style="padding:5px" viewBox="500 320 1000 500"
+    width="360px"
+    height="204"
+    style="padding: 5px"
+    viewBox="500 320 1000 500"
   >
     <defs>
       <linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="-961.8" y1="-242.45" x2="-961.8" y2="-242.45" spreadMethod="pad">
@@ -1312,7 +1315,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, defineExpose, withDefaults, defineProps } from 'vue';
+  import { onMounted, defineExpose, withDefaults } from 'vue';
   import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
 
   const props = withDefaults(

src/views/vent/monitorManager/airDoor/components/gateSVG.ssl.vue

@@ -6,7 +6,10 @@
     preserveAspectRatio="none"
     x="0px"
     y="0px"
-   width="360px" height="204" style="padding:5px" viewBox="500 320 1000 500"
+    width="360px"
+    height="204"
+    style="padding: 5px"
+    viewBox="500 320 1000 500"
   >
     <defs>
       <linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="-961.8" y1="-242.45" x2="-961.8" y2="-242.45" spreadMethod="pad">
@@ -1187,7 +1190,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, defineExpose, withDefaults, defineProps } from 'vue';
+  import { onMounted, defineExpose, withDefaults } from 'vue';
   import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
 
   const props = withDefaults(

src/views/vent/monitorManager/alarmMonitor/alarmHistoryTable.vue

@@ -10,7 +10,7 @@
 
 <script lang="ts" name="system-user" setup>
   //ts语法
-  import { watchEffect, ref, watch, defineExpose } from 'vue';
+  import { watchEffect, ref, watch } from 'vue';
   import { FormSchema } from '/@/components/Form/index';
   import { BasicTable } from '/@/components/Table';
   import { useListPage } from '/@/hooks/system/useListPage';

src/views/vent/monitorManager/alarmMonitor/common/closeWall-111.vue

@@ -8,8 +8,7 @@
             <!-- <div class="text-value">{{ topContent.position }}</div> -->
             <div class="text-value">
               <a-select v-model:value="selectData" style="width: 360px" @change="changeSelect">
-                <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label
-                  }}</a-select-option>
+                <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label }}</a-select-option>
               </a-select>
             </div>
           </div>
@@ -27,12 +26,15 @@
       <div class="box-container">
         <div class="text1">
           <span>预警等级 : </span>
-          <span :class="{
-            value1: topContent.warnLevel == '绿色预警',
-            value2: topContent.warnLevel == '黄色预警',
-            value3: topContent.warnLevel == '红色预警',
-            value4: topContent.warnLevel == '橙色预警',
-          }">{{ topContent.warnLevel || '-' }}</span>
+          <span
+            :class="{
+              value1: topContent.warnLevel == '绿色预警',
+              value2: topContent.warnLevel == '黄色预警',
+              value3: topContent.warnLevel == '红色预警',
+              value4: topContent.warnLevel == '橙色预警',
+            }"
+            >{{ topContent.warnLevel || '-' }}</span
+          >
         </div>
         <div class="text1">
           <span>煤自燃阶段 : </span>
@@ -51,8 +53,12 @@
     <div class="content">
       <div class="title-b">采空区密闭参数</div>
       <div class="card-btn">
-        <div :class="activeIndex == index ? 'box-container1' : 'box-container'" v-for="(item, index) in mbList"
-          :key="index" @click="btnClick(item, index)">
+        <div
+          :class="activeIndex == index ? 'box-container1' : 'box-container'"
+          v-for="(item, index) in mbList"
+          :key="index"
+          @click="btnClick(item, index)"
+        >
           <div class="box-label">
             <span> {{ item.label }}</span>
             <span>{{ item.dw }}</span>
@@ -89,13 +95,24 @@
           </div>
           <div class="echarts-box">
             <PredictionCurve v-if="shownChart === 'default'" :chart="curveConfig" />
-            <echartLine1 v-if="shownChart === 'predict'" :echartDataSg="echartDataSg1"
-              :lengedDataName="echartDataSg1.lengedDataName" :maxY="maxY" :minY="minY" />
+            <echartLine1
+              v-if="shownChart === 'predict'"
+              :echartDataSg="echartDataSg1"
+              :lengedDataName="echartDataSg1.lengedDataName"
+              :maxY="maxY"
+              :minY="minY"
+            />
           </div>
         </div>
         <div class="right-echartbox">
-          <warnZb :widthV="widthV" :heightV="heightV" :coordDw="coordDw" :widthCanvas="widthCanvas"
-            :heightCanvas="heightCanvas" :warnLevel="topContent.warnLevel" />
+          <warnZb
+            :widthV="widthV"
+            :heightV="heightV"
+            :coordDw="coordDw"
+            :widthCanvas="widthCanvas"
+            :heightCanvas="heightCanvas"
+            :warnLevel="topContent.warnLevel"
+          />
         </div>
       </div>
     </div>
@@ -103,779 +120,779 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, watch, defineProps, inject, h } from 'vue';
-import echartLine1 from './echartLine1.vue';
-import warnZb from './warnZb.vue';
-import PredictionCurve from './predictionCurve.vue';
-import { Modal, Input } from 'ant-design-vue';
-import { getMaxY, getMinY } from '../common.data'
-// import { deviceControlApi } from '/@/api/vent/index';
-
-let props = defineProps({
-  listData: Object,
-});
-
-const globalConfig = inject('globalConfig');
-const shownChart = ref('default');
-let maxY = ref<any>(0);
-let minY = ref<any>(0)
-let selectSj = ref<any[]>([]);
-let selectData = ref('');
-let selectList = reactive<any[]>([]);
-let widthV = ref('75%');
-let heightV = ref('80%');
-let coordDw = ref<any[]>([31, 62, 110]);
-let widthCanvas = ref(562);
-let heightCanvas = ref(316);
-//设备连接状态
-let netStatus = ref(0);
-//密闭-顶部区域数据
-let topContent = reactive({
-  temperature: 0,
-  position: '',
-  time: '',
-  warnLevel: '',
-  smokeJd: '',
-});
-//密闭参数列表
-let mbList = reactive([
-  {
-    label: 'O₂',
-    dw: '(%)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: '0',
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'CO',
-    dw: '(ppm)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: '0',
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'CO₂',
-    dw: '(%)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: '0',
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'CH₄',
-    dw: '(%)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: '0',
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'C₂H₂',
-    dw: '(ppm)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: '0',
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'C₂H₄',
-    dw: '(ppm)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: '0',
-    time1: '',
-    address: '',
-  },
-]);
-
-//当前密闭参数激活选项
-let activeIndex = ref(0);
-//当前激活密闭参数类型
-let type = ref('O₂');
-
-let echartDataSg1 = reactive({
-  xData: [],
-  yData: [],
-  lengedData: 'O₂',
-  lengedDataName: '(%)',
-});
-let echartDataSgList = reactive<any[]>([]);
-
-function getmax() {
-  getMaxY(echartDataSg1.yData)
-  getMinY(echartDataSg1.yData)
-  // maxY.value = echartDataSg1.yData.reduce((acr, cur) => {
-  //   return acr > cur ? acr : cur;
-  // });
-  // maxY.value =
-  //   maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
-  // if (maxY.value.length < 2 && Number(maxY.value) < 1) {
-  //   maxY.value = 1;
-  // } else if (maxY.value.length < 2 && Number(maxY.value) >= 1) {
-  //   maxY.value = 10;
-  // } else if (maxY.value.length < 3) {
-  //   maxY.value = (Number(maxY.value[0]) + 1) * 10;
-  // } else if (maxY.value.length < 4) {
-  //   maxY.value = (Number(maxY.value[0]) + 1) * 100;
-  // } else if (maxY.value.length < 5) {
-  //   maxY.value = (Number(maxY.value[0]) + 1) * 1000;
-  // } else if (maxY.value.length < 6) {
-  //   maxY.value = (Number(maxY.value[0]) + 1) * 10000;
-  // }
-}
-//密闭参数选项切换
-function btnClick(item, ind) {
-  // debugger;
-  activeIndex.value = ind;
-  type.value = item.label;
-  echartDataSg1.xData.length = 0;
-  echartDataSg1.yData.length = 0;
-  echartDataSg1.lengedData = type.value;
-  echartDataSg1.lengedDataName = item.dw;
-
-  const data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
-  switch (type.value) {
-    case 'O₂':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.o2val);
-      });
-
-      curveConfig.value = {
-        id: 'o2',
-        label: 'O₂',
-        time: echartDataSg1.xData,
-        data: [
-          // 氧气预测曲线
-          data.avgParam?.avg_o2_value || 0,
-          data.avgParam?.max_o2_value || 0,
-          data.avgParam?.min_o2_value || 0,
-          // data.readData?.o2val,
-        ],
-        monitorData: echartDataSg1.yData,
-      };
-      getmax();
-      break;
-    case 'C₂H₄':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.ch2val);
-      });
-      curveConfig.value = {
-        id: 'ch2',
-        label: 'C₂H₄',
-        time: echartDataSg1.xData,
-        data: [
-          // 预测曲线
-          data.avgParam?.avg_c2h4_value || 0,
-          data.avgParam?.max_c2h4_value || 0,
-          data.avgParam?.min_c2h4_value || 0,
-          // data.readData?.ch2val,
-        ],
-        monitorData: echartDataSg1.yData,
-      };
-      getmax();
-      break;
-    case 'CO':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.coval);
-      });
-      curveConfig.value = {
-        id: 'co',
-        label: 'CO',
-        time: echartDataSg1.xData,
-        data: [
-          // 预测曲线
-          data.avgParam?.avg_co_value || 0,
-          data.avgParam?.max_co_value || 0,
-          data.avgParam?.min_co_value || 0,
-          // data.readData?.coval,
-        ],
-        monitorData: echartDataSg1.yData,
-      };
-      getmax();
-      break;
-    case 'CH₄':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.gasval);
-      });
-      curveConfig.value = {
-        id: 'ch',
-        label: 'CH₄',
-        time: echartDataSg1.xData,
-        data: [
-          // 预测曲线
-          data.avgParam?.avg_ch4_value || 0,
-          data.avgParam?.max_ch4_value || 0,
-          data.avgParam?.min_ch4_value || 0,
-          // data.readData?.chval,
-        ],
-        monitorData: echartDataSg1.yData,
-      };
-      getmax();
-      break;
-    case 'CO₂':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.co2val);
-      });
-      curveConfig.value = {
-        id: 'co2',
-        label: 'CO₂',
-        time: echartDataSg1.xData,
-        data: [
-          // 预测曲线
-          data.avgParam?.avg_co2_value || 0,
-          data.avgParam?.max_co2_value || 0,
-          data.avgParam?.min_co2_value || 0,
-          // data.readData?.co2val,
-        ],
-        monitorData: echartDataSg1.yData,
-      };
-      getmax();
-      break;
-    case 'C₂H₂':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.chval);
-      });
-      curveConfig.value = {
-        id: 'gas',
-        label: 'C₂H₂',
-        time: echartDataSg1.xData,
-        data: [
-          // 预测曲线
-          data.avgParam?.avg_c2h2_value || 0,
-          data.avgParam?.max_c2h2_value || 0,
-          data.avgParam?.min_c2h2_value || 0,
-          // data.readData?.gasval,
-        ],
-        monitorData: echartDataSg1.yData,
-      };
-      getmax();
-      break;
-  }
-}
-
-function changeSelect(val) {
-  selectData.value = val;
-  let data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
-  topContent.time = data.readTime || '--';
-  topContent.warnLevel = data.syswarnLevel_str;
-  topContent.smokeJd = data.syswarnLevel_des;
-
-  mbList[0].nd = data.readData.o2val || '--';
-  mbList[1].nd = data.readData.coval || '--';
-  mbList[2].nd = data.readData.co2val || '--';
-  mbList[3].nd = data.readData.gasval || '--';
-  mbList[4].nd = data.readData.chval || '--';
-  mbList[5].nd = data.readData.ch2val || '--';
-  mbList.forEach((el) => {
-    el.time1 = data ? data.readTime.substring(0, data.readTime.lastIndexOf(':')) : '--';
-    el.address = data ? data.strinstallpos : '--';
+  import { ref, reactive, watch, inject, h } from 'vue';
+  import echartLine1 from './echartLine1.vue';
+  import warnZb from './warnZb.vue';
+  import PredictionCurve from './predictionCurve.vue';
+  import { Modal, Input } from 'ant-design-vue';
+  import { getMaxY, getMinY } from '../common.data';
+  // import { deviceControlApi } from '/@/api/vent/index';
+
+  let props = defineProps({
+    listData: Object,
+  });
+
+  const globalConfig = inject('globalConfig');
+  const shownChart = ref('default');
+  let maxY = ref<any>(0);
+  let minY = ref<any>(0);
+  let selectSj = ref<any[]>([]);
+  let selectData = ref('');
+  let selectList = reactive<any[]>([]);
+  let widthV = ref('75%');
+  let heightV = ref('80%');
+  let coordDw = ref<any[]>([31, 62, 110]);
+  let widthCanvas = ref(562);
+  let heightCanvas = ref(316);
+  //设备连接状态
+  let netStatus = ref(0);
+  //密闭-顶部区域数据
+  let topContent = reactive({
+    temperature: 0,
+    position: '',
+    time: '',
+    warnLevel: '',
+    smokeJd: '',
   });
-  netStatus.value = data['netStatus'];
-}
-
-// 设备控制
-function controlDevice(code, value?) {
-  const passWord = ref('');
-  Modal.confirm({
-    title: '是否确认执行该操作？',
-    maskClosable: true,
-    content: () => {
-      return h(Input, {
-        placeholder: '请输入密码',
-        type: 'password',
-        modelValue: passWord.value,
-        'onUpdate:value'(val) {
-          passWord.value = val;
-        },
-      });
+  //密闭参数列表
+  let mbList = reactive([
+    {
+      label: 'O₂',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
+    },
+    {
+      label: 'CO',
+      dw: '(ppm)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
+    },
+    {
+      label: 'CO₂',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
     },
-    onOk() {
-      console.log('OK', passWord);
+    {
+      label: 'CH₄',
+      dw: '(%)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
     },
+    {
+      label: 'C₂H₂',
+      dw: '(ppm)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
+    },
+    {
+      label: 'C₂H₄',
+      dw: '(ppm)',
+      label1: '浓度',
+      label2: '时间',
+      label3: '位置',
+      nd: '0',
+      time1: '',
+      address: '',
+    },
+  ]);
+
+  //当前密闭参数激活选项
+  let activeIndex = ref(0);
+  //当前激活密闭参数类型
+  let type = ref('O₂');
+
+  let echartDataSg1 = reactive({
+    xData: [],
+    yData: [],
+    lengedData: 'O₂',
+    lengedDataName: '(%)',
   });
-  // Promise.all(
-  //   [].map(({ deviceID, deviceType }) => {
-  //     return deviceControlApi({
-  //       deviceid: deviceID,
-  //       devicetype: deviceType,
-  //       paramcode: code,
-  //       value,
-  //       // password: passWord || globalConfig?.simulatedPassword,
-  //     });
-  //   })
-  // ).then((res) => {
-  //   // 模拟时开启
-  //   if (res.success) {
-  //     if (globalConfig.History_Type == 'remote') {
-  //       message.success('指令已下发至生产管控平台成功！');
-  //     } else {
-  //       message.success('指令已下发成功！');
-  //     }
-  //   } else {
-  //     message.error(res.message);
-  //   }
-  // });
-}
-
-/** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
-const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0, 0, 0] });
-
-watch(
-  () => props.listData,
-  (val: any) => {
+  let echartDataSgList = reactive<any[]>([]);
+
+  function getmax() {
+    getMaxY(echartDataSg1.yData);
+    getMinY(echartDataSg1.yData);
+    // maxY.value = echartDataSg1.yData.reduce((acr, cur) => {
+    //   return acr > cur ? acr : cur;
+    // });
+    // maxY.value =
+    //   maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
+    // if (maxY.value.length < 2 && Number(maxY.value) < 1) {
+    //   maxY.value = 1;
+    // } else if (maxY.value.length < 2 && Number(maxY.value) >= 1) {
+    //   maxY.value = 10;
+    // } else if (maxY.value.length < 3) {
+    //   maxY.value = (Number(maxY.value[0]) + 1) * 10;
+    // } else if (maxY.value.length < 4) {
+    //   maxY.value = (Number(maxY.value[0]) + 1) * 100;
+    // } else if (maxY.value.length < 5) {
+    //   maxY.value = (Number(maxY.value[0]) + 1) * 1000;
+    // } else if (maxY.value.length < 6) {
+    //   maxY.value = (Number(maxY.value[0]) + 1) * 10000;
+    // }
+  }
+  //密闭参数选项切换
+  function btnClick(item, ind) {
+    // debugger;
+    activeIndex.value = ind;
+    type.value = item.label;
     echartDataSg1.xData.length = 0;
     echartDataSg1.yData.length = 0;
-    echartDataSgList.length = 0;
-    selectList.length = 0;
-    if (JSON.stringify(val) === '{}') return;
-    if (val.bundletube.length != 0) {
-      selectSj.value = val.bundletube;
-      selectSj.value.forEach((el) => {
-        selectList.push({ label: el.strinstallpos, value: el.strinstallpos });
-      });
-      selectData.value = selectData.value ? selectData.value : selectList[0].value;
-      let dataVal = selectData.value ? selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0] : selectSj.value[0];
-      topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
-      topContent.time = dataVal.readTime || '--';
-      topContent.warnLevel = dataVal.syswarnLevel_str;
-      topContent.smokeJd = dataVal.syswarnLevel_des;
-
-      mbList[0].nd = dataVal.readData.o2val || '--';
-      mbList[1].nd = dataVal.readData.coval || '--';
-      mbList[2].nd = dataVal.readData.co2val || '--';
-      mbList[3].nd = dataVal.readData.gasval || '--';
-      mbList[4].nd = dataVal.readData.chval || '--';
-      mbList[5].nd = dataVal.readData.ch2val || '--';
-      mbList.forEach((el) => {
-        el.time1 = dataVal ? dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':')) : '--';
-        el.address = dataVal ? dataVal.strinstallpos : '--';
-      });
-      netStatus.value = dataVal['netStatus'];
-      echartDataSgList = dataVal.history;
-      btnClick(
-        {
-          label: type.value,
-          dw: echartDataSg1.lengedDataName,
-        },
-        activeIndex.value
-      );
-      // dataVal.history.forEach((v) => {
-      //   echartDataSg1.xData.push(v.time);
-      //   if (echartDataSg1.lengedData == 'O₂') {
-      //     echartDataSg1.yData.push(v.o2val);
-      //   } else if (echartDataSg1.lengedData == 'C₂H₄') {
-      //     echartDataSg1.yData.push(v.ch2val);
-      //   } else if (echartDataSg1.lengedData == 'CO') {
-      //     echartDataSg1.yData.push(v.coval);
-      //   } else if (echartDataSg1.lengedData == 'CH₄') {
-      //     echartDataSg1.yData.push(v.chval);
-      //   } else if (echartDataSg1.lengedData == 'CO₂') {
-      //     echartDataSg1.yData.push(v.co2val);
-      //   } else if (echartDataSg1.lengedData == 'C₂H₂') {
-      //     echartDataSg1.yData.push(v.gasval);
-      //   }
-      //   echartDataSgList.push(v);
-      // });
-      getmax();
-    } else {
-      topContent.temperature = 0;
-      // topContent.position = '--';
-      topContent.time = '--';
-      topContent.warnLevel = '--';
-      topContent.smokeJd = '--';
-      mbList[0].nd = '--';
-      mbList[1].nd = '--';
-      mbList[2].nd = '--';
-      mbList[3].nd = '--';
-      mbList[4].nd = '--';
-      mbList[5].nd = '--';
-      mbList.forEach((el) => {
-        el.time1 = '--';
-        el.address = '--';
-      });
+    echartDataSg1.lengedData = type.value;
+    echartDataSg1.lengedDataName = item.dw;
+
+    const data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
+    switch (type.value) {
+      case 'O₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.o2val);
+        });
+
+        curveConfig.value = {
+          id: 'o2',
+          label: 'O₂',
+          time: echartDataSg1.xData,
+          data: [
+            // 氧气预测曲线
+            data.avgParam?.avg_o2_value || 0,
+            data.avgParam?.max_o2_value || 0,
+            data.avgParam?.min_o2_value || 0,
+            // data.readData?.o2val,
+          ],
+          monitorData: echartDataSg1.yData,
+        };
+        getmax();
+        break;
+      case 'C₂H₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.ch2val);
+        });
+        curveConfig.value = {
+          id: 'ch2',
+          label: 'C₂H₄',
+          time: echartDataSg1.xData,
+          data: [
+            // 预测曲线
+            data.avgParam?.avg_c2h4_value || 0,
+            data.avgParam?.max_c2h4_value || 0,
+            data.avgParam?.min_c2h4_value || 0,
+            // data.readData?.ch2val,
+          ],
+          monitorData: echartDataSg1.yData,
+        };
+        getmax();
+        break;
+      case 'CO':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.coval);
+        });
+        curveConfig.value = {
+          id: 'co',
+          label: 'CO',
+          time: echartDataSg1.xData,
+          data: [
+            // 预测曲线
+            data.avgParam?.avg_co_value || 0,
+            data.avgParam?.max_co_value || 0,
+            data.avgParam?.min_co_value || 0,
+            // data.readData?.coval,
+          ],
+          monitorData: echartDataSg1.yData,
+        };
+        getmax();
+        break;
+      case 'CH₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.gasval);
+        });
+        curveConfig.value = {
+          id: 'ch',
+          label: 'CH₄',
+          time: echartDataSg1.xData,
+          data: [
+            // 预测曲线
+            data.avgParam?.avg_ch4_value || 0,
+            data.avgParam?.max_ch4_value || 0,
+            data.avgParam?.min_ch4_value || 0,
+            // data.readData?.chval,
+          ],
+          monitorData: echartDataSg1.yData,
+        };
+        getmax();
+        break;
+      case 'CO₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.co2val);
+        });
+        curveConfig.value = {
+          id: 'co2',
+          label: 'CO₂',
+          time: echartDataSg1.xData,
+          data: [
+            // 预测曲线
+            data.avgParam?.avg_co2_value || 0,
+            data.avgParam?.max_co2_value || 0,
+            data.avgParam?.min_co2_value || 0,
+            // data.readData?.co2val,
+          ],
+          monitorData: echartDataSg1.yData,
+        };
+        getmax();
+        break;
+      case 'C₂H₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.chval);
+        });
+        curveConfig.value = {
+          id: 'gas',
+          label: 'C₂H₂',
+          time: echartDataSg1.xData,
+          data: [
+            // 预测曲线
+            data.avgParam?.avg_c2h2_value || 0,
+            data.avgParam?.max_c2h2_value || 0,
+            data.avgParam?.min_c2h2_value || 0,
+            // data.readData?.gasval,
+          ],
+          monitorData: echartDataSg1.yData,
+        };
+        getmax();
+        break;
     }
-  },
-  { immediate: true, deep: true }
-);
+  }
+
+  function changeSelect(val) {
+    selectData.value = val;
+    let data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
+    topContent.time = data.readTime || '--';
+    topContent.warnLevel = data.syswarnLevel_str;
+    topContent.smokeJd = data.syswarnLevel_des;
+
+    mbList[0].nd = data.readData.o2val || '--';
+    mbList[1].nd = data.readData.coval || '--';
+    mbList[2].nd = data.readData.co2val || '--';
+    mbList[3].nd = data.readData.gasval || '--';
+    mbList[4].nd = data.readData.chval || '--';
+    mbList[5].nd = data.readData.ch2val || '--';
+    mbList.forEach((el) => {
+      el.time1 = data ? data.readTime.substring(0, data.readTime.lastIndexOf(':')) : '--';
+      el.address = data ? data.strinstallpos : '--';
+    });
+    netStatus.value = data['netStatus'];
+  }
+
+  // 设备控制
+  function controlDevice(code, value?) {
+    const passWord = ref('');
+    Modal.confirm({
+      title: '是否确认执行该操作？',
+      maskClosable: true,
+      content: () => {
+        return h(Input, {
+          placeholder: '请输入密码',
+          type: 'password',
+          modelValue: passWord.value,
+          'onUpdate:value'(val) {
+            passWord.value = val;
+          },
+        });
+      },
+      onOk() {
+        console.log('OK', passWord);
+      },
+    });
+    // Promise.all(
+    //   [].map(({ deviceID, deviceType }) => {
+    //     return deviceControlApi({
+    //       deviceid: deviceID,
+    //       devicetype: deviceType,
+    //       paramcode: code,
+    //       value,
+    //       // password: passWord || globalConfig?.simulatedPassword,
+    //     });
+    //   })
+    // ).then((res) => {
+    //   // 模拟时开启
+    //   if (res.success) {
+    //     if (globalConfig.History_Type == 'remote') {
+    //       message.success('指令已下发至生产管控平台成功！');
+    //     } else {
+    //       message.success('指令已下发成功！');
+    //     }
+    //   } else {
+    //     message.error(res.message);
+    //   }
+    // });
+  }
+
+  /** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
+  const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0, 0, 0] });
+
+  watch(
+    () => props.listData,
+    (val: any) => {
+      echartDataSg1.xData.length = 0;
+      echartDataSg1.yData.length = 0;
+      echartDataSgList.length = 0;
+      selectList.length = 0;
+      if (JSON.stringify(val) === '{}') return;
+      if (val.bundletube.length != 0) {
+        selectSj.value = val.bundletube;
+        selectSj.value.forEach((el) => {
+          selectList.push({ label: el.strinstallpos, value: el.strinstallpos });
+        });
+        selectData.value = selectData.value ? selectData.value : selectList[0].value;
+        let dataVal = selectData.value ? selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0] : selectSj.value[0];
+        topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
+        topContent.time = dataVal.readTime || '--';
+        topContent.warnLevel = dataVal.syswarnLevel_str;
+        topContent.smokeJd = dataVal.syswarnLevel_des;
+
+        mbList[0].nd = dataVal.readData.o2val || '--';
+        mbList[1].nd = dataVal.readData.coval || '--';
+        mbList[2].nd = dataVal.readData.co2val || '--';
+        mbList[3].nd = dataVal.readData.gasval || '--';
+        mbList[4].nd = dataVal.readData.chval || '--';
+        mbList[5].nd = dataVal.readData.ch2val || '--';
+        mbList.forEach((el) => {
+          el.time1 = dataVal ? dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':')) : '--';
+          el.address = dataVal ? dataVal.strinstallpos : '--';
+        });
+        netStatus.value = dataVal['netStatus'];
+        echartDataSgList = dataVal.history;
+        btnClick(
+          {
+            label: type.value,
+            dw: echartDataSg1.lengedDataName,
+          },
+          activeIndex.value
+        );
+        // dataVal.history.forEach((v) => {
+        //   echartDataSg1.xData.push(v.time);
+        //   if (echartDataSg1.lengedData == 'O₂') {
+        //     echartDataSg1.yData.push(v.o2val);
+        //   } else if (echartDataSg1.lengedData == 'C₂H₄') {
+        //     echartDataSg1.yData.push(v.ch2val);
+        //   } else if (echartDataSg1.lengedData == 'CO') {
+        //     echartDataSg1.yData.push(v.coval);
+        //   } else if (echartDataSg1.lengedData == 'CH₄') {
+        //     echartDataSg1.yData.push(v.chval);
+        //   } else if (echartDataSg1.lengedData == 'CO₂') {
+        //     echartDataSg1.yData.push(v.co2val);
+        //   } else if (echartDataSg1.lengedData == 'C₂H₂') {
+        //     echartDataSg1.yData.push(v.gasval);
+        //   }
+        //   echartDataSgList.push(v);
+        // });
+        getmax();
+      } else {
+        topContent.temperature = 0;
+        // topContent.position = '--';
+        topContent.time = '--';
+        topContent.warnLevel = '--';
+        topContent.smokeJd = '--';
+        mbList[0].nd = '--';
+        mbList[1].nd = '--';
+        mbList[2].nd = '--';
+        mbList[3].nd = '--';
+        mbList[4].nd = '--';
+        mbList[5].nd = '--';
+        mbList.forEach((el) => {
+          el.time1 = '--';
+          el.address = '--';
+        });
+      }
+    },
+    { immediate: true, deep: true }
+  );
 </script>
 
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .closeWall {
+      --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+      --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
+      --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
+      --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
+      --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
+    }
+  }
 
-@{theme-deepblue} {
   .closeWall {
-    --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
-    --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
-    --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
-    --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
-    --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
-  }
-}
-
-.closeWall {
-  --image-bj1: url('/@/assets/images/fire/bj1.png');
-  --image-pj: url('/@/assets/images/fire/pj.svg');
-  --image-1: url('/@/assets/images/fire/1.png');
-  --image-contetn: url('/@/assets/images/fire/contetn.png');
-  --image-2: url('/@/assets/images/fire/2.png');
-  --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  box-sizing: border-box;
-
-  .title {
+    --image-bj1: url('/@/assets/images/fire/bj1.png');
+    --image-pj: url('/@/assets/images/fire/pj.svg');
+    --image-1: url('/@/assets/images/fire/1.png');
+    --image-contetn: url('/@/assets/images/fire/contetn.png');
+    --image-2: url('/@/assets/images/fire/2.png');
+    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
     width: 100%;
-    height: 17%;
-    margin-bottom: 20px;
-    display: flex;
-    justify-content: space-between;
-    background: var(--image-bj1) no-repeat center;
-    background-size: 100% 100%;
-    align-items: center;
-
-    .box-container {
-      display: flex;
-
-      &:nth-child(1) {
-        justify-content: space-between;
-        align-items: center;
-        padding: 0px 40px;
-        flex: 2;
-        height: 100%;
-        border-right: 2px solid;
-        border-image: var(--border-image-2) 1 1 1;
-      }
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
 
-      &:nth-child(2) {
-        flex-direction: column;
-        flex: 1;
-        justify-content: space-around;
-        align-items: center;
-        height: 73%;
-        border-right: 2px solid;
-        border-image: var(--border-image-2) 1 1 1;
-      }
+    .title {
+      width: 100%;
+      height: 17%;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-between;
+      background: var(--image-bj1) no-repeat center;
+      background-size: 100% 100%;
+      align-items: center;
 
-      .contents {
-        height: 73%;
+      .box-container {
+        display: flex;
 
         &:nth-child(1) {
-          width: 50%;
-          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0px 40px;
+          flex: 2;
+          height: 100%;
+          border-right: 2px solid;
+          border-image: var(--border-image-2) 1 1 1;
+        }
+
+        &:nth-child(2) {
           flex-direction: column;
+          flex: 1;
           justify-content: space-around;
+          align-items: center;
+          height: 73%;
+          border-right: 2px solid;
+          border-image: var(--border-image-2) 1 1 1;
+        }
+
+        .contents {
+          height: 73%;
 
-          .text {
-            font-size: 14px;
+          &:nth-child(1) {
+            width: 50%;
             display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+
+            .text {
+              font-size: 14px;
+              display: flex;
+              align-items: center;
+
+              .text-label {
+                color: #b3b8cc;
+                font-weight: bold;
+              }
+
+              .text-value {
+                font-family: 'douyuFont';
+                color: var(--vent-table-action-link);
+                margin-left: 10px;
+              }
+            }
+          }
+
+          &:nth-child(2) {
+            width: 50%;
+            display: flex;
+            justify-content: center;
             align-items: center;
 
-            .text-label {
-              color: #b3b8cc;
-              font-weight: bold;
+            img {
+              position: relative;
+              width: 90px;
+              height: 100%;
+              background: var(--image-pj) no-repeat center;
+              background-size: 90px 50%;
             }
 
-            .text-value {
+            .text {
               font-family: 'douyuFont';
+              font-size: 28px;
+              margin: 0px 15px;
               color: var(--vent-table-action-link);
-              margin-left: 10px;
+            }
+
+            .dw {
+              font-size: 14px;
+              color: #b3b8cc;
             }
           }
         }
 
-        &:nth-child(2) {
-          width: 50%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
+        .text1 {
+          width: 90%;
+          height: 30px;
+          line-height: 30px;
+          font-size: 14px;
+          color: #b3b8cc;
+          font-weight: bold;
 
-          img {
-            position: relative;
-            width: 90px;
-            height: 100%;
-            background: var(--image-pj) no-repeat center;
-            background-size: 90px 50%;
-          }
+          span {
+            display: inline-block;
 
-          .text {
-            font-family: 'douyuFont';
-            font-size: 28px;
-            margin: 0px 15px;
-            color: var(--vent-table-action-link);
-          }
+            &:nth-child(1) {
+              width: 160px;
+              text-align: right;
+            }
 
-          .dw {
-            font-size: 14px;
-            color: #b3b8cc;
+            &:nth-child(2) {
+              font-family: 'douyuFont';
+              color: var(--vent-table-action-link);
+              margin-left: 10px;
+            }
           }
-        }
-      }
-
-      .text1 {
-        width: 90%;
-        height: 30px;
-        line-height: 30px;
-        font-size: 14px;
-        color: #b3b8cc;
-        font-weight: bold;
-
-        span {
-          display: inline-block;
 
-          &:nth-child(1) {
-            width: 160px;
-            text-align: right;
+          .value1 {
+            color: rgb(145, 230, 9) !important;
           }
 
-          &:nth-child(2) {
-            font-family: 'douyuFont';
-            color: var(--vent-table-action-link);
-            margin-left: 10px;
+          .value2 {
+            // color: rgb(0, 242, 255) !important;
+            color: #ffff35 !important;
           }
-        }
-
-        .value1 {
-          color: rgb(145, 230, 9) !important;
-        }
-
-        .value2 {
-          // color: rgb(0, 242, 255) !important;
-          color: #ffff35 !important;
-        }
 
-        .value3 {
-          // color: #ffff35 !important;
-          color: #ff0000 !important;
-        }
+          .value3 {
+            // color: #ffff35 !important;
+            color: #ff0000 !important;
+          }
 
-        .value4 {
-          color: orange !important;
-        }
+          .value4 {
+            color: orange !important;
+          }
 
-        .value5 {
-          color: #ff6f00 !important;
-        }
+          .value5 {
+            color: #ff6f00 !important;
+          }
 
-        .value6 {
-          color: #ff0000 !important;
+          .value6 {
+            color: #ff0000 !important;
+          }
         }
       }
     }
-  }
-
-  .content {
-    width: 100%;
-    height: calc(83% - 20px);
-    padding: 10px;
-    background: var(--image-bj1) no-repeat center;
-    background-size: 100% 100%;
-    box-sizing: border-box;
 
-    .title-b {
-      height: 30px;
-      line-height: 30px;
-      font-family: 'douyuFont';
-      font-size: 14px;
-      color: #fff;
-      // color: var(--vent-table-action-link);
-    }
+    .content {
+      width: 100%;
+      height: calc(83% - 20px);
+      padding: 10px;
+      background: var(--image-bj1) no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
 
-    .card-btn {
-      height: 28%;
-      margin-bottom: 10px;
-      display: flex;
-      justify-content: space-between;
+      .title-b {
+        height: 30px;
+        line-height: 30px;
+        font-family: 'douyuFont';
+        font-size: 14px;
+        color: #fff;
+        // color: var(--vent-table-action-link);
+      }
 
-      .box-container {
-        position: relative;
-        width: 16%;
-        height: 100%;
-        background: var(--image-1) no-repeat center;
-        background-size: 100% 100%;
-        cursor: pointer;
-
-        .box-label {
-          position: absolute;
-          left: 50%;
-          top: 2px;
-          transform: translate(-50%);
-          color: #fff;
-        }
+      .card-btn {
+        height: 28%;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
 
-        .box-item {
-          position: absolute;
-          left: 50%;
-          transform: translate(-50%, 0);
-          width: 89%;
-          height: 16%;
-          padding: 0px 10px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          background: var(--image-contetn) no-repeat center;
+        .box-container {
+          position: relative;
+          width: 16%;
+          height: 100%;
+          background: var(--image-1) no-repeat center;
           background-size: 100% 100%;
+          cursor: pointer;
 
-          .text-t {
-            width: 17%;
+          .box-label {
+            position: absolute;
+            left: 50%;
+            top: 2px;
+            transform: translate(-50%);
             color: #fff;
-            font-size: 12px;
           }
 
-          .text-v {
-            width: 83%;
-            font-family: 'douyuFont';
-            font-size: 10px;
-            color: var(--vent-table-action-link);
+          .box-item {
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 89%;
+            height: 16%;
+            padding: 0px 10px;
             display: flex;
-            justify-content: flex-end;
-          }
-        }
+            justify-content: space-between;
+            align-items: center;
+            background: var(--image-contetn) no-repeat center;
+            background-size: 100% 100%;
 
-        .box-item1 {
-          top: 24%;
-        }
+            .text-t {
+              width: 17%;
+              color: #fff;
+              font-size: 12px;
+            }
 
-        .box-item2 {
-          top: 50%;
-        }
+            .text-v {
+              width: 83%;
+              font-family: 'douyuFont';
+              font-size: 10px;
+              color: var(--vent-table-action-link);
+              display: flex;
+              justify-content: flex-end;
+            }
+          }
 
-        .box-item3 {
-          top: 75%;
-        }
-      }
+          .box-item1 {
+            top: 24%;
+          }
 
-      .box-container1 {
-        position: relative;
-        width: 16%;
-        height: 100%;
-        background: var(--image-2) no-repeat center;
-        background-size: 100% 100%;
-        cursor: pointer;
-
-        .box-label {
-          position: absolute;
-          left: 50%;
-          top: 2px;
-          transform: translate(-50%);
-          color: #fff;
+          .box-item2 {
+            top: 50%;
+          }
+
+          .box-item3 {
+            top: 75%;
+          }
         }
 
-        .box-item {
-          position: absolute;
-          left: 50%;
-          transform: translate(-50%, 0);
-          width: 89%;
-          height: 16%;
-          padding: 0px 10px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          background: var(--image-contetn) no-repeat center;
+        .box-container1 {
+          position: relative;
+          width: 16%;
+          height: 100%;
+          background: var(--image-2) no-repeat center;
           background-size: 100% 100%;
+          cursor: pointer;
 
-          .text-t {
-            width: 17%;
+          .box-label {
+            position: absolute;
+            left: 50%;
+            top: 2px;
+            transform: translate(-50%);
             color: #fff;
-            font-size: 12px;
           }
 
-          .text-v {
-            width: 83%;
-            font-family: 'douyuFont';
-            font-size: 10px;
-            color: var(--vent-table-action-link);
+          .box-item {
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 89%;
+            height: 16%;
+            padding: 0px 10px;
             display: flex;
-            justify-content: flex-end;
+            justify-content: space-between;
+            align-items: center;
+            background: var(--image-contetn) no-repeat center;
+            background-size: 100% 100%;
+
+            .text-t {
+              width: 17%;
+              color: #fff;
+              font-size: 12px;
+            }
+
+            .text-v {
+              width: 83%;
+              font-family: 'douyuFont';
+              font-size: 10px;
+              color: var(--vent-table-action-link);
+              display: flex;
+              justify-content: flex-end;
+            }
           }
-        }
 
-        .box-item1 {
-          top: 19%;
-        }
+          .box-item1 {
+            top: 19%;
+          }
 
-        .box-item2 {
-          top: 41%;
-        }
+          .box-item2 {
+            top: 41%;
+          }
 
-        .box-item3 {
-          top: 63%;
+          .box-item3 {
+            top: 63%;
+          }
         }
       }
-    }
 
-    .echart-box {
-      display: flex;
-      height: calc(72% - 41px);
-
-      .left-echartbox {
-        width: calc(50% - 6px);
-        margin-right: 6px;
-        border: 1px solid #114aac;
-        border-radius: 5px;
-
-        .title-f {
-          height: 40px;
-          padding: 0px 10px;
-          box-sizing: border-box;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
+      .echart-box {
+        display: flex;
+        height: calc(72% - 41px);
 
-          .title-text {
-            font-family: 'douyuFont';
-            font-size: 14px;
-            color: #fff;
-            // color: var(--vent-table-action-link);
+        .left-echartbox {
+          width: calc(50% - 6px);
+          margin-right: 6px;
+          border: 1px solid #114aac;
+          border-radius: 5px;
+
+          .title-f {
+            height: 40px;
+            padding: 0px 10px;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .title-text {
+              font-family: 'douyuFont';
+              font-size: 14px;
+              color: #fff;
+              // color: var(--vent-table-action-link);
+            }
           }
-        }
 
-        .echarts-box {
-          height: calc(100% - 40px);
-          padding: 0px 10px;
-          box-sizing: border-box;
+          .echarts-box {
+            height: calc(100% - 40px);
+            padding: 0px 10px;
+            box-sizing: border-box;
+          }
         }
-      }
 
-      .right-echartbox {
-        width: calc(50% - 6px);
-        margin-left: 6px;
-        border: 1px solid #114aac;
-        border-radius: 5px;
+        .right-echartbox {
+          width: calc(50% - 6px);
+          margin-left: 6px;
+          border: 1px solid #114aac;
+          border-radius: 5px;
+        }
       }
     }
   }
-}
 
-:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-  border: 1px solid #3ad8ff77 !important;
-  background-color: #ffffff00 !important;
-}
+  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+    border: 1px solid #3ad8ff77 !important;
+    background-color: #ffffff00 !important;
+  }
 
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
 
-:deep(.zxm-select-arrow) {
-  color: #fff;
-}
+  :deep(.zxm-select-arrow) {
+    color: #fff;
+  }
 </style>

src/views/vent/monitorManager/alarmMonitor/common/closeWall.vue

@@ -1,55 +1,60 @@
 <template>
-    <div class="closeWall">
-      <div class="top-area">
-        <internalFireTop1 :internalFireTopData="internalFireTopData" :temperatureData="temperatureData" @changeSelect="changeSelect" @changeWarnLevel="changeWarnLevel">
-        </internalFireTop1>
-      </div>
-      <div class="content">
-        <internalFireBot1 :internalFireBotData="internalFireBotData" :selectData="selectData" :warnLevel="warnLevel"></internalFireBot1>
-      </div>
+  <div class="closeWall">
+    <div class="top-area">
+      <internalFireTop1
+        :internalFireTopData="internalFireTopData"
+        :temperatureData="temperatureData"
+        @changeSelect="changeSelect"
+        @changeWarnLevel="changeWarnLevel"
+      >
+      </internalFireTop1>
     </div>
-  </template>
-  
-  <script lang="ts" setup>
-  import { ref, reactive, watch, defineProps, inject,  } from 'vue';
+    <div class="content">
+      <internalFireBot1 :internalFireBotData="internalFireBotData" :selectData="selectData" :warnLevel="warnLevel"></internalFireBot1>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch, inject } from 'vue';
   import internalFireBot1 from './internal-fire-bot1.vue';
-  import internalFireTop1 from './internal-fire-top1.vue'
-  
+  import internalFireTop1 from './internal-fire-top1.vue';
+
   let props = defineProps({
     listData: Object,
   });
-  
+
   const globalConfig = inject('globalConfig');
-  
-  let internalFireTopData = ref<any[]>([])
-  let temperatureData = ref(0)
-  let internalFireBotData = ref<any[]>([])
-  let selectData=ref('')
-  let warnLevel=ref('')
-  
- function changeSelect(data){
-    selectData.value=data
+
+  let internalFireTopData = ref<any[]>([]);
+  let temperatureData = ref(0);
+  let internalFireBotData = ref<any[]>([]);
+  let selectData = ref('');
+  let warnLevel = ref('');
+
+  function changeSelect(data) {
+    selectData.value = data;
   }
 
-  function changeWarnLevel(data){
-    warnLevel.value=data
+  function changeWarnLevel(data) {
+    warnLevel.value = data;
   }
-  
+
   watch(
     () => props.listData,
     (val: any) => {
       if (JSON.stringify(val) === '{}') return;
-      internalFireTopData.value = val.bundletube
-      temperatureData.value = val.temperature[0] ? val.temperature[0].readData.temperature : '--'
-      internalFireBotData.value=val.bundletube
+      internalFireTopData.value = val.bundletube;
+      temperatureData.value = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
+      internalFireBotData.value = val.bundletube;
     },
     { immediate: true, deep: true }
   );
-  </script>
-  
-  <style lang="less" scoped>
+</script>
+
+<style lang="less" scoped>
   @import '/@/design/theme.less';
-  
+
   @{theme-deepblue} {
     .closeWall {
       --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
@@ -59,7 +64,7 @@
       --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
     }
   }
-  
+
   .closeWall {
     --image-bj1: url('/@/assets/images/fire/bj1.png');
     --image-pj: url('/@/assets/images/fire/pj.svg');
@@ -71,7 +76,7 @@
     height: 100%;
     padding: 20px;
     box-sizing: border-box;
-  
+
     .top-area {
       width: 100%;
       height: 17%;
@@ -79,9 +84,7 @@
       background: var(--image-bj1) no-repeat center;
       background-size: 100% 100%;
     }
-  
-  
-  
+
     .content {
       width: 100%;
       height: calc(83% - 20px);
@@ -91,18 +94,17 @@
       box-sizing: border-box;
     }
   }
-  
+
   :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
     border: 1px solid #3ad8ff77 !important;
     background-color: #ffffff00 !important;
   }
-  
+
   :deep(.zxm-select-selection-item) {
     color: #fff !important;
   }
-  
+
   :deep(.zxm-select-arrow) {
     color: #fff;
   }
-  </style>
-  
+</style>

src/views/vent/monitorManager/alarmMonitor/common/echartLine.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { defineProps, ref, nextTick, reactive, watch } from 'vue';
+  import { ref, nextTick, reactive, watch } from 'vue';
   import * as echarts from 'echarts';
 
   let props = defineProps({

src/views/vent/monitorManager/alarmMonitor/common/echartLine1.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
   import * as echarts from 'echarts';
-  import { ref, nextTick, reactive, watch, defineProps } from 'vue';
+  import { ref, nextTick, reactive, watch } from 'vue';
   let props = defineProps({
     echartDataSg: {
       type: Object,
@@ -141,7 +141,7 @@
             name: props.lengedDataName ? props.lengedDataName : '',
             type: 'value',
             max: props.maxY,
-            min:props.minY,
+            min: props.minY,
             axisLabel: {
               textStyle: {
                 color: '#b3b8cc',

src/views/vent/monitorManager/alarmMonitor/common/echartLine2.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
   import * as echarts from 'echarts';
-  import { ref, nextTick, reactive, watch, defineProps } from 'vue';
+  import { ref, nextTick, reactive, watch } from 'vue';
 
   let props = defineProps({
     echartDataWd: {

src/views/vent/monitorManager/alarmMonitor/common/echartLine3.vue

@@ -3,175 +3,174 @@
 </template>
 
 <script lang="ts" setup>
-import * as echarts from 'echarts';
-import { ref, nextTick, watch, defineProps } from 'vue';
+  import * as echarts from 'echarts';
+  import { ref, nextTick, watch } from 'vue';
 
-// well i know this is trash but the time is reaching
-let props = defineProps<{
-  xData: string[];
-  y1Data: number[];
-  y2Data: number[];
-  y3Data: number[];
-  y4Data: number[];
-  yUnit?: string;
-  legendName?: string;
-}>();
+  // well i know this is trash but the time is reaching
+  let props = defineProps<{
+    xData: string[];
+    y1Data: number[];
+    y2Data: number[];
+    y3Data: number[];
+    y4Data: number[];
+    yUnit?: string;
+    legendName?: string;
+  }>();
 
-//获取dom元素节点
-let work = ref<any>();
+  //获取dom元素节点
+  let work = ref<any>();
 
-watch(
-  () => props.xData,
-  () => {
-    getOption();
-  },
-  { immediate: true, deep: true }
-);
+  watch(
+    () => props.xData,
+    () => {
+      getOption();
+    },
+    { immediate: true, deep: true }
+  );
 
-
-function getOption() {
-  nextTick(() => {
-    const myChart = echarts.init(work.value);
-    let option = {
-      tooltip: {
-        trigger: 'axis',
-        backgroundColor: 'rgba(0, 0, 0, .6)',
-        textStyle: {
-          color: '#fff',
-          fontSize: 12,
+  function getOption() {
+    nextTick(() => {
+      const myChart = echarts.init(work.value);
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0, 0, 0, .6)',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12,
+          },
         },
-      },
-      grid: {
-        top: '15%',
-        left: '11%',
-        bottom: '10%',
-        right: '4%',
-      },
-      legend: {
-        align: 'left',
-        top: '0%',
-        type: 'plain',
-        textStyle: {
-          color: '#7ec7ff',
-          fontSize: 14,
+        grid: {
+          top: '15%',
+          left: '11%',
+          bottom: '10%',
+          right: '4%',
         },
-        itemGap: 25,
-        itemWidth: 18,
-        icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
-      },
-      xAxis: [
-        {
-          type: 'category',
-          axisLabel: {
-            textStyle: {
-              color: '#b3b8cc',
-            },
-          },
-          // axisLine: {
-          //   lineStyle: {
-          //     color: '#244a94',
-          //   },
-          // },
-          splitLine: {
-            show: false,
-          },
-          axisTick: {
-            show: false,
+        legend: {
+          align: 'left',
+          top: '0%',
+          type: 'plain',
+          textStyle: {
+            color: '#7ec7ff',
+            fontSize: 14,
           },
-          data: props.xData,
+          itemGap: 25,
+          itemWidth: 18,
+          icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
         },
-      ],
-      yAxis: [
-        {
-          // boundaryGap: false,
-          axisLabel: {
-            textStyle: {
-              color: '#b3b8cc',
+        xAxis: [
+          {
+            type: 'category',
+            axisLabel: {
+              textStyle: {
+                color: '#b3b8cc',
+              },
             },
-          },
-          name: props.yUnit,
-          min: props.y3Data[0]!=undefined? Math.ceil(Math.min(...props.y3Data)* 0.7) : 0,
-          // nameTextStyle: {
-          //   color: '#fff',
-          //   fontSize: 12,
-          //   lineHeight: 10,
-          // },
-          splitLine: {
-            lineStyle: {
-              color: '#0d2973',
+            // axisLine: {
+            //   lineStyle: {
+            //     color: '#244a94',
+            //   },
+            // },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
             },
+            data: props.xData,
           },
-          axisTick: {
-            show: false,
+        ],
+        yAxis: [
+          {
+            // boundaryGap: false,
+            axisLabel: {
+              textStyle: {
+                color: '#b3b8cc',
+              },
+            },
+            name: props.yUnit,
+            min: props.y3Data[0] != undefined ? Math.ceil(Math.min(...props.y3Data) * 0.7) : 0,
+            // nameTextStyle: {
+            //   color: '#fff',
+            //   fontSize: 12,
+            //   lineHeight: 10,
+            // },
+            splitLine: {
+              lineStyle: {
+                color: '#0d2973',
+              },
+            },
+            axisTick: {
+              show: false,
+            },
           },
-        },
-      ],
-      series: [
-        {
-          name: props.legendName + '实时值',
-          type: 'line',
-          smooth: true,
-          yAxisIndex: 0,
-          symbol: 'none',
-          lineStyle: {
-            normal: {
-              width: 2,
+        ],
+        series: [
+          {
+            name: props.legendName + '实时值',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 0,
+            symbol: 'none',
+            lineStyle: {
+              normal: {
+                width: 2,
+              },
             },
+            data: props.y4Data,
           },
-          data: props.y4Data,
-        },
-        {
-          name: props.legendName + '预测值',
-          type: 'line',
-          smooth: true,
-          yAxisIndex: 0,
-          symbol: 'none',
-          lineStyle: {
-            normal: {
-              width: 2,
+          {
+            name: props.legendName + '预测值',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 0,
+            symbol: 'none',
+            lineStyle: {
+              normal: {
+                width: 2,
+              },
             },
+            data: props.y1Data,
           },
-          data: props.y1Data,
-        },
-        {
-          name: props.legendName + '最大值',
-          type: 'line',
-          smooth: true,
-          symbol: 'none',
-          yAxisIndex: 0,
-          lineStyle: {
-            normal: {
-              width: 2,
+          {
+            name: props.legendName + '最大值',
+            type: 'line',
+            smooth: true,
+            symbol: 'none',
+            yAxisIndex: 0,
+            lineStyle: {
+              normal: {
+                width: 2,
+              },
             },
+            data: props.y2Data,
           },
-          data: props.y2Data,
-        },
-        {
-          name: props.legendName + '最小值',
-          type: 'line',
-          smooth: true,
-          yAxisIndex: 0,
-          symbol: 'none',
-          lineStyle: {
-            normal: {
-              width: 2,
+          {
+            name: props.legendName + '最小值',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 0,
+            symbol: 'none',
+            lineStyle: {
+              normal: {
+                width: 2,
+              },
             },
+            data: props.y3Data,
           },
-          data: props.y3Data,
-        },
-      ],
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
 </script>
 
 <style scoped lang="less">
-.work-box {
-  width: 100%;
-  height: 100%;
-}
+  .work-box {
+    width: 100%;
+    height: 100%;
+  }
 </style>

src/views/vent/monitorManager/alarmMonitor/common/fireWork.vue

@@ -16,106 +16,99 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, watch, defineProps } from 'vue';
-import internalFireTop from './internal-fire-top.vue'
-import internalFireCenter from './internal-fire-center.vue';
-import internalFireBot from './internal-fire-bot.vue';
-// import BaseTab from '../../../gas/components/tab/baseTab.vue';
-
-let props = defineProps({
-  listData: Object,
-});
-let internalFireTopData = ref<any[]>([])
-let internalFireCenterData = ref<any[]>([])
-let internalFireBotData = ref<any[]>([])
-
-watch(
-  () => props.listData,
-  (val: any, val1) => {
-    if (JSON.stringify(val) === '{}') return;
-    internalFireTopData.value = val.fiber
-    internalFireCenterData.value = val.fiber
-    internalFireBotData.value = val.bundletube
-  },
-  { deep: true }
-);
+  import { ref, reactive, watch } from 'vue';
+  import internalFireTop from './internal-fire-top.vue';
+  import internalFireCenter from './internal-fire-center.vue';
+  import internalFireBot from './internal-fire-bot.vue';
+  // import BaseTab from '../../../gas/components/tab/baseTab.vue';
+
+  let props = defineProps({
+    listData: Object,
+  });
+  let internalFireTopData = ref<any[]>([]);
+  let internalFireCenterData = ref<any[]>([]);
+  let internalFireBotData = ref<any[]>([]);
+
+  watch(
+    () => props.listData,
+    (val: any, val1) => {
+      if (JSON.stringify(val) === '{}') return;
+      internalFireTopData.value = val.fiber;
+      internalFireCenterData.value = val.fiber;
+      internalFireBotData.value = val.bundletube;
+    },
+    { deep: true }
+  );
 </script>
 
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@{theme-deepblue} {
-  .fireWork {
-    --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
-    --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
-    --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
-    --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
-    --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
-    --image-14174: url('/@/assets/images/themify/deepblue/fire/14174.png');
-    --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
-  }
-}
-
-.fireWork {
-  --image-bj1: url('/@/assets/images/fire/bj1.png');
-  --image-max: url('/@/assets/images/fire/max.svg');
-  --image-min: url('/@/assets/images/fire/min.svg');
-  --image-pj: url('/@/assets/images/fire/pj.svg');
-  --image-bj1: url('/@/assets/images/fire/bj1.png');
-  --image-14174: url('/@/assets/images/fire/14174.png');
-  --image-contetn: url('/@/assets/images/fire/contetn.png');
-  --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  box-sizing: border-box;
-
-  .work-nav {
-    height: 15%;
-    width: 100%;
-    margin-bottom: 20px;
-    background: var(--image-bj1) no-repeat center;
-    background-size: 100% 100%;
-
-
-
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .fireWork {
+      --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+      --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
+      --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
+      --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
+      --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+      --image-14174: url('/@/assets/images/themify/deepblue/fire/14174.png');
+      --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
+    }
   }
 
-  .center-echart {
+  .fireWork {
+    --image-bj1: url('/@/assets/images/fire/bj1.png');
+    --image-max: url('/@/assets/images/fire/max.svg');
+    --image-min: url('/@/assets/images/fire/min.svg');
+    --image-pj: url('/@/assets/images/fire/pj.svg');
+    --image-bj1: url('/@/assets/images/fire/bj1.png');
+    --image-14174: url('/@/assets/images/fire/14174.png');
+    --image-contetn: url('/@/assets/images/fire/contetn.png');
+    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
     width: 100%;
-    height: 32%;
-    padding: 10px;
-    margin-bottom: 20px;
+    height: 100%;
+    padding: 20px;
     box-sizing: border-box;
-    background: var(--image-bj1) no-repeat center;
-    background-size: 100% 100%;
-
 
+    .work-nav {
+      height: 15%;
+      width: 100%;
+      margin-bottom: 20px;
+      background: var(--image-bj1) no-repeat center;
+      background-size: 100% 100%;
+    }
+
+    .center-echart {
+      width: 100%;
+      height: 32%;
+      padding: 10px;
+      margin-bottom: 20px;
+      box-sizing: border-box;
+      background: var(--image-bj1) no-repeat center;
+      background-size: 100% 100%;
+    }
+
+    .bot-content {
+      position: relative;
+      width: 100%;
+      height: calc(53% - 40px);
+      padding: 10px 10px 0px 10px;
+      box-sizing: border-box;
+      background: var(--image-bj1) no-repeat center;
+      background-size: 100% 100%;
+    }
   }
 
-  .bot-content {
-    position: relative;
-    width: 100%;
-    height: calc(53% - 40px);
-    padding: 10px 10px 0px 10px;
-    box-sizing: border-box;
-    background: var(--image-bj1) no-repeat center;
-    background-size: 100% 100%;
-
-
+  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+    border: 1px solid #3ad8ff77 !important;
+    background-color: #ffffff00 !important;
   }
-}
-
-:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-  border: 1px solid #3ad8ff77 !important;
-  background-color: #ffffff00 !important;
-}
 
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
 
-:deep(.zxm-select-arrow) {
-  color: #fff;
-}
+  :deep(.zxm-select-arrow) {
+    color: #fff;
+  }
 </style>

src/views/vent/monitorManager/alarmMonitor/common/mainWell.vue

@@ -6,8 +6,12 @@
     </div>
     <!-- 束管监测 -->
     <div class="work-nav" v-if="bundletubeData.bundletube.length != 0 && strType != 'sys_coalseam'">
-      <externalSgjc :externalTSgData="externalTSgData" :temperatureData="temperatureData" @changeSelect="changeSelect"
-        @changeWarnLevel="changeWarnLevel"></externalSgjc>
+      <externalSgjc
+        :externalTSgData="externalTSgData"
+        :temperatureData="temperatureData"
+        @changeSelect="changeSelect"
+        @changeWarnLevel="changeWarnLevel"
+      ></externalSgjc>
     </div>
 
     <div class="center-box" v-if="strType != 'sys_coalseam'">
@@ -16,13 +20,11 @@
     <div :class="bundletubeData.fiber.length != 0 ? 'center-box1' : 'center-box2'" v-if="strType == 'sys_coalseam'">
       <externalFourC :cgqData="bundletubeData"></externalFourC>
     </div>
-    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'"
-      v-if="bundletubeData.bundletube.length == 0 && strType != 'sys_coalseam'">
+    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="bundletubeData.bundletube.length == 0 && strType != 'sys_coalseam'">
       <externalGxEchart :echartData="externalTData"></externalGxEchart>
     </div>
 
-    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'"
-      v-if="strType == 'sys_coalseam' && bundletubeData.fiber.length != 0">
+    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="strType == 'sys_coalseam' && bundletubeData.fiber.length != 0">
       <externalGxEchart :echartData="externalTData"></externalGxEchart>
     </div>
 
@@ -34,144 +36,141 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, reactive, watch, defineProps, h } from 'vue';
-import externalGxcw from './external-gqcw.vue'
-import externalSgjc from './external-sgjc.vue'
-import externalThreeC from './external-threec.vue'
-import externalFourC from './external-fourc.vue'
-import externalGxEchart from './external-gx-echart.vue'
-import externalMb from './external-mb.vue'
-
-
-let props = defineProps({
-  listData: Object,
-  strType: String,
-});
-let bundletubeData = reactive({})
-let externalTData = ref<any[]>([])//top-光钎
-let externalTSgData = ref<any[]>([])//top-束管
-let temperatureData = ref('')//top-束管-温度
-let selectData = ref('');
-let warnLevel=ref('')
-
-function changeSelect(data) {
-  selectData.value = data
-}
-function changeWarnLevel(data) {
-  warnLevel.value = data
-}
-
-
-
-watch(
-  () => props.listData,
-  (val) => {
-    console.log(val, 'val---------------');
-    if (JSON.stringify(val) === '{}') return;
-    // props.listData = val;
-    bundletubeData = Object.assign({}, val)
-    externalTData.value = val.fiber
-    externalTSgData.value = val.bundletube
-    temperatureData.value = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
-  },
-  { immediate: true, deep: true }
-);
-</script>
-
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@{theme-deepblue} {
-  .mainWell {
-    --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
-    --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
-    --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
-    --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
-    --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
-    --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
-    --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
+  import { ref, computed, reactive, watch, h } from 'vue';
+  import externalGxcw from './external-gqcw.vue';
+  import externalSgjc from './external-sgjc.vue';
+  import externalThreeC from './external-threec.vue';
+  import externalFourC from './external-fourc.vue';
+  import externalGxEchart from './external-gx-echart.vue';
+  import externalMb from './external-mb.vue';
+
+  let props = defineProps({
+    listData: Object,
+    strType: String,
+  });
+  let bundletubeData = reactive({});
+  let externalTData = ref<any[]>([]); //top-光钎
+  let externalTSgData = ref<any[]>([]); //top-束管
+  let temperatureData = ref(''); //top-束管-温度
+  let selectData = ref('');
+  let warnLevel = ref('');
+
+  function changeSelect(data) {
+    selectData.value = data;
   }
-}
-
-.mainWell {
-  --image-zwnr: url('/@/assets/images/fire/wy-zwnr.png');
-  --image-z: url('/@/assets/images/fire/wy-z.png');
-  --image-zt: url('/@/assets/images/fire/wy-zt.png');
-  --image-zt1: url('/@/assets/images/fire/wy-zt2.png');
-  --image-time: url('/@/assets/images/fire/wy-time.png');
-  --image-time1: url('/@/assets/images/fire/wy-time2.png');
-  --image-title: url('/@/assets/images/fire/wy-title.png');
-  --image-bj2: url('/@/assets/images/fire/wy-bj.png');
-  --image-max: url('/@/assets/images/fire/max.svg');
-  --image-min: url('/@/assets/images/fire/min.svg');
-  --image-pj: url('/@/assets/images/fire/pj.svg');
-  --image-1: url('/@/assets/images/fire/1.png');
-  --image-contetn: url('/@/assets/images/fire/contetn.png');
-  --image-2: url('/@/assets/images/fire/2.png');
-  --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  box-sizing: border-box;
-  overflow-y: auto;
-
-  .work-nav {
-    height: 15%;
-    width: 100%;
-    margin-bottom: 20px;
-    background: var(--image-bj1) no-repeat center;
-    background-size: 100% 100%;
+  function changeWarnLevel(data) {
+    warnLevel.value = data;
   }
 
-  .center-box {
-    height: 47%;
-    margin-bottom: 20px;
-  }
+  watch(
+    () => props.listData,
+    (val) => {
+      console.log(val, 'val---------------');
+      if (JSON.stringify(val) === '{}') return;
+      // props.listData = val;
+      bundletubeData = Object.assign({}, val);
+      externalTData.value = val.fiber;
+      externalTSgData.value = val.bundletube;
+      temperatureData.value = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
+    },
+    { immediate: true, deep: true }
+  );
+</script>
 
-  .center-box1 {
-    height: 70%;
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .mainWell {
+      --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+      --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
+      --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
+      --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
+      --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
+      --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
+      --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
+    }
   }
 
-  .center-box2 {
+  .mainWell {
+    --image-zwnr: url('/@/assets/images/fire/wy-zwnr.png');
+    --image-z: url('/@/assets/images/fire/wy-z.png');
+    --image-zt: url('/@/assets/images/fire/wy-zt.png');
+    --image-zt1: url('/@/assets/images/fire/wy-zt2.png');
+    --image-time: url('/@/assets/images/fire/wy-time.png');
+    --image-time1: url('/@/assets/images/fire/wy-time2.png');
+    --image-title: url('/@/assets/images/fire/wy-title.png');
+    --image-bj2: url('/@/assets/images/fire/wy-bj.png');
+    --image-max: url('/@/assets/images/fire/max.svg');
+    --image-min: url('/@/assets/images/fire/min.svg');
+    --image-pj: url('/@/assets/images/fire/pj.svg');
+    --image-1: url('/@/assets/images/fire/1.png');
+    --image-contetn: url('/@/assets/images/fire/contetn.png');
+    --image-2: url('/@/assets/images/fire/2.png');
+    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
+    width: 100%;
     height: 100%;
-  }
-
-  .footer-box {
-    height: calc(38% - 40px);
-    padding: 10px;
-    background: var(--image-bj1) no-repeat center;
-    background-size: 100% 100%;
+    padding: 20px;
     box-sizing: border-box;
+    overflow-y: auto;
+
+    .work-nav {
+      height: 15%;
+      width: 100%;
+      margin-bottom: 20px;
+      background: var(--image-bj1) no-repeat center;
+      background-size: 100% 100%;
+    }
+
+    .center-box {
+      height: 47%;
+      margin-bottom: 20px;
+    }
+
+    .center-box1 {
+      height: 70%;
+    }
+
+    .center-box2 {
+      height: 100%;
+    }
+
+    .footer-box {
+      height: calc(38% - 40px);
+      padding: 10px;
+      background: var(--image-bj1) no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+    }
+
+    .footer-box1 {
+      height: calc(30% - 20px);
+      padding: 10px 15px;
+      background: var(--image-bj1) no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+    }
+
+    .content-s {
+      width: 100%;
+      height: 608px;
+      padding: 10px;
+      background: var(--image-bj1) no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+    }
   }
 
-  .footer-box1 {
-    height: calc(30% - 20px);
-    padding: 10px 15px;
-    background: var(--image-bj1) no-repeat center;
-    background-size: 100% 100%;
-    box-sizing: border-box;
+  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+    border: 1px solid #3ad8ff77 !important;
+    background-color: #ffffff00 !important;
   }
 
-  .content-s {
-    width: 100%;
-    height: 608px;
-    padding: 10px;
-    background: var(--image-bj1) no-repeat center;
-    background-size: 100% 100%;
-    box-sizing: border-box;
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
   }
-}
-
-:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-  border: 1px solid #3ad8ff77 !important;
-  background-color: #ffffff00 !important;
-}
 
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
-
-:deep(.zxm-select-arrow) {
-  color: #fff;
-}
+  :deep(.zxm-select-arrow) {
+    color: #fff;
+  }
 </style>

src/views/vent/monitorManager/alarmMonitor/common/warnGradeEchart.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { defineProps, ref, nextTick, reactive, watch } from 'vue';
+  import { ref, nextTick, reactive, watch } from 'vue';
   import * as echarts from 'echarts';
   // import { position } from 'html2canvas/dist/types/css/property-descriptors/position';
 

src/views/vent/monitorManager/balancePressMonitor/components/balancePressHome.vue

@@ -139,7 +139,7 @@
   </a-spin>
 </template>
 <script setup lang="ts" name="balancePressHome">
-  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, watch, computed } from 'vue';
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, watch, computed } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
   import { PressO2Option, mockData1 } from '../balancePressO2.data';

src/views/vent/monitorManager/balancePressMonitor/components/balancePressHome1.vue

@@ -141,7 +141,7 @@
   </a-spin>
 </template>
 <script setup lang="ts" name="balancePressHome1">
-  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, watch } from 'vue';
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, watch } from 'vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import { SvgIcon } from '/@/components/Icon';
   import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';

src/views/vent/monitorManager/balancePressMonitor/components/balancePressHome2.vue

@@ -15,7 +15,7 @@
   ></a-spin>
 </template>
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted, defineProps } from 'vue';
+  import { ref, onMounted, onUnmounted } from 'vue';
   import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
   import { list, getO2PressData } from '../balancePress.api';
   import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';

src/views/vent/monitorManager/balancePressMonitor/components/balancePressHomeBD.vue

@@ -114,7 +114,7 @@
   </a-spin>
 </template>
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted, defineProps, h } from 'vue';
+  import { ref, onMounted, onUnmounted, h } from 'vue';
   import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
   import { list } from '../balancePress.api';
   import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';

src/views/vent/monitorManager/balancePressMonitor/components/balancePressHomeSP.vue

@@ -87,7 +87,7 @@
   </a-spin>
 </template>
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted, defineProps, h } from 'vue';
+  import { ref, onMounted, onUnmounted, h } from 'vue';
   import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
   import { list } from '../balancePress.api';
   import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';

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

@@ -119,7 +119,7 @@
   import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
   import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
   import { mountedThree, setModelType, destroy, addCssText, addText, playSmoke } from './balancePress.three';
-  import lodash from 'lodash';
+  import { cloneDeep } from 'lodash-es';
   import { getTableList, list } from '/@/views/vent/monitorManager/fanLocalMonitor/fanLocal.api';
   import { list as baseList } from '../../deviceManager/fanTabel/fan.api';
   import { chartsColumns, chartsColumns1 } from './balancePress.data';
@@ -154,7 +154,7 @@
     return '';
   };
   // 监测数据
-  const selectData = reactive(lodash.cloneDeep(initData));
+  const selectData = reactive(cloneDeep(initData));
 
   const tabChange = (activeKeyVal) => {
     activeKey.value = activeKeyVal;

src/views/vent/monitorManager/beltTunMonitor/components/beltTunDustHome.vue

@@ -83,7 +83,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive } from 'vue';
   import { list } from '../beltTun.api';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import { SvgIcon } from '/@/components/Icon';

src/views/vent/monitorManager/beltTunMonitor/components/beltTunFireHome.vue

@@ -3,7 +3,7 @@
     <div class="monitor-container">
       <div class="lr left-box vent-margin-t-10">
         <div class="monitor-info item-box">
-          <div class="fire-analysis1 ">
+          <div class="fire-analysis1">
             <div class="analysis-item warning3">
               <div class="title">火灾风险预警</div>
               <div class="value">高风险</div>
@@ -16,46 +16,45 @@
             <template #container>
               <div class="temperature-box">
                 <div class="temperature-group">
-                    <div class="light-group">
-                      <div class="light-bg"></div>
-                      <div class="light-item">
-                        <SvgIcon class="icon" size="25" name="aveg-temperature" />
-                        <div class="light">
-                          <div class="light-icon"></div>
-                          <div class="light-title">平均温度</div>
-                          <div class="light-val-box">
-                            <div class="light-val-icon"></div>
-                            <div class="light-val">56.99</div>
-                          </div>
+                  <div class="light-group">
+                    <div class="light-bg"></div>
+                    <div class="light-item">
+                      <SvgIcon class="icon" size="25" name="aveg-temperature" />
+                      <div class="light">
+                        <div class="light-icon"></div>
+                        <div class="light-title">平均温度</div>
+                        <div class="light-val-box">
+                          <div class="light-val-icon"></div>
+                          <div class="light-val">56.99</div>
                         </div>
                       </div>
-                      <div class="light-item">
-                        <SvgIcon class="icon" size="25" name="max-temperature" />
-                        <div class="light">
-                          <div class="light-icon"></div>
-                          <div class="light-title">最高温度</div>
-                          <div class="light-val-box">
-                            <div class="light-val-icon"></div>
-                            <div class="light-val">56.99</div>
-                          </div>
+                    </div>
+                    <div class="light-item">
+                      <SvgIcon class="icon" size="25" name="max-temperature" />
+                      <div class="light">
+                        <div class="light-icon"></div>
+                        <div class="light-title">最高温度</div>
+                        <div class="light-val-box">
+                          <div class="light-val-icon"></div>
+                          <div class="light-val">56.99</div>
                         </div>
                       </div>
-                      <div class="light-item">
-                        <SvgIcon class="icon" size="25" name="min-temperature" />
-                        <div class="light">
-                          <div class="light-icon"></div>
-                          <div class="light-title">最低温度</div>
-                          <div class="light-val-box">
-                            <div class="light-val-icon"></div>
-                            <div class="light-val">56.99</div>
-                          </div>
+                    </div>
+                    <div class="light-item">
+                      <SvgIcon class="icon" size="25" name="min-temperature" />
+                      <div class="light">
+                        <div class="light-icon"></div>
+                        <div class="light-title">最低温度</div>
+                        <div class="light-val-box">
+                          <div class="light-val-icon"></div>
+                          <div class="light-val">56.99</div>
                         </div>
                       </div>
                     </div>
-              
+                  </div>
                 </div>
                 <div class="vent-flex-row vent-margin-t-10 vent-margin-l-5">
-                  <div class="vent-flex-row ">
+                  <div class="vent-flex-row">
                     <SvgIcon class="icon vent-margin-r-5" size="13" name="alarm-fire" />
                     <span>是否报警：</span>
                   </div>
@@ -75,7 +74,7 @@
               <div>CO传感器监测与分析<a class="a-detail">(详情)</a></div>
             </template>
             <template #container>
-              <div class="CO-box ">
+              <div class="CO-box">
                 <div class="co-param">
                   <div class="light-group">
                     <div class="param-item">
@@ -118,7 +117,7 @@
                   </div>
                 </div>
                 <div class="vent-flex-row vent-margin-l-5">
-                  <div class="vent-flex-row ">
+                  <div class="vent-flex-row">
                     <SvgIcon class="icon vent-margin-r-5" size="13" name="alarm-CO" />
                     <span>是否报警：</span>
                   </div>
@@ -162,7 +161,7 @@
           <template #container>
             <div class="">
               <div class="vent-flex-row vent-margin-l-5">
-                <div class="vent-flex-row ">
+                <div class="vent-flex-row">
                   <SvgIcon class="icon vent-margin-r-5" size="13" name="alarm-temperature" />
                   <span>是否报警：</span>
                 </div>
@@ -182,12 +181,18 @@
             <div>喷淋/喷雾远程监测与控制</div>
           </template>
           <template #container>
-            <a-table :columns="sprayColumns" :data-source="sprayDataSource" :pagination="false" size="small"
-              maxWidth="340" :scroll="{ x: 'max-content', y: 180 }">
+            <a-table
+              :columns="sprayColumns"
+              :data-source="sprayDataSource"
+              :pagination="false"
+              size="small"
+              maxWidth="340"
+              :scroll="{ x: 'max-content', y: 180 }"
+            >
               <template #bodyCell="{ column, record }">
                 <template v-if="column.dataIndex === 'warnFlag'">
-                  <span v-if="record['warnFlag'] == 0" style="color: #00ff00;">正常</span>
-                  <span v-else style="color: #ff0000;"> {{ record.warnDes }}</span>
+                  <span v-if="record['warnFlag'] == 0" style="color: #00ff00">正常</span>
+                  <span v-else style="color: #ff0000"> {{ record.warnDes }}</span>
                 </template>
                 <template v-if="column.dataIndex === 'action'">
                   <a class="action-link" @click="toDetail">启停</a>
@@ -202,106 +207,101 @@
 </template>
 
 <script setup lang="ts">
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive } from 'vue';
+  import { list } from '../beltTun.api';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { sprayColumns } from '../beltTun.data';
+  import { SvgIcon } from '/@/components/Icon';
 
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
-import { list } from '../beltTun.api';
-import ventBox1 from '/@/components/vent/ventBox1.vue'
-import { sprayColumns } from '../beltTun.data'
-import { SvgIcon } from '/@/components/Icon';
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+  });
 
-const props = defineProps({
-  deviceId: {
-    type: String,
-    require: true
-  }
-})
+  const loading = ref(false);
 
-const loading = ref(false)
+  // 默认初始是第一行
+  const beltTunSource = ref({});
+  const beltTunHistorySource = ref([]);
+  const sprayDataSource = ref([]);
+  const pulpingDataSource = ref([]);
 
-// 默认初始是第一行
-const beltTunSource = ref({});
-const beltTunHistorySource = ref([])
-const sprayDataSource = ref([]);
-const pulpingDataSource = ref([]);
+  // 监测数据
+  const selectData = reactive({});
 
-// 监测数据
-const selectData = reactive({});
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (props.deviceId) {
+            const data = await getDataSource(props.deviceId);
+            Object.assign(selectData, data);
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
+    }
+  }
 
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag?) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(async () => {
-      if (props.deviceId) {
-        const data = await getDataSource(props.deviceId)
-        Object.assign(selectData, data);
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: 'sys', systemID, type: 'fireS' });
+    const result = res.deviceInfo;
+    for (const key in result) {
+      const item = result[key];
+      if (item.type.startsWith('spray_auto')) {
+        // 喷淋
+        sprayDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
       }
-      if (timer) {
-        timer = null;
+      if (item.type === 'pulping_auto') {
+        // 注浆
+        pulpingDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
       }
-      await getMonitor();
-      loading.value = false
-    }, flag ? 0 : 1000);
-  }
-};
-
-async function getDataSource(systemID) {
-  const res = await list({ devicetype: 'sys', systemID, type: 'fireS' });
-  const result = res.deviceInfo;
-  for (const key in result) {
-    const item = result[key]
-    if (item.type.startsWith('spray_auto')) {
-      // 喷淋
-      sprayDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-    if (item.type === 'pulping_auto') {
-      // 注浆
-      pulpingDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData'])
     }
+    loading.value = false;
+    beltTunHistorySource.value = res['sysInfo']['history'];
+    beltTunSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
   }
-  loading.value = false;
-  beltTunHistorySource.value = res['sysInfo']['history']
-  beltTunSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
-}
-
-function toDetail() {
-
-}
 
-function changeType(e: Event, item) {
-  item.value = e.target?.value
-}
+  function toDetail() {}
 
-function handlerDevice(param: string | Object) {
-
-}
-// 喷粉操作
-function handleSpray() {
-  //
-}
+  function changeType(e: Event, item) {
+    item.value = e.target?.value;
+  }
 
-onBeforeMount(() => {
+  function handlerDevice(param: string | Object) {}
+  // 喷粉操作
+  function handleSpray() {
+    //
+  }
 
-});
+  onBeforeMount(() => {});
 
-onMounted(async () => {
-  loading.value = true;
-  timer = null
-  await getMonitor(true)
-});
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-});
+  onMounted(async () => {
+    loading.value = true;
+    timer = null;
+    await getMonitor(true);
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
 </script>
 <style lang="less" scoped>
-@ventSpace: zxm;
-@import '/@/design/vent/modal.less';
-@import '../../comment/less/workFace.less';
-
+  @ventSpace: zxm;
+  @import '/@/design/vent/modal.less';
+  @import '../../comment/less/workFace.less';
 </style>

src/views/vent/monitorManager/beltTunMonitor/components/beltTunGasHome.vue

@@ -121,7 +121,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive } from 'vue';
   import { ArrowRightOutlined } from '@ant-design/icons-vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import { SvgIcon } from '/@/components/Icon';

src/views/vent/monitorManager/beltTunMonitor/components/beltTunHistory.vue

@@ -10,7 +10,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { ref, defineProps } from 'vue';
+  import { ref } from 'vue';
   import HistoryTable from '../../comment/HistoryTable.vue';
   import { getTableList } from '../beltTun.api';
 

src/views/vent/monitorManager/beltTunMonitor/components/beltTunHome.vue

@@ -42,7 +42,7 @@
             </div> -->
           </template>
         </ventBox1>
-        <ventBox1 class="vent-margin-t-10"> 
+        <ventBox1 class="vent-margin-t-10">
           <template #title>
             <div>预警报警实时监测</div>
           </template>
@@ -50,31 +50,23 @@
             <div class="warning-monitor">
               <div class="warning-item">
                 <div class="title" :class="{ 'active-title': warningType == 'ventS' }" @click="showWarningList('ventS')">通风</div>
-                <div class="state-box">
-                  <span class="signal-round signal-round-blue"></span><span class="state vent-margin-l-8">正常</span>
-                </div>
+                <div class="state-box"> <span class="signal-round signal-round-blue"></span><span class="state vent-margin-l-8">正常</span> </div>
               </div>
               <div class="warning-item">
                 <div class="title" :class="{ 'active-title': warningType == 'fireS' }" @click="showWarningList('fireS')">火灾</div>
-                <div class="state-box">
-                  <span class="signal-round signal-round-blue"></span><span class="state vent-margin-l-8">正常</span>
-                </div>
+                <div class="state-box"> <span class="signal-round signal-round-blue"></span><span class="state vent-margin-l-8">正常</span> </div>
               </div>
               <div class="warning-item">
                 <div class="title" :class="{ 'active-title': warningType == 'dustS' }" @click="showWarningList('dustS')">粉尘</div>
-                <div class="state-box">
-                  <span class="signal-round signal-round-blue"></span><span class="state vent-margin-l-8">正常</span>
-                </div>
+                <div class="state-box"> <span class="signal-round signal-round-blue"></span><span class="state vent-margin-l-8">正常</span> </div>
               </div>
               <div class="warning-item">
                 <div class="title" :class="{ 'active-title': warningType == 'gasS' }" @click="showWarningList('gasS')">瓦斯</div>
-                <div class="state-box">
-                  <span class="signal-round signal-round-blue"></span><span class="state vent-margin-l-8">正常</span>
-                </div>
+                <div class="state-box"> <span class="signal-round signal-round-blue"></span><span class="state vent-margin-l-8">正常</span> </div>
               </div>
             </div>
-            <div style="height: 180px; overflow-y: auto; position: relative; top: -10px;">
-              <dv-scroll-board ref="scrollBoard" :config="warningConfig" style="width: 100%; height: 220px; overflow-y: auto; " />
+            <div style="height: 180px; overflow-y: auto; position: relative; top: -10px">
+              <dv-scroll-board ref="scrollBoard" :config="warningConfig" style="width: 100%; height: 220px; overflow-y: auto" />
             </div>
           </template>
         </ventBox1>
@@ -89,14 +81,13 @@
               <div class="input-box">
                 <div class="input-item vent-flex-row">
                   <div>决策模式：</div>
-                  <a-radio-group v-model:value="controlMode" name="radioGroup"
-                    @change="changeType(controlMode)">
+                  <a-radio-group v-model:value="controlMode" name="radioGroup" @change="changeType(controlMode)">
                     <a-radio value="1">人工决策</a-radio>
                     <a-radio value="2">智能决策</a-radio>
                   </a-radio-group>
                 </div>
                 <div v-for="(item, index) in disasterParam" class="input-item vent-flex-row control" :key="index">
-                  <div class="title" style="width: 200px;">{{ item.title }}：</div>
+                  <div class="title" style="width: 200px">{{ item.title }}：</div>
                   <template v-if="item.type == 'input'">
                     <a-input-number class="input-value" v-model="item.value" placeholder="" />
                   </template>
@@ -121,16 +112,22 @@
               <div>风门监测与控制</div>
             </template>
             <template #container>
-              <a-table :columns="gateColumns" :data-source="gateDataSource" :pagination="false" size="small"
-                maxWidth="340" :scroll="{ x: 'max-content', y: 140 }">
+              <a-table
+                :columns="gateColumns"
+                :data-source="gateDataSource"
+                :pagination="false"
+                size="small"
+                maxWidth="340"
+                :scroll="{ x: 'max-content', y: 140 }"
+              >
                 <template #bodyCell="{ column, record }">
                   <template v-if="column.dataIndex === 'frontGateOpen'">
-                    <span v-if="record['frontGateOpen'] == 0" >关闭</span>
-                    <span v-else style="color: #00ff00;"> 打开 </span>
+                    <span v-if="record['frontGateOpen'] == 0">关闭</span>
+                    <span v-else style="color: #00ff00"> 打开 </span>
                   </template>
                   <template v-if="column.dataIndex === 'rearGateOpen'">
-                    <span v-if="record['rearGateOpen'] == 0" >关闭</span>
-                    <span v-else style="color: #00ff00;"> 打开 </span>
+                    <span v-if="record['rearGateOpen'] == 0">关闭</span>
+                    <span v-else style="color: #00ff00"> 打开 </span>
                   </template>
                   <template v-if="column.dataIndex === 'action'">
                     <a class="action-link" @click="toDetail">开启</a>
@@ -146,16 +143,21 @@
               <div>风窗监测与控制</div>
             </template>
             <template #container>
-              <a-table :columns="windowColumns" :data-source="windowDataSource" :pagination="false" size="small"
-                maxWidth="340" :scroll="{ x: 'max-content', y: 140 }">
+              <a-table
+                :columns="windowColumns"
+                :data-source="windowDataSource"
+                :pagination="false"
+                size="small"
+                maxWidth="340"
+                :scroll="{ x: 'max-content', y: 140 }"
+              >
                 <template #bodyCell="{ column }">
                   <template v-if="column.dataIndex === 'action'">
                     <a class="action-link" @click="toDetail">开启</a>
-                    <a-divider type="vertical" style="background-color: #c2c2c288"/>
+                    <a-divider type="vertical" style="background-color: #c2c2c288" />
                     <a class="action-link" @click="toDetail">恢复</a>
                   </template>
                 </template>
-
               </a-table>
             </template>
           </ventBox1>
@@ -166,148 +168,143 @@
 </template>
 
 <script setup lang="ts">
-
-import { onBeforeMount, nextTick, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
-import { list } from '../beltTun.api';
-import ventBox1 from '/@/components/vent/ventBox1.vue'
-import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
-import { echartsOption, warningConfig, disasterParam, windowColumns, gateColumns } from '../beltTun.data'
-import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';
-
-const props = defineProps({
-  deviceId: {
-    type: String,
-    require: true
+  import { onBeforeMount, nextTick, ref, onMounted, onUnmounted, reactive } from 'vue';
+  import { list } from '../beltTun.api';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
+  import { echartsOption, warningConfig, disasterParam, windowColumns, gateColumns } from '../beltTun.data';
+  import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+  });
+
+  const loading = ref(false);
+
+  // 默认初始是第一行
+  const controlMode = ref('1');
+  const beltTunSource = ref({});
+  const beltTunHistorySource = ref([]);
+  const gateDataSource = ref([]);
+  const windowDataSource = ref([]);
+  const windDataSource = ref([]);
+  const warnInfo = reactive({
+    dustS: { warningList: [], dataList: [] },
+    fireS: { warningList: [], dataList: [] },
+    synthesizeS: { warningList: [], dataList: [] },
+    ventS: { warningList: [], dataList: [] },
+  });
+  const warningType = ref('ventS');
+  // 监测数据
+  const selectData = reactive({});
+
+  function showWarningList(type) {
+    warningType.value = '';
+    nextTick(() => {
+      warningType.value = type;
+      warningConfig.data = warnInfo[type]['dataList'];
+    });
   }
-})
 
-const loading = ref(false)
-
-// 默认初始是第一行
-const controlMode = ref('1')
-const beltTunSource = ref({});
-const beltTunHistorySource = ref([])
-const gateDataSource = ref([]);
-const windowDataSource = ref([]);
-const windDataSource = ref([]);
-const warnInfo = reactive({
-  dustS: { warningList: [], dataList: [] },
-  fireS: { warningList: [], dataList: [] },
-  synthesizeS: { warningList: [], dataList: [] },
-  ventS: { warningList: [], dataList: [] },
-})
-const warningType = ref('ventS')
-// 监测数据
-const selectData = reactive({});
-
-function showWarningList(type) {
-  warningType.value = ''
-  nextTick(() => {
-    warningType.value = type
-    warningConfig.data = warnInfo[type]['dataList']
-  })
-}
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (props.deviceId) {
+            const data = await getDataSource(props.deviceId);
+            Object.assign(selectData, data);
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
+    }
+  }
 
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag?) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(async () => {
-      if (props.deviceId) {
-        const data = await getDataSource(props.deviceId)
-        Object.assign(selectData, data);
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: 'sys', systemID, type: 'all' });
+    const result = res.deviceInfo;
+    for (const key in result) {
+      const item = result[key];
+      // ''.startsWith
+      if (item.type.startsWith('gate')) {
+        // 风门
+        gateDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
+      } else if (item.type.startsWith('window')) {
+        // 风窗
+        windowDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
+      } else if (item.type.startsWith('windrect')) {
+        // 测风
+        windDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
       }
-      if (timer) {
-        timer = null;
-      }
-      await getMonitor();
-      loading.value = false
-    }, flag ? 0 : 1000);
+    }
+    loading.value = false;
+    beltTunHistorySource.value = res['sysInfo']['history'];
+    beltTunSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
+    warnInfo.dustS = { warningList: res['warnInfo']['dustS']['devices'] || [], dataList: initWarningData(res['warnInfo']['dustS']['devices']) };
+    warnInfo.fireS = { warningList: res['warnInfo']['fireS']['devices'] || [], dataList: initWarningData(res['warnInfo']['fireS']['devices']) };
+    warnInfo.synthesizeS = {
+      warningList: res['warnInfo']['synthesizeS']['devices'] || [],
+      dataList: initWarningData(res['warnInfo']['synthesizeS']['devices']),
+    };
+    warnInfo.ventS = { warningList: res['warnInfo']['ventS']['devices'] || [], dataList: initWarningData(res['warnInfo']['ventS']['devices']) };
   }
-};
 
-async function getDataSource(systemID) {
-  const res = await list({ devicetype: 'sys', systemID, type: 'all' });
-  const result = res.deviceInfo;
-  for (const key in result) {
-    const item = result[key]
-    // ''.startsWith
-    if (item.type.startsWith('gate')) {
-      // 风门
-      gateDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
+  function initWarningData(devices: any[]) {
+    const dataArr = <any[]>[];
+    for (let i = 0; i < devices.length; i++) {
+      const item = devices[i];
+      dataArr.push([item['typeName'], item['warnLevel_str'], item['warnTime']]);
     }
-    else if (item.type.startsWith('window')) {
-      // 风窗
-      windowDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-    else if (item.type.startsWith('windrect')) {
-      // 测风
-      windDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-
+    return dataArr;
   }
-  loading.value = false;
-  beltTunHistorySource.value = res['sysInfo']['history']
-  beltTunSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
-  warnInfo.dustS = { warningList: res['warnInfo']['dustS']['devices'] || [], dataList: initWarningData(res['warnInfo']['dustS']['devices']) }
-  warnInfo.fireS = { warningList: res['warnInfo']['fireS']['devices'] || [], dataList: initWarningData(res['warnInfo']['fireS']['devices']) }
-  warnInfo.synthesizeS = { warningList: res['warnInfo']['synthesizeS']['devices'] || [], dataList: initWarningData(res['warnInfo']['synthesizeS']['devices']) }
-  warnInfo.ventS = { warningList: res['warnInfo']['ventS']['devices'] || [], dataList: initWarningData(res['warnInfo']['ventS']['devices']) }
-}
 
-function initWarningData(devices: any[]) {
-  const dataArr = <any[]>[]
-  for (let i = 0; i < devices.length; i++) {
-    const item = devices[i]
-    dataArr.push([item['typeName'], item['warnLevel_str'], item['warnTime']])
+  /** 智能决策控制 */
+  function changeType(mode) {}
+
+  function handleChange(value) {
+    const disasterParamVal = disasterParam.value.filter((item) => {
+      if (item.title === '烟雾报警持续时间(s)') {
+        item.value = value;
+      }
+      return item;
+    });
+    disasterParam.value = disasterParamVal;
   }
-  return dataArr
-}
 
-/** 智能决策控制 */
-function changeType(mode) {
+  function toDetail() {}
 
-}
+  onBeforeMount(() => {});
 
-function handleChange(value) {
-  const disasterParamVal = disasterParam.value.filter(item => {
-    if (item.title === '烟雾报警持续时间(s)') {
-      item.value = value
+  onMounted(async () => {
+    loading.value = true;
+    timer = null;
+    await getMonitor(true);
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
     }
-    return item
-  })
-  disasterParam.value = disasterParamVal
-}
-
-function toDetail() {
-
-}
-
-
-onBeforeMount(() => {
-
-});
-
-onMounted(async () => {
-  loading.value = true;
-  timer = null
-  await getMonitor(true)
-});
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-});
+  });
 </script>
 
 <style lang="less">
@@ -333,15 +330,15 @@ onUnmounted(() => {
   @import '../../comment/less/workFace.less';
   @ventSpace: zxm;
 
-  .warning-monitor{
-    .warning-item{
+  .warning-monitor {
+    .warning-item {
       .state-box {
         position: relative;
         top: -5px;
       }
     }
   }
-  .light-group1{
+  .light-group1 {
     display: flex;
     justify-content: space-between;
     padding: 0 10px;
@@ -352,7 +349,7 @@ onUnmounted(() => {
       justify-content: center;
       align-items: center;
       position: reactive;
-      
+
       .icon {
         display: block;
         position: absolute;
@@ -414,7 +411,6 @@ onUnmounted(() => {
               bottom: -2px;
               left: -2px;
             }
-
           }
 
           .param-val {
@@ -423,7 +419,7 @@ onUnmounted(() => {
             // color: #20dbfd;
             text-shadow: 0 0 25px #00d8ff;
             font-size: 13px;
-            border: 1px solid #40B7F3;
+            border: 1px solid #40b7f3;
             padding: 5px 30px 2px 30px;
             top: 2px;
 
@@ -435,14 +431,11 @@ onUnmounted(() => {
               top: 2px;
               left: 2px;
               display: block;
-              border: 1px solid #006EA6;
+              border: 1px solid #006ea6;
             }
           }
         }
-
       }
     }
   }
-  
-  
 </style>

src/views/vent/monitorManager/beltTunMonitor/components/beltTunVentHome.vue

@@ -7,12 +7,18 @@
             <div>风门监测与控制</div>
           </template>
           <template #container>
-            <a-table :columns="gateColumns" :data-source="gateDataSource" :pagination="false" size="small"
-              maxWidth="340" :scroll="{ x: 'max-content', y: 140 }">
+            <a-table
+              :columns="gateColumns"
+              :data-source="gateDataSource"
+              :pagination="false"
+              size="small"
+              maxWidth="340"
+              :scroll="{ x: 'max-content', y: 140 }"
+            >
               <template #bodyCell="{ column, record }">
                 <template v-if="column.dataIndex === 'frontGateOpen'">
-                  <span v-if="record['frontGateOpen'] == 0" >关闭</span>
-                  <span v-else style="color: #00ff00;"> 打开 </span>
+                  <span v-if="record['frontGateOpen'] == 0">关闭</span>
+                  <span v-else style="color: #00ff00"> 打开 </span>
                 </template>
                 <template v-if="column.dataIndex === 'action'">
                   <a class="action-link" @click="toDetail">详情</a>
@@ -26,14 +32,19 @@
             <div>风窗监测与控制</div>
           </template>
           <template #container>
-            <a-table :columns="windowColumns" :data-source="windowDataSource" :pagination="false" size="small"
-              maxWidth="340" :scroll="{ x: 'max-content', y: 140 }">
+            <a-table
+              :columns="windowColumns"
+              :data-source="windowDataSource"
+              :pagination="false"
+              size="small"
+              maxWidth="340"
+              :scroll="{ x: 'max-content', y: 140 }"
+            >
               <template #bodyCell="{ column }">
                 <template v-if="column.dataIndex === 'action'">
                   <a class="action-link" @click="toDetail">详情</a>
                 </template>
               </template>
-
             </a-table>
           </template>
         </ventBox1>
@@ -44,12 +55,18 @@
             <div>测风监测与控制</div>
           </template>
           <template #container>
-            <a-table :columns="windColumns" :data-source="windDataSource" :pagination="false" size="small"
-              maxWidth="340" :scroll="{ x: 'max-content', y: 140 }">
+            <a-table
+              :columns="windColumns"
+              :data-source="windDataSource"
+              :pagination="false"
+              size="small"
+              maxWidth="340"
+              :scroll="{ x: 'max-content', y: 140 }"
+            >
               <template #bodyCell="{ column, record }">
                 <template v-if="column.dataIndex === 'frontGateOpen'">
-                  <span v-if="record['frontGateOpen'] == 0" >关闭</span>
-                  <span v-else style="color: #00ff00;"> 打开 </span>
+                  <span v-if="record['frontGateOpen'] == 0">关闭</span>
+                  <span v-else style="color: #00ff00"> 打开 </span>
                 </template>
                 <template v-if="column.dataIndex === 'action'">
                   <a class="action-link" @click="toDetail">详情</a>
@@ -64,111 +81,106 @@
 </template>
 
 <script setup lang="ts">
-
-import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
-import { list } from '../beltTun.api';
-import ventBox1 from '/@/components/vent/ventBox1.vue'
-import { gateColumns, windowColumns, windColumns } from '../beltTun.data'
-
-const props = defineProps({
-  deviceId: {
-    type: String,
-    require: true
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive } from 'vue';
+  import { list } from '../beltTun.api';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { gateColumns, windowColumns, windColumns } from '../beltTun.data';
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+  });
+
+  const loading = ref(false);
+
+  // 默认初始是第一行
+  const beltTunSource = ref({});
+  const beltTunHistorySource = ref([]);
+  const gateDataSource = ref([]);
+  const windowDataSource = ref([]);
+  const windDataSource = ref([]);
+
+  // 监测数据
+  const selectData = reactive({});
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (props.deviceId) {
+            const data = await getDataSource(props.deviceId);
+            Object.assign(selectData, data);
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
+    }
   }
-})
-
-const loading = ref(false)
 
-// 默认初始是第一行
-const beltTunSource = ref({});
-const beltTunHistorySource = ref([])
-const gateDataSource = ref([]);
-const windowDataSource = ref([]);
-const windDataSource = ref([]);
-
-// 监测数据
-const selectData = reactive({});
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag?) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(async () => {
-      if (props.deviceId) {
-        const data = await getDataSource(props.deviceId)
-        Object.assign(selectData, data);
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: 'sys', systemID, type: 'ventS' });
+    const result = res.deviceInfo;
+    for (const key in result) {
+      const item = result[key];
+      // ''.startsWith
+      if (item.type.startsWith('gate')) {
+        // 风门
+        gateDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
       }
-      if (timer) {
-        timer = null;
+      if (item.type.startsWith('window')) {
+        // 风窗
+        windowDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
+      }
+      if (item.type.startsWith('windrect')) {
+        // 测风
+        windDataSource.value = item['datalist'].filter((data: any) => {
+          const readData = data.readData;
+          return Object.assign(data, readData);
+        });
       }
-      await getMonitor();
-      loading.value = false
-    }, flag ? 0 : 1000);
-  }
-};
-
-async function getDataSource(systemID) {
-  const res = await list({ devicetype: 'sys', systemID, type: 'ventS' });
-  const result = res.deviceInfo;
-  for (const key in result) {
-    const item = result[key]
-    // ''.startsWith
-    if (item.type.startsWith('gate')) {
-      // 风门
-      gateDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-
-    }
-    if (item.type.startsWith('window')) {
-      // 风窗
-      windowDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
-    }
-    if (item.type.startsWith('windrect')) {
-      // 测风
-      windDataSource.value = item['datalist'].filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      })
     }
-    
+    loading.value = false;
+    beltTunHistorySource.value = res['sysInfo']['history'];
+    beltTunSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
   }
-  loading.value = false;
-  beltTunHistorySource.value = res['sysInfo']['history']
-  beltTunSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
-}
-
-function toDetail() {
-
-}
 
-onBeforeMount(() => {
+  function toDetail() {}
 
-});
+  onBeforeMount(() => {});
 
-onMounted(async () => {
-  loading.value = true;
-  timer = null
-  await getMonitor(true)
-});
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-});
+  onMounted(async () => {
+    loading.value = true;
+    timer = null;
+    await getMonitor(true);
+  });
+  onUnmounted(() => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
 </script>
 <style lang="less" scoped>
-@ventSpace: zxm;
-@import '/@/design/vent/modal.less';
-@import '../../comment/less/workFace.less';
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  overflow: auto;
-}
+  @ventSpace: zxm;
+  @import '/@/design/vent/modal.less';
+  @import '../../comment/less/workFace.less';
 
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    overflow: auto;
+  }
 </style>

src/views/vent/monitorManager/chamberMonitor/components/chamberHistory.vue

@@ -10,7 +10,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { ref, defineProps } from 'vue';
+  import { ref } from 'vue';
   import HistoryTable from '../../comment/HistoryTable.vue';
   import { getTableList } from '../chamber.api';
 

src/views/vent/monitorManager/chamberMonitor/components/chamberHome.vue

@@ -227,7 +227,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, watch } from 'vue';
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, watch } from 'vue';
   // import MonitorTable from '../comment/MonitorTable.vue';
   import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
   import ventBox1 from '/@/components/vent/ventBox1.vue';