首页数据展示size更改,安商惠企更改

pull/120/head
lukeyan 1 year ago
parent 8547bc3c89
commit 8f73917d9e

@ -5,10 +5,10 @@ import { getToken } from '@/utils/auth'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8' axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const request = axios.create({ const request = axios.create({
// baseURL: 'http://172.18.113.50:8080/zhapi', // baseURL: 'http://172.18.113.50:8080/zhapi',
//baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强 baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强
//baseURL: 'http://192.168.0.188:8888/zhapi', //baseURL: 'http://192.168.0.188:8888/zhapi',
//baseURL: 'http://121.41.91.94:12002/zhapi', //baseURL: 'http://121.41.91.94:12002/zhapi',
baseURL: `http://${window.location.host}/zhapi`, //baseURL: `http://${window.location.host}/zhapi`,
timeout: 50000, timeout: 50000,
headers: { 'content-type': 'application/json' }, headers: { 'content-type': 'application/json' },
}) })

@ -25,14 +25,14 @@
</div> </div>
<div class="key_person_text">重点人员核查</div> <div class="key_person_text">重点人员核查</div>
</div> </div>
<!-- 重点物品核查 --> <!-- 警情通报 -->
<div class="list_box key_item"> <div class="list_box key_item">
<div class="key_item_icon_box"> <div class="key_item_icon_box">
<!-- 遮罩层 负责旋转动画 --> <!-- 遮罩层 负责旋转动画 -->
<div class="blue_mark turn"></div> <div class="blue_mark turn"></div>
<div class="key_item_icon"></div> <div class="key_item_icon"></div>
</div> </div>
<div class="key_item_text">重点物品核查</div> <div class="key_item_text">警情通报</div>
</div> </div>
<!-- 企业纠纷调解 --> <!-- 企业纠纷调解 -->
<div class="list_box company_dispute"> <div class="list_box company_dispute">
@ -88,14 +88,14 @@
</div> </div>
<div class="statement_text">统计报表</div> <div class="statement_text">统计报表</div>
</div> </div>
<!-- 经侦最佳指标 --> <!-- 企业反馈 -->
<div class="list_box target"> <div class="list_box target">
<div class="target_icon_box"> <div class="target_icon_box">
<!-- 遮罩层 负责旋转动画 --> <!-- 遮罩层 负责旋转动画 -->
<div class="blue_mark turn"></div> <div class="blue_mark turn"></div>
<div class="target_icon"></div> <div class="target_icon"></div>
</div> </div>
<div class="target_text">经侦最佳指标</div> <div class="target_text">企业反馈</div>
</div> </div>
</div> </div>
<!-- 跳转至人员背景审查详情 --> <!-- 跳转至人员背景审查详情 -->

@ -3,7 +3,7 @@
<div> <div>
<el-table <el-table
:data="abnormal_table_data.rows" :data="abnormal_table_data.rows"
height="285" height="270"
:header-cell-style="table_header" :header-cell-style="table_header"
:cell-style="{ background: 'revert', 'text-align': 'center' }" :cell-style="{ background: 'revert', 'text-align': 'center' }"
@expand-change="to_expand" @expand-change="to_expand"

@ -3,7 +3,7 @@
<div> <div>
<el-table <el-table
:data="normal_table_data.rows" :data="normal_table_data.rows"
height="285" height="270"
:header-cell-style="table_header" :header-cell-style="table_header"
:cell-style="{ background: 'revert', 'text-align': 'center' }" :cell-style="{ background: 'revert', 'text-align': 'center' }"
> >

@ -18,7 +18,7 @@
<div class="item_text_left_text"> <div class="item_text_left_text">
<div class="item_text_cell">企业名称:</div> <div class="item_text_cell">企业名称:</div>
<div class="item_text_cell">审核原因:</div> <div class="item_text_cell">审核原因:</div>
<div class="item_text_cell">审查人数:</div> <div class="item_text_cell">上报人数:</div>
</div> </div>
<div class="item_text_left_value"> <div class="item_text_left_value">
<div class="item_value_cell">{{ this.form_data.companyName }}</div> <div class="item_value_cell">{{ this.form_data.companyName }}</div>

@ -24,7 +24,7 @@
<div class="cell_body_information"> <div class="cell_body_information">
<div class="cell_body_information_text"> <div class="cell_body_information_text">
<div class="text_cell">审查原因:</div> <div class="text_cell">审查原因:</div>
<div class="text_cell">审查人数:</div> <div class="text_cell">上报人数:</div>
<div class="text_cell">申请时间:</div> <div class="text_cell">申请时间:</div>
<div class="text_cell">审查结果:</div> <div class="text_cell">审查结果:</div>
</div> </div>
@ -46,7 +46,7 @@
<div class="cell_body_information"> <div class="cell_body_information">
<div class="cell_body_information_text"> <div class="cell_body_information_text">
<div class="text_cell">审查原因:</div> <div class="text_cell">审查原因:</div>
<div class="text_cell">审查人数:</div> <div class="text_cell">上报人数:</div>
<div class="text_cell">申请时间:</div> <div class="text_cell">申请时间:</div>
<div class="text_cell">审查结果:</div> <div class="text_cell">审查结果:</div>
</div> </div>
@ -115,7 +115,7 @@ export default {
res.rows[i].abnormal_num = res.rows[ res.rows[i].abnormal_num = res.rows[
i i
].examinationResultDetail.substring( ].examinationResultDetail.substring(
res.rows[i].examinationResultDetail.indexOf("正常") + 3, res.rows[i].examinationResultDetail.indexOf("正常,") + 3,
res.rows[i].examinationResultDetail.indexOf("人异常") res.rows[i].examinationResultDetail.indexOf("人异常")
); );
console.log(res.rows[i].abnormal_num); console.log(res.rows[i].abnormal_num);

@ -2,30 +2,60 @@
<div class="mainBox scroll-target"> <div class="mainBox scroll-target">
<div class="topZS"></div> <div class="topZS"></div>
<div class="title"> <div class="title">
企业员工<span>{{ total }}</span> 企业员工<span>{{ total }}</span
>
</div> </div>
<el-form :model="formInline" class="search"> <el-form :model="formInline" class="search">
<el-form-item label="员工姓名:" class="formItem"> <el-form-item label="员工姓名:" class="formItem">
<el-input v-model.trim="formInline.staffName" clearable class="formIpt"></el-input> <el-input
v-model.trim="formInline.staffName"
clearable
class="formIpt"
></el-input>
</el-form-item> </el-form-item>
<el-button type="primary" @click="getList(formInline.staffName ? activeName : '全部')">搜索</el-button> <el-button
type="primary"
@click="getList(formInline.staffName ? activeName : '全部')"
>搜索</el-button
>
</el-form> </el-form>
<div class="monitorBox"> <div class="monitorBox">
<el-tabs type="border-card" v-model="activeName"> <el-tabs type="border-card" v-model="activeName">
<el-tab-pane v-for="(item, index) in wpCount" :key="index" :name="item.type"> <el-tab-pane
<div class="paneInner" slot="label" @click="getList(item.type)">{{ item.type v-for="(item, index) in wpCount"
}}{{ item.number }}</div> :key="index"
</el-tab-pane> :name="item.type"
>
<div class="paneInner" slot="label" @click="getList(item.type)">
{{ item.type }}({{ item.number }})
</div> </el-tab-pane
>
</el-tabs> </el-tabs>
<el-table :cell-style="{ background: 'revert' }" :data="tableData" class="table" <el-table
style="width: calc(100% - 40px); margin:0 20px;" :row-style="tableRowStyle" :cell-style="{ background: 'revert' }"
:header-row-style="tableHeaderColor" :header-cell-style="tableHeaderCellColor"> :data="tableData"
class="table"
style="width: calc(100% - 40px); margin: 0 20px"
:row-style="tableRowStyle"
:header-row-style="tableHeaderColor"
:header-cell-style="tableHeaderCellColor"
>
<el-table-column type="index" width="50" label="序号"> <el-table-column type="index" width="50" label="序号">
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip label="照片" width="80"> <el-table-column show-overflow-tooltip label="照片" width="80">
<template slot-scope="scope"> <template slot-scope="scope">
<img :src="scope.row.picUrl" class="ygzp" alt="" v-if="scope.row.picUrl"> <img
<img src="../../assets/archives/touxiang.png" class="ygzp" alt="" v-else> :src="scope.row.picUrl"
class="ygzp"
alt=""
v-if="scope.row.picUrl"
/>
<img
src="../../assets/archives/touxiang.png"
class="ygzp"
alt=""
v-else
/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip label="姓名" width="80"> <el-table-column show-overflow-tooltip label="姓名" width="80">
@ -33,36 +63,68 @@
<div class="staffName">{{ scope.row.staffName }}</div> <div class="staffName">{{ scope.row.staffName }}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="sexCn" label="性别" width="60"> <el-table-column
show-overflow-tooltip
prop="sexCn"
label="性别"
width="60"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip label="身份证号" width="180"> <el-table-column show-overflow-tooltip label="身份证号" width="180">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="identityId">{{ scope.row.identityId }}</div> <div class="identityId">{{ scope.row.identityId }}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="staffTypeCn" label="人员类型" width="90"> <el-table-column
show-overflow-tooltip
prop="staffTypeCn"
label="人员类型"
width="90"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip label="家庭住址" prop="homeAddress"> <el-table-column
show-overflow-tooltip
label="家庭住址"
prop="homeAddress"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="contactInfo" label="联系方式" width="150"> <el-table-column
show-overflow-tooltip
prop="contactInfo"
label="联系方式"
width="150"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="staffPosition" label="职位" width="120"> <el-table-column
show-overflow-tooltip
prop="staffPosition"
label="职位"
width="120"
>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<div class="block"> <div class="block">
<el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true" <el-pagination
@size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" style="float: right; margin: 5px"
:page-sizes="[5]" layout="total, sizes, prev, pager, next, jumper" :total="total"> class="msg-pagination-container"
:background="true"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination> </el-pagination>
</div> </div>
<div class="bottomZS"></div> <div class="bottomZS"></div>
</div> </div>
</template> </template>
<script> <script>
import { tbSafeCompanyStaff, tbSafeCompanyStaffCount } from '@/api/archives' import { tbSafeCompanyStaff, tbSafeCompanyStaffCount } from "@/api/archives";
export default { export default {
props: ['companyID'], props: ["companyID"],
data() { data() {
return { return {
formInline: {}, formInline: {},
@ -72,85 +134,97 @@ export default {
tableData: [], tableData: [],
wpCount: {}, wpCount: {},
goodsType: null, goodsType: null,
activeName: '全部', activeName: "全部",
} };
}, },
created() { created() {
this.getList() this.getList();
}, },
methods: { methods: {
getWpTotal() { getWpTotal() {
tbSafeCompanyStaffCount({ companyId: this.companyID, ...this.formInline, }).then(res => { tbSafeCompanyStaffCount({
this.wpCount = res.data companyId: this.companyID,
...this.formInline,
}).then((res) => {
this.wpCount = res.data;
this.wpCount.forEach((item) => { this.wpCount.forEach((item) => {
if (item.type == '全部') { if (item.type == "全部") {
this.wpCount = this.wpCount.filter(a => a.type != '全部') this.wpCount = this.wpCount.filter((a) => a.type != "全部");
this.wpCount.unshift(item) this.wpCount.unshift(item);
} }
}); });
});
})
}, },
getList(val) { getList(val) {
if (val) { if (val) {
this.activeName = val this.activeName = val;
if (val == '全部') { if (val == "全部") {
this.goodsType = null this.goodsType = null;
} else if (val == "普通员工") {
} else if (val == '普通员工') { this.goodsType = 1;
this.goodsType = 1 } else if (val == "重点岗位") {
} else if (val == '重点岗位') { this.goodsType = 2;
this.goodsType = 2 } else if (val == "专家人员") {
} else if (val == '专家人员') { this.goodsType = 3;
this.goodsType = 3 } else if (val == "重点人员") {
} else if (val == '重点人员') { this.goodsType = 4;
this.goodsType = 4 }
} }
} console.log(this.activeName, "this.activeName");
console.log(this.activeName, 'this.activeName'); tbSafeCompanyStaff({
tbSafeCompanyStaff({ pageSize: this.pageSize, pageNum: this.pageNum, ...this.formInline, companyId: this.companyID, staffType: this.goodsType }).then(res => { pageSize: this.pageSize,
this.tableData = res.data pageNum: this.pageNum,
this.total = res.total ...this.formInline,
}) companyId: this.companyID,
this.getWpTotal() staffType: this.goodsType,
}).then((res) => {
this.tableData = res.data;
this.total = res.total;
});
this.getWpTotal();
}, },
showDia() { showDia() {
this.diaVisible = true this.diaVisible = true;
}, },
tableRowStyle({ rowIndex }) { tableRowStyle({ rowIndex }) {
if ((rowIndex + 1) % 2 == 1) { if ((rowIndex + 1) % 2 == 1) {
return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0' } return { background: "rgba(0,0,0,0)", color: "#fff", border: "0" };
} else { } else {
return { 'background': 'rgba(61, 85, 102, 0.16)', 'border': '0', 'color': '#fff' } return {
background: "rgba(61, 85, 102, 0.16)",
border: "0",
color: "#fff",
};
} }
}, },
tableHeaderColor() { tableHeaderColor() {
return { 'background': 'linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)' } return {
background:
"linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)",
};
// return { 'background': 'url("~@/assets/archives/9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' } // return { 'background': 'url("~@/assets/archives/9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
}, },
tableHeaderCellColor() { tableHeaderCellColor() {
return { 'background': 'rgba(0,0,0,0)', 'border': '0', 'color': '#fff' } return { background: "rgba(0,0,0,0)", border: "0", color: "#fff" };
}, },
handleSizeChange(val) { handleSizeChange(val) {
this.pageNum = 1; this.pageNum = 1;
this.pageSize = val; this.pageSize = val;
this.getList() this.getList();
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.pageNum = val; this.pageNum = val;
this.getList() this.getList();
}, },
}, },
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.mainBox { .mainBox {
width: 100%; width: 100%;
height: 620px; height: 620px;
background: url('~@/assets/companyFile/背景22136.png') no-repeat; background: url("~@/assets/companyFile/背景22136.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 70px 20px 60px; padding: 70px 20px 60px;
box-sizing: border-box; box-sizing: border-box;
@ -162,18 +236,15 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-wrap: wrap; flex-wrap: wrap;
} }
/deep/.el-input__inner { /deep/.el-input__inner {
// background: url('~@/assets/companyFile/2121.png') no-repeat; // background: url('~@/assets/companyFile/2121.png') no-repeat;
background: url('~@/assets/companyFile/矩形备份 18.png') no-repeat; background: url("~@/assets/companyFile/矩形备份 18.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
border: 1px solid rgba(40, 132, 126, 1); border: 1px solid rgba(40, 132, 126, 1);
color: rgba(234, 246, 255, 0.7); color: rgba(234, 246, 255, 0.7);
;
.el-range-separator { .el-range-separator {
color: #ccc; color: #ccc;
} }
@ -190,26 +261,29 @@ export default {
height: 50px; height: 50px;
width: calc(100% - 40px); width: calc(100% - 40px);
margin: 0 20px; margin: 0 20px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
.el-tabs__header { .el-tabs__header {
display: inline-block; display: inline-block;
width: auto; width: auto;
background: linear-gradient(180deg, rgba(234, 241, 248, 0.1) 0%, rgba(208, 222, 238, 0.1) 100%); background: linear-gradient(
180deg,
rgba(234, 241, 248, 0.1) 0%,
rgba(208, 222, 238, 0.1) 100%
);
opacity: 0.7; opacity: 0.7;
border: 1px solid #5B748C; border: 1px solid #5b748c;
.el-tabs__nav { .el-tabs__nav {
display: inline-block; display: inline-block;
width: auto; width: auto;
display: flex; display: flex;
} }
.el-tabs__item { .el-tabs__item {
width: 130px; width: 130px;
border: 0; border: 0;
color: #EAF6FF; color: #eaf6ff;
padding: 5px; padding: 5px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -222,19 +296,14 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
} }
.el-tabs__item:not(:last-child)::after { .el-tabs__item:not(:last-child)::after {
content: ''; content: "";
width: 1px; width: 1px;
height: 20px; height: 20px;
background: #EAF6FF; background: #eaf6ff;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-left: 5px; margin-left: 5px;
@ -244,7 +313,7 @@ export default {
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
border: 0; border: 0;
color: #4BFFAD; color: #4bffad;
padding: 5px; padding: 5px;
box-sizing: border-box; box-sizing: border-box;
@ -271,7 +340,7 @@ export default {
} }
.identityId { .identityId {
color: #30C4FF; color: #30c4ff;
letter-spacing: 1px; letter-spacing: 1px;
cursor: pointer; cursor: pointer;
} }
@ -322,21 +391,21 @@ export default {
line-height: 36; line-height: 36;
font-size: 16px; font-size: 16px;
color: #EBFFF4; color: #ebfff4;
letter-spacing: 2px; letter-spacing: 2px;
line-height: 36px; line-height: 36px;
text-shadow: 0 0 9px rgba(21, 255, 195, 0.60); text-shadow: 0 0 9px rgba(21, 255, 195, 0.6);
font-weight: 400; font-weight: 400;
span { span {
color: #FF9191; color: #ff9191;
} }
} }
.picForm { .picForm {
/deep/ .el-dialog { /deep/ .el-dialog {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
background: url('~@/assets/companyFile/背景091.png') no-repeat; background: url("~@/assets/companyFile/背景091.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 1041px; width: 1041px;
height: 420px; height: 420px;
@ -344,7 +413,7 @@ export default {
.el-dialog__title { .el-dialog__title {
font-size: 16px; font-size: 16px;
color: #EBFFF4; color: #ebfff4;
letter-spacing: 2px; letter-spacing: 2px;
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77); text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
@ -358,7 +427,6 @@ export default {
.scopeQuantity { .scopeQuantity {
letter-spacing: 2px; letter-spacing: 2px;
} }
} }
} }
} }
@ -368,14 +436,11 @@ export default {
margin-left: 20px; margin-left: 20px;
.el-form-item__label { .el-form-item__label {
color: #EAF6FF; color: #eaf6ff;
letter-spacing: 1px; letter-spacing: 1px;
text-align: center; text-align: center;
font-weight: 400; font-weight: 400;
} }
} }
/deep/.el-button--primary { /deep/.el-button--primary {
@ -388,10 +453,10 @@ export default {
text-align: center; text-align: center;
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
border: 0; border: 0;
background: url('~@/assets/companyFile/2121.png') no-repeat; background: url("~@/assets/companyFile/2121.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 14px; font-size: 14px;
color: #F8FBFF; color: #f8fbff;
letter-spacing: 0.89px; letter-spacing: 0.89px;
font-weight: 500; font-weight: 500;
} }

@ -17,6 +17,10 @@
>综合指数</el-menu-item >综合指数</el-menu-item
> >
<div class="shu"></div> <div class="shu"></div>
<el-menu-item index="6" route="/home/applySupermarket"
>安商惠企</el-menu-item
>
<div class="shu"></div>
<el-menu-item index="2" route="/home/realtimeWarning" <el-menu-item index="2" route="/home/realtimeWarning"
>实时预警</el-menu-item >实时预警</el-menu-item
> >
@ -33,10 +37,6 @@
>企业档案</el-menu-item >企业档案</el-menu-item
> >
<div class="shu"></div> <div class="shu"></div>
<el-menu-item index="6" route="/home/applySupermarket"
>应用超市</el-menu-item
>
<div class="shu"></div>
<el-menu-item index="7" route="/home/systemManagement/safeIndex" <el-menu-item index="7" route="/home/systemManagement/safeIndex"
>系统管理</el-menu-item >系统管理</el-menu-item
> >

@ -1,44 +1,84 @@
<template> <template>
<div class="qycl"> <div class="qycl">
<div class="title"><img src="../../assets/safetyIndex/装饰009991.png" alt="">企业车辆</div> <div class="title">
<img src="../../assets/safetyIndex/装饰009991.png" alt="" />企业车辆
</div>
<div class="qyclBody"> <div class="qyclBody">
<div class="today"> <div class="today">
<div class="todayChild" @click="showpicVisible(1)"> <div class="todayChild" @click="showpicVisible(1)">
<div class="iconBox"><img src="../../assets/safetyIndex/今日进园区.png" alt=""></div> <div class="iconBox">
<img src="../../assets/safetyIndex/今日进园区.png" alt="" />
</div>
<div class="iconmsg"> <div class="iconmsg">
<div class="msgText">今日进园区</div> <div class="msgText">今日进园区</div>
<div class="msgNum"><span>{{ intotal }}</span>&nbsp;</div> <div class="msgNum">
<span>{{ intotal }}</span
>&nbsp;
</div>
</div> </div>
</div> </div>
<div class="todayChild" @click="showpicVisible(2)"> <div class="todayChild" @click="showpicVisible(2)">
<div class="iconBox"><img src="../../assets/safetyIndex/今日出园区.png" alt=""></div> <div class="iconBox">
<img src="../../assets/safetyIndex/今日出园区.png" alt="" />
</div>
<div class="iconmsg"> <div class="iconmsg">
<div class="msgText">今日出园区</div> <div class="msgText">今日出园区</div>
<div class="msgNum"><span>{{ outtotal }}</span>&nbsp;</div> <div class="msgNum">
<span>{{ outtotal }}</span
>&nbsp;
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="today"> <div class="today">
<div class="todayChild" @click="showfangkeVisible(1)" style="cursor: pointer;"> <div
<div class="iconBox"><img src="../../assets/safetyIndex/物流.png" alt=""></div> class="todayChild"
@click="showfangkeVisible(1)"
style="cursor: pointer"
>
<div class="iconBox">
<img src="../../assets/safetyIndex/物流.png" alt="" />
</div>
<div class="iconmsg"> <div class="iconmsg">
<div class="msgText">自有</div> <div class="msgText">自有</div>
<div class="msgNum"><span>{{ ziyouTotal }}</span>&nbsp;</div> <div class="msgNum">
<span>{{ ziyouTotal }}</span
>&nbsp;
</div>
</div>
</div> </div>
<div
class="todayChild"
@click="showfangkeVisible(2)"
style="cursor: pointer"
>
<div class="iconBox">
<img src="../../assets/safetyIndex/消防.png" alt="" />
</div> </div>
<div class="todayChild" @click="showfangkeVisible(2)" style="cursor: pointer;">
<div class="iconBox"><img src="../../assets/safetyIndex/消防.png" alt=""></div>
<div class="iconmsg"> <div class="iconmsg">
<div class="msgText">租赁</div> <div class="msgText">租赁</div>
<div class="msgNum"><span>{{ zulintotal }}</span>&nbsp;</div> <div class="msgNum">
<span>{{ zulintotal }}</span
>&nbsp;
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<el-dialog title="企业车辆详情" :visible.sync="fangkeVisible" class="fangkeForm"> </div>
<el-table :cell-style="{ background: 'revert' }" :data="fangkeList" class="table" <el-dialog
style="width: calc(100% - 40px); margin:0 20px;" :row-style="tableRowStyle" title="企业车辆详情"
:header-row-style="tableHeaderColor" :header-cell-style="tableHeaderCellColor"> :visible.sync="fangkeVisible"
class="fangkeForm"
>
<el-table
:cell-style="{ background: 'revert' }"
:data="fangkeList"
class="table"
style="width: calc(100% - 40px); margin: 0 20px"
:row-style="tableRowStyle"
:header-row-style="tableHeaderColor"
:header-cell-style="tableHeaderCellColor"
>
<el-table-column type="index" width="50" label="序号"> <el-table-column type="index" width="50" label="序号">
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip label="车牌号" width="100"> <el-table-column show-overflow-tooltip label="车牌号" width="100">
@ -48,61 +88,118 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="vehicleType" label="车型" width="120"> <el-table-column
show-overflow-tooltip
prop="vehicleType"
label="车型"
width="120"
>
</el-table-column> </el-table-column>
<!-- <el-table-column show-overflow-tooltip prop="useTypeCn" label="使用方式" width="80"> <!-- <el-table-column show-overflow-tooltip prop="useTypeCn" label="使用方式" width="80">
</el-table-column> --> </el-table-column> -->
<el-table-column show-overflow-tooltip prop="companyName" label="归属单位"> <el-table-column
show-overflow-tooltip
prop="companyName"
label="归属单位"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="vinNo" label="车架号" width="180"> <el-table-column
show-overflow-tooltip
prop="vinNo"
label="车架号"
width="180"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="nuclearLoad" label="核载" width="80"> <el-table-column
show-overflow-tooltip
prop="nuclearLoad"
label="核载"
width="80"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="deadWeight" label="自重" width="80"> <el-table-column
show-overflow-tooltip
prop="deadWeight"
label="自重"
width="80"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="plateColor" label="车牌颜色" width="80"> <el-table-column
show-overflow-tooltip
prop="plateColor"
label="车牌颜色"
width="80"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="transportLicense" label="运输许可证" width="120"> <el-table-column
show-overflow-tooltip
prop="transportLicense"
label="运输许可证"
width="120"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="registerTime" label="登记时间"> <el-table-column
show-overflow-tooltip
prop="registerTime"
label="登记时间"
>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="block"> <div class="block">
<el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true" <el-pagination
@size-change="fangkeSizeChange" @current-change="fangkeCurrentChange" :current-page="fangkepageNum" style="float: right; margin: 5px"
:page-sizes="[10]" layout="total, sizes, prev, pager, next, jumper" :total="fangketotal"> class="msg-pagination-container"
:background="true"
@size-change="fangkeSizeChange"
@current-change="fangkeCurrentChange"
:current-page="fangkepageNum"
:page-sizes="[10]"
layout="total, sizes, prev, pager, next, jumper"
:total="fangketotal"
>
</el-pagination> </el-pagination>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog title="园区车辆进出详情" :visible.sync="diaVisible" class="picForm"> <el-dialog
title="园区车辆进出详情"
:visible.sync="diaVisible"
class="picForm"
>
<div class="imgList"> <div class="imgList">
<div class="imgListItem" v-for="item in disList" :key="item.id"> <div class="imgListItem" v-for="item in disList" :key="item.id">
<div class="detailImg"> <div class="detailImg">
<img :src="item.globalPic ? item.globalPic : item.globalUrlPic"> <img :src="item.globalPic ? item.globalPic : item.globalUrlPic" />
</div> </div>
<div class="ListItem"> <div class="ListItem">
<div class="detailText"> <div class="detailText">
车牌号码&nbsp;&nbsp;<span>{{ item.plateNo }}</span> 车牌号码&nbsp;&nbsp;<span>{{ item.plateNo }}</span>
</div> </div>
<div class="detailText"> <div class="detailText">
过车时间&nbsp;&nbsp;<span>{{ item.partitionField }}</span> 时间&nbsp;&nbsp;<span>{{ item.partitionField }}</span>
</div> </div>
<div class="detailText"> <div class="detailText">
经过位置&nbsp;&nbsp;<span>{{ item.doorwayName }}</span> 经过位置&nbsp;&nbsp;<span :title="title">{{
item.doorwayName
}}</span>
</div> </div>
<div class="detailText"> <div class="detailText">
进出方向&nbsp;&nbsp;<span>{{ item.directionCn }}</span> 进出方向&nbsp;&nbsp;<span>{{ item.directionCn }}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="block"> <div class="block">
<el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true" <el-pagination
@size-change="diaSizeChange" @current-change="diaCurrentChange" :current-page="fangkepageNum" style="float: right; margin: 5px"
:page-sizes="[10]" layout="total, sizes, prev, pager, next, jumper" :total="diatotal"> class="msg-pagination-container"
:background="true"
@size-change="diaSizeChange"
@current-change="diaCurrentChange"
:current-page="fangkepageNum"
:page-sizes="[10]"
layout="total, sizes, prev, pager, next, jumper"
:total="diatotal"
>
</el-pagination> </el-pagination>
</div> </div>
</el-dialog> </el-dialog>
@ -110,7 +207,7 @@
</template> </template>
<script> <script>
import { vehicleUserType, vehicleIn, vehicleDetail } from '@/api/safetyIndex' import { vehicleUserType, vehicleIn, vehicleDetail } from "@/api/safetyIndex";
export default { export default {
data() { data() {
return { return {
@ -135,80 +232,102 @@ export default {
outList: [], outList: [],
diaIndex: 1, diaIndex: 1,
disList: [], disList: [],
title: "", //
} };
}, },
created() { created() {
this.getUserType() this.getUserType();
vehicleIn({ direction: 1, pageSize: this.diapageNum, pageNum: this.diapageNum }).then(res => { vehicleIn({
this.inList = res.data direction: 1,
this.intotal = res.total pageSize: this.diapageNum,
}) pageNum: this.diapageNum,
vehicleIn({ direction: 2, pageSize: this.diapageNum, pageNum: this.diapageNum }).then(res => { }).then((res) => {
this.outList = res.data this.inList = res.data;
this.outtotal = res.total this.intotal = res.total;
}) });
vehicleIn({
direction: 2,
pageSize: this.diapageNum,
pageNum: this.diapageNum,
}).then((res) => {
this.outList = res.data;
this.outtotal = res.total;
});
}, },
methods: { methods: {
tableRowStyle({ rowIndex }) { tableRowStyle({ rowIndex }) {
if ((rowIndex + 1) % 2 == 1) { if ((rowIndex + 1) % 2 == 1) {
return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0' } return { background: "rgba(0,0,0,0)", color: "#fff", border: "0" };
} else { } else {
return { 'background': 'rgba(61, 85, 102, 0.16)', 'border': '0', 'color': '#fff' } return {
background: "rgba(61, 85, 102, 0.16)",
border: "0",
color: "#fff",
};
} }
}, },
tableHeaderColor() { tableHeaderColor() {
return { 'background': 'linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)' } return {
background:
"linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)",
};
// return { 'background': 'url("~@/assets/archives/9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' } // return { 'background': 'url("~@/assets/archives/9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
}, },
tableHeaderCellColor() { tableHeaderCellColor() {
return { 'background': 'rgba(0,0,0,0)', 'border': '0', 'color': '#fff' } return { background: "rgba(0,0,0,0)", border: "0", color: "#fff" };
}, },
fangkeSizeChange(val) { fangkeSizeChange(val) {
this.fangkepageNum = 1; this.fangkepageNum = 1;
this.fangkepageSize = val; this.fangkepageSize = val;
this.showfangkeVisible(this.useType) this.showfangkeVisible(this.useType);
}, },
fangkeCurrentChange(val) { fangkeCurrentChange(val) {
this.fangkepageNum = val; this.fangkepageNum = val;
this.showfangkeVisible(this.useType) this.showfangkeVisible(this.useType);
}, },
showpicVisible(index) { showpicVisible(index) {
this.diaIndex = index this.diaIndex = index;
vehicleIn({ direction: this.diaIndex, pageSize: this.diapageSize, pageNum: this.diapageNum }).then(res => { vehicleIn({
this.disList = res.data direction: this.diaIndex,
this.diatotal = res.total pageSize: this.diapageSize,
this.diaVisible = true pageNum: this.diapageNum,
}) }).then((res) => {
this.disList = res.data;
this.diatotal = res.total;
this.diaVisible = true;
});
}, },
diaSizeChange(val) { diaSizeChange(val) {
this.diapageNum = 1; this.diapageNum = 1;
this.diapageSize = val; this.diapageSize = val;
this.showpicVisible(this.diaIndex) this.showpicVisible(this.diaIndex);
}, },
diaCurrentChange(val) { diaCurrentChange(val) {
this.diapageNum = val; this.diapageNum = val;
this.showpicVisible(this.diaIndex) this.showpicVisible(this.diaIndex);
}, },
getUserType() { getUserType() {
vehicleUserType({ useType: 1 }).then(res => { vehicleUserType({ useType: 1 }).then((res) => {
this.ziyouTotal = res.data this.ziyouTotal = res.data;
}) });
vehicleUserType({ useType: 2 }).then(res => { vehicleUserType({ useType: 2 }).then((res) => {
this.zulintotal = res.data this.zulintotal = res.data;
}) });
}, },
showfangkeVisible(val) { showfangkeVisible(val) {
this.useType = val this.useType = val;
vehicleDetail({ pageSize: this.fangkepageSize, pageNum: this.fangkepageNum, useType: this.useType }).then(res => { vehicleDetail({
this.fangkeList = res.data pageSize: this.fangkepageSize,
this.fangketotal = res.total pageNum: this.fangkepageNum,
this.fangkeVisible = true useType: this.useType,
}) }).then((res) => {
this.fangkeList = res.data;
} this.fangketotal = res.total;
this.fangkeVisible = true;
});
}, },
} },
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -216,18 +335,16 @@ export default {
height: 23%; height: 23%;
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat; background: url("~@/assets/safetyIndex/主屏板块1.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.title { .title {
width: 100%; width: 100%;
height: 33px; height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat; background: url("~@/assets/safetyIndex/标题样式.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 16px; font-size: 16px;
color: #D9E7FF; color: #d9e7ff;
letter-spacing: 1px; letter-spacing: 1px;
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
@ -271,7 +388,7 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: url('~@/assets/safetyIndex/编组 16.png') no-repeat; background: url("~@/assets/safetyIndex/编组 16.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin-left: 20px; margin-left: 20px;
@ -286,12 +403,11 @@ export default {
width: 108px; width: 108px;
height: 58px; height: 58px;
.msgText { .msgText {
height: 50%; height: 50%;
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
color: #D0DEEE; color: #d0deee;
letter-spacing: 1px; letter-spacing: 1px;
vertical-align: middle; vertical-align: middle;
font-weight: 400; font-weight: 400;
@ -301,7 +417,7 @@ export default {
.msgNum { .msgNum {
height: 50%; height: 50%;
width: 100%; width: 100%;
background: url('~@/assets/safetyIndex/矩形21.png') no-repeat; background: url("~@/assets/safetyIndex/矩形21.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 12px; font-size: 12px;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
@ -315,7 +431,7 @@ export default {
span { span {
font-size: 20px; font-size: 20px;
color: #FFFFFF; color: #ffffff;
letter-spacing: 2.08px; letter-spacing: 2.08px;
line-height: 21px; line-height: 21px;
font-weight: 700; font-weight: 700;
@ -331,16 +447,12 @@ export default {
border-bottom: 1px solid rgba(114, 155, 137, 0.48); border-bottom: 1px solid rgba(114, 155, 137, 0.48);
} }
} }
} }
.fangkeForm { .fangkeForm {
/deep/ .el-dialog { /deep/ .el-dialog {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
background: url('~@/assets/head/编组 3021112.png') no-repeat; background: url("~@/assets/head/编组 3021112.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 1241px; width: 1241px;
height: 700px; height: 700px;
@ -348,7 +460,7 @@ export default {
.el-dialog__title { .el-dialog__title {
font-size: 16px; font-size: 16px;
color: #EBFFF4; color: #ebfff4;
letter-spacing: 2px; letter-spacing: 2px;
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77); text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
font-weight: 400; font-weight: 400;
@ -361,7 +473,6 @@ export default {
.scopeQuantity { .scopeQuantity {
letter-spacing: 2px; letter-spacing: 2px;
} }
} }
} }
} }
@ -369,7 +480,7 @@ export default {
.picForm { .picForm {
/deep/ .el-dialog { /deep/ .el-dialog {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
background: url('~@/assets/safetyIndex/弹窗009.png') no-repeat; background: url("~@/assets/safetyIndex/弹窗009.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 1241px; width: 1241px;
height: 850px; height: 850px;
@ -378,7 +489,7 @@ export default {
.el-dialog__title { .el-dialog__title {
font-size: 16px; font-size: 16px;
color: #EBFFF4; color: #ebfff4;
letter-spacing: 2px; letter-spacing: 2px;
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77); text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
font-weight: 400; font-weight: 400;
@ -398,7 +509,7 @@ export default {
.imgListItem { .imgListItem {
height: calc(50% - 8px); height: calc(50% - 8px);
width: calc(20% - 10px); width: calc(20% - 10px);
background: url('~@/assets/safetyIndex/背景001.png') no-repeat; background: url("~@/assets/safetyIndex/背景001.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 10px; padding: 10px;
position: relative; position: relative;
@ -408,17 +519,15 @@ export default {
width: 96%; width: 96%;
height: calc(100% - 150px); height: calc(100% - 150px);
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
;
} }
} }
.ListItem { .ListItem {
margin-top: 10px; margin-top: 10px;
background: url('~@/assets/safetyIndex/背景001.png') no-repeat; background: url("~@/assets/safetyIndex/背景001.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -432,6 +541,9 @@ export default {
letter-spacing: 1.52px; letter-spacing: 1.52px;
span { span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
} }
@ -442,7 +554,6 @@ export default {
.scopeQuantity { .scopeQuantity {
letter-spacing: 2px; letter-spacing: 2px;
} }
} }
} }
} }
@ -462,7 +573,7 @@ export default {
} }
.chepai { .chepai {
background: url('~@/assets/archives/黄牌.png') no-repeat; background: url("~@/assets/archives/黄牌.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 88px; width: 88px;
height: 26px; height: 26px;
@ -479,12 +590,10 @@ export default {
/deep/.el-input__inner { /deep/.el-input__inner {
// background: url('~@/assets/companyFile/2121.png') no-repeat; // background: url('~@/assets/companyFile/2121.png') no-repeat;
background: url('~@/assets/companyFile/矩形备份 18.png') no-repeat; background: url("~@/assets/companyFile/矩形备份 18.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
border: 1px solid rgba(40, 132, 126, 1); border: 1px solid rgba(40, 132, 126, 1);
color: rgba(234, 246, 255, 0.7); color: rgba(234, 246, 255, 0.7);
;
.el-range-separator { .el-range-separator {
color: #ccc; color: #ccc;
} }

@ -344,7 +344,7 @@ export default {
font-weight: 500; font-weight: 500;
.blue { .blue {
font-size: 20px; font-size: 36px;
color: #66d9ff; color: #66d9ff;
letter-spacing: 1.25px; letter-spacing: 1.25px;
text-align: right; text-align: right;
@ -352,7 +352,7 @@ export default {
} }
.yellow { .yellow {
font-size: 20px; font-size: 36px;
color: #fef699; color: #fef699;
letter-spacing: 1.25px; letter-spacing: 1.25px;
text-align: right; text-align: right;
@ -361,7 +361,7 @@ export default {
.red { .red {
font-family: AlimamaShuHeiTi; font-family: AlimamaShuHeiTi;
font-size: 20px; font-size: 36px;
color: #fa3737; color: #fa3737;
letter-spacing: 1.25px; letter-spacing: 1.25px;
text-align: right; text-align: right;

@ -1,22 +1,30 @@
<template> <template>
<div class="qyyg"> <div class="qyyg">
<div class="title"><img src="../../assets/safetyIndex/装饰009991.png" alt="">企业员工</div> <div class="title">
<img src="../../assets/safetyIndex/装饰009991.png" alt="" />企业员工
</div>
<div class="zongshu" @click="showVisible()"> <div class="zongshu" @click="showVisible()">
<div class="text4">员工总数</div> <div class="text4">员工总数</div>
<div class="numberTotal"><span>{{ listTotal.number }}</span></div> <div class="numberTotal">
<span>{{ listTotal.number }}</span
>
</div> </div>
<div class="ygtb" id="ygtb">
</div> </div>
<div class="ygtb" id="ygtb"></div>
<div class="bottomBtns"> <div class="bottomBtns">
<div class="fangke" @click="showfangkeVisible()"> <div class="fangke" @click="showfangkeVisible()">
<div class="iconBox"><img src="../../assets/safetyIndex/访客icon.png" alt=""></div> <div class="iconBox">
<img src="../../assets/safetyIndex/访客icon.png" alt="" />
</div>
<div class="iconNum"> <div class="iconNum">
<div class="iconName">访客</div> <div class="iconName">访客</div>
<div class="number1">{{ fangketotal }}</div> <div class="number1">{{ fangketotal }}</div>
</div> </div>
</div> </div>
<div class="fangke" @click="showliudongVisible()"> <div class="fangke" @click="showliudongVisible()">
<div class="iconBox"><img src="../../assets/safetyIndex/流动人员icon.png" alt=""></div> <div class="iconBox">
<img src="../../assets/safetyIndex/流动人员icon.png" alt="" />
</div>
<div class="iconNum"> <div class="iconNum">
<div class="iconName">流动人员</div> <div class="iconName">流动人员</div>
<div class="number1">{{ liudongtotal }}</div> <div class="number1">{{ liudongtotal }}</div>
@ -24,102 +32,256 @@
</div> </div>
</div> </div>
<el-dialog title="详情" :visible.sync="diaVisible" class="picForm"> <el-dialog title="详情" :visible.sync="diaVisible" class="picForm">
<el-table :cell-style="{ background: 'revert' }" :data="staffDetailList" class="table" <el-table
style="width: calc(100% - 40px); margin:0 20px;" :row-style="tableRowStyle" :cell-style="{ background: 'revert' }"
:header-row-style="tableHeaderColor" :header-cell-style="tableHeaderCellColor"> :data="staffDetailList"
class="table"
style="width: calc(100% - 40px); margin: 0 20px"
:row-style="tableRowStyle"
:header-row-style="tableHeaderColor"
:header-cell-style="tableHeaderCellColor"
>
<el-table-column show-overflow-tooltip label="照片" width="50"> <el-table-column show-overflow-tooltip label="照片" width="50">
<template slot-scope="scope"> <template slot-scope="scope">
<img
:src="scope.row.picUrl"
<img :src="scope.row.picUrl" class="staffPic" alt="" v-if="scope.row.picUrl"> class="staffPic"
<img src="../../assets/archives/touxiang.png" class="staffPic" alt="" v-else> alt=""
v-if="scope.row.picUrl"
/>
<img
src="../../assets/archives/touxiang.png"
class="staffPic"
alt=""
v-else
/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="staffName" label="姓名" width="90"> <el-table-column
show-overflow-tooltip
prop="staffName"
label="姓名"
width="90"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="identityId" label="身份证号" width="160"> <el-table-column
show-overflow-tooltip
prop="identityId"
label="身份证号"
width="160"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="homeAddress" label="家庭住址"> <el-table-column
show-overflow-tooltip
prop="homeAddress"
label="家庭住址"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="companyName" label="所属企业"> <el-table-column
show-overflow-tooltip
prop="companyName"
label="所属企业"
>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="block"> <div class="block">
<el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true" <el-pagination
@size-change="SizeChange" @current-change="CurrentChange" :current-page="detailpageNum" style="float: right; margin: 5px"
:page-sizes="[8]" layout="total, sizes, prev, pager, next, jumper" :total="detailtotal"> class="msg-pagination-container"
:background="true"
@size-change="SizeChange"
@current-change="CurrentChange"
:current-page="detailpageNum"
:page-sizes="[8]"
layout="total, sizes, prev, pager, next, jumper"
:total="detailtotal"
>
</el-pagination> </el-pagination>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog title="访客详情" :visible.sync="fangkeVisible" class="fangkeForm"> <el-dialog
<el-table :cell-style="{ background: 'revert' }" :data="fangkeList" class="table" title="访客详情"
style="width: calc(100% - 40px); margin:0 20px;" :row-style="tableRowStyle" :visible.sync="fangkeVisible"
:header-row-style="tableHeaderColor" :header-cell-style="tableHeaderCellColor"> class="fangkeForm"
>
<el-table
:cell-style="{ background: 'revert' }"
:data="fangkeList"
class="table"
style="width: calc(100% - 40px); margin: 0 20px"
:row-style="tableRowStyle"
:header-row-style="tableHeaderColor"
:header-cell-style="tableHeaderCellColor"
>
<el-table-column show-overflow-tooltip label="照片" width="50"> <el-table-column show-overflow-tooltip label="照片" width="50">
<template slot-scope="scope"> <template slot-scope="scope">
<img :src="scope.row.picUrl" class="staffPic" alt="" v-if="scope.row.picUrl"> <img
<img src="../../assets/archives/touxiang.png" class="staffPic" alt="" v-else> :src="scope.row.picUrl"
class="staffPic"
alt=""
v-if="scope.row.picUrl"
/>
<img
src="../../assets/archives/touxiang.png"
class="staffPic"
alt=""
v-else
/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="visitName" label="访客姓名" width="90"> <el-table-column
show-overflow-tooltip
prop="visitName"
label="访客姓名"
width="90"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="identityId" label="身份证号" width="180"> <el-table-column
show-overflow-tooltip
prop="identityId"
label="身份证号"
width="180"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="visitContactInfo" label="联系方式"> <el-table-column
show-overflow-tooltip
prop="visitContactInfo"
label="联系方式"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="visitCompany" label="访客所属企业"> <el-table-column
show-overflow-tooltip
prop="visitCompany"
label="访客所属企业"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="visitTime" label="访问时间"> <el-table-column
show-overflow-tooltip
prop="visitTime"
label="访问时间"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="contactPerson" label="对接人" width="90"> <el-table-column
show-overflow-tooltip
prop="contactPerson"
label="对接人"
width="90"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="contactInfo" label="对接人联系方式"> <el-table-column
show-overflow-tooltip
prop="contactInfo"
label="对接人联系方式"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="companyName" label="访问企业"> <el-table-column
show-overflow-tooltip
prop="companyName"
label="访问企业"
>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="block"> <div class="block">
<el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true" <el-pagination
@size-change="fangkeSizeChange" @current-change="fangkeCurrentChange" :current-page="fangkepageNum" style="float: right; margin: 5px"
:page-sizes="[8]" layout="total, sizes, prev, pager, next, jumper" :total="fangketotal"> class="msg-pagination-container"
:background="true"
@size-change="fangkeSizeChange"
@current-change="fangkeCurrentChange"
:current-page="fangkepageNum"
:page-sizes="[8]"
layout="total, sizes, prev, pager, next, jumper"
:total="fangketotal"
>
</el-pagination> </el-pagination>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog title="流动人员详情" :visible.sync="liudongVisible" class="picForm"> <el-dialog
<el-table :cell-style="{ background: 'revert' }" :data="liudongList" class="table" title="流动人员详情"
style="width: calc(100% - 40px); margin:0 20px;" :row-style="tableRowStyle" :visible.sync="liudongVisible"
:header-row-style="tableHeaderColor" :header-cell-style="tableHeaderCellColor"> class="picForm"
>
<el-table
:cell-style="{ background: 'revert' }"
:data="liudongList"
class="table"
style="width: calc(100% - 40px); margin: 0 20px"
:row-style="tableRowStyle"
:header-row-style="tableHeaderColor"
:header-cell-style="tableHeaderCellColor"
>
<el-table-column show-overflow-tooltip label="照片" width="50"> <el-table-column show-overflow-tooltip label="照片" width="50">
<template slot-scope="scope"> <template slot-scope="scope">
<img :src="scope.row.picUrl" class="staffPic" alt="" v-if="scope.row.picUrl"> <img
<img src="../../assets/archives/touxiang.png" class="staffPic" alt="" v-else> :src="scope.row.picUrl"
class="staffPic"
alt=""
v-if="scope.row.picUrl"
/>
<img
src="../../assets/archives/touxiang.png"
class="staffPic"
alt=""
v-else
/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="flowName" label="姓名" width="90"> <el-table-column
show-overflow-tooltip
prop="flowName"
label="姓名"
width="90"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="identityId" label="身份证号" width="160"> <el-table-column
show-overflow-tooltip
prop="identityId"
label="身份证号"
width="160"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="contactInfo" label="联系方式"> <el-table-column
show-overflow-tooltip
prop="contactInfo"
label="联系方式"
>
</el-table-column> </el-table-column>
<el-table-column show-overflow-tooltip prop="companyName" label="所属企业"> <el-table-column
show-overflow-tooltip
prop="companyName"
label="所属企业"
>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="block"> <div class="block">
<el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true" <el-pagination
@size-change="liudongSizeChange" @current-change="liudongCurrentChange" :current-page="liudongpageNum" style="float: right; margin: 5px"
:page-sizes="[8]" layout="total, sizes, prev, pager, next, jumper" :total="liudongtotal"> class="msg-pagination-container"
:background="true"
@size-change="liudongSizeChange"
@current-change="liudongCurrentChange"
:current-page="liudongpageNum"
:page-sizes="[8]"
layout="total, sizes, prev, pager, next, jumper"
:total="liudongtotal"
>
</el-pagination> </el-pagination>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from "echarts";
import "echarts-gl"; import "echarts-gl";
import { staffStatistics, staffDetail, visitDetail, flowDetail, flowStatistics, visitStatistics } from '@/api/safetyIndex' import {
staffStatistics,
staffDetail,
visitDetail,
flowDetail,
flowStatistics,
visitStatistics,
} from "@/api/safetyIndex";
export default { export default {
data() { data() {
return { return {
@ -140,54 +302,56 @@ export default {
liudongpageSize: 8, liudongpageSize: 8,
liudongpageNum: 1, liudongpageNum: 1,
liudongtotal: 0, liudongtotal: 0,
} };
}, },
created() { created() {
this.getstaffStatistics() this.getstaffStatistics();
flowStatistics().then(res => { flowStatistics().then((res) => {
this.liudongtotal = res.data this.liudongtotal = res.data;
}) });
visitStatistics().then(res => { visitStatistics().then((res) => {
this.fangketotal = res.data this.fangketotal = res.data;
}) });
}, },
methods: { methods: {
getstaffStatistics() { getstaffStatistics() {
staffStatistics().then(res => { staffStatistics().then((res) => {
this.staffStatisticsList = res.data.filter(item => { this.staffStatisticsList = res.data.filter((item) => {
return item.type != '全部' return item.type != "全部";
}) });
this.listTotal = res.data.filter(item => { this.listTotal = res.data.filter((item) => {
return item.type == '全部' return item.type == "全部";
})[0] })[0];
this.initygtb() this.initygtb();
}) });
}, },
initygtb() { initygtb() {
let myChart = echarts.init(document.getElementById("ygtb")); let myChart = echarts.init(document.getElementById("ygtb"));
const colors = ['#66C3FF', '#FEF699', '#19F7C3', '#ADF1FF'] const colors = ["#66C3FF", "#FEF699", "#19F7C3", "#ADF1FF"];
let data = [] let data = [];
this.staffStatisticsList.forEach((item, index) => { this.staffStatisticsList.forEach((item, index) => {
data.push({ data.push({
value: item.number, name: item.type, itemStyle: { color: colors[index], } value: item.number,
}) name: item.type,
}) itemStyle: { color: colors[index] },
});
});
let option = { let option = {
tooltip: { tooltip: {
trigger: 'item' trigger: "item",
}, },
legend: { legend: {
// type: 'scroll', // type: 'scroll',
orient: 'vertical', orient: "vertical",
top: '5%', top: "5%",
right: '5%', right: "5%",
padding: [5, 10], padding: [5, 10],
itemGap: 10, itemGap: 10,
itemWidth: 6, itemWidth: 6,
itemHeight: 6, itemHeight: 6,
width: 100, width: 100,
backgroundColor: 'rgba(108,128,151,0.2)', backgroundColor: "rgba(108,128,151,0.2)",
lineHeight: 24, lineHeight: 24,
textStyle: { textStyle: {
rich: { rich: {
@ -212,112 +376,130 @@ export default {
var percent = 0; var percent = 0;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
if (data[i].name == name) { if (data[i].name == name) {
percent = data[i].value percent = data[i].value;
} }
} }
return "{a|" + name + "}" + "{b|" + percent + "}"; return "{a|" + name + "}" + "{b|" + percent + "}";
}, },
}, },
graphic: [{ graphic: [
type: 'image', // {
type: "image", //
style: { style: {
image: require('../../assets/safetyIndex/89771.png'), // require image: require("../../assets/safetyIndex/89771.png"), // require
width: 90, // width: 90, //
height: 90 height: 90,
}, },
// //
top: "22.8%", top: "22.8%",
left: "10%", left: "10%",
},], },
backgroundColor: 'rgba(255,255,255,0)', ],
backgroundColor: "rgba(255,255,255,0)",
series: [ series: [
{ {
type: 'pie', type: "pie",
radius: ['55%', '70%'], radius: ["55%", "70%"],
top: "middle", top: "middle",
left: "left", left: "left",
width: '45%', width: "45%",
height: 190, height: 190,
center: ['45%', '50%'], center: ["45%", "50%"],
itemStyle: { itemStyle: {
borderRadius: 0, borderRadius: 0,
borderColor: 'rgba(255,255,255,0)', borderColor: "rgba(255,255,255,0)",
borderWidth: 5 borderWidth: 5,
}, },
label: { label: {
show: false, show: false,
position: 'center' position: "center",
}, },
data data,
} },
] ],
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
tableRowStyle({ rowIndex }) { tableRowStyle({ rowIndex }) {
if ((rowIndex + 1) % 2 == 1) { if ((rowIndex + 1) % 2 == 1) {
return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0' } return { background: "rgba(0,0,0,0)", color: "#fff", border: "0" };
} else { } else {
return { 'background': 'rgba(61, 85, 102, 0.16)', 'border': '0', 'color': '#fff' } return {
background: "rgba(61, 85, 102, 0.16)",
border: "0",
color: "#fff",
};
} }
}, },
tableHeaderColor() { tableHeaderColor() {
return { 'background': 'linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)' } return {
background:
"linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)",
};
// return { 'background': 'url("~@/assets/archives/9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' } // return { 'background': 'url("~@/assets/archives/9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
}, },
tableHeaderCellColor() { tableHeaderCellColor() {
return { 'background': 'rgba(0,0,0,0)', 'border': '0', 'color': '#fff' } return { background: "rgba(0,0,0,0)", border: "0", color: "#fff" };
}, },
SizeChange(val) { SizeChange(val) {
this.detailpageNum = 1; this.detailpageNum = 1;
this.DetailpageSize = val; this.DetailpageSize = val;
this.showVisible() this.showVisible();
}, },
CurrentChange(val) { CurrentChange(val) {
this.detailpageNum = val; this.detailpageNum = val;
this.showVisible() this.showVisible();
}, },
fangkeSizeChange(val) { fangkeSizeChange(val) {
this.fangkepageNum = 1; this.fangkepageNum = 1;
this.fangkepageSize = val; this.fangkepageSize = val;
this.showfangkeVisible() this.showfangkeVisible();
}, },
fangkeCurrentChange(val) { fangkeCurrentChange(val) {
this.fangkepageNum = val; this.fangkepageNum = val;
this.showfangkeVisible() this.showfangkeVisible();
}, },
liudongSizeChange(val) { liudongSizeChange(val) {
this.liudongpageNum = 1; this.liudongpageNum = 1;
this.liudongpageSize = val; this.liudongpageSize = val;
this.showliudongVisible() this.showliudongVisible();
}, },
liudongCurrentChange(val) { liudongCurrentChange(val) {
this.liudongpageNum = val; this.liudongpageNum = val;
this.showliudongVisible() this.showliudongVisible();
}, },
showVisible() { showVisible() {
staffDetail({ pageSize: this.DetailpageSize, pageNum: this.detailpageNum }).then(res => { staffDetail({
this.staffDetailList = res.data pageSize: this.DetailpageSize,
this.detailtotal = res.total pageNum: this.detailpageNum,
this.diaVisible = true }).then((res) => {
}) this.staffDetailList = res.data;
this.detailtotal = res.total;
this.diaVisible = true;
});
}, },
showliudongVisible() { showliudongVisible() {
flowDetail({ pageSize: this.liudongpageSize, pageNum: this.liudongpageNum }).then(res => { flowDetail({
this.liudongList = res.data pageSize: this.liudongpageSize,
this.liudongtotal = res.total pageNum: this.liudongpageNum,
this.liudongVisible = true }).then((res) => {
}) this.liudongList = res.data;
this.liudongtotal = res.total;
this.liudongVisible = true;
});
}, },
showfangkeVisible() { showfangkeVisible() {
visitDetail({ pageSize: this.fangkepageSize, pageNum: this.fangkepageNum }).then(res => { visitDetail({
this.fangkeList = res.data pageSize: this.fangkepageSize,
this.fangketotal = res.total pageNum: this.fangkepageNum,
this.fangkeVisible = true }).then((res) => {
}) this.fangkeList = res.data;
} this.fangketotal = res.total;
this.fangkeVisible = true;
});
}, },
} },
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -325,16 +507,16 @@ export default {
height: 35.84%; height: 35.84%;
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat; background: url("~@/assets/safetyIndex/主屏板块1.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.title { .title {
width: 100%; width: 100%;
height: 33px; height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat; background: url("~@/assets/safetyIndex/标题样式.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 16px; font-size: 16px;
color: #D9E7FF; color: #d9e7ff;
letter-spacing: 1px; letter-spacing: 1px;
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
@ -350,9 +532,9 @@ export default {
.zongshu { .zongshu {
width: 400px; width: 400px;
height: 26px; height: 30px;
margin: 5px auto; margin: 5px auto;
background: url('~@/assets/safetyIndex/7691.png') no-repeat; background: url("~@/assets/safetyIndex/7691.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
@ -361,7 +543,7 @@ export default {
.text4 { .text4 {
font-size: 16px; font-size: 16px;
color: #D0DEEE; color: #d0deee;
letter-spacing: 0; letter-spacing: 0;
text-align: center; text-align: center;
line-height: 16px; line-height: 16px;
@ -370,13 +552,14 @@ export default {
.numberTotal { .numberTotal {
font-size: 12px; font-size: 12px;
color: #EBF9FF; line-height: 16px;
color: #ebf9ff;
letter-spacing: 1.5px; letter-spacing: 1.5px;
font-weight: 400; font-weight: 400;
span { span {
font-size: 20px; font-size: 36px;
color: #EBFFF8; color: #ebfff8;
letter-spacing: 2.5px; letter-spacing: 2.5px;
line-height: 37px; line-height: 37px;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64); text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
@ -388,7 +571,6 @@ export default {
.ygtb { .ygtb {
height: 160px; height: 160px;
width: 100%; width: 100%;
} }
.bottomBtns { .bottomBtns {
@ -398,7 +580,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background: url('~@/assets/safetyIndex/99108881.png') no-repeat; background: url("~@/assets/safetyIndex/99108881.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 4px; padding: 4px;
box-sizing: border-box; box-sizing: border-box;
@ -412,7 +594,7 @@ export default {
cursor: pointer; cursor: pointer;
.iconBox { .iconBox {
background: url('~@/assets/safetyIndex/Target 03_00000.png') no-repeat; background: url("~@/assets/safetyIndex/Target 03_00000.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
height: 33px; height: 33px;
width: 33px; width: 33px;
@ -442,7 +624,7 @@ export default {
width: 100%; width: 100%;
height: 50%; height: 50%;
font-size: 15px; font-size: 15px;
color: #FFFFFF; color: #ffffff;
letter-spacing: 1px; letter-spacing: 1px;
line-height: 22px; line-height: 22px;
vertical-align: middle; vertical-align: middle;
@ -450,13 +632,10 @@ export default {
font-weight: 700; font-weight: 700;
} }
} }
} }
.fangke:last-child { .fangke:last-child {
border-left: 1px solid #6C8097; border-left: 1px solid #6c8097;
} }
} }
} }
@ -464,7 +643,7 @@ export default {
.picForm { .picForm {
/deep/ .el-dialog { /deep/ .el-dialog {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
background: url('~@/assets/head/编组 3021112.png') no-repeat; background: url("~@/assets/head/编组 3021112.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 841px; width: 841px;
height: 640px; height: 640px;
@ -472,7 +651,7 @@ export default {
.el-dialog__title { .el-dialog__title {
font-size: 16px; font-size: 16px;
color: #EBFFF4; color: #ebfff4;
letter-spacing: 2px; letter-spacing: 2px;
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77); text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
@ -486,16 +665,14 @@ export default {
.scopeQuantity { .scopeQuantity {
letter-spacing: 2px; letter-spacing: 2px;
} }
} }
} }
} }
.fangkeForm { .fangkeForm {
/deep/ .el-dialog { /deep/ .el-dialog {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
background: url('~@/assets/head/编组 3021112.png') no-repeat; background: url("~@/assets/head/编组 3021112.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 1241px; width: 1241px;
height: 640px; height: 640px;
@ -503,7 +680,7 @@ export default {
.el-dialog__title { .el-dialog__title {
font-size: 16px; font-size: 16px;
color: #EBFFF4; color: #ebfff4;
letter-spacing: 2px; letter-spacing: 2px;
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77); text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
@ -517,7 +694,6 @@ export default {
.scopeQuantity { .scopeQuantity {
letter-spacing: 2px; letter-spacing: 2px;
} }
} }
} }
} }
@ -544,12 +720,10 @@ export default {
/deep/.el-input__inner { /deep/.el-input__inner {
// background: url('~@/assets/companyFile/2121.png') no-repeat; // background: url('~@/assets/companyFile/2121.png') no-repeat;
background: url('~@/assets/companyFile/矩形备份 18.png') no-repeat; background: url("~@/assets/companyFile/矩形备份 18.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
border: 1px solid rgba(40, 132, 126, 1); border: 1px solid rgba(40, 132, 126, 1);
color: rgba(234, 246, 255, 0.7); color: rgba(234, 246, 255, 0.7);
;
.el-range-separator { .el-range-separator {
color: #ccc; color: #ccc;
} }

Loading…
Cancel
Save