Skip to content

S
sgaqgl-vue
Commit 72950c19 authored by 王向前's avatar 王向前
Browse files
Options

首页

parent d6b7e845
Show whitespace changes
Inline Side-by-side
Showing with 206 additions and 69 deletions
src/api/home/homepage.js
View file @ 72950c19
...@@ -37,3 +37,10 @@ export function yjylQuery(query) { ...@@ -37,3 +37,10 @@ export function yjylQuery(query) {
data: query||{} data: query||{}
}) })
} }
export function gsQuery(query){
return request({
url:"jcsj/common/bm/queryGs",
method:"post",
data:query||{}
})
}
\ No newline at end of file
src/views/threeViolations/homePage/index.vue
View file @ 72950c19
<template> <template>
<!-- 外层排版--> <!-- 外层排版-->
<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="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">
<div id="fxpcChart" class="chart"></div> <div id="fxpcChart" class="chart-auto"></div>
</div> </div>
<div class="page-yhhz"> <div class="page-yhhz">
<div class="search-item" style="border-bottom: 2px solid #eee;padding-left: 10px;display: none"> <div id="yhclChart" class="chart-auto"></div>
<RelSelect style="width: 200px;margin-right: 10px;" hasValue src='jcsj/common/bm/queryGs' filterable
:match="{ value: 'id', label: 'bmmc' }" v-model='queryParams1.gsid'></RelSelect>
</div>
<div id="yhclChart" class="chart"></div>
</div> </div>
</div> </div>
<div class="page-left-c page-left-4"> <div class="page-left-c page-left-4">
<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">
<!-- 轮播图all-->
<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'>
...@@ -42,32 +39,37 @@ ...@@ -42,32 +39,37 @@
</div> </div>
</div> </div>
<div class="page-left-b page-left-3"> <div class="page-left-b page-left-3">
<div id="yjylChart" class="chart"></div> <div id="yjylChart" class="chart-auto"></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"></div> <div class="gs-select">
<el-row>
<el-button :type="queryParams1.gsid==item.id?'warning':'primary'" v-for="item in gsList" :key="item.id" @click="bindGsid(item)">{{item.bmmc}}</el-button>
</el-row>
</div>
<div class="gs-picture"> <div class="gs-picture">
<img :src="gspicture" alt="" style="width: 100%;height: 100%;"> <img :src="gspicture" alt="" style="width: 100%;height: 100%;">
</div> </div>
</div> </div>
<div class="page-center-b"> <div class="page-center-b">
<div id="yhzlChart" class="chart"></div> <div id="yhzlChart" class="chart-auto"></div>
</div> </div>
</div> </div>
<div class="page-right"> <div class="page-right">
<div class="page-right-t"> <div class="page-right-t">
<div id="rfxpcChart" class="chart"></div> <div id="rfxpcChart" class="chart-auto"></div>
</div> </div>
<div class="page-right-c"> <div class="page-right-c">
<div id="lzglChart" class="chart"></div> <div id="lzglChart" class="chart-auto"></div>
</div> </div>
<div class="page-right-b"> <div class="page-right-b">
<div id="ygzcChart" class="chart"></div> <div id="ygzcChart" class="chart-auto"></div>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -98,7 +100,7 @@ import { ...@@ -98,7 +100,7 @@ import {
} from '@/api/basicData/ryq.js'; } from '@/api/basicData/ryq.js';
import { import {
fxpcQuery, lzglQuery, ygczQuery, yhtjQuery, yjylQuery fxpcQuery, lzglQuery, ygczQuery, yhtjQuery, yjylQuery,gsQuery
} from '@/api/home/homepage.js' } from '@/api/home/homepage.js'
import ryqno from '@/assets/images/ryqno.png' import ryqno from '@/assets/images/ryqno.png'
export default { export default {
...@@ -106,15 +108,11 @@ export default { ...@@ -106,15 +108,11 @@ export default {
vueSeamlessScroll vueSeamlessScroll
}, },
mixins: [tableMixin], // mixins: [tableMixin],
computed: { computed: {
gsid() { gsid() {
return this.queryParams1.gsid return this.queryParams1.gsid
}, },
radio1() {
let val = this.queryParams1.rwlx
return val
}
}, },
watch: { watch: {
gsid(val) { gsid(val) {
...@@ -134,7 +132,12 @@ export default { ...@@ -134,7 +132,12 @@ export default {
console.log('activated') console.log('activated')
}, },
mounted() { mounted() {
this.carHeight=document.getElementById('homePage').clientHeight*0.4+'px'; this.postGs();
this.$nextTick(() => {
this.height=document.getElementById('homePageBody').parentNode.clientHeight;
this.carHeight=this.height*0.4+'px';
})
this.fxpcChart = echarts.init(document.getElementById('fxpcChart')) this.fxpcChart = echarts.init(document.getElementById('fxpcChart'))
this.yhclChart = echarts.init(document.getElementById('yhclChart')) this.yhclChart = echarts.init(document.getElementById('yhclChart'))
this.yjylChart = echarts.init(document.getElementById('yjylChart')); this.yjylChart = echarts.init(document.getElementById('yjylChart'));
...@@ -142,14 +145,8 @@ export default { ...@@ -142,14 +145,8 @@ export default {
this.rfxpcChart = echarts.init(document.getElementById('rfxpcChart')); this.rfxpcChart = echarts.init(document.getElementById('rfxpcChart'));
this.lzglChart= echarts.init(document.getElementById('lzglChart')); this.lzglChart= echarts.init(document.getElementById('lzglChart'));
this.ygzcChart= echarts.init(document.getElementById('ygzcChart')); this.ygzcChart= echarts.init(document.getElementById('ygzcChart'));
this.$nextTick(() => {
// this.setChart(this.yhclChart,{ doQueryWithFile({}).then(res => {
// name:'隐患整改完成率',
// title:'隐患整改'
// })
})
doQueryWithFile({}).then(res => {
this.showListRy = res.data.records || [] this.showListRy = res.data.records || []
}) })
queryBglxFile({}).then(res => { queryBglxFile({}).then(res => {
...@@ -161,7 +158,9 @@ export default { ...@@ -161,7 +158,9 @@ export default {
}, },
data() { data() {
return { return {
showListRy: [], gsList:[],
height:300,
showListRy: [],
queryParams1: { queryParams1: {
grouptype: 'GS', grouptype: 'GS',
rwlx: 'D', rwlx: 'D',
...@@ -176,7 +175,7 @@ export default { ...@@ -176,7 +175,7 @@ export default {
ksrq: null, ksrq: null,
jsrq: new Date().getTime() jsrq: new Date().getTime()
}, },
queryParams: { queryParams: {
queryType: 'YHWCL' queryType: 'YHWCL'
// zt:'S' // zt:'S'
...@@ -190,10 +189,26 @@ export default { ...@@ -190,10 +189,26 @@ export default {
/* dom*/ /* dom*/
fxpcChart: null, fxpcChart: null,
yhclChart: null, yhclChart: null,
yjylChart :null,
yhzlChart :null,
rfxpcChart:null,
lzglChart:null,
ygzcChart:null
} }
}, },
methods: { methods: {
bindGsid(item){
this.queryParams1.gsid=item.id
},
postGs(){
gsQuery().then(res=>{
if(res.success){
this.gsList=res.data.records||[];
this.queryParams1.gsid=this.gsList[0]["id"];
}
})
},
doQueryfx() { doQueryfx() {
if (this.queryParams1.rwlx == 'W') { if (this.queryParams1.rwlx == 'W') {
this.queryParams1.ksrq = new Date(new Date(this.getFirstWeek()).Format('yyyy/MM/dd') + " 00:00:00").getTime(); this.queryParams1.ksrq = new Date(new Date(this.getFirstWeek()).Format('yyyy/MM/dd') + " 00:00:00").getTime();
...@@ -274,6 +289,28 @@ export default { ...@@ -274,6 +289,28 @@ export default {
this.setBarhart(this.yjylChart, { this.setBarhart(this.yjylChart, {
title: "应急演练", title: "应急演练",
xAxis: xAxis, xAxis: xAxis,
yAxis:[
{
type: 'value',
axisTick: {
color:"white"
},
axisLabel:{
color:'white',
formatter:"{value}%",
},
axisLine:{
lineStyle:{
color:'white'
},
},
splitLine:{
show:false,
color:'white'
}
}
],
series:[ series:[
{ {
name: "完成率", name: "完成率",
...@@ -281,8 +318,19 @@ export default { ...@@ -281,8 +318,19 @@ export default {
barWidth: "60%", barWidth: "60%",
data: seriesData, data: seriesData,
show:true, show:true,
itemStyle:{ position:"top",
color:'white' itemStyle: {
color: '#03a9f4'
},
label: {
normal: {
show: true,//开启显示
position: 'top',//柱形上方
textStyle: { //数值样式
color: '#fff'
},
formatter:'{c}%'
}
} }
} }
] ]
...@@ -296,14 +344,28 @@ export default { ...@@ -296,14 +344,28 @@ export default {
}).then(res=>{ }).then(res=>{
if(res.success){ if(res.success){
let value = res.data.records ? res.data.records : []; let value = res.data.records ? res.data.records : [];
let seriesData = [ let seriesStyle={
{name:"隐患数量",data:[],type:"bar"}, show:true, position:"top",
{name:"隐患关闭数量",data:[],type:"bar"}, label: {
{name:"超期未处理",data:[],type:"bar"}, normal: {
{name:"超期已处理",data:[],type:"bar"}, show: true,
position: 'top',
}
}
}
let seriesData = [];
let series = [
{name:"隐患数量",data:[],type:"bar",itemStyle: {color: '#FF9800'}},
{name:"隐患关闭数量",data:[],type:"bar",itemStyle: {color: '#4caf50'}},
{name:"超期未处理",data:[],type:"bar",itemStyle: {color: '#ff5722'}},
{name:"超期已处理",data:[],type:"bar",itemStyle: {color: '#03a9f4'}},
], xAxis = []; ], xAxis = [];
seriesData[0]={...seriesStyle,...series[0]};
seriesData[1]={...seriesStyle,...series[1]};
seriesData[2]={...seriesStyle,...series[2]};
seriesData[3]={...seriesStyle,...series[3]};
value.forEach(element => { value.forEach(element => {
xAxis.push(element.month); xAxis.push(element.month+"月");
seriesData[0]["data"].push(element.allCount||0); seriesData[0]["data"].push(element.allCount||0);
seriesData[1]["data"].push(element.yclCount||0); seriesData[1]["data"].push(element.yclCount||0);
seriesData[2]["data"].push(element.cqwclCount ||0); seriesData[2]["data"].push(element.cqwclCount ||0);
...@@ -323,9 +385,18 @@ export default { ...@@ -323,9 +385,18 @@ export default {
}).then(res=>{ }).then(res=>{
if(res.success){ if(res.success){
let value = res.data.records ? res.data.records : []; let value = res.data.records ? res.data.records : [];
let seriesStyle={
show:true, position:"top",
label: {
normal: {
show: true,
position: 'top',
}
}
}
let seriesData = [ let seriesData = [
{name:"全部",data:[],type:"bar",}, {name:"全部",data:[],type:"bar",itemStyle: {color: '#03a9f4'},...seriesStyle},
{name:"完成",data:[],type:"bar"}, {name:"完成",data:[],type:"bar",itemStyle: {color: '#4caf50'},...seriesStyle},
], xAxis = []; ], xAxis = [];
let lx={ let lx={
"D":"昨日", "D":"昨日",
...@@ -351,10 +422,30 @@ export default { ...@@ -351,10 +422,30 @@ export default {
}).then(res=>{ }).then(res=>{
if(res.success){ if(res.success){
let value = res.data.records ? res.data.records : []; let value = res.data.records ? res.data.records : [];
let seriesStyle={
show:true, position:"top",
label: {
normal: {
show: true,
position: 'top',
}
}
}
let seriesStyle2={
show:true, position:"top",
label: {
normal: {
show: true,
position: 'top',
formatter:"{c}%"
},
}
}
let seriesData = [ let seriesData = [
{name:"全部",data:[],type:"bar", yAxisIndex: 0,}, {name:"全部",data:[],type:"bar", yAxisIndex: 0,itemStyle: {color: '#03a9f4'},...seriesStyle},
{name:"完成",data:[],type:"bar", yAxisIndex: 0,}, {name:"完成",data:[],type:"bar", yAxisIndex: 0,itemStyle: {color: '#4caf50'},...seriesStyle},
{name:"完成率",data:[],type:"line", yAxisIndex: 1}, {name:"完成率",data:[],type:"line", yAxisIndex: 1,itemStyle: {color: '#FF9800'},...seriesStyle2},
], xAxis = [],yAxis=[]; ], xAxis = [],yAxis=[];
let lx={ let lx={
"D":"昨日", "D":"昨日",
...@@ -373,7 +464,7 @@ export default { ...@@ -373,7 +464,7 @@ export default {
}, },
}, },
splitLine:{ splitLine:{
show:true, show:false,
color:'white' color:'white'
}} }}
yAxis=[{},{}]; yAxis=[{},{}];
...@@ -405,9 +496,33 @@ export default { ...@@ -405,9 +496,33 @@ export default {
}).then(res=>{ }).then(res=>{
if(res.success){ if(res.success){
let value = res.data.records ? res.data.records : []; let value = res.data.records ? res.data.records : [];
let seriesStyle={
show:true, position:"top",
label: {
normal: {
show: true,
position: 'top',
}
}
};
let yAxisStyle={axisTick: {
color:"white"
},
axisLabel:{
color:'white'
},
axisLine:{
lineStyle:{
color:'white'
},
},
splitLine:{
show:false,
color:'white'
}}
let seriesData = [ let seriesData = [
{name:"持证人数",data:[],type:"bar",}, {name:"持证人数",data:[],type:"bar",barWidth:20, stack: 'total',itemStyle: {color: '#03a9f4'},...seriesStyle},
{name:"即将到期",data:[],type:"bar"}, {name:"即将到期",data:[],type:"bar",barWidth:20, stack: 'total',itemStyle: {color: 'orange'},...seriesStyle},
], xAxis = []; ], xAxis = [];
value.forEach(element => { value.forEach(element => {
xAxis.push(element.flName); xAxis.push(element.flName);
...@@ -419,11 +534,11 @@ export default { ...@@ -419,11 +534,11 @@ export default {
yAxis: { yAxis: {
name:"种类", name:"种类",
data:xAxis, data:xAxis,
type:"category" type:"category",...yAxisStyle
}, },
customxAxis:{ customxAxis:{
type:"value", type:"value",
boundaryGap: [0, 0.01] boundaryGap: [0, 0.01],...yAxisStyle
}, },
series:seriesData series:seriesData
}) })
...@@ -491,7 +606,8 @@ export default { ...@@ -491,7 +606,8 @@ export default {
] ]
} }
/* 渲染dom*/ /* 渲染dom*/
chartDom.setOption(option) chartDom.setOption(option);
chartDom.resize();
}, },
//渲染柱状图 //渲染柱状图
setBarhart(chartDom, setting) { setBarhart(chartDom, setting) {
...@@ -500,7 +616,7 @@ export default { ...@@ -500,7 +616,7 @@ export default {
title: { title: {
show: true, show: true,
text: setting.title || "", text: setting.title || "",
top: 0, top: 20,
left: "center", left: "center",
textStyle: { textStyle: {
fontSize: 18, fontSize: 18,
...@@ -526,12 +642,14 @@ export default { ...@@ -526,12 +642,14 @@ export default {
{ {
type: 'category', type: 'category',
data: setting.xAxis, data: setting.xAxis,
axisTick: { axisTick: {
alignWithLabel: true, alignWithLabel: true,
color:"white" color:"white"
}, },
axisLabel:{ axisLabel:{
color:'white' color:'white',
interval: 0, // 横轴信息全部显示
}, },
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
...@@ -559,7 +677,7 @@ export default { ...@@ -559,7 +677,7 @@ export default {
}, },
}, },
splitLine:{ splitLine:{
show:true, show:false,
color:'white' color:'white'
} }
} }
...@@ -567,7 +685,8 @@ export default { ...@@ -567,7 +685,8 @@ export default {
series: setting.series||[] series: setting.series||[]
} }
/* 渲染dom*/ /* 渲染dom*/
chartDom.setOption(option) chartDom.setOption(option);
chartDom.resize();
}, },
...@@ -594,7 +713,6 @@ export default { ...@@ -594,7 +713,6 @@ export default {
width: 35%; width: 35%;
height: 100%; height: 100%;
} }
.nodata { .nodata {
...@@ -616,7 +734,7 @@ export default { ...@@ -616,7 +734,7 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: absolute; position: absolute;
height: 117px; height: 90px;
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
z-index: 999; z-index: 999;
...@@ -647,7 +765,13 @@ export default { ...@@ -647,7 +765,13 @@ export default {
position: relative; position: relative;
display: flex; display: flex;
background-image: url('~@/assets/images/data08.png'); background-image: url('~@/assets/images/data08.png');
.el-button{
margin-top: 10px;
}
.el-button:first-child{
display: block;
width: 100%;
}
.page-left { .page-left {
flex: 1; flex: 1;
height: 100%; height: 100%;
...@@ -687,12 +811,13 @@ export default { ...@@ -687,12 +811,13 @@ export default {
width: 100%; width: 100%;
height: 70%; height: 70%;
.gs-select{ .gs-select{
height: 200px; height: 148px;
width: 100%; width: 100%;
} }
.gs-picture{ .gs-picture{
height: calc(100% - 200px ); height: calc(100% - 148px );
width: 100%; width: 100%;
padding: 4px 10px;
} }
} }
.page-center-b { .page-center-b {
...@@ -704,13 +829,18 @@ export default { ...@@ -704,13 +829,18 @@ export default {
.page-right { .page-right {
flex:1; flex:1;
height: 100%; height: 100%;
float: right;
.page-right-t, .page-right-t,
.page-right-c,
.page-right-b { .page-right-b {
width: 100%; width: 100%;
height: 33.3%; height: 30%;
}
.page-right-c{
width: 100%;
height: 40%;
}
} }
.chart-auto{
width: 100%;height: 100%;
} }
}</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