<template>
<div class="custom-table">
<template v-if="name === '环沪增援力量'">
<!-- 环沪增援--指挥部信息 -->
<div class="zhb-box">
<el-table
:data="tableData1"
:header-row-class-name="'header-class'"
:header-cell-class-name="'header-cell-class'"
:row-class-name="'row-class'"
:cell-class-name="'row-cell-class'"
>
<template v-for="(item, index) in column1">
<el-table-column
:key="index"
:prop="item.prop"
:label="item.label"
:width="item.width"
:align="item.align"
header-align="left"
>
<template slot-scope="scope">
<el-tooltip
effect="dark"
:open-delay="300"
:content="scope.row[item.prop] || ''"
placement="top"
>
<span
style="width: 100%; display: inline-block; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
>
{{ scope.row[item.prop] }}
</span>
</el-tooltip>
</template>
</el-table-column>
</template>
</el-table>
</div>
<!-- 环沪增援--支队信息 -->
<div class="zd-box box-scrollbar-bottom">
<!-- 环沪--增援总队 -->
<div class="zd-item-1">
<el-table
:data="tableData21"
:header-row-class-name="'header-class'"
:header-cell-class-name="'header-cell-class'"
:row-class-name="'row-class'"
:cell-class-name="'row-cell-class'"
>
<el-table-column prop="gw" label="岗位" width="120" align="left">
</el-table-column>
<el-table-column label="增援总队">
<template v-for="(item, index) in column2[0]">
<el-table-column
:key="index"
:prop="item.prop"
:label="item.label"
:width="item.width"
:align="item.align"
header-align="left"
>
<template slot-scope="scope">
<el-tooltip
effect="dark"
:open-delay="300"
:content="scope.row[item.prop] || ''"
placement="top"
>
<span
style="width: 100%; display: inline-block; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
>
{{ scope.row[item.prop] }}
</span>
</el-tooltip>
</template>
</el-table-column>
</template>
</el-table-column>
</el-table>
</div>
<!-- 环沪--上海总队 -->
<div class="zd-item-2">
<el-table
:data="tableData22"
:header-row-class-name="'header-class'"
:header-cell-class-name="'header-cell-class'"
:row-class-name="'row-class'"
:cell-class-name="'row-cell-class'"
>
<el-table-column prop="gw" label="岗位" width="120" align="left">
</el-table-column>
<el-table-column label="上海总队">
<template v-for="(item, index) in column2[1]">
<el-table-column
:key="index"
:prop="item.prop"
:label="item.label"
:width="item.width"
:align="item.align"
header-align="left"
>
<template slot-scope="scope">
<el-tooltip
effect="dark"
:open-delay="300"
:content="scope.row[item.prop] || ''"
placement="top"
>
<span
style="width: 100%; display: inline-block; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
>
{{ scope.row[item.prop] }}
</span>
</el-tooltip>
</template>
</el-table-column>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 环沪增援--附件信息 -->
<div class="file-box">
<div class="file-list">
<template v-for="(item, index) in fileList">
<div
:key="index"
class="file-item"
@click="openFile(item.xh, item.dz)"
>
<span class="file-item-name">{{ item.fjmc }}</span>
</div>
</template>
</div>
<el-dialog
title="环沪增援指挥架构图"
:visible.sync="fileImgDialogVisible"
:append-to-body="true"
:modal="false"
custom-class="custom-dialog custom-hhimg-dialog"
>
<div class="img-box">
<img :src="fileImg" alt="" />
</div>
</el-dialog>
</div>
</template>
<template v-else>
<el-table
:data="tableData"
:header-row-class-name="'header-class'"
:header-cell-class-name="'header-cell-class'"
:row-class-name="'row-class'"
:cell-class-name="'row-cell-class'"
:height="pagination.size === 12 ? 662 : 714"
@cell-click="handleCellClick"
>
<template v-if="name === '器械装备信息'">
<el-table-column label="序号" type="index" align="left" width="180">
</el-table-column>
</template>
<template v-for="(item, index) in column">
<el-table-column
:key="index"
:prop="item.prop"
:label="item.label"
:width="item.width"
:align="item.align"
header-align="left"
>
<template slot-scope="scope">
<el-tooltip
effect="dark"
:open-delay="300"
:content="scope.row[item.prop] || ''"
placement="top"
>
<span
style="width: 100%; display: inline-block; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
>
{{ scope.row[item.prop] }}
</span>
</el-tooltip>
</template>
</el-table-column>
</template>
<!-- <template v-if="name === '微型消防站'">
<el-table-column label="器材装备信息" width="180" align="left">
<template slot-scope="scope">
<div
style="cursor: pointer;color: #73fbfd;"
@click="showDeviceDialog(scope.$index, tableData)"
>
<span>查看明细</span>
</div>
</template>
</el-table-column>
</template> -->
</el-table>
<!-- 分页 -->
<el-pagination
v-show="pagination.total > pagination.size"
background
layout="total, prev, pager, next"
:page-size.sync="pagination.size"
:current-page="pagination.page"
:total="pagination.total"
:hide-on-single-page="false"
@current-change="currentChange"
>
</el-pagination>
</template>
</div>
</template>
<script>
import {
getZzdzbqcv4,
getHhzyllZhbxx,
getHhzyllJtxx,
getHhzyllSelFjxx,
} from "../../api/left";
import cityMap from "../../mixins/cityMap";
import { mapGetters, mapActions } from "vuex";
import unitMap from "../../mixins/rightUnitMap";
import { cloneObject } from "../../untils/util";
export default {
name: "CustomTable",
components: {},
mixins: [cityMap, unitMap],
props: {
name: {
type: String,
default: "",
},
tableData: {
type: Array,
required: true,
default: () => [],
},
column: {
type: Array,
required: true,
default: () => [],
},
pagination: {
type: Object,
required: true,
default: () => {
return { page: 0, size: 0, total: 0 };
},
},
},
data() {
return {
devicceTitle: "",
fileList: [], // 附件信息
fileImg: "", // 附件图片
fileImgDialogVisible: false,
tableData1: [], // 环沪 -- 指挥部信息
tableData21: [], // 环沪 -- 支队信息--增援总队
tableData22: [], // 环沪 -- 支队信息--上海总队
column1: [
{
prop: "zhbmc",
label: "指挥部",
width: 220,
align: "left",
},
{
prop: "llrxm",
label: "联络员",
width: 120,
align: "left",
},
{
prop: "zw",
label: "部职别",
width: 280,
align: "left",
},
{
prop: "hh",
label: "呼号",
width: 80,
align: "left",
},
{
prop: "sjhm",
label: "手机号码",
width: 180,
align: "left",
},
{
prop: "wxdh",
label: "卫星电话",
align: "left",
},
], // 环沪 -- 指挥部信息
column2: [
[
{
prop: "zyll",
label: "增援力量",
width: 280,
align: "left",
},
{
prop: "lly",
label: "联络员",
width: 120,
align: "left",
},
{
prop: "zw",
label: "部职别",
width: 280,
align: "left",
},
{
prop: "hh",
label: "呼号",
align: "left",
},
{
prop: "sjhm",
label: "手机号码",
width: 180,
align: "left",
},
{
prop: "wxdh",
label: "卫星电话",
width: 180,
align: "left",
},
],
[
{
prop: "lly",
label: "联络员",
width: 120,
align: "left",
},
{
prop: "zw",
label: "部职别",
width: 280,
align: "left",
},
{
prop: "hh",
label: "呼号",
align: "left",
},
{
prop: "sjhm",
label: "手机号码",
width: 180,
align: "left",
},
{
prop: "wxdh",
label: "卫星电话",
width: 180,
align: "left",
},
],
], // 环沪 -- 支队信息：0：增援总队；1：上海总队
};
},
computed: {},
watch: {
name(val) {
if (val === "环沪增援力量") {
this.getHhTableData();
this.getHhzyllSelFjxx();
}
},
},
created() {},
mounted() {},
destroyed() {},
methods: {
...mapActions(["SetShowSa", "setIsTablePointDialog"]),
/* 环沪增援--打开附件 */
openFile(index, filePath) {
if (index !== "7") {
window.open(`http://10.107.31.196:14204/${filePath}`, "_blank");
} else {
this.fileImg = `http://10.107.31.196:14204/${filePath}`;
this.fileImgDialogVisible = true;
}
},
/* 环沪增援--附件信息 */
getHhzyllSelFjxx() {
getHhzyllSelFjxx({
taskId: "1632992194707",
})
.then((result) => {
this.fileList = result.data;
this.fileList.sort((a, b) => {
return a.xh - b.xh;
});
})
.catch((err) => {});
},
/* 环沪增援力量表格 */
getHhTableData() {
let params = {
taskId: "1632992194707",
};
Promise.all([getHhzyllZhbxx(params), getHhzyllJtxx(params)])
.then((result) => {
this.tableData1 = result[0].data;
this.tableData21 = result[1].data.filter((el) => {
return el.dw === "增援总队";
});
this.tableData22 = result[1].data.filter((el) => {
return el.dw === "上海总队";
});
this.tableData21.sort((a, b) => {
return a.gw - b.gw;
});
this.tableData22.sort((a, b) => {
return a.gw - b.gw;
});
})
.catch((err) => {});
},
/* 点击表单行 */
handleCellClick(row, column, cell, event) {
let data = cloneObject(row);
if (this.name === "安保小组") {
let activeIcon = require("../../assets/point/巡馆人员.png");
// this.handlePoints([data], "add", activeIcon, "zy");
}
let delMapPointArr = ["专家库", "巡逻车", "周边停车场"];
if (!delMapPointArr.includes(this.name) && row.jd && row.wd) {
this.flyTo({
x: row.wd,
y: row.jd,
z: 7,
});
}
this.setIsTablePointDialog(false);
if (this.name !== "安保小组") {
this.SetShowSa("");
this.deletePoints("abxzzy");
}
if (this.name !== "分指挥点") {
this.SetShowSa("");
this.deletePoints("fenzhihuisuo");
}
if (this.name !== "驻防车辆") {
this.SetShowSa("");
this.deletePoints("zfcl_");
}
},
/* 翻页时返回当前页码 */
currentChange(current) {
this.$emit("currentChange", current);
},
/* 点击自定义显示装备表格 */
showDeviceDialog(index, data) {
this.devicceTitle = data[index].wzmc;
this.getZzdzbqcv4(data[index].xh);
},
/* 获取器械设备信息 */
getZzdzbqcv4(xh) {
getZzdzbqcv4({
tag: xh,
taskId: "1632992194707",
})
.then((result) => {
result.data.map((el) => {
el.jldw = el.jldw === null ? "个" : el.jldw;
el.trzqzbsl = el.trzqzbsl + el.jldw;
});
this.$emit("currentDevice", {
data: result,
title: this.devicceTitle,
});
})
.catch((err) => {});
},
},
};
</script>
<style lang="less">
.custom-table {
width: 100%;
// 标题行
.header-class {
background: #0a4a59;
border: 1px solid #075676;
border-radius: 3px;
}
// 标题单元格
.header-cell-class {
font-size: 22px;
font-family: Source Han Sans CN, Source Han Sans CN-Medium;
font-weight: 500;
color: #ffffff;
background: #0a4a59 !important;
letter-spacing: 1px;
border: unset !important;
.cell {
line-height: unset;
}
}
// 数据行
.row-class {
background: #06242d;
border: 1px solid #075676;
border-radius: 3px;
cursor: pointer;
}
// 数据单元格
.row-cell-class {
font-size: 20px;
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
font-weight: 400;
color: #ffffff;
border: unset !important;
background: #06242d;
letter-spacing: 1px;
}
// 表格
.el-table {
background-color: transparent;
&::before {
height: unset;
}
// 空状态
.el-table__empty-block {
font-size: 22px;
background: #06242d;
.el-table__empty-text {
color: #ffffff;
}
}
.cell.el-tooltip {
pointer-events: none;
}
// 合并头背景
thead.is-group th {
background: #0a4a59;
}
// 边框
.el-table--border th {
border: 0 !important;
}
// 右侧滚动条占用宽度
th.gutter {
background: transparent !important;
}
}
// 合并表格的边框
.el-table--border,
.el-table--group {
border: unset !important;
}
// 滚动条
.el-table__body-wrapper {
&::-webkit-scrollbar {
width: 6px;
height: 6px;
opacity: 0.35;
border-radius: 6px;
background: #0b193c;
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}
&::-webkit-scrollbar-track {
opacity: 0.35;
border-radius: 6px;
background: #0b193c;
}
&::-webkit-scrollbar-thumb {
width: 6px;
height: 6px;
border-radius: 6px;
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
opacity: 0.6;
background: #2ffffe;
}
}
// hover 行
.el-table--enable-row-hover .el-table__body tr:hover > td {
background: rgba(10, 74, 89, 0.8) !important;
}
// hover 时的tips
.el-tooltip__popper {
color: #76fafd;
font-size: 20px !important;
}
// 分页
.el-pagination {
margin-top: 30px;
display: flex;
justify-content: flex-end;
span:not([class*="suffix"]) {
font-size: 20px !important;
color: #73fbfd !important;
}
}
// 页码
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
font-size: 18px;
color: #fff !important;
border: 1px solid #0197ba;
background-color: transparent;
}
// 页码选中
.el-pagination.is-background .el-pager li:not(.disabled).active {
background: #0a4a59 !important;
}
}
.custom-hhimg-dialog {
margin-top: 68px !important;
width: 1500px !important;
height: 950px;
.img-box {
width: 100%;
img {
width: 100%;
}
}
}
</style>
<style lang="less" scoped>
.custom-table {
.zhb-box {
margin-bottom: 88px;
}
.zd-box {
display: flex;
align-items: flex-start;
margin-bottom: 88px;
}
.file-box {
.file-list {
.file-item {
display: inline-block;
vertical-align: top;
margin-right: 30px;
cursor: pointer;
.file-item-name {
display: inline-block;
font-size: 22px;
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
font-weight: 400;
text-align: center;
color: #01ffff;
padding-bottom: 3px;
border-bottom: 2px solid #01ffff;
pointer-events: none;
}
}
}
}
}
</style>
扫一扫
890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
