@ -5,73 +5,134 @@
< div class = "toprightIcon" > < / div >
< div class = "topHead" >
< div class = "topHeadItem" @click ="goMore('平安')" >
平安 & nbsp ; & nbsp ; < span class = "blue" > { { statisticsAlarmData . safeSum } } < / span > < span
class = "jia" > & nbsp ; 家 < / span >
平安 & nbsp ; & nbsp ; < span class = "blue" > { {
statisticsAlarmData . safeSum
} } < / s p a n
> < span class = "jia" > & nbsp ; 家 < / span >
< / div >
< div class = "shu" > < / div >
< div class = "topHeadItem" @click ="goMore('石化总数')" >
石化企业总数 & nbsp ; & nbsp ; < span class = "yellow" > { { statisticsAlarmData . companySum } } < / span > < span
class = "jia" > & nbsp ; 家 < / span >
石化企业总数 & nbsp ; & nbsp ; < span class = "yellow" > { {
statisticsAlarmData . companySum
} } < / s p a n
> < span class = "jia" > & nbsp ; 家 < / span >
< / div >
< div class = "shu" > < / div >
< div class = "topHeadItem" @click ="goMore('预警')" >
预警 & nbsp ; & nbsp ; < span class = "red" > { { statisticsAlarmData . alarmSum } } < / span > < span
class = "jia" > & nbsp ; 家 < / span >
预警 & nbsp ; & nbsp ; < span class = "red" > { {
statisticsAlarmData . alarmSum
} } < / s p a n
> < span class = "jia" > & nbsp ; 家 < / span >
< / div >
< / div >
< div class = "topBottom" >
< div class = "topBottomItem" @click ="goMore('剧毒')" >
< img src = "../../assets/safetyIndex/涉危企业.png" alt = "" >
< img src = "../../assets/safetyIndex/涉危企业.png" alt = "" / >
< div class = "itemBox" >
< div class = "qiye" > { { statisticsDangerData [ 0 ] ? statisticsDangerData [ 0 ] . companyTypeName : '' } } < / div >
< div class = "qiyeshu" > < span class = "qiyenum" > { {
statisticsDangerData [ 0 ] ? statisticsDangerData [ 0 ] . companyTypeSum : 0 } } < / span >
& nbsp ; 家 < / div >
< div class = "qiye" >
{ {
statisticsDangerData [ 0 ]
? statisticsDangerData [ 0 ] . companyTypeName
: ""
} }
< / div >
< div class = "qiyeshu" >
< span class = "qiyenum" > { {
statisticsDangerData [ 0 ]
? statisticsDangerData [ 0 ] . companyTypeSum
: 0
} } < / span >
& nbsp ; 家
< / div >
< / div >
< / div >
< div class = "topBottomItem" @click ="goMore('易制爆')" >
< img src = "../../assets/safetyIndex/易制爆企业2.png" alt = "" >
< img src = "../../assets/safetyIndex/易制爆企业2.png" alt = "" / >
< div class = "itemBox" >
< div class = "qiye" > { { statisticsDangerData [ 2 ] ? statisticsDangerData [ 2 ] . companyTypeName : '' } } < / div >
< div class = "qiyeshu" > < span class = "qiyenum" > { {
statisticsDangerData [ 1 ] ? statisticsDangerData [ 1 ] . companyTypeSum : 0 } } < / span >
& nbsp ; 家 < / div >
< div class = "qiye" >
{ {
statisticsDangerData [ 2 ]
? statisticsDangerData [ 2 ] . companyTypeName
: ""
} }
< / div >
< div class = "qiyeshu" >
< span class = "qiyenum" > { {
statisticsDangerData [ 1 ]
? statisticsDangerData [ 1 ] . companyTypeSum
: 0
} } < / span >
& nbsp ; 家
< / div >
< / div >
< / div >
< div class = "topBottomItem" @click ="goMore('易制毒')" >
< img src = "../../assets/safetyIndex/易制毒2.png" alt = "" >
< img src = "../../assets/safetyIndex/易制毒2.png" alt = "" / >
< div class = "itemBox" >
< div class = "qiye" > { { statisticsDangerData [ 1 ] ? statisticsDangerData [ 1 ] . companyTypeName : '' } } < / div >
< div class = "qiyeshu" > < span class = "qiyenum" > { {
statisticsDangerData [ 2 ] ? statisticsDangerData [ 2 ] . companyTypeSum : 0 } } < / span >
& nbsp ; 家 < / div >
< div class = "qiye" >
{ {
statisticsDangerData [ 1 ]
? statisticsDangerData [ 1 ] . companyTypeName
: ""
} }
< / div >
< div class = "qiyeshu" >
< span class = "qiyenum" > { {
statisticsDangerData [ 2 ]
? statisticsDangerData [ 2 ] . companyTypeSum
: 0
} } < / span >
& nbsp ; 家
< / div >
< / div >
< / div >
< div class = "topBottomItem" @click ="goMore('放射源')" >
< img src = "../../assets/safetyIndex/放射源2.png" alt = "" >
< img src = "../../assets/safetyIndex/放射源2.png" alt = "" / >
< div class = "itemBox" >
< div class = "qiye" > { { statisticsDangerData [ 3 ] ? statisticsDangerData [ 3 ] . companyTypeName : '' } } < / div >
< div class = "qiyeshu" > < span class = "qiyenum" > { {
statisticsDangerData [ 3 ] ? statisticsDangerData [ 3 ] . companyTypeSum : 0 } } < / span >
& nbsp ; 家 < / div >
< div class = "qiye" >
{ {
statisticsDangerData [ 3 ]
? statisticsDangerData [ 3 ] . companyTypeName
: ""
} }
< / div >
< div class = "qiyeshu" >
< span class = "qiyenum" > { {
statisticsDangerData [ 3 ]
? statisticsDangerData [ 3 ] . companyTypeSum
: 0
} } < / span >
& nbsp ; 家
< / div >
< / div >
< / div >
< / div >
< / div >
< el -select v-model ="Selectvalue" placeholder="请选择" class="topSelect" v-if="Selectvalue == '排名'" >
< el -option label = "排名" value = "排名" >
< / e l - o p t i o n >
< el -option label = "地图" value = "地图" >
< / e l - o p t i o n >
< el -select
v - model = "Selectvalue"
placeholder = "请选择"
class = "topSelect"
v - if = "Selectvalue == '排名'"
>
< el -option label = "排名" value = "排名" > < / e l - o p t i o n >
< el -option label = "地图" value = "地图" > < / e l - o p t i o n >
< / e l - s e l e c t >
< el -select v -model = " Selectvalue " placeholder = "请选择" class = "topSelect1" v-else >
< el -option label = "排名" value = "排名" >
< / e l - o p t i o n >
< el -option label = "地图" value = "地图" >
< / e l - o p t i o n >
< el -select
v - model = "Selectvalue"
placeholder = "请选择"
class = "topSelect1"
v - else
>
< el -option label = "排名" value = "排名" > < / e l - o p t i o n >
< el -option label = "地图" value = "地图" > < / e l - o p t i o n >
< / e l - s e l e c t >
< div class = "middleBox" v-if ="Selectvalue == '排名'" >
< el -tabs type = "border-card" class = "topTabs" v-model ="topTabsName" @tab-click="gettopSort()" >
< el -tabs
type = "border-card"
class = "topTabs"
v - model = "topTabsName"
@ tab - click = "gettopSort()"
>
< el -tab -pane label = "月度" name = "month" > < / e l - t a b - p a n e >
< el -tab -pane label = "季度" name = "season" > < / e l - t a b - p a n e >
< el -tab -pane label = "年度" name = "year" > < / e l - t a b - p a n e >
@ -79,56 +140,65 @@
< div class = "second" v-if ="topSortData.length > 1" @click="toCanban(1)" >
< div class = "mingci" >
< img src = "../../assets/safetyIndex/第二名.png" alt = "" > & nbsp ;
< img src = "../../assets/safetyIndex/第二名.png" alt = "" / > & nbsp ;
总得分 ： & nbsp ; < span > { { topSortData [ 1 ] . score } } < / span >
< / div >
< div class = "tupian" >
< img :src ="topSortData[1].picUrl" alt = "" >
< img :src ="topSortData[1].picUrl" alt = "" / >
< / div >
< div class = "companyMsg" >
< div class = "mingcheng" >
企业名称 & nbsp ; & nbsp ; < span > { { topSortData [ 1 ] . companyName } } < / span >
< / div >
< div class = "mingcheng" >
企业地址 & nbsp ; & nbsp ; < el -tooltip :content ="topSortData[1].companyAddress" placement = "top-start" > < span > { {
topSortData [ 1 ] . companyAddress } } < / span > < / e l - t o o l t i p >
企业地址 & nbsp ; & nbsp ;
< el -tooltip
: content = "topSortData[1].companyAddress"
placement = "top-start"
> < span > { { topSortData [ 1 ] . companyAddress } } < / span > < / e l - t o o l t i p
>
< / div >
< / div >
< / div >
< div class = "third" v-if ="topSortData.length > 2" @click="toCanban(0)" >
< div class = "mingci" >
< img src = "../../assets/safetyIndex/第三名.png" alt = "" > & nbsp ;
< img src = "../../assets/safetyIndex/第三名.png" alt = "" / > & nbsp ;
总得分 ： & nbsp ; < span > { { topSortData [ 2 ] . score } } < / span >
< / div >
< div class = "tupian" >
< img :src ="topSortData[2].picUrl" alt = "" >
< img :src ="topSortData[2].picUrl" alt = "" / >
< / div >
< div class = "companyMsg" >
< div class = "mingcheng" >
企业名称 & nbsp ; & nbsp ; < span > { { topSortData [ 2 ] . companyName } } < / span >
< / div >
< div class = "mingcheng" >
企业地址 & nbsp ; & nbsp ; < el -tooltip :content ="topSortData[2].companyAddress" placement = "top-start" > < span > { {
topSortData [ 2 ] . companyAddress } } < / span > < / e l - t o o l t i p >
企业地址 & nbsp ; & nbsp ; < el -tooltip
: content = "topSortData[2].companyAddress"
placement = "top-start"
> < span > { { topSortData [ 2 ] . companyAddress } } < / span > < / e l - t o o l t i p
>
< / div >
< / div >
< / div >
< div class = "first" v-if ="topSortData.length" @click="toCanban(2)" >
< div class = "mingci" >
< img src = "../../assets/safetyIndex/第一名.png" alt = "" > & nbsp ;
< img src = "../../assets/safetyIndex/第一名.png" alt = "" / > & nbsp ;
总得分 ： & nbsp ; < span > { { topSortData [ 0 ] . score } } < / span >
< / div >
< div class = "tupian" >
< img :src ="topSortData[0].picUrl" alt = "" >
< img :src ="topSortData[0].picUrl" alt = "" / >
< / div >
< div class = "companyMsg" >
< div class = "mingcheng" >
企业名称 & nbsp ; & nbsp ; < span > { { topSortData [ 0 ] . companyName } } < / span >
< / div >
< div class = "mingcheng" >
企业地址 & nbsp ; & nbsp ; < el -tooltip :content ="topSortData[0].companyAddress" placement = "top-start" > < span > { {
topSortData [ 0 ] . companyAddress } } < / span > < / e l - t o o l t i p >
企业地址 & nbsp ; & nbsp ; < el -tooltip
: content = "topSortData[0].companyAddress"
placement = "top-start"
> < span > { { topSortData [ 0 ] . companyAddress } } < / span > < / e l - t o o l t i p
>
< / div >
< / div >
< / div >
@ -137,76 +207,84 @@
< / div >
< / template >
< script >
import { statisticsAlarm , statisticsDanger , statisticsDetail , topSort } from '@/api/safetyIndex'
import offLineMap from '@/components/offLineMap'
import {
statisticsAlarm ,
statisticsDanger ,
statisticsDetail ,
topSort ,
} from "@/api/safetyIndex" ;
import offLineMap from "@/components/offLineMap" ;
export default {
data ( ) {
return {
Selectvalue : '排名' ,
topTabsName : 'month' ,
Selectvalue : "排名" ,
topTabsName : "month" ,
statisticsAlarmData : { } ,
statisticsDangerData : [ ] ,
statisticsDetailData : { } ,
topSortData : [ ] ,
}
} ;
} ,
components : {
offLineMap
offLineMap ,
} ,
created ( ) {
this . getStatisticsAlarm ( )
this . getstatisticsDanger ( )
this . getStatisticsAlarm ( ) ;
this . getstatisticsDanger ( ) ;
/ / t h i s . g e t s t a t i s t i c s D e t a i l ( )
this . gettopSort ( )
this . gettopSort ( ) ;
} ,
methods : {
getStatisticsAlarm ( ) {
statisticsAlarm ( ) . then ( res => {
this . statisticsAlarmData = res . data
} )
statisticsAlarm ( ) . then ( ( res ) => {
this . statisticsAlarmData = res . data ;
} ) ;
} ,
getstatisticsDanger ( ) {
statisticsDanger ( ) . then ( res => {
this . statisticsDangerData = res . data
} )
statisticsDanger ( ) . then ( ( res ) => {
this . statisticsDangerData = res . data ;
} ) ;
} ,
getstatisticsDetail ( ) {
statisticsDetail ( ) . then ( res => {
this . statisticsDetailData = res . data
} )
statisticsDetail ( ) . then ( ( res ) => {
this . statisticsDetailData = res . data ;
} ) ;
} ,
gettopSort ( ) {
this . $emit ( 'tabChange' , this . topTabsName )
topSort ( { scoreType : this . topTabsName } ) . then ( res => {
this . topSortData = res . data
} )
this . $emit ( "tabChange" , this . topTabsName ) ;
topSort ( { scoreType : this . topTabsName } ) . then ( ( res ) => {
this . topSortData = res . data ;
} ) ;
} ,
goMore ( val ) {
console . log ( val , 'val' ) ;
this . $router . push ( { path : '/home/enterpriseRank' , query : { companyParamName : val } } )
console . log ( val , "val" ) ;
this . $router . push ( {
path : "/home/enterpriseRank" ,
query : { companyParamName : val } ,
} ) ;
} ,
toCanban ( index ) {
sessionStorage . setItem ( 'companyID' , this . topSortData [ index ] . companyId )
sessionStorage . setItem ( "companyID" , this . topSortData [ index ] . companyId ) ;
this . $router . push ( {
path : '/home/companyCanban' ,
} )
path : "/home/companyCanban" ,
} ) ;
} ,
toArchives ( val ) {
sessionStorage . setItem ( 'companyID' , val . companyId )
sessionStorage . setItem ( "companyID" , val . companyId ) ;
this . $router . push ( {
path : '/home/companyCanban' ,
} )
}
path : "/home/companyCanban" ,
} ) ;
} ,
}
} ,
} ;
< / script >
< style lang = "less" scoped >
. toubu {
width : 100 % ;
height : calc ( 58.84 % + 20 px ) ;
background : url ( '~@/assets/safetyIndex/主屏板块4.png' ) no - repeat ;
background : url ( "~@/assets/safetyIndex/主屏板块4.png" ) no - repeat ;
background - size : 100 % 100 % ;
padding : 35 px 20 px 20 px ;
box - sizing : border - box ;
@ -220,7 +298,7 @@ export default {
. topBox {
width : 100 % ;
height : 30 % ;
background : url ( '~@/assets/safetyIndex/90981.png' ) no - repeat ;
background : url ( "~@/assets/safetyIndex/90981.png" ) no - repeat ;
background - size : 100 % 100 % ;
box - sizing : border - box ;
position : relative ;
@ -231,7 +309,7 @@ export default {
width : 18 px ;
height : 18 px ;
position : absolute ;
background : url ( '~@/assets/safetyIndex/装饰6710.png' ) no - repeat ;
background : url ( "~@/assets/safetyIndex/装饰6710.png" ) no - repeat ;
background - size : 100 % 100 % ;
left : 18 px ;
top : 15 px ;
@ -241,7 +319,7 @@ export default {
width : 18 px ;
height : 18 px ;
position : absolute ;
background : url ( '~@/assets/safetyIndex/装饰6710.png' ) no - repeat ;
background : url ( "~@/assets/safetyIndex/装饰6710.png" ) no - repeat ;
background - size : 100 % 100 % ;
right : 18 px ;
top : 15 px ;
@ -261,13 +339,13 @@ export default {
align - items : center ;
justify - content : center ;
font - size : 16 px ;
color : # D0DEEE ;
color : # d0deee ;
letter - spacing : 1.14 px ;
font - weight : 500 ;
. blue {
font - size : 20 px ;
color : # 66 D9FF ;
color : # 66 d9ff ;
letter - spacing : 1.25 px ;
text - align : right ;
font - weight : 700 ;
@ -275,7 +353,7 @@ export default {
. yellow {
font - size : 20 px ;
color : # FEF 699;
color : # fef ;
letter - spacing : 1.25 px ;
text - align : right ;
font - weight : 700 ;
@ -284,7 +362,7 @@ export default {
. red {
font - family : AlimamaShuHeiTi ;
font - size : 20 px ;
color : # FA 3737;
color : # fa ;
letter - spacing : 1.25 px ;
text - align : right ;
font - weight : 700 ;
@ -292,19 +370,23 @@ export default {
. jia {
font - size : 12 px ;
color : # FFFFFF ;
color : # ffffff ;
letter - spacing : 1.25 px ;
line - height : 18 px ;
font - weight : 600 ;
opacity : 0.5 ;
}
}
. shu {
width : 1 px ;
height : 40 px ;
background - image : linear - gradient ( 180 deg , rgba ( 71 , 88 , 99 , 0.00 ) 0 % , # 79919 D 48 % , rgba ( 69 , 88 , 97 , 0.00 ) 100 % ) ;
background - image : linear - gradient (
180 deg ,
rgba ( 71 , 88 , 99 , 0 ) 0 % ,
# 79919 d 48 % ,
rgba ( 69 , 88 , 97 , 0 ) 100 %
) ;
}
}
@ -318,7 +400,7 @@ export default {
. topBottomItem {
height : 100 % ;
width : calc ( 25 % - 15 px ) ;
background : url ( '~@/assets/safetyIndex/23111.png' ) no - repeat ;
background : url ( "~@/assets/safetyIndex/23111.png" ) no - repeat ;
background - size : 100 % 100 % ;
display : flex ;
justify - content : space - around ;
@ -335,7 +417,7 @@ export default {
. qiye {
font - size : 14 px ;
color : # C4E5FF ;
color : # c4e5ff ;
letter - spacing : 0.78 px ;
font - weight : 500 ;
}
@ -349,15 +431,14 @@ export default {
. qiyenum {
font - size : 20 px ;
color : # EBF9FF ;
color : # ebf9ff ;
letter - spacing : 1 px ;
line - height : 37 px ;
text - shadow : 0 0 9 px # 159 AFF ;
text - shadow : 0 0 9 px # 159 aff ;
font - weight : 700 ;
}
}
}
}
}
}
@ -378,18 +459,14 @@ export default {
. el - input _ _inner {
height : 30 px ;
background : url ( '~@/assets/safetyIndex/选择框.png' ) no - repeat ;
background : url ( "~@/assets/safetyIndex/选择框.png" ) no - repeat ;
background - size : 100 % 100 % ;
font - size : 14 px ;
color : # C4E5FF ;
color : # c4e5ff ;
letter - spacing : 1 px ;
text - align : center ;
font - weight : 400 ;
border : 0 ;
}
}
}
@ -414,15 +491,11 @@ export default {
/ / b a c k g r o u n d - s i z e : 1 0 0 % 1 0 0 % ;
background : rgba ( 38 , 88 , 76 , 0.8 ) ;
font - size : 14 px ;
color : # C4E5FF ;
color : # c4e5ff ;
letter - spacing : 1 px ;
text - align : center ;
font - weight : 400 ;
border : 0 ;
}
}
}
@ -442,7 +515,7 @@ export default {
. second {
width : 31.34 % ;
height : 80 % ;
background : url ( '~@/assets/safetyIndex/39088132.png' ) no - repeat ;
background : url ( "~@/assets/safetyIndex/39088132.png" ) no - repeat ;
background - size : 100 % 100 % ;
padding : 5 px 27 px 12 px 10 px ;
box - sizing : border - box ;
@ -464,7 +537,7 @@ export default {
span {
font - size : 16 px ;
color : # FFFCEB ;
color : # fffceb ;
letter - spacing : 2 px ;
line - height : 16 px ;
text - shadow : 0 0 9 px rgba ( 255 , 236 , 21 , 0.58 ) ;
@ -506,7 +579,7 @@ export default {
span {
font - size : 14 px ;
color : # D0DEEE ;
color : # d0deee ;
letter - spacing : 0.75 px ;
font - weight : 500 ;
}
@ -517,7 +590,7 @@ export default {
. third {
width : 31.34 % ;
height : 80 % ;
background : url ( '~@/assets/safetyIndex/编组 352111.png' ) no - repeat ;
background : url ( "~@/assets/safetyIndex/编组 352111.png" ) no - repeat ;
background - size : 100 % 100 % ;
padding : 5 px 10 px 12 px 27 px ;
box - sizing : border - box ;
@ -539,7 +612,7 @@ export default {
span {
font - size : 16 px ;
color : # FFFCEB ;
color : # fffceb ;
letter - spacing : 2 px ;
line - height : 16 px ;
text - shadow : 0 0 9 px rgba ( 255 , 31 , 21 , 0.75 ) ;
@ -581,13 +654,12 @@ export default {
span {
font - size : 14 px ;
color : # D0DEEE ;
color : # d0deee ;
letter - spacing : 0.75 px ;
font - weight : 500 ;
}
}
}
}
. first {
@ -598,7 +670,7 @@ export default {
left : 50 % ;
top : 30 px ;
margin - left : - 20.5 % ;
background : url ( '~@/assets/safetyIndex/编组 3521.png' ) no - repeat ;
background : url ( "~@/assets/safetyIndex/编组 3521.png" ) no - repeat ;
background - size : 100 % 100 % ;
padding : 10 px 16 px 16 px ;
text - align : center ;
@ -610,7 +682,7 @@ export default {
color : rgba ( 235 , 249 , 255 , 0.8 ) ;
font - size : 14 px ;
color : # EBF9FF ;
color : # ebf9ff ;
letter - spacing : 1.75 px ;
font - weight : 400 ;
@ -621,10 +693,10 @@ export default {
span {
font - size : 20 px ;
color : # EBF9FF ;
color : # ebf9ff ;
letter - spacing : 2.5 px ;
line - height : 37 px ;
text - shadow : 0 0 9 px # 159 AFF ;
text - shadow : 0 0 9 px # 159 aff ;
font - weight : 700 ;
}
}
@ -663,7 +735,7 @@ export default {
span {
font - size : 14 px ;
color : # D0DEEE ;
color : # d0deee ;
letter - spacing : 0.75 px ;
font - weight : 500 ;
}
@ -671,22 +743,19 @@ export default {
}
}
. topTabs {
position : absolute ;
top : 0 ;
left : 0 ;
}
/deep/ . el - tabs -- border - card {
background : rgba ( 0 , 0 , 0 , 0 ) ;
border : 0 ;
height : 30 px ;
width : calc ( 100 % - 40 px ) ;
margin : 0 ;
box - shadow : 0 2 px 4 px 0 rgba ( 0 , 0 , 0 , ) , 0 0 6 px 0 rgba ( 0 , 0 , 0 , ) ;
box - shadow : 0 2 px 4 px 0 rgba ( 0 , 0 , 0 , 0 .12) , 0 0 6 px 0 rgba ( 0 , 0 , 0 , 0 .04) ;
. el - tabs _ _header {
display : inline - block ;
@ -700,21 +769,20 @@ export default {
display : inline - block ;
width : auto ;
display : flex ;
}
. el - tabs _ _item {
width : 70 px ;
height : 30 px ;
border : 0 ;
color : # 8 FABBF ;
color : # 8 fabbf ;
padding : 5 px ;
box - sizing : border - box ;
text - align : center ;
display : flex ;
align - items : center ;
justify - content : center ;
background : url ( '~@/assets/safetyIndex/编组 6221.png' ) no - repeat ;
background : url ( "~@/assets/safetyIndex/编组 6221.png" ) no - repeat ;
background - size : 100 % 100 % ;
. paneInner {
@ -724,21 +792,14 @@ export default {
display : flex ;
justify - content : center ;
align - items : center ;
}
}
. el - tabs _ _item . is - active {
background : url ( '~@/assets/safetyIndex/90866.png' ) no - repeat ;
background : url ( "~@/assets/safetyIndex/90866.png" ) no - repeat ;
background - size : 100 % 100 % ;
border : 0 ;
color : # 4 BFFAD ;
color : # 4 bffad ;
padding : 5 px ;
box - sizing : border - box ;
