feat: 锡林浩特分支 - 图表静态布局

src/assets/svgs/menu/xiht-analyse.svg

@@ -0,0 +1,64 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="15" cy="15" r="15" fill="url(#paint0_linear_3308_126)"/>
+<path d="M13.8327 7.54211L9.10856 8.80793C7.05656 9.35776 6.16087 10.9082 6.71043 12.9592L7.97411 17.6754C8.52518 19.732 10.0761 20.6269 12.1281 20.0771L16.8466 18.8128C18.8986 18.2629 19.7943 16.7124 19.2447 14.6614L17.9795 9.93968C17.4356 7.88719 15.8847 6.99227 13.8327 7.54211Z" fill="url(#paint1_linear_3308_126)"/>
+<g filter="url(#filter0_b_3308_126)">
+<path d="M19.4631 10H13.8736C11.4457 10 9.99835 11.4467 9.99835 13.8733V19.4533C9.99835 21.8867 11.4457 23.3333 13.8736 23.3333H19.4564C21.8843 23.3333 23.3317 21.8867 23.3317 19.46V13.8733C23.3383 11.4467 21.8909 10 19.4631 10Z" fill="url(#paint2_linear_3308_126)" fill-opacity="0.4"/>
+<path d="M23.1233 13.8728V13.8733V19.46C23.1233 20.6319 22.7746 21.5422 22.1572 22.1593C21.5397 22.7765 20.6289 23.125 19.4564 23.125H13.8736C12.7011 23.125 11.7903 22.7765 11.1729 22.1586C10.5554 21.5407 10.2067 20.6287 10.2067 19.4533V13.8733C10.2067 12.7015 10.5554 11.7912 11.1728 11.174C11.7903 10.5569 12.7011 10.2083 13.8736 10.2083H19.4631C20.6356 10.2083 21.5464 10.5569 22.1629 11.1739C22.7795 11.7909 23.1265 12.701 23.1233 13.8728Z" stroke="url(#paint3_linear_3308_126)" stroke-width="0.416667"/>
+</g>
+<g filter="url(#filter1_d_3308_126)">
+<path d="M13.2479 21.2692C13.5213 21.2692 13.7481 21.0425 13.7481 20.7692V19.3892C13.7481 19.1158 13.5213 18.8892 13.2479 18.8892C12.9744 18.8892 12.7476 19.1158 12.7476 19.3892V20.7692C12.7476 21.0425 12.9744 21.2692 13.2479 21.2692Z" fill="url(#paint4_linear_3308_126)" shape-rendering="crispEdges"/>
+<path d="M16.6629 21.2692C16.9364 21.2692 17.1631 21.0425 17.1631 20.7692V18.0025C17.1631 17.7292 16.9364 17.5025 16.6629 17.5025C16.3894 17.5025 16.1626 17.7292 16.1626 18.0025V20.7692C16.1626 21.0425 16.3894 21.2692 16.6629 21.2692Z" fill="url(#paint5_linear_3308_126)" shape-rendering="crispEdges"/>
+<path d="M20.0779 21.2692C20.3514 21.2692 20.5782 21.0425 20.5782 20.7692V16.6225C20.5782 16.3492 20.3514 16.1225 20.0779 16.1225C19.8045 16.1225 19.5777 16.3492 19.5777 16.6225V20.7692C19.5777 21.0425 19.8045 21.2692 20.0779 21.2692Z" fill="url(#paint6_linear_3308_126)" shape-rendering="crispEdges"/>
+<path d="M20.0779 15.0158C20.3514 15.0158 20.5782 14.7892 20.5782 14.5158H20.5848V12.5625C20.5848 12.5558 20.5782 12.5492 20.5782 12.5425C20.5782 12.5025 20.5648 12.4692 20.5582 12.4358C20.5515 12.4025 20.5515 12.3758 20.5382 12.3492C20.5315 12.3225 20.5115 12.3025 20.4915 12.2758C20.4715 12.2492 20.4514 12.2225 20.4248 12.1958C20.4181 12.1958 20.4181 12.1892 20.4114 12.1825C20.3914 12.1692 20.3714 12.1625 20.3514 12.1492C20.318 12.1292 20.2914 12.1092 20.258 12.0958C20.2247 12.0825 20.1913 12.0825 20.158 12.0758C20.1313 12.0758 20.1113 12.0625 20.0846 12.0625H18.1303C17.8568 12.0625 17.63 12.2892 17.63 12.5625C17.63 12.8358 17.8568 13.0625 18.1303 13.0625H18.964C17.3766 14.7292 15.3756 15.9092 13.1278 16.4692C12.8543 16.5358 12.6942 16.8092 12.7609 17.0758C12.821 17.3025 13.0211 17.4558 13.2479 17.4558C13.2879 17.4558 13.3279 17.4558 13.3679 17.4425C15.7491 16.8492 17.8768 15.6158 19.5777 13.8692V14.5158C19.5777 14.7892 19.8045 15.0158 20.0779 15.0158Z" fill="url(#paint7_linear_3308_126)" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_b_3308_126" x="6.66502" y="6.66667" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1.66667"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_3308_126"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_3308_126" result="shape"/>
+</filter>
+<filter id="filter1_d_3308_126" x="11.9125" y="11.2292" width="11.1723" height="12.54" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.833333" dy="0.833333"/>
+<feGaussianBlur stdDeviation="0.833333"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.889855 0 0 0 0 0.889855 0 0 0 0 0.889855 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3308_126"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3308_126" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_3308_126" x1="27.5" y1="11.5" x2="6.5" y2="23" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEC85D"/>
+<stop offset="1" stop-color="#EC9107"/>
+</linearGradient>
+<linearGradient id="paint1_linear_3308_126" x1="6.87283" y1="10.7749" x2="21.2995" y2="21.0459" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.5"/>
+</linearGradient>
+<linearGradient id="paint2_linear_3308_126" x1="16.665" y1="23.3333" x2="16.665" y2="10.06" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#FFB45B" stop-opacity="0.7"/>
+</linearGradient>
+<linearGradient id="paint3_linear_3308_126" x1="11.4858" y1="11.8523" x2="22.4382" y2="22.8047" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.7"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint4_linear_3308_126" x1="20.4961" y1="12.1458" x2="13.4128" y2="22.5625" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.75"/>
+</linearGradient>
+<linearGradient id="paint5_linear_3308_126" x1="20.4961" y1="12.1458" x2="13.4128" y2="22.5625" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.75"/>
+</linearGradient>
+<linearGradient id="paint6_linear_3308_126" x1="20.4961" y1="12.1458" x2="13.4128" y2="22.5625" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.75"/>
+</linearGradient>
+<linearGradient id="paint7_linear_3308_126" x1="20.4961" y1="12.1458" x2="13.4128" y2="22.5625" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.75"/>
+</linearGradient>
+</defs>
+</svg>

src/components/Layout/TheLogo.vue

@@ -21,7 +21,7 @@ const handleClick = () => router.push('/');
       <div class="w-[28px] h-[28px]">
         <SvgIcon name="common-logo" size="28"></SvgIcon>
       </div>
-      <span class="block w-[70px] font-[10px] text-left">LibraAI智能体运营平台</span>
+      <span class="block w-[80px] font-[10px] text-left">人工智能运营体 锡林浩特水务集团</span>
     </div>
     <!-- 图标 -->
     <div class="icon-group flex items-center justify-center"  @click="changeCollapse" v-show="!subMenuCollapse">

src/components/Layout/TheMenu.vue

@@ -32,73 +32,14 @@ function renderLabel (val, url) {
 
 const menuOptions = [
   {
-    label: () => renderLabel('智慧总控'),
-    icon: renderIcon({ name: 'menu-control' }),
+    label: () => renderLabel('数据分析'),
+    icon: renderIcon({ name: 'menu-xiht-analyse' }),
     key: '/'
   },
   {
-    label: () => renderLabel('专家问答'),
-    icon: renderIcon({ name: 'menu-answers' }),
-    key: '/answer'
-  },
-  {
-    label: () => renderLabel('工艺管控'),
-    icon: renderIcon({ name: 'menu-analyse' }),
-    key: '/analyse',
-    children: [
-      {
-        label: '水质报警',
-        icon: renderChildrenIcon({ name: 'menu-analyse-water' }),
-        key: '/water-warn',
-      },
-      {
-        label: '生化报警',
-        icon: renderChildrenIcon({ name: 'menu-analyse-pymol' }),
-        key: '/pymol-warn',
-      },
-      {
-        label: '预测预警',
-        icon: renderChildrenIcon({ name: 'menu-analyse-notice' }),
-        key: '/forecast-warn',
-      },
-      {
-        label: '智能工单',
-        icon: renderChildrenIcon({ name: 'menu-analyse-order' }),
-        key: '/work-order',
-      }
-    ]
-  },
-  {
-    label: () => renderLabel('成本管控'),
-    icon: renderIcon({ name: 'menu-cost-control' }),
-    key: '/control',
-    children: [
-      {
-        label: '智适应碳源投加',
-        icon: renderChildrenIcon({ name: 'menu-cost-drug' }),
-        key: 'medicinal',
-      },
-      // {
-      //   label: '精准曝气',
-      //   icon: renderChildrenIcon({ name: 'menu-cost-accurate' }),
-      //   key: 'normal-2',
-      // },
-      // {
-      //   label: '微生物镜检',
-      //   icon: renderChildrenIcon({ name: 'menu-cost-microorganism' }),
-      //   key: 'normal-3',
-      // },
-      {
-        label: '碳排放管理',
-        icon: renderChildrenIcon({ name: 'menu-carbon-emission' }),
-        key: '/carbon',
-      },
-    ]
-  },
-  {
-    label: () => renderLabel('智慧办公'),
-    icon: renderIcon({ name: 'menu-work' }),
-    key: '/work'
+    label: () => renderLabel('智适应碳源投加'),
+    icon: renderIcon({ name: 'menu-xiht-control' }),
+    key: '/medicinal',
   },
   {
     label: () => renderLabel('用户中心'),

src/components/Layout/ThePublicLayout.vue

@@ -20,11 +20,11 @@ const handleJump = (val) => {
 }
 
 onMounted(() => {
-  initWraingListData();
-  setInterval(_ => initWraingListData(), 60 * 60 * 1000)
+  // initWraingListData();
+  // setInterval(_ => initWraingListData(), 60 * 60 * 1000)
 })
 
-onUnmounted(() => clearInterval(initWraingListData))
+// onUnmounted(() => clearInterval(initWraingListData))
 
 
 </script>

src/components/Layout/TheUserAvatar.vue

@@ -10,8 +10,7 @@ const RenderUserAvatar = ({ store }) => {
   const user = store.userInfo;
 
   const clearLoginStatus = async () => {
-    await userApi.postLogout();
-    store.clearUserInfo();
+    localStorage.removeItem("isLogin");
     router.push("/login");
   }
 
@@ -20,10 +19,10 @@ const RenderUserAvatar = ({ store }) => {
       label: '个人中心',
       key: "/user"
     },
-    {
-      label: '修改密码',
-      key: "edit"
-    },
+    // {
+    //   label: '修改密码',
+    //   key: "edit"
+    // },
     {
       label: '退出登录',
       key: "logout"
@@ -66,8 +65,8 @@ const RenderUserAvatar = ({ store }) => {
     ),
     trigger: () => (
       <div class="flex items-center cursor-pointer">
-        <img src={user.avatar} alt="" class="w-[32px] h-[32px] mr-[10px] rounded-[50%]" />
-        <span class="text-[#272D35] text-[12px]">{user.nickName}</span>
+        <img src="https://static.fuxicarbon.com/bigModel/pc/xlht-icon.svg" alt="" class="w-[32px] h-[32px] mr-[10px] rounded-[50%] shrink-0" />
+        <span class="text-[#272D35] text-[12px]">锡林浩特</span>
       </div>
     )
   };

src/components/Layout/userTop.vue

@@ -39,8 +39,8 @@ const changeVoiceStatus = () => {
   <!-- <SvgIcon :name="voiceName" size="24" class="cursor-pointer" @click="changeVoiceStatus"></SvgIcon> -->
    <!-- 分割线 -->
   <!-- <div class="h-[24px] border-r-[1px] border-color-[#D3D0E1]"></div> -->
-  <NSelect v-model:value="selectValue" class="w-[114px]" size="medium" :options="options"
-    :consistent-menu-width="false" />
+  <!-- <NSelect v-model:value="selectValue" class="w-[114px]" size="medium" :options="options"
+    :consistent-menu-width="false" /> -->
   <TheUserAvatar></TheUserAvatar>
   <editPassword></editPassword>
 </template>

src/components/User/userEdit.vue

@@ -52,50 +52,50 @@ const submit = async () => {
   <div class="manage-user user-box">
     <div class="form-wrap">
       <n-form ref="formRef" :model="model" label-placement="left" label-align="left" :label-width="72">
-        <n-form-item label="选择头像">
+        <n-form-item label="用户头像">
           <div class="avatar-wrap">
-            <div class="replace">更换<input class="file" type="file" @change="changeImg"></input></div>
+            <!-- <div class="replace">更换<input class="file" type="file" @change="changeImg"></input></div> -->
             <div class="avatar-wrap-box">
-              <figure class="avatar"><img :src="tempAvatar" alt=""></figure>
-              <span>头像尺寸64*64</span>
+              <figure class="avatar"><img src="https://static.fuxicarbon.com/bigModel/pc/xlht-icon.svg" alt=""></figure>
+              <!-- <span>头像尺寸64*64</span> -->
             </div>
           </div>
         </n-form-item>
         <n-form-item label="用户名称">
           <div class="content">
-            <span>{{ user.userName }}</span>
-            <span class="des">可用此账号登录</span>
+            <span>admin</span>
+            <!-- <span class="des">可用此账号登录</span> -->
           </div>
         </n-form-item>
         <n-form-item label="手机号码">
           <div class="content">
-            <span>{{ user.phonenumber }}</span>
-            <span class="des">可用此账号登录</span>
+            <span>金龙后面提供</span>
+            <!-- <span class="des">可用此账号登录</span> -->
           </div>
         </n-form-item>
         <n-form-item label="姓名">
           <div class="content">
-            <span>{{ user.nickName }}</span>
+            <span>锡林浩特</span>
           </div>
         </n-form-item>
         <n-form-item label="职位">
           <div class="content">
-            <span>{{ user.position }}</span>
+            <span>管理员</span>
           </div>
         </n-form-item>
         <n-form-item label="水厂" v-if="user.dept">
           <div class="content">
-            信义污水厂
-            <span class="des">设置为默认登录</span>
+            锡林浩特水厂
+            <!-- <span class="des">设置为默认登录</span> -->
           </div>
         </n-form-item>
-        <n-form-item label="报警手机">
+        <!-- <n-form-item label="报警手机">
           <div class="content">
             <span>{{ user.emergencyPhone }}</span>
           </div>
-        </n-form-item>
+        </n-form-item> -->
       </n-form>
-      <n-button attr-type="button" class="submit" @click="submit" :loading="model.submitStatus">提交</n-button>
+      <!-- <n-button attr-type="button" class="submit" @click="submit" :loading="model.submitStatus">提交</n-button> -->
     </div>
   </div>
 </template>

src/router/index.js

@@ -1,138 +1,40 @@
-import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
+import {
+  createRouter,
+  createWebHistory,
+  createWebHashHistory,
+} from "vue-router";
 
 const constantRouterMap = [
   {
-    path: '/',
-    name: 'Scrren',
-    component: () => import('@/views/screen/ScreenView.vue'),
-    meta: {
-      title: "智慧总控"
-    }
-  },
-  {
-    path: '/carbon',
-    name: 'carbon',
-    component: () => import('@/views/carbon/index.vue'),
-    meta: {
-      title: "碳排放"
-    }
-  },
-  // {
-  //   path: '/test',
-  //   name: 'TempTest',
-  //   component: () => import('@/views/screen/ScreenView2.vue'),
-  //   meta: {
-  //     title: "测试建模文件"
-  //   }
-  // },
-
-  /** 
-   * 模版筛选使用
-   * 注释时间： 2024年08月05日15:03:02
-   * 
-   * */ 
-  // {
-  //   path: '/count1',
-  //   name: 'count1',
-  //   component: () => import('@/views/count/index1.vue'),
-  //   meta: {
-  //     title: "临时统计1"
-  //   }
-  // },
-  // {
-  //   path: '/count2',
-  //   name: 'count2',
-  //   component: () => import('@/views/count/index2.vue'),
-  //   meta: {
-  //     title: "临时统计2"
-  //   }
-  // },
-  // {
-  //   path: '/count3',
-  //   name: 'count3',
-  //   component: () => import('@/views/count/index3.vue'),
-  //   meta: {
-  //     title: "临时统计3"
-  //   }
-  // },
-  {
-    path: '/env',
-    name: 'Env',
-    component: () => import('@/views/env/index.vue'),
-    meta: {
-      title: "环境区分"
-    }
-  },
-  {
-    path: '/login',
-    name: 'Login',
-    component: () => import('@/views/login/LoginView.vue'),
+    path: "/login",
+    name: "Login",
+    component: () => import("@/views/login/LoginView.vue"),
     meta: {
-      title: "登录"
-    }
+      title: "登录",
+    },
   },
   {
-    path: '/',
-    name: 'theBaseLayout',
-    component: () => import('@/components/Layout/ThePublicLayout.vue'),
+    path: "/",
+    name: "theBaseLayout",
+    component: () => import("@/components/Layout/ThePublicLayout.vue"),
     children: [
       {
-        path: 'answer',
-        name: 'Answer',
-        component: () => import('@/views/answer/AnswerView.vue'),
+        path: "/",
+        name: "AnalyseView",
+        component: () => import("@/views/xlht/AnalyseView.vue"),
         meta: {
-          title: '专家问答'
-        }
+          title: "数据分析",
+        },
       },
       {
-        path: 'water-warn',
-        name: 'WaterWarn',
-        component: () => import('@/views/analyse/WaterView.vue'),
+        path: "medicinal",
+        name: "MedicinalView",
+        component: () => import("@/views/control/MedicinalView.vue"),
         meta: {
-          title: '水质报警'
-        }
+          title: "智适应碳源投加",
+        },
       },
-      {
-        path: 'pymol-warn',
-        name: 'PymolWarn',
-        component: () => import('@/views/analyse/PymolView.vue'),
-        meta: {
-          title: '生化报警'
-        }
-      },
-      {
-        path: 'forecast-warn',
-        name: 'ForecastView',
-        component: () => import('@/views/analyse/ForecastView.vue'),
-        meta: {
-          title: '预测预警'
-        }
-      },
-      {
-        path: 'work-order',
-        name: 'WorKOrder',
-        component: () => import('@/views/analyse/WorkOrder.vue'),
-        meta: {
-          title: '智慧工单'
-        }
-      },
-      {
-        path: 'work',
-        name: 'WorkView',
-        component: () => import('@/views/work/WorkView.vue'),
-        meta: {
-          title: '智能办公'
-        }
-      },
-      {
-        path: 'medicinal',
-        name: 'MedicinalView',
-        component: () => import('@/views/control/MedicinalView.vue'),
-        meta: {
-          title: '智适应碳源投加'
-        }
-      },
-    ]
+    ],
   },
   {
     path: '/',
@@ -149,12 +51,25 @@ const constantRouterMap = [
       },
     ]
   },
-]
+];
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: constantRouterMap,
-  scrollBehavior: () => ({ left: 0, top: 0 })
-})
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+});
+
+router.beforeEach((to, from, next) => {
+
+  if ( localStorage.getItem('isLogin') ) {
+    next();
+  } else {
+    if (to.path === '/login') {
+      next();
+    } else {
+      next('/login');
+    }
+  }
+});
 
 export default router;

src/views/login/LoginView.vue

@@ -27,46 +27,55 @@ const handleSubmit = async () => {
     return errorMsg.value = '请输入登录密码'
   }
 
-  try {
-    loading.value = true;
-    const { token } = await userApi.postLogin({ username, password, type: 0 });
-    userStore.setUserInfo({ token });
-    const { user } = await userApi.getUserInfo();
+  loading.value = true;
+
+  setTimeout(() => {
+    loading.value = false;
+
+    if ( username !== 'admin' || password !== 'admin123' ) {
+      return errorMsg.value = '账号或者密码输入有误'
+    }
+
     errorMsg.value = '';
-    userStore.setUserInfo({ ...user });
+
     router.push("/");
-  }
-  catch (error) {
-    errorMsg.value = error.msg;
-  }
-  finally {
-    loading.value = false;
-  }
+
+    localStorage.setItem("isLogin", new Date().getTime());
+
+  }, 1 * 1000)
+
+  // try {
+  //   loading.value = true;
+  //   const { token } = await userApi.postLogin({ username, password, type: 0 });
+  //   userStore.setUserInfo({ token });
+  //   const { user } = await userApi.getUserInfo();
+  //   errorMsg.value = '';
+  //   userStore.setUserInfo({ ...user });
+  //   router.push("/");
+  // }
+  // catch (error) {
+  //   errorMsg.value = error.msg;
+  // }
+  // finally {
+  //   loading.value = false;
+  // }
 }
 
 </script>
 
 <template>
   <div class="login-viewport">
-    <div class="logo absolute w-[106px] space-x-[6px] h-[28px] top-[14px] left-[20px]">
-      <img src="@/assets/svgs/common/logo.svg" alt="logo" />
-      <span class="text">LibraAI智能体运营平台</span>
-    </div>
 
-    <main class="main flex items-center space-x-[98px]">
-      <div class="text-[#07233C] pb-[90px]">
-        <div class="text-title mb-[8px] text-[36px] font-bold leading-[44px]">
-          <p class="text-[#2454FF]">LibraAI</p>
-          <p>首家水务领域垂直大模型</p>
-        </div>
-        <p class="w-[540px] text-[18px] text-justify leading-[26px]">
-          赋能水务行业，将海量水务数据与大模型能力相融合 <br>
-          为水务行业主体提供创新应用和全面支持
-        </p>
-      </div>
+    <div class="tips-wrapper">
+      <ul class="tips-inner">
+        <li class="title">Libra 智能体运营平台<br />锡林浩特水务集团</li>
+        <li class="sub-title">同建绿色温馨家园，共享清澈碧水蓝天</li>
+      </ul>
+    </div>
 
-      <div class="login-form w-[442px] h-[454px] bg-white rounded-[16px]">
-        <p class="title pl-[2px] mb-[30px] text-[28px] leading-[40px] font-bold">系统登录</p>
+    <div class="login-wrapper">
+      <div class="login-form w-[442px] h-[454px]">
+        <p class="title pl-[2px] mb-[30px] text-[28px] text-[#fff] leading-[40px] font-bold">欢迎登录</p>
         <div class="form-inner w-full">
           <ul class="form-inp-list">
             <li class="inp-item-inner">
@@ -85,29 +94,56 @@ const handleSubmit = async () => {
         </div>
         <NButton block color="#2454FF" size="large" :loading="loading" @click="handleSubmit">登 录</NButton>
       </div>
-    </main>
+    </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-.n-button {
-  height: 54px;
-
-  &:hover {
-    background: #1d43cc;
-  }
-}
 
 .login-viewport {
   position: relative;
-  @include flex(x, center, center);
+  @include flex(x, center, between);
   height: 100vh;
-  background: url("@/assets/images/login/bg-login.png") no-repeat;
-  background-size: 100% 100%;
+  background: url("@/assets/images/login/bg-login-xlht.png") center center no-repeat;
+  background-size: cover;
   overflow: hidden;
+  min-width: 1100px;
+
+  .tips-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .tips-inner {
+      position: absolute;
+      top: 102px;
+      left: 74px;
+      line-height: 46px;
+      color: #fff;
+
+      .title {
+        font-size: 36px;
+        font-family: AlimamaShuHeiTi;
+      }
+
+      .sub-title {
+        font-size: 24px;
+      }
+    }
+  }
+
+  .login-wrapper {
+    @include flex(x, center, center);
+    width: 562px;
+    height: 100%;
+    flex-shrink: 0;
+    background: rgba(20, 28, 36, 0.60);
+    backdrop-filter: blur(12px);
+  }
 
   .logo {
     @include flex(x, center, center);
+
     .text {
       font-size: 11px;
       font-family: AlimamaShuHeiTi;
@@ -116,22 +152,9 @@ const handleSubmit = async () => {
     }
   }
 
-  .text-title {
-    font-family: AlimamaShuHeiTi;
-    p:nth-child(1) {
-      background: linear-gradient(92.36deg, #5ABBF2 4.56%, #2454FF 20.02%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-  }
-
   .login-form {
     @include flex(y, start, between);
-    padding: 63px 61px 66px 61px;
-
-    .title {
-      background: url("@/assets/images/login/bg-title.png") left bottom no-repeat;
-    }
+    padding: 40px 40px;
 
     .form-inp-list {
       width: 100%;
@@ -162,4 +185,13 @@ const handleSubmit = async () => {
     }
   }
 }
+
+.n-button {
+  height: 54px;
+  font-size: 18px;
+
+  &:hover {
+    background: #1d43cc;
+  }
+}
 </style>

src/views/user/index.vue

@@ -4,11 +4,11 @@ import { TheChatView, contactUs, userEdit } from "@/components/index";
 import { screenApi } from "@/api/screen"
 const data = reactive({
   tab_action: 0,
-  tabs: ['账号管理', '意见反馈', '关于我们'],
+  tabs: ['账号管理', '关于我们'],
   user: {}
 })
 const changeTab = (index) => {
-  if (index === 2) {
+  if (index === 1) {
     window.open('https://www.sequoialibra.com/', '_blank');
   } else {
     data.tab_action = index

src/views/xlht/AnalyseView.vue

@@ -0,0 +1,261 @@
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { NScrollbar, useMessage, NDatePicker, NTabs, NTab, NDataTable, NPagination, NNumberAnimation } from 'naive-ui';
+import * as echarts from 'echarts';
+
+import { columns, getEchartLineOptions } from './config';
+import { TheChatView } from '@/components';
+
+const echartRef = ref(null);
+const formData = ref({
+  startTime: '',
+  endTime: '',
+  type: '',
+  status: '',
+  page: 1,
+  size: 10
+})
+
+const total = 111;
+
+const dateThemeOverrides = {
+  peers: {
+    Input: {
+      placeholderColor: '#86909C'
+    }
+  }
+}
+
+const data = [
+  { no: 3, title: "Wonderwall", length: "4:18" },
+  { no: 4, title: "Don't Look Back in Anger", length: "4:48" },
+  { no: 12, title: "Champagne Supernova", length: "7:27" }
+]
+
+onMounted(() => {
+  const chart = echarts.init(echartRef.value, 'light');
+  const option = getEchartLineOptions();
+  chart.setOption(option);
+})
+
+</script>
+
+<template>
+  <section class="flex items-start h-full">
+    <TheChatView leftTitle="" :isChatSlot="false" :isFooter="false">
+      <template #control>
+        <div class="number-card">
+          <span></span>
+          <h4 class="text-[#fff] text-[15px] font-bold">数据概况</h4>
+          <ul class="board-list space-x-[12px]">
+            <li class="board-item">
+              <p class="title">当前设备状态</p>
+              <p class="content">
+                <span class="blue-text">化验中</span>
+              </p>
+            </li>
+            <li class="board-item">
+              <p>当前设备状态</p>
+              <p class="content space-x-[6px]">
+                <span class="num-text">
+                  <NNumberAnimation :from="0" :to="12039" :duration="1500"></NNumberAnimation>
+                </span>
+                <span class="unit">天</span>
+              </p>
+            </li>
+            <li class="board-item">
+              <p>累计化验轮次</p>
+              <p class="content space-x-[6px]">
+                <span class="num-text">100</span>
+                <span class="unit">次</span>
+              </p>
+            </li>
+            <li class="board-item">
+              <p>累计化验次数</p>
+              <p class="content space-x-[6px]">
+                <span class="num-text">100</span>
+                <span class="unit">次</span>
+              </p>
+            </li>
+          </ul>
+        </div>
+        <div class="data-card">
+          <h4 class="title px-[16px]">数据详情</h4>
+          <div class="main">
+            <NScrollbar style="height: 100%;">
+              <div class="px-[16px]">
+
+                <div class="echart-box">
+                  <div class="header-inner">
+                    <p class="font-bold">检测数据趋势图「小时」</p>
+                    <div class="date-inner space-x-[16px]">
+                      <span class="text-[12px]">选择时间</span>
+                      <n-date-picker v-model:value="range" type="datetimerange" clearable size="small"
+                        style="width: 380px" :themeOverrides="dateThemeOverrides" start-placeholder="开始时间" end-placeholder="结束时间"/>
+                    </div>
+                  </div>
+                  <div id="echart" class="h-full w-full" ref="echartRef"></div>
+                </div>
+
+                <div class="table-box w-full">
+                  <div class="header-inner">
+                    <p class="font-bold">表格数据「小时」</p>
+                    <div class="space-x1-[16px] w-[200px]">
+                      <n-tabs type="segment" size="small" class="tabs">
+                        <n-tab name="幸福">
+                          1#二沉池
+                        </n-tab>
+                        <n-tab name="的">
+                          1#二沉池
+                        </n-tab>
+                      </n-tabs>
+                    </div>
+                  </div>
+                  <div class="w-full pt-[12px]">
+                    <n-data-table size="small" :columns="columns" :data="data" :bordered="false" layout="table" />
+                    <!-- :scroll-x="1800"  -->
+                  </div>
+                  <div class="flex justify-center mt-[14px] mb-[10px]">
+                    <NPagination v-model:page="formData.pageNum" :item-count="total"></NPagination>
+                  </div>
+                </div>
+              </div>
+            </NScrollbar>
+          </div>
+        </div>
+      </template>
+    </TheChatView>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.number-card {
+  display: flex;
+  flex-flow: column;
+  justify-content: space-between;
+  height: 168px;
+  padding: 22px 16px 16px 16px;
+  border-radius: 10px;
+  border-radius: 10px;
+  background: url('@/assets/images/xlht/bg-header.png') left top no-repeat;
+  background-size: cover;
+
+  .board-list {
+    @include flex (x, center, center);
+    height: 94px;
+
+    .board-item {
+      display: flex;
+      flex-flow: column;
+      justify-content: space-between;
+      width: 25%;
+      height: 100%;
+      padding: 20px 0 22px 20px;
+      border-radius: 4px;
+
+      .title {
+        font-size: 12px;
+        font-weight: bold;
+        color: #1A2029;
+      }
+
+      .content {
+        font-size: 12px;
+
+        .num-text {
+          font-size: 24px;
+          font-weight: bold;
+          font-family: D-DIN-PRO-700-Bold;
+        }
+
+        .unit {
+          font-size: 12px;
+          color: #86909C;
+        }
+
+        .blue-text {
+          font-size: 22px;
+          background: linear-gradient(92deg, #5ABBF2 12.24%, #2454FF 63.2%);
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+    }
+
+    .board-item:nth-child(1) {
+      background: url('@/assets/images/xlht/bg-card-01.png') 50% / cover no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .board-item:nth-child(2) {
+      background: url('@/assets/images/xlht/bg-card-02.png') no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .board-item:nth-child(3) {
+      background: url('@/assets/images/xlht/bg-card-03.png') no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .board-item:nth-child(4) {
+      background: url('@/assets/images/xlht/bg-card-04.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+
+.data-card {
+  width: calc(100vw - 292px);
+  height: calc(100% - 168px);
+  padding: 22px 0px 16px 0px;
+  margin-top: 12px;
+  border-radius: 10px;
+  background: #FFF;
+
+  .title {
+    padding-bottom: 12px;
+    font-size: 15px;
+    font-weight: bold;
+  }
+
+  .main {
+    height: calc(100% - 34px);
+  }
+
+  .echart-box {
+    #echart {
+      height: 300px;
+      // background: orange
+    }
+  }
+
+  .header-inner {
+    @include flex(x, center, between);
+    color: #333;
+
+    .date-inner {
+      @include flex(x, center, center);
+    }
+  }
+
+  :deep(.n-input--stateful) {
+    background: #F2F3F5;
+  }
+}
+</style>
+
+<style lang="scss">
+.tabs {
+  .n-tabs-tab--active {
+    .n-tabs-tab__label {
+      color: #2454FF;
+    }
+  }
+
+  .n-tabs-tab__label {
+    font-size: 12px;
+    color: #333333;
+  }
+}
+</style>

src/views/xlht/config.js

@@ -0,0 +1,222 @@
+export const columns = [
+  {
+    title: "检测时间",
+    key: "no",
+    width: 100,
+    fixed: "left",
+  },
+  {
+    title: "1#进水COD",
+    key: "title",
+    width: 100,
+  },
+  {
+    title: "2#进水COD",
+    key: "length",
+    width: 100,
+  },
+  {
+    title: "1#好氧硝酸盐",
+    key: "length",
+    width: 120,
+  },
+  {
+    title: "2#好氧硝酸盐",
+    key: "length",
+    width: 120,
+  },
+  {
+    title: "1#缺氧氨氮",
+    key: "length",
+    width: 120,
+  },
+  {
+    title: "2#缺氧氨氮",
+    key: "length",
+    width: 120,
+  },
+  {
+    title: "1#缺氧硝酸盐",
+    key: "length",
+    width: 120,
+  },
+  {
+    title: "1#缺氧硝酸盐",
+    key: "length",
+    width: 120,
+  },
+  {
+    title: "1#二沉池出水正磷酸盐",
+    key: "length",
+    width: 160,
+  },
+  {
+    title: "2#二沉池出水正磷酸盐",
+    key: "length",
+    width: 160,
+  },
+  {
+    title: "1#好氧末端正磷酸盐",
+    key: "length",
+    width: 160,
+  },
+  {
+    title: "2#好氧末端正磷酸盐",
+    key: "length",
+    width: 160,
+  },
+];
+
+export const getEchartLineOptions = () => {
+  const colorList = [
+    "#FF6737",
+    "#00AB84",
+    "#85E822",
+    "#21CCFF",
+    "#FFE122",
+    "#313CA9",
+    "#F023FF",
+    "#F023FF",
+    "#FFD22E",
+    "#2181FF",
+    "#F22",
+    "#37DDE0",
+  ];
+
+  const option = {
+    grid: {
+      top: 80,
+      bottom: 40,
+      left: 40,
+      right: 30,
+    },
+    tooltip: {
+      trigger: "axis",
+      // confine: true,
+      appendToBody: true,
+    },
+    legend: [
+      {
+        data: [
+          "1#进水COD",
+          "1#好氧硝酸盐",
+          "1#缺氧氨氮",
+          "1#缺氧硝酸盐",
+          "1#二沉池出水正磷酸盐",
+          "1#好氧末端正磷酸盐",
+        ],
+        top: 10,
+        left: 10,
+        icon: "rect",
+        itemWidth: 10,
+        itemHeight: 10,
+        textStyle: {
+          color: "rgba(0,0,0,0.65)",
+        },
+      },
+      {
+        data: [
+          "2#进水COD",
+          "2#好氧硝酸盐",
+          "2#缺氧氨氮",
+          "2#缺氧硝酸盐",
+          "2#二沉池出水正磷酸盐",
+          "2#好氧末端正磷酸盐",
+        ],
+        top: 35,
+        left: 10,
+        icon: "rect",
+        itemWidth: 10,
+        itemHeight: 10,
+        icon: "rect",
+        itemWidth: 10,
+        itemHeight: 10,
+        textStyle: {
+          color: "rgba(0,0,0,0.65)",
+        },
+      },
+    ],
+    xAxis: [
+      {
+        type: "category",
+        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+        boundaryGap: false,
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#DAE0E1",
+          },
+        },
+        axisLabel: {
+          align: "center",
+          color: "#828282",
+          margin: 10,
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: "",
+        scale: false,
+        minInterval: 1,
+        backgroundColor: "#FFFFFF",
+        splitLine: {
+          lineStyle: {
+            color: ["#DAE0E1"],
+            shadowColor: "#DAE0E1",
+            shadowBlur: 1,
+            opacity: 1,
+            width: 1,
+            type: "dashed",
+          },
+        },
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          align: "center",
+          color: "#828282",
+          margin: 20,
+        },
+      },
+    ],
+    series: [
+      {
+        name: "1#进水COD",
+        type: "line",
+        smooth: true,
+        showSymbol: false,
+        itemStyle: {
+          opacity: 0.8,
+          color: "red", // 将来遍历的时候，这里设置color
+        },
+        tooltip: {
+          valueFormatter: function (value) {
+            return value + "家";
+          },
+        },
+        data: [30, 50, 80, 40, 64, 28, 100],
+      },
+      {
+        name: "2#好氧硝酸盐",
+        type: "line",
+        smooth: true,
+        showSymbol: false,
+        yAxisIndex: 0,
+        itemStyle: {
+          opacity: 0.8,
+          color: "#E6AF08",
+        },
+        tooltip: {
+          valueFormatter: function (value) {
+            return value;
+          },
+        },
+        data: [120, 230, 430, 200, 80, 150, 340],
+      },
+    ],
+  };
+  return option;
+};