From 19b2aecdae749714ece664c8faddd7bda846f9f1 Mon Sep 17 00:00:00 2001
From: zhengpz <1838927346@qq.com>
Date: Sun, 12 Sep 2021 22:45:45 +0800
Subject: [PATCH] 更改界面
---
src/views/securityUnitOperation/economicAnalysis.vue | 308 ++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 291 insertions(+), 17 deletions(-)
diff --git a/src/views/securityUnitOperation/economicAnalysis.vue b/src/views/securityUnitOperation/economicAnalysis.vue
index 94707c8..df24887 100644
--- a/src/views/securityUnitOperation/economicAnalysis.vue
+++ b/src/views/securityUnitOperation/economicAnalysis.vue
@@ -1,20 +1,11 @@
<template>
- <div class="page1">
- <el-row>
- <el-col :span="24">
- <div class="rowContent first-menu">
+ <div class="jjPage">
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <div class="rowContent first-menu" style="position: relative;">
<div class="rowTitle">
<img src="../../../public/img/bajgxt/u1618.png" />
<span>数据概览</span>
- <!-- <el-select class="select0" v-model="value0" placeholder="请选择">
- <el-option
- v-for="item in options0"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </el-select> -->
<el-select
class="select1"
ref="treeForm"
@@ -73,6 +64,53 @@
</div>
</div>
</el-col>
+ <el-col :span="12">
+ <div class="rowContent first-menu">
+ <div class="rowTitle">
+ <img src="../../../public/img/bajgxt/yj.png" />
+ <span>数据概览</span>
+ </div>
+
+ <div class="col-content">
+ <div
+ class="box-card"
+ style="cursor: pointer; "
+ @click="showTable('sb')"
+ >
+ <span>社保缴纳预警(家)</span>
+ <span>{{ socialSecurity.num }}</span>
+ <span>社保缴纳低于90%</span>
+ </div>
+ <div
+ class="box-card"
+ style="cursor: pointer; "
+ @click="showTable('bx')"
+ >
+ <span>保险缴纳预警(家)</span>
+ <span>{{ socialSecurity.money }}</span>
+ <span>保险缴纳低于90%</span>
+ </div>
+ <div
+ class="box-card"
+ style="cursor: pointer; "
+ @click="showTable('fw')"
+ >
+ <span>服务合同预警(家)</span>
+ <span>{{ socialSecurity.paiQ }}</span>
+ <span>服务合同不多于一份</span>
+ </div>
+ <div
+ class="box-card"
+ style="cursor: pointer; "
+ @click="showTable('pq')"
+ >
+ <span>派遣预警(家)</span>
+ <span>{{ socialSecurity.sheBPerson }}</span>
+ <span>派遣比例少于50%</span>
+ </div>
+ </div>
+ </div>
+ </el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="16">
@@ -96,6 +134,178 @@
</div>
</el-col>
</el-row>
+ <el-dialog
+ class="dialog"
+ :title="gridData.title"
+ v-loading="dialogloading"
+ element-loading-text="数据加载中"
+ :visible.sync="dialogTableVisible"
+ :modal-append-to-body="false"
+ >
+ <el-table :data="gridData.data">
+ <template v-if="gridData.type === 'sb'">
+ <el-table-column :key="gridData.type" type="index"> </el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="realName"
+ label="保安公司名称"
+ :show-overflow-tooltip="true"
+ width="180"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="deptName"
+ label="所属辖区"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="sex"
+ label="保安总人数"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="cardid"
+ label="社保缴纳人数"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="age"
+ label="社保缴纳比例"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="age"
+ label="备注"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ </template>
+ <template v-if="gridData.type === 'bx'">
+ <el-table-column :key="gridData.type" type="index"> </el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="enterpriseName"
+ label="保安公司名称"
+ width="180"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="znum"
+ label="所属辖区"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="cznum"
+ label="保安总人数"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="czl"
+ label="保险缴纳人数"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="sbnum"
+ label="保险缴纳比例"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="sbl"
+ label="备注"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ </template>
+ <template v-if="gridData.type === 'fw'">
+ <el-table-column :key="gridData.type" type="index"> </el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="enterpriseName"
+ label="保安公司名称"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="znum"
+ label="所属辖区"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="cznum"
+ label="服务合同数"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="painum"
+ label="服务单位名称"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="pql"
+ label="备注"
+ :show-overflow-tooltip="true"
+ ></el-table-column> </template
+ ><template v-if="gridData.type === 'pq'">
+ <el-table-column :key="gridData.type" type="index"> </el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="enterpriseName"
+ label="保安公司名称"
+ width="180"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="znum"
+ label="所属辖区"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="cznum"
+ label="保安总人数"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="painum"
+ label="派遣人数"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="fwnum"
+ label="派遣比例"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="pql"
+ label="备注"
+ :show-overflow-tooltip="true"
+ ></el-table-column>
+ </template>
+ </el-table>
+ <el-pagination
+ @current-change="changePage"
+ @size-change="changePage"
+ :current-page.sync="gridData.current"
+ :page-size="10"
+ layout="total, prev, pager, next, jumper"
+ :total="gridData.total"
+ >
+ </el-pagination>
+ </el-dialog>
</div>
</template>
@@ -165,10 +375,32 @@
label: "title",
value: "id"
},
- node: {} //选中的记录
+ node: {}, //选中的记录
+ gridData: {
+ data: [],
+ total: 0,
+ current: 1,
+ type: "fw",
+ title: ""
+ },
+ dialogloading: false,
+ dialogTableVisible: false
};
},
methods: {
+ showTable(type) {
+ this.gridData.type = type;
+ this.dialogTableVisible = true;
+ if (type === "sb") {
+ this.gridData.title = "社保缴纳预警保安公司";
+ } else if (type === "bx") {
+ this.gridData.title = "保险缴纳预警保安公司";
+ } else if (type === "fw") {
+ this.gridData.title = "服务合同预警保安公司";
+ } else if (type === "pq") {
+ this.gridData.title = "派遣预警保安公司";
+ }
+ },
//点击节点
handleNodeClick(data) {
this.node = data;
@@ -367,7 +599,7 @@
background: #00aaf1;
height: 135px;
text-align: center;
- margin-right: 66px;
+ margin-right: 34px;
box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
line-height: 40px;
span:nth-child(2) {
@@ -376,7 +608,7 @@
}
}
}
-.page1 {
+.jjPage {
height: 100%;
width: 100%;
}
@@ -456,7 +688,49 @@
}
.col-content {
display: flex;
- margin-top: 15px;
+ margin-top: 35px;
margin-left: 36px;
}
+/deep/ .el-table .cell {
+ text-align: center;
+}
+.jjPage {
+ /deep/.dialog {
+ z-index: 10000000 !important;
+ .el-table {
+ top: 0px !important;
+ margin: 0px !important;
+ width: 100% !important;
+ height: calc(100% - 50px) !important;
+
+ .el-table__header {
+ background-color: #2d5cc8 !important;
+ }
+ .el-table__body-wrapper {
+ height: calc(100% - 50px);
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+ }
+ .el-pagination {
+ color: #a2a5a5;
+ }
+ .btn-prev,
+ .btn-next {
+ background: transparent !important;
+ }
+ .el-dialog__body {
+ padding: 10px 20px;
+ height: calc(100% - 60px);
+ .el-input {
+ width: 50px !important;
+ border-bottom: 1px solid #8a7b7b !important;
+ }
+ }
+ }
+ /deep/ .el-dialog {
+ width: 80% !important;
+ height: 77%;
+ }
+}
</style>
--
Gitblit v1.9.3