|
|
|
|
@ -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>
|
|
|
|
|
|
loveflow
7 months ago