pull/34/head
xuhaoyun 2 years ago
parent 6c1156aad3
commit 8b5fa41cd7

@ -19,7 +19,9 @@
"js-cookie": "^3.0.1",
"less": "3.9.0",
"less-loader": "7",
"swiper": "4.5.1",
"vue": "^2.6.11",
"vue-awesome-swiper": "3.1.3",
"vue-router": "3",
"vuex": "3"
},

@ -5,6 +5,10 @@
</template>
<style lang="less">
* {
box-sizing: border-box;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;

@ -137,3 +137,19 @@ export function topRanking(params) {
params
})
}
//预警处置
export function statistics(params) {
return request({
url: '/safety/index/alarm/statistics',
method: 'post',
params
})
}
//案事件
export function caseList(params) {
return request({
url: '/safety/index/case/list',
method: 'post',
params
})
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

@ -4,8 +4,8 @@ import vm from "../main";
import { getToken } from '@/utils/auth'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const request = axios.create({
baseURL: 'http://172.18.113.50:8080/zhapi',
//baseURL: `http://${window.location.host}/zhapi`,
//baseURL: 'http://172.18.113.50:8080/zhapi',
baseURL: `http://${window.location.host}/zhapi`,
timeout: 50000,
headers: { 'content-type': 'application/json' },
})

@ -209,6 +209,7 @@ export default {
methods: {
getList() {
if (this.activeName == 'first') {
this.formInline.plateNo = null
realTimePassageFlowFace({ pageSize: this.pageSize, pageNum: this.pageNum, ...this.formInline, companyId: this.companyID }).then(res => {
this.tableData = res.data
this.imgDetailList = res.data[0] || {}
@ -218,6 +219,9 @@ export default {
}
})
} else {
this.formInline.idcard = null
this.formInline.userName = null
realTimePassageFlowVehicle({ pageSize: this.pageSize, pageNum: this.pageNum, ...this.formInline, companyId: this.companyID }).then(res => {
this.vechileList = res.data
this.total = res.total

@ -0,0 +1,435 @@
<template>
<div class="asj">
<div class="title"><img src="../../assets/safetyIndex/装饰009991.png" alt="">案事件</div>
<div class="qyclBody">
<swiper :options="swiperOption1" class="swiper" ref="mySwiper1" v-if="caseTotalList.length">
<swiper-slide v-for="(item, index) of caseTotalList" :key="index" class="today">
<div class="todayChild" @click="showfangkeVisible(item)">
<div class="caseDetail">{{ item.caseName }}</div>
<div class="caseMsg">
<div>企业名称{{ item.caseAddress }}</div>
<div>时间{{ item.registerTime }}</div>
</div>
</div>
</swiper-slide>
</swiper>
</div>
<el-dialog title="案件详情" :visible.sync="fangkeVisible" class="picForm" v-if="anjianDetail">
<div class="jibenx">
<!-- <div class="jibenhang">
<div class="jibenhangTitle">企业名称</div>
<div class="jibenhangleftText">
<span v-html="anjianDetail.caseName"></span>
</div>
<div class="jibenhangTitle">企业类型</div>
<div class="jibenhangrightText">
<div>{{ anjianDetail.caseName }}</div>
</div>
</div> -->
<div class="jibenhang">
<div class="jibenhangTitle">案件编号</div>
<div class="jibenhangleftText">
<span v-html="anjianDetail.caseNo"></span>
</div>
<div class="jibenhangTitle">案件名称</div>
<div class="jibenhangrightText">
<div>{{ anjianDetail.caseName }}</div>
</div>
</div>
<div class="jibenhang">
<div class="jibenhangTitle">案件分类</div>
<div class="jibenhangleftText">
<span v-html="anjianDetail.caseType"></span>
</div>
<div class="jibenhangTitle">案件类别</div>
<div class="jibenhangrightText">
<div>{{ anjianDetail.caseCategory }}</div>
</div>
</div>
<div class="jibenhang">
<div class="jibenhangTitle">发案区划</div>
<div class="jibenhangleftText">
<span v-html="anjianDetail.policeDistrictCode"></span>
</div>
<div class="jibenhangTitle">派出所</div>
<div class="jibenhangrightText">
<div>{{ anjianDetail.policeDistrictCn }}</div>
</div>
</div>
<div class="jibenhang">
<div class="jibenhangTitle">破案情况</div>
<div class="jibenhangleftText">
<span v-html="anjianDetail.caseState"></span>
</div>
<div class="jibenhangTitle">发案地点</div>
<div class="jibenhangrightText">
<div>{{ anjianDetail.caseAddress }}</div>
</div>
</div>
<div class="jibenhang1 jibenhang">
<div class="jibenhangTitle">简要案情</div>
<div class="jibenhangText">
<span>{{ anjianDetail.caseDetail }}</span>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import "swiper/dist/css/swiper.min.css";
import { swiper, swiperSlide } from "vue-awesome-swiper/dist/vue-awesome-swiper.js";
import { caseList } from '@/api/safetyIndex'
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
staffStatisticsList: [],
staffDetailList: [],
listTotal: {},
fangkeVisible: false,
fangkepageSize: 10,
fangkepageNum: 1,
fangketotal: 0,
fangkeList: [],
intotal: 0,
outtotal: 0,
ziyouTotal: 0,
zulintotal: 0,
useType: 0,
caseTotalList: [],
anjianDetail: {},
swiperOption1: {
direction: "vertical",
// cubeEffect:true,
grabCursor: true,
// centeredSlides: true,
slidesPerView: 'auto',
loop: true, // true looploopslideslide()Swiper
loopedSlides: 2, //loop使slidesPerview:'auto'使loop(slide2)
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
//
speed: 1000,
}
}
},
created() {
this.getList()
},
methods: {
getList() {
caseList().then(res => {
this.caseTotalList = res.data
})
},
tableRowStyle({ rowIndex }) {
if ((rowIndex + 1) % 2 == 1) {
return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0' }
} else {
return { 'background': 'rgba(61, 85, 102, 0.16)', 'border': '0', 'color': '#fff' }
}
},
tableHeaderColor() {
return { 'background': 'linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)' }
// return { 'background': 'url("~@/assets/archives/9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
},
tableHeaderCellColor() {
return { 'background': 'rgba(0,0,0,0)', 'border': '0', 'color': '#fff' }
},
fangkeSizeChange(val) {
this.fangkepageNum = 1;
this.fangkepageSize = val;
this.showfangkeVisible(this.useType)
},
fangkeCurrentChange(val) {
this.fangkepageNum = val;
this.showfangkeVisible(this.useType)
},
showfangkeVisible(val) {
this.anjianDetail = val
this.fangkeVisible = true
}
},
}
</script>
<style lang="less" scoped>
.asj {
height: 186px;
width: 100%;
margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat;
background-size: 100% 100%;
.title {
width: 100%;
height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat;
background-size: 100% 100%;
font-size: 16px;
color: #D9E7FF;
letter-spacing: 1px;
text-align: center;
font-weight: 500;
display: flex;
align-items: center;
img {
width: 16px;
height: 16px;
margin: 0 12px;
}
}
.qyclBody {
width: 100%;
height: calc(100% - 33px);
padding: 0 20px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-content: space-around;
flex-wrap: wrap;
overflow: hidden;
.swiper {
width: 100%;
height: 100%;
}
.today {
width: 100%;
height: 50%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0;
box-sizing: border-box;
.todayChild {
width: 100%;
height: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
box-sizing: border-box;
position: relative;
padding: 10px 8px;
background: rgba(0, 0, 0, 0);
z-index: 1;
.caseDetail {
width: 100%;
height: 60%;
font-size: 16px;
color: #FFE6D9;
letter-spacing: 0;
line-height: 16px;
text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
font-weight: 400;
// display: flex;
// align-items: center;
overflow: hidden;
white-space: nowrap; //
text-overflow: ellipsis; //...
}
.caseMsg {
width: 100%;
height: 40%;
font-size: 14px;
color: #D0DEEE;
letter-spacing: 0;
line-height: 16px;
font-weight: 400;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.todayChild::after {
content: "";
background: url('~@/assets/safetyIndex/0091.png') no-repeat;
background-size: 100% 100%;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
}
}
}
.picForm {
/deep/ .el-dialog {
background-color: rgba(0, 0, 0, 0);
background: url('~@/assets/companyFile/背景2.png') no-repeat;
background-size: 100% 100%;
width: 811px;
height: 420px;
position: relative;
.el-dialog__title {
font-size: 16px;
color: #EBFFF4;
letter-spacing: 2px;
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
font-weight: 400;
}
.el-dialog__body {
box-sizing: border-box;
height: 360px;
.jibenx {
width: 100%;
height: 100%;
border: 1px solid rgba(91, 116, 140, 0.6);
.jibenhang {
height: 19%;
width: 100%;
display: flex;
border-bottom: 1px solid rgba(91, 116, 140, 0.6);
.jibenhangTitle {
box-sizing: border-box;
padding-left: 10px;
width: 15%;
height: 100%;
background: rgba(108, 128, 151, 0.20);
line-height: 48px;
border-right: 1px solid rgba(91, 116, 140, 0.6);
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 0;
font-weight: 400;
}
.jibenhangleftText {
width: 30%;
box-sizing: border-box;
padding-left: 10px;
height: 100%;
border-right: 1px solid rgba(91, 116, 140, 0.6);
line-height: 48px;
font-size: 12px;
color: #FFFFFF;
letter-spacing: 0;
font-weight: 400;
}
.jibenhangrightText {
box-sizing: border-box;
padding-left: 10px;
width: 40%;
height: 100%;
line-height: 48px;
font-size: 12px;
color: #FFFFFF;
letter-spacing: 0;
font-weight: 400;
overflow: hidden;
}
.jibenhangText {
padding-left: 10px;
width: 85%;
height: 100%;
display: flex;
align-items: center;
font-size: 12px;
color: #FFFFFF;
}
}
.jibenhang1 {
height: 24%;
width: 100%;
border-bottom: 0;
box-sizing: border-box;
.jibenhangTitle {
padding-left: 12px;
width: 15%;
height: 100%;
background: rgba(108, 128, 151, 0.20);
line-height: 57px;
border-right: 1px solid rgba(91, 116, 140, 0.6);
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 0;
font-weight: 400;
}
.jibenhangText {
padding-left: 10px;
width: 84.8%;
height: 100%;
display: flex;
align-items: center;
font-size: 12px;
color: #FFFFFF;
box-sizing: border-box;
}
}
}
}
}
}
/deep/.el-input__inner {
// background: url('~@/assets/companyFile/2121.png') no-repeat;
background: url('~@/assets/companyFile/矩形备份 18.png') no-repeat;
background-size: 100% 100%;
border: 1px solid rgba(40, 132, 126, 1);
color: rgba(234, 246, 255, 0.7);
;
.el-range-separator {
color: #ccc;
}
.el-range-input {
background: rgba(0, 0, 0, 0);
color: #ccc;
}
}
</style>

@ -9,6 +9,11 @@
<toubu @tabChange="tabChange"></toubu>
<paiming :scoreType="scoreType"></paiming>
</div>
<div class="rightBox">
<yujing></yujing>
<anjian></anjian>
<!-- <shuju></shuju> -->
</div>
</div>
</template>
@ -18,7 +23,9 @@ import cheliang from './cheliang.vue'
import wupin from './wupin.vue'
import toubu from './toubu.vue'
import paiming from './paiming.vue'
import yujing from './yujing.vue'
import anjian from './anjian.vue'
// import shuju from './shuju.vue'
export default {
components: {
@ -26,7 +33,10 @@ export default {
cheliang,
wupin,
toubu,
paiming
paiming,
yujing,
anjian,
// shuju
},
data() {
return {
@ -82,5 +92,13 @@ export default {
}
.rightBox {
width: 440px;
height: 100%;
margin-left: 20px;
box-sizing: border-box;
}
}
</style>

@ -0,0 +1,328 @@
<template>
<div class="sjjr">
<div class="title"><img src="../../assets/safetyIndex/装饰009991.png" alt="">数据接入</div>
<div class="qyclBody">
<div class="zonglei">
<div class="zongleiTitle">接入总类</div>
<div class="zongleiNum"><span>1234124</span> </div>
</div>
<div class="leixingBox">
<div class="leixingItem">
<div class="green">众智平台</div>
<div class="greenText">1,1455</div>
</div>
<div class="leixingItem">
<div class="blue">智能防控平台</div>
<div class="blueText">3559</div>
</div>
<div class="leixingItem">
<el-tooltip content="危化品道路运输监管平台" placement="top-start">
<div class="yellow">危化品道路运...</div>
</el-tooltip>
<div class="yellowText">6707</div>
</div>
<div class="leixingItem">
<div class="red">IRS</div>
<div class="redText">8428</div>
</div>
<div class="leixingItem">
<div class="green">警务百度</div>
<div class="greenText">3,6059</div>
</div>
<div class="leixingItem">
<div class="blue">派出所工作平台</div>
<div class="blueText">3,1875</div>
</div>
<div class="leixingItem">
<div class="yellow">110接处警平台</div>
<div class="yellowText">2,0005</div>
</div>
<div class="leixingItem">
<div class="red">...</div>
<div class="redText">1,2732</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { indexGoods, indexGoodsDetail } from '@/api/safetyIndex'
export default {
data() {
return {
staffStatisticsList: [],
staffDetailList: [],
listTotal: {},
fangkeVisible: false,
fangkepageSize: 10,
fangkepageNum: 1,
fangketotal: 0,
fangkeList: [],
wupinList: [],
intotal: 0,
outtotal: 0,
ziyouTotal: 0,
zulintotal: 0,
goodsType: 0,
fsyData: {},
yzdData: {},
yzbData: {},
mbData: {},
}
},
created() {
this.getindexGoods()
},
methods: {
tableRowStyle({ rowIndex }) {
if ((rowIndex + 1) % 2 == 1) {
return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0' }
} else {
return { 'background': 'rgba(61, 85, 102, 0.16)', 'border': '0', 'color': '#fff' }
}
},
tableHeaderColor() {
return { 'background': 'linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)' }
// return { 'background': 'url("~@/assets/archives/9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
},
tableHeaderCellColor() {
return { 'background': 'rgba(0,0,0,0)', 'border': '0', 'color': '#fff' }
},
fangkeSizeChange(val) {
this.fangkepageNum = 1;
this.fangkepageSize = val;
this.showfangkeVisible(this.goodsType)
},
fangkeCurrentChange(val) {
this.fangkepageNum = val;
this.showfangkeVisible(this.goodsType)
},
getindexGoods() {
indexGoods().then(res => {
this.fangkeList = res.data
this.fangkeList.forEach(item => {
if (item.goodsType == 1) {
this.fsyData = item
} else if (item.goodsType == 2) {
this.yzdData = item
} else if (item.goodsType == 3) {
this.yzbData = item
} else if (item.goodsType == 4) {
this.mbData = item
}
})
console.log(this.fangkeList, 'this.fangkeList');
})
},
showfangkeVisible(val) {
this.goodsType = val
indexGoodsDetail({ pageSize: this.fangkepageSize, pageNum: this.fangkepageNum, goodsType: this.goodsType }).then(res => {
this.wupinList = res.data
this.fangketotal = res.total
this.fangkeVisible = true
})
}
},
}
</script>
<style lang="less" scoped>
.sjjr {
height: 305px;
width: 100%;
margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat;
background-size: 100% 100%;
.title {
width: 100%;
height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat;
background-size: 100% 100%;
font-size: 16px;
color: #D9E7FF;
letter-spacing: 1px;
text-align: center;
font-weight: 500;
display: flex;
align-items: center;
img {
width: 16px;
height: 16px;
margin: 0 12px;
}
}
.qyclBody {
width: 100%;
height: calc(100% - 33px);
padding: 15px 30px;
box-sizing: border-box;
.zonglei {
box-sizing: border-box;
width: 380px;
height: 42px;
background: url('~@/assets/safetyIndex/编组 38备份21.png') no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
margin-bottom: 15px;
.zongleiTitle {
font-size: 16px;
color: #D0DEEE;
letter-spacing: 0;
text-align: center;
line-height: 16px;
font-weight: 400;
}
.zongleiNum {
font-size: 12px;
color: #EBF9FF;
letter-spacing: 1.5px;
font-weight: 400;
span {
font-size: 20px;
color: #EBFFF8;
letter-spacing: 2.5px;
line-height: 37px;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
font-weight: 700
}
}
}
.leixingBox {
width: 100%;
height: calc(100% - 57px);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.leixingItem {
height: 50%;
width: calc(25% - 10px);
.green {
width: 67px;
height: 67px;
background: url('~@/assets/safetyIndex/绿色.png') no-repeat;
background-size: 100% 100%;
margin: 0 auto;
margin-bottom: 10px;
padding: 17px;
line-height: 16.5px;
font-size: 14px;
color: rgba(235, 249, 255, 0.8);
letter-spacing: 1.75px;
font-weight: 700;
text-align: center;
}
.greenText {
width: 100%;
height: 15px;
text-align: center;
font-size: 12px;
color: #40A996;
letter-spacing: 1.5px;
font-weight: 600;
}
.blue {
width: 67px;
height: 67px;
background: url('~@/assets/safetyIndex/蓝色.png') no-repeat;
background-size: 100% 100%;
margin: 0 auto;
margin-bottom: 10px;
padding: 18px 5px;
line-height: 16.5px;
font-size: 12px;
color: rgba(235, 249, 255, 0.8);
letter-spacing: 1.75px;
font-weight: 700;
text-align: center;
}
.blueText {
width: 100%;
height: 15px;
text-align: center;
font-size: 12px;
color: #5F99E6;
letter-spacing: 1.5px;
font-weight: 600;
}
.yellow {
width: 67px;
height: 67px;
background: url('~@/assets/safetyIndex/黄色.png') no-repeat;
background-size: 100% 100%;
margin: 0 auto;
margin-bottom: 10px;
padding: 18px 5px;
line-height: 16.5px;
font-size: 10px;
color: rgba(235, 249, 255, 0.8);
letter-spacing: 1.75px;
font-weight: 700;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.yellowText {
width: 100%;
height: 15px;
text-align: center;
font-size: 12px;
color: #E6B25F;
letter-spacing: 1.5px;
font-weight: 600;
}
.red {
width: 67px;
height: 67px;
background: url('~@/assets/safetyIndex/红色.png') no-repeat;
background-size: 100% 100%;
margin: 0 auto;
margin-bottom: 10px;
padding: 17px;
line-height: 33px;
font-size: 20px;
color: rgba(235, 249, 255, 0.8);
letter-spacing: 1.75px;
font-weight: 700;
text-align: center;
}
.redText {
width: 100%;
height: 15px;
text-align: center;
font-size: 11px;
color: #FF7272;
letter-spacing: 1.5px;
font-weight: 600;
}
}
}
}
}
</style>

@ -99,7 +99,7 @@
企业名称&nbsp;&nbsp;<span>{{ topSortData[2].companyName }}</span>
</div>
<div class="mingcheng">
企业地址&nbsp;&nbsp;<el-tooltip :content="topSortData[1].companyAddress" placement="top-start"><span>{{
企业地址&nbsp;&nbsp;<el-tooltip :content="topSortData[2].companyAddress" placement="top-start"><span>{{
topSortData[2].companyAddress }}</span></el-tooltip>
</div>
</div>

@ -259,7 +259,7 @@ export default {
cursor: pointer;
.todayChild {
width: 45%;
width: 52.5%;
height: 100%;
display: flex;
align-items: center;
@ -328,23 +328,25 @@ export default {
}
.buySail {
width: 55%;
width: 47.5%;
height: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
justify-content: space-evenly;
flex-wrap: wrap;
.sailChild {
width: 40%;
height: 100%;
width: 100%;
height: 40%;
.buymsg {
margin-left: 10px;
width: 108px;
height: 42px;
height: 21px;
box-sizing: border-box;
display: flex;
.msgText {
height: 50%;
@ -362,8 +364,8 @@ export default {
}
.msgNum {
height: 50%;
width: 100%;
height: 100%;
width: 50%;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 1.25px;
@ -392,12 +394,14 @@ export default {
margin-left: 10px;
width: 108px;
height: 42px;
height: 21px;
box-sizing: border-box;
display: flex;
.msgText {
height: 50%;
width: 100%;
height: 100%;
width: 50%;
font-size: 14px;
color: #D0DEEE;
letter-spacing: 1px;
@ -411,8 +415,8 @@ export default {
}
.msgNum {
height: 50%;
width: 100%;
height: 100%;
width: 50%;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 1.25px;

@ -0,0 +1,387 @@
<template>
<div class="yjcz">
<div class="title"><img src="../../assets/safetyIndex/装饰009991.png" alt="">企业员工</div>
<div class="yujing">
<div class="drbj">
<div>当日报警</div>
<span>{{ statisticsList.todayAlarmSum }}</span>
</div>
<div class="zyj">
<div>总预警</div>
<span>{{ statisticsList.alarmSum }}</span>
</div>
</div>
<div class="chuzhi">
<div class="chuzhiItem">
<div class="blue"></div>
<div class="chuhzhi">
当日处置
<div>
{{ statisticsList.todayDealSum }}
</div>
</div>
</div>
<div class="chuzhiItem">
<div class="yellow"></div>
<div class="chuhzhi">
处置中
<div>
{{ statisticsList.dealing }}
</div>
</div>
</div>
<div class="chuzhiItem">
<div class="green"></div>
<div class="chuhzhi">
处置完成
<div>
{{ statisticsList.dealCompleted }}
</div>
</div>
</div>
</div>
<div class="tuisong">
<div class="todayChild">
<div class="iconBox"><img src="../../assets/safetyIndex/推送政务数量21.png" alt=""></div>
<div class="iconmsg">
<div class="msgText">推送政务数量</div>
<div class="msgNum"><span>{{ statisticsList.pushGovernment }}/{{
statisticsList.pushGovernmentSum }}</span></div>
</div>
</div>
<div class="tsCompany">
<div class="iconBox"><img src="../../assets/safetyIndex/推送企业数量21.png" alt=""></div>
<div class="iconmsg">
<div class="msgText">推送企业数量</div>
<div class="msgNum"><span>{{ statisticsList.pushCompany }}/{{ statisticsList.pushCompanySum }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { statistics } from '@/api/safetyIndex'
export default {
data() {
return {
statisticsList: {}
}
},
created() {
this.getList()
},
methods: {
getList() {
statistics().then(res => {
this.statisticsList = res.data
})
}
},
}
</script>
<style lang="less" scoped>
.yjcz {
height: 290px;
width: 100%;
margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat;
background-size: 100% 100%;
.title {
width: 100%;
height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat;
background-size: 100% 100%;
font-size: 16px;
color: #D9E7FF;
letter-spacing: 1px;
text-align: center;
font-weight: 500;
display: flex;
align-items: center;
img {
width: 16px;
height: 16px;
margin: 0 12px;
}
}
.yujing {
height: 42px;
width: 100%;
margin-top: 10px;
padding: 0 20px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
.drbj {
width: 190px;
height: 100%;
background: url('~@/assets/safetyIndex/背景(当日报警).png') no-repeat;
background-size: 100% 100%;
font-size: 16px;
color: #FFE3E3;
letter-spacing: 0;
text-align: center;
line-height: 16px;
font-weight: 400;
display: flex;
justify-content: space-around;
align-items: center;
span {
font-size: 20px;
color: #FFE3E3;
letter-spacing: 1px;
line-height: 22px;
text-shadow: 0 0 9px rgba(255, 87, 87, 0.88);
font-weight: 700;
}
}
.zyj {
width: 190px;
height: 100%;
background: url('~@/assets/safetyIndex/总预警21.png') no-repeat;
background-size: 100% 100%;
font-size: 16px;
color: #FFE3E3;
letter-spacing: 0;
text-align: center;
line-height: 16px;
font-weight: 400;
display: flex;
justify-content: space-around;
align-items: center;
span {
font-size: 20px;
color: #FFFBE3;
letter-spacing: 1px;
line-height: 22px;
text-shadow: 0 0 9px rgba(255, 216, 87, 0.88);
font-weight: 700;
}
}
}
.chuzhi {
width: 100%;
height: 90px;
margin-top: 20px;
padding: 0 20px;
display: flex;
justify-content: space-between;
.chuzhiItem {
width: calc(33% - 11px);
height: 100%;
display: flex;
.blue {
width: 3px;
height: 100%;
opacity: 0.6;
background: #66C3FF;
}
.yellow {
width: 3px;
height: 100%;
opacity: 0.6;
background: #FEF699;
}
.green {
width: 3px;
height: 100%;
opacity: 0.6;
background: #19F7C3;
}
.chuhzhi {
cursor: pointer;
height: 100%;
width: calc(100% - 3px);
padding-left: 14px;
padding-top: 19px;
background: rgba(108, 151, 149, 0.16);
border: 1px solid rgba(73, 84, 97, 0.8);
font-size: 16px;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 0;
line-height: 16px;
font-weight: 400;
div {
margin-top: 13px;
font-size: 20px;
color: #FFFFFF;
letter-spacing: 1px;
line-height: 22px;
font-weight: 700;
}
}
}
}
.tuisong {
width: calc(100% - 40px);
height: 63px;
margin: 20px 20px 0;
display: flex;
box-sizing: border-box;
justify-content: space-around;
background: url('~@/assets/safetyIndex/99108881.png') no-repeat;
background-size: 100% 100%;
display: flex;
.todayChild {
width: 50%;
height: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
border-right: 1px solid rgba(114, 155, 137, 0.48);
.iconBox {
width: 48px;
height: 48px;
margin-left: 20px;
box-sizing: border-box;
img {
width: 48px;
height: 48px;
}
}
.iconmsg {
margin-left: 10px;
width: 108px;
height: 42px;
box-sizing: border-box;
.msgText {
height: 50%;
width: 100%;
font-size: 14px;
color: #D0DEEE;
letter-spacing: 1px;
vertical-align: middle;
box-sizing: border-box;
font-weight: 400;
line-height: 22px;
padding-left: 10px;
font-size: 14px;
}
.msgNum {
height: 50%;
width: 100%;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 1.25px;
font-weight: 600;
line-height: 22px;
padding-left: 10px;
box-sizing: border-box;
span {
font-size: 19px;
color: #FFFFFF;
letter-spacing: 2.08px;
font-weight: 700;
line-height: 22px;
}
}
}
}
.tsCompany {
width: 50%;
height: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
border-right: 1px solid rgba(114, 155, 137, 0.48);
.iconBox {
width: 48px;
height: 48px;
margin-left: 20px;
box-sizing: border-box;
img {
width: 48px;
height: 48px;
}
}
.iconmsg {
margin-left: 10px;
width: 108px;
height: 42px;
box-sizing: border-box;
.msgText {
height: 50%;
width: 100%;
font-size: 14px;
color: #D0DEEE;
letter-spacing: 1px;
vertical-align: middle;
box-sizing: border-box;
font-weight: 400;
line-height: 22px;
padding-left: 10px;
font-size: 14px;
}
.msgNum {
height: 50%;
width: 100%;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 1.25px;
font-weight: 600;
line-height: 22px;
padding-left: 10px;
box-sizing: border-box;
span {
font-size: 19px;
color: #FFFFFF;
letter-spacing: 2.08px;
font-weight: 700;
line-height: 22px;
}
}
}
}
}
}
</style>

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save