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

Merge branch 'liwei' of http://8.136.197.230:3000/ZheJiangNingBo/pingAnQiYeWeb into liwei

Browse Source
master
loveflow 12 months ago
parent 5ba14dd8a2 3dbcd07a54
commit 348fc633c4
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", name: "personSafety",
component: () => import("@/views/enterpriseTopic/personSafety/screen"), component: () => import("@/views/enterpriseTopic/personSafety/screen"),
}, },
{
path: "/topic/inSecurity/cmyDetail",
name: "inSecurityCmyDetail",
component: () => import("@/views/enterpriseTopic/inSecurity/cmyDetail"),
},
{ {
path: "/topic", path: "/topic",
name: "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> <template>
<div class="inSecurityContent loveflow"> <div class="inSecurityDetail" @click="gotoPage()">
<div class="inSecurityPanel"> <div class="screenRow screenTopRow">
<div class="flexSpaceBetween"> <div class="screenLeft mr18">
<div class="tableOperator"></div> <colWrap class="mb14" title="企业三防异常分析">
<div class="searchWrap"> <div class="qysfWrap">
<el-form :inline="true" :model="queryParam" class="demo-form-inline"> <div class="qysfCol">
<el-form-item label="企业类型"> <pie-wrap :chartObj="mllObj"></pie-wrap>
<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>
<div class="qysfCol">
<pie-wrap :chartObj="mlmObj"></pie-wrap>
</div> </div>
<div class="qysfCol">
<div class="inSecurityTableWrap"> <pie-wrap :chartObj="mlrObj"></pie-wrap>
<div class="inSecurityTable"> </div>
<el-row :gutter="20"> </div>
<el-col </colWrap>
class="mb16" <colWrap class="" title="技防数据概览">
:span="8" <el-row :gutter="16">
v-for="item in dataSource" <el-col :span="6" v-for="item in jssjList" :key="item.name">
:key="item.id"
>
<div class="inSecurityThead">{{ item.cmy }}</div>
<div class="inSecurityTbody" @click="gotoPage(item.cmy)">
<div class="line"> <div class="line">
<div class="item"> <div class="icon">
<div class="label">信用代码：</div> <img :src="item.icon" />
<div class="value">{{ item.phone }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="label">企业类型：</div> <div class="name">{{ item.name }}</div>
<div class="value">{{ item.qyT }}</div> <div class="value">
{{ item.value }}
</div> </div>
</div> </div>
<div class="line">
<div class="item">
<div class="label">注册地址：</div>
<div class="value">{{ item.address }}</div>
</div> </div>
</el-col>
</el-row>
</colWrap>
</div> </div>
<div class="line"> <div class="screenMid mr18">
<div class="item"> <div class="screenMTop">{{ title }}</div>
<div class="label">经营范围：</div> <div class="screenMMid">
<div class="value">{{ item.address }}</div> <div class="midTotalWrap">
<stmWrap></stmWrap>
</div> </div>
</div> </div>
<div class="line mt20"> <div class="screenMBtm">
<div class="item">
<div class="label">内部治安：</div>
<div class="value">
<div <div
class="zaCard" class="item"
v-for="info in item.cardList" v-for="item in tmList"
:key="info.name" :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>
</div> </div>
</colWrap>
<colWrap class="" title="部门检查及系统研判异常分析">
<div class="bmjcWrap">
<div class="bmjcLeft">
<sevenWrap :chartObj="bmjcLeft"></sevenWrap>
</div> </div>
<div class="bmjcRight">
<barOne :chartObj="bmjcObj"></barOne>
</div> </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="item">
<div class="label">内部管理：</div> <div class="icon">{{ index + 1 }}</div>
<div class="value"> <div class="name">{{ item.name }}</div>
<div </div>
class="glCard" <div class="value">{{ item.value.toLocaleString() }}份</div>
v-for="info in item.cardList" </div>
:key="info.name" </div>
> </colWrap>
{{ info.name }}({{ info.value || 0 }}) <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>
</div> </div>
</colWrap>
</div> </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>
<div class="line mt20">
<div class="item"> <div class="item">
<div class="label">异常信息：</div> <div class="name">{{ item.name }}</div>
<div class="value"> <div class="value">
<div {{ item.value.toLocaleString() }}<span>套</span>
class="ycCard"
v-for="info in item.cardList"
:key="info.name"
>
{{ info.name }}({{ info.value || 0 }})
</div> </div>
</div> </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>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</div> </div>
</colWrap>
<div class="tableWrap"> <colWrap class="" title="重点岗位人员身份">
<gMainTable <div class="zdgwWrap">
ref="gMainTable" <div class="line" v-for="item in zdgwList" :key="item.name">
:tableData="dataSource" <div class="icon">
:columns="columns" <img :src="item.icon" />
rowKey="id" </div>
:pagination="ipagination" <div class="name">
@pageSizeChange="handlePageSizeChange" {{ item.name }}
@currentPageChange="handleCurrentPageChange" </div>
> </div>
</gMainTable> </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> </div>
</div> </div>
</template> </template>
<script> <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 { export default {
mixins: [tableListMixins], components: {
colWrap,
barWrap,
barOne,
dPie,
pieWrap,
ballWrap,
sevenWrap,
stmWrap,
},
data() { data() {
return { 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", name: "矛盾纠纷",
label: "姓名", 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: { methods: {
gotoPage(val) { gotoPage() {
this.$router.push({ this.$router.push({
path: "/topic/inSecurity/indexDetail", path: "/topic/inSecurity/indexDetail",
query: {
cmy: val,
},
}); });
}, },
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="scss" scoped>
.inSecurityContent { @import "@/loveflow/assets/index.scss";
padding: 16px; .inSecurityDetail {
height: 100%; height: 100%;
box-sizing: border-box;
}
.inSecurityPanel {
padding: 16px; padding: 16px;
height: 100%;
overflow-y: hidden;
box-sizing: border-box; box-sizing: border-box;
background: url("~@/assets/images/topic/stbg.png") no-repeat center center; overflow: hidden;
background-size: 100% 100%; .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 { .qysfWrap {
height: calc(100% - 90px);
.inSecurityTable {
height: 100%; height: 100%;
overflow-y: scroll; display: flex;
&::-webkit-scrollbar { .qysfCol {
display: none; flex: 1;
}
} }
.inSecurityThead { .line {
margin-left: -10px; display: flex;
padding-left: 24px; align-items: center;
height: 46px; height: vw(50);
line-height: 36px; padding: vw(2) vw(6);
background: url("~@/assets/images/topic/sttop.png") no-repeat center margin-bottom: vw(6);
background: url("~@/assets/images/topic/strfsj.png") no-repeat center
center; center;
background-size: 100% 100%; background-size: 100% 100%;
font-weight: 500; .icon {
font-size: 16px; margin-right: 6px;
color: #edf4ff; width: vw(34);
height: vw(36);
img {
width: 100%;
} }
.inSecurityTbody { }
padding: 16px; .item {
margin-top: -10px; .name {
height: 344px; margin-bottom: 2px;
background: url("~@/assets/images/topic/stbtm.png") no-repeat center 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; center;
background-size: 100% 100%; background-size: 100% 100%;
overflow-y: scroll; .screenMTop {
&::-webkit-scrollbar { display: flex;
display: none; 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 { .screenMMid {
opacity: 0.8; position: absolute;
cursor: pointer; 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 { .line {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
height: vw(48);
padding: 0 12px;
.item { .item {
flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 16px; .icon {
.label { display: flex;
width: 70px; justify-content: center;
margin-right: 4px;
width: vw(18);
height: vw(18);
font-size: 14px; 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 { .value {
flex: 1; font-weight: 400;
font-size: 14px; 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: #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; display: flex;
.zaCard { align-items: center;
padding: 6px 10px; height: 30px;
margin-right: 12px; background: url("~@/assets/images/topic/fsT.png") no-repeat center
margin-bottom: 4px; center;
background: url("~@/assets/images/topic/stmd.png") no-repeat background-size: 100% 100%;
.xfsjIcon {
width: 34px;
height: 36px;
background: url("~@/assets/images/topic/fsIcon.png") no-repeat
center center; center center;
background-size: 100% 100%; background-size: 100% 100%;
}
.xfsjTitle {
font-size: 14px; font-size: 14px;
color: #b5ffe4; color: #d9e7ff;
}
} }
.glCard { .xfsjBody {
padding: 6px 10px; flex: 1;
margin-right: 12px; .line {
margin-bottom: 4px; display: flex;
background: url("~@/assets/images/topic/stgl.png") no-repeat 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; center center;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 14px; .icon {
color: #b5ebff; margin-right: vw(6);
width: vw(34);
height: vw(36);
img {
width: 100%;
} }
.ycCard { }
padding: 6px 10px; .item {
margin-right: 12px; .name {
margin-bottom: 4px; margin-bottom: 2px;
background: url("~@/assets/images/topic/styc.png") no-repeat font-weight: 400;
center center; 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%; background-size: 100% 100%;
font-size: 14px; .icon {
color: #e3deff; width: vw(35);
width: vw(34);
margin-right: vw(6);
} }
.name {
font-size: vw(16);
color: #ffffff;
} }
} }
} }
} }
.screenBRight {
flex: 1;
display: flex;
} }
} }
.screenTopRow {
/deep/.el-table { height: 54%;
display: none; padding-bottom: 14px;
}
.screenBtmRow {
height: 46%;
} }
} }
</style> </style>

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

@ -1,148 +1,105 @@
<template> <template>
<div class="inSecurityDetail"> <div class="inSecurityContent loveflow">
<div class="screenRow screenTopRow"> <div class="inSecurityPanel">
<div class="screenLeft mr18"> <div class="flexSpaceBetween">
<colWrap class="mb14" title="企业三防异常分析"> <div class="tableOperator"></div>
<div class="qysfWrap"> <div class="searchWrap">
<div class="qysfCol"> <el-form :inline="true" :model="queryParam" class="demo-form-inline">
<pie-wrap :chartObj="mllObj"></pie-wrap> <el-form-item label="企业类型">
</div> <el-select v-model="queryParam.region" placeholder="企业类型">
<div class="qysfCol"> <el-option label="类型一" value="shanghai"></el-option>
<pie-wrap :chartObj="mlmObj"></pie-wrap> <el-option label="类型二" value="beijing"></el-option>
</div> </el-select>
<div class="qysfCol"> </el-form-item>
<pie-wrap :chartObj="mlrObj"></pie-wrap> <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>
</div> </div>
</colWrap>
<colWrap class="" title="技防数据概览"> <div class="inSecurityTableWrap">
<el-row :gutter="16"> <div class="inSecurityTable">
<el-col :span="6" v-for="item in jssjList" :key="item.name"> <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="line">
<div class="icon"> <div class="item">
<img :src="item.icon" /> <div class="label">信用代码：</div>
<div class="value">{{ item.phone }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="name">{{ item.name }}</div> <div class="label">企业类型：</div>
<div class="value"> <div class="value">{{ item.qyT }}</div>
{{ item.value }}
</div> </div>
</div> </div>
<div class="line">
<div class="item">
<div class="label">注册地址：</div>
<div class="value">{{ item.address }}</div>
</div> </div>
</el-col>
</el-row>
</colWrap>
</div> </div>
<div class="screenMid mr18"> <div class="line">
<div class="screenMTop">{{ title }}</div> <div class="item">
<div class="screenMMid"> <div class="label">经营范围：</div>
<div class="midTotalWrap"> <div class="value">{{ item.address }}</div>
<stmWrap></stmWrap>
</div> </div>
</div> </div>
<div class="screenMBtm"> <div class="line mt20">
<div class="item">
<div class="label">内部治安：</div>
<div class="value">
<div <div
class="item" class="zaCard"
v-for="item in tmList" v-for="info in item.cardList"
:key="item.name" :key="info.name"
:style="{ backgroundImage: 'url(' + item.icon + ')' }"
> >
<div class="value">{{ item.value }}</div> {{ info.name }}({{ info.value || 0 }})
<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>
<div class="ycfxCol">
<ballWrap :chartObj="trrObj"></ballWrap>
</div> </div>
</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>
<div class="line mt20">
<div class="item"> <div class="item">
<div class="name">{{ item.name }}</div> <div class="label">内部管理：</div>
<div class="value">{{ item.value.toLocaleString() }}</div> <div class="value">
</div> <div
class="glCard"
v-for="info in item.cardList"
:key="info.name"
>
{{ info.name }}({{ info.value || 0 }})
</div> </div>
</div> </div>
</colWrap>
</div> </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>
<div class="line mt20">
<div class="item"> <div class="item">
<div class="name">{{ item.name }}</div> <div class="label">异常信息：</div>
<div class="value"> <div class="value">
{{ item.value.toLocaleString() }}<span>套</span> <div
</div> class="ycCard"
</div> v-for="info in item.cardList"
</div> :key="info.name"
</el-col> >
</el-row> {{ info.name }}({{ info.value || 0 }})
</div>
</div>
<div class="wfsjWrap">
<div class="xfsjHead">
<div class="xfsjIcon"></div>
<div class="xfsjTitle">反恐防爆</div>
</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>
<div class="item">
<div class="name">{{ item.name }}</div>
<div class="value">
{{ item.value.toLocaleString() }}<span>套</span>
</div> </div>
</div> </div>
</div> </div>
@ -150,654 +107,157 @@
</el-row> </el-row>
</div> </div>
</div> </div>
</colWrap>
<colWrap class="" title="重点岗位人员身份"> <div class="tableWrap">
<div class="zdgwWrap"> <gMainTable
<div class="line" v-for="item in zdgwList" :key="item.name"> ref="gMainTable"
<div class="icon"> :tableData="dataSource"
<img :src="item.icon" /> :columns="columns"
</div> rowKey="id"
<div class="name"> :pagination="ipagination"
{{ item.name }} @pageSizeChange="handlePageSizeChange"
</div> @currentPageChange="handleCurrentPageChange"
</div> >
</div> </gMainTable>
</colWrap>
</div>
<div class="screenBRight">
<colWrap class="mr18" title="案件信息">
<barWrap :chartObj="barOneObj"></barWrap>
</colWrap>
<colWrap class="" title="企业整改异常分析">
<dPie :chartObj="{}"></dPie>
</colWrap>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import colWrap from "../components/colWrap.vue"; import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
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 { export default {
components: { mixins: [tableListMixins],
colWrap,
barWrap,
barOne,
dPie,
pieWrap,
ballWrap,
sevenWrap,
stmWrap,
},
data() { data() {
return { return {
title: "", columns: [
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"),
},
{ {
name: "车辆闸道", prop: "name",
value: 32145, label: "姓名",
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"),
}, },
{ methods: {
name: "危险品使用人员", gotoPage(val) {
icon: require("@/assets/images/topic/wxps.png"), 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> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "@/loveflow/assets/index.scss"; .inSecurityContent {
.inSecurityDetail {
height: 100%;
padding: 16px; padding: 16px;
height: 100%;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; }
.screenRow { .inSecurityPanel {
display: flex; padding: 16px;
.screenLeft {
height: 100%; height: 100%;
flex: 1; overflow-y: hidden;
display: flex; box-sizing: border-box;
flex-direction: column; background: url("~@/assets/images/topic/stbg.png") no-repeat center center;
/* .el-row { background-size: 100% 100%;
margin-top: -10px;
padding-top: vw(6);
background-color: rgba(108, 151, 149, 0.2);
} */
.qysfWrap { .inSecurityTableWrap {
height: calc(100% - 90px);
.inSecurityTable {
height: 100%; height: 100%;
display: flex; overflow-y: scroll;
.qysfCol { &::-webkit-scrollbar {
flex: 1; display: none;
}
}
.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;
} }
.value { .inSecurityThead {
font-weight: 400; margin-left: -10px;
font-size: vw(18); padding-left: 24px;
color: #ffffff; height: 46px;
} line-height: 36px;
} background: url("~@/assets/images/topic/sttop.png") no-repeat center
}
}
.screenMid {
position: relative;
flex: 1;
background: url("~@/assets/images/topic/stmbg.png") no-repeat center
center; center;
background-size: 100% 100%; background-size: 100% 100%;
.screenMTop { font-weight: 500;
display: flex; font-size: 16px;
align-items: center; color: #edf4ff;
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;
} }
.screenMMid { .inSecurityTbody {
position: absolute; padding: 16px;
bottom: vw(50); margin-top: -10px;
width: 100%; height: 344px;
height: vw(300); background: url("~@/assets/images/topic/stbtm.png") no-repeat center
background: url("~@/assets/images/topic/stzp.png") no-repeat center
center; center;
background-size: 100% 100%; background-size: 100% 100%;
display: flex; overflow-y: scroll;
justify-content: center; &::-webkit-scrollbar {
.midTotalWrap { display: none;
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;
}
}
} }
&: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 { .line {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
height: vw(48);
padding: 0 12px;
.item { .item {
flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
.icon { margin-bottom: 16px;
display: flex; .label {
justify-content: center; width: 70px;
margin-right: 4px;
width: vw(18);
height: vw(18);
font-size: 14px; font-size: 14px;
font-weight: 600; color: #d0deee;
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;
} }
.value { .value {
font-weight: 400;
font-size: vw(18);
color: #f3fff9;
}
}
&:hover {
}
}
}
}
.screenBMid {
flex: 1; flex: 1;
font-size: 14px;
color: #ffffff;
display: flex; display: flex;
.wfsjWrap { .zaCard {
height: 50%; padding: 6px 10px;
display: flex; margin-right: 12px;
flex-direction: column; margin-bottom: 4px;
.xfsjHead { background: url("~@/assets/images/topic/stmd.png") no-repeat
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
center center; center center;
background-size: 100% 100%; background-size: 100% 100%;
}
.xfsjTitle {
font-size: 14px; font-size: 14px;
color: #d9e7ff; color: #b5ffe4;
}
} }
.xfsjBody { .glCard {
flex: 1; padding: 6px 10px;
.line { margin-right: 12px;
display: flex; margin-bottom: 4px;
align-items: center; background: url("~@/assets/images/topic/stgl.png") no-repeat
margin-top: vw(10);
height: vw(60);
padding: 0 vw(12);
background: url("~@/assets/images/topic/strfsj.png") no-repeat
center center; center center;
background-size: 100% 100%; background-size: 100% 100%;
.icon { font-size: 14px;
margin-right: vw(6); color: #b5ebff;
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;
}
}
}
}
}
} }
.zdgwWrap { .ycCard {
padding-bottom: 12px; padding: 6px 10px;
display: flex; margin-right: 12px;
flex-direction: column; margin-bottom: 4px;
justify-content: space-between; background: url("~@/assets/images/topic/styc.png") no-repeat
height: 100%; center center;
.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%; background-size: 100% 100%;
.icon { font-size: 14px;
width: vw(35); color: #e3deff;
width: vw(34);
margin-right: vw(6);
}
.name {
font-size: vw(16);
color: #ffffff;
} }
} }
} }
} }
.screenBRight {
flex: 1;
display: flex;
} }
} }
.screenTopRow {
height: 54%;
padding-bottom: 14px;
} }
.screenBtmRow {
height: 46%; /deep/.el-table {
display: none;
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save