注气优化更新-提交

src/views/sys/login/Login.vue

@@ -1,304 +1,198 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <!-- <AdaptiveContainer :options="{ width: 1920, height: 1080 }" style="overflow-y: hidden"> -->
-  <div class="login-container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%">
-    <div class="login-bg"></div>
-    <span class="-enter-x xl:hidden">
-      <AppLogo :alwaysShowTitle="true" />
-    </span>
-    <div class="top-header">
-      <div class="top-bg"></div>
-      <div class="login-icon"></div>
-      <!-- <div class="title">{{ title }}</div> -->
-      <div class="title">注气驱替监管系统</div>
+  <div class="Login">
+    <div class="login-container">
+      <div class="login-title">注气驱替智能管控系统</div>
+      <div class="login-info">
+        <a-form :model="loginForm" name="basic"   :rules="getFormRules" autocomplete="off" ref="formRef"    @keypress.enter="handleLogin">
+          <a-form-item name="account">
+            <a-input v-model:value="loginForm.account" placeholder="请输入用户姓名" style="margin-bottom: 25px;">
+              <template #prefix>
+                <user-outlined type="user" />
+              </template>
+            </a-input>
+          </a-form-item>
+          <a-form-item name="password">
+            <a-input-password v-model:value="loginForm.password" placeholder="请输入密码">
+              <template #prefix>
+                <LockOutlined type="user" />
+              </template>
+            </a-input-password>
+          </a-form-item>
+          <a-form-item>
+            <div class="pass-tip">忘记密码</div>
+          </a-form-item>
+        </a-form>
+
+      </div>
+      <div class="login-btn">
+        <a-button type="primary" style="width: 100%;height: 100%;" @click="handleLogin">登录</a-button>
+      </div>
     </div>
-
-    <div class="flex center">
-      <LoginForm />
-    </div>
-    <div class="bottom"> </div>
   </div>
-  <!-- </AdaptiveContainer> -->
 </template>
-<script lang="ts" setup>
-  import { computed } from 'vue';
-  import { AppLogo } from '/@/components/Application';
-  import LoginForm from './LoginForm.vue';
-  import { useGlobSetting } from '/@/hooks/setting';
-  // import { useI18n } from '/@/hooks/web/useI18n';
-  // import { useDesign } from '/@/hooks/web/useDesign';
-  // import { useLocaleStore } from '/@/store/modules/locale';
-  import { useLoginState } from './useLogin';
-  // import AdaptiveContainer from '/@/components/Container/src/Adaptive.vue';
 
-  defineProps({
-    sessionTimeout: {
-      type: Boolean,
-    },
+<script setup lang="ts">
+import { ref, reactive, toRaw, onMounted } from 'vue'
+import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
+import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
+import { useUserStore } from '/@/store/modules/user';
+import { useMessage } from '/@/hooks/web/useMessage';
+ import { useI18n } from '/@/hooks/web/useI18n';
+  import { getCodeInfo } from '/@/api/sys/user';
+
+const formRef = ref();
+let loginForm = reactive({
+  account: 'zhuqi',
+  password: 'zhuqi123zhuqi',
+  inputCode: '',
+})
+const { validForm } = useFormValid(formRef);
+const { getFormRules } = useFormRules();
+const userStore = useUserStore();
+const randCodeData = reactive({
+  randCodeImage: '',
+  requestCodeSuccess: false,
+  checkKey: null,
+});
+const { notification, createErrorModal } = useMessage();
+  const { t } = useI18n();
+
+async function handleLogin() {
+  const data = await validForm();
+  if (!data) return;
+  try {
+    const { userInfo } = await userStore.login(
+      toRaw({
+        password: data.password,
+        username: data.account,
+        captcha: data.inputCode,
+        checkKey: randCodeData.checkKey,
+        mode: 'none', //不要默认的错误提示
+      })
+    );
+    if (userInfo) {
+      notification.success({
+        message: t('sys.login.loginSuccessTitle'),
+        description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realname}`,
+        duration: 3,
+      });
+    }
+  } catch (error) {
+    //update-begin-author:taoyan date:2022-5-3 for: issues/41 登录页面，当输入验证码错误时，验证码图片要刷新一下，而不是保持旧的验证码图片不变
+    handleChangeCheckCode();
+    //update-end-author:taoyan date:2022-5-3 for: issues/41 登录页面，当输入验证码错误时，验证码图片要刷新一下，而不是保持旧的验证码图片不变
+  }
+}
+
+  function handleChangeCheckCode() {
+    loginForm.inputCode = '';
+    //TODO 兼容mock和接口，暂时这样处理
+    randCodeData.checkKey = 1629428467008; //new Date().getTime();
+    getCodeInfo(randCodeData.checkKey).then((res) => {
+      randCodeData.randCodeImage = res;
+      randCodeData.requestCodeSuccess = true;
+    });
+  }
+  //初始化验证码
+  onMounted(() => {
+    handleChangeCheckCode();
   });
-  const globSetting = useGlobSetting();
-  // const { prefixCls } = useDesign('login');
-  // const { t } = useI18n();
-  // const localeStore = useLocaleStore();
-  // const showLocale = localeStore.getShowPicker;
-  const title = computed(() => globSetting?.title ?? '');
-  const { handleBackLogin } = useLoginState();
-  handleBackLogin();
 </script>
-<style lang="less" scoped>
-  @import '/@/design/theme.less';
-  @prefix-cls: ~'@{namespace}-login';
-  @logo-prefix-cls: ~'@{namespace}-app-logo';
-  @countdown-prefix-cls: ~'@{namespace}-countdown-input';
-  @dark-bg: #293146;
-  @ventSpace: zxm;
-
-  html[data-theme='dark'] {
-    .@{prefix-cls} {
-      background-color: @dark-bg;
-
-      &::before {
-        background-image: url(/@/assets/svg/login-bg-dark.svg);
-      }
 
-      .@{ventSpace}-input,
-      .@{ventSpace}-input-password {
-        background-color: #232a3b;
-      }
-
-      .@{ventSpace}-btn:not(.@{ventSpace}-btn-link):not(.@{ventSpace}-btn-primary) {
-        border: 1px solid #4a5569;
-      }
-
-      &-form {
-        background: transparent !important;
-      }
-
-      .app-iconify {
-        color: #fff;
-      }
-    }
+<style lang="less" scoped>
+@import '/@/design/theme.less';
 
-    input.fix-auto-fill,
-    .fix-auto-fill input {
-      -webkit-text-fill-color: #c9d1d9 !important;
-      box-shadow: inherit !important;
-    }
+@{theme-deepblue} {
+  .Login {
+    --image-login-bg: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/login-bg.png');
+    --image-login-bd: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/login-border.png');
   }
+}
 
-  // 绿色主题特化的变量
-  @{theme-green} {
-    .login-container {
-      --image-top: url('/@/assets/images/themify/green/vent/login/top.png');
-      --image-icon: url('/@/assets/images/themify/green/vent/login/icon.png');
-      --image-down: url('/@/assets/images/themify/green/vent/login/down.png');
-      --image-bg: none;
-      --container-bg: #181b24;
-    }
-    .login-icon {
-      width: 325px !important;
-      background-size: 100% 100%;
-    }
-  }
-  // 深蓝色主题特化的变量
-  @{theme-deepblue} {
-    .login-container {
-      --image-top: url('/@/assets/images/themify/deepblue/vent/login/top.png');
-      --image-icon: url('/@/assets/images/themify/deepblue/vent/login/icon.png');
-      --image-down: url('/@/assets/images/themify/deepblue/vent/login/down.png');
-      --image-bg: none;
-      --container-bg: #021632;
-    }
-  }
+.Login {
+  --image-login-bg: url('@/assets/images/gasInjection/login-bg.png');
+  --image-login-bd: url('@/assets/images/gasInjection/login-border.png');
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(--image-login-bg) no-repeat;
+  background-size: 100% 100%;
 
   .login-container {
-    // 需要主题化的变量放在上面
-    --image-top: url('/@/assets/images/vent/login/top.png');
-    --image-icon: url('/@/assets/images/vent/login/icon.png');
-    --image-down: url('/@/assets/images/vent/login/down.png');
-    --image-bg: url('/@/assets/images/vent/login/bg.png');
-    --container-bg: linear-gradient(to bottom, #000c37, #001e63);
-
-    // 下面是不需要主题化的变量，例如单色图标、中性颜色等
-    --login-bg: linear-gradient(to bottom, #000c3766, #001e6366);
-    color: @vent-text-base;
-    width: 100vw;
-    height: 100%;
-    background: var(--container-bg);
-    padding: 0 !important;
-    position: relative;
-    &::before {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0px;
-      left: 0;
-      background-image: var(--image-bg);
-      background-size: cover;
-    }
-    .login-bg {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      background: var(--login-bg);
-    }
-    .top-header {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      position: relative;
-      // padding-top: 70px;
-      .top-bg {
-        width: 100%;
-        height: 129px;
-
-        background-image: var(--image-top);
-        background-size: 100% auto;
-      }
-      .login-icon {
-        position: relative;
-        width: 237px;
-        height: 274px;
-        top: 10px;
-        background-image: var(--image-icon);
-      }
-      .title {
-        position: absolute;
-        top: 78px;
-        color: rgb(224, 224, 224);
-        font-size: 30px;
-        text-align: center;
-        text-shadow:
-          1px 1px 1px #fff,
-          -1px -1px 1px #000;
-      }
-    }
-
-    .bottom {
-      width: 100%;
-      height: 118px;
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      background-image: var(--image-down);
-      background-size: 100% auto;
-    }
-
-    .center {
-      width: 100%;
-      height: calc(100% - 540px);
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      position: relative;
-      justify-content: center;
-    }
+    position: absolute;
+    width: 460px;
+    height: 600px;
+    right: 155px;
+    top: 50%;
+    transform: translate(0, -50%);
+    background: var(--image-login-bd) no-repeat;
+    background-size: 100% 100%;
+    padding: 60px;
+    box-sizing: border-box;
   }
 
-  .@{prefix-cls} {
-    min-height: 100%;
-    overflow: hidden;
-    @media (max-width: @screen-xl) {
-      background-color: #293146;
-
-      .@{prefix-cls}-form {
-        background-color: #fff;
-      }
-    }
-
-    &::before {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      margin-left: -48%;
-      // background-image: url(/@/assets/svg/login-bg.svg);
-      background-position: 100%;
-      background-repeat: no-repeat;
-      background-size: auto 100%;
-      content: '';
-      @media (max-width: @screen-xl) {
-        display: none;
-      }
-    }
-
-    .@{logo-prefix-cls} {
-      position: absolute;
-      top: 12px;
-      height: 30px;
-
-      &__title {
-        font-size: 16px;
-        color: #fff;
-      }
-
-      img {
-        width: 32px;
-      }
-    }
-
-    .container {
-      .@{logo-prefix-cls} {
-        display: flex;
-        width: 60%;
-        height: 80px;
-
-        &__title {
-          font-size: 24px;
-          color: #fff;
-        }
-
-        img {
-          width: 48px;
-        }
-      }
-    }
-
-    &-sign-in-way {
-      .anticon {
-        font-size: 22px;
-        color: #888;
-        cursor: pointer;
-
-        &:hover {
-          color: @primary-color;
-        }
-      }
-    }
-
-    input:not([type='checkbox']) {
-      min-width: 360px;
-
-      @media (max-width: @screen-xl) {
-        min-width: 320px;
-      }
-
-      @media (max-width: @screen-lg) {
-        min-width: 260px;
-      }
+  .login-title {
+    width: 100%;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-size: 26px;
+    // font-family: 'douyuFont';
+    font-weight: bolder;
+    letter-spacing: 2px;
+  }
 
-      @media (max-width: @screen-md) {
-        min-width: 240px;
-      }
+  .login-info {
+    padding: 40px 0px 55px 0px
+  }
 
-      @media (max-width: @screen-sm) {
-        min-width: 160px;
-      }
-    }
+  .pass-tip {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    color: #fff;
+    margin: 10px 0px;
+  }
 
-    .@{countdown-prefix-cls} input {
-      min-width: unset;
-    }
+  .login-btn {
 
-    .@{ventSpace}-divider-inner-text {
-      font-size: 12px;
-      color: @text-color-secondary;
-    }
+    width: 100%;
+    height: 40px;
   }
+}
+
+::v-deep .zxm-input-affix-wrapper {
+  padding: 8px 11px !important;
+  color: #fff !important;
+  background-color: #0f4a6f !important;
+  border: 1px solid #2394d3 !important;
+}
+
+::v-deep .zxm-input-prefix {
+  margin-right: 10px;
+}
+
+::v-deep .anticon {
+  color: #fff;
+}
+
+::v-deep .zxm-input {
+  height: 30px;
+  background-color: #0f4a73;
+  color: #fff;
+}
+
+::v-deep .zxm-form-item-has-error :not(.zxm-input-disabled):not(.zxm-input-borderless).zxm-input {
+  background-color: #0f4a73 !important;
+}
+
+::v-deep .zxm-btn-primary {
+  background: #2cb6ff !important;
+}
+
+::v-deep .zxm-btn-primary:hover {
+  background: #0580c2 !important;
+}
 </style>

src/views/sys/login/login1.vue

@@ -0,0 +1,304 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- <AdaptiveContainer :options="{ width: 1920, height: 1080 }" style="overflow-y: hidden"> -->
+  <div class="login-container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%">
+    <div class="login-bg"></div>
+    <span class="-enter-x xl:hidden">
+      <AppLogo :alwaysShowTitle="true" />
+    </span>
+    <div class="top-header">
+      <div class="top-bg"></div>
+      <div class="login-icon"></div>
+      <!-- <div class="title">{{ title }}</div> -->
+      <div class="title">注气驱替监管系统</div>
+    </div>
+
+    <div class="flex center">
+      <LoginForm />
+    </div>
+    <div class="bottom"> </div>
+  </div>
+  <!-- </AdaptiveContainer> -->
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { AppLogo } from '/@/components/Application';
+  import LoginForm from './LoginForm.vue';
+  import { useGlobSetting } from '/@/hooks/setting';
+  // import { useI18n } from '/@/hooks/web/useI18n';
+  // import { useDesign } from '/@/hooks/web/useDesign';
+  // import { useLocaleStore } from '/@/store/modules/locale';
+  import { useLoginState } from './useLogin';
+  // import AdaptiveContainer from '/@/components/Container/src/Adaptive.vue';
+
+  defineProps({
+    sessionTimeout: {
+      type: Boolean,
+    },
+  });
+  const globSetting = useGlobSetting();
+  // const { prefixCls } = useDesign('login');
+  // const { t } = useI18n();
+  // const localeStore = useLocaleStore();
+  // const showLocale = localeStore.getShowPicker;
+  const title = computed(() => globSetting?.title ?? '');
+  const { handleBackLogin } = useLoginState();
+  handleBackLogin();
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+  @prefix-cls: ~'@{namespace}-login';
+  @logo-prefix-cls: ~'@{namespace}-app-logo';
+  @countdown-prefix-cls: ~'@{namespace}-countdown-input';
+  @dark-bg: #293146;
+  @ventSpace: zxm;
+
+  html[data-theme='dark'] {
+    .@{prefix-cls} {
+      background-color: @dark-bg;
+
+      &::before {
+        background-image: url(/@/assets/svg/login-bg-dark.svg);
+      }
+
+      .@{ventSpace}-input,
+      .@{ventSpace}-input-password {
+        background-color: #232a3b;
+      }
+
+      .@{ventSpace}-btn:not(.@{ventSpace}-btn-link):not(.@{ventSpace}-btn-primary) {
+        border: 1px solid #4a5569;
+      }
+
+      &-form {
+        background: transparent !important;
+      }
+
+      .app-iconify {
+        color: #fff;
+      }
+    }
+
+    input.fix-auto-fill,
+    .fix-auto-fill input {
+      -webkit-text-fill-color: #c9d1d9 !important;
+      box-shadow: inherit !important;
+    }
+  }
+
+  // 绿色主题特化的变量
+  @{theme-green} {
+    .login-container {
+      --image-top: url('/@/assets/images/themify/green/vent/login/top.png');
+      --image-icon: url('/@/assets/images/themify/green/vent/login/icon.png');
+      --image-down: url('/@/assets/images/themify/green/vent/login/down.png');
+      --image-bg: none;
+      --container-bg: #181b24;
+    }
+    .login-icon {
+      width: 325px !important;
+      background-size: 100% 100%;
+    }
+  }
+  // 深蓝色主题特化的变量
+  @{theme-deepblue} {
+    .login-container {
+      --image-top: url('/@/assets/images/themify/deepblue/vent/login/top.png');
+      --image-icon: url('/@/assets/images/themify/deepblue/vent/login/icon.png');
+      --image-down: url('/@/assets/images/themify/deepblue/vent/login/down.png');
+      --image-bg: none;
+      --container-bg: #021632;
+    }
+  }
+
+  .login-container {
+    // 需要主题化的变量放在上面
+    --image-top: url('/@/assets/images/vent/login/top.png');
+    --image-icon: url('/@/assets/images/vent/login/icon.png');
+    --image-down: url('/@/assets/images/vent/login/down.png');
+    --image-bg: url('/@/assets/images/vent/login/bg.png');
+    --container-bg: linear-gradient(to bottom, #000c37, #001e63);
+
+    // 下面是不需要主题化的变量，例如单色图标、中性颜色等
+    --login-bg: linear-gradient(to bottom, #000c3766, #001e6366);
+    color: @vent-text-base;
+    width: 100vw;
+    height: 100%;
+    background: var(--container-bg);
+    padding: 0 !important;
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0px;
+      left: 0;
+      background-image: var(--image-bg);
+      background-size: cover;
+    }
+    .login-bg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      background: var(--login-bg);
+    }
+    .top-header {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      // padding-top: 70px;
+      .top-bg {
+        width: 100%;
+        height: 129px;
+
+        background-image: var(--image-top);
+        background-size: 100% auto;
+      }
+      .login-icon {
+        position: relative;
+        width: 237px;
+        height: 274px;
+        top: 10px;
+        background-image: var(--image-icon);
+      }
+      .title {
+        position: absolute;
+        top: 78px;
+        color: rgb(224, 224, 224);
+        font-size: 30px;
+        text-align: center;
+        text-shadow:
+          1px 1px 1px #fff,
+          -1px -1px 1px #000;
+      }
+    }
+
+    .bottom {
+      width: 100%;
+      height: 118px;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      background-image: var(--image-down);
+      background-size: 100% auto;
+    }
+
+    .center {
+      width: 100%;
+      height: calc(100% - 540px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+      justify-content: center;
+    }
+  }
+
+  .@{prefix-cls} {
+    min-height: 100%;
+    overflow: hidden;
+    @media (max-width: @screen-xl) {
+      background-color: #293146;
+
+      .@{prefix-cls}-form {
+        background-color: #fff;
+      }
+    }
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      margin-left: -48%;
+      // background-image: url(/@/assets/svg/login-bg.svg);
+      background-position: 100%;
+      background-repeat: no-repeat;
+      background-size: auto 100%;
+      content: '';
+      @media (max-width: @screen-xl) {
+        display: none;
+      }
+    }
+
+    .@{logo-prefix-cls} {
+      position: absolute;
+      top: 12px;
+      height: 30px;
+
+      &__title {
+        font-size: 16px;
+        color: #fff;
+      }
+
+      img {
+        width: 32px;
+      }
+    }
+
+    .container {
+      .@{logo-prefix-cls} {
+        display: flex;
+        width: 60%;
+        height: 80px;
+
+        &__title {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        img {
+          width: 48px;
+        }
+      }
+    }
+
+    &-sign-in-way {
+      .anticon {
+        font-size: 22px;
+        color: #888;
+        cursor: pointer;
+
+        &:hover {
+          color: @primary-color;
+        }
+      }
+    }
+
+    input:not([type='checkbox']) {
+      min-width: 360px;
+
+      @media (max-width: @screen-xl) {
+        min-width: 320px;
+      }
+
+      @media (max-width: @screen-lg) {
+        min-width: 260px;
+      }
+
+      @media (max-width: @screen-md) {
+        min-width: 240px;
+      }
+
+      @media (max-width: @screen-sm) {
+        min-width: 160px;
+      }
+    }
+
+    .@{countdown-prefix-cls} input {
+      min-width: unset;
+    }
+
+    .@{ventSpace}-divider-inner-text {
+      font-size: 12px;
+      color: @text-color-secondary;
+    }
+  }
+</style>

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

@@ -30,8 +30,8 @@
               :type="config.type" :layout="config.layout" />
           </div>
           <div v-else class="content__module flex flex-justify-around flex-items-center flex-wrap">
-            <MiniBoard v-for="item in config.items" :key="item.prop" :label="item.label" :value="item.value" :unit="item.unit"
-              :type="config.type" :layout="config.layout" />
+            <MiniBoard v-for="item in config.items" :key="item.prop" :label="item.label" :value="item.value"
+              :unit="item.unit" :type="config.type" :layout="config.layout" />
           </div>
         </template>
         <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
@@ -122,10 +122,10 @@
         </template>
         <template v-else-if="config.name === 'upDown'">
           <!-- <upDown class="content__module" :option="config.config.items.option" :upDownData="config.data" /> -->
-           <gasZyList gasZyListrt class="content__module" :option="config.config.option" :listData="config.data" />
+          <gasZyList gasZyListrt class="content__module" :option="config.config.option" :listData="config.data" />
         </template>
         <template v-else-if="config.name === 'chart_inject'">
-          <gasInjectChart class="content__module" :option="config.config.option" :echartData="config.data"/>
+          <gasInjectChart class="content__module" :option="config.config.option" :echartData="config.data" />
         </template>
         <template v-else-if="config.name === 'gas_inject_list'">
           <gasInjectList class="content__module" :option="config.config.option" :listData="config.data" />
@@ -143,26 +143,28 @@
           <gasDeviceStatusControl class="content__module" :option="config.config.option" :statusData="config.data" />
         </template>
         <template v-else-if="config.name === 'board_gas'">
-          <gasBoard class="content__module" :option="config.config.option" :type="config.config.type" :listData="config.data" />
+          <gasBoard class="content__module" :option="config.config.option" :type="config.config.type"
+            :listData="config.data" />
         </template>
-         <template v-else-if="config.name === 'gas_inject_card'">
+        <template v-else-if="config.name === 'gas_inject_card'">
           <gasInjectCard class="content__module" :option="config.config.option" />
         </template>
-         <template v-else-if="config.name === 'gas_line_chart'">
-          <echartLineDate class="content__module" :echartOption="config.config.echartOption" :ecahrtData="config.data" />
+        <template v-else-if="config.name === 'gas_line_chart'">
+          <echartLineDate class="content__module" :echartOption="config.config.echartOption"  :data="data" />
         </template>
         <template v-else-if="config.name === 'jk-video'">
-          <cameraModal class="content__module"  :deviceId="config.data" />
+          <cameraModal class="content__module" :deviceId="config.data" />
         </template>
-          <template v-else-if="config.name === 'gas_chl_chart'">
-          <gasChlChart class="content__module"  :echartOption="config.config.echartOption" :echartData="config.data"></gasChlChart>
+        <template v-else-if="config.name === 'gas_chl_chart'">
+          <gasChlChart class="content__module" :echartOption="config.config.echartOption" :echartData="config.data">
+          </gasChlChart>
         </template>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, reactive, watch } from 'vue';
 import {
   CommonItem,
   Config,
@@ -221,6 +223,8 @@ const props = defineProps<{
 
 const { background, layout } = props.moduleData;
 
+
+
 // 获取当原始配置带 items 项时的最终 items 配置
 function getItems(raw, items: CommonItem[]) {
   return items.map((i) => {
@@ -471,6 +475,7 @@ const layoutConfig = computed(() => {
     return arr;
   }, []);
 });
+
 </script>
 <style lang="less" scoped>
 @import '@/design/theme.less';

src/views/vent/home/configurable/components/gasInject/DetailInfo.vue

@@ -18,8 +18,6 @@
     </template>
     <!-- 抽采数据  -->
     <template v-if="deviceType == 'gas_cc_data'">
-      <!-- <curveEchartDetail :sysType="'Cc-xg'" :isShowExport="false" :tableColumn="tableColumnCcxg"
-        :strtype="data.pumpStrtype"></curveEchartDetail> -->
       <TableAndLine></TableAndLine>
     </template>
     <template v-if="deviceType == 'gas_zq-yl'">
@@ -39,16 +37,10 @@
     <template v-if="deviceType == 'gas_zq_paramline'">
       <echartLineDateGk :echartOption="echartOptionGk" :deviceID="data.deviceId" :strtype="data.strtype" />
     </template>
+    <!-- 视屏监控 -->
     <template v-if="deviceType == 'gas_zq_video'">
       <cameraDetailModal></cameraDetailModal>
     </template>
-    <template v-if="deviceType == 'gas_cc_line'">
-      <curveEchartDetail :sysType="'Cc'" :isShowExport="false" :tableColumn="tableColumnCc">
-      </curveEchartDetail>
-    </template>
-    <template v-if="deviceType == 'syq-env-monitor'">
-      <SyqDetails />
-    </template>
     <!-- 系统运行状态 -->
     <template v-if="deviceType == 'run-status'">
       <systemDetailTable :tableData="data.systemRunData"></systemDetailTable>
@@ -71,8 +63,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue'
 import curveEchartDetail from './curveEchartDetail.vue'
-import { columnControl, tableColumnZqcs, tableColumnCcs, tableColumnCcxg,tableColumnHj, tableColumnCc, optionDetailZq, optionDetailCc,echartOptionGk } from './gasInject.data'
-import SyqDetails from './SyqDetails.vue';
+import { columnControl, tableColumnZqcs, tableColumnCcs, tableColumnCcxg,echartOptionGk } from './gasInject.data'
 import systemDetailTable from './systemDetailTable.vue'
 import warnDetailTable from './warnDetailTable.vue'
 import LineAndBarDetail from './LineAndBarDetail.vue'
@@ -101,7 +92,7 @@ let $emit = defineEmits(['closeModal'])
 
 //弹窗标题
 let modalTitle = computed(() => {
-  if (props.deviceType == 'cc_gas_nd' || props.deviceType == 'cc_gas_ll' || props.deviceType == 'gas_cc_line') {
+  if (props.deviceType == 'cc_gas_nd' || props.deviceType == 'cc_gas_ll' ) {
     return '抽采参数时程曲线'
   } else if (props.deviceType == 'gas_zq-yl') {
     return '注气参数时程曲线'

src/views/vent/home/configurable/components/gasInject/LineAndBarDetail.vue

@@ -5,9 +5,9 @@
         <div class="nav-search">
           <!-- 时间查询选项 -->
           <a-radio-group v-model:value="timerTabs" name="radioGroup" @change="changeRadio">
-            <a-radio value="day">按天</a-radio>
-            <a-radio value="hours">按小时</a-radio>
-            <a-radio value="minutes">按分钟</a-radio>
+            <a-radio value="9">按天</a-radio>
+            <a-radio value="8">按小时</a-radio>
+            <a-radio value="6">按分钟</a-radio>
           </a-radio-group>
           <!-- 时间查询条件 -->
            <a-range-picker style="width:340px" :value="[searchData.startTime, searchData.endTime]"
@@ -84,7 +84,7 @@ let searchData = reactive({
 })
 //注气参数详情数据
 let listData = ref<any[]>([])
-let timerTabs = ref('day')
+let timerTabs = ref('8')
 let showExport = ref(false)
 
 //时间间隔切换
@@ -108,13 +108,13 @@ function handleBack() {
 function getSearch() {
   switch (timerTabs.value) {
     case 'day':
-      getHistoryData('9')
+      getHistoryData(timerTabs.value)
       break;
     case 'hours':
-      getHistoryData('8')
+      getHistoryData(timerTabs.value)
       break;
     case 'minutes':
-      getHistoryData('6')
+      getHistoryData(timerTabs.value)
       break;
   }
 }
@@ -141,7 +141,7 @@ async function getHistoryData(skip) {
 
 watch(() => props.isShowExport, (newV, oldV) => {
   showExport.value = newV
-   getHistoryData('9')
+   getHistoryData(timerTabs.value)
 }, { immediate: true })
 </script>
 

src/views/vent/home/configurable/components/gasInject/SyqDetails.vue

@@ -1,403 +0,0 @@
-<template>
-  <div class="main-container">
-    <!-- 顶部操作栏 -->
-    <div class="modal-top-bar">
-      <div class="time-picker-wrap">
-        <span class="label">时间:</span>
-        <div class="date-input-group">
-          <!-- <input v-model="startDate" type="date" class="date-input" @change="handleTimeChange" />
-          <span class="separator">—</span>
-          <input v-model="endDate" type="date" class="date-input" @change="handleTimeChange" /> -->
-          <a-range-picker
-            v-model:value="timeRange"
-            separator="—"
-            format="YYYY-MM-DD"
-            value-format="YYYY-MM-DD"
-            placeholder=""
-            @change="handleTimeChange"
-            class="date-range-picker"
-            :dropdown-class-name="'custom-range-dropdown'"
-          />
-        </div>
-      </div>
-      <div class="button-area">
-        <button class="export-btn" @click="handleExport">
-          <div class="icon"></div>
-          数据导出
-        </button>
-      </div>
-    </div>
-
-    <!-- 环境监测表格 -->
-    <div class="table-wrap">
-      <table class="monitor-table">
-        <thead>
-          <tr>
-            <th rowspan="2">时间</th>
-            <th colspan="3" class="th-bg">注气区域（定向钻场）</th>
-            <th colspan="4" class="th-bg">抽采区域（回风巷）</th>
-          </tr>
-          <tr>
-            <!-- 注气区域子列 -->
-            <th>甲烷浓度 (%)</th>
-            <th>氧气浓度 (%)</th>
-            <th>温度 (℃)</th>
-            <!-- 抽采区域子列 -->
-            <th>甲烷浓度 (%)</th>
-            <th>氧气浓度 (%)</th>
-            <th>温度 (℃)</th>
-            <th>风速 (m/s)</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(row, index) in tableData" :key="index">
-            <td>{{ row.time }}</td>
-            <td>{{ row.injectionMethane }}</td>
-            <td>{{ row.injectionOxygen }}</td>
-            <td>{{ row.injectionTemp }}</td>
-            <td>{{ row.extractionMethane }}</td>
-            <td>{{ row.extractionOxygen }}</td>
-            <td>{{ row.extractionTemp }}</td>
-            <td>{{ row.extractionWindSpeed }}</td>
-          </tr>
-          <tr v-if="!tableData || tableData.length === 0">
-            <td colspan="8" class="empty-tip">暂无数据</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <!-- 趋势折线图 -->
-    <div class="chart-wrap">
-      <div ref="chartRef" class="monitor-chart"></div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, watch, onMounted, onUnmounted } from 'vue';
-  import * as echarts from 'echarts';
-  import type { EChartsOption } from 'echarts';
-  const timeRange = ref<[string, string]>(['2026-03-12', '2026-03-13']);
-
-  // 表格数据
-  const tableData = ref([
-    {
-      time: '2026-03-12 00:00',
-      injectionMethane: 0.25,
-      injectionOxygen: 20.8,
-      injectionTemp: 22.5,
-      extractionMethane: 0.32,
-      extractionOxygen: 20.5,
-      extractionTemp: 23.1,
-      extractionWindSpeed: 1.2,
-    },
-    {
-      time: '2026-03-12 01:00',
-      injectionMethane: 0.28,
-      injectionOxygen: 20.7,
-      injectionTemp: 22.6,
-      extractionMethane: 0.35,
-      extractionOxygen: 20.4,
-      extractionTemp: 23.2,
-      extractionWindSpeed: 1.3,
-    },
-    {
-      time: '2026-03-12 01:00',
-      injectionMethane: 0.28,
-      injectionOxygen: 20.7,
-      injectionTemp: 22.6,
-      extractionMethane: 0.35,
-      extractionOxygen: 20.4,
-      extractionTemp: 23.2,
-      extractionWindSpeed: 1.3,
-    },
-    {
-      time: '2026-03-12 01:00',
-      injectionMethane: 0.28,
-      injectionOxygen: 20.7,
-      injectionTemp: 22.6,
-      extractionMethane: 0.35,
-      extractionOxygen: 20.4,
-      extractionTemp: 23.2,
-      extractionWindSpeed: 1.3,
-    },
-    {
-      time: '2026-03-12 01:00',
-      injectionMethane: 0.28,
-      injectionOxygen: 20.7,
-      injectionTemp: 22.6,
-      extractionMethane: 0.35,
-      extractionOxygen: 20.4,
-      extractionTemp: 23.2,
-      extractionWindSpeed: 1.3,
-    },
-  ]);
-
-  // 图表数据
-  const chartData = ref({
-    xAxisData: ['4.07 03:00', '4.07 05:00', '4.08 04:00', '4.09 03:00', '4.09 05:00', '4.10 04:00'],
-    series: [
-      { name: '指标1', data: [0.8, 1.0, 0.9, 1.5, 0.8, 1.6], color: '#00ff88' },
-      { name: '指标2', data: [0.4, 0.5, 0.7, 1.0, 0.4, 1.2], color: '#ffaa00' },
-      { name: '指标3', data: [0.9, 1.3, 1.2, 0.9, 0.9, 1.3], color: '#00ddff' },
-    ],
-  });
-
-  // 内部状态
-  const chartRef = ref<HTMLElement>();
-  let chartInstance: echarts.ECharts | null = null;
-
-  // 监听 chartData 变化，自动重新渲染图表
-  watch(
-    chartData,
-    () => {
-      initChart();
-    },
-    { deep: true }
-  );
-
-  const handleTimeChange = () => {
-    console.log('time-change', timeRange.value);
-  };
-  const handleExport = () => {
-    console.log('导出数据');
-  };
-
-  // 图表初始化
-  const initChart = () => {
-    if (!chartRef.value) return;
-    if (chartInstance) chartInstance.dispose();
-    chartInstance = echarts.init(chartRef.value);
-
-    const seriesList = chartData.value.series.map((item) => ({
-      name: item.name,
-      type: 'line',
-      smooth: true,
-      symbol: 'none',
-      data: item.data,
-      lineStyle: { width: 2, color: item.color },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: item.color + '80' },
-          { offset: 1, color: item.color + '00' },
-        ]),
-      },
-    }));
-
-    const option: EChartsOption = {
-      backgroundColor: 'transparent',
-      tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,20,40,0.8)', borderColor: '#00aaff', textStyle: { color: '#fff' } },
-      legend: { right: '5%', top: '3%', textStyle: { color: '#fff' }, itemWidth: 10, itemHeight: 10 },
-      grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        data: chartData.value.xAxisData,
-        axisLine: { lineStyle: { color: 'rgba(0,170,255,0.3)' } },
-        axisLabel: { color: '#aaccff' },
-        splitLine: { show: false },
-      },
-      yAxis: {
-        type: 'value',
-        min: 0,
-        // 修复：调整 Y 轴最大值，避免数据超出显示范围（也可动态计算最大值）
-        max: 2,
-        axisLine: { show: false },
-        axisLabel: { color: '#aaccff' },
-        splitLine: { lineStyle: { color: 'rgba(0,170,255,0.1)' } },
-      },
-      series: seriesList,
-    };
-
-    chartInstance.setOption(option);
-  };
-
-  const resizeChart = () => chartInstance?.resize();
-
-  onMounted(() => {
-    window.addEventListener('resize', resizeChart);
-    initChart();
-  });
-
-  onUnmounted(() => {
-    window.removeEventListener('resize', resizeChart);
-    chartInstance?.dispose();
-    chartInstance = null;
-  });
-</script>
-
-<style scoped lang="less">
-  .main-container {
-    width: 100%;
-    height: 610px;
-    overflow: hidden;
-    padding: 0 35px;
-  }
-  // 顶部操作栏
-  .modal-top-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 16px 0;
-    padding: 0 20px;
-    background-image: url('/@/assets/images/gasInjection/syq/modal-top-bg.png');
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    background-position: top center;
-  }
-
-  .time-picker-wrap {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .label {
-      color: #aaccff;
-      font-size: 14px;
-    }
-
-    .date-input-group {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      background: rgba(0, 30, 60, 0.6);
-      border: 1px solid rgba(0, 170, 255, 0.4);
-      padding: 4px 8px;
-      border-radius: 4px;
-
-      &:hover {
-        border-color: #00aaff;
-      }
-    }
-
-    .date-input-group {
-      padding: 0;
-
-      :deep(.zxm-picker) {
-        background: rgba(0, 30, 60, 0.6);
-        border: 1px solid rgba(0, 170, 255, 0.4);
-
-        &:hover {
-          border-color: #00aaff;
-        }
-      }
-
-      :deep(.zxm-picker-input > input) {
-        color: #ffffff;
-        font-size: 14px;
-      }
-
-      :deep(.zxm-picker-range-separator) {
-        color: #aaccff;
-      }
-
-      :deep(.zxm-picker-suffix) {
-        color: #aaccff;
-      }
-
-      :deep(.zxm-picker-clear) {
-        color: #fff;
-      }
-    }
-  }
-  .button-area {
-    border: 1px solid #00aaff;
-    border-radius: 5px;
-    padding: 2px;
-    margin: 5px 0;
-  }
-
-  .export-btn {
-    height: 25px;
-    background: linear-gradient(90deg, #0077ff 0%, #00aaff 100%);
-    border: 1px solid #00aaff;
-    color: #ffffff;
-    padding: 8px 16px;
-    border-radius: 4px;
-    font-size: 14px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-
-    &:hover {
-      background: linear-gradient(90deg, #0088ff 0%, #00bbff 100%);
-      box-shadow: 0 0 15px rgba(0, 170, 255, 0.5);
-    }
-
-    .icon {
-      width: 15px;
-      height: 15px;
-      background-image: url('/@/assets/images/gasInjection/syq/modal-export.svg');
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      background-position: top center;
-    }
-  }
-
-  // 表格样式
-  .table-wrap {
-    margin-bottom: 20px;
-    max-height: 235px;
-    overflow-y: auto;
-    border-bottom: 1px solid #2893b2;
-
-    // 滚动条样式
-    &::-webkit-scrollbar {
-      width: 2px;
-      height: 6px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: rgba(0, 170, 255, 0.3);
-    }
-  }
-
-  .monitor-table {
-    width: 100%;
-    border-collapse: collapse;
-    color: #ffffff;
-    font-size: 14px;
-
-    td {
-      padding: 8px 12px;
-      text-align: center;
-    }
-
-    th {
-      border: 1px solid #2893b2;
-      padding: 8px 12px;
-      text-align: center;
-      background: #103967;
-      color: #2fb8d3;
-      font-weight: 500;
-    }
-    .th-bg {
-      background-color: #1b578e;
-    }
-    tbody tr {
-      background: rgb(11, 35, 66, 0.3);
-    }
-    tbody tr:nth-child(odd) {
-      background: rgb(13, 44, 82, 0.8);
-    }
-
-    .empty-tip {
-      color: #aaccff;
-      padding: 20px;
-    }
-  }
-
-  // 图表容器
-  .chart-wrap {
-    width: 100%;
-    height: 280px;
-    background: rgb(17, 40, 71, 0.5);
-
-    .monitor-chart {
-      width: 100%;
-      height: 100%;
-    }
-  }
-</style>

src/views/vent/home/configurable/components/gasInject/curveEchartDetail.vue

@@ -5,9 +5,9 @@
         <div class="nav-search">
           <!-- 时间查询选项 -->
           <a-radio-group v-model:value="timerTabs" name="radioGroup" @change="changeRadio">
-            <a-radio value="day">按天</a-radio>
-            <a-radio value="hours">按小时</a-radio>
-            <a-radio value="minutes">按分钟</a-radio>
+            <a-radio value="9">按天</a-radio>
+            <a-radio value="8">按小时</a-radio>
+            <a-radio value="6">按分钟</a-radio>
           </a-radio-group>
           <!-- 时间查询条件 -->
           <a-range-picker style="width:340px" :value="[searchData.startTime, searchData.endTime]"
@@ -84,7 +84,7 @@ let searchData = reactive({
   startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
   endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
 })
-let timerTabs = ref('day')
+let timerTabs = ref('8')
 let showExport = ref(false)
 
 //图表配置项
@@ -149,13 +149,13 @@ async function getHistoryData(skip) {
 function getSearch() {
   switch (timerTabs.value) {
     case 'day':
-      getHistoryData('9')
+      getHistoryData(timerTabs.value)
       break;
     case 'hours':
-      getHistoryData('8')
+      getHistoryData(timerTabs.value)
       break;
     case 'minutes':
-      getHistoryData('6')
+      getHistoryData(timerTabs.value)
       break;
   }
 }
@@ -170,7 +170,7 @@ function handleBack() {
 
 watch(() => props.isShowExport, (newV, oldV) => {
   showExport.value = newV
-  getHistoryData('9')
+  getHistoryData(timerTabs.value)
 }, { immediate: true })
 </script>
 

src/views/vent/home/configurable/components/gasInject/echartLineDate.vue

@@ -3,8 +3,8 @@
     <!-- 年月日切换 -->
     <div v-if="echartOption.showTime" class="radio-box">
       <a-radio-group v-model:value="nowData" name="radioGroup" @change="changeRadio">
-        <a-radio value="hours">按小时</a-radio>
-        <a-radio value="minutes">按分钟</a-radio>
+        <a-radio value="8">按小时</a-radio>
+        <a-radio value="6">按分钟</a-radio>
       </a-radio-group>
     </div>
     <div class="echart-line" ref="echartLines"></div>
@@ -14,21 +14,58 @@
 <script setup lang="ts">
 import { nextTick, onMounted, reactive, ref, watch } from 'vue'
 import * as echarts from 'echarts';
+import { listdays } from './gasInject.api'
 
 let props = defineProps({
   //图表配置项
   echartOption: {
     type: Object as any
   },
+  data: {
+    type: Object
+  },
   //图表数据
   ecahrtData: {
     type: Object as any
   }
 })
+
+let flag = ref(false)
 let echartLines = ref(null)
-let nowData = ref('hours')
+let nowData = ref('8')
+let deviceData = reactive({}) as any
+let deviceId = ref<any>('')
+let strtype = ref<any>('')
 let ecahrtDatas = reactive({}) as any
 
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor() {
+  if (nowData.value == '8') {
+    timer = setTimeout(
+      async () => {
+        getInitData(nowData.value)
+        if (timer) {
+          timer = null;
+        }
+        getMonitor();
+      },
+      1000 * 60 * 60
+    );
+  } else {
+    timer = setTimeout(
+      async () => {
+        getInitData(nowData.value)
+        if (timer) {
+          timer = null;
+        }
+        getMonitor();
+      },
+      1000 * 60 * 10
+    );
+  }
+
+}
 function getOption() {
   nextTick(() => {
     let myChart = echarts.init(echartLines.value);
@@ -78,50 +115,49 @@ function getOption() {
   });
 }
 //选项切换
-function changeRadio(val) {
-  console.log(val, 'val---')
+async function changeRadio(val) {
   nowData.value = val.target.value
-  getFormat()
+  await getInitData(nowData.value)
 }
-//数据格式化
-function getFormat() {
-  if (nowData.value == 'hours') {
-    //  ecahrtDatas.xData = ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31']
-    ecahrtDatas.xData = ecahrtDatas.hourData.xlist
-    ecahrtDatas.injectionPressure = ecahrtDatas.hourData.datalist.records.map(el => el.readData.injectionPressure) || []
-    ecahrtDatas.flowStdInstant = ecahrtDatas.hourData.datalist.records.map(el => el.readData.flowStdInstant) || []
-    ecahrtDatas.mixStdInstant = ecahrtDatas.hourData.datalist.records.map(el => el.readData.mixStdInstant) || []
-    ecahrtDatas.negativePressure = ecahrtDatas.hourData.datalist.records.map(el => el.readData.negativePressure) || []
-    ecahrtDatas.yData = ["20", "50", "12", "65", "30", "60", "50", "12", "65",]
-    ecahrtDatas.yData1 = ["40", "60", "22", "85", "50", "40", "60", "22", "85",]
-    ecahrtDatas.yData2 = ["70", "30", "42", "65", "80", "60", "30", "42", "65",]
-  } else if (nowData.value == 'minutes') {
-    // ecahrtDatas.xData = ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31']
-    ecahrtDatas.xData = ecahrtDatas.minitesData.xlist || []
-    ecahrtDatas.injectionPressure = ecahrtDatas.minitesData.datalist.records.map(el => el.readData.injectionPressure) || []
-    ecahrtDatas.flowStdInstant = ecahrtDatas.minitesData.datalist.records.map(el => el.readData.flowStdInstant) || []
-    ecahrtDatas.mixStdInstant = ecahrtDatas.minitesData.datalist.records.map(el => el.readData.mixStdInstant) || []
-    ecahrtDatas.negativePressure = ecahrtDatas.minitesData.datalist.records.map(el => el.readData.negativePressure) || []
-    ecahrtDatas.yData = ["200", "500", "120", "650", "300", "600", "500", "120", "650",]
-    ecahrtDatas.yData1 = ["400", "600", "220", "850", "500", "400", "600", "220", "850",]
-    ecahrtDatas.yData2 = ["700", "300", "420", "650", "800", "600", "300", "420", "650",]
-  } 
+
+async function getInitData(skip) {
+  let res = await listdays({ pageNo: 1, pageSize: 100, gdeviceids: deviceId.value, strtype: strtype.value, skip: skip })
+  console.log(res, '80000===')
+  ecahrtDatas.xData = res.xlist || []
+  ecahrtDatas.injectionPressure = res.datalist.records.map(el => el.readData.injectionPressure) || []
+  ecahrtDatas.flowStdInstant = res.datalist.records.map(el => el.readData.flowStdInstant) || []
+  ecahrtDatas.mixStdInstant = res.datalist.records.map(el => el.readData.mixStdInstant) || []
+  ecahrtDatas.negativePressure = res.datalist.records.map(el => el.readData.negativePressure) || []
   getOption()
 }
 
-watch(() => props.echartOption, (newV, oldV) => {
-  if (!newV.showTime) {
-    nowData.value = ''
+watch(() => props.data, (newV, oldV) => {
+  if (newV?.deviceId && !flag.value) {
+    deviceData = Object.assign({}, newV)
+    if (props.echartOption.types == 'zq') {
+      deviceId.value = deviceData.deviceId
+      strtype.value = deviceData.strtype
+    } else if (props.echartOption.types == 'cc') {
+      deviceId.value = deviceData.pumpDeviceId
+      strtype.value = deviceData.pumpData.deviceType
+    }
+    getInitData(nowData.value)
+    flag.value = true
   }
-}, { immediate: true, deep: true })
+})
 
 watch(() => props.ecahrtData, (newV, oldV) => {
-  if (newV) {
+  if (newV && !props.echartOption.showTime) {
+    //不发起请求，使用父子组件传值
     ecahrtDatas = Object.assign({}, newV)
-    getFormat()
+    getOption()
   }
+}, { immediate: true })
 
-}, { immediate: true, deep: true })
+onMounted(() => {
+
+  getMonitor()
+})
 </script>
 
 <style lang="less" scoped>

src/views/vent/home/configurable/components/gasInject/echartLineDateGk.vue

@@ -4,9 +4,9 @@
       <div class="nav-search">
         <!-- 时间查询选项 -->
         <a-radio-group v-model:value="timerTabs" name="radioGroup" @change="changeRadio">
-          <a-radio value="day">按天</a-radio>
-          <a-radio value="hours">按小时</a-radio>
-          <a-radio value="minutes">按分钟</a-radio>
+          <a-radio value="9">按天</a-radio>
+          <a-radio value="8">按小时</a-radio>
+          <a-radio value="6">按分钟</a-radio>
         </a-radio-group>
         <!-- 时间查询条件 -->
         <a-range-picker style="width:340px" :value="[searchData.startTime, searchData.endTime]"
@@ -48,7 +48,7 @@ let props = defineProps({
   }
 })
 
-let timerTabs = ref('day')
+let timerTabs = ref('8')
 //查询时间段-天
 let searchData = reactive({
   startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
@@ -90,13 +90,13 @@ function getSearch() {
   console.log(timerTabs.value, 'timerTabs.value')
   switch (timerTabs.value) {
     case 'day':
-      getInit('9')
+      getInit(timerTabs.value)
       break;
     case 'hours':
-      getInit('8')
+      getInit(timerTabs.value)
       break;
     case 'minutes':
-      getInit('6')
+      getInit(timerTabs.value)
       break;
   }
  
@@ -156,7 +156,7 @@ function handleHistory() {
 }
 
 onMounted( () => {
-  getInit('9')
+  getInit(timerTabs.value)
 })
 
 </script>

src/views/vent/home/configurable/components/gasInject/zqDetailCard.vue

@@ -1,103 +0,0 @@
-<template>
-  <div class="detail-card">
-    <div class="card-title">{{ `${dataIndex}#数据` }}</div>
-    <div class="card-content">
-      <div class="card-content-box">
-        <div class="card-content-item" v-for="(item, index) in optionDetail" :key="index">
-          <div class="content-item-label">{{ item.label }}</div>
-          <div class="content-item-value">{{ zqDetailData[item.value] }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue';
-
-  let props = defineProps({
-    //详情界面配置项
-    optionDetail: {
-      type: Array as any,
-    },
-    //数据序列
-    dataIndex: {
-      type: Number,
-    },
-    //分组数据
-    zqDetailData: {
-      type: Object as any,
-    },
-  });
-</script>
-
-<style lang="less" scoped>
-  @import '/@/design/theme.less';
-
-  @{theme-deepblue} {
-    .detail-card {
-      --image-inject_zq_card: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-5.png');
-      --image-inject_zq_card1: url('@/assets/images/themify/deepblue/home-container/configurable/gasInjection/9-7.png');
-    }
-  }
-
-  .detail-card {
-    --image-inject_zq_card: url('@/assets/images/gasInjection/9-5.png');
-    --image-inject_zq_card1: url('@/assets/images/gasInjection/9-7.png');
-    width: 100%;
-    height: 100%;
-
-    .card-title {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      height: 52px;
-      margin-bottom: 4px;
-      padding: 0px 20px;
-      font-size: 16px;
-      color: #fff;
-      background: var(--image-inject_zq_card) no-repeat;
-      background-size: 100% 100%;
-    }
-
-    .card-content {
-      width: 100%;
-      height: calc(100% - 56px);
-      border-radius: 15px;
-      /* 内阴影 */
-      box-shadow: inset 0px 0px 15px rgba(34, 142, 220, 0.8);
-      padding: 10px 15px;
-    }
-
-    .card-content-box {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      overflow-y: auto;
-    }
-
-    .card-content-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 100%;
-      // height: 26px;
-      margin: 5px 0px;
-      padding: 0px 15px;
-      color: #fff;
-      background: linear-gradient(to right, rgba(17, 50, 86, 1), rgba(17, 50, 86, 0.1));
-    }
-
-    .content-item-label {
-      color: #c3f5ff;
-    }
-
-    .content-item-value {
-      font-family: 'douyuFont';
-      color: #91faff;
-    }
-  }
-</style>

src/views/vent/home/configurable/components/gasInject/zqHistoryExport.vue

@@ -3,8 +3,13 @@
     <SvgIcon v-if="!isShowIcon" class="icon-style-back" size="32" name="modal-back" @click="handleBack" />
     <div class="nav-box">
       <div class="nav-search">
+        <!-- 时间查询选项 -->
+        <a-radio-group v-model:value="timerTabs" name="radioGroup" @change="changeRadio">
+          <a-radio value="9">按天</a-radio>
+          <a-radio value="8">按小时</a-radio>
+          <a-radio value="6">按分钟</a-radio>
+        </a-radio-group>
         <div class="search-item">
-          <span>时间:</span>
           <a-range-picker style="width:340px" :value="[searchData.startTime, searchData.endTime]"
             :show-time="{ format: 'HH:mm:ss' }" valueFormat="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
             @change="onRangeChange" />
@@ -64,6 +69,7 @@ let props = defineProps({
   }
 })
 
+let timerTabs = ref('9')
 let searchData = reactive({
   startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
   endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
@@ -84,6 +90,10 @@ let $emit = defineEmits(['handleBack'])
 function handleBack() {
   $emit('handleBack')
 }
+//时间间隔切换
+function changeRadio(val) {
+  timerTabs.value = val.target.value
+}
 //日期切换
 function onRangeChange(__, time) {
   searchData.startTime = time[0];
@@ -91,9 +101,9 @@ function onRangeChange(__, time) {
 }
 
 //注气详情table数据
-async function getHistoryTableData() {
+async function getHistoryTableData(skip) {
   if (props.detailType == 'history') {
-    let res = await listdays({ pageNo: pagination.current, pageSize: pagination.pageSize, gdeviceids: props.deviceId, strtype: props.strtype, ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: '8' })
+    let res = await listdays({ pageNo: pagination.current, pageSize: pagination.pageSize, gdeviceids: props.deviceId, strtype: props.strtype, ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: skip })
     console.log(res, 'tableData---')
     let data = res.datalist.records.map(el => {
       return {
@@ -113,13 +123,23 @@ async function getHistoryTableData() {
 //查询
 function getSearch() {
   pagination.current = 1
-  getHistoryTableData()
+  switch (timerTabs.value) {
+    case 'day':
+      getHistoryTableData(timerTabs.value)
+      break;
+    case 'hours':
+      getHistoryTableData(timerTabs.value)
+      break;
+    case 'minutes':
+      getHistoryTableData(timerTabs.value)
+      break;
+  }
 }
 //切换分页
 function changePage(val) {
   pagination.current = val.current;
   pagination.pageSize = val.pageSize;
-  getHistoryTableData()
+  getHistoryTableData(timerTabs.value)
 }
 //导出历史数据
 async function handleHisExport() {
@@ -152,7 +172,7 @@ function downFilePublic(content, fileName) {
 
 
 onMounted(() => {
-  getHistoryTableData()
+  getHistoryTableData(timerTabs.value)
 })
 </script>
 

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

@@ -713,10 +713,10 @@ export const getSystemApi = (params) => {
       paiqiPressure: zqData.readData.paiqiPressure,
     };
     //注气/抽采历史图表数据
-    let historyDataZq = reactive<any>({})
-    historyDataZq.hourData = await getZqSystem({ pageNo: 1, pageSize: 100, gdeviceids: zqData.deviceID, strtype: zqData.deviceType, skip: '8' })
-    historyDataZq.minitesData = await getZqSystem({ pageNo: 1, pageSize: 100, gdeviceids: zqData.deviceID, strtype: zqData.deviceType, skip: '6' })
-    res.historyDataZq = historyDataZq
+   //let historyDataZq = reactive<any>({})
+   //historyDataZq.hourData = await getZqSystem({ pageNo: 1, pageSize: 100, gdeviceids: zqData.deviceID, strtype: zqData.deviceType, skip: '8' })
+   //historyDataZq.minitesData = await getZqSystem({ pageNo: 1, pageSize: 100, gdeviceids: zqData.deviceID, strtype: zqData.deviceType, skip: '6' })
+   //res.historyDataZq = historyDataZq
     //装备运行状态与控制
     res.deviceStatusControl = {
       deviceId: zqData.deviceID,
@@ -759,10 +759,11 @@ export const getSystemApi = (params) => {
     res.pumpData = res.msgTxt[res.msgTxt.length - 1].empty_device[0].datalist[0]
     res.pumpDeviceId = res.pumpData.deviceID
     res.pumpStrtype = 'pump'
-    let historyDataCc = reactive<any>({})
-    historyDataCc.hourData = await getZqSystem({ pageNo: 1, pageSize: 100, gdeviceids: res.pumpData.deviceID, strtype: res.pumpData.deviceType, skip: '8' })
-    historyDataCc.minitesData = await getZqSystem({ pageNo: 1, pageSize: 100, gdeviceids: res.pumpData.deviceID, strtype: res.pumpData.deviceType, skip: '6' })
-    res.historyDataCc = historyDataCc
+    res.pumpStrtypes=res.pumpData.deviceType
+   // let historyDataCc = reactive<any>({})
+   // historyDataCc.hourData = await getZqSystem({ pageNo: 1, pageSize: 100, gdeviceids: res.pumpData.deviceID, strtype: res.pumpData.deviceType, skip: '8' })
+   // historyDataCc.minitesData = await getZqSystem({ pageNo: 1, pageSize: 100, gdeviceids: res.pumpData.deviceID, strtype: res.pumpData.deviceType, skip: '6' })
+   // res.historyDataCc = historyDataCc
     //应用场景信息
     res.workInfo = {
       strinstallpos: res.pumpData.strinstallpos || '-',

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

@@ -103,8 +103,9 @@ export const testConfigGasInject: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'historyDataZq',
+          readFrom: '',
           echartOption: {
+            types:'zq',
             showTime: true,
             tooltip: {
               trigger: 'axis',
@@ -334,8 +335,9 @@ export const testConfigGasInject: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'historyDataCc',
+          readFrom: '',
           echartOption: {
+            types:'cc',
             showTime: true,
             tooltip: {
               trigger: 'axis',

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

@@ -8,33 +8,18 @@
         <navMenu @toggleMenu="toggleMenu"></navMenu>
       </div>
       <template v-if="menuName == 'zjm'">
-        <div class="main-status">{{ runStatus=='1' ? '运行中' : '停止' }}</div>
-        <ModuleGasInject
-          v-for="cfg in configs"
-          :key="cfg.deviceType"
-          :show-style="cfg.showStyle"
-          :module-data="cfg.moduleData"
-          :module-name="cfg.moduleName"
-          :device-type="cfg.deviceType"
-          :data="data"
-          :visible="true"
-          :visible-detail="cfg.showDetail"
-        />
+        <div class="main-status">{{ runStatus == '1' ? '运行中' : '停止' }}</div>
+        <ModuleGasInject v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle"
+          :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
+          :visible="true" :visible-detail="cfg.showDetail" />
       </template>
       <template v-else>
-        <ModuleGasInject
-          v-for="cfg in configs"
-          :key="cfg.deviceType"
-          :show-style="cfg.showStyle"
-          :module-data="cfg.moduleData"
-          :module-name="cfg.moduleName"
-          :device-type="cfg.deviceType"
-          :data="data"
-          :visible="true"
-          :visible-detail="cfg.showDetail"
-        />
+        <ModuleGasInject v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle"
+          :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
+          :visible="true" :visible-detail="cfg.showDetail" />
       </template>
-      <div :class="{ 'vent-modal': menuName == 'zjm', 'vent-modal-1': menuName == 'syq' || menuName == 'zqxt' || menuName == 'ccxt' }">
+      <div
+        :class="{ 'vent-modal': menuName == 'zjm', 'vent-modal-1': menuName == 'syq' || menuName == 'zqxt' || menuName == 'ccxt' }">
         <a-spin class="spin" :spinning="!isInitModal" tip="正在加载，请稍等..." />
         <div class="modal-box" id="modalBox" v-if="isInitModal">
           <Three3D ref="three3D" :modalName="'zhuqi'" class="modal-3d" @success="initModalAnimate" />
@@ -45,280 +30,294 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, onUnmounted, ref, computed, nextTick, onBeforeMount, watch } from 'vue';
-  import { useInitConfigs, useInitPage } from './hooks/useInit';
-  import ModuleGasInject from './components/ModuleGasInject.vue';
-  import navMenu from './components/gasInject/navMenu.vue';
-  import Three3D from './components/three3D.vue';
-  import { getHomeData, getSystemApi } from './configurable.api';
-  // import { useRoute } from 'vue-router';
-  import { testConfigGasInject, testConfigGasInjectZq, testConfigGasInjectCc, testConfigGasInjectSy } from './configurable.data';
-  import { animateCamera } from '/@/utils/threejs/util';
-  import { modalAnimate } from './threejs/gasInjection';
-  // import * as dat from 'dat.gui';
-  // const gui = new dat.GUI();
-  // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+import { onMounted, onUnmounted, ref, computed, nextTick, onBeforeMount, watch } from 'vue';
+import { useInitConfigs, useInitPage } from './hooks/useInit';
+import ModuleGasInject from './components/ModuleGasInject.vue';
+import navMenu from './components/gasInject/navMenu.vue';
+import Three3D from './components/three3D.vue';
+import { getHomeData, getSystemApi } from './configurable.api';
+// import { useRoute } from 'vue-router';
+import { testConfigGasInject, testConfigGasInjectZq, testConfigGasInjectCc, testConfigGasInjectSy } from './configurable.data';
+import { animateCamera } from '/@/utils/threejs/util';
+import { modalAnimate } from './threejs/gasInjection';
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
 
-  const { configs, fetchConfigs } = useInitConfigs();
-  const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系统');
-  const three3D = ref(null);
-  let interval: number | undefined;
-  //当前选中菜单项
-  let menuName = ref('zjm');
-  //运行状态
-  let runStatus=ref('')
-  const isInitModal = ref(false);
+const { configs, fetchConfigs } = useInitConfigs();
+const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系统');
+const three3D = ref(null);
+let interval: number | undefined;
+//当前选中菜单项
+let menuName = ref('zjm');
+//运行状态
+let runStatus = ref('')
+const isInitModal = ref(false);
 
-  //选项切换
-  function toggleMenu(param) {
-    menuName.value = param;
-    switch (menuName.value) {
-      case 'zjm':
-        configs.value = testConfigGasInject;
-        break;
-      // case 'syq':
-      //   configs.value = testConfigGasInjectSy;
-      //   break;
-      case 'zqxt':
-        configs.value = testConfigGasInjectZq;
-        break;
-      case 'ccxt':
-        configs.value = testConfigGasInjectCc;
-        break;
-    }
-
-    // 刷新/
-    nextTick(async () => {
-      three3D.value?.resizeRenderer();
-      const modal = three3D.value.getModal();
-      if (modal) {
-        const oldCamera = modal.camera;
-        const oldCameraPosition = { x: oldCamera.position.x, y: oldCamera.position.y, z: oldCamera.position.z };
-        if (param == 'zqxt') {
-          const newP = { x: -30.683057066775824, y: -0.9161184591449614, z: 39.6716716890212 };
-          const newT = { x: 11.204235206978213, y: -1.0276506907362775, z: 40.37084673927868 };
-          await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
-        } else if (param == 'zjm') {
-          const newP = { x: -45.69228602978097, y: 49.59721939545517, z: 2.6454258202266985 };
-          const newT = { x: 9.289291846942458, y: -21.608842010051386, z: 2.7675348357947906 };
-          await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
-        } else {
-          const newP = { x: -43.18945276107877, y: 40.44347648044, z: 0.059975838354020664 };
-          const newT = { x: 6.431421158296241, y: -23.819993211059913, z: 0.17017939135402457 };
-          await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
-        }
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor() {
+  timer = setTimeout(
+    async () => {
+      getSystemApi({ devicetype: 'sys', systemID: '2036323791827165185' }).then(updateData);
+      if (timer) {
+        timer = null;
       }
-    });
-  }
-
-  function initModalAnimate(modal) {
-    modalAnimate(modal, data);
-    modal.isRender = true;
-  }
+      getMonitor();
+    },
+    10000
+  );
 
-  onMounted(() => {
-    fetchConfigs('gas_injection').then(() => {
+}
+//选项切换
+function toggleMenu(param) {
+  menuName.value = param;
+  switch (menuName.value) {
+    case 'zjm':
       configs.value = testConfigGasInject;
-      getSystemApi({ devicetype: 'sys', systemID: '2036323791827165185' }).then(updateData);
-    });
-    interval = setInterval(() => {
-      getSystemApi({ devicetype: 'sys', systemID: '2036323791827165185' }).then(updateData);
-    }, 10000);
-  });
-
-  watch(
-    () => data.value,
-    (newData, oldData) => {
-      if (newData && !Object.keys(oldData).length) {
-        isInitModal.value = true;
-        runStatus.value=newData.deviceStatusControl.runStatus
+      break;
+    // case 'syq':
+    //   configs.value = testConfigGasInjectSy;
+    //   break;
+    case 'zqxt':
+      configs.value = testConfigGasInjectZq;
+      break;
+    case 'ccxt':
+      configs.value = testConfigGasInjectCc;
+      break;
+  }
 
+  // 刷新/
+  nextTick(async () => {
+    three3D.value?.resizeRenderer();
+    const modal = three3D.value.getModal();
+    if (modal) {
+      const oldCamera = modal.camera;
+      const oldCameraPosition = { x: oldCamera.position.x, y: oldCamera.position.y, z: oldCamera.position.z };
+      if (param == 'zqxt') {
+        const newP = { x: -30.683057066775824, y: -0.9161184591449614, z: 39.6716716890212 };
+        const newT = { x: 11.204235206978213, y: -1.0276506907362775, z: 40.37084673927868 };
+        await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
+      } else if (param == 'zjm') {
+        const newP = { x: -45.69228602978097, y: 49.59721939545517, z: 2.6454258202266985 };
+        const newT = { x: 9.289291846942458, y: -21.608842010051386, z: 2.7675348357947906 };
+        await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
+      } else {
+        const newP = { x: -43.18945276107877, y: 40.44347648044, z: 0.059975838354020664 };
+        const newT = { x: 6.431421158296241, y: -23.819993211059913, z: 0.17017939135402457 };
+        await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
       }
     }
-  );
+  });
+}
+
+function initModalAnimate(modal) {
+  modalAnimate(modal, data);
+  modal.isRender = true;
+}
 
-  onUnmounted(() => {
-    clearInterval(interval);
+onMounted(() => {
+  fetchConfigs('gas_injection').then(() => {
+    configs.value = testConfigGasInject;
+    getSystemApi({ devicetype: 'sys', systemID: '2036323791827165185' }).then(updateData);
   });
-</script>
+ getMonitor()
+});
 
-<style lang="less" scoped>
-  @import '/@/design/theme.less';
+watch(
+  () => data.value,
+  (newData, oldData) => {
+    if (newData && !Object.keys(oldData).length) {
+      isInitModal.value = true;
+      runStatus.value = newData.deviceStatusControl.runStatus
 
-  @{theme-deepblue} {
-    .company-home {
-      --image-modal-top: url('@/assets/images/gasInjection/1-1.png');
-      --image-modal-status: url('@/assets/images/gasInjection/3-1.png');
-      --image-modal-center: url('@/assets/images/gasInjection/1-2.png');
     }
   }
+);
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
 
+@{theme-deepblue} {
   .company-home {
     --image-modal-top: url('@/assets/images/gasInjection/1-1.png');
     --image-modal-status: url('@/assets/images/gasInjection/3-1.png');
     --image-modal-center: url('@/assets/images/gasInjection/1-2.png');
-    width: 100%;
-    height: 100%;
-    color: @white;
-    position: relative;
-    background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
-
-    .top-bg {
-      width: 100%;
-      height: 66px;
-      background: var(--image-modal-top) no-repeat center;
-      background-size: 100% 100%;
-      position: absolute;
-      z-index: 1;
-
-      .main-title {
-        height: 66px;
-        font-family: 'douyuFont';
-        font-size: 20px;
-        letter-spacing: 2px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
+  }
+}
 
-      .top-nav {
-        position: absolute;
-        top: 0;
-        width: 880px;
-        height: 100%;
-        display: flex;
-        justify-content: flex-start;
-      }
-    }
+.company-home {
+  --image-modal-top: url('@/assets/images/gasInjection/1-1.png');
+  --image-modal-status: url('@/assets/images/gasInjection/3-1.png');
+  --image-modal-center: url('@/assets/images/gasInjection/1-2.png');
+  width: 100%;
+  height: 100%;
+  color: @white;
+  position: relative;
+  background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
 
-    .main-container {
-      position: absolute;
-      top: 66px;
-      width: 100%;
-      height: calc(100% - 66px);
-      padding: 0px 10px;
-      box-sizing: border-box;
-    }
+  .top-bg {
+    width: 100%;
+    height: 66px;
+    background: var(--image-modal-top) no-repeat center;
+    background-size: 100% 100%;
+    position: absolute;
+    z-index: 1;
 
-    .main-status {
+    .main-title {
+      height: 66px;
+      font-family: 'douyuFont';
+      font-size: 20px;
+      letter-spacing: 2px;
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 440px;
-      height: 80px;
-      font-size: 18px;
-      font-family: 'douyuFont';
-      margin: 10px 0px;
-      background: var(--image-modal-status);
-      background-size: 100% 100%;
-    }
-
-    .module-dropdown {
-      padding: 10px;
-      background-image: @vent-configurable-dropdown;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
-      color: @vent-font-color;
-      position: absolute;
-      top: 70px;
-      right: 460px;
-    }
-
-    .modal-box {
-      width: calc(100% - 20px);
-      height: calc(100% - 20px);
-      position: relative;
-      pointer-events: auto;
-      margin: 10px;
-    }
-
-    .module-dropdown-original {
-      padding: 10px;
-      background-image: @vent-configurable-dropdown;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
-      color: @vent-font-color;
-      position: absolute;
-      top: 70px;
-      right: 460px;
     }
 
-    .module-trigger-button {
-      color: @vent-font-color;
-      background-image: @vent-configurable-dropdown;
-      border: none;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
-    }
-
-    .nav-cards {
+    .top-nav {
       position: absolute;
-      left: 50%;
-      top: 0px;
-      transform: translate(-50%, 0);
-      width: 691px;
-      height: 58px;
-      background: var(--image-modal-center) no-repeat;
-      background-size: 100% 100%;
+      top: 0;
+      width: 880px;
+      height: 100%;
+      display: flex;
+      justify-content: flex-start;
     }
   }
 
-  :deep(.loading-box) {
-    position: unset;
-  }
-
-  .modal-box {
+  .main-container {
+    position: absolute;
+    top: 66px;
     width: 100%;
-    height: 100%;
-    position: relative;
-    pointer-events: auto;
+    height: calc(100% - 66px);
+    padding: 0px 10px;
+    box-sizing: border-box;
   }
 
-  // 试验区模型区域样式
-  .syq-modal {
-    position: absolute;
-    top: 135px;
-    right: 20px;
-    width: calc(100% - 510px);
-    height: 515px;
-    background: url('@/assets/images/gasInjection/syq/modal-bg.png') no-repeat;
+  .main-status {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 440px;
+    height: 80px;
+    font-size: 18px;
+    font-family: 'douyuFont';
+    margin: 10px 0px;
+    background: var(--image-modal-status);
     background-size: 100% 100%;
   }
 
-  .vent-modal {
+  .module-dropdown {
+    padding: 10px;
+    background-image: @vent-configurable-dropdown;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+    color: @vent-font-color;
     position: absolute;
     top: 70px;
-    left: 50%;
-    transform: translate(-50%, 0px);
-    width: calc(100% - 920px);
-    height: 500px;
-    background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
-    background-size: 100% 100%;
+    right: 460px;
+  }
+
+  .modal-box {
+    width: calc(100% - 20px);
+    height: calc(100% - 20px);
+    position: relative;
     pointer-events: auto;
-    // padding: 15px;
-    box-sizing: border-box;
-    overflow: hidden;
+    margin: 10px;
   }
 
-  .vent-modal-1 {
+  .module-dropdown-original {
+    padding: 10px;
+    background-image: @vent-configurable-dropdown;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+    color: @vent-font-color;
     position: absolute;
     top: 70px;
-    left: 460px;
-    width: calc(100% - 470px);
-    height: 480px;
-    background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
-    background-size: 100% 100%;
-    pointer-events: auto;
-    padding: 10px 15px;
-    box-sizing: border-box;
-    overflow: hidden;
+    right: 460px;
   }
 
-  .modal-3d {
-    width: 100%;
+  .module-trigger-button {
+    color: @vent-font-color;
+    background-image: @vent-configurable-dropdown;
+    border: none;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
   }
-  .spin {
-    width: 100%;
+
+  .nav-cards {
     position: absolute;
-    top: 50%;
-    left: 0;
-    z-index: 0;
+    left: 50%;
+    top: 0px;
+    transform: translate(-50%, 0);
+    width: 691px;
+    height: 58px;
+    background: var(--image-modal-center) no-repeat;
+    background-size: 100% 100%;
   }
+}
+
+:deep(.loading-box) {
+  position: unset;
+}
+
+.modal-box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  pointer-events: auto;
+}
+
+// 试验区模型区域样式
+.syq-modal {
+  position: absolute;
+  top: 135px;
+  right: 20px;
+  width: calc(100% - 510px);
+  height: 515px;
+  background: url('@/assets/images/gasInjection/syq/modal-bg.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.vent-modal {
+  position: absolute;
+  top: 70px;
+  left: 50%;
+  transform: translate(-50%, 0px);
+  width: calc(100% - 920px);
+  height: 500px;
+  background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
+  background-size: 100% 100%;
+  pointer-events: auto;
+  // padding: 15px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.vent-modal-1 {
+  position: absolute;
+  top: 70px;
+  left: 460px;
+  width: calc(100% - 470px);
+  height: 480px;
+  background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
+  background-size: 100% 100%;
+  pointer-events: auto;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.modal-3d {
+  width: 100%;
+}
+
+.spin {
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  z-index: 0;
+}
 </style>