index.vue

<template>
    <div class="manage-container clerk-wrapper">
        <el-row class="manage-head-wrapper">
            <el-col :span="20">
                <!-- 广场 -->
                <div class="manage-select-box">
                    <el-select v-model="mallVal" class="mall-opt" filterable @change="chooseMall(mallVal)">
                        <el-option v-for="item in mallOpt" :label="item.name" :value="item.id" :key="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="manage-select-box">
                    <el-select v-model="status" class="mall-opt" :placeholder='$t("pholder.state")'>
                        <el-option :label='$t("pholder.all")' value=""></el-option>
                        <el-option :label='$t("pholder.state1")' value="1"></el-option>
                        <el-option :label='$t("pholder.state2")' value="2"></el-option>
                    </el-select>
                </div>
                <el-button type="primary" class="search-btn" plain size="mini" @click="searchFun">
                    {{ $t('button.search')}}</el-button>
            </el-col>
            <el-col :span="4" :sm="4">
              <div class="btn-box">
                <el-button
                  type="primary"
                  size="mini"
                  class="manage-refresh-btn fl-btn"
                  @click='exportData'
                >{{$t('allPages.load')}}</el-button>
              </div>
            </el-col>
        </el-row>
        <el-row class="manage-content">
            <el-radio-group v-model="isRelation" class="relationTab" @change="radioChange">
                <el-radio-button label="1">已关联监控点</el-radio-button>
                <el-radio-button label="2">未关联监控点</el-radio-button>
            </el-radio-group>
            <el-table v-if="isRelation==1" v-loading="loading" :data="tableData" :max-height="tableHeight"
                :span-method="objectSpanMethodAuto1">
                <el-table-column prop="floorName" :label="$t('table.floorName')"></el-table-column>
                <el-table-column prop="zoneName" :label="$t('table.shop')"></el-table-column>
                <el-table-column prop="gateName" :label="$t('table.monitorSiteName')"></el-table-column>
                <el-table-column prop="dataDirection" label="数据方向"></el-table-column>
                <el-table-column prop="localIp" :label="$t('table.localIP')"></el-table-column>
                <el-table-column prop="channelNo" label="通道号"></el-table-column>
                <el-table-column prop="softwareVersion" :label="$t('dialog.swVersion')"></el-table-column>
                <el-table-column prop="hardwareVersion" :label="$t('dialog.hwVersion')"></el-table-column>
                <el-table-column :label="$t('table.operate')" width="100">
                    <template slot-scope="scope">
                        <el-button @click="editRow(scope.row)" type="text" size="small" class="tab-btn">
                            {{$t('button.look')}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-table v-if="isRelation==2" v-loading="loading" :data="tableData" :max-height="tableHeight"
                :span-method="objectSpanMethodAuto2">
                <el-table-column prop="floorName" :label="$t('table.floorName')"></el-table-column>
                <el-table-column prop="gateName" :label="$t('table.monitorSiteName')"></el-table-column>
                <el-table-column prop="status" :label="$t('table.state')"></el-table-column>
                <el-table-column prop="type" label="监控点类型"></el-table-column>
                <el-table-column prop="localIp" :label="$t('table.localIP')"></el-table-column>
                <el-table-column prop="channelNo" label="通道号"></el-table-column>
                <el-table-column prop="name" label="通道类型"></el-table-column>
                <el-table-column prop="softwareVersion" :label="$t('dialog.swVersion')"></el-table-column>
                <el-table-column prop="hardwareVersion" :label="$t('dialog.hwVersion')"></el-table-column>
                <el-table-column :label="$t('table.operate')" width="100">
                    <template slot-scope="scope">
                        <el-button @click="editRow(scope.row)" type="text" size="small" class="tab-btn">
                            {{$t('button.look')}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-dialog :title="$t('button.details')" class="manage-dialog"
          :visible.sync="bindVisible" :close-on-click-modal="false" @close="bindVisible=false">
          <div class="imgBox">
            <el-image :src="imageUrl"></el-image>
          </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                mallName: "",
                mallVal: null,
                mallOpt: [],
                tableData: [],
                loading: true,
                isRelation: 1,
                status: '',
                rowIndexArr: [],
                rowIndexArr1:[],
                bindVisible:false,
                imageUrl : ''
            };
        },
        computed: {
            tableHeight() {
                const windowInnerHeight = window.innerHeight;
                return windowInnerHeight - windowInnerHeight * 0.24;
            }
        },
        mounted() {
            this.getMallList();
        },
        methods: {
            // 广场
            getMallList() {
                this.mallOpt = [];
                this.mallVal = null;
                this.mallName = "";
                const storageMallVal = this.getSessionLocal("mallId")
                this.$api.base.mall({
                    accountId: this.$cookie.get("accountId"),
                    status_arr: '1,3'
                }, null, true).then(res => {
                    let result = res.data.data;
                    if (result.length > 0) {
                        this.mallOpt = result;
                        if (storageMallVal) {
                            this.mallVal = storageMallVal - 0;
                            const matchedMall = result.find(item => item.id === this.mallVal)
                            this.mallName = matchedMall.name;
                        } else {
                            this.mallVal = result[0].id;
                            this.setSessionLocal("mallId", this.mallVal);
                            this.mallName = result[0].name;
                        }
                        this.getTableData()
                    }
                })
            },
            chooseMall(mallId) {
                this.setSessionLocal("mallId", mallId);
                const matchedMall = this.mallOpt.find(item => item.id == mallId)
                this.mallName = matchedMall.name;
                this.getTableData()
            },
            radioChange(data) {
                this.getTableData()
            },
            getTableData() {
                this.loading = true
                this.tableData = [];
                let tabelParams = {
                    mallId: this.mallVal,
                    status: this.status,
                };
                if (this.isRelation == 1) {
                    this.$api.management.getRelatedList(tabelParams, null, true).then(data => {
                        let result = data.data;
                        this.loading = false
                        this.tableData = result.data;
                        this.tableFilter(this.tableData)
                    })
                } else {
                    this.$api.management.getUnrelatedList(tabelParams, null, true).then(data => {
                        let result = data.data;
                        this.loading = false
                        this.tableData = result.data;
                        this.tableFilter(this.tableData)
                    })
                }
            },
            searchFun() {
                this.getTableData();
            },
            tableFilter(tableData) {
                let res = tableData
                this.rowIndexArr = [];
                this.rowIndexArr1 = []
                res.reduce((result, currentVal, currentIndex) => {
                    // 将单元格合并的起始位0放到数组中
                    // 每次出现两个日期不相等时，说明之前的日期是相等的，此时需要合并，保存这个拐点的index，作为下一个合并的开始位置
                    if (result == 0 || result != currentVal.floorName) {
                        this.rowIndexArr.push(currentIndex)
                    }
                    return currentVal.floorName
                }, 0)
                // 最后将数据的长度保存起来，目的是最后一次合并时，知道要合并多少条数据
                this.rowIndexArr.push(res.length)
                if(this.isRelation==1){
                  res.reduce((result, currentVal, currentIndex) => {
                    // 将单元格合并的起始位0放到数组中
                    // 每次出现两个日期不相等时，说明之前的日期是相等的，此时需要合并，保存这个拐点的index，作为下一个合并的开始位置
                    if (result == 0 || result != currentVal.zoneName) {
                      this.rowIndexArr1.push(currentIndex)
                    }
                    return currentVal.zoneName
                  }, 0)
                  // 最后将数据的长度保存起来，目的是最后一次合并时，知道要合并多少条数据
                  this.rowIndexArr1.push(res.length)
                }
            },
            objectSpanMethodAuto1({row, column, rowIndex,columnIndex}) {
                if (columnIndex === 0) {
                    // 此时rowIndexArr存储了所有合并开始的点的索引，两个索引的差值，就是合并的项数
                    if (this.rowIndexArr.includes(rowIndex)) {
                        return {
                            rowspan: this.rowIndexArr[this.rowIndexArr.indexOf(rowIndex) + 1] - rowIndex,
                            colspan: 1
                        }
                    } else {
                      return {
                          rowspan: 0,
                          colspan: 0
                      }
                  }
                }
                if (columnIndex === 1) {
                    // 此时rowIndexArr存储了所有合并开始的点的索引，两个索引的差值，就是合并的项数
                    if (this.rowIndexArr1.includes(rowIndex)) {
                      return {
                        rowspan: this.rowIndexArr1[this.rowIndexArr1.indexOf(rowIndex) + 1] - rowIndex,
                        colspan: 1
                      }
                    } else {
                      return {
                        rowspan: 0,
                        colspan: 0
                      }
                    }
                }
            },
            objectSpanMethodAuto2({row, column, rowIndex,columnIndex}) {
                if (columnIndex === 0) {
                    // 此时rowIndexArr存储了所有合并开始的点的索引，两个索引的差值，就是合并的项数
                    if (this.rowIndexArr.includes(rowIndex)) {
                        return {
                            rowspan: this.rowIndexArr[this.rowIndexArr.indexOf(rowIndex) + 1] - rowIndex,
                            colspan: 1
                        }
                    } else {
                      return {
                          rowspan: 0,
                          colspan: 0
                      }
                  }
                }
            },
            editRow(row){
              this.bindVisible = true;
              this.imageUrl = window._vionConfig.picUrl + "/snapshot/real/" + row.channelNo + ".jpg?t=" + Date.parse(new Date()) / 1000;
            },
            exportData(){
              let token = this.$cookie.get("atoken");
              let Url = `${window._vionConfig.apiUrl}/organizational/relationship/gate/download?mallId=${this.mallVal}&status=${this.status}&authorization=${token}`
              window.open(Url);
            }
        }
    };
</script>

<style scoped lang="less">
    .manage-select-box .el-select {
        width: 200px;
    }
    .manage-container {
        height: 100%;

        /deep/ .el-table .cell {
            padding-right: 0;
        }

        /deep/.el-table tr {
            cursor: pointer;
        }

        /deep/.el-table__body tr.current-row>td.el-table__cell {
            background-color: #c8e1ff;
        }
    }

    .manage-content {
        height: calc(100% - 100px);
    }

    .relationTab {
        margin-bottom: 15px;
    }
    .manage-dialog{
      /deep/.el-dialog{
        width: 800px !important;
        .imgBox{
          min-width: 200px;
          min-height: 200px;
          text-align: center;
          .el-image__error{
            width: 200px;
            height: 200px;
          }
        }
      }
    }

</style>