ZheJiangNingBo
/
pingAnQiYeWeb
7
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

update

Browse Source
master
e 12 months ago
parent 39b69dffcc
commit 3dbcd07a54
4 changed files with 1007 additions and 933 deletions
Show Stats Download Patch File Download Diff File

5
src/router/routes/enterpriseTopic.js
Unescape View File

@ -13,6 +13,11 @@ export default [
name: "personSafety",
component: () => import("@/views/enterpriseTopic/personSafety/screen"),
},
{
path: "/topic/inSecurity/cmyDetail",
name: "inSecurityCmyDetail",
component: () => import("@/views/enterpriseTopic/inSecurity/cmyDetail"),
},
{
path: "/topic",
name: "topic",

62
src/views/enterpriseTopic/inSecurity/cmyDetail.vue
Unescape View File

@ -0,0 +1,62 @@
<template>
<div class="inSecurityCmyDetailPanel loveflowscreen">
<head-wrap :title="companyName"></head-wrap>
<div class="inSecurityCmyDetailWrap">
<div class="screenRow screenRowTop mb14">
<div class="screenLeft mr16">
<colWrap title="矛盾纠纷"></colWrap>
</div>
<div class="screenMid mr16"></div>
<div class="screenRight"></div>
</div>
<div class="screenRow screenRowMid mb14">
<div class="screenLeft mr16"></div>
<div class="screenMid mr16"></div>
<div class="screenRight"></div>
</div>
<div class="screenRow screenRowBtm">
<div class="screenLeft mr16"></div>
<div class="screenMid mr16"></div>
<div class="screenRight mr16"></div>
</div>
</div>
</div>
</template>
<script>
import headWrap from "@/views/home/head.vue";
import colWrap from "../components/colWrap.vue";
//import subCol from "../components/subCol.vue";
export default {
components: { colWrap, headWrap },
data() {
return {
companyName: "",
};
},
mounted() {
this.companyName = this.$route.query.car;
},
};
</script>
<style lang="scss" scoped>
@import "@/loveflow/assets/index.scss";
.inSecurityCmyDetailPanel {
height: 100%;
background: url("~@/assets/images/topic/allback.png") no-repeat center center;
background-size: 100% 100%;
box-sizing: border-box;
overflow: hidden;
.inSecurityCmyDetailWrap {
position: absolute;
top: 100px;
left: 16px;
width: calc(100% - 32px);
height: calc(100% - 110px);
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
}
</style>

875
src/views/enterpriseTopic/inSecurity/index.vue
Unescape View File

@ -1,263 +1,810 @@
<template>
<div class="inSecurityContent loveflow">
<div class="inSecurityPanel">
<div class="flexSpaceBetween">
<div class="tableOperator"></div>
<div class="searchWrap">
<el-form :inline="true" :model="queryParam" class="demo-form-inline">
<el-form-item label="企业类型">
<el-select v-model="queryParam.region" placeholder="企业类型">
<el-option label="类型一" value="shanghai"></el-option>
<el-option label="类型二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="关键字">
<el-input
v-model="queryParam.key"
placeholder="请输入公司名称、信用代码等"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchQuery">查询</el-button>
<el-button type="primary" plain @click="searchReset"
>重置</el-button
>
</el-form-item>
</el-form>
<div class="inSecurityDetail" @click="gotoPage()">
<div class="screenRow screenTopRow">
<div class="screenLeft mr18">
<colWrap class="mb14" title="企业三防异常分析">
<div class="qysfWrap">
<div class="qysfCol">
<pie-wrap :chartObj="mllObj"></pie-wrap>
</div>
<div class="qysfCol">
<pie-wrap :chartObj="mlmObj"></pie-wrap>
</div>
<div class="inSecurityTableWrap">
<div class="inSecurityTable">
<el-row :gutter="20">
<el-col
class="mb16"
:span="8"
v-for="item in dataSource"
:key="item.id"
>
<div class="inSecurityThead">{{ item.cmy }}</div>
<div class="inSecurityTbody" @click="gotoPage(item.cmy)">
<div class="qysfCol">
<pie-wrap :chartObj="mlrObj"></pie-wrap>
</div>
</div>
</colWrap>
<colWrap class="" title="技防数据概览">
<el-row :gutter="16">
<el-col :span="6" v-for="item in jssjList" :key="item.name">
<div class="line">
<div class="item">
<div class="label">信用代码：</div>
<div class="value">{{ item.phone }}</div>
<div class="icon">
<img :src="item.icon" />
</div>
<div class="item">
<div class="label">企业类型：</div>
<div class="value">{{ item.qyT }}</div>
<div class="name">{{ item.name }}</div>
<div class="value">
{{ item.value }}
</div>
</div>
<div class="line">
<div class="item">
<div class="label">注册地址：</div>
<div class="value">{{ item.address }}</div>
</div>
</el-col>
</el-row>
</colWrap>
</div>
<div class="line">
<div class="item">
<div class="label">经营范围：</div>
<div class="value">{{ item.address }}</div>
<div class="screenMid mr18">
<div class="screenMTop">{{ title }}</div>
<div class="screenMMid">
<div class="midTotalWrap">
<stmWrap></stmWrap>
</div>
</div>
<div class="line mt20">
<div class="item">
<div class="label">内部治安：</div>
<div class="value">
<div class="screenMBtm">
<div
class="zaCard"
v-for="info in item.cardList"
:key="info.name"
class="item"
v-for="item in tmList"
:key="item.name"
:style="{ backgroundImage: 'url(' + item.icon + ')' }"
>
{{ info.name }}({{ info.value || 0 }})
<div class="value">{{ item.value }}</div>
<div class="name">{{ item.name }}</div>
</div>
</div>
</div>
<div class="screenRight">
<colWrap class="mb14" title="企业应急预案与应急演练异常分析">
<div class="ycfxWrap">
<div class="ycfxCol">
<ballWrap :chartObj="trlObj"></ballWrap>
</div>
<div class="ycfxCol">
<ballWrap :chartObj="trrObj"></ballWrap>
</div>
</div>
</colWrap>
<colWrap class="" title="部门检查及系统研判异常分析">
<div class="bmjcWrap">
<div class="bmjcLeft">
<sevenWrap :chartObj="bmjcLeft"></sevenWrap>
</div>
<div class="bmjcRight">
<barOne :chartObj="bmjcObj"></barOne>
</div>
<div class="line mt20">
</div>
</colWrap>
</div>
</div>
<div class="screenRow screenBtmRow">
<div class="screenBLeft mr18">
<colWrap class="mr18" title="应急预案">
<div class="yjYuAn">
<div class="line" v-for="(item, index) in yjList" :key="item.name">
<div class="item">
<div class="label">内部管理：</div>
<div class="value">
<div
class="glCard"
v-for="info in item.cardList"
:key="info.name"
>
{{ info.name }}({{ info.value || 0 }})
<div class="icon">{{ index + 1 }}</div>
<div class="name">{{ item.name }}</div>
</div>
<div class="value">{{ item.value.toLocaleString() }}份</div>
</div>
</div>
</colWrap>
<colWrap class="" title="人防数据概览">
<div class="rfShuJu">
<div class="line" v-for="item in zbrList" :key="item.name">
<div class="icon">
<img :src="item.icon" />
</div>
<div class="item">
<div class="name">{{ item.name }}</div>
<div class="value">{{ item.value.toLocaleString() }}</div>
</div>
</div>
</div>
</colWrap>
</div>
<div class="screenBMid mr18">
<colWrap class="mr18" title="物防数据概览">
<div class="wfsjWrap">
<div class="xfsjHead">
<div class="xfsjIcon"></div>
<div class="xfsjTitle">消防物品</div>
</div>
<div class="xfsjBody">
<el-row :gutter="10">
<el-col :span="12" v-for="item in xfwpList" :key="item.name">
<div class="line">
<div class="icon">
<img :src="item.icon" />
</div>
<div class="line mt20">
<div class="item">
<div class="label">异常信息：</div>
<div class="name">{{ item.name }}</div>
<div class="value">
<div
class="ycCard"
v-for="info in item.cardList"
:key="info.name"
>
{{ info.name }}({{ info.value || 0 }})
{{ item.value.toLocaleString() }}<span>套</span>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="wfsjWrap">
<div class="xfsjHead">
<div class="xfsjIcon"></div>
<div class="xfsjTitle">反恐防爆</div>
</div>
<div class="xfsjBody">
<el-row :gutter="10">
<el-col :span="12" v-for="item in fkfbList" :key="item.name">
<div class="line">
<div class="icon">
<img :src="item.icon" />
</div>
<div class="item">
<div class="name">{{ item.name }}</div>
<div class="value">
{{ item.value.toLocaleString() }}<span>套</span>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="tableWrap">
<gMainTable
ref="gMainTable"
:tableData="dataSource"
:columns="columns"
rowKey="id"
:pagination="ipagination"
@pageSizeChange="handlePageSizeChange"
@currentPageChange="handleCurrentPageChange"
>
</gMainTable>
</colWrap>
<colWrap class="" title="重点岗位人员身份">
<div class="zdgwWrap">
<div class="line" v-for="item in zdgwList" :key="item.name">
<div class="icon">
<img :src="item.icon" />
</div>
<div class="name">
{{ item.name }}
</div>
</div>
</div>
</colWrap>
</div>
<div class="screenBRight">
<colWrap class="mr18" title="案件信息">
<barWrap :chartObj="barOneObj"></barWrap>
</colWrap>
<colWrap class="" title="企业整改异常分析">
<dPie :chartObj="{}"></dPie>
</colWrap>
</div>
</div>
</div>
</template>
<script>
import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
import colWrap from "../components/colWrap.vue";
import barWrap from "../components/bar.vue";
import barOne from "../components/barOne.vue";
import dPie from "../components/dPie.vue";
import pieWrap from "../components/pie.vue";
import stmWrap from "../components/stm.vue";
import ballWrap from "@/loveflow/components/echart/other/ball.vue";
import sevenWrap from "@/loveflow/components/echart/pie/seven.vue";
export default {
mixins: [tableListMixins],
components: {
colWrap,
barWrap,
barOne,
dPie,
pieWrap,
ballWrap,
sevenWrap,
stmWrap,
},
data() {
return {
columns: [
title: "内部治安安全指数",
mllObj: {
name: "人防异常单位占比",
total: 3400,
point: 1000,
icon: require("@/assets/images/topic/pie1b.png"),
color: ["#57F0FF", "#37A1CC", "#08FAC4"],
},
mlmObj: {
name: "物防异常单位占比",
total: 3400,
point: 1000,
icon: require("@/assets/images/topic/pie2b.png"),
color: ["#FFCE57", "#EB9104", "#FAC608"],
},
mlrObj: {
name: "技防异常单位占比",
total: 3400,
point: 1000,
icon: require("@/assets/images/topic/pie4b.png"),
color: ["#FFE3E3", "#FF2C2C", "#FF6D6D"],
},
tmList: [
{
prop: "name",
label: "姓名",
name: "矛盾纠纷",
value: 32145,
icon: require("@/assets/images/topic/stmdjf.png"),
},
{
name: "劳资纠纷",
value: 32145,
icon: require("@/assets/images/topic/stlzjf.png"),
},
{
name: "特种设备",
value: 32145,
icon: require("@/assets/images/topic/sttzsb.png"),
},
{
name: "原材料被盗",
value: 32145,
icon: require("@/assets/images/topic/stycl.png"),
},
],
trlObj: {
name: "企业应急预案完善率",
color: [
"#D9E7FF",
"#D0DEEE",
"rgba(29,172,180,1)",
"rgba(29,172,180,0.8)",
"rgba(29,172,180,0.5)",
"rgba(29,172,180,0)",
],
},
trrObj: {
name: "应急演练异常比例",
color: [
"#D9E7FF",
"#D0DEEE",
"rgba(253,141,39,1)",
"rgba(253,141,39,0.8)",
"rgba(253,141,39,0.5)",
"rgba(253,141,39,0)",
],
},
bmjcLeft: {
total: 300,
point: 120,
name: "企业治安准备情况",
},
bmjcObj: {
data: [
{ name: "制度完善比例", value: 1123 },
{ name: "设施完善比例", value: 808 },
],
color: [
["#FFDE9C", "#0E9FF7"],
["#f9c407", "#FFDE9C"],
],
},
yjList: [
{
name: "消防应急预案",
value: 32145,
},
{
name: "食品卫生应急预案",
value: 32145,
},
{
name: "停水停电应急预案",
value: 32145,
},
{
name: "防范被盗应急预案",
value: 32145,
},
{
name: "自然灾害应急预案",
value: 32145,
},
{
name: "作业事故应急预案",
value: 32145,
},
{
name: "反恐防暴应急预案",
value: 32145,
},
],
zbrList: [
{
name: "值班人员",
value: 32145,
icon: require("@/assets/images/topic/stzbr.png"),
},
{
name: "巡逻人员",
value: 32145,
icon: require("@/assets/images/topic/stxlr.png"),
},
{
name: "应急处理人员",
value: 32145,
icon: require("@/assets/images/topic/styjr.png"),
},
],
xfwpList: [
{
name: "消火栓",
value: 32145,
icon: require("@/assets/images/topic/xhs.png"),
},
{
name: "灭火器",
value: 32145,
icon: require("@/assets/images/topic/mhq.png"),
},
{
name: "逃生绳",
value: 32145,
icon: require("@/assets/images/topic/tss.png"),
},
{
name: "防毒面具",
value: 32145,
icon: require("@/assets/images/topic/fdmj.png"),
},
],
fkfbList: [
{
name: "防爆桶",
value: 32145,
icon: require("@/assets/images/topic/fbt.png"),
},
{
name: "盾牌钢叉",
value: 32145,
icon: require("@/assets/images/topic/dpgc.png"),
},
{
name: "防刺服",
value: 32145,
icon: require("@/assets/images/topic/fcf.png"),
},
{
name: "防爆警棍",
value: 32145,
icon: require("@/assets/images/topic/fbjg.png"),
},
],
jssjList: [
{
name: "视频监控",
value: 32145,
icon: require("@/assets/images/topic/spjk.png"),
},
{
name: "人行闸机",
value: 32145,
icon: require("@/assets/images/topic/rxzj.png"),
},
{
name: "楼宇对讲",
value: 32145,
icon: require("@/assets/images/topic/lydj.png"),
},
{
name: "人脸门禁",
value: 32145,
icon: require("@/assets/images/topic/rlmj.png"),
},
{
name: "电子脉冲",
value: 32145,
icon: require("@/assets/images/topic/dzmc.png"),
},
{
name: "人脸摄像头",
value: 32145,
icon: require("@/assets/images/topic/rlsxt.png"),
},
{
name: "车辆闸道",
value: 32145,
icon: require("@/assets/images/topic/rlmj.png"),
},
{
name: "指纹识别",
value: 32145,
icon: require("@/assets/images/topic/zwsb.png"),
},
{
name: "周界报警",
value: 32145,
icon: require("@/assets/images/topic/zjbj.png"),
},
{
name: "紧急报警",
value: 32145,
icon: require("@/assets/images/topic/jjbj.png"),
},
],
zdgwList: [
{
name: "危险品领用人员",
icon: require("@/assets/images/topic/wxpl.png"),
},
{
name: "危险品保管人员",
icon: require("@/assets/images/topic/wxpb.png"),
},
{
name: "危险品使用人员",
icon: require("@/assets/images/topic/wxps.png"),
},
{
name: "危险品技术资质人员",
icon: require("@/assets/images/topic/wxpj.png"),
},
],
barOneObj: {
data: [
{ name: "民事案件", value: 1123 },
{ name: "刑事案件", value: 808 },
{ name: "行政案件", value: 703 },
{ name: "经济案件", value: 613 },
{ name: "非诉讼案件", value: 933 },
],
color: ["#FFDE9C", "#0E9FF7"],
},
};
},
mounted() {
//this.title = this.$route.query.cmy;
},
methods: {
gotoPage(val) {
gotoPage() {
this.$router.push({
path: "/topic/inSecurity/indexDetail",
query: {
cmy: val,
},
});
},
},
};
</script>
<style lang="less" scoped>
.inSecurityContent {
padding: 16px;
<style lang="scss" scoped>
@import "@/loveflow/assets/index.scss";
.inSecurityDetail {
height: 100%;
box-sizing: border-box;
}
.inSecurityPanel {
padding: 16px;
height: 100%;
overflow-y: hidden;
box-sizing: border-box;
background: url("~@/assets/images/topic/stbg.png") no-repeat center center;
background-size: 100% 100%;
overflow: hidden;
.screenRow {
display: flex;
.screenLeft {
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
/* .el-row {
margin-top: -10px;
padding-top: vw(6);
background-color: rgba(108, 151, 149, 0.2);
} */
.inSecurityTableWrap {
height: calc(100% - 90px);
.inSecurityTable {
.qysfWrap {
height: 100%;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
display: flex;
.qysfCol {
flex: 1;
}
}
.inSecurityThead {
margin-left: -10px;
padding-left: 24px;
height: 46px;
line-height: 36px;
background: url("~@/assets/images/topic/sttop.png") no-repeat center
.line {
display: flex;
align-items: center;
height: vw(50);
padding: vw(2) vw(6);
margin-bottom: vw(6);
background: url("~@/assets/images/topic/strfsj.png") no-repeat center
center;
background-size: 100% 100%;
font-weight: 500;
font-size: 16px;
color: #edf4ff;
.icon {
margin-right: 6px;
width: vw(34);
height: vw(36);
img {
width: 100%;
}
.inSecurityTbody {
padding: 16px;
margin-top: -10px;
height: 344px;
background: url("~@/assets/images/topic/stbtm.png") no-repeat center
}
.item {
.name {
margin-bottom: 2px;
font-weight: 400;
font-size: vw(14);
color: #d0deee;
}
.value {
font-weight: 400;
font-size: vw(18);
color: #ffffff;
}
}
}
}
.screenMid {
position: relative;
flex: 1;
background: url("~@/assets/images/topic/stmbg.png") no-repeat center
center;
background-size: 100% 100%;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
.screenMTop {
display: flex;
align-items: center;
justify-content: center;
height: vw(60);
background: url("~@/assets/images/topic/stmt.png") no-repeat center
center;
background-size: 100% 100%;
font-weight: bold;
font-size: vw(20);
color: #ffffff;
}
&:hover {
opacity: 0.8;
cursor: pointer;
.screenMMid {
position: absolute;
bottom: vw(50);
width: 100%;
height: vw(300);
background: url("~@/assets/images/topic/stzp.png") no-repeat center
center;
background-size: 100% 100%;
display: flex;
justify-content: center;
.midTotalWrap {
position: absolute;
bottom: vw(100);
width: vw(250);
height: vw(250);
}
}
.screenMBtm {
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
bottom: vw(40);
.item {
height: vw(106);
width: vw(150);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
.value {
font-weight: 500;
font-size: vw(16);
color: #e3feff;
}
.name {
font-weight: 400;
font-size: vw(14);
color: #d0deee;
}
}
}
}
.screenRight {
flex: 1;
display: flex;
flex-direction: column;
.ycfxWrap {
height: 100%;
display: flex;
.ycfxCol {
flex: 1;
}
}
.bmjcWrap {
height: 100%;
display: flex;
.bmjcLeft {
flex: 1;
}
.bmjcRight {
flex: 2;
}
}
}
.screenBLeft {
flex: 1;
display: flex;
.yjYuAn {
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: space-between;
height: 100%;
padding-bottom: 12px;
box-sizing: border-box;
.line {
display: flex;
align-items: center;
justify-content: space-between;
height: vw(48);
padding: 0 12px;
.item {
flex: 1;
display: flex;
align-items: center;
margin-bottom: 16px;
.label {
width: 70px;
.icon {
display: flex;
justify-content: center;
margin-right: 4px;
width: vw(18);
height: vw(18);
font-size: 14px;
color: #d0deee;
font-weight: 600;
font-size: vw(14);
color: #9cffc8;
border: solid 1px #9cffc8;
border-radius: 2px;
}
.name {
font-weight: 400;
font-size: vw(14);
color: #ffffff;
}
}
.value {
flex: 1;
font-size: 14px;
font-weight: 400;
font-size: vw(16);
color: #9cffc8;
}
&:nth-child(odd) {
background-color: rgba(108, 128, 151, 0.1);
}
}
}
.rfShuJu {
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: space-between;
height: 100%;
padding-bottom: 12px;
box-sizing: border-box;
.line {
display: flex;
align-items: center;
height: vw(96);
padding: 0 12px;
background: url("~@/assets/images/topic/strfsj.png") no-repeat center
center;
background-size: 100% 100%;
.icon {
margin-right: 4px;
width: vw(76);
height: vw(76);
img {
width: 100%;
}
}
.item {
.name {
margin-bottom: 8px;
font-weight: 400;
font-size: vw(16);
color: #ffffff;
}
.value {
font-weight: 400;
font-size: vw(18);
color: #f3fff9;
}
}
&:hover {
}
}
}
}
.screenBMid {
flex: 1;
display: flex;
.wfsjWrap {
height: 50%;
display: flex;
flex-direction: column;
.xfsjHead {
display: flex;
.zaCard {
padding: 6px 10px;
margin-right: 12px;
margin-bottom: 4px;
background: url("~@/assets/images/topic/stmd.png") no-repeat
align-items: center;
height: 30px;
background: url("~@/assets/images/topic/fsT.png") no-repeat center
center;
background-size: 100% 100%;
.xfsjIcon {
width: 34px;
height: 36px;
background: url("~@/assets/images/topic/fsIcon.png") no-repeat
center center;
background-size: 100% 100%;
}
.xfsjTitle {
font-size: 14px;
color: #b5ffe4;
color: #d9e7ff;
}
}
.glCard {
padding: 6px 10px;
margin-right: 12px;
margin-bottom: 4px;
background: url("~@/assets/images/topic/stgl.png") no-repeat
.xfsjBody {
flex: 1;
.line {
display: flex;
align-items: center;
margin-top: vw(10);
height: vw(60);
padding: 0 vw(12);
background: url("~@/assets/images/topic/strfsj.png") no-repeat
center center;
background-size: 100% 100%;
font-size: 14px;
color: #b5ebff;
.icon {
margin-right: vw(6);
width: vw(34);
height: vw(36);
img {
width: 100%;
}
.ycCard {
padding: 6px 10px;
margin-right: 12px;
margin-bottom: 4px;
background: url("~@/assets/images/topic/styc.png") no-repeat
center center;
}
.item {
.name {
margin-bottom: 2px;
font-weight: 400;
font-size: vw(14);
color: #d0deee;
}
.value {
font-weight: 400;
font-size: vw(14);
color: #ffffff;
span {
font-size: 12px;
}
}
}
}
}
}
.zdgwWrap {
padding-bottom: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
.line {
height: vw(70);
display: flex;
align-items: center;
justify-content: center;
background: url("~@/assets/images/topic/zdgwb.png") no-repeat center
center;
background-size: 100% 100%;
font-size: 14px;
color: #e3deff;
.icon {
width: vw(35);
width: vw(34);
margin-right: vw(6);
}
.name {
font-size: vw(16);
color: #ffffff;
}
}
}
}
.screenBRight {
flex: 1;
display: flex;
}
}
/deep/.el-table {
display: none;
.screenTopRow {
height: 54%;
padding-bottom: 14px;
}
.screenBtmRow {
height: 46%;
}
}
</style>

876
src/views/enterpriseTopic/inSecurity/indexDetail.vue
Unescape View File

@ -1,148 +1,105 @@
<template>
<div class="inSecurityDetail">
<div class="screenRow screenTopRow">
<div class="screenLeft mr18">
<colWrap class="mb14" title="企业三防异常分析">
<div class="qysfWrap">
<div class="qysfCol">
<pie-wrap :chartObj="mllObj"></pie-wrap>
</div>
<div class="qysfCol">
<pie-wrap :chartObj="mlmObj"></pie-wrap>
</div>
<div class="qysfCol">
<pie-wrap :chartObj="mlrObj"></pie-wrap>
<div class="inSecurityContent loveflow">
<div class="inSecurityPanel">
<div class="flexSpaceBetween">
<div class="tableOperator"></div>
<div class="searchWrap">
<el-form :inline="true" :model="queryParam" class="demo-form-inline">
<el-form-item label="企业类型">
<el-select v-model="queryParam.region" placeholder="企业类型">
<el-option label="类型一" value="shanghai"></el-option>
<el-option label="类型二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="关键字">
<el-input
v-model="queryParam.key"
placeholder="请输入公司名称、信用代码等"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchQuery">查询</el-button>
<el-button type="primary" plain @click="searchReset"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
</div>
</colWrap>
<colWrap class="" title="技防数据概览">
<el-row :gutter="16">
<el-col :span="6" v-for="item in jssjList" :key="item.name">
<div class="inSecurityTableWrap">
<div class="inSecurityTable">
<el-row :gutter="20">
<el-col
class="mb16"
:span="8"
v-for="item in dataSource"
:key="item.id"
>
<div class="inSecurityThead">{{ item.cmy }}</div>
<div class="inSecurityTbody" @click="gotoPage(item.cmy)">
<div class="line">
<div class="icon">
<img :src="item.icon" />
<div class="item">
<div class="label">信用代码：</div>
<div class="value">{{ item.phone }}</div>
</div>
<div class="item">
<div class="name">{{ item.name }}</div>
<div class="value">
{{ item.value }}
<div class="label">企业类型：</div>
<div class="value">{{ item.qyT }}</div>
</div>
</div>
<div class="line">
<div class="item">
<div class="label">注册地址：</div>
<div class="value">{{ item.address }}</div>
</div>
</el-col>
</el-row>
</colWrap>
</div>
<div class="screenMid mr18">
<div class="screenMTop">{{ title }}</div>
<div class="screenMMid">
<div class="midTotalWrap">
<stmWrap></stmWrap>
<div class="line">
<div class="item">
<div class="label">经营范围：</div>
<div class="value">{{ item.address }}</div>
</div>
</div>
<div class="screenMBtm">
<div class="line mt20">
<div class="item">
<div class="label">内部治安：</div>
<div class="value">
<div
class="item"
v-for="item in tmList"
:key="item.name"
:style="{ backgroundImage: 'url(' + item.icon + ')' }"
class="zaCard"
v-for="info in item.cardList"
:key="info.name"
>
<div class="value">{{ item.value }}</div>
<div class="name">{{ item.name }}</div>
</div>
</div>
</div>
<div class="screenRight">
<colWrap class="mb14" title="企业应急预案与应急演练异常分析">
<div class="ycfxWrap">
<div class="ycfxCol">
<ballWrap :chartObj="trlObj"></ballWrap>
{{ info.name }}({{ info.value || 0 }})
</div>
<div class="ycfxCol">
<ballWrap :chartObj="trrObj"></ballWrap>
</div>
</div>
</colWrap>
<colWrap class="" title="部门检查及系统研判异常分析">
<div class="bmjcWrap">
<div class="bmjcLeft">
<sevenWrap :chartObj="bmjcLeft"></sevenWrap>
</div>
<div class="bmjcRight">
<barOne :chartObj="bmjcObj"></barOne>
</div>
</div>
</colWrap>
</div>
</div>
<div class="screenRow screenBtmRow">
<div class="screenBLeft mr18">
<colWrap class="mr18" title="应急预案">
<div class="yjYuAn">
<div class="line" v-for="(item, index) in yjList" :key="item.name">
<div class="item">
<div class="icon">{{ index + 1 }}</div>
<div class="name">{{ item.name }}</div>
</div>
<div class="value">{{ item.value.toLocaleString() }}份</div>
</div>
</div>
</colWrap>
<colWrap class="" title="人防数据概览">
<div class="rfShuJu">
<div class="line" v-for="item in zbrList" :key="item.name">
<div class="icon">
<img :src="item.icon" />
</div>
<div class="line mt20">
<div class="item">
<div class="name">{{ item.name }}</div>
<div class="value">{{ item.value.toLocaleString() }}</div>
</div>
<div class="label">内部管理：</div>
<div class="value">
<div
class="glCard"
v-for="info in item.cardList"
:key="info.name"
>
{{ info.name }}({{ info.value || 0 }})
</div>
</div>
</colWrap>
</div>
<div class="screenBMid mr18">
<colWrap class="mr18" title="物防数据概览">
<div class="wfsjWrap">
<div class="xfsjHead">
<div class="xfsjIcon"></div>
<div class="xfsjTitle">消防物品</div>
</div>
<div class="xfsjBody">
<el-row :gutter="10">
<el-col :span="12" v-for="item in xfwpList" :key="item.name">
<div class="line">
<div class="icon">
<img :src="item.icon" />
</div>
<div class="line mt20">
<div class="item">
<div class="name">{{ item.name }}</div>
<div class="label">异常信息：</div>
<div class="value">
{{ item.value.toLocaleString() }}<span>套</span>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="wfsjWrap">
<div class="xfsjHead">
<div class="xfsjIcon"></div>
<div class="xfsjTitle">反恐防爆</div>
<div
class="ycCard"
v-for="info in item.cardList"
:key="info.name"
>
{{ info.name }}({{ info.value || 0 }})
</div>
<div class="xfsjBody">
<el-row :gutter="10">
<el-col :span="12" v-for="item in fkfbList" :key="item.name">
<div class="line">
<div class="icon">
<img :src="item.icon" />
</div>
<div class="item">
<div class="name">{{ item.name }}</div>
<div class="value">
{{ item.value.toLocaleString() }}<span>套</span>
</div>
</div>
</div>
@ -150,654 +107,157 @@
</el-row>
</div>
</div>
</colWrap>
<colWrap class="" title="重点岗位人员身份">
<div class="zdgwWrap">
<div class="line" v-for="item in zdgwList" :key="item.name">
<div class="icon">
<img :src="item.icon" />
</div>
<div class="name">
{{ item.name }}
</div>
</div>
</div>
</colWrap>
</div>
<div class="screenBRight">
<colWrap class="mr18" title="案件信息">
<barWrap :chartObj="barOneObj"></barWrap>
</colWrap>
<colWrap class="" title="企业整改异常分析">
<dPie :chartObj="{}"></dPie>
</colWrap>
<div class="tableWrap">
<gMainTable
ref="gMainTable"
:tableData="dataSource"
:columns="columns"
rowKey="id"
:pagination="ipagination"
@pageSizeChange="handlePageSizeChange"
@currentPageChange="handleCurrentPageChange"
>
</gMainTable>
</div>
</div>
</div>
</template>
<script>
import colWrap from "../components/colWrap.vue";
import barWrap from "../components/bar.vue";
import barOne from "../components/barOne.vue";
import dPie from "../components/dPie.vue";
import pieWrap from "../components/pie.vue";
import stmWrap from "../components/stm.vue";
import ballWrap from "@/loveflow/components/echart/other/ball.vue";
import sevenWrap from "@/loveflow/components/echart/pie/seven.vue";
import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
export default {
components: {
colWrap,
barWrap,
barOne,
dPie,
pieWrap,
ballWrap,
sevenWrap,
stmWrap,
},
mixins: [tableListMixins],
data() {
return {
title: "",
mllObj: {
name: "人防异常单位占比",
total: 3400,
point: 1000,
icon: require("@/assets/images/topic/pie1b.png"),
color: ["#57F0FF", "#37A1CC", "#08FAC4"],
},
mlmObj: {
name: "物防异常单位占比",
total: 3400,
point: 1000,
icon: require("@/assets/images/topic/pie2b.png"),
color: ["#FFCE57", "#EB9104", "#FAC608"],
},
mlrObj: {
name: "技防异常单位占比",
total: 3400,
point: 1000,
icon: require("@/assets/images/topic/pie4b.png"),
color: ["#FFE3E3", "#FF2C2C", "#FF6D6D"],
},
tmList: [
{
name: "矛盾纠纷",
value: 32145,
icon: require("@/assets/images/topic/stmdjf.png"),
},
{
name: "劳资纠纷",
value: 32145,
icon: require("@/assets/images/topic/stlzjf.png"),
},
{
name: "特种设备",
value: 32145,
icon: require("@/assets/images/topic/sttzsb.png"),
},
{
name: "原材料被盗",
value: 32145,
icon: require("@/assets/images/topic/stycl.png"),
},
],
trlObj: {
name: "企业应急预案完善率",
color: [
"#D9E7FF",
"#D0DEEE",
"rgba(29,172,180,1)",
"rgba(29,172,180,0.8)",
"rgba(29,172,180,0.5)",
"rgba(29,172,180,0)",
],
},
trrObj: {
name: "应急演练异常比例",
color: [
"#D9E7FF",
"#D0DEEE",
"rgba(253,141,39,1)",
"rgba(253,141,39,0.8)",
"rgba(253,141,39,0.5)",
"rgba(253,141,39,0)",
],
},
bmjcLeft: {
total: 300,
point: 120,
name: "企业治安准备情况",
},
bmjcObj: {
data: [
{ name: "制度完善比例", value: 1123 },
{ name: "设施完善比例", value: 808 },
],
color: [
["#FFDE9C", "#0E9FF7"],
["#f9c407", "#FFDE9C"],
],
},
yjList: [
{
name: "消防应急预案",
value: 32145,
},
{
name: "食品卫生应急预案",
value: 32145,
},
{
name: "停水停电应急预案",
value: 32145,
},
{
name: "防范被盗应急预案",
value: 32145,
},
{
name: "自然灾害应急预案",
value: 32145,
},
{
name: "作业事故应急预案",
value: 32145,
},
{
name: "反恐防暴应急预案",
value: 32145,
},
],
zbrList: [
{
name: "值班人员",
value: 32145,
icon: require("@/assets/images/topic/stzbr.png"),
},
{
name: "巡逻人员",
value: 32145,
icon: require("@/assets/images/topic/stxlr.png"),
},
{
name: "应急处理人员",
value: 32145,
icon: require("@/assets/images/topic/styjr.png"),
},
],
xfwpList: [
{
name: "消火栓",
value: 32145,
icon: require("@/assets/images/topic/xhs.png"),
},
{
name: "灭火器",
value: 32145,
icon: require("@/assets/images/topic/mhq.png"),
},
{
name: "逃生绳",
value: 32145,
icon: require("@/assets/images/topic/tss.png"),
},
{
name: "防毒面具",
value: 32145,
icon: require("@/assets/images/topic/fdmj.png"),
},
],
fkfbList: [
{
name: "防爆桶",
value: 32145,
icon: require("@/assets/images/topic/fbt.png"),
},
{
name: "盾牌钢叉",
value: 32145,
icon: require("@/assets/images/topic/dpgc.png"),
},
{
name: "防刺服",
value: 32145,
icon: require("@/assets/images/topic/fcf.png"),
},
{
name: "防爆警棍",
value: 32145,
icon: require("@/assets/images/topic/fbjg.png"),
},
],
jssjList: [
{
name: "视频监控",
value: 32145,
icon: require("@/assets/images/topic/spjk.png"),
},
{
name: "人行闸机",
value: 32145,
icon: require("@/assets/images/topic/rxzj.png"),
},
{
name: "楼宇对讲",
value: 32145,
icon: require("@/assets/images/topic/lydj.png"),
},
{
name: "人脸门禁",
value: 32145,
icon: require("@/assets/images/topic/rlmj.png"),
},
{
name: "电子脉冲",
value: 32145,
icon: require("@/assets/images/topic/dzmc.png"),
},
{
name: "人脸摄像头",
value: 32145,
icon: require("@/assets/images/topic/rlsxt.png"),
},
columns: [
{
name: "车辆闸道",
value: 32145,
icon: require("@/assets/images/topic/rlmj.png"),
},
{
name: "指纹识别",
value: 32145,
icon: require("@/assets/images/topic/zwsb.png"),
},
{
name: "周界报警",
value: 32145,
icon: require("@/assets/images/topic/zjbj.png"),
},
{
name: "紧急报警",
value: 32145,
icon: require("@/assets/images/topic/jjbj.png"),
prop: "name",
label: "姓名",
},
],
zdgwList: [
{
name: "危险品领用人员",
icon: require("@/assets/images/topic/wxpl.png"),
},
{
name: "危险品保管人员",
icon: require("@/assets/images/topic/wxpb.png"),
};
},
{
name: "危险品使用人员",
icon: require("@/assets/images/topic/wxps.png"),
methods: {
gotoPage(val) {
this.$router.push({
path: "/topic/inSecurity/cmyDetail",
query: {
cmy: val,
},
{
name: "危险品技术资质人员",
icon: require("@/assets/images/topic/wxpj.png"),
});
},
],
barOneObj: {
data: [
{ name: "民事案件", value: 1123 },
{ name: "刑事案件", value: 808 },
{ name: "行政案件", value: 703 },
{ name: "经济案件", value: 613 },
{ name: "非诉讼案件", value: 933 },
],
color: ["#FFDE9C", "#0E9FF7"],
},
};
},
mounted() {
this.title = this.$route.query.cmy;
},
};
</script>
<style lang="scss" scoped>
@import "@/loveflow/assets/index.scss";
.inSecurityDetail {
height: 100%;
<style lang="less" scoped>
.inSecurityContent {
padding: 16px;
height: 100%;
box-sizing: border-box;
overflow: hidden;
.screenRow {
display: flex;
.screenLeft {
}
.inSecurityPanel {
padding: 16px;
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
/* .el-row {
margin-top: -10px;
padding-top: vw(6);
background-color: rgba(108, 151, 149, 0.2);
} */
overflow-y: hidden;
box-sizing: border-box;
background: url("~@/assets/images/topic/stbg.png") no-repeat center center;
background-size: 100% 100%;
.qysfWrap {
.inSecurityTableWrap {
height: calc(100% - 90px);
.inSecurityTable {
height: 100%;
display: flex;
.qysfCol {
flex: 1;
}
}
.line {
display: flex;
align-items: center;
height: vw(50);
padding: vw(2) vw(6);
margin-bottom: vw(6);
background: url("~@/assets/images/topic/strfsj.png") no-repeat center
center;
background-size: 100% 100%;
.icon {
margin-right: 6px;
width: vw(34);
height: vw(36);
img {
width: 100%;
}
}
.item {
.name {
margin-bottom: 2px;
font-weight: 400;
font-size: vw(14);
color: #d0deee;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
.value {
font-weight: 400;
font-size: vw(18);
color: #ffffff;
}
}
}
}
.screenMid {
position: relative;
flex: 1;
background: url("~@/assets/images/topic/stmbg.png") no-repeat center
.inSecurityThead {
margin-left: -10px;
padding-left: 24px;
height: 46px;
line-height: 36px;
background: url("~@/assets/images/topic/sttop.png") no-repeat center
center;
background-size: 100% 100%;
.screenMTop {
display: flex;
align-items: center;
justify-content: center;
height: vw(60);
background: url("~@/assets/images/topic/stmt.png") no-repeat center
center;
background-size: 100% 100%;
font-weight: bold;
font-size: vw(20);
color: #ffffff;
font-weight: 500;
font-size: 16px;
color: #edf4ff;
}
.screenMMid {
position: absolute;
bottom: vw(50);
width: 100%;
height: vw(300);
background: url("~@/assets/images/topic/stzp.png") no-repeat center
.inSecurityTbody {
padding: 16px;
margin-top: -10px;
height: 344px;
background: url("~@/assets/images/topic/stbtm.png") no-repeat center
center;
background-size: 100% 100%;
display: flex;
justify-content: center;
.midTotalWrap {
position: absolute;
bottom: vw(100);
width: vw(250);
height: vw(250);
}
}
.screenMBtm {
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
bottom: vw(40);
.item {
height: vw(106);
width: vw(150);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
.value {
font-weight: 500;
font-size: vw(16);
color: #e3feff;
}
.name {
font-weight: 400;
font-size: vw(14);
color: #d0deee;
}
}
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
&:hover {
opacity: 0.8;
cursor: pointer;
}
.screenRight {
flex: 1;
display: flex;
flex-direction: column;
.ycfxWrap {
height: 100%;
display: flex;
.ycfxCol {
flex: 1;
}
}
.bmjcWrap {
height: 100%;
display: flex;
.bmjcLeft {
flex: 1;
}
.bmjcRight {
flex: 2;
}
}
}
.screenBLeft {
flex: 1;
display: flex;
.yjYuAn {
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: space-between;
height: 100%;
padding-bottom: 12px;
box-sizing: border-box;
.line {
display: flex;
align-items: center;
justify-content: space-between;
height: vw(48);
padding: 0 12px;
.item {
flex: 1;
display: flex;
align-items: center;
.icon {
display: flex;
justify-content: center;
margin-right: 4px;
width: vw(18);
height: vw(18);
margin-bottom: 16px;
.label {
width: 70px;
font-size: 14px;
font-weight: 600;
font-size: vw(14);
color: #9cffc8;
border: solid 1px #9cffc8;
border-radius: 2px;
}
.name {
font-weight: 400;
font-size: vw(14);
color: #ffffff;
}
}
.value {
font-weight: 400;
font-size: vw(16);
color: #9cffc8;
}
&:nth-child(odd) {
background-color: rgba(108, 128, 151, 0.1);
}
}
}
.rfShuJu {
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: space-between;
height: 100%;
padding-bottom: 12px;
box-sizing: border-box;
.line {
display: flex;
align-items: center;
height: vw(96);
padding: 0 12px;
background: url("~@/assets/images/topic/strfsj.png") no-repeat center
center;
background-size: 100% 100%;
.icon {
margin-right: 4px;
width: vw(76);
height: vw(76);
img {
width: 100%;
}
}
.item {
.name {
margin-bottom: 8px;
font-weight: 400;
font-size: vw(16);
color: #ffffff;
color: #d0deee;
}
.value {
font-weight: 400;
font-size: vw(18);
color: #f3fff9;
}
}
&:hover {
}
}
}
}
.screenBMid {
flex: 1;
font-size: 14px;
color: #ffffff;
display: flex;
.wfsjWrap {
height: 50%;
display: flex;
flex-direction: column;
.xfsjHead {
display: flex;
align-items: center;
height: 30px;
background: url("~@/assets/images/topic/fsT.png") no-repeat center
center;
background-size: 100% 100%;
.xfsjIcon {
width: 34px;
height: 36px;
background: url("~@/assets/images/topic/fsIcon.png") no-repeat
.zaCard {
padding: 6px 10px;
margin-right: 12px;
margin-bottom: 4px;
background: url("~@/assets/images/topic/stmd.png") no-repeat
center center;
background-size: 100% 100%;
}
.xfsjTitle {
font-size: 14px;
color: #d9e7ff;
}
color: #b5ffe4;
}
.xfsjBody {
flex: 1;
.line {
display: flex;
align-items: center;
margin-top: vw(10);
height: vw(60);
padding: 0 vw(12);
background: url("~@/assets/images/topic/strfsj.png") no-repeat
.glCard {
padding: 6px 10px;
margin-right: 12px;
margin-bottom: 4px;
background: url("~@/assets/images/topic/stgl.png") no-repeat
center center;
background-size: 100% 100%;
.icon {
margin-right: vw(6);
width: vw(34);
height: vw(36);
img {
width: 100%;
}
}
.item {
.name {
margin-bottom: 2px;
font-weight: 400;
font-size: vw(14);
color: #d0deee;
}
.value {
font-weight: 400;
font-size: vw(14);
color: #ffffff;
span {
font-size: 12px;
}
}
}
}
}
font-size: 14px;
color: #b5ebff;
}
.zdgwWrap {
padding-bottom: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
.line {
height: vw(70);
display: flex;
align-items: center;
justify-content: center;
background: url("~@/assets/images/topic/zdgwb.png") no-repeat center
center;
.ycCard {
padding: 6px 10px;
margin-right: 12px;
margin-bottom: 4px;
background: url("~@/assets/images/topic/styc.png") no-repeat
center center;
background-size: 100% 100%;
.icon {
width: vw(35);
width: vw(34);
margin-right: vw(6);
}
.name {
font-size: vw(16);
color: #ffffff;
font-size: 14px;
color: #e3deff;
}
}
}
}
.screenBRight {
flex: 1;
display: flex;
}
}
.screenTopRow {
height: 54%;
padding-bottom: 14px;
}
.screenBtmRow {
height: 46%;
/deep/.el-table {
display: none;
}
}
</style>

Write Preview
Loading…
Cancel
Save