<template>
<div
class="dynamicInformation"
:class="[showInfo ? 'openIcon' : 'closeIcon', showPanel ? 'leftShow' : 'centerShow']"
>
<!-- 左侧 -->
<div class="leftInfo">
<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>
<!-- 右侧 -->
<Transition name="slide-fade">
<div class="rightInfo" v-show="showInfo">
<!-- 表头 -->
<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>
</Transition>
<img class="infoIcon" alt="" :src="showInfo ? inIcon : ''" @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(null);
const showInfo = ref(false); // 改变 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;
infoIndex.value = null;
};
// 左侧动态切换
const changeDT = (index) => {
infoIndex.value = index;
tableHeader.value = tableHeaderData.value[index];
tableBodyData.value = allData[index];
showInfo.value = true;
};
onMounted(() => {
tableHeader.value = tableHeaderData.value[infoIndex.value];
tableBodyData.value = allData[infoIndex.value];
});
</script>
<style lang="scss" scoped>
.dynamicInformation {
position: absolute;
bottom: 100px;
height: 136px;
box-sizing: border-box;
display: flex;
align-items: center;
transition: all 1s ease;
&.openIcon {
width: calc(100% - 980px);
}
&.closeIcon {
width: 136px;
}
&.centerShow {
will-change: transform;
transform: translateX(490px);
}
&.leftShow {
will-change: transform;
transform: translateX(-1000px);
}
.leftInfo {
width: 116px;
height: 136px;
overflow: hidden;
// 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%);
}
}
}
.rightInfo {
width: calc(100% - 135px);
height: 136px;
overflow: hidden;
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;
box-sizing: border-box;
padding-right: 10px;
.headerSpan {
text-align: center;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 34px;
}
}
.TopTableBody {
width: 100%;
height: calc(100% - 34px);
overflow: auto;
.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: 0px;
top: 40px;
cursor: pointer;
}
}
/*
进入和离开动画可以使用不同
持续时间和速度曲线。
*/
.slide-fade-enter-active {
transition: all 0.1s ease-out;
}
.slide-fade-leave-active {
transition: all 0.1s ease-in;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
opacity: 0;
}
</style>
