首页设备详情表格分页，地模块echarts点击弹窗

guanqb

2022-10-25 b189ec67684cb2111b991562f1c250eb113a751b

首页设备详情表格分页，地模块echarts点击弹窗

 src/styles/base/index.css

@@ -126,3 +126,18 @@
.equiment-details-box .el-dialog .el-dialog .el-dialog__body {
  flex: 1;
}

.land-details-box .el-dialog .el-dialog {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  width: 320px;
  height: 560px;
  top: 50%;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.land-details-box .el-dialog .el-dialog .el-dialog__body {
  flex: 1;
}

 src/styles/base/index.min.css

@@ -1 +1 @@
*{margin:0;padding:0;box-sizing:border-box;scrollbar-color:rgba(7,22,37,0.8) rgba(216,216,216,0.2);scrollbar-width:thin}html,body{width:100%;height:100%}ul li{list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:6px;height:6px;background-color:none}::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(7,22,37,0.8);padding-left:2px;padding-right:2px}::-webkit-scrollbar-track{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:window-inactive{background-color:rgba(7,22,37,0.8)}:not(select)::-webkit-scrollbar{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:hover{background-color:rgba(7,22,37,0.8)}.car-video-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:480px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.car-video-box .el-dialog .el-dialog__body{flex:1}.police-affairs-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:540px;height:420px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.police-affairs-details-box .el-dialog .el-dialog__body{flex:1}.resident-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.resident-details-box .el-dialog .el-dialog__body{flex:1}.phone-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;height:220px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog .el-dialog__body{flex:1}.equiment-details-box .el-dialog .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:520px;height:560px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.equiment-details-box .el-dialog .el-dialog .el-dialog__body{flex:1}
*{margin:0;padding:0;box-sizing:border-box;scrollbar-color:rgba(7,22,37,0.8) rgba(216,216,216,0.2);scrollbar-width:thin}html,body{width:100%;height:100%}ul li{list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:6px;height:6px;background-color:none}::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(7,22,37,0.8);padding-left:2px;padding-right:2px}::-webkit-scrollbar-track{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:window-inactive{background-color:rgba(7,22,37,0.8)}:not(select)::-webkit-scrollbar{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:hover{background-color:rgba(7,22,37,0.8)}.car-video-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:480px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.car-video-box .el-dialog .el-dialog__body{flex:1}.police-affairs-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:540px;height:420px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.police-affairs-details-box .el-dialog .el-dialog__body{flex:1}.resident-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.resident-details-box .el-dialog .el-dialog__body{flex:1}.phone-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;height:220px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog .el-dialog__body{flex:1}.equiment-details-box .el-dialog .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:520px;height:560px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.equiment-details-box .el-dialog .el-dialog .el-dialog__body{flex:1}.land-details-box .el-dialog .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;height:560px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.land-details-box .el-dialog .el-dialog .el-dialog__body{flex:1}

 src/styles/base/index.scss

@@ -140,4 +140,23 @@
            }
        }
    }
}

.land-details-box {
    .el-dialog {
        .el-dialog {
            margin: 0 !important;
            display: flex;
            flex-direction: column;
            width: 320px;
            height: 560px;
            top: 50%;
            left: 50% !important;
            transform: translate(-50%, -50%);
    
            .el-dialog__body {
                flex: 1;
            }
        }
    }
}

 src/views/home/index.vue

@@ -418,7 +418,7 @@
                        </div>
                        <div class="others" v-if="othersContent">
                            <el-table
                                :data="showArr"
                                :data="showArr.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                                style="width: 100%"
                                :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                                :cell-style="{'text-align':'center','borderColor':'#324e75'}"
@@ -463,10 +463,44 @@
                                <el-table-column prop="policeStation" label="所属派出所" width="100"></el-table-column>
                                <el-table-column prop="area" label="所属责任区"></el-table-column>
                            </el-table>
                            <div class="pages">
                                <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    :total="showArr.length"
                                    :page-size="pagesize"
                                    pager-count="3"
                                    :current-page="currentPage"
                                    @current-change="handleCurrentChange"
                                ></el-pagination>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>

        <el-dialog
            :title="landTitle"
            :modal="true"
            :visible.sync="landVisible"
            :before-close="landBeforeClose"
            :close-on-click-modal="true"
            class="land-details-box"
        >
            <el-table
                :data="landDetailArr"
                style="width: 100%"
                :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                :cell-style="{'text-align':'center','borderColor':'#324e75', 'cursor':'pointer'}"
                :height="currentTableHeight"
            >
                <el-table-column prop="housingEastate" label="小区名称" width="100"></el-table-column>
                <el-table-column prop="location" label="位置" width="140"></el-table-column>
                <el-table-column prop="area" label="面积" width="120"></el-table-column>
                <el-table-column prop="superintendent" label="负责人" width="120"></el-table-column>
                <el-table-column prop="phone" label="联系电话" width="120"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
@@ -507,9 +541,11 @@
            panoramaTitle: '',
            activityTitle: '',
            equimentTitle: '',
            landTitle: '',
            panoramaVisible: false,
            activityVisible: false,
            equimentVisible: false,
            landVisible: false,
            phoneDetails: {},
            phoneTitle: '',
            peopleTitle: '',
@@ -705,6 +741,15 @@
            carArrShow: false,
            phoneArrShow: false,
            recorderArrShow: false,
            currentPage: 1,
            pagesize: 9,
            landDetailArr: [
                { 'housingEastate': '阳光小区', 'location': 'XXXXXXXX', 'area': '2122亩', 'superintendent': '王大壮', 'phone': '154XXXX6666' },
                { 'housingEastate': '美丽小区', 'location': 'XXXXXXXX', 'area': '1335亩', 'superintendent': '王二壮', 'phone': '154XXXX6666' },
                { 'housingEastate': '快乐小区', 'location': 'XXXXXXXX', 'area': '4122亩', 'superintendent': '王三壮', 'phone': '154XXXX6666' },
                { 'housingEastate': '健康小区', 'location': 'XXXXXXXX', 'area': '2555亩', 'superintendent': '王四壮', 'phone': '154XXXX6666' },
                { 'housingEastate': '斯哒地小区', 'location': 'XXXXXX', 'area': '1922亩', 'superintendent': '王美丽', 'phone': '154XXXX6666' },
            ],
        }
    },

@@ -744,6 +789,7 @@

        this.clickPeopleChart()
        this.clickEquimentChart()
        this.clickLandChart()


        window.addEventListener('resize', this.setDomStyle)
@@ -1390,6 +1436,7 @@

        equimentBeforeClose () {
            this.equimentVisible = false
            this.currentPage = 1
        },

        initAreaCheckoptions (areaArr) {
@@ -1698,6 +1745,17 @@
            })
        },

        clickLandChart () {
            landMyChart.on('click', params => {
                console.log(params.name)
                this.landVisible = true
                this.landTitle = params.name
                if (params.name) {
                    console.log('11')
                }
            })
        },

        actTabClick (type) {
            this.acttype = type
        },
@@ -1786,7 +1844,12 @@
                })
                this.showArr = arr
            }
        }
        },

        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage
        },

    },

    watch: {},
@@ -2241,8 +2304,13 @@
            }
            .others {
                width: 100%;
                height: 540px;
                height: 495px;
                background-color: red;
                .pages {
                    background-color: #14327b;
                    padding-bottom: 3px;
                    padding-top: 10px;
                }
            }
        }
    }