|
@@ -1,221 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="otherOut">
|
|
|
- <div class="title">
|
|
|
- <div :class="active == true ? 'btn1' : 'btn'" @click="btnClick">井下消防材料库</div>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div class="content-tab" v-for="(item, index) in tabList1" :key="index">
|
|
|
- <div class="title">
|
|
|
- <span class="label">{{ item.label }}</span>
|
|
|
- <span class="details">{{ `${item.details}>>` }}</span>
|
|
|
- </div>
|
|
|
- <div class="content-item" v-if="index == 0">
|
|
|
- <a-table ref="table" :row-selection="rowSelectionWd" size="small" :scroll="monitorscroll2"
|
|
|
- :columns="columnWd" :data-source="monitorlistWd" :pagination="false" :loading="loading">
|
|
|
- <span slot="action" slot-scope="text, record"> </span>
|
|
|
- </a-table>
|
|
|
- </div>
|
|
|
- <div class="content-item" v-if="index == 1">
|
|
|
- <a-table ref="table1" :row-selection="rowSelectionJj" size="small" :scroll="monitorscroll2"
|
|
|
- :columns="columnsJj" :data-source="monitorlistJj" :pagination="false" :loading="loading">
|
|
|
- <span slot="action" slot-scope="text, record"> </span>
|
|
|
- </a-table>
|
|
|
- </div>
|
|
|
- <div class="content-item" v-if="index == 2">
|
|
|
- <a-table ref="table2" :row-selection="rowSelectionYw" size="small" :scroll="monitorscroll2"
|
|
|
- :columns="columnsYw" :data-source="monitorlistYw" :pagination="false" :loading="loading">
|
|
|
- <span slot="action" slot-scope="text, record"> </span>
|
|
|
- </a-table>
|
|
|
- </div>
|
|
|
- <div class="content-item" v-if="index == 3">
|
|
|
- <a-table ref="table3" :row-selection="rowSelectionJd" size="small" :scroll="monitorscroll2"
|
|
|
- :columns="columnsJd" :data-source="monitorlistJd" :pagination="false" :loading="loading">
|
|
|
- <span slot="action" slot-scope="text, record"></span>
|
|
|
- </a-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script lang="ts" setup>
|
|
|
-import { onMounted, ref, defineEmits, computed, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
|
|
|
-import { tabList1, columnWd, columnsJj, columnsYw, columnsJd } from '../fire.data'
|
|
|
-
|
|
|
-let active = ref(false) //井下消防材料库按钮切换
|
|
|
-//滚动条高度
|
|
|
-let monitorscroll2 = reactive({ y: 'calc(100% - 150px)' })
|
|
|
-//列表加载状态
|
|
|
-let loading = ref(false)
|
|
|
-
|
|
|
-
|
|
|
-//综采温度table列表
|
|
|
-let monitorlistWd = reactive([])
|
|
|
-//综采温度当前选中数据
|
|
|
-let selectedRow = reactive([])
|
|
|
-//综采温度-多选操作
|
|
|
-let rowSelectionWd = computed(() => {
|
|
|
- return {
|
|
|
- onChange: (selectedRowKeys, selectedRows) => {
|
|
|
- selectedRow = selectedRows
|
|
|
- console.log(`selectedRowKeys: ${selectedRowKeys}`, '综采温度: ', selectedRow)
|
|
|
- },
|
|
|
- getCheckboxProps: (record) => ({
|
|
|
- props: {
|
|
|
- realId: record.realId,
|
|
|
- },
|
|
|
- }),
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-//掘进监测table列表
|
|
|
-let monitorlistJj = reactive([])
|
|
|
-
|
|
|
-//掘进监测当前选中数据
|
|
|
-let selectedRowJj = reactive([])
|
|
|
-//掘进监测-多选操作
|
|
|
-let rowSelectionJj = computed(() => {
|
|
|
- return {
|
|
|
- onChange: (selectedRowKeys, selectedRows) => {
|
|
|
- selectedRowJj = selectedRows
|
|
|
- console.log(`selectedRowKeys: ${selectedRowKeys}`, '掘进监测: ', selectedRowJj)
|
|
|
- },
|
|
|
- getCheckboxProps: (record) => ({
|
|
|
- props: {
|
|
|
- realId: record.realId,
|
|
|
- },
|
|
|
- }),
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-
|
|
|
-//运输烟雾table列表
|
|
|
-let monitorlistYw = reactive([])
|
|
|
-
|
|
|
-//运输烟雾当前选中数据
|
|
|
-let selectedRowYw = reactive([])
|
|
|
-//运输烟雾-多选操作
|
|
|
-let rowSelectionYw = computed(() => {
|
|
|
- return {
|
|
|
- onChange: (selectedRowKeys, selectedRows) => {
|
|
|
- selectedRowYw = selectedRows
|
|
|
- console.log(`selectedRowKeys: ${selectedRowKeys}`, '运输烟雾: ', selectedRowYw)
|
|
|
- },
|
|
|
- getCheckboxProps: (record) => ({
|
|
|
- props: {
|
|
|
- realId: record.realId,
|
|
|
- },
|
|
|
- }),
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-
|
|
|
-//机电硐室table列表
|
|
|
-let monitorlistJd = reactive([])
|
|
|
-//机电硐室当前选中数据
|
|
|
-let selectedRowJd = reactive([])
|
|
|
-//机电硐室-多选操作
|
|
|
-let rowSelectionJd = computed(() => {
|
|
|
- return {
|
|
|
- onChange: (selectedRowKeys, selectedRows) => {
|
|
|
- selectedRowJd = selectedRows
|
|
|
- console.log(`selectedRowKeys: ${selectedRowKeys}`, '机电硐室: ', selectedRowJd)
|
|
|
- },
|
|
|
- getCheckboxProps: (record) => ({
|
|
|
- props: {
|
|
|
- realId: record.realId,
|
|
|
- },
|
|
|
- }),
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-function btnClick() {
|
|
|
- active.value = !active.value
|
|
|
-}
|
|
|
-
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-.otherOut {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .title {
|
|
|
- height: 42px;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
-
|
|
|
- .btn {
|
|
|
- width: 120px;
|
|
|
- height: 42px;
|
|
|
- line-height: 42px;
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- cursor: pointer;
|
|
|
- background: url('../../../../../assets/images/fire/btn.png') no-repeat;
|
|
|
- background-size: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .btn1 {
|
|
|
- width: 120px;
|
|
|
- height: 42px;
|
|
|
- line-height: 42px;
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- cursor: pointer;
|
|
|
- background: url('../../../../../assets/images/fire/btn1.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- height: calc(100% - 42px);
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .content-tab {
|
|
|
- width: calc(50% - 20px);
|
|
|
- height: calc(50% - 20px);
|
|
|
- margin: 10px;
|
|
|
- background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
- .title {
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- padding: 0px 15px;
|
|
|
- margin-bottom: 10px;
|
|
|
- border-bottom: 1px solid #0c3c88;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .label {
|
|
|
- // font-family: 'douyuFont';
|
|
|
- font-size: 16px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .details {
|
|
|
- font-size: 14px;
|
|
|
- color: #1f81df;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .content-item {
|
|
|
- height: calc(100% - 60px);
|
|
|
- margin-bottom: 10px;
|
|
|
- overflow: hidden;
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|