Skip to content

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

首页

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