Commit e82021ea authored by 王向前's avatar 王向前

首页

parent 069733bf
...@@ -2,6 +2,33 @@ ...@@ -2,6 +2,33 @@
<!-- 外层排版--> <!-- 外层排版-->
<div class="home-page" id="homePageBody" :style="{ height: height + 'px' }"> <div class="home-page" id="homePageBody" :style="{ height: height + 'px' }">
<div class="page-homepage" id="homePage" style=""> <div class="page-homepage" id="homePage" style="">
<div class="echarts_nav" id="echarts_nav">
<div class="iconTable" v-for="item in gsList" :key="item.id" @click="bindGsid(item)">
<div class="dv-border-box-10 nav_border"
:style="{color:queryParams1.gsid==item.id?activeStyle.color:'', boxShadow:queryParams1.gsid==item.id?'#00bfff 0px 0px 25px 3px inset':'#204b85 0px 0px 25px 3px inset'}">
<svg width="131" height="37" class="dv-border-svg-container">
<polygon fill="transparent" points="
4, 0 127, 0 131, 4 131, 33 127, 37
4, 37 0, 33 0, 4
"></polygon>
</svg><svg width="150px" height="150px" class="left-top dv-border-svg-container">
<polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" :fill="queryParams1.gsid==item.id?'#00BFFF':'#3377CB'"></polygon>
</svg>
<svg width="150px" height="150px" class="right-top dv-border-svg-container">
<polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" :fill="queryParams1.gsid==item.id?'#00BFFF':'#3377CB'"></polygon>
</svg>
<svg width="150px" height="150px" class="left-bottom dv-border-svg-container">
<polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" :fill="queryParams1.gsid==item.id?'#00BFFF':'#3377CB'"></polygon>
</svg><svg width="150px" height="150px" class="right-bottom dv-border-svg-container">
<polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" :fill="queryParams1.gsid==item.id?'#00BFFF':'#3377CB'"></polygon>
</svg>
<div class="border-box-content"><span class="spanTitle">
<i class="iconfont icon-zhexiantu"></i> {{item.bmmc}} </span>
</div>
</div>
</div>
</div>
<div class="echart-body">
<div class="page-left"> <div class="page-left">
<div class="page-left-t page-left-3"> <div class="page-left-t page-left-3">
<div class="page-fxpc"> <div class="page-fxpc">
...@@ -12,12 +39,11 @@ ...@@ -12,12 +39,11 @@
</div> </div>
</div> </div>
<div class="page-left-c page-left-4"> <div class="page-left-c page-left-4">
<div class="yhzl-big-box">
<div class="lbt" v-if="showList.length > 0"> <div class="lbt" v-if="showList.length > 0">
<el-carousel :height='carHeight'> <el-carousel :height='carHeight'>
<el-carousel-item v-for="(item, index) in showList" :key="item.id + index"> <el-carousel-item v-for="(item, index) in showList" :key="item.id + index">
<div class="lbtAll"> <div class="lbtAll">
<div class="sm"> <div class="sm">
<el-tooltip :content="`${item.gsName}${item.bzName || ''}:${item.wzr}:${item.wzxw}`" placement="top"> <el-tooltip :content="`${item.gsName}${item.bzName || ''}:${item.wzr}:${item.wzxw}`" placement="top">
<span class='infor'> <span class='infor'>
...@@ -38,37 +64,99 @@ ...@@ -38,37 +64,99 @@
<img style="height:150px;width: 200px;" :src="aqpng" alt="" srcset=""> <img style="height:150px;width: 200px;" :src="aqpng" alt="" srcset="">
</div> </div>
</div> </div>
</div>
<div class="page-left-b page-left-3"> <div class="page-left-b page-left-3">
<div class="yhzl-big-box">
<div id="yjylChart" class="chart-auto"></div> <div id="yjylChart" class="chart-auto"></div>
</div> </div>
</div> </div>
</div>
<div class="page-center"> <div class="page-center">
<div class="page-center-t"> <div class="page-center-t">
<div class="gs-select">
<el-row> <div class="gs-picture" style="width: 100%;height: 100%;">
<el-button :type="queryParams1.gsid==item.id?'warning':'primary'" v-for="item in gsList" :key="item.id" @click="bindGsid(item)">{{item.bmmc}}</el-button> <div class="dv-border-box-1">
</el-row> <svg width="682" height="379" class="border">
<polygon fill="transparent" points="10, 27 10, 352 13, 355 13, 358 24, 368
38, 368 41, 371 73, 371 75, 369 81, 369
85, 373 597, 373 601, 369 607, 369
609, 371 641, 371 644, 368
658, 368 669, 358 669, 355
672, 352 672, 27 669, 25 669, 21
658, 11 644, 11 641, 8 609, 8 607, 10
601, 10 597, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24"></polygon>
</svg>
<svg width="150px" height="150px" class="left-top border">
<polygon points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63" fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;#4fd2dd" dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
</polygon><polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#235fa7">
<animate attributeName="fill" values="#235fa7;#4fd2dd;#235fa7" dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
</polygon><polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54" fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;transparent" dur="1s" begin="0s" repeatCount="indefinite"></animate>
</polygon></svg><svg width="150px" height="150px" class="right-top border">
<polygon points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63" fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;#4fd2dd" dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
</polygon><polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#235fa7">
<animate attributeName="fill" values="#235fa7;#4fd2dd;#235fa7" dur="0.5s" begin="0s" repeatCount="indefinite"></animate></polygon>
<polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54" fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;transparent" dur="1s" begin="0s" repeatCount="indefinite"></animate>
</polygon></svg><svg width="150px" height="150px" class="left-bottom border">
<polygon points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63" fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;#4fd2dd" dur="0.5s" begin="0s" repeatCount="indefinite"></animate></polygon>
<polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#235fa7">
<animate attributeName="fill" values="#235fa7;#4fd2dd;#235fa7" dur="0.5s" begin="0s" repeatCount="indefinite"></animate></polygon>
<polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54" fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;transparent" dur="1s" begin="0s" repeatCount="indefinite"></animate></polygon></svg>
<svg width="150px" height="150px" class="right-bottom border"><polygon points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63" fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;#4fd2dd" dur="0.5s" begin="0s" repeatCount="indefinite"></animate></polygon><polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#235fa7">
<animate attributeName="fill" values="#235fa7;#4fd2dd;#235fa7" dur="0.5s" begin="0s" repeatCount="indefinite"></animate></polygon><polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54" fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;transparent" dur="1s" begin="0s" repeatCount="indefinite"></animate></polygon></svg><div class="border-box-content">
<div class="realPicture-min">
<div class="realImg">
</div>
</div>
</div>
</div> </div>
<div class="gs-picture">
<img :src="gspicture" alt="" style="width: 100%;height: 100%;">
</div> </div>
</div> </div>
<div class="page-center-b"> <div class="page-center-b">
<div class="yhzl-big-box">
<!-- <div class="yhzl-big-box-title">隐患治理</div>
<div class="echarts"> -->
<div id="yhzlChart" class="chart-auto"></div> <div id="yhzlChart" class="chart-auto"></div>
<!-- </div> -->
</div>
</div> </div>
</div> </div>
<div class="page-right"> <div class="page-right">
<div class="page-right-t"> <div class="page-right-t">
<div class="yhzl-big-box">
<div class="yhzl-big-box-title">风险排查</div>
<div class="echarts">
<div id="rfxpcChart" class="chart-auto"></div> <div id="rfxpcChart" class="chart-auto"></div>
</div> </div>
</div>
</div>
<div class="page-right-c"> <div class="page-right-c">
<div class="yhzl-big-box">
<div class="yhzl-big-box-title" style="padding-top: 1.5%;">履职管理</div>
<div class="echarts">
<div id="lzglChart" class="chart-auto"></div> <div id="lzglChart" class="chart-auto"></div>
</div> </div>
</div>
</div>
<div class="page-right-b"> <div class="page-right-b">
<div class="yhzl-big-box" style="background-color: rgba(3,15,42,.7)">
<div id="ygzcChart" class="chart-auto"></div> <div id="ygzcChart" class="chart-auto"></div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -158,9 +246,13 @@ doQueryWithFile({}).then(res => { ...@@ -158,9 +246,13 @@ doQueryWithFile({}).then(res => {
}, },
data() { data() {
return { return {
activeStyle:{
color:"rgb(0, 191, 255)",
boxShadow:"rgb(0, 191, 255) 0px 0px 25px 3px inset;"
},
gsList:[], gsList:[],
height:300, height:300,
showListRy: [], showListRy: [],
queryParams1: { queryParams1: {
grouptype: 'GS', grouptype: 'GS',
rwlx: 'D', rwlx: 'D',
...@@ -289,6 +381,7 @@ showListRy: [], ...@@ -289,6 +381,7 @@ showListRy: [],
this.setBarhart(this.yjylChart, { this.setBarhart(this.yjylChart, {
title: "应急演练", title: "应急演练",
xAxis: xAxis, xAxis: xAxis,
titleShow:true,
yAxis:[ yAxis:[
{ {
type: 'value', type: 'value',
...@@ -350,15 +443,68 @@ showListRy: [], ...@@ -350,15 +443,68 @@ showListRy: [],
normal: { normal: {
show: true, show: true,
position: 'top', position: 'top',
color:"white"
} }
} }
} }
let seriesData = []; let seriesData = [];
let series = [ let series = [
{name:"隐患数量",data:[],type:"bar",itemStyle: {color: '#FF9800'}}, {name:"隐患数量",data:[],type:"bar",itemStyle: {color: {
{name:"隐患关闭数量",data:[],type:"bar",itemStyle: {color: '#4caf50'}}, type: 'linear', // 线性渐变
{name:"超期未处理",data:[],type:"bar",itemStyle: {color: '#ff5722'}}, x: 0,
{name:"超期已处理",data:[],type:"bar",itemStyle: {color: '#03a9f4'}}, y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#5197de' // 0%处的颜色为红色
}, {
offset: 1,
color: '#08173a' // 100%处的颜色为蓝
}]
}}},
{name:"隐患关闭数量",data:[],type:"bar",itemStyle: {color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#db8723' // 0%处的颜色为红色
}, {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}}},
{name:"超期未处理",data:[],type:"bar",itemStyle: {color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#db8723' // 0%处的颜色为红色
}, {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}}},
{name:"超期已处理",data:[],type:"bar",itemStyle: {color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#1c7571' // 0%处的颜色为红色
}, {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}}},
], xAxis = []; ], xAxis = [];
seriesData[0]={...seriesStyle,...series[0]}; seriesData[0]={...seriesStyle,...series[0]};
seriesData[1]={...seriesStyle,...series[1]}; seriesData[1]={...seriesStyle,...series[1]};
...@@ -374,6 +520,7 @@ showListRy: [], ...@@ -374,6 +520,7 @@ showListRy: [],
this.setBarhart(this.yhzlChart, { this.setBarhart(this.yhzlChart, {
title: "隐患治理", title: "隐患治理",
xAxis: xAxis, xAxis: xAxis,
titleShow:true,
series:seriesData series:seriesData
}) })
} }
...@@ -391,12 +538,39 @@ showListRy: [], ...@@ -391,12 +538,39 @@ showListRy: [],
normal: { normal: {
show: true, show: true,
position: 'top', position: 'top',
color:'white'
} }
} }
} }
let seriesData = [ let seriesData = [
{name:"全部",data:[],type:"bar",itemStyle: {color: '#03a9f4'},...seriesStyle}, {name:"全部",data:[],type:"bar",itemStyle: {color: {
{name:"完成",data:[],type:"bar",itemStyle: {color: '#4caf50'},...seriesStyle}, type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#5197de' // 0%处的颜色为红色
}, {
offset: 1,
color: '#08173a' // 100%处的颜色为蓝
}]
}},...seriesStyle},
{name:"完成",data:[],type:"bar",itemStyle: { color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#db8723' // 0%处的颜色为红色
}, {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}},...seriesStyle},
], xAxis = []; ], xAxis = [];
let lx={ let lx={
"D":"昨日", "D":"昨日",
...@@ -443,9 +617,35 @@ showListRy: [], ...@@ -443,9 +617,35 @@ showListRy: [],
} }
} }
let seriesData = [ let seriesData = [
{name:"全部",data:[],type:"bar", yAxisIndex: 0,itemStyle: {color: '#03a9f4'},...seriesStyle}, {name:"全部",data:[],type:"bar", yAxisIndex: 0,itemStyle: {color: {
{name:"完成",data:[],type:"bar", yAxisIndex: 0,itemStyle: {color: '#4caf50'},...seriesStyle}, type: 'linear', // 线性渐变
{name:"完成率",data:[],type:"line", yAxisIndex: 1,itemStyle: {color: '#FF9800'},...seriesStyle2}, x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#5197de' // 0%处的颜色为红色
}, {
offset: 1,
color: '#08173a' // 100%处的颜色为蓝
}]
}},...seriesStyle},
{name:"完成",data:[],type:"bar", yAxisIndex: 0,itemStyle: {color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#db8723' // 0%处的颜色为红色
}, {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}},...seriesStyle},
{name:"完成率",data:[],type:"line", yAxisIndex: 1,itemStyle: {color: '#049bbc'},...seriesStyle2},
], xAxis = [],yAxis=[]; ], xAxis = [],yAxis=[];
let lx={ let lx={
"D":"昨日", "D":"昨日",
...@@ -502,16 +702,20 @@ showListRy: [], ...@@ -502,16 +702,20 @@ showListRy: [],
normal: { normal: {
show: true, show: true,
position: 'top', position: 'top',
color:'white'
} }
} }
}; };
let yAxisStyle={axisTick: { let yAxisStyle={axisTick: {
color:"white" color:"white",
show:false
}, },
axisLabel:{ axisLabel:{
color:'white' color:'white',
show:false
}, },
axisLine:{ axisLine:{
show:false,
lineStyle:{ lineStyle:{
color:'white' color:'white'
}, },
...@@ -521,8 +725,8 @@ showListRy: [], ...@@ -521,8 +725,8 @@ showListRy: [],
color:'white' color:'white'
}} }}
let seriesData = [ let seriesData = [
{name:"持证人数",data:[],type:"bar",barWidth:20, stack: 'total',itemStyle: {color: '#03a9f4'},...seriesStyle}, {name:"持证人数",data:[],type:"bar",barWidth:20, stack: 'total',itemStyle: {color: "#334284"},...seriesStyle},
{name:"即将到期",data:[],type:"bar",barWidth:20, stack: 'total',itemStyle: {color: 'orange'},...seriesStyle}, {name:"即将到期",data:[],type:"bar",barWidth:20, stack: 'total',itemStyle: {color: ""},...seriesStyle},
], xAxis = []; ], xAxis = [];
value.forEach(element => { value.forEach(element => {
xAxis.push(element.flName); xAxis.push(element.flName);
...@@ -531,9 +735,11 @@ showListRy: [], ...@@ -531,9 +735,11 @@ showListRy: [],
}); });
this.setBarhart(this.ygzcChart, { this.setBarhart(this.ygzcChart, {
title: "员工持证", title: "员工持证",
titleShow:true,
yAxis: { yAxis: {
name:"种类", name:"种类",
data:xAxis, data:xAxis,
show:false,
type:"category",...yAxisStyle type:"category",...yAxisStyle
}, },
customxAxis:{ customxAxis:{
...@@ -614,7 +820,7 @@ showListRy: [], ...@@ -614,7 +820,7 @@ showListRy: [],
/* 基础配置*/ /* 基础配置*/
let option = { let option = {
title: { title: {
show: true, show: setting.titleShow||false,
text: setting.title || "", text: setting.title || "",
top: 20, top: 20,
left: "center", left: "center",
...@@ -636,6 +842,7 @@ showListRy: [], ...@@ -636,6 +842,7 @@ showListRy: [],
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '3%',
top:'20%',
containLabel: true containLabel: true
}, },
xAxis: setting.customxAxis||[ xAxis: setting.customxAxis||[
...@@ -764,13 +971,72 @@ showListRy: [], ...@@ -764,13 +971,72 @@ showListRy: [],
height: 100%; height: 100%;
position: relative; position: relative;
display: flex; display: flex;
background-image: url('~@/assets/images/data08.png'); background: url('~@/assets/images/background.jpg') no-repeat 50%;
.el-button{ background-size: 100% 100%;
margin-top: 10px; .echarts_nav{
} width: 85%;
.el-button:first-child{ height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: 0;
left: 3%;
.iconTable{
text-align: center;
align-items: center;
width: 100%;
height: 70%;
margin-left: .5%;
cursor: pointer;
.nav_border {
text-align: center;
height: 100%;
width: 100%;
color: #fff;
position: relative;
.dv-border-svg-container {
position: absolute;
display: block; display: block;
}
.right-top {
right: 0;
transform: rotateY(180deg);
}
.left-bottom {
bottom: 0;
transform: rotateX(180deg);
}
.right-bottom {
right: 0;
bottom: 0;
transform: rotateX(180deg) rotateY(180deg);
}
.border-box-content{
position: relative;
width: 100%; width: 100%;
height: 100%;
.spanTitle {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
.icon-zhexiantu{
margin: 0 1% 0 0;
color: #fff;
font-size: 22px;
}
}
}
}
}
}
.echart-body{
height: calc( 100% - 48px);
width: 100%;
margin-top: 48px;
display: flex;
} }
.page-left { .page-left {
flex: 1; flex: 1;
...@@ -803,21 +1069,58 @@ showListRy: [], ...@@ -803,21 +1069,58 @@ showListRy: [],
} }
.page-center { .page-center {
flex: 0 0 40%; flex: 0 0 50%;
height: 100%; height: 100%;
display: inline-block; display: inline-block;
.page-center-t { .page-center-t {
width: 100%; width: 100%;
height: 70%; height: 70%;
.gs-select{ .dv-border-box-1 {
height: 148px; position: relative;
width: 100%; width: 100%;
height: 100%;
.border {
position: absolute;
display: block;
}
.right-top {
right: 0;
transform: rotateY(180deg);
}
.left-bottom {
bottom: 0;
transform: rotateX(180deg);
} }
.gs-picture{ .right-bottom {
height: calc(100% - 148px ); right: 0;
bottom: 0;
transform: rotateX(180deg) rotateY(180deg);
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
.realPicture-min{
width: 95%;
height: 95%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
.realImg {
width: 100%; width: 100%;
padding: 4px 10px; height: 100%;
background-repeat: no-repeat;
display: block;
background: url('~@/assets/images/gs.jpg');
background-size: 100% 100%;
}
}
} }
} }
.page-center-b { .page-center-b {
...@@ -843,4 +1146,27 @@ showListRy: [], ...@@ -843,4 +1146,27 @@ showListRy: [],
.chart-auto{ .chart-auto{
width: 100%;height: 100%; width: 100%;height: 100%;
} }
.yhzl-big-box{
width: 100%;
height: 100%;
color: #fff;
background:url('~@/assets/images/bc.png') no-repeat rgba(3,15,42,.7) 100% .5%;
background-size: 100% 13%;
.yhzl-big-box-title{
width: 100%;
height: 13%;
display: block;
font-size: 16px;
font-weight: 700;
padding: .5% 0 0 5%;
box-sizing: border-box;
}
.echarts{
width: 100%;
height: 83%;
margin: 1% 0 0 0;
}
}
}</style> }</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment