Skip to content

S
sgaqgl-vue
Commit adc38f01 authored by 李苏's avatar 李苏 💬
Browse files
Options

echart

parent 20d50b07
Hide whitespace changes
Inline Side-by-side
Showing with 59 additions and 36 deletions
src/views/threeViolations/homePage/index.vue
View file @ adc38f01
<template>
<!-- 外层排版-->
<div class="home-page" id="homePageBody" :style="{ height: height + 'px' }">
<!-- <div class="home-page" id="homePageBody" :style="{ height: height + 'px' }"> -->
<div class="min_full" >
<div class="home-page full" ref='homePageBody' id="homePageBody" style="overflow: hidden;">
<div class="page-homepage" id="homePage" @dblclick="handleDoubleClick" 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"
<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="
......@@ -67,18 +69,29 @@
</div>
</div>
</div>
</div>
<div class="page-left-b page-left-3">
<div class="yhzl-big-box">
<div id="yjylChart" class="chart-auto"></div>
<div v-echartResize="()=>{
fxpcChart.resize();
yhclChart.resize();
yjylChart.resize();
yhzlChart.resize();
rfxpcChart.resize();
lzglChart.resize();
ygzcChart.resize();
height=refs('homePageBody').parentNode.clientHeight;
}" id="yjylChart" class="chart-auto"></div>
</div>
</div>
</div>
<div class="page-center">
<div class="page-center-t">
<div class="gs-picture" style="width: 100%;height: 100%;">
<div class="gs-picture" style="width: 100%;height: 100%;">
<div class="dv-border-box-1">
<svg width="682" height="379" class="border">
<polygon fill="transparent" points="10, 27 10, 352 13, 355 13, 358 24, 368
......@@ -130,7 +143,7 @@
<div id="yhzlChart" class="chart-auto"></div>
<!-- </div> -->
</div>
</div>
</div>
<div class="page-right">
......@@ -140,7 +153,7 @@
<div class="echarts">
<div id="rfxpcChart" class="chart-auto"></div>
</div>
</div>
</div>
<div class="page-right-c">
......@@ -158,9 +171,11 @@
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
......@@ -219,8 +234,14 @@ export default {
}
},
height(value){
document.addEventListener('fullscreenchange', (event) => {
if (!document.fullscreenElement) {
// 全屏已退出
console.log('Exited full screen');
}
});
// setTimeout(() => {
// this.fxpcChart.resize();
// this.yhclChart.resize();
// this.yjylChart.resize();
......@@ -238,14 +259,16 @@ export default {
activated() {
console.log('activated')
},
mounted() {
this.postGs();
this.$nextTick(() => {
this.height=document.getElementById('homePageBody').parentNode.clientHeight;
this.carHeight=this.height*0.4-60+'px';
})
window.addEventListener('resize',function (params) {
})
this.fxpcChart = echarts.init(document.getElementById('fxpcChart'))
this.yhclChart = echarts.init(document.getElementById('yhclChart'))
......@@ -263,7 +286,7 @@ doQueryWithFile({}).then(res => {
// this.showList=[]
})
this.postYjyl();//应急演练
},
data() {
return {
......@@ -326,7 +349,7 @@ doQueryWithFile({}).then(res => {
this.carHeight=this.height*0.4-60+'px';
})
}, 50);
},
fullScreen(element) {
const elem = element || document.documentElement;
......@@ -434,7 +457,7 @@ doQueryWithFile({}).then(res => {
xAxis.push(element.bmName || "");
seriesData.push(Number(parseFloat((element.wcl || 0) * 100).toFixed(2)));
});
this.setBarhart(this.yjylChart, {
title: "应急演练",
xAxis: xAxis,
......@@ -442,7 +465,7 @@ doQueryWithFile({}).then(res => {
yAxis:[
{
type: 'value',
axisTick: {
color:"white"
},
......@@ -499,8 +522,8 @@ doQueryWithFile({}).then(res => {
label: {
normal: {
show: true,
position: 'top',
color:"white"
position: 'top',
color:"white"
}
}
}
......@@ -595,7 +618,7 @@ doQueryWithFile({}).then(res => {
normal: {
show: true,
position: 'top',
color:'white'
color:'white'
}
}
}
......@@ -637,7 +660,7 @@ doQueryWithFile({}).then(res => {
value.forEach(element => {
xAxis.push(lx[element.lx]);
seriesData[0]["data"].push(element.allCount||0);
seriesData[1]["data"].push(element.wcCount||0);
seriesData[1]["data"].push(element.wcCount||0);
});
this.setBarhart(this.rfxpcChart, {
title: "风险排查",
......@@ -658,7 +681,7 @@ doQueryWithFile({}).then(res => {
label: {
normal: {
show: true,
position: 'top',
position: 'top',
}
}
}
......@@ -667,10 +690,10 @@ doQueryWithFile({}).then(res => {
label: {
normal: {
show: true,
position: 'top',
position: 'top',
formatter:"{c}%"
},
}
}
let seriesData = [
......@@ -736,7 +759,7 @@ doQueryWithFile({}).then(res => {
seriesData[1]["data"].push(element.wcCount||0);
let percent=element.allCount?(element.wcCount/element.allCount):0;
seriesData[2]["data"].push(Number(parseFloat(percent*100).toFixed(2)));
});
this.setBarhart(this.lzglChart, {
title: "履职管理",
......@@ -758,8 +781,8 @@ doQueryWithFile({}).then(res => {
label: {
normal: {
show: true,
position: 'top',
color:'white'
position: 'top',
color:'white'
}
}
};
......@@ -788,7 +811,7 @@ doQueryWithFile({}).then(res => {
value.forEach(element => {
xAxis.push(element.flName);
seriesData[0]["data"].push(element.allCount-element.dqCount||0);
seriesData[1]["data"].push(element.dqCount||0);
seriesData[1]["data"].push(element.dqCount||0);
});
this.setBarhart(this.ygzcChart, {
title: "员工持证",
......@@ -820,9 +843,9 @@ doQueryWithFile({}).then(res => {
text: setting.title || "",
bottom: 0,
left: "center",
textStyle: {
fontSize: 14,
fontWeight: 400,
textStyle: {
fontSize: 14,
fontWeight: 400,
align: 'center',
verticalAlign: 'middle',
color:'white'
......@@ -881,9 +904,9 @@ doQueryWithFile({}).then(res => {
text: setting.title || "",
top: 20,
left: "center",
textStyle: {
fontSize: 18,
fontWeight: 600,
textStyle: {
fontSize: 18,
fontWeight: 600,
align: 'center',
verticalAlign: 'middle',
color:'white'
......@@ -906,7 +929,7 @@ doQueryWithFile({}).then(res => {
{
type: 'category',
data: setting.xAxis,
axisTick: {
alignWithLabel: true,
color:"white"
......@@ -952,7 +975,7 @@ doQueryWithFile({}).then(res => {
chartDom.setOption(option);
chartDom.resize();
},
}
}
......@@ -1140,7 +1163,7 @@ doQueryWithFile({}).then(res => {
.border {
position: absolute;
display: block;
}
}
.right-top {
right: 0;
transform: rotateY(180deg);
......@@ -1171,7 +1194,7 @@ doQueryWithFile({}).then(res => {
.realImg {
width: 100%;
height: 100%;
background-repeat: no-repeat;
display: block;
background: url('~@/assets/images/gs.jpg');
......
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