|
|
|
|
@ -1,22 +1,30 @@
|
|
|
|
|
<template>
|
|
|
|
|
<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="text4">员工总数</div>
|
|
|
|
|
<div class="numberTotal"><span>{{ listTotal.number }}</span>人</div>
|
|
|
|
|
<div class="numberTotal">
|
|
|
|
|
<span>{{ listTotal.number }}</span
|
|
|
|
|
>人
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ygtb" id="ygtb">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ygtb" id="ygtb"></div>
|
|
|
|
|
<div class="bottomBtns">
|
|
|
|
|
<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="iconName">访客</div>
|
|
|
|
|
<div class="number1">{{ fangketotal }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<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="iconName">流动人员</div>
|
|
|
|
|
<div class="number1">{{ liudongtotal }}</div>
|
|
|
|
|
@ -24,102 +32,256 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-dialog title="详情" :visible.sync="diaVisible" class="picForm">
|
|
|
|
|
<el-table :cell-style="{ background: 'revert' }" :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
|
|
|
|
|
:cell-style="{ background: 'revert' }"
|
|
|
|
|
: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">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<img :src="scope.row.picUrl" class="staffPic" alt="" v-if="scope.row.picUrl">
|
|
|
|
|
<img src="../../assets/archives/touxiang.png" class="staffPic" alt="" v-else>
|
|
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
:src="scope.row.picUrl"
|
|
|
|
|
class="staffPic"
|
|
|
|
|
alt=""
|
|
|
|
|
v-if="scope.row.picUrl"
|
|
|
|
|
/>
|
|
|
|
|
<img
|
|
|
|
|
src="../../assets/archives/touxiang.png"
|
|
|
|
|
class="staffPic"
|
|
|
|
|
alt=""
|
|
|
|
|
v-else
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</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 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 show-overflow-tooltip prop="homeAddress" label="家庭住址">
|
|
|
|
|
<el-table-column
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
prop="homeAddress"
|
|
|
|
|
label="家庭住址"
|
|
|
|
|
>
|
|
|
|
|
</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>
|
|
|
|
|
<div class="block">
|
|
|
|
|
<el-pagination style="float:right;margin:5px;" 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
|
|
|
|
|
style="float: right; margin: 5px"
|
|
|
|
|
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>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<el-dialog title="访客详情" :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-dialog
|
|
|
|
|
title="访客详情"
|
|
|
|
|
: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 show-overflow-tooltip label="照片" width="50">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<img :src="scope.row.picUrl" class="staffPic" alt="" v-if="scope.row.picUrl">
|
|
|
|
|
<img src="../../assets/archives/touxiang.png" class="staffPic" alt="" v-else>
|
|
|
|
|
<img
|
|
|
|
|
:src="scope.row.picUrl"
|
|
|
|
|
class="staffPic"
|
|
|
|
|
alt=""
|
|
|
|
|
v-if="scope.row.picUrl"
|
|
|
|
|
/>
|
|
|
|
|
<img
|
|
|
|
|
src="../../assets/archives/touxiang.png"
|
|
|
|
|
class="staffPic"
|
|
|
|
|
alt=""
|
|
|
|
|
v-else
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</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 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 show-overflow-tooltip prop="visitContactInfo" label="联系方式">
|
|
|
|
|
<el-table-column
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
prop="visitContactInfo"
|
|
|
|
|
label="联系方式"
|
|
|
|
|
>
|
|
|
|
|
</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 show-overflow-tooltip prop="visitTime" label="访问时间">
|
|
|
|
|
<el-table-column
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
prop="visitTime"
|
|
|
|
|
label="访问时间"
|
|
|
|
|
>
|
|
|
|
|
</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 show-overflow-tooltip prop="contactInfo" label="对接人联系方式">
|
|
|
|
|
<el-table-column
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
prop="contactInfo"
|
|
|
|
|
label="对接人联系方式"
|
|
|
|
|
>
|
|
|
|
|
</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>
|
|
|
|
|
<div class="block">
|
|
|
|
|
<el-pagination style="float:right;margin:5px;" 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
|
|
|
|
|
style="float: right; margin: 5px"
|
|
|
|
|
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>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<el-dialog title="流动人员详情" :visible.sync="liudongVisible" 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-dialog
|
|
|
|
|
title="流动人员详情"
|
|
|
|
|
:visible.sync="liudongVisible"
|
|
|
|
|
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">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<img :src="scope.row.picUrl" class="staffPic" alt="" v-if="scope.row.picUrl">
|
|
|
|
|
<img src="../../assets/archives/touxiang.png" class="staffPic" alt="" v-else>
|
|
|
|
|
<img
|
|
|
|
|
:src="scope.row.picUrl"
|
|
|
|
|
class="staffPic"
|
|
|
|
|
alt=""
|
|
|
|
|
v-if="scope.row.picUrl"
|
|
|
|
|
/>
|
|
|
|
|
<img
|
|
|
|
|
src="../../assets/archives/touxiang.png"
|
|
|
|
|
class="staffPic"
|
|
|
|
|
alt=""
|
|
|
|
|
v-else
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</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 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 show-overflow-tooltip prop="contactInfo" label="联系方式">
|
|
|
|
|
<el-table-column
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
prop="contactInfo"
|
|
|
|
|
label="联系方式"
|
|
|
|
|
>
|
|
|
|
|
</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>
|
|
|
|
|
<div class="block">
|
|
|
|
|
<el-pagination style="float:right;margin:5px;" 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
|
|
|
|
|
style="float: right; margin: 5px"
|
|
|
|
|
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>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
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 {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
@ -140,54 +302,56 @@ export default {
|
|
|
|
|
liudongpageSize: 8,
|
|
|
|
|
liudongpageNum: 1,
|
|
|
|
|
liudongtotal: 0,
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getstaffStatistics()
|
|
|
|
|
flowStatistics().then(res => {
|
|
|
|
|
this.liudongtotal = res.data
|
|
|
|
|
})
|
|
|
|
|
visitStatistics().then(res => {
|
|
|
|
|
this.fangketotal = res.data
|
|
|
|
|
})
|
|
|
|
|
this.getstaffStatistics();
|
|
|
|
|
flowStatistics().then((res) => {
|
|
|
|
|
this.liudongtotal = res.data;
|
|
|
|
|
});
|
|
|
|
|
visitStatistics().then((res) => {
|
|
|
|
|
this.fangketotal = res.data;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getstaffStatistics() {
|
|
|
|
|
staffStatistics().then(res => {
|
|
|
|
|
this.staffStatisticsList = res.data.filter(item => {
|
|
|
|
|
return item.type != '全部'
|
|
|
|
|
})
|
|
|
|
|
this.listTotal = res.data.filter(item => {
|
|
|
|
|
return item.type == '全部'
|
|
|
|
|
})[0]
|
|
|
|
|
this.initygtb()
|
|
|
|
|
})
|
|
|
|
|
staffStatistics().then((res) => {
|
|
|
|
|
this.staffStatisticsList = res.data.filter((item) => {
|
|
|
|
|
return item.type != "全部";
|
|
|
|
|
});
|
|
|
|
|
this.listTotal = res.data.filter((item) => {
|
|
|
|
|
return item.type == "全部";
|
|
|
|
|
})[0];
|
|
|
|
|
this.initygtb();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
initygtb() {
|
|
|
|
|
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) => {
|
|
|
|
|
data.push({
|
|
|
|
|
value: item.number, name: item.type, itemStyle: { color: colors[index], }
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
value: item.number,
|
|
|
|
|
name: item.type,
|
|
|
|
|
itemStyle: { color: colors[index] },
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
let option = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item'
|
|
|
|
|
trigger: "item",
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
// type: 'scroll',
|
|
|
|
|
orient: 'vertical',
|
|
|
|
|
top: '5%',
|
|
|
|
|
right: '5%',
|
|
|
|
|
orient: "vertical",
|
|
|
|
|
top: "5%",
|
|
|
|
|
right: "5%",
|
|
|
|
|
padding: [5, 10],
|
|
|
|
|
itemGap: 10,
|
|
|
|
|
itemWidth: 6,
|
|
|
|
|
itemHeight: 6,
|
|
|
|
|
width: 100,
|
|
|
|
|
backgroundColor: 'rgba(108,128,151,0.2)',
|
|
|
|
|
backgroundColor: "rgba(108,128,151,0.2)",
|
|
|
|
|
lineHeight: 24,
|
|
|
|
|
textStyle: {
|
|
|
|
|
rich: {
|
|
|
|
|
@ -212,112 +376,130 @@ export default {
|
|
|
|
|
var percent = 0;
|
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
|
|
if (data[i].name == name) {
|
|
|
|
|
percent = data[i].value
|
|
|
|
|
percent = data[i].value;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return "{a|" + name + "}" + "{b|" + percent + "}";
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
graphic: [{
|
|
|
|
|
type: 'image', // 插入圆环中间的图片
|
|
|
|
|
graphic: [
|
|
|
|
|
{
|
|
|
|
|
type: "image", // 插入圆环中间的图片
|
|
|
|
|
style: {
|
|
|
|
|
image: require('../../assets/safetyIndex/89771.png'), // 本地图片要用require引入
|
|
|
|
|
image: require("../../assets/safetyIndex/89771.png"), // 本地图片要用require引入
|
|
|
|
|
width: 90, // 设置图片大小
|
|
|
|
|
height: 90
|
|
|
|
|
height: 90,
|
|
|
|
|
},
|
|
|
|
|
// 设置图片位置
|
|
|
|
|
top: "22.8%",
|
|
|
|
|
left: "10%",
|
|
|
|
|
},],
|
|
|
|
|
backgroundColor: 'rgba(255,255,255,0)',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
backgroundColor: "rgba(255,255,255,0)",
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: ['55%', '70%'],
|
|
|
|
|
type: "pie",
|
|
|
|
|
radius: ["55%", "70%"],
|
|
|
|
|
top: "middle",
|
|
|
|
|
left: "left",
|
|
|
|
|
width: '45%',
|
|
|
|
|
width: "45%",
|
|
|
|
|
height: 190,
|
|
|
|
|
center: ['45%', '50%'],
|
|
|
|
|
center: ["45%", "50%"],
|
|
|
|
|
itemStyle: {
|
|
|
|
|
borderRadius: 0,
|
|
|
|
|
borderColor: 'rgba(255,255,255,0)',
|
|
|
|
|
borderWidth: 5
|
|
|
|
|
borderColor: "rgba(255,255,255,0)",
|
|
|
|
|
borderWidth: 5,
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: false,
|
|
|
|
|
position: 'center'
|
|
|
|
|
position: "center",
|
|
|
|
|
},
|
|
|
|
|
data
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
data,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
|
},
|
|
|
|
|
tableRowStyle({ rowIndex }) {
|
|
|
|
|
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 {
|
|
|
|
|
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() {
|
|
|
|
|
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' }
|
|
|
|
|
},
|
|
|
|
|
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) {
|
|
|
|
|
this.detailpageNum = 1;
|
|
|
|
|
this.DetailpageSize = val;
|
|
|
|
|
this.showVisible()
|
|
|
|
|
this.showVisible();
|
|
|
|
|
},
|
|
|
|
|
CurrentChange(val) {
|
|
|
|
|
this.detailpageNum = val;
|
|
|
|
|
this.showVisible()
|
|
|
|
|
this.showVisible();
|
|
|
|
|
},
|
|
|
|
|
fangkeSizeChange(val) {
|
|
|
|
|
this.fangkepageNum = 1;
|
|
|
|
|
this.fangkepageSize = val;
|
|
|
|
|
this.showfangkeVisible()
|
|
|
|
|
this.showfangkeVisible();
|
|
|
|
|
},
|
|
|
|
|
fangkeCurrentChange(val) {
|
|
|
|
|
this.fangkepageNum = val;
|
|
|
|
|
this.showfangkeVisible()
|
|
|
|
|
this.showfangkeVisible();
|
|
|
|
|
},
|
|
|
|
|
liudongSizeChange(val) {
|
|
|
|
|
this.liudongpageNum = 1;
|
|
|
|
|
this.liudongpageSize = val;
|
|
|
|
|
this.showliudongVisible()
|
|
|
|
|
this.showliudongVisible();
|
|
|
|
|
},
|
|
|
|
|
liudongCurrentChange(val) {
|
|
|
|
|
this.liudongpageNum = val;
|
|
|
|
|
this.showliudongVisible()
|
|
|
|
|
this.showliudongVisible();
|
|
|
|
|
},
|
|
|
|
|
showVisible() {
|
|
|
|
|
staffDetail({ pageSize: this.DetailpageSize, pageNum: this.detailpageNum }).then(res => {
|
|
|
|
|
this.staffDetailList = res.data
|
|
|
|
|
this.detailtotal = res.total
|
|
|
|
|
this.diaVisible = true
|
|
|
|
|
})
|
|
|
|
|
staffDetail({
|
|
|
|
|
pageSize: this.DetailpageSize,
|
|
|
|
|
pageNum: this.detailpageNum,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
this.staffDetailList = res.data;
|
|
|
|
|
this.detailtotal = res.total;
|
|
|
|
|
this.diaVisible = true;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
showliudongVisible() {
|
|
|
|
|
flowDetail({ pageSize: this.liudongpageSize, pageNum: this.liudongpageNum }).then(res => {
|
|
|
|
|
this.liudongList = res.data
|
|
|
|
|
this.liudongtotal = res.total
|
|
|
|
|
this.liudongVisible = true
|
|
|
|
|
})
|
|
|
|
|
flowDetail({
|
|
|
|
|
pageSize: this.liudongpageSize,
|
|
|
|
|
pageNum: this.liudongpageNum,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
this.liudongList = res.data;
|
|
|
|
|
this.liudongtotal = res.total;
|
|
|
|
|
this.liudongVisible = true;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
showfangkeVisible() {
|
|
|
|
|
visitDetail({ pageSize: this.fangkepageSize, pageNum: this.fangkepageNum }).then(res => {
|
|
|
|
|
this.fangkeList = res.data
|
|
|
|
|
this.fangketotal = res.total
|
|
|
|
|
this.fangkeVisible = true
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
visitDetail({
|
|
|
|
|
pageSize: this.fangkepageSize,
|
|
|
|
|
pageNum: this.fangkepageNum,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
this.fangkeList = res.data;
|
|
|
|
|
this.fangketotal = res.total;
|
|
|
|
|
this.fangkeVisible = true;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
@ -325,16 +507,16 @@ export default {
|
|
|
|
|
height: 35.84%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat;
|
|
|
|
|
background: url("~@/assets/safetyIndex/主屏板块1.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 33px;
|
|
|
|
|
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat;
|
|
|
|
|
background: url("~@/assets/safetyIndex/标题样式.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #D9E7FF;
|
|
|
|
|
color: #d9e7ff;
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
@ -350,9 +532,9 @@ export default {
|
|
|
|
|
|
|
|
|
|
.zongshu {
|
|
|
|
|
width: 400px;
|
|
|
|
|
height: 26px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
margin: 5px auto;
|
|
|
|
|
background: url('~@/assets/safetyIndex/7691.png') no-repeat;
|
|
|
|
|
background: url("~@/assets/safetyIndex/7691.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
@ -361,7 +543,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
.text4 {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #D0DEEE;
|
|
|
|
|
color: #d0deee;
|
|
|
|
|
letter-spacing: 0;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 16px;
|
|
|
|
|
@ -370,13 +552,14 @@ export default {
|
|
|
|
|
|
|
|
|
|
.numberTotal {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #EBF9FF;
|
|
|
|
|
line-height: 16px;
|
|
|
|
|
color: #ebf9ff;
|
|
|
|
|
letter-spacing: 1.5px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
color: #EBFFF8;
|
|
|
|
|
font-size: 36px;
|
|
|
|
|
color: #ebfff8;
|
|
|
|
|
letter-spacing: 2.5px;
|
|
|
|
|
line-height: 37px;
|
|
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
|
|
|
|
@ -388,7 +571,6 @@ export default {
|
|
|
|
|
.ygtb {
|
|
|
|
|
height: 160px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottomBtns {
|
|
|
|
|
@ -398,7 +580,7 @@ export default {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background: url('~@/assets/safetyIndex/99108881.png') no-repeat;
|
|
|
|
|
background: url("~@/assets/safetyIndex/99108881.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
padding: 4px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
@ -412,7 +594,7 @@ export default {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
.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%;
|
|
|
|
|
height: 33px;
|
|
|
|
|
width: 33px;
|
|
|
|
|
@ -442,7 +624,7 @@ export default {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 50%;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
@ -450,13 +632,10 @@ export default {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.fangke:last-child {
|
|
|
|
|
border-left: 1px solid #6C8097;
|
|
|
|
|
border-left: 1px solid #6c8097;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -464,7 +643,7 @@ export default {
|
|
|
|
|
.picForm {
|
|
|
|
|
/deep/ .el-dialog {
|
|
|
|
|
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%;
|
|
|
|
|
width: 841px;
|
|
|
|
|
height: 640px;
|
|
|
|
|
@ -472,7 +651,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
.el-dialog__title {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #EBFFF4;
|
|
|
|
|
color: #ebfff4;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
|
|
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
|
|
|
|
|
@ -486,16 +665,14 @@ export default {
|
|
|
|
|
.scopeQuantity {
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fangkeForm {
|
|
|
|
|
/deep/ .el-dialog {
|
|
|
|
|
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%;
|
|
|
|
|
width: 1241px;
|
|
|
|
|
height: 640px;
|
|
|
|
|
@ -503,7 +680,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
.el-dialog__title {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #EBFFF4;
|
|
|
|
|
color: #ebfff4;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
|
|
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
|
|
|
|
|
@ -517,7 +694,6 @@ export default {
|
|
|
|
|
.scopeQuantity {
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -544,12 +720,10 @@ export default {
|
|
|
|
|
|
|
|
|
|
/deep/.el-input__inner {
|
|
|
|
|
// 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%;
|
|
|
|
|
border: 1px solid rgba(40, 132, 126, 1);
|
|
|
|
|
color: rgba(234, 246, 255, 0.7);
|
|
|
|
|
;
|
|
|
|
|
|
|
|
|
|
.el-range-separator {
|
|
|
|
|
color: #ccc;
|
|
|
|
|
}
|
|
|
|
|
|
