Skip to content

Y
yq-ui
Commit e6b15a14 by zhaopanyu
Options

zpy

parent 397aaebb
Showing with 1487 additions and 933 deletions
public/index.html
...@@ -201,7 +201,7 @@ ...@@ -201,7 +201,7 @@
<div id="loader"></div> <div id="loader"></div>
<div class="loader-section section-left"></div> <div class="loader-section section-left"></div>
<div class="loader-section section-right"></div> <div class="loader-section section-right"></div>
<div class="load_title">正在加载系统资源，请耐心等待</div> <div class="load_title">欢迎访问胜利智联油气数智化品牌</div>
</div> </div>
</div> </div>
</body> </body>
......
src/assets/icons/svg/fh.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1729847311140" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1781" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.1953125" height="200"><path d="M513.706667 0a512 512 0 1 0 512 512 512 512 0 0 0-512-512z m0 938.666667a426.666667 426.666667 0 1 1 426.666666-426.666667 426.666667 426.666667 0 0 1-426.666666 426.666667z" fill="#333333" p-id="1782"></path><path d="M573.866667 332.373333a42.666667 42.666667 0 0 0-60.16 0l-149.333334 149.333334a42.666667 42.666667 0 0 0 0 60.586666l149.333334 149.333334a42.666667 42.666667 0 0 0 60.16-60.586667L454.826667 512l119.04-119.04a42.666667 42.666667 0 0 0 0-60.586667z" fill="#333333" p-id="1783"></path></svg>
\ No newline at end of file
src/permission.js
...@@ -8,7 +8,7 @@ import { isRelogin } from "@/utils/request"; ...@@ -8,7 +8,7 @@ import { isRelogin } from "@/utils/request";
NProgress.configure({ showSpinner: false }); NProgress.configure({ showSpinner: false });
const whiteList = ["/login", "/register", "/web"]; const whiteList = ["/login", "/register", "/web", "/sj"];
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
NProgress.start(); NProgress.start();
......
src/router/index.js
...@@ -6,12 +6,14 @@ Vue.use(Router); ...@@ -6,12 +6,14 @@ Vue.use(Router);
/* Layout */ /* Layout */
import Layout from "@/layout"; import Layout from "@/layout";
let indexViewPath = () => import(); let indexViewPath = () => import("@/views/zyyq/index");
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
indexViewPath = () => import("@/views/zyyq/index");//手机端的组件 console.log("shouji");
indexViewPath = () => import("@/views/zyyqsj/index"); //手机端的组件
} else { } else {
indexViewPath = () => import("@/views/zyyq/index1");//pc端的组件 console.log("pc");
indexViewPath = () => import("@/views/zyyq/index"); //pc端的组件
} }
/** /**
...@@ -55,7 +57,13 @@ export const constantRoutes = [ ...@@ -55,7 +57,13 @@ export const constantRoutes = [
component: indexViewPath, component: indexViewPath,
hidden: true, hidden: true,
}, },
{
path: "/sj",
component: () => import("@/views/zyyqsj/tzy/index"), // 确保路径正确
hidden: true,
},
,
{ {
path: "/login", path: "/login",
component: () => import("@/views/login"), component: () => import("@/views/login"),
......
src/views/monitor/cache/index.vue
...@@ -8,34 +8,84 @@ ...@@ -8,34 +8,84 @@
<table cellspacing="0" style="width: 100%"> <table cellspacing="0" style="width: 100%">
<tbody> <tbody>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">Redis版本</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td> <div class="cell">Redis版本</div>
<td class="el-table__cell is-leaf"><div class="cell">运行模式</div></td> </td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell">端口</div></td> <div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td> </td>
<td class="el-table__cell is-leaf"><div class="cell">客户端数</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td> <div class="cell">运行模式</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell">端口</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell">客户端数</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div>
</td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">运行时间(天)</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td> <div class="cell">运行时间(天)</div>
<td class="el-table__cell is-leaf"><div class="cell">使用内存</div></td> </td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell">使用CPU</div></td> <div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td> </td>
<td class="el-table__cell is-leaf"><div class="cell">内存配置</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td> <div class="cell">使用内存</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell">使用CPU</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}
</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell">内存配置</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div>
</td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">AOF是否开启</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td> <div class="cell">AOF是否开启</div>
<td class="el-table__cell is-leaf"><div class="cell">RDB是否成功</div></td> </td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell">Key数量</div></td> <div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td> </td>
<td class="el-table__cell is-leaf"><div class="cell">网络入口/出口</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td> <div class="cell">RDB是否成功</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell">Key数量</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell">网络入口/出口</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps
}}kps/{{ cache.info.instantaneous_output_kbps }}kps</div>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -141,7 +191,7 @@ export default { ...@@ -141,7 +191,7 @@ export default {
}, },
// 打开加载层 // 打开加载层
openLoading() { openLoading() {
this.$modal.loading("正在加载缓存监控数据，请稍候！"); this.$modal.loading("欢迎访问胜利智联油气数智化品牌！");
} }
} }
}; };
......
src/views/monitor/server/index.vue
...@@ -8,26 +8,46 @@ ...@@ -8,26 +8,46 @@
<table cellspacing="0" style="width: 100%;"> <table cellspacing="0" style="width: 100%;">
<thead> <thead>
<tr> <tr>
<th class="el-table__cell is-leaf"><div class="cell">属性</div></th> <th class="el-table__cell is-leaf">
<th class="el-table__cell is-leaf"><div class="cell">值</div></th> <div class="cell">属性</div>
</th>
<th class="el-table__cell is-leaf">
<div class="cell">值</div>
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">核心数</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td> <div class="cell">核心数</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div>
</td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">用户使用率</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td> <div class="cell">用户使用率</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div>
</td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td> <div class="cell">系统使用率</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div>
</td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td> <div class="cell">当前空闲率</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -42,31 +62,63 @@ ...@@ -42,31 +62,63 @@
<table cellspacing="0" style="width: 100%;"> <table cellspacing="0" style="width: 100%;">
<thead> <thead>
<tr> <tr>
<th class="el-table__cell is-leaf"><div class="cell">属性</div></th> <th class="el-table__cell is-leaf">
<th class="el-table__cell is-leaf"><div class="cell">内存</div></th> <div class="cell">属性</div>
<th class="el-table__cell is-leaf"><div class="cell">JVM</div></th> </th>
<th class="el-table__cell is-leaf">
<div class="cell">内存</div>
</th>
<th class="el-table__cell is-leaf">
<div class="cell">JVM</div>
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">总内存</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td> <div class="cell">总内存</div>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td> </td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.mem">{{ server.mem.total }}G</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div>
</td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td> <div class="cell">已用内存</div>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td> </td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.mem">{{ server.mem.used }}G</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.jvm">{{ server.jvm.used }}M</div>
</td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td> <div class="cell">剩余内存</div>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td> </td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.mem">{{ server.mem.free }}G</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div>
</td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">使用率</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td> <div class="cell">使用率</div>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td> </td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.mem" :class="{ 'text-danger': server.mem.usage > 80 }">{{
server.mem.usage }}%</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.jvm" :class="{ 'text-danger': server.jvm.usage > 80 }">{{
server.jvm.usage }}%</div>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -83,16 +135,32 @@ ...@@ -83,16 +135,32 @@
<table cellspacing="0" style="width: 100%;"> <table cellspacing="0" style="width: 100%;">
<tbody> <tbody>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">服务器名称</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td> <div class="cell">服务器名称</div>
<td class="el-table__cell is-leaf"><div class="cell">操作系统</div></td> </td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td> <td class="el-table__cell is-leaf">
<div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell">操作系统</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.sys">{{ server.sys.osName }}</div>
</td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">服务器IP</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td> <div class="cell">服务器IP</div>
<td class="el-table__cell is-leaf"><div class="cell">系统架构</div></td> </td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td> <td class="el-table__cell is-leaf">
<div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell">系统架构</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -109,28 +177,56 @@ ...@@ -109,28 +177,56 @@
<table cellspacing="0" style="width: 100%;table-layout:fixed;"> <table cellspacing="0" style="width: 100%;table-layout:fixed;">
<tbody> <tbody>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">Java名称</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td> <div class="cell">Java名称</div>
<td class="el-table__cell is-leaf"><div class="cell">Java版本</div></td> </td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td> <td class="el-table__cell is-leaf">
<div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell">Java版本</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div>
</td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">启动时间</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td> <div class="cell">启动时间</div>
<td class="el-table__cell is-leaf"><div class="cell">运行时长</div></td> </td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td> <td class="el-table__cell is-leaf">
<div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell">运行时长</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div>
</td>
</tr> </tr>
<tr> <tr>
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">安装路径</div></td> <td colspan="1" class="el-table__cell is-leaf">
<td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td> <div class="cell">安装路径</div>
</td>
<td colspan="3" class="el-table__cell is-leaf">
<div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div>
</td>
</tr> </tr>
<tr> <tr>
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">项目路径</div></td> <td colspan="1" class="el-table__cell is-leaf">
<td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td> <div class="cell">项目路径</div>
</td>
<td colspan="3" class="el-table__cell is-leaf">
<div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div>
</td>
</tr> </tr>
<tr> <tr>
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">运行参数</div></td> <td colspan="1" class="el-table__cell is-leaf">
<td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div></td> <div class="cell">运行参数</div>
</td>
<td colspan="3" class="el-table__cell is-leaf">
<div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -147,24 +243,52 @@ ...@@ -147,24 +243,52 @@
<table cellspacing="0" style="width: 100%;"> <table cellspacing="0" style="width: 100%;">
<thead> <thead>
<tr> <tr>
<th class="el-table__cell el-table__cell is-leaf"><div class="cell">盘符路径</div></th> <th class="el-table__cell el-table__cell is-leaf">
<th class="el-table__cell is-leaf"><div class="cell">文件系统</div></th> <div class="cell">盘符路径</div>
<th class="el-table__cell is-leaf"><div class="cell">盘符类型</div></th> </th>
<th class="el-table__cell is-leaf"><div class="cell">总大小</div></th> <th class="el-table__cell is-leaf">
<th class="el-table__cell is-leaf"><div class="cell">可用大小</div></th> <div class="cell">文件系统</div>
<th class="el-table__cell is-leaf"><div class="cell">已用大小</div></th> </th>
<th class="el-table__cell is-leaf"><div class="cell">已用百分比</div></th> <th class="el-table__cell is-leaf">
<div class="cell">盘符类型</div>
</th>
<th class="el-table__cell is-leaf">
<div class="cell">总大小</div>
</th>
<th class="el-table__cell is-leaf">
<div class="cell">可用大小</div>
</th>
<th class="el-table__cell is-leaf">
<div class="cell">已用大小</div>
</th>
<th class="el-table__cell is-leaf">
<div class="cell">已用百分比</div>
</th>
</tr> </tr>
</thead> </thead>
<tbody v-if="server.sysFiles"> <tbody v-if="server.sysFiles">
<tr v-for="(sysFile, index) in server.sysFiles" :key="index"> <tr v-for="(sysFile, index) in server.sysFiles" :key="index">
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.dirName }}</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.sysTypeName }}</div></td> <div class="cell">{{ sysFile.dirName }}</div>
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.typeName }}</div></td> </td>
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.total }}</div></td> <td class="el-table__cell is-leaf">
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.free }}</div></td> <div class="cell">{{ sysFile.sysTypeName }}</div>
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.used }}</div></td> </td>
<td class="el-table__cell is-leaf"><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td> <td class="el-table__cell is-leaf">
<div class="cell">{{ sysFile.typeName }}</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell">{{ sysFile.total }}</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell">{{ sysFile.free }}</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell">{{ sysFile.used }}</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" :class="{ 'text-danger': sysFile.usage > 80 }">{{ sysFile.usage }}%</div>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -200,7 +324,7 @@ export default { ...@@ -200,7 +324,7 @@ export default {
}, },
// 打开加载层 // 打开加载层
openLoading() { openLoading() {
this.$modal.loading("正在加载服务监控数据，请稍候！"); this.$modal.loading("欢迎访问胜利智联油气数智化品牌！");
} }
} }
}; };
......
src/views/zyyq/index copy.vue deleted 100644 → 0
<template>
<div class="container">
<el-row style="margin: 150px auto 100px ;">
<img src="../../assets/images/background.png" alt="" style="
height: 111px;
width: 877px;
/* background-size: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover; */
" />
</el-row>
<el-row class="content" style="border: red 1px solid;background-color: #f5f8fe;">
<el-col :span="5"
style="padding: 20px; border-radius: 10px; min-height: 700px; background-color: #f5f8fe;border: black 1px solid;">
<el-menu :default-active="activeNameInner" class="product-menu" :background-color="'transparent'"
:text-color="'#333'" :active-text-color="'#409EFF'">
<!-- 外层菜单 -->
<el-submenu v-for="outerItem in collapseDataOuter" :key="outerItem.name" :index="outerItem.name"
:default-active="activeNameOuter">
<template #title>
<img src="../../assets/images/tag.png" alt="">
<span
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 23px; color: #222222; line-height: 40px;">
{{ outerItem.title }}
</span>
</template>
<!-- 第二级菜单 -->
<el-submenu v-for="innerItem in outerItem.collapseData" :key="innerItem.name" :index="innerItem.name"
:class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }"
@click.native="setActiveInner(innerItem.name)">
<template #title>
<span
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 17px; color: #222222; line-height: 26px;">
{{ innerItem.title }}
</span>
</template>
<!-- 第三级菜单 -->
<el-menu-item v-for="content in innerItem.contents" :key="content" :index="innerItem.name + '-' + content"
@click.native="setActiveInner(innerItem.name, content)"
:class="{ 'menu-item-active': activeNameInner === innerItem.name + '-' + content }">
<!-- 蓝色圆点 -->
<span :style="{
width: '6px',
height: '6px',
background: '#165BFF',
borderRadius: '50%',
display: 'inline-block',
marginRight: '10px'
}"></span>
<!-- 第三级菜单文本 -->
<span :style="{
fontFamily: 'PingFang SC',
fontWeight: '500',
fontSize: '15px',
color: activeNameInner === innerItem.name + '-' + content ? '#165BFF' : '#222222',
lineHeight: '18px', // 调整行高，进一步减少上下距离
margin: '2px 0', // 减少上下间距
textDecoration: activeNameInner === innerItem.name + '-' + content ? 'underline' : 'none',
textDecorationColor: activeNameInner === innerItem.name + '-' + content ? '#165BFF' : 'transparent'
}">
{{ content }}
</span>
</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-col>
<el-col :span="19"
style=" border-radius: 10px; min-height: 700px; background-color: #f5f8fe;border: pink 1px solid;">
<el-tabs v-model="activeName" @tab-click="handleClick" type="card">
<el-tab-pane label="产品简介" name="first" :class="{ 'custom-active1': activeName === 'first' }">
<el-card style="width: 100%;min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${cpjj}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="功能特点" name="second">
<el-card style="width: 100%;min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${gntd}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="应用成效" name="third">
<el-card style="width:100%;min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${yycx}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="用法介绍" name="fourth" :class="{ 'custom-active2': activeName === 'fourth' }">
<el-card style="width: 100%;height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${yfjs}`"></div>
</el-card>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "gasDigitization",
// components: { footerNav },
data() {
return {
cpjj: '',
gntd: '',
yycx: '',
yfjs: '',
activeNameOuter: "", // 默认选中的第一级选项
activeNameInner: "", // 默认选中的第二级选项
collapseDataOuter: [
{
name: "outer1",
title: "外层折叠项 1",
collapseData: [
{
name: "1",
title: "智能化办公",
contents: ["大模型", "会议系统", "数字员工"],
},
{
name: "2",
title: "生产化信息",
contents: ["大模型", "哈哈哈哈", "嘻嘻嘻嘻"],
},
],
},
{
name: "outer2",
title: "外层折叠项 2",
collapseData: [
{
name: "3",
title: "基础设施",
contents: ["999", "777", "666"],
},
{
name: "4",
title: "其他",
contents: ["内容1", "内容2", "内容3"],
},
],
},
],
// -------------
activeName: "first",
name: null,
ipdz: null,
yl1: null,
showDialog: false, // 控制对话框显示的变量
form: {
},
};
},
computed: {},
mounted() {
// 设置默认选中的第一级和第二级
if (this.collapseDataOuter.length > 0) {
this.activeNameOuter = this.collapseDataOuter[0].name; // 默认选中第一个外层选项
const firstInner = this.collapseDataOuter[0].collapseData[0];
if (firstInner) {
this.activeNameInner = firstInner.name + '-' + firstInner.contents[0]; // 默认选中第一个内层选项
}
}
},
methods: {
setActiveInner(innerName, content = '') {
if (content) {
this.activeNameInner = innerName + '-' + content;
console.log('activeNameInner updated to:', this.activeNameInner); // 调试打印
}
},
isInnerActive(innerName) {
return this.activeNameInner.startsWith(innerName); // 判断是否为活动状态
},
handleChange(val) {
console.log(val);
},
handleClick(tab, event) {
console.log(tab, event);
},
getList() {
// listOrganization().then(res => {
// console.log('组织领导', res)
// this.cpjj = res.data.bmjjwh
// this.gntd = res.data.zzld
// this.yycx = res.data.sjglry
// this.yfjs = res.data.sjglry
// })
},
},
};
</script>
<style scoped lang="scss">
::v-deep.custom-active1 {
border-radius: 10px 0 0 0;
/* 第一个选项卡的圆角 */
background-color: #165bff;
/* 选中时的背景色 */
color: white;
/* 选中时的字体颜色 */
}
::v-deep.custom-active2 {
border-radius: 0 10px 0 0;
/* 第四个选项卡的圆角 */
background-color: #165bff;
/* 选中时的背景色 */
color: white;
/* 选中时的字体颜色 */
}
::v-deep .el-tabs__nav .el-tabs__item.is-active {
background-color: #165bff;
/* 选中时的背景色 */
color: white;
/* 选中时的字体颜色 */
}
::v-deep .el-tabs__nav .el-tabs__item {
background-color: #d8e1eb;
/* 未选中时的背景色 */
color: black;
/* 未选中时的字体颜色 */
}
::v-deep .el-tabs__nav .el-tabs__item:hover {
background-color: #165bff;
/* 悬停时的背景色 */
color: white;
/* 悬停时的字体颜色 */
}
::v-deep.el-tabs .el-tabs__header {
padding: 0;
position: relative;
margin: 0 0 0px !important;
}
::v-deep.product-menu {
// 内层菜单展开时的背景色
.inner-submenu-active {
background-color: #ffffff; // 内层菜单背景色为白色
// 设置箭头图标颜色为蓝色
.el-submenu__icon-arrow {
color: #165BFF; // 改变箭头颜色
}
}
// 默认状态的箭头颜色
.el-submenu {
.el-submenu__icon-arrow {
color: #000; // 默认箭头颜色
}
}
}
::v-deep.product-menu .menu-item-active {
color: #165BFF !important;
/* 选中菜单项的字体颜色 */
}
::v-deep.product-menu .el-menu-item {
background-color: #ffffff;
/* 第三级菜单的背景色 */
}
.text-align {
display: flex;
justify-content: flex-end;
margin: 0px 10px;
}
.text {
margin-left: auto;
margin: 10px 15px;
}
.row {
display: flex;
flex-direction: row;
align-items: inherit;
justify-content: center;
margin: 20px 0 20px -30px;
}
.box {
position: relative;
top: -20px;
left: 0;
margin-bottom: -20px;
width: 100%;
min-height: 102vh;
background-image: url(../../assets/images/background1.png) !important;
background-size: cover;
background-repeat: no-repeat;
background-position: left top;
background-color: #f55202;
}
.container {
overflow-y: auto;
height: 100vh;
background-image: url(../../assets/images/background1.png) !important;
// background-size: cover;
background-size: 100% 100%;
background-repeat: no-repeat;
}
h1 {
text-align: center;
color: #333;
}
.content {
margin: 20px auto;
max-width: 70%;
min-height: calc(100vh - 420px);
padding: 20px;
background: #F5F8FE;
border-radius: 10px 10px 0px 0px;
/* 设置背景色 */
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.bt {
text-indent: 3.6em;
margin: 20px auto;
/* max-width: 70%; */
width: 1200px;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow-y: auto;
}
h2 {
font-size: 24px;
color: #333;
margin-bottom: 15px;
font-family: "方正小标宋", "Fangzheng Xiaobiao Song", serif;
}
p {
font-size: 16px;
color: #555;
line-height: 1.6;
font-family: "FangSong_GB2312";
}
.title {
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 14px;
color: #c80000;
line-height: 30px;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.bttext {
font-family: PingFang SC;
font-weight: bold;
font-size: 14px;
color: #222222;
line-height: 26px;
margin-left: 10px;
text-decoration: none;
}
.bttext:hover {
color: #165bff;
text-decoration: underline;
}
.custom-title {
font-family: PingFang SC;
font-weight: 800;
font-size: 16px;
color: #165bff;
line-height: 26px;
}
</style>
src/views/zyyq/index.vue
<template> <template>
<div class="container"> <div class="container">
<el-row style="margin: 150px auto 100px ;"> <el-row style="margin: 150px auto 100px ;">
<img src="../../assets/images/background.png" alt="" style=" <img src="../../assets/images/background.png" alt="" style="
height: 111px; height: 111px;
...@@ -13,7 +12,6 @@ ...@@ -13,7 +12,6 @@
object-fit: cover; */ object-fit: cover; */
" /> " />
</el-row> </el-row>
<el-row class="content" style="background-color: #f5f8fe;"> <el-row class="content" style="background-color: #f5f8fe;">
<el-col :span="6" <el-col :span="6"
style="padding: 20px; border-radius: 10px; min-height: 712px;overflow-x: auto; background-color: #f5f8fe;"> style="padding: 20px; border-radius: 10px; min-height: 712px;overflow-x: auto; background-color: #f5f8fe;">
...@@ -149,11 +147,10 @@ ...@@ -149,11 +147,10 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<div class="remark"> <div class="remark">
<h2>{{ this.remark }}</h2> <div>{{ this.remark }}</div>
</div> </div>
</div> </div>
</el-col> </el-col>
<!-- 外层折叠项 2 选中的内容 --> <!-- 外层折叠项 2 选中的内容 -->
<el-col v-else-if="activeNameOuter === '服务类'" :span="18" <el-col v-else-if="activeNameOuter === '服务类'" :span="18"
style="border-radius: 10px; min-height: 700px; background-color: #f5f8fe;"> style="border-radius: 10px; min-height: 700px; background-color: #f5f8fe;">
...@@ -185,7 +182,7 @@ ...@@ -185,7 +182,7 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<div class="remark"> <div class="remark">
<h2>{{ this.remark }}</h2> <div>{{ this.remark }}</div>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -199,6 +196,7 @@ import { getListcx, getListdt, } from "@/api/sy.js"; ...@@ -199,6 +196,7 @@ import { getListcx, getListdt, } from "@/api/sy.js";
export default { export default {
name: "gasDigitization", name: "gasDigitization",
// components: { footerNav }, // components: { footerNav },
data() { data() {
return { return {
remark: '', // 新增的remark属性 remark: '', // 新增的remark属性
...@@ -225,10 +223,39 @@ export default { ...@@ -225,10 +223,39 @@ export default {
}; };
}, },
computed: {},
watch: {
activeNameOuter(newValue) {
console.log(newValue, 'newValue');
if (newValue === '服务类') {
const selectedItem = this.collapseDataOuter.find(item => item.mc === '智能化服务类');
if (selectedItem && selectedItem.fwlChildren.length > 0) {
const firstService = selectedItem.fwlChildren[0];
this.activeNameInner = `智能化服务类-${firstService.mc}`;
this.activeServiceId = firstService.id; // 设置 activeServiceId 为第一项的 ID
console.log(this.activeServiceId, 'Selected Service ID');
this.getListdt(this.activeServiceId);
}
} else if (newValue === '产品') {
const selectedItem = this.collapseDataOuter.find(item => item.mc === '软硬件产品');
if (selectedItem && selectedItem.cpChildren && selectedItem.cpChildren.length > 0) {
const firstProduct = selectedItem.cpChildren[0]; // 从 cpChildren 中获取第一个产品
if (firstProduct.children2 && firstProduct.children2.length > 0) {
const firstProductChild = firstProduct.children2[0]; // 从 children2 中获取第一个子产品
this.activeNameInner = `软硬件产品-${firstProductChild.mc}`;
this.activeServiceId = firstProductChild.id; // 设置 activeServiceId 为第一项的 ID
console.log(this.activeServiceId, 'Selected Product ID');
this.getListdt(this.activeServiceId);
}
}
}
}
},
mounted() { mounted() {
this.getList(); this.getList();
// this.setDefaultActiveMenu();
}, },
methods: { methods: {
...@@ -375,13 +402,17 @@ export default { ...@@ -375,13 +402,17 @@ export default {
::v-deep.remark { ::v-deep.remark {
position: absolute; position: absolute;
top: 5px; top: 20px;
/* 向上移动 */ /* 向上移动 */
right: 30px; right: 30px;
/* 向左移动 */ /* 向左移动 */
white-space: nowrap; white-space: nowrap;
font-size: 18px; font-size: 18px;
font-weight: bold; // font-weight: bold;
font-family: PingFang SC;
// font-weight: 800;
// color: #222222;
line-height: 40px
} }
::v-deep.menu-item-active { ::v-deep.menu-item-active {
......
src/views/zyyqsj/index.vue 0 → 100644
<template>
<div class="container">
<el-row style="margin: 0px auto 150px ;">
<div class="bjt">
<img src="../../assets/images/background.png" alt="" style="
height: 111px;
width: 877px;
/* background-size: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover; */
" />
</div>
</el-row>
<el-row class="content" style="background-color: #f5f8fe;">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
style="padding: 20px; border-radius: 10px; height: auto; background-color: #f5f8fe;">
<el-menu v-if="activeNameOuter === '产品'" :default-active="activeNameInner" class="product-menu"
:background-color="'transparent'" :text-color="'#333'" :active-text-color="'#409EFF'"
:default-openeds="defaultOpeneds">
<!-- 外层菜单 -->
<el-submenu v-for="outerItem in collapseDataOuter" :key="outerItem.px" :index="outerItem.px"
@click.native="setActiveOuter(outerItem.cplx)">
<template #title>
<img src="../../assets/images/tag.png" alt="">
<span
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 23px; color: #222222; line-height: 40px;">
{{ outerItem.mc }}
</span>
</template>
<!-- 第二级菜单 -->
<el-submenu v-for="innerItem in outerItem.cpChildren" :key="innerItem.id" :index="innerItem.px"
:class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }"
@click.native="setActiveInner(innerItem.mc)">
<template #title>
<span
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 17px; color: #222222; line-height: 26px;">
{{ innerItem.mc }}
</span>
</template>
<!-- 第三级菜单 -->
<el-menu-item v-for="content in innerItem.children2" :key="content.id"
:index="innerItem.name + '-' + content.mc"
@click.native="handleInnerClick(innerItem.name, content.mc, content.id, content.remark)"
:class="{ 'menu-item-active': activeNameInner === innerItem.name + '-' + content.mc }">
<span
:style="{ width: '6px', height: '6px', background: '#165BFF', borderRadius: '50%', display: 'inline-block', marginRight: '10px' }"></span>
<span :style="{
fontFamily: 'PingFang SC',
fontWeight: '500',
fontSize: '15px',
color: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : '#222222',
textDecoration: activeNameInner === innerItem.name + '-' + content.mc ? 'underline' : 'none',
textDecorationColor: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : 'transparent',
textUnderlineOffset: activeNameInner === innerItem.name + '-' + content.mc ? '8px' : '0'
}">
{{ content.mc }}
</span>
<img v-if="content.zx === '1'" src="../../assets/images/new.png" alt="new"
style="width: 40px; height: 40px; margin-left: 5px; vertical-align: middle;" />
</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
<el-menu v-if="activeNameOuter === '服务类'" :default-active="activeNameInner" class="product-menu"
:background-color="'transparent'" :text-color="'#333'" :active-text-color="'#409EFF'"
:default-openeds="defaultOpeneds">
<!-- 外层菜单 -->
<el-submenu v-for="outerItem in collapseDataOuter" :key="outerItem.px" :index="outerItem.px"
@click.native="setActiveOuter(outerItem.cplx)">
<template #title>
<img src="../../assets/images/tag.png" alt="">
<span
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 23px; color: #222222; line-height: 40px;">
{{ outerItem.mc }}
</span>
</template>
<!-- 服务类的第二级菜单 -->
<el-menu-item v-for="service in outerItem.fwlChildren" :key="service.id" :index="service.mc"
@click.native="handleServiceClick(outerItem.mc, service.mc, service.id, service.remark)"
:class="{ 'menu-item-active': activeNameInner === outerItem.mc + '-' + service.mc, 'service-menu-item-active': activeNameInner === outerItem.mc + '-' + service.mc }">
<span
:style="{ width: '6px', height: '6px', background: '#165BFF', borderRadius: '50%', display: 'inline-block', marginRight: '10px' }"></span>
<span :style="{
fontFamily: 'PingFang SC',
fontWeight: '500',
fontSize: '15px',
color: activeNameInner === outerItem.mc + '-' + service.mc ? '#165BFF' : '#222222',
textDecoration: activeNameInner === outerItem.mc + '-' + service.mc ? 'underline' : 'none',
textDecorationColor: activeNameInner === outerItem.mc + '-' + service.mc ? '#165BFF' : 'transparent',
textUnderlineOffset: activeNameInner === outerItem.mc + '-' + service.mc ? '8px' : '0'
}">
{{ service.mc }}
<!-- 判断 zx 是否为 1，如果是则显示图片 -->
<img v-if="service.zx === '1'" src="../../assets/images/new.png" alt="new"
style="width: 40px; height: 40px; margin-left: 5px; vertical-align: middle;" />
</span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</div>
</template>
<script>
import { getListcx, getListdt, } from "@/api/sy.js";
export default {
name: "gasDigitization",
// components: { footerNav },
data() {
return {
remark: '', // 新增的remark属性
defaultOpeneds: [],// 根据需要初始化 defaultOpeneds
selectedId: null, // 用于存储选中项的ID
cpjj: '',
gntd: '',
yycx: '',
yfjs: '',
tdjs: '',
fwts: '',
fwal: '',
activeNameOuter: "产品", // 默认选中的第一级选项
activeNameInner: "", // 默认选中的第二级选项
collapseDataOuter: [],
activeName: "first",
name: null,
ipdz: null,
yl1: null,
showDialog: false, // 控制对话框显示的变量
form: {
},
};
},
watch: {
activeNameOuter(newValue) {
console.log(newValue, 'newValue');
if (newValue === '服务类') {
const selectedItem = this.collapseDataOuter.find(item => item.mc === '智能化服务类');
if (selectedItem && selectedItem.fwlChildren.length > 0) {
const firstService = selectedItem.fwlChildren[0];
this.activeNameInner = `智能化服务类-${firstService.mc}`;
this.activeServiceId = firstService.id; // 设置 activeServiceId 为第一项的 ID
console.log(this.activeServiceId, 'Selected Service ID');
this.getListdt(this.activeServiceId);
}
} else if (newValue === '产品') {
const selectedItem = this.collapseDataOuter.find(item => item.mc === '软硬件产品');
if (selectedItem && selectedItem.cpChildren && selectedItem.cpChildren.length > 0) {
const firstProduct = selectedItem.cpChildren[0]; // 从 cpChildren 中获取第一个产品
if (firstProduct.children2 && firstProduct.children2.length > 0) {
const firstProductChild = firstProduct.children2[0]; // 从 children2 中获取第一个子产品
this.activeNameInner = `软硬件产品-${firstProductChild.mc}`;
this.activeServiceId = firstProductChild.id; // 设置 activeServiceId 为第一项的 ID
console.log(this.activeServiceId, 'Selected Product ID');
this.getListdt(this.activeServiceId);
}
}
}
}
},
mounted() {
this.getList();
},
methods: {
setActiveOuter(cplx) {
this.activeNameOuter = cplx; // 设置选中的外层菜单类型
this.activeNameInner = ''; // 清空内层选中的状态
// 查找对应的外层菜单项
const selectedOuterItem = this.collapseDataOuter.find(item => item.cplx === cplx);
if (selectedOuterItem) {
// 处理产品类型的情况
if (cplx === '产品') {
if (selectedOuterItem.cpChildren && selectedOuterItem.cpChildren.length > 0) {
const firstInnerItem = selectedOuterItem.cpChildren[0];
const firstContent = firstInnerItem.children2 && firstInnerItem.children2[0]; // 确保存在内容
if (firstContent) {
this.setActiveInner(firstInnerItem.name, firstContent.mc, firstContent.id, firstContent.zx); // 传递 zx
this.displaySelectedInfo(firstInnerItem.name, firstContent); // 展示选中的信息
}
}
} else if (cplx === '服务类') {
if (selectedOuterItem.fwlChildren && selectedOuterItem.fwlChildren.length > 0) {
const firstService = selectedOuterItem.fwlChildren[0]; // 默认选中第一个服务
this.setActiveInner(selectedOuterItem.mc, firstService.mc, null, firstService.id, firstService.zx); // 传递 zx
this.displaySelectedInfo(selectedOuterItem.mc, firstService); // 展示选中的信息
}
}
// 设置展开的菜单项
this.defaultOpeneds = [selectedOuterItem.px]; // 展开外层菜单
}
},
displaySelectedInfo(menuName, content) {
// 在这里更新展示选中的内容的信息
// 你可以根据需要展示的内容更新相应的数据属性
this.selectedMenuName = menuName; // 例如设置当前选中的菜单名称
this.selectedContent = content; // 设置当前选中的内容
// 其他逻辑，例如更新界面中的某些元素的显示
},
getList() {
getListcx().then(res => {
console.log('res', res);
this.collapseDataOuter = res.data;
// 获取数据后，设置默认选中的第一个外层和内层菜单项
if (this.collapseDataOuter.length > 0) {
const firstOuterItem = this.collapseDataOuter[0];
this.activeNameOuter = firstOuterItem.cplx;
if (firstOuterItem.cpChildren && firstOuterItem.cpChildren.length > 0) {
const firstInnerItem = firstOuterItem.cpChildren[0];
const firstContent = firstInnerItem.children2[0]; // 假设有第三级菜单内容
// 默认选中第一项
this.setActiveInner(firstInnerItem.mc, firstContent.mc, firstContent.id);
// 设置展开的菜单项
this.defaultOpeneds = [firstOuterItem.px, firstInnerItem.px]; // 外层和内层菜单都展开
}
}
});
},
setActiveOuter(cplx) {
this.activeNameOuter = cplx;
console.log('Outer menu set to:', this.activeNameOuter);
},
handleInnerClick(innerName, contentName, contentId) {
this.activeNameInner = `${innerName}-${contentName}`;
// 传递 contentId 到路由中
this.$router.push({
path: '/sj',
query: {
id: contentId,
}
});
// 处理内容相关的逻辑，比如获取内容等
this.getListdt(contentId);
console.log(contentId, 'contentId');
},
handleServiceClick(outerName, serviceName, serviceId) {
this.activeNameInner = `${outerName}-${serviceName}`;
// 传递 serviceId 到路由中
this.$router.push({
path: '/sj',
query: {
id: serviceId,
}
});
// 处理服务相关的逻辑，比如获取内容等
this.getListdt(serviceId);
console.log(serviceId, 'serviceId');
},
setActiveInner(innerName, content = '', id = null) {
if (content) {
this.activeNameInner = `${innerName}-${content}`;
console.log(this.activeNameInner, 'this.activeNameInner');
this.selectedId = id; // 更新选中项的ID
console.log('activeNameInner updated to:', this.activeNameInner);
this.getListdt(this.selectedId); // 获取内容数据
}
},
getListdt(id) {
// 假设你的getListdt接口是一个异步函数
getListdt(id).then(res => {
console.log('12222:', res.data.remark);
this.cpjj = res.data.cpjj
this.gntd = res.data.gntd
this.yycx = res.data.yycx
this.yfjs = res.data.yfjs
this.tdjs = res.data.tdjs
this.fwts = res.data.fwts
this.fwal = res.data.fwal
this.remark = res.data.remark
// 在这里处理返回的数据
}).catch(error => {
console.error('Error fetching data:', error);
});
},
isInnerActive(innerName) {
return this.activeNameInner.startsWith(innerName); // 判断是否为活动状态
},
handleChange(val) {
console.log(val);
},
handleClick(tab, event) {
this.activeName = tab.name; // 确保更新activeName
console.log(this.activeName, ' this.activeName');
},
},
};
</script>
<style scoped lang="scss">
@media (max-width: 1199px) {
.bjt {
height: 150px;
// background: rgba(255, 255, 255, 0.9);
position: fixed;
left: 0;
top: 0;
width: 100%;
padding: 0 15px;
z-index: 20;
box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.06);
display: block;
}
}
::v-deep.tabs {
display: flex;
align-items: flex-start;
}
::v-deep.custom-tabs {
flex-grow: 1;
// padding-right: 10px
}
::v-deep.remark {
position: absolute;
top: 5px;
/* 向上移动 */
right: 30px;
/* 向左移动 */
white-space: nowrap;
font-size: 18px;
font-weight: bold;
}
::v-deep.menu-item-active {
background-color: #ffffff;
/* 选中项背景白色 */
}
::v-deep.related-menu-item-active {
background-color: #ffffff;
/* 兄弟项背景白色 */
}
::v-deep .service-menu-item-active {
background-color: #ffffff !important; // 服务类选中项背景色为白色
}
::v-deep img {
max-width: 90% !important;
height: auto !important;
}
::v-deep video {
max-width: 90% !important;
height: auto !important;
}
::v-deep .rounded-corner-start {
border-radius: 10px 0 0 0 !important;
}
::v-deep.rounded-corner-end {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
/* 其他可能需要的样式 */
}
::v-deep.el-submenu .el-menu-item {
height: 39px;
line-height: 50px;
padding: 0 45px;
min-width: 200px;
}
::v-deep.el-submenu .el-submenu__title {
border-bottom-color: #1890ff;
height: 46px;
}
::v-deep.custom-tabs .el-tabs__nav .el-tabs__item {
padding: 0 20px;
height: 43px;
box-sizing: border-box;
line-height: 40px;
display: inline-block;
list-style: none;
font-size: 15px;
font-weight: 500;
color: #303133;
position: relative;
width: 120px;
text-align: center;
}
// ::v-deep.el-tabs .el-tabs__header.el-tabs__nav .el-tabs__item {
// color: #ff0000;
// /* 设置字体颜色 */
// }
::v-deep.el-tabs--card>.el-tabs__header .el-tabs__nav {
border: 1px none;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1):hover {
background-color: #165bff;
color: white;
border-radius: 10px 0 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2):hover {
background-color: #165bff;
color: white;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3):hover {
background-color: #165bff;
color: white;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4):hover {
background-color: #165bff;
color: white;
border-radius: 0 10px 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1).is-active {
background-color: #165bff;
color: white;
border-radius: 10px 0 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2).is-active {
background-color: #165bff;
color: white;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3).is-active {
background-color: #165bff;
color: white;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4).is-active {
background-color: #165bff;
color: white;
border-radius: 0 10px 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1) {
background-color: #d8e1eb;
color: black;
border-radius: 10px 0 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2) {
background-color: #d8e1eb;
color: black;
;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3) {
background-color: #d8e1eb;
color: black;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4) {
background-color: #d8e1eb;
color: black;
border-radius: 0 10px 0 0;
}
::v-deep.el-tabs .el-tabs__header {
padding: 0;
position: relative;
margin: 0 0 0px !important;
}
::v-deep.product-menu {
// 内层菜单展开时的背景色
.inner-submenu-active {
background-color: #ffffff; // 内层菜单背景色为白色
// 设置箭头图标颜色为蓝色
.el-submenu__icon-arrow {
color: #165BFF; // 改变箭头颜色
}
}
// 默认状态的箭头颜色
.el-submenu {
.el-submenu__icon-arrow {
color: #000; // 默认箭头颜色
}
}
}
::v-deep.product-menu .menu-item-active {
color: #165BFF !important;
/* 选中菜单项的字体颜色 */
}
::v-deep.product-menu .el-menu-item {
background-color: #ffffff;
/* 第三级菜单的背景色 */
}
// .text-align {
// display: flex;
// justify-content: flex-end;
// margin: 0px 10px;
// }
// .text {
// margin-left: auto;
// margin: 3px 15px;
// }
// .row {
// display: flex;
// flex-direction: row;
// align-items: inherit;
// justify-content: center;
// margin: 20px 0 20px -30px;
// }
// .box {
// position: relative;
// top: -20px;
// left: 0;
// margin-bottom: -20px;
// width: 100%;
// min-height: 102vh;
// background-image: url(../../assets/images/background1.png) !important;
// background-size: cover;
// background-repeat: no-repeat;
// background-position: left top;
// background-color: #f55202;
// }
.container {
overflow-y: auto;
// height: 1080px;
background-image: url(../../assets/images/background1.png) !important;
// background-size: cover;
background-size: 100% 60%;
background-repeat: no-repeat;
}
h1 {
text-align: center;
color: #333;
}
// .content {
// margin: 20px auto;
// max-width: 70%;
// min-height: calc(100vh - 420px);
// padding: 20px;
// background: #F5F8FE;
// border-radius: 10px 10px 0px 0px;
// /* 设置背景色 */
// border-radius: 10px;
// box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
// }
.bt {
text-indent: 3.6em;
margin: 20px auto;
/* max-width: 70%; */
width: 1200px;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow-y: auto;
}
h2 {
font-size: 24px;
color: #333;
margin-bottom: 15px;
font-family: "方正小标宋", "Fangzheng Xiaobiao Song", serif;
}
p {
font-size: 16px;
color: #555;
line-height: 1.6;
font-family: "FangSong_GB2312";
}
.title {
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 14px;
color: #c80000;
line-height: 30px;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.bttext {
font-family: PingFang SC;
font-weight: bold;
font-size: 14px;
color: #222222;
line-height: 26px;
margin-left: 10px;
text-decoration: none;
}
.bttext:hover {
color: #165bff;
text-decoration: underline;
}
.custom-title {
font-family: PingFang SC;
font-weight: 800;
font-size: 16px;
color: #165bff;
line-height: 26px;
}
</style>
src/views/zyyq/index copy 2.vue → src/views/zyyqsj/tzy/index.vue
<template> <template>
<div class="container"> <div class="container">
<el-row style="margin: 0px auto 150px ;">
<el-row style="margin: 150px auto 100px ;"> <div class="bjt">
<img src="../../assets/images/background.png" alt="" style=" <img src="../../../assets/images/background.png" alt="" style="
height: 111px; height: 111px;
width: 877px; width: 877px;
/* background-size: cover; /* background-size: cover;
...@@ -12,420 +12,514 @@ ...@@ -12,420 +12,514 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
object-fit: cover; */ object-fit: cover; */
" /> " />
</el-row>
</div>
<el-row class="content" style="background-color: #f5f8fe;"> </el-row>
<el-col :span="6" style="padding: 20px; border-radius: 10px; min-height: 700px; background-color: #f5f8fe;"> <el-row class="content" style="background-color: #f5f8fe;">
<el-menu :default-active="activeNameInner" class="product-menu" :background-color="'transparent'" <!-- 显示选项卡的内容 -->
:text-color="'#333'" :active-text-color="'#409EFF'"> <el-col v-if="activeNameOuter === '产品'" :span="24" :xs="24" :sm="24" :md="24"
<!-- 外层菜单 --> style="border-radius: 10px; height: 100%;width: auto; background-color: #f5f8fe;">
<el-submenu v-for="outerItem in collapseDataOuter" :key="outerItem.px" :index="outerItem.px" <div class="tabs">
@click.native="setActiveOuter(outerItem.name)"> <el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs">
<el-tab-pane label="产品简介" name="first" :class="{ 'custom-active1': activeName === 'first' }">
<template #title> <el-card style="width: 100%; height:100%; overflow-y: auto;">
<img src="../../assets/images/tag.png" alt=""> <div v-html="`<style>
<span .table-container table { border: 1px solid #888; border-collapse: collapse; }
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 23px; color: #222222; line-height: 40px;"> .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
{{ outerItem.mc }} </style>${cpjj}`"></div>
</span> </el-card>
</template> </el-tab-pane>
<el-tab-pane label="功能特点" name="second" :class="{ 'custom-active2': activeName === 'second' }">
<!-- 第二级菜单 --> <el-card style="width: 100%; height:100%; overflow-y: auto;">
<div v-html="`<style>
<el-submenu v-for="innerItem in outerItem.cpChildren .table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${gntd}`"></div>
" :key="innerItem.id" :index="innerItem.px" </el-card>
:class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }" </el-tab-pane>
@click.native="setActiveInner(innerItem.mc)"> <el-tab-pane label="应用成效" name="third" :class="{ 'custom-active3': activeName === 'third' }">
<template #title> <el-card style="width: 100%; height:100%; overflow-y: auto;">
<span <div v-html="`<style>
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 17px; color: #222222; line-height: 26px;"> .table-container table { border: 1px solid #888; border-collapse: collapse; }
{{ innerItem.mc }} .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</span> </style>${yycx}`"></div>
</template> </el-card>
</el-tab-pane>
<!-- 第三级菜单 --> <el-tab-pane label="用法介绍" name="fourth" :class="{ 'custom-active4': activeName === 'fourth' }">
<el-menu-item v-for="content in innerItem.children2" :key="content.id" <el-card style="width: 100%; height:100%; overflow-y: auto;">
:index="innerItem.name + '-' + content.mc" @click.native="setActiveInner(innerItem.name, content.mc)" <div v-html="`<style>
:class="{ 'menu-item-active': activeNameInner === innerItem.name + '-' + content.mc }"> .table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
<!-- 蓝色圆点 --> </style>${yfjs}`"></div>
<span :style="{ </el-card>
width: '6px', </el-tab-pane>
height: '6px', </el-tabs>
background: '#165BFF', <!-- <div class="remark">
borderRadius: '50%', <h2>{{ this.remark }}</h2>
display: 'inline-block', </div> -->
marginRight: '10px' </div>
}"></span> </el-col>
<!-- 外层折叠项 2 选中的内容 -->
<!-- 第三级菜单文本 --> <el-col v-else-if="activeNameOuter === '服务类'" :span="24" :xs="24" :sm="24" :md="24"
<span :style="{ style="border-radius: 10px; min-height: auto; background-color: #f5f8fe;">
fontFamily: 'PingFang SC', <div class="tabs">
fontWeight: '500', <el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs">
fontSize: '15px', <el-tab-pane label="团队介绍" name="first">
color: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : '#222222', <el-card style="width: 100%; height:100%; overflow-y: auto;">
textDecoration: activeNameInner === innerItem.name + '-' + content.mc ? 'underline' : 'none', <div v-html="`<style>
textDecorationColor: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : 'transparent', .table-container table { border: 1px solid #888; border-collapse: collapse; }
textUnderlineOffset: activeNameInner === innerItem.name + '-' + content.mc ? '8px' : '0' .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
}"> </style>${tdjs}`"></div>
{{ content.mc }} </el-card>
</span> </el-tab-pane>
</el-menu-item> <el-tab-pane label="服务特色" name="second">
</el-submenu> <el-card style="width: 100%; height:100%; overflow-y: auto;">
</el-submenu> <div v-html="`<style>
</el-menu> .table-container table { border: 1px solid #888; border-collapse: collapse; }
</el-col> .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
<!-- 显示选项卡的内容 --> </style>${fwts}`"></div>
<el-col v-if="activeNameOuter === 'outer1'" :span="18" </el-card>
style="border-radius: 10px; min-height: 700px; background-color: #f5f8fe;"> </el-tab-pane>
<el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs"> <el-tab-pane label="服务案例" name="third">
<el-tab-pane label="产品简介" name="first" :class="{ 'custom-active1': activeName === 'first' }"> <el-card style="width: 100%; height:100%; overflow-y: auto;">
<el-card style="width: 100%; min-height: 712px;"> <div v-html="`<style>
<div v-html="`<style> .table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table { border: 1px solid #888; border-collapse: collapse; } .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; } </style>${fwal}`"></div>
</style>${cpjj}`"></div> </el-card>
</el-card> </el-tab-pane>
</el-tab-pane> </el-tabs>
<el-tab-pane label="功能特点" name="second" :class="{ 'custom-active2': activeName === 'second' }"> <!-- <div class="remark">
<el-card style="width: 100%; min-height: 712px;"> <h2>{{ this.remark }}</h2>
<div v-html="`<style> </div> -->
.table-container table { border: 1px solid #888; border-collapse: collapse; } </div>
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; } </el-col>
</style>${gntd}`"></div> </el-row>
</el-card>
</el-tab-pane> </div>
<el-tab-pane label="应用成效" name="third" :class="{ 'custom-active3': activeName === 'third' }">
<el-card style="width: 100%; min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${yycx}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="用法介绍" name="fourth" :class="{ 'custom-active4': activeName === 'fourth' }">
<el-card style="width: 100%; height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${yfjs}`"></div>
</el-card>
</el-tab-pane>
</el-tabs>
</el-col>
<!-- 外层折叠项 2 选中的内容 -->
<el-col v-else-if="activeNameOuter === 'outer2'" :span="18"
style="border-radius: 10px; min-height: 700px; background-color: #f5f8fe;">
<el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs">
<el-tab-pane label="团队介绍" name="first">
<el-card style="width: 100%; min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${tdjs}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="服务特色" name="second">
<el-card style="width: 100%; min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${fwts}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="服务案例" name="third">
<el-card style="width: 100%; min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${fwal}`"></div>
</el-card>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</div>
</template> </template>
<script> <script>
import { getListcx, getListdt, } from "@/api/sy.js"; import { getListcx, getListdt, } from "@/api/sy.js";
export default { export default {
name: "gasDigitization", name: "gasDigitization",
// components: { footerNav }, // components: { footerNav },
data() {
return { data() {
cpjj: '', return {
gntd: '', remark: '', // 新增的remark属性
yycx: '', defaultOpeneds: [],// 根据需要初始化 defaultOpeneds
yfjs: '', selectedId: null, // 用于存储选中项的ID
tdjs: '', cpjj: '',
fwts: '', gntd: '',
fwal: '', yycx: '',
yfjs: '',
activeNameOuter: "", // 默认选中的第一级选项 tdjs: '',
activeNameInner: "", // 默认选中的第二级选项 fwts: '',
collapseDataOuter: [], fwal: '',
// collapseDataOuter: [ activeNameOuter: "产品", // 默认选中的第一级选项
// { activeNameInner: "", // 默认选中的第二级选项
// name: "outer1", collapseDataOuter: [],
// title: "外层折叠项 1", activeName: "first",
// collapseData: [ name: null,
// { ipdz: null,
// name: "1", yl1: null,
// title: "智能化办公", showDialog: false, // 控制对话框显示的变量
// contents: ["大模型", "会议系统", "数字员工"], form: {
// },
// { },
// name: "2",
// title: "生产化信息", };
// contents: ["大模型", "哈哈哈哈", "嘻嘻嘻嘻"],
// },
// ],
// },
// {
// name: "outer2",
// title: "外层折叠项 2",
// collapseData: [
// {
// name: "3",
// title: "基础设施",
// contents: ["999", "777", "666"],
// },
// {
// name: "4",
// title: "其他",
// contents: ["内容1", "内容2", "内容3"],
// },
// ],
// },
// ],
// -------------
activeName: "first",
name: null,
ipdz: null,
yl1: null,
showDialog: false, // 控制对话框显示的变量
form: {
},
};
},
computed: {},
mounted() {
this.getList();
// 设置默认选中的第一级和第二级
if (this.collapseDataOuter.length > 0) {
this.activeNameOuter = this.collapseDataOuter[0].name; // 默认选中第一个外层选项
const firstInner = this.collapseDataOuter[0].collapseData[0];
if (firstInner) {
this.activeNameInner = firstInner.name + '-' + firstInner.contents[0]; // 默认选中第一个内层选项
}
}
},
methods: {
setActiveOuter(name) {
this.activeNameOuter = name;
}, },
setActiveInner(innerName, content = '') { watch: {
if (content) { activeNameOuter(newValue) {
this.activeNameInner = innerName + '-' + content; console.log(newValue, 'newValue');
console.log('activeNameInner updated to:', this.activeNameInner); // 调试打印 if (newValue === '服务类') {
} const selectedItem = this.collapseDataOuter.find(item => item.mc === '智能化服务类');
if (selectedItem && selectedItem.fwlChildren.length > 0) {
const firstService = selectedItem.fwlChildren[0];
this.activeNameInner = `智能化服务类-${firstService.mc}`;
this.activeServiceId = firstService.id; // 设置 activeServiceId 为第一项的 ID
console.log(this.activeServiceId, 'Selected Service ID');
this.getListdt(this.activeServiceId);
}
} else if (newValue === '产品') {
const selectedItem = this.collapseDataOuter.find(item => item.mc === '软硬件产品');
if (selectedItem && selectedItem.cpChildren && selectedItem.cpChildren.length > 0) {
const firstProduct = selectedItem.cpChildren[0]; // 从 cpChildren 中获取第一个产品
if (firstProduct.children2 && firstProduct.children2.length > 0) {
const firstProductChild = firstProduct.children2[0]; // 从 children2 中获取第一个子产品
this.activeNameInner = `软硬件产品-${firstProductChild.mc}`;
this.activeServiceId = firstProductChild.id; // 设置 activeServiceId 为第一项的 ID
console.log(this.activeServiceId, 'Selected Product ID');
this.getListdt(this.activeServiceId);
}
}
}
}
}, },
isInnerActive(innerName) { mounted() {
return this.activeNameInner.startsWith(innerName); // 判断是否为活动状态
}, const serviceId = this.$route.query.id;
handleChange(val) { if (serviceId) {
console.log(val); // 调用接口获取数据
}, this.getListdt(serviceId);
handleClick(tab, event) { }
this.activeName = tab.name; // 确保更新activeName
console.log(this.activeName, ' this.activeName');
},
getList() {
getListcx().then(res => {
console.log('res', res)
this.collapseDataOuter = res.data;
// this.cpjj = res.data.bmjjwh
// this.gntd = res.data.zzld
// this.yycx = res.data.sjglry
// this.yfjs = res.data.sjglry
})
}, },
methods: {
setActiveOuter(cplx) {
this.activeNameOuter = cplx; // 设置选中的外层菜单类型
this.activeNameInner = ''; // 清空内层选中的状态
// 查找对应的外层菜单项
const selectedOuterItem = this.collapseDataOuter.find(item => item.cplx === cplx);
if (selectedOuterItem) {
// 处理产品类型的情况
if (cplx === '产品') {
if (selectedOuterItem.cpChildren && selectedOuterItem.cpChildren.length > 0) {
const firstInnerItem = selectedOuterItem.cpChildren[0];
const firstContent = firstInnerItem.children2 && firstInnerItem.children2[0]; // 确保存在内容
if (firstContent) {
this.setActiveInner(firstInnerItem.name, firstContent.mc, firstContent.id, firstContent.zx); // 传递 zx
this.displaySelectedInfo(firstInnerItem.name, firstContent); // 展示选中的信息
}
}
} else if (cplx === '服务类') {
if (selectedOuterItem.fwlChildren && selectedOuterItem.fwlChildren.length > 0) {
const firstService = selectedOuterItem.fwlChildren[0]; // 默认选中第一个服务
this.setActiveInner(selectedOuterItem.mc, firstService.mc, null, firstService.id, firstService.zx); // 传递 zx
this.displaySelectedInfo(selectedOuterItem.mc, firstService); // 展示选中的信息
}
}
// 设置展开的菜单项
this.defaultOpeneds = [selectedOuterItem.px]; // 展开外层菜单
}
},
displaySelectedInfo(menuName, content) {
// 在这里更新展示选中的内容的信息
// 你可以根据需要展示的内容更新相应的数据属性
this.selectedMenuName = menuName; // 例如设置当前选中的菜单名称
this.selectedContent = content; // 设置当前选中的内容
// 其他逻辑，例如更新界面中的某些元素的显示
},
getList() {
getListcx().then(res => {
console.log('res', res);
this.collapseDataOuter = res.data;
// 获取数据后，设置默认选中的第一个外层和内层菜单项
if (this.collapseDataOuter.length > 0) {
const firstOuterItem = this.collapseDataOuter[0];
this.activeNameOuter = firstOuterItem.cplx;
if (firstOuterItem.cpChildren && firstOuterItem.cpChildren.length > 0) {
const firstInnerItem = firstOuterItem.cpChildren[0];
const firstContent = firstInnerItem.children2[0]; // 假设有第三级菜单内容
// 默认选中第一项
this.setActiveInner(firstInnerItem.mc, firstContent.mc, firstContent.id);
// 设置展开的菜单项
this.defaultOpeneds = [firstOuterItem.px, firstInnerItem.px]; // 外层和内层菜单都展开
}
}
});
},
setActiveOuter(cplx) {
this.activeNameOuter = cplx;
console.log('Outer menu set to:', this.activeNameOuter);
},
handleInnerClick(innerName, contentName, contentId) {
this.activeNameInner = `${innerName}-${contentName}`;
// 处理内容相关的逻辑，比如获取内容等
this.getListdt(contentId);
},
handleServiceClick(outerName, serviceName, serviceId) {
this.activeNameInner = `${outerName}-${serviceName}`;
// 处理服务相关的逻辑，比如获取内容等
this.getListdt(serviceId);
},
setActiveInner(innerName, content = '', id = null) {
if (content) {
this.activeNameInner = `${innerName}-${content}`;
console.log(this.activeNameInner, 'this.activeNameInner');
this.selectedId = id; // 更新选中项的ID
console.log('activeNameInner updated to:', this.activeNameInner);
this.getListdt(this.selectedId); // 获取内容数据
}
},
getListdt(id) {
// 假设你的getListdt接口是一个异步函数
getListdt(id).then(res => {
console.log('12222:', res.data.remark);
this.cpjj = res.data.cpjj
this.gntd = res.data.gntd
this.yycx = res.data.yycx
this.yfjs = res.data.yfjs
this.tdjs = res.data.tdjs
this.fwts = res.data.fwts
this.fwal = res.data.fwal
this.remark = res.data.remark
// 在这里处理返回的数据
}).catch(error => {
console.error('Error fetching data:', error);
});
},
isInnerActive(innerName) {
return this.activeNameInner.startsWith(innerName); // 判断是否为活动状态
},
handleChange(val) {
console.log(val);
},
handleClick(tab, event) {
this.activeName = tab.name; // 确保更新activeName
console.log(this.activeName, ' this.activeName');
},
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@media (max-width: 1199px) {
.bjt {
height: 150px;
// background: rgba(255, 255, 255, 0.9);
position: fixed;
left: 0;
top: 0;
width: 100%;
padding: 0 15px;
z-index: 20;
box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.06);
display: block;
}
}
::v-deep.tabs {
display: flex;
align-items: flex-start;
}
::v-deep.custom-tabs {
flex-grow: 1;
// padding-right: 10px
}
::v-deep.remark {
position: absolute;
top: 5px;
/* 向上移动 */
right: 30px;
/* 向左移动 */
white-space: nowrap;
font-size: 18px;
font-weight: bold;
}
::v-deep.menu-item-active {
background-color: #ffffff;
/* 选中项背景白色 */
}
::v-deep.related-menu-item-active {
background-color: #ffffff;
/* 兄弟项背景白色 */
}
::v-deep .service-menu-item-active {
background-color: #ffffff !important; // 服务类选中项背景色为白色
}
::v-deep img {
max-width: 90% !important;
height: auto !important;
}
::v-deep video {
max-width: 90% !important;
height: auto !important;
}
::v-deep .rounded-corner-start { ::v-deep .rounded-corner-start {
border-radius: 10px 0 0 0 !important; border-radius: 10px 0 0 0 !important;
} }
::v-deep.rounded-corner-end { ::v-deep.rounded-corner-end {
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
/* 其他可能需要的样式 */ /* 其他可能需要的样式 */
} }
::v-deep.el-submenu .el-menu-item { ::v-deep.el-submenu .el-menu-item {
height: 39px; height: 39px;
line-height: 50px; line-height: 50px;
padding: 0 45px; padding: 0 45px;
min-width: 200px; min-width: 200px;
} }
::v-deep.el-submenu .el-submenu__title { ::v-deep.el-submenu .el-submenu__title {
border-bottom-color: #1890ff; border-bottom-color: #1890ff;
height: 46px; height: 46px;
} }
::v-deep.custom-tabs .el-tabs__nav .el-tabs__item { ::v-deep.custom-tabs .el-tabs__nav .el-tabs__item {
padding: 0 20px; // padding: 0 20px;
height: 43px; height: 43px;
box-sizing: border-box; box-sizing: border-box;
line-height: 40px; line-height: 40px;
display: inline-block; display: inline-block;
list-style: none; list-style: none;
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
color: #303133; color: #303133;
position: relative; position: relative;
width: 120px; width: auto;
text-align: center; text-align: center;
} }
::v-deep.el-tabs .el-tabs__header.el-tabs__nav .el-tabs__item { // ::v-deep.el-tabs .el-tabs__header.el-tabs__nav .el-tabs__item {
color: #ff0000; // color: #ff0000;
/* 设置字体颜色 */ // /* 设置字体颜色 */
} // }
::v-deep.el-tabs--card>.el-tabs__header .el-tabs__nav { ::v-deep.el-tabs--card>.el-tabs__header .el-tabs__nav {
border: 1px none; border: 1px none;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1):hover { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(1):hover {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 10px 0 0 0; border-radius: 10px 0 0 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2):hover { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(2):hover {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0; border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3):hover { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(3):hover {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0; border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4):hover { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(4):hover {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0 10px 0 0; border-radius: 0 10px 0 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1).is-active { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(1).is-active {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 10px 0 0 0; border-radius: 10px 0 0 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2).is-active { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(2).is-active {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0; border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3).is-active { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(3).is-active {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0; border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4).is-active { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(4).is-active {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0 10px 0 0; border-radius: 0 10px 0 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1) { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(1) {
background-color: #d8e1eb; background-color: #d8e1eb;
color: black; color: black;
border-radius: 10px 0 0 0; border-radius: 10px 0 0 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2) { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(2) {
background-color: #d8e1eb; background-color: #d8e1eb;
color: black; color: black;
; ;
border-radius: 0; border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3) { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(3) {
background-color: #d8e1eb; background-color: #d8e1eb;
color: black; color: black;
border-radius: 0; border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4) { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(4) {
background-color: #d8e1eb; background-color: #d8e1eb;
color: black; color: black;
border-radius: 0 10px 0 0; border-radius: 0 10px 0 0;
} }
::v-deep.el-tabs .el-tabs__header { ::v-deep.el-tabs .el-tabs__header {
padding: 0; padding: 0;
position: relative; position: relative;
margin: 0 0 0px !important; margin: 0 0 0px !important;
} }
::v-deep.product-menu { ::v-deep.product-menu {
// 内层菜单展开时的背景色 // 内层菜单展开时的背景色
.inner-submenu-active { .inner-submenu-active {
background-color: #ffffff; // 内层菜单背景色为白色 background-color: #ffffff; // 内层菜单背景色为白色
// 设置箭头图标颜色为蓝色 // 设置箭头图标颜色为蓝色
.el-submenu__icon-arrow { .el-submenu__icon-arrow {
color: #165BFF; // 改变箭头颜色 color: #165BFF; // 改变箭头颜色
}
} }
}
// 默认状态的箭头颜色 // 默认状态的箭头颜色
.el-submenu { .el-submenu {
.el-submenu__icon-arrow { .el-submenu__icon-arrow {
color: #000; // 默认箭头颜色 color: #000; // 默认箭头颜色
}
} }
}
} }
::v-deep.product-menu .menu-item-active { ::v-deep.product-menu .menu-item-active {
color: #165BFF !important; color: #165BFF !important;
/* 选中菜单项的字体颜色 */ /* 选中菜单项的字体颜色 */
} }
::v-deep.product-menu .el-menu-item { ::v-deep.product-menu .el-menu-item {
background-color: #ffffff; background-color: #ffffff;
/* 第三级菜单的背景色 */ /* 第三级菜单的背景色 */
} }
// .text-align { // .text-align {
...@@ -463,43 +557,42 @@ export default { ...@@ -463,43 +557,42 @@ export default {
// } // }
.container { .container {
overflow-y: auto; overflow-y: auto;
height: 1080px; // height: 1080px;
background-image: url(../../assets/images/background1.png) !important; background-image: url(../../../assets/images/background1.png) !important;
// background-size: cover; // background-size: cover;
background-size: 100% 60%; background-size: 100% 60%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
h1 { h1 {
text-align: center; text-align: center;
color: #333; color: #333;
} }
.content { .content {
margin: 20px auto; // margin: 20px auto;
max-width: 70%; width: auto;
min-height: calc(100vh - 420px); // min-height: calc(100vh - 420px);
padding: 20px; // padding: 20px;
background: #F5F8FE; background: #F5F8FE;
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
/* 设置背景色 */ /* 设置背景色 */
border-radius: 10px; border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
} }
.bt { .bt {
text-indent: 3.6em; text-indent: 3.6em;
margin: 20px auto; margin: 20px auto;
/* max-width: 70%; */ /* max-width: 70%; */
width: 1200px; width: 1200px;
padding: 20px; padding: 20px;
background-color: #ffffff; background-color: #ffffff;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow-y: auto; overflow-y: auto;
} }
...@@ -507,17 +600,17 @@ h1 { ...@@ -507,17 +600,17 @@ h1 {
h2 { h2 {
font-size: 24px; font-size: 24px;
color: #333; color: #333;
margin-bottom: 15px; margin-bottom: 15px;
font-family: "方正小标宋", "Fangzheng Xiaobiao Song", serif; font-family: "方正小标宋", "Fangzheng Xiaobiao Song", serif;
} }
p { p {
font-size: 16px; font-size: 16px;
color: #555; color: #555;
line-height: 1.6; line-height: 1.6;
font-family: "FangSong_GB2312"; font-family: "FangSong_GB2312";
} }
...@@ -525,42 +618,42 @@ p { ...@@ -525,42 +618,42 @@ p {
.title { .title {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
color: #c80000; color: #c80000;
line-height: 30px; line-height: 30px;
} }
.flex { .flex {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
} }
.bttext { .bttext {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
color: #222222; color: #222222;
line-height: 26px; line-height: 26px;
margin-left: 10px; margin-left: 10px;
text-decoration: none; text-decoration: none;
} }
.bttext:hover { .bttext:hover {
color: #165bff; color: #165bff;
text-decoration: underline; text-decoration: underline;
} }
.custom-title { .custom-title {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 800; font-weight: 800;
font-size: 16px; font-size: 16px;
color: #165bff; color: #165bff;
line-height: 26px; line-height: 26px;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment