<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"
: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"
v-loading="loading"
>
<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> -->
<el-button
link
type="primary"
@click="rowUpdate(item, 1)"
v-if="item.auditStatus == 0"
>发布</el-button
>
<el-button link type="primary" @click="rowUpdate(item, 2)"
>解除</el-button
>
<!-- <el-button link type="primary" @click="rowUpdate(scope.row, 3)" v-if="scope.row.releaseStatus == 3">回顾</el-button> -->
<el-button link type="primary" @click="rowDown(item)">下载</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>
<!-- eventDetails -->
<el-col :span="tableHeader.span[j]" v-if="info == 'eventDetails'">
<el-tooltip effect="dark" :content="item[info]" placement="top">
<div class="bodySpan">{{ item[info] }}</div>
</el-tooltip>
</el-col>
<!-- 通用展示 -->
<el-col :span="tableHeader.span[j]" v-else>
<div class="bodySpan">{{ item[info] }}</div>
<!-- <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";
import { callRecordsList } from "@/api/system/tanchuang";
import {
warningLevelResposeList,
personnelPage,
warningReleaseDatailAdd,
warningReleaseDatailPage,
warningReleaseDatailEditfb,
} from "@/api/RQWarning.js";
import { alarmWorkOrderList } from "@/api/RQWarning";
import bus from "@/bus";
const infoIndex = ref(null);
const showInfo = ref(false); // 改变 dynamicInformation 宽度
const showPanel = ref(true); //面板展开收起 改变定位left
const loading = ref(false);
// 面板内容展开收起控制
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 = [[], TopTableData1, []];
const AllData = reactive({
// 当前动态 表头数据
tableHeader: {},
// 调度总体 所有表头数据
tableHeaderData: [
{
titleList: [
"序号",
"应急响应名称",
"启动时间",
"结束时间",
"状态",
"审核方式",
"应急响应操作",
], //表头
codeList: [
"xh",
"responseName",
"warnStartTime",
"warnEndTime",
"auditStatusName",
"auditMethod",
"operate",
], //表头对应字段
span: [1, 5, 5, 5, 2, 2, 4], //表头布局间隔
},
{
titleList: ["时间", "事件明细", "地点", "状态", "责任单位", "督办"],
codeList: [
"createTime",
"eventDetails",
"eventAddress",
"statusValue",
"dw",
"duban",
],
span: [5, 5, 5, 2, 4, 3],
},
{
titleList: ["方式", "发起人", "接收人", "调度开始时间", "调度结束时间"],
codeList: ["typeDynamic", "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 = [];
if (index == 0) {
getCenterDynamic();
} else if (index == 1) {
getNowDynamic();
} else if (index == 2) {
getCallDynamic();
}
showInfo.value = true;
};
// 调度动态
const getCallDynamic = async () => {
// loading.value = true;
try {
const res = await callRecordsList();
tableBodyData.value = res.data.slice(0, 10).map((item) => {
return {
typeDynamic: item.type == 1 ? "语音调度" : "视频调度",
...item,
};
});
loading.value = false;
// console.log('🚀 ~ getCallDynamic ~ res:', res);
} catch (error) {
loading.value = false;
console.log("🚀 ~ getCallDynamic ~ error:", error);
}
};
// 中心调度
const getCenterDynamic = async () => {
try {
const res = await warningReleaseDatailPage({
pageNum: 1,
pageSize: 20,
});
tableBodyData.value = res.data.map((item, index) => {
return {
xh: index,
auditStatusName:
item.auditStatus == "0" ? "已审核" : item.auditStatus == "1" ? "发布" : "解除",
...item,
};
});
} catch (error) {
console.log("🚀 ~ getCenterDynamic ~ error:", error);
}
};
// 现场动态
const getNowDynamic = async () => {
try {
const res = await alarmWorkOrderList();
console.log("🚀 ~ getNowDynamic ~ res:", res);
tableBodyData.value = res.data.map((item, index) => {
return {
dw: "延安市燃气总公司",
// xh: index,
// auditStatusName: item.auditStatus == '0' ? '已审核' : item.auditStatus == '1' ? '发布' : '解除',
statusValue: item.status == "0" ? "未处理" : "已处理",
...item,
};
});
} catch (error) {
console.log("🚀 ~ getCenterDynamic ~ error:", error);
}
};
// 发布
function rowUpdate(data, num) {
// if (num == 1) {
// let formData = new FormData();
// formData.append('id', data.id);
// formData.append('auditStatus', '1');
// warningReleaseDatailEditfb(formData).then(res => {
// proxy.$modal.msgSuccess('发布成功');
// bus.emit('Rq_head', data);
// bus.emit('publicDialog_Close');
// });
// }
// if (num == 2) {
// let formData = new FormData();
// formData.append('id', data.id);
// formData.append('auditStatus', '2');
// warningReleaseDatailEditfb(formData).then(res => {
// proxy.$modal.msgSuccess('解除成功');
// bus.emit('Rq_head', false);
// bus.emit('publicDialog_Close');
// });
// }
}
// 下载
function rowDown(data) {
const baseURL =
"https://server2.wh-nf.cn:8088/prod-api/business" +
"/warningReleaseDatail/downloadPDFNew?id=";
const fileUrl = `${baseURL}${data.id}`;
window.open(String(fileUrl));
}
onMounted(() => {
tableHeader.value = tableHeaderData.value[infoIndex.value];
// tableBodyData.value = allData[infoIndex.value];
// changeDT(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;
width: 100%;
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>
