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/operationAnalysis.vue | 277 +++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 249 insertions(+), 28 deletions(-)
diff --git a/src/views/securityUnitOperation/operationAnalysis.vue b/src/views/securityUnitOperation/operationAnalysis.vue
index defe937..c50cbfc 100644
--- a/src/views/securityUnitOperation/operationAnalysis.vue
+++ b/src/views/securityUnitOperation/operationAnalysis.vue
@@ -1,20 +1,11 @@
<template>
- <div class="page1">
- <el-row>
- <el-col :span="24">
- <div class="rowContent first-menu">
+ <div class="yyPage">
+ <el-row :gutter="20">
+ <el-col :span="14">
+ <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"
@@ -54,23 +45,18 @@
<span>{{ card.baoanTotal }}</span>
<span>较上月增加{{ card.addbaoanTotal }}人</span>
</div>
- <div class="box-card">
+ <!-- <div class="box-card">
<span>正常保安员</span>
<span>{{ card.zcBaoan }}</span>
<span>较上月增加{{ card.addzcBaoan }}人</span>
- </div>
+ </div> -->
<div class="box-card">
<span>持证保安员</span>
<span>{{ card.czBaoan }}</span>
<span>较上月增加{{ card.addczBaoan }}人</span>
</div>
- <!-- <div class="box-card">
- <span>过考保安员</span>
- <span>{{ card.gkBaoan }}</span>
- <span>较上月增加{{ card.addgkBaoan }}人</span>
- </div> -->
<div class="box-card">
- <span>服务客户</span>
+ <span>服务对象</span>
<span>{{ card.kh }}</span>
<span>较上月增加{{ card.addkh }}家</span>
</div>
@@ -87,6 +73,44 @@
</div>
</div>
</el-col>
+ <el-col :span="10">
+ <div class="rowContent first-menu">
+ <div class="rowTitle">
+ <img src="../../../public/img/bajgxt/yj.png" />
+ <span>预警分析</span>
+ </div>
+
+ <div class="col-content" style="margin-left: 55px;">
+ <div
+ class="box-card"
+ style="margin-right: 50px;cursor: pointer; "
+ @click="showTable('fw')"
+ >
+ <span>服务对象预警(家)</span>
+ <span>{{ card.czBaoan }}</span>
+ <span>服务对象不多于1家</span>
+ </div>
+ <div
+ class="box-card"
+ style="margin-right: 50px;cursor: pointer;"
+ @click="showTable('pq')"
+ >
+ <span>派遣预警(家)</span>
+ <span>{{ card.kh }}</span>
+ <span>派遣比例低于50%</span>
+ </div>
+ <div
+ class="box-card"
+ style="margin-right: 50px;cursor: pointer;"
+ @click="showTable('cz')"
+ >
+ <span>持证上岗预警(家)</span>
+ <span>{{ card.sheb }}</span>
+ <span>持证率低于50%</span>
+ </div>
+ </div>
+ </div>
+ </el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="16">
@@ -97,7 +121,7 @@
</el-col>
<el-col :span="8">
<div class="rowContent" v-loading="loading2">
- <span class="span-title">服务客户</span>
+ <span class="span-title">服务对象</span>
<div id="middleEchart2"></div>
</div>
</el-col>
@@ -134,6 +158,141 @@
</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 === 'fw'">
+ <el-table-column :key="gridData.type" type="index"> </el-table-column>
+ <el-table-column
+ :key="gridData.type"
+ prop="realName"
+ label="保安公司名称"
+ :show-overflow-tooltip="true"
+ ></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="服务对象数"
+ :formatter="sexFormatter"
+ :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"
+ width="100"
+ ></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="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 === 'cz'">
+ <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>
@@ -219,10 +378,30 @@
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 === "fw") {
+ this.gridData.title = "服务对象预警保安公司";
+ } else if (type === "pq") {
+ this.gridData.title = "派遣预警保安公司";
+ } else if (type === "cz") {
+ this.gridData.title = "持证上岗预警保安公司";
+ }
+ },
//点击节点
handleNodeClick(data) {
this.node = data;
@@ -509,7 +688,7 @@
}
}
// 适配分辨率1600*900
-@media screen and (min-width: 1281px)and (max-width: 1600px) {
+@media screen and (min-width: 1281px) and (max-width: 1600px) {
.box-card {
font-size: 15px;
width: 128px;
@@ -594,13 +773,13 @@
}
}
}
-@media screen and (min-width: 1601px)and (max-width: 1920px) {
+@media screen and (min-width: 1601px) and (max-width: 1920px) {
.box-card {
width: 150px;
background: #00aaf1;
height: 135px;
text-align: center;
- margin-right: 66px;
+ margin-right: 30px;
box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
line-height: 40px;
span:nth-child(2) {
@@ -679,7 +858,7 @@
}
}
-.page1 {
+.yyPage {
height: 100%;
width: 100%;
}
@@ -760,7 +939,7 @@
}
.col-content {
display: flex;
- margin-top: 15px;
+ margin-top: 35px;
margin-left: 36px;
}
.leftEchartTitle {
@@ -795,4 +974,46 @@
color: #2ec7c9;
}
}
+/deep/ .el-table .cell {
+ text-align: center;
+}
+.yyPage {
+ /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