<template> <div class="dynamicInformation" :class="[showInfo ? 'openIcon' : 'closeIcon', showPanel ? 'leftShow' : 'centerShow']"> <!-- 左侧 --> <div class="leftInfo" :class="['animate__animated', showInfo ? 'animate__fadeInLeft' : 'animate__fadeOutLeft']"> <div class="title" :class="infoIndex == 0 ? 'active' : ''" @click="changeDT(0)"> <img :src="zxdt_icon" alt="" class="TopInfoListIcon" /> 中心动态 <img :src="jiantou_icon" alt="" class="jtIcon" v-show="infoIndex == 0" /> </div> <div class="title" :class="infoIndex == 1 ? 'active' : ''" @click="changeDT(1)"> <img :src="xcdt_icon" alt="" class="TopInfoListIcon" /> 现场动态 <img :src="jiantou_icon" alt="" class="jtIcon" v-show="infoIndex == 1" /> </div> <div class="title" :class="infoIndex == 2 ? 'active' : ''" @click="changeDT(2)"> <img :src="dddt_icon" alt="" class="TopInfoListIcon" /> 调度动态 <img :src="jiantou_icon" alt="" class="jtIcon" v-show="infoIndex == 2" /> </div> </div> <!-- 右侧 --> <div class="rightInfo" :class="['animate__animated', showInfo ? 'animate__fadeInLeft' : 'animate__fadeOutLeft']"> <!-- 表头 --> <el-row class="TopTableHeader"> <el-col :span="tableHeader.span[i]" v-for="(item, i) in tableHeader.titleList" :key="i"> <div class="headerSpan">{{ item }}</div> </el-col> </el-row> <!-- 表格内容 --> <Vue3SeamlessScroll :list="tableBodyData" :singleHeight="34" :hover="true" class="TopTableBody"> <el-row class="TopTableBody_list" v-for="(item, k) in tableBodyData" :key="k"> <template v-for="(info, j) in tableHeader.codeList" :key="info"> <!-- 中心动态 特殊展示 operate --> <el-col :span="tableHeader.span[j]" v-if="info == 'operate'"> <div class="bodySpan"> <el-button class="bodyBtn" link>发布</el-button> <el-button class="bodyBtn" link>解除</el-button> <el-button class="bodyBtn" link>下载</el-button> </div> </el-col> <!-- 现场动态 特殊展示--> <el-col :span="tableHeader.span[j]" v-if="info == 'duban'"> <div class="bodySpan"> <img class="TopTableListSpanImg2" src="@/assets/images/Sponge_screen/RQ/RQ_XX.png" alt="" @click="PaiFa(item)" /> <img class="TopTableListSpanImg" src="@/assets/images/Sponge_screen/RQ/RQ_SP.png" alt="" @click="XianChangLianXian(item)" /> </div> </el-col> <el-col :span="tableHeader.span[j]" v-if="info == 'zt'"> <div class="bodySpan"> {{ item[info] == 0 ? '未处理' : '已处理' }} </div> </el-col> <!-- 通用展示 --> <el-col :span="tableHeader.span[j]" v-else> <el-tooltip effect="dark" :content="item[info]" placement="top"> <div class="bodySpan">{{ item[info] }}</div> </el-tooltip> </el-col> </template> </el-row> </Vue3SeamlessScroll> </div> <img class="infoIcon" alt="" :src="showInfo ? inIcon : outIcon" @click="shrinkInfo" /> </div> </template> <script setup name="dynamicInformation"> import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'; import { onMounted, toRaw, toRefs } from 'vue'; import inIcon from '@/assets/images/inIcon.png'; import outIcon from '@/assets/images/outIcon.png'; import jiantou_icon from '@/assets/images/tanchuang/jiantou_icon.png'; import dddt_icon from '@/assets/images/tanchuang/dddt_icon.png'; import zxdt_icon from '@/assets/images/tanchuang/zxdt_icon.png'; import xcdt_icon from '@/assets/images/tanchuang/xcdt_icon.png'; const infoIndex = ref(0); const showInfo = ref(true); // 改变 dynamicInformation 宽度 const showPanel = ref(true); //面板展开收起 改变定位left // 面板内容展开收起控制 const props = defineProps({ showPanel: { type: Boolean, }, }); // 顶部表格数据 const TopTableData1 = [ { sj: '2024-09-26 10:00:29', mx: '燃气常规检查发现泄漏', dd: '宝塔区凤凰山街道二道街', zt: 0, //0未处理 1已处理 dw: '延安市燃气总公司', duban: null, }, { sj: '2024-09-27 16:10:248', mx: '燃气常规检查发现泄漏', dd: '宝塔区凤凰山街道二道街', zt: 0, //0未处理 1已处理 dw: '延安市燃气总公司', duban: null, }, { sj: '2024-09-26 10:00:29', mx: '燃气常规检查发现泄漏', dd: '宝塔区凤凰山街道二道街', zt: 0, //0未处理 1已处理 dw: '延安市燃气总公司', duban: null, }, { sj: '2024-09-27 16:10:248', mx: '燃气常规检查发现泄漏', dd: '宝塔区凤凰山街道二道街', zt: 0, //0未处理 1已处理 dw: '延安市燃气总公司', duban: null, }, ]; const TopTableData = [ { xh: '1', name: '燃气-Ⅳ级响应-20240629', startTime: '2024-09-29 10:00:29', endTime: '2024-09-30 10:00:29', zt: 0, //0未处理 1已处理 type: '线下', operate: null, }, { xh: '2', name: '燃气-Ⅳ级响应-20240618', startTime: '2024-09-18 10:00:29', endTime: '2024-09-19 10:00:29', zt: 0, //0未处理 1已处理 type: '线下', operate: null, }, { xh: '3', name: '燃气-Ⅳ级响应-20240618', startTime: '2024-09-18 10:00:29', endTime: '2024-09-19 10:00:29', zt: 0, //0未处理 1已处理 type: '线下', operate: null, }, { xh: '4', name: '燃气-Ⅳ级响应-20240618', startTime: '2024-09-18 10:00:29', endTime: '2024-09-19 10:00:29', zt: 0, //0未处理 1已处理 type: '线下', operate: null, }, ]; const TopTableData2 = [ { initiator: '延安城管指挥中心', recipient: '燃气供应处', startTime: '2024-10-21 13:00:29', endTime: '2024-10-21 14:00:29', type: '视频调度', }, { initiator: '延安城管指挥中心', recipient: '燃气供应处', startTime: '2024-10-21 13:00:29', endTime: '2024-10-21 14:00:29', type: '语音调度', }, { initiator: '延安城管指挥中心', recipient: '延安市燃气总公司', startTime: '2024-10-21 13:00:29', endTime: '2024-10-21 14:00:29', type: '语音调度', }, ]; const allData = [TopTableData, TopTableData1, TopTableData2]; const AllData = reactive({ // 当前动态 表头数据 tableHeader: {}, // 调度总体 所有表头数据 tableHeaderData: [ { titleList: ['序号', '应急响应名称', '启动时间', '结束时间', '状态', '审核方式', '应急响应操作'], //表头 codeList: ['xh', 'name', 'startTime', 'endTime', 'zt', 'type', 'operate'], //表头对应字段 span: [1, 5, 5, 5, 2, 2, 4], //表头布局间隔 }, { titleList: ['时间', '事件明细', '地点', '状态', '责任单位', '督办'], codeList: ['sj', 'mx', 'dd', 'zt', 'dw', 'duban'], span: [5, 5, 5, 2, 4, 3], }, { titleList: ['方式', '发起人', '接收人', '调度开始时间', '调度结束时间'], codeList: ['type', 'initiator', 'recipient', 'startTime', 'endTime'], span: [4, 5, 5, 5, 5], }, ], // 当前表格对应数据 tableBodyData: [], }); const { tableHeader, tableHeaderData, tableBodyData } = toRefs(AllData); watch( () => props.showPanel, () => { showPanel.value = props.showPanel; }, { immediate: true } ); // 风险监测派发 const PaiFa = item => { console.log(item); let data = { title: '智慧外呼', comIDs: ['RQ_ZhiHuiWaiHu'], getSiteId: item.value, }; bus.emit('publicDialog', data); }; // 现场连线 const XianChangLianXian = item => { bus.emit('OpenRY'); }; // 收缩信息 const shrinkInfo = () => { showInfo.value = !showInfo.value; }; // 左侧动态切换 const changeDT = index => { infoIndex.value = index; tableHeader.value = tableHeaderData.value[index]; tableBodyData.value = allData[index]; }; onMounted(() => { // console.log(tableHeaderList.value); tableHeader.value = tableHeaderData.value[infoIndex.value]; tableBodyData.value = allData[infoIndex.value]; }); </script> <style lang="scss" scoped> .dynamicInformation { position: absolute; // left: 490px; top: 110px; width: calc(100% - 1020px); --parent-width: calc(100% - 1020px); /* 定义 CSS 变量 */ height: 136px; box-sizing: border-box; // border: 1px solid red; display: flex; align-items: center; transition: all 1s ease; // transition: left 1s ease; &.openIcon { width: calc(100% - 1020px); } &.closeIcon { width: 0px; } &.centerShow { will-change: transform; transform: translateX(490px); } &.leftShow { will-change: transform; transform: translateX(30px); } .leftInfo { width: 116px; height: 136px; // border: 1px solid yellow; background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%); border-radius: 6px; border: 1px solid #47eef3; box-sizing: border-box; box-shadow: inset 0 0 5px 5px #47eef38a; display: flex; flex-direction: column; padding: 0px 0px 0px 10px; // align-items: center; justify-content: space-evenly; .title { position: relative; display: flex; align-items: center; font-weight: 400; font-size: 14px; color: #fefefe; cursor: pointer; &.active { color: #4efff1; } .TopInfoListIcon { margin-right: 5px; } .jtIcon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); // margin-left: 5px; } } } .rightInfo { width: calc(100% - 116px); height: 136px; // position: absolute; // left: 520px; // top: 110px; background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%); border-radius: 6px; border: 1px solid #47eef3; box-sizing: border-box; box-shadow: inset 0 0 5px 5px #47eef38a; padding: 10px; .TopTableHeader { width: 100%; height: 34px; background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%); border: 1px solid #74dde1; display: flex; .headerSpan { text-align: center; font-weight: 400; font-size: 14px; color: #ffffff; height: 34px; line-height: 34px; } } .TopTableBody { width: 100%; height: calc(100% - 34px); // height: 102px; overflow: auto; // border: 1px solid red; // display: flex; // flex-direction: column; // flex-wrap: nowrap; .TopTableBody_list { // display: inline-block; width: 100%; height: 34px; /* 选择偶数行 */ &:nth-child(even) { background: linear-gradient(0deg, #008599 0%, #08596d 100%); } .bodySpan { display: flex; justify-content: center; align-items: center; text-align: center; font-weight: 400; font-size: 14px; color: #ffffff; height: 34px; line-height: 34px; box-sizing: border-box; cursor: default; overflow: hidden; text-overflow: ellipsis; /* 超出宽度后显示省略号 */ white-space: nowrap; /* 限制不允许换行 */ .TopTableListSpanImg { width: 15px; height: 19px; margin: 7px; cursor: pointer; } .TopTableListSpanImg2 { width: 19px; height: 19px; margin: 7px; cursor: pointer; } .bodyBtn { color: #eee; margin: 0; } } } } } .infoIcon { position: absolute; right: -15px; // left: 0; top: 40px; cursor: pointer; // transition: all 1s ease; // --dtBox-width // &.openIcon { // // transform: translateX(500px); // right: -15px; // } // &.closeIcon { // // transform: translateX(0px); // left: 0; // } } } </style>