首页会话功能

src/assets/images/vent/home/Fold.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.761" height="16.761" viewBox="0 0 16.761 16.761">
+  <g id="展开" transform="translate(0 16.761) rotate(-90)">
+    <path id="路径_57023" data-name="路径 57023" d="M2.514,15.084a.838.838,0,0,1-.839-.838V2.514a.839.839,0,0,1,.839-.838H14.246a.839.839,0,0,1,.839.838V14.247a.838.838,0,0,1-.839.838H2.514ZM0,14.247a2.514,2.514,0,0,0,2.514,2.514H14.246a2.514,2.514,0,0,0,2.514-2.514V2.514A2.514,2.514,0,0,0,14.246,0H2.514A2.514,2.514,0,0,0,0,2.514V14.247Z" transform="translate(0 0)" fill="#fff"/>
+    <path id="路径_57024" data-name="路径 57024" d="M0,.839a.838.838,0,0,0,.838.838H15.923a.838.838,0,1,0,0-1.676H.838A.838.838,0,0,0,0,.839ZM6.111,5.274a.838.838,0,0,1,1.186,0L8.38,6.357,9.463,5.274a.838.838,0,1,1,1.186,1.186L8.972,8.135a.838.838,0,0,1-1.185,0L6.111,6.459a.838.838,0,0,1,0-1.186Z" transform="translate(0 4.19)" fill="#fff"/>
+    <path id="路径_57025" data-name="路径 57025" d="M.838,6.7a.838.838,0,0,0,.838-.838V.838A.838.838,0,0,0,0,.838V5.866A.838.838,0,0,0,.838,6.7Zm15.085,0a.838.838,0,0,0,.838-.838V.838a.838.838,0,0,0-1.675,0V5.866A.838.838,0,0,0,15.923,6.7Z" transform="translate(0 1.677)" fill="#fff"/>
+  </g>
+</svg>

src/assets/images/vent/home/add.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.979" height="15.978" viewBox="0 0 15.979 15.978">
+  <path id="添加对话" d="M70.415,62.7A7.989,7.989,0,1,0,78.4,70.685,7.989,7.989,0,0,0,70.415,62.7Zm4.788,8.9H71.3V75.5H69.48V71.594H65.575V69.776H69.48V65.871H71.3v3.905H75.2Z" transform="translate(-62.426 -62.696)" fill="#2cb6ff"/>
+</svg>

src/assets/images/vent/home/addB.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.978" height="15.978" viewBox="0 0 15.978 15.978">
+  <path id="路径_57020" data-name="路径 57020" d="M70.415,62.7A7.989,7.989,0,1,0,78.4,70.685,7.989,7.989,0,0,0,70.415,62.7Zm4.788,8.9H71.3V75.5H69.48V71.594H65.575V69.776H69.48V65.871H71.3v3.905H75.2Z" transform="translate(-62.426 -62.696)" fill="#fff"/>
+</svg>

src/assets/images/vent/home/history.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.03" height="13" viewBox="0 0 13.03 13">
+  <path id="历史对话" d="M115.055,185.072a5.7,5.7,0,0,0-.13,1.042,4.532,4.532,0,0,0,4.56,4.56,3.935,3.935,0,0,0,1.954-.456v2.476a1.752,1.752,0,0,1-1.759,1.759H117.01l-.977,1.173a.557.557,0,0,1-.847.065.064.064,0,0,1-.065-.065l-.977-1.173h-2.671a1.752,1.752,0,0,1-1.759-1.759v-5.863a1.752,1.752,0,0,1,1.759-1.759Zm4.43,4.3a3.257,3.257,0,1,1,3.257-3.257A3.226,3.226,0,0,1,119.485,189.372Zm.391-3.648v-1.368a.4.4,0,1,0-.782,0v1.694a.239.239,0,0,0,.065.2.358.358,0,0,0,.326.2h1.173a.4.4,0,1,0,0-.782h-.782Z" transform="translate(-109.713 -182.857)" fill="#fff"/>
+</svg>

src/assets/images/vent/home/send.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.945" height="14.121" viewBox="0 0 16.945 14.121">
+  <path id="发送" d="M80.493,139.058l-15.47,5.969c-.872.336-.85.825.044,1.091l3.738,1.109,1.52,4.522a.648.648,0,0,0,1.163.276l1.961-1.942,3.87,2.836a.682.682,0,0,0,1.156-.437L81.3,139.757C81.435,139.147,81.074,138.834,80.493,139.058Zm-2.354,2.877-6.6,5.879a.844.844,0,0,0-.243.47l-.291,2.739c-.033.308-.139.32-.237.025L69.493,147.2a.368.368,0,0,1,.152-.415l8.368-5.019C78.547,141.446,78.6,141.522,78.139,141.935Z" transform="translate(-64.383 -138.985)" fill="#fff"/>
+</svg>

src/assets/images/vent/home/sendFile.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.584" height="12.224" viewBox="0 0 13.584 12.224">
+  <path id="附件" d="M12.935,62.838a3.275,3.275,0,0,1,.746,1.123,3.459,3.459,0,0,1,0,2.553,3.275,3.275,0,0,1-.746,1.123l-5.343,5.3a4.185,4.185,0,0,1-1.235.837,4.419,4.419,0,0,1-1.549.391,4.361,4.361,0,0,1-1.667-.223,3.986,3.986,0,0,1-1.576-1A3.971,3.971,0,0,1,.574,71.4a4.246,4.246,0,0,1-.223-1.653A4.461,4.461,0,0,1,.734,68.2a4.1,4.1,0,0,1,.83-1.228l4.743-4.7a.364.364,0,0,1,.37-.063.791.791,0,0,1,.37.188.945.945,0,0,1,.181.37.354.354,0,0,1-.056.37L2.443,67.818a3.351,3.351,0,0,0-.628.879,2.842,2.842,0,0,0-.293,1.074A2.806,2.806,0,0,0,1.69,70.93a3.084,3.084,0,0,0,.753,1.13,2.8,2.8,0,0,0,1.081.691,3.06,3.06,0,0,0,1.179.167,3.371,3.371,0,0,0,1.116-.258,2.805,2.805,0,0,0,.907-.6l5.329-5.287a2.335,2.335,0,0,0,.537-.781,2.064,2.064,0,0,0,.153-.8,1.842,1.842,0,0,0-.188-.774,2.551,2.551,0,0,0-.5-.7,1.756,1.756,0,0,0-1.346-.551,2.326,2.326,0,0,0-1.5.788L4.4,68.739a.961.961,0,0,0-.314.712.893.893,0,0,0,.258.642.8.8,0,0,0,.7.251,1.105,1.105,0,0,0,.649-.307L10.061,65.7a.364.364,0,0,1,.37-.063.791.791,0,0,1,.37.188.841.841,0,0,1,.2.37.354.354,0,0,1-.056.37L6.559,70.9a3.158,3.158,0,0,1-.963.7,1.957,1.957,0,0,1-.865.174,1.7,1.7,0,0,1-.753-.216,3.181,3.181,0,0,1-.642-.474,2.235,2.235,0,0,1-.426-.572,1.854,1.854,0,0,1-.216-.767,2.167,2.167,0,0,1,.146-.893,2.674,2.674,0,0,1,.677-.963q.251-.251.446-.46.167-.181.314-.321l.16-.153,3.892-3.878a4.011,4.011,0,0,1,1.1-.788,3.272,3.272,0,0,1,1.207-.328,2.981,2.981,0,0,1,1.207.167A2.924,2.924,0,0,1,12.935,62.838Z" transform="translate(-0.341 -61.952)" fill="#fff"/>
+</svg>

src/assets/images/vent/home/sendImg.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.584" height="13.584" viewBox="0 0 13.584 13.584">
+  <path id="图片" d="M104.731,108.591l-2.122-2.652a.97.97,0,0,0-1.363-.152,1.029,1.029,0,0,0-.152.152l-3.123,3.9h11.643L107.478,107a.971.971,0,0,0-1.358-.195,1,1,0,0,0-.195.195ZM97.97,98.2h11.643a.97.97,0,0,1,.97.97v11.643a.97.97,0,0,1-.97.97H97.97a.97.97,0,0,1-.97-.97V99.17A.971.971,0,0,1,97.97,98.2Zm8.732,5.822a1.941,1.941,0,1,0-1.941-1.941A1.941,1.941,0,0,0,106.7,104.022Z" transform="translate(-97 -98.2)" fill="#fff"/>
+</svg>

src/assets/images/vent/home/unfold.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.761" height="16.761" viewBox="0 0 16.761 16.761">
+  <g id="收起" transform="translate(-85.351 102.11) rotate(-90)">
+    <path id="路径_57023" data-name="路径 57023" d="M87.864,87.027a.838.838,0,0,0-.839.838V99.6a.839.839,0,0,0,.839.838H99.6a.839.839,0,0,0,.839-.838V87.865a.838.838,0,0,0-.839-.838H87.864Zm-2.514.838a2.514,2.514,0,0,1,2.514-2.514H99.6a2.514,2.514,0,0,1,2.514,2.514V99.6a2.514,2.514,0,0,1-2.514,2.514H87.864A2.514,2.514,0,0,1,85.35,99.6V87.865Z" transform="translate(0 0)" fill="#fff"/>
+    <path id="路径_57024" data-name="路径 57024" d="M85.35,306.244a.838.838,0,0,1,.838-.838h15.084a.838.838,0,0,1,0,1.676H86.188a.838.838,0,0,1-.838-.839Zm6.111-4.435a.838.838,0,0,0,1.186,0l1.083-1.083,1.083,1.083A.838.838,0,1,0,96,300.623l-1.676-1.675a.838.838,0,0,0-1.185,0l-1.676,1.675a.838.838,0,0,0,0,1.186Z" transform="translate(0 -209.162)" fill="#fff"/>
+    <path id="路径_57025" data-name="路径 57025" d="M86.188,512a.838.838,0,0,1,.838.838v5.028a.838.838,0,0,1-1.675,0v-5.028A.838.838,0,0,1,86.188,512Zm15.084,0a.838.838,0,0,1,.838.838v5.028a.838.838,0,0,1-1.675,0v-5.028A.838.838,0,0,1,101.273,512Z" transform="translate(0 -418.27)" fill="#fff"/>
+  </g>
+</svg>

src/layouts/default/sider/bottomSideder2.vue

@@ -0,0 +1,348 @@
+<template>
+  <div>
+    <div class="trigger-button">
+      <div class="icon" @click="openMenu"></div>
+    </div>
+    <div v-if="dialogVisible" class="dialog-overlay">
+      <!-- 左侧折叠区域 -->
+      <div class="left-side" :class="{ collapsed: isFold }" id="leftSide">
+        <div
+          class="addBtn"
+          :style="{
+            backgroundImage: `url(${isFold ? '/src/assets/images/vent/home/add.svg' : ''})`,
+            backgroundColor: isFold ? '' : '#2cb6ff',
+            width: isFold ? '20px' : 'auto',
+          }"
+          @click="fold"
+        >
+          <span
+            class="btn-text-bg"
+            :style="{
+              backgroundImage: `url(${!isFold ? '/src/assets/images/vent/home/addB.svg' : ''})`,
+            }"
+          ></span>
+          <span v-if="!isFold" class="btn-text">添加新对话</span>
+        </div>
+        <div class="divider0"></div>
+        <div
+          v-if="isFold"
+          class="historyBtn"
+          :style="{ backgroundImage: `url(${isFold ? '/src/assets/images/vent/home/history.svg' : '/src/assets/images/vent/home/history.svg'})` }"
+          @click="addNew"
+        ></div>
+        <div v-else class="historyBtn1">
+          <span
+            class="btn-text-bg"
+            :style="{
+              backgroundImage: `url(${!isFold ? '/src/assets/images/vent/home/history.svg' : ''})`,
+            }"
+          ></span>
+          <span v-if="!isFold" class="btn-text">历史对话</span>
+          <a-list style="width: 100px" :split="false">
+            <a-list-item style="padding: 5px 0 0 30px; color: #5e7081; font-size: 12px; white-space: nowrap; text-overflow: ellipsis"
+              >历史数据1</a-list-item
+            >
+            <a-list-item style="padding: 5px 0 0 30px; color: #5e7081; font-size: 12px; white-space: nowrap; text-overflow: ellipsis"
+              >历史数据12</a-list-item
+            >
+            <a-list-item style="padding: 5px 0 0 30px; color: #5e7081; font-size: 12px; white-space: nowrap; text-overflow: ellipsis"
+              >历史数据123</a-list-item
+            >
+          </a-list>
+        </div>
+        <div
+          class="foldBtn"
+          :style="{ backgroundImage: `url(${isFold ? '/src/assets/images/vent/home/Fold.svg' : '/src/assets/images/vent/home/unfold.svg'})` }"
+          @click="fold"
+        ></div>
+      </div>
+      <!-- 右侧对话框 -->
+      <div class="right-side">
+        <div class="input-content">
+          <!-- 对话区域 -->
+          <div class="dialog-area">
+            <div class="ask-message">
+              <span>提问提问提问</span>
+            </div>
+            <div class="answer" style="margin-top: 65px">
+              <div class="answerIcon"></div>
+              <div class="answer-message">
+                <span>回答回答回答回答回答</span>
+              </div>
+            </div>
+          </div>
+          <!-- 文本输入区域 -->
+          <div class="input-area">
+            <textarea v-model="inputText" placeholder="请输入你的问题"> </textarea>
+            <!-- 底部操作栏 -->
+            <div class="action-bar">
+              <!-- 文件上传按钮 -->
+              <label class="upload-btn">
+                <div class="send-file" />
+                <span class="divider"> | </span>
+                <div class="send-img" />
+              </label>
+              <!-- 发送按钮 -->
+              <div class="send-btn" @keydown.enter.prevent="handleSend"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, nextTick } from 'vue';
+
+// 响应式变量声明
+const dialogVisible = ref(false);
+const isFold = ref(false); // 是否折叠
+const inputText = ref(''); // 输入框内容
+const messages = ref([]); // 消息列表
+const openMenu = () => {
+  dialogVisible.value = !dialogVisible.value;
+};
+const fold = () => {
+  isFold.value = !isFold.value;
+};
+const addNew = () => {
+  console.log('addNew');
+};
+const handleSend = () => {
+  if (inputText.value) {
+    messages.value.push({ text: inputText.value });
+    inputText.value = '';
+  }
+};
+
+// 初始化按钮定位
+onMounted(() => {});
+</script>
+
+<style lang="less" scoped>
+@keyframes menuShow {
+  0% {
+    width: 0;
+    height: 0;
+  }
+  100% {
+    width: 480px;
+    height: 100vh;
+  }
+}
+.trigger-button {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  z-index: 1000000;
+  .icon {
+    width: 60px;
+    height: 60px;
+    position: relative;
+    background-image: url('/@/assets/images/vent/home/wakeBtn.png');
+    background-position: center;
+    background-size: 100% 100%;
+  }
+}
+.dialog-overlay {
+  width: 32%;
+  height: 55%;
+  z-index: 999;
+  display: flex;
+  position: fixed;
+  right: 90px;
+  bottom: 20px;
+  box-shadow: 0 0 3px 3px #1074c1;
+  background-color: #09172c;
+}
+.left-side {
+  background: #0c2842;
+  transition: width 0.5s ease; /* 平滑过渡动画 */
+  width: 120px; /* 展开时宽度 */
+  position: relative; /* 用于按钮定位 */
+}
+.left-side.collapsed {
+  width: 40px; /* 折叠时宽度 */
+}
+
+.addBtn {
+  height: 30px;
+  position: absolute;
+  background-size: 100% 100%;
+  background-position: center;
+  padding: 2px;
+  right: 10px;
+  top: 10px;
+  left: 10px;
+  align-items: center;
+  border-radius: 3px;
+}
+.btn-text-bg {
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  background-size: 100% 100%;
+  right: 10px;
+  top: 9px;
+  left: 10px;
+  bottom: 10px;
+}
+.btn-text {
+  margin-left: 3px;
+  font-size: 12px;
+  color: #fff;
+  white-space: nowrap;
+  margin-left: 30px;
+  line-height: 26px;
+}
+.historyBtn {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  background-size: 100% 100%;
+  background-position: center;
+  padding: 2px;
+  right: 10px;
+  top: 100px;
+}
+.historyBtn1 {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  background-size: 100% 100%;
+  background-position: center;
+  left: 3px;
+  top: 80px;
+}
+.divider0 {
+  border-bottom: 1px solid #1074c1;
+  width: auto;
+  margin: 0 10px;
+  height: 13%;
+  display: block;
+  background: transparent;
+}
+.foldBtn {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  background-size: 100% 100%;
+  background-position: center;
+  padding: 2px;
+  right: 10px;
+  bottom: 10px;
+}
+
+.right-side {
+  flex: 1; /* 占据剩余空间 */
+  background: #09172c;
+}
+
+.input-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end; /* 内容底部对齐 */
+  height: 100%;
+  padding: 20px; /* 统一内边距 */
+}
+.ask-message {
+  float: right;
+  max-width: 70%;
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+  color: #fff;
+  background: #0c2842;
+}
+.answer {
+  display: flex;
+  flex-direction: row;
+}
+.answerIcon {
+  margin-top: 10px;
+  width: 35px;
+  height: 35px;
+  background-image: url('/@/assets/images/vent/home/answerIcon.svg');
+  background-size: 100% 100%;
+}
+.answer-message {
+  float: left;
+  max-width: 80%;
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+  color: #fff;
+  background: #0c2842;
+}
+.dialog-area {
+  flex: 1; /* 占据剩余空间 */
+  gap: 10px;
+  overflow-y: auto; /* 垂直滚动条 */
+  margin-bottom: 10px;
+}
+.input-area {
+  background-color: #043256 !important;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+textarea {
+  background-color: #043256 !important;
+  width: 100%;
+  height: 40px;
+  border: none;
+  resize: none;
+  outline: none;
+  overflow: hidden;
+  padding: 10px; /* 统一内边距 */
+  color: #fff;
+}
+
+.action-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.upload-btn {
+  display: flex;
+  cursor: pointer;
+  padding: 6px 12px;
+}
+
+.divider {
+  color: #ccc;
+  font-weight: 300;
+  margin: 0 10px;
+}
+
+.send-file {
+  width: 20px;
+  height: 20px;
+  background-image: url('/@/assets/images/vent/home/sendFile.svg');
+  background-size: 100% 100%;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.send-img {
+  width: 20px;
+  height: 20px;
+  background-image: url('/@/assets/images/vent/home/sendImg.svg');
+  background-size: 100% 100%;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.send-btn {
+  width: 20px;
+  height: 20px;
+  margin-left: auto;
+  margin-right: 10px;
+  background-color: #1074c1;
+  background-image: url('/@/assets/images/vent/home/send.svg');
+  background-position: center;
+  background-size: 100% 100%;
+  border-radius: 2px;
+  cursor: pointer;
+}
+</style>

src/layouts/default/sider/index.vue

@@ -14,62 +14,64 @@
   <BottomSider v-else-if="getIsBottomMenu" />
   <Sider v-else /> -->
   <BottomSider v-if="!noSiderLink.includes(routePath)" />
+  <BottomSider2 v-if="!noSiderLink.includes(routePath)" />
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+import { defineComponent } from 'vue';
 
-  import Sider from './LayoutSider.vue';
-  import MixSider from './MixSider.vue';
-  import BottomSider from './bottomSideder.vue';
-  import { Drawer } from 'ant-design-vue';
+import Sider from './LayoutSider.vue';
+import MixSider from './MixSider.vue';
+import BottomSider from './bottomSideder.vue';
+import BottomSider2 from './bottomSideder2.vue';
+import { Drawer } from 'ant-design-vue';
 
-  import { useAppInject } from '/@/hooks/web/useAppInject';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useRoute } from 'vue-router';
-  import { noSiderLink } from '../layout.data';
-  export default defineComponent({
-    name: 'SiderWrapper',
-    components: { Sider, Drawer, MixSider, BottomSider },
-    setup() {
-      const route = useRoute();
-      const { prefixCls } = useDesign('layout-sider-wrapper');
-      const { getIsMobile } = useAppInject();
-      const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar, getIsBottomMenu, getIsBottomMenuH, getShowSidebar } = useMenuSetting();
-      function handleClose() {
-        setMenuSetting({
-          collapsed: true,
-        });
-      }
+import { useAppInject } from '/@/hooks/web/useAppInject';
+import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { useDesign } from '/@/hooks/web/useDesign';
+import { useRoute } from 'vue-router';
+import { noSiderLink } from '../layout.data';
+export default defineComponent({
+  name: 'SiderWrapper',
+  components: { Sider, Drawer, MixSider, BottomSider, BottomSider2 },
+  setup() {
+    const route = useRoute();
+    const { prefixCls } = useDesign('layout-sider-wrapper');
+    const { getIsMobile } = useAppInject();
+    const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar, getIsBottomMenu, getIsBottomMenuH, getShowSidebar } = useMenuSetting();
+    function handleClose() {
+      setMenuSetting({
+        collapsed: true,
+      });
+    }
 
-      return {
-        prefixCls,
-        getIsMobile,
-        getCollapsed,
-        handleClose,
-        getMenuWidth,
-        getIsMixSidebar,
-        getIsBottomMenu,
-        getIsBottomMenuH,
-        getShowSidebar,
-        routePath: route.path,
-        noSiderLink,
-      };
-    },
-  });
+    return {
+      prefixCls,
+      getIsMobile,
+      getCollapsed,
+      handleClose,
+      getMenuWidth,
+      getIsMixSidebar,
+      getIsBottomMenu,
+      getIsBottomMenuH,
+      getShowSidebar,
+      routePath: route.path,
+      noSiderLink,
+    };
+  },
+});
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-layout-sider-wrapper';
-  @ventSpace: zxm;
+@prefix-cls: ~'@{namespace}-layout-sider-wrapper';
+@ventSpace: zxm;
 
-  .@{prefix-cls} {
-    .@{ventSpace}-drawer-body {
-      height: 100vh;
-      padding: 0;
-    }
+.@{prefix-cls} {
+  .@{ventSpace}-drawer-body {
+    height: 100vh;
+    padding: 0;
+  }
 
-    .@{ventSpace}-drawer-header-no-title {
-      display: none;
-    }
+  .@{ventSpace}-drawer-header-no-title {
+    display: none;
   }
+}
 </style>

src/views/vent/monitorManager/alarmMonitor/common.data.ts

@@ -36,8 +36,11 @@ export function getMonitorComponent() {
     case 'sdmtjtbetmk': //布尔台
       typeMenuListGas = [{ name: '预警监测' }, { name: '预警指标' }, { name: '瓦斯参数' }];
       return typeMenuListGas;
+    // default:
+    //   typeMenuListGas = [{ name: '预警监测' }, { name: '预警指标' }];
+    //   return typeMenuListGas;
     default:
-      typeMenuListGas = [{ name: '预警监测' }, { name: '预警指标' }];
+      typeMenuListGas = [{ name: '预警监测' }, { name: '预警指标' }, { name: '管道预警' }];
       return typeMenuListGas;
   }
 }
@@ -239,13 +242,12 @@ export const topOutList = [
 //   { id: 2, label: '自动喷淋灭火装置监测', details: '' },
 // ];
 export const tabLists = {
-  yw:'烟雾传感器监测',
-  wd:'温度传感器监测',
-  pl:'自动喷淋灭火装置监测',
-  co:'一氧化碳传感器监测',
+  yw: '烟雾传感器监测',
+  wd: '温度传感器监测',
+  pl: '自动喷淋灭火装置监测',
+  co: '一氧化碳传感器监测',
 };
 
-
 //外因火灾-传感器table列
 // export const columns = [
 //   {

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

@@ -0,0 +1,80 @@
+<template>
+  <div class="warnTarget">
+    <div class="top-section">
+      <a-table :columns="columns" :data-source="tableData" bordered :pagination="false">
+        <template #bodyCell="{ column, text }">
+          <template v-if="column.dataIndex === 'name'">
+            <a href="javascript:;">{{ text }}</a>
+          </template>
+        </template>
+      </a-table>
+    </div>
+    <div class="bottom-section"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+
+let columns = reactive([
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+  },
+  {
+    title: '一级指标',
+    dataIndex: 'one',
+    align: 'center',
+  },
+  {
+    title: '二级指标',
+    dataIndex: 'two',
+    align: 'center',
+  },
+  {
+    title: '三级指标',
+    align: 'center',
+    dataIndex: 'three',
+  },
+  {
+    title: '低风险',
+    dataIndex: 'warnLow',
+    align: 'center',
+  },
+  {
+    title: '一般风险',
+    dataIndex: 'warnCen',
+    align: 'center',
+  },
+  {
+    title: '较高风险',
+    dataIndex: 'warnJg',
+    align: 'center',
+  },
+  {
+    title: '高风险',
+    dataIndex: 'warnHign',
+    align: 'center',
+  },
+]);
+</script>
+
+<style lang="less" scoped>
+.warnTarget {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+.top-section,
+.bottom-section {
+  flex: 1;
+  min-height: 0;
+}
+.bottom-section {
+  overflow: hidden;
+}
+</style>

src/views/vent/monitorManager/alarmMonitor/warn/gasWarn.vue

@@ -1,21 +1,30 @@
 <template>
   <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 瓦斯监测预警 </customHeader>
   <div class="gasWarn">
-    <a-button v-if="!hasPermission('gasWarn:return')" preIcon="ant-design:rollback-outlined" type="text" size="small"
-      style="position: absolute; left: 15px; top: 15px; color: #fff" @click="getBack">
+    <a-button
+      v-if="!hasPermission('gasWarn:return')"
+      preIcon="ant-design:rollback-outlined"
+      type="text"
+      size="small"
+      style="position: absolute; left: 15px; top: 15px; color: #fff"
+      @click="getBack"
+    >
       返回
     </a-button>
     <div class="alarm-menu">
       <div class="type-btn">
-        <div :class="activeIndex == index ? 'btn1' : 'btn'"
-          :style="{ width: sysOrgCode == 'sdmtjtdltmk' ? '50%' : '33.33%' }" v-for="(item, index) in typeMenuListGas"
-          :key="index" @click="btnClick(index)">
+        <div
+          :class="activeIndex == index ? 'btn1' : 'btn'"
+          :style="{ width: sysOrgCode == 'sdmtjtdltmk' ? '50%' : '33.33%' }"
+          v-for="(item, index) in typeMenuListGas"
+          :key="index"
+          @click="btnClick(index)"
+        >
           {{ item.name }}
         </div>
       </div>
       <div class="card-btn">
-        <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
-          @click="cardClick(ind, item)">
+        <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind" @click="cardClick(ind, item)">
           <div class="text">{{ item.name }}</div>
           <div class="warn">{{ item.warn }}</div>
         </div>
@@ -33,30 +42,33 @@
               <div class="box-values">
                 <div class="value-b" v-for="(items, ind) in item.list" :key="ind">
                   <span>{{ `${items.name} : ` }}</span>
-                  <span :class="{
-                    'box-value': items.val == 0 && items.name == '报警状态',
-                    'box-value1': items.val == 101 && items.name == '报警状态',
-                    'box-value2': items.val == 102 && items.name == '报警状态',
-                    'box-value3': items.val == 103 && items.name == '报警状态',
-                    'box-value4': items.val == 104 && items.name == '报警状态',
-                    'box-value5': (items.val == 201 || item.val == 1001) && items.name == '报警状态',
-                  }">{{
+                  <span
+                    :class="{
+                      'box-value': items.val == 0 && items.name == '报警状态',
+                      'box-value1': items.val == 101 && items.name == '报警状态',
+                      'box-value2': items.val == 102 && items.name == '报警状态',
+                      'box-value3': items.val == 103 && items.name == '报警状态',
+                      'box-value4': items.val == 104 && items.name == '报警状态',
+                      'box-value5': (items.val == 201 || item.val == 1001) && items.name == '报警状态',
+                    }"
+                    >{{
                       items.val == 0 && items.name == '报警状态'
                         ? '正常'
                         : items.val == 101 && items.name == '报警状态'
-                          ? '较低风险'
-                          : items.val == 102 && items.name == '报警状态'
-                            ? '低风险'
-                            : items.val == 103 && items.name == '报警状态'
-                              ? '中风险'
-                              : items.val == 104 && items.name == '报警状态'
-                                ? '高风险'
-                                : items.val == 201 && items.name == '报警状态'
-                                  ? '报警'
-                                  : items.val == 1001 && items.name == '报警状态'
-                                    ? '网络断开'
-                                    : items.val
-                    }}</span>
+                        ? '较低风险'
+                        : items.val == 102 && items.name == '报警状态'
+                        ? '低风险'
+                        : items.val == 103 && items.name == '报警状态'
+                        ? '中风险'
+                        : items.val == 104 && items.name == '报警状态'
+                        ? '高风险'
+                        : items.val == 201 && items.name == '报警状态'
+                        ? '报警'
+                        : items.val == 1001 && items.name == '报警状态'
+                        ? '网络断开'
+                        : items.val
+                    }}</span
+                  >
                 </div>
               </div>
             </div>
@@ -73,6 +85,9 @@
       <div style="width: 100%; height: 100%" v-else-if="isShow == 'wscs'">
         <gasParamter />
       </div>
+      <div style="width: 100%; height: 100%" v-else-if="isShow == 'gdyj'">
+        <PipeWarn />
+      </div>
     </div>
   </div>
 </template>
@@ -84,6 +99,7 @@ import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
 import { useRouter } from 'vue-router';
 import CustomHeader from '/@/components/vent/customHeader.vue';
 import warnTargetGas from '../common/warnTargetGas.vue';
+import PipeWarn from '../common/PipeWarn.vue';
 import gasParamter from '../common/gasParamter.vue';
 import { getMonitorComponent } from '../common.data';
 import { usePermission } from '/@/hooks/web/usePermission';
@@ -113,7 +129,7 @@ let timer: null | NodeJS.Timeout = null;
 function getMonitor(flag?) {
   timer = setTimeout(
     async () => {
-      await getMenuList()
+      await getMenuList();
       if (timer) {
         timer = null;
       }
@@ -185,7 +201,6 @@ function getDetailList(param) {
   }
 }
 
-
 //获取左侧菜单列表
 async function getMenuList() {
   let res = await sysTypeWarnList({ type: 'gas' });
@@ -197,7 +212,7 @@ async function getMenuList() {
         warn: el.warnDes,
         deviceID: el.id,
         strtype: el.strtype,
-        detail: el.detail
+        detail: el.detail,
       });
     });
     getDetailList(menuList[activeIndex1.value].detail);
@@ -219,7 +234,14 @@ function btnClick(ind) {
       break;
     case 2:
       activeIndex1.value = 0;
-      isShow.value = 'wscs';
+      switch (sysOrgCode) {
+        case 'sdmtjtdltmk':
+          isShow.value = 'wscs';
+          break;
+        default:
+          isShow.value = 'gdyj';
+          break;
+      }
       break;
   }
 }