Skip to content

G
gavel-hafms-vue
Commit f73e0bf1 authored by 李苏's avatar 李苏 💬
Browse files
Options

加弹框以及调整

parent 79816d2b
Show whitespace changes
Inline Side-by-side
Showing with 951 additions and 72 deletions
src/views/hzcxbb/szkb/index.vue
View file @ f73e0bf1
<template>
<!-- -->
<div v-loading='isLoading' element-loading-text="数据载入中..." id="szkb">
<!-- <Dialog :app='dialog' v-if="dialog.showDialog" /> -->
<Yszx :app='dialog' v-if="dialog.showDialog" />
<Yszx :app='dialog' v-if="dialog.showDialog&&dialog.DialogName=='Yszx'" />
<R1 :app='dialog' v-if="dialog.showDialog&&dialog.DialogName=='R1'" />
<R1 :app='dialog' v-if="dialog.showDialog&&dialog.DialogName=='R2'" />
<!-- 弹框区域-->
<div class="title">
大数据展示平台
</div>
......@@ -14,9 +18,9 @@
<i class="i2"></i>
<i class="i3"></i>
<i class="i4"></i>
<div class="full" style="height: 50%;">
<div class="full" style="height: 100%;">
<span class="com-count-title">
{{lqndylName1}}
{{'业务预算总体执行情况(按单位)'}}
</span>
<div v-echartResize="()=>{
if(lg1){
......@@ -27,7 +31,7 @@
</div>
</div>
<div class="full" style="height: 50%;">
<!-- <div class="full" style="height: 50%;">
<span class="com-count-title">
{{lqndylName2}}
</span>
......@@ -38,7 +42,7 @@
}" ref="lg2" class="com-count-body">
</div>
</div>
</div> -->
</div>
</div>
......@@ -52,13 +56,13 @@
<i class="i4"></i>
<!-- 排行数据-->
<div style="color: #61d2f7;float: left;font-size: .9vw;margin-top: 2vh;margin-left: 2vh;">
总体排名:1
<br>
资本排名:2
<br>
成本项目:2
<br>
标准成本:2
<pre>
总体排名: 1
资本排名: 2
成本排名
-成本项目:2
-标准成本:2
</pre>
</div>
<div class="full" ref="szkbmap" v-echartResize="()=>{
szkbmapCharts.resize()
......@@ -69,14 +73,14 @@
</div>
<div class="third">
<div class="itemmain boxall itembg ">
<div @click="openR1" style="cursor: pointer;" class="itemmain boxall itembg ">
<i class="i1"></i>
<i class="i2"></i>
<i class="i3"></i>
<i class="i4"></i>
<div class="full" style="height: 50%;">
<div class="full" style="height: 100%;">
<span class="com-count-title">
{{lhName1}}
{{'资本性预算执行情况(按单位)'}}
</span>
<div v-echartResize="()=>{
if(lg3){
......@@ -86,7 +90,7 @@
</div>
</div>
<div class="full" style="height: 50%;">
<!-- <div class="full" style="height: 50%;">
<span class="com-count-title">
{{lhName2}}
</span>
......@@ -97,7 +101,7 @@
}" ref="lg4" class="com-count-body">
</div>
</div>
</div> -->
</div>
</div>
......@@ -111,11 +115,9 @@
<i class="i4"></i>
<div class="full itembg ">
<!-- 轮播图-->
<el-carousel :indicator-position='"none"' style="overflow: hidden;" :interval='10000' class="full"
:autoplay="true">
<el-carousel-item style="height: 45vh;">
<div class="full">
<span class="com-count-title">
预算执行分析-标准成本(单位)
稽核问题展示
</span>
<div ref="slt" v-echartResize="()=>{
if(slt1){
......@@ -124,20 +126,7 @@
}" class="com-count-body">
</div>
</el-carousel-item>
<el-carousel-item style="height: 45vh;">
<span class="com-count-title">
预算执行分析-标准成本(科目)
</span>
<div ref="slt2" v-echartResize="()=>{
if(slt2){
slt2.resize()
}
}" class="com-count-body">
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
......@@ -195,16 +184,14 @@
</div>
</div>
<div class="third">
<div class="itemmainb boxall itembg ">
<div @click="openR2" style="cursor: pointer;" class="itemmainb boxall itembg ">
<i class="i1"></i>
<i class="i2"></i>
<i class="i3"></i>
<i class="i4"></i>
<el-carousel :indicator-position='"none"' style="overflow: hidden;" :interval='10000' class="full"
:autoplay="true">
<el-carousel-item style="height: 45vh;">
<div class="full">
<span class="com-count-title">
预算执行分析-成本性项目(单位)
成本性预算执行情况(按单位)
</span>
<div ref="slt3" v-echartResize="()=>{
if(slt3){
......@@ -213,20 +200,7 @@
}" class="com-count-body">
</div>
</el-carousel-item>
<el-carousel-item style="height: 45vh;">
<span class="com-count-title">
预算执行分析-成本性项目(专业)
</span>
<div ref="slt4" v-echartResize="()=>{
if(slt4){
slt4.resize()
}
}" class="com-count-body">
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
......@@ -237,6 +211,8 @@
import huaian from "common/src/assets/mapJson/huaian.json"
import Dialog from "./dialog.vue"
import Yszx from './yszx.vue'
import R1 from './r1.vue'
import R2 from './r2.vue'
import {
doQuery,
doDelete,
......@@ -253,7 +229,9 @@
components: {
vueSeamless,
Dialog,
Yszx
Yszx,
R1,
R2
},
mounted() {
this.mounted()
......@@ -289,6 +267,7 @@
/* 加载蒙层*/
isLoading: true,
dialog: {
DialogName:null,
showDialog: false,
DialogTitle: '测试',
DialogWidth: '40vw'
......@@ -298,6 +277,16 @@
}
},
methods: {
openR1(){
this.dialog.DialogTitle ='资本性预算执行情况'
this.dialog.DialogName='R1'
this.dialog.showDialog = true
},
openR2(){
this.dialog.DialogTitle ='成本性预算执行情况'
this.dialog.DialogName='R2'
this.dialog.showDialog = true
},
mounted() {
/*初始化*/
/* 地图后端数据*/
......@@ -333,6 +322,9 @@
let lsxList = records.filter(item => {
return item.bmName == '涟水县供电公司'
})
let hyList = records.filter(item => {
return item.bmName == '淮阴区供电公司'
})
/* 滚动表格数据*/
this.$post('hafms/yszxjdlog/queryRepDetail', {}).then(res => {
if (res.success) {
......@@ -347,20 +339,24 @@
fullScreen(document.getElementById("szkb"));
}, false);
/* 初始化地图*/
debugger
this.szkbmapCharts = this.initSzkbmapCharts({
habbList: habbList,
jhxList: jhxList,
xyxList: xyxList,
hzxList: hzxList,
lsxList: lsxList
lsxList: lsxList,
hyList:hyList
})
this.szkbmapCharts.on("click", (params) => {
console.log(params)
if (params.data) {
//获取到定义的数据
let info = params.data.data
/* 弹框传参查询*/
this.dialog.bmid = info.bmid
this.dialog.DialogTitle = info.bmName
this.dialog.DialogName='Yszx'
this.dialog.showDialog = true
}
});
......@@ -374,7 +370,7 @@
this.initslt()
this.initslt2()
this.initslt3()
this.initslt4()
// this.initslt4()
},
initLqnd() {
......@@ -418,7 +414,7 @@
}
})
this.lg1 = this.initlg1(showLxg1)
this.lg2 = this.initlg2(showLxg2)
// this.lg2 = this.initlg2(showLxg2)
}
}
})
......@@ -465,7 +461,7 @@
})
this.lg3 = this.initlg3(showLxg1)
this.lg4 = this.initlg4(showLxg2)
// this.lg4 = this.initlg4(showLxg2)
}
}
})
......@@ -478,7 +474,8 @@
jhxList,
xyxList,
hzxList,
lsxList
lsxList,
hyList
}) {
this.mapList = []
let huaian1 = _.cloneDeep(huaian)
......@@ -561,7 +558,24 @@
data: item.properties.apiData
})
}
} else {
}
/* 未加*/
else if (item.properties.name == '淮阴区') {
item.properties.name = '淮阴区供电公司'
if (lsxList.length != 0) {
item.properties.apiData = lsxList[0]
item.properties.name = `淮阴区供电公司
${hyList?0:hyList[0].pm}
${hyList?0:hyList[0].wcl}%
`
this.mapList.push({
name: item.properties.name,
data: item.properties.apiData
})
}
}else {
item.properties.name = ''
}
})
......@@ -2013,6 +2027,7 @@
<style lang="scss" scoped>
#szkb {
.com-count-title {
transform: translateY(10px);
font-size: 1vw;
......
src/views/hzcxbb/szkb/r1.vue 0 → 100644
View file @ f73e0bf1
<template>
<DefaultDialog :appendToBody='false' :app='app'>
<div slot="form" style="display: flex;height: 70vh;">
<!-- 下拉框切换-->
<div class="xlk">
<el-select :popper-append-to-body='false' v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<!-- 图表框-->
<div class="full">
<div v-show="value=='1'" ref="v1" v-echartResize="()=>{
if(v1){
v1.resize()
}
}" class="full">1 </div>
<div v-show="value=='2'" ref="v2" v-echartResize="()=>{
if(v2){
v2.resize()
}
}" class="full">2 </div>
</div>
</div>
</DefaultDialog>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
async mounted() {
this.$nextTick(() => {
this.v1= this.initv1()
this.v2= this.initv2()
})
},
data() {
return {
v1:null,
v2:null,
options: [{
value: '1',
label: '单位'
}, {
value: '2',
label: '项目类型'
}],
value: '1'
}
},
methods: {
initv1(apidata) {
let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb']
const charts = this.$echarts.init(this.$refs["v1"]);
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
right: 10,
top: 10,
textStyle: {
color: '#61d2f7'
},
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: []
},
grid: {
left: '10%',
top: '23%',
right: '10%',
bottom: '15%',
},
xAxis: {
type: 'category',
data: [],
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
formatter: function(value) {
if (value.length > 7) {
return value.slice(0, 7) + '...';
}
return value;
},
color: "#fff",
fontSize: 10,
interval: 0,
},
},
yAxis: {
name: "（万元）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
},
},
series: [{
stack: '预算',
name: '年度预算目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[0],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算',
name: '平衡目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[1],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算',
name: '累计分解值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[2],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算', // 设置堆叠的组名
type: "bar",
name: '发生值',
barWidth: 18,
itemStyle: {
normal: {
color: colorList[3], // 设置柱状图的颜色
},
},
label: {
show: false,
position: 'top', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
],
};
charts.setOption(option);
return charts
},
initv2(apidata) {
let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb']
const charts = this.$echarts.init(this.$refs["v2"]);
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
right: 10,
top: 10,
textStyle: {
color: '#61d2f7'
},
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: []
},
grid: {
left: '10%',
top: '23%',
right: '10%',
bottom: '15%',
},
xAxis: {
type: 'category',
data: [],
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
formatter: function(value) {
if (value.length > 7) {
return value.slice(0, 7) + '...';
}
return value;
},
color: "#fff",
fontSize: 10,
interval: 0,
},
},
yAxis: {
name: "（万元）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
},
},
series: [{
stack: '预算',
name: '年度预算目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[0],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算',
name: '平衡目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[1],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算',
name: '累计分解值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[2],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算', // 设置堆叠的组名
type: "bar",
name: '发生值',
barWidth: 18,
itemStyle: {
normal: {
color: colorList[3], // 设置柱状图的颜色
},
},
label: {
show: false,
position: 'top', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
],
};
charts.setOption(option);
return charts
},
}
}
</script>
<style scoped>
.xlk {
width: 100px;
position: absolute;
right: 60px;
top: 10px;
}
/deep/.el-dialog {
background: url(./static/bg.png);
background-size: 100% 100%;
opacity: 1;
}
/deep/.el-dialog__title {
color: #fff;
}
.search-span {
color: #fff !important;
}
.min_full {
border: 0px solid !important;
}
.search {
border: 0px solid !important;
}
/deep/.el-table th.el-table__cell {
background-color: rgba(0, 0, 0, .2) !important;
color: #25c2da !important;
font-size: 13px !important;
font-weight: 500 !important;
}
/deep/.el-table tr {
background-color: rgba(0, 0, 0, .2) !important;
color: #25c2da !important;
font-size: 13px !important;
font-weight: 500 !important;
}
/deep/.el-table {
background-color: rgba(0, 0, 0, .2) !important;
}
/deep/ .el-popper{
z-index: 9999!important;
}
</style>
src/views/hzcxbb/szkb/r2.vue 0 → 100644
View file @ f73e0bf1
<template>
<DefaultDialog :appendToBody='false' :app='app'>
<div slot="form" style="display: flex;height: 70vh;">
<!-- 下拉框切换-->
<div class="xlk">
<el-select :popper-append-to-body='false' v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<!-- 图表框-->
<div class="full">
<div v-show="value=='1'" ref="v1" v-echartResize="()=>{
if(v1){
v1.resize()
}
}" class="full">1 </div>
<div v-show="value=='2'" ref="v2" v-echartResize="()=>{
if(v2){
v2.resize()
}
}" class="full">2 </div>
</div>
</div>
</DefaultDialog>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
async mounted() {
this.$nextTick(() => {
this.v1= this.initv1()
this.v2= this.initv2()
})
},
data() {
return {
v1:null,
v2:null,
options: [{
value: '1',
label: '单位'
}, {
value: '2',
label: '项目类型'
}],
value: '1'
}
},
methods: {
initv1(apidata) {
let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb']
const charts = this.$echarts.init(this.$refs["v1"]);
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
right: 10,
top: 10,
textStyle: {
color: '#61d2f7'
},
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: []
},
grid: {
left: '10%',
top: '23%',
right: '10%',
bottom: '15%',
},
xAxis: {
type: 'category',
data: [],
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
formatter: function(value) {
if (value.length > 7) {
return value.slice(0, 7) + '...';
}
return value;
},
color: "#fff",
fontSize: 10,
interval: 0,
},
},
yAxis: {
name: "（万元）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
},
},
series: [{
stack: '预算',
name: '年度预算目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[0],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算',
name: '平衡目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[1],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算',
name: '累计分解值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[2],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算', // 设置堆叠的组名
type: "bar",
name: '发生值',
barWidth: 18,
itemStyle: {
normal: {
color: colorList[3], // 设置柱状图的颜色
},
},
label: {
show: false,
position: 'top', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
],
};
charts.setOption(option);
return charts
},
initv2(apidata) {
let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb']
const charts = this.$echarts.init(this.$refs["v2"]);
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
right: 10,
top: 10,
textStyle: {
color: '#61d2f7'
},
left: 'center',
itemWidth: 9,
itemHeight: 9,
data: []
},
grid: {
left: '10%',
top: '23%',
right: '10%',
bottom: '15%',
},
xAxis: {
type: 'category',
data: [],
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
formatter: function(value) {
if (value.length > 7) {
return value.slice(0, 7) + '...';
}
return value;
},
color: "#fff",
fontSize: 10,
interval: 0,
},
},
yAxis: {
name: "（万元）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
},
},
series: [{
stack: '预算',
name: '年度预算目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[0],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算',
name: '平衡目标值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[1],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算',
name: '累计分解值',
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: colorList[2],
},
},
label: {
show: false,
position: 'top',
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
{
stack: '预算', // 设置堆叠的组名
type: "bar",
name: '发生值',
barWidth: 18,
itemStyle: {
normal: {
color: colorList[3], // 设置柱状图的颜色
},
},
label: {
show: false,
position: 'top', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: []
},
],
};
charts.setOption(option);
return charts
},
}
}
</script>
<style scoped>
.xlk {
width: 100px;
position: absolute;
right: 60px;
top: 10px;
}
/deep/.el-dialog {
background: url(./static/bg.png);
background-size: 100% 100%;
opacity: 1;
}
/deep/.el-dialog__title {
color: #fff;
}
.search-span {
color: #fff !important;
}
.min_full {
border: 0px solid !important;
}
.search {
border: 0px solid !important;
}
/deep/.el-table th.el-table__cell {
background-color: rgba(0, 0, 0, .2) !important;
color: #25c2da !important;
font-size: 13px !important;
font-weight: 500 !important;
}
/deep/.el-table tr {
background-color: rgba(0, 0, 0, .2) !important;
color: #25c2da !important;
font-size: 13px !important;
font-weight: 500 !important;
}
/deep/.el-table {
background-color: rgba(0, 0, 0, .2) !important;
}
/deep/ .el-popper{
z-index: 9999!important;
}
</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