Skip to content

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

执行进度，图标

parent 62781892
Hide whitespace changes
Inline Side-by-side
Showing with 1370 additions and 233 deletions
src/api/sbysjsp/yszxjd.js 0 → 100644
View file @ 31d2ffd8
import request from 'common/src/utils/request'
/* query */
export function doQuery(query) {
return request({
url: 'hafms/yszxjdlog/query',
method: 'post',
data: query||{}
})
}
export function doDelete(query) {
return request({
url: '/hafms/yszxjdlog/delete',
method: 'post',
data: query||{}
})
}
export function doQueryDetail(query){
return request({
url:'hafms/yszxjdlog/queryDetail',
method: 'post',
data: query||{}
})
}
src/router/index.js
View file @ 31d2ffd8
...@@ -253,6 +253,19 @@ export const powerRoutes=[ ...@@ -253,6 +253,19 @@ export const powerRoutes=[
}, },
name:'hyha', name:'hyha',
path:"hyha" path:"hyha"
},
{
component:'sbysjsp/yszxjd/index',
hidden:false,
meta:{
"title": "预算执行进度",
"icon": "",
"noCache": false,
"link": null,
"mkid": 901030520,
},
name:'yszxjd',
path:"yszxjd"
} }
...@@ -332,6 +345,19 @@ export const powerRoutes=[ ...@@ -332,6 +345,19 @@ export const powerRoutes=[
path:"szkb" path:"szkb"
}, },
// { // {
// component:'hzcxbb/render/index',
// hidden:false,
// meta:{
// "title": "render",
// "icon": "",
// "noCache": false,
// "link": null,
// "mkid":'test',
// },
// name:'render',
// path:"render"
// },
// {
// component:'hzcxbb/ysspzl/index', // component:'hzcxbb/ysspzl/index',
// hidden:false, // hidden:false,
// meta:{ // meta:{
......
src/views/hzcxbb/render/index.vue 0 → 100644
View file @ 31d2ffd8
<script>
import Templage from './template.js';
export default{
mounted() {
/* 函数式编程*/
},
data() {
return{
isdo:true
}
},
methods:{
doSave(){
}
},
render(h){
let render=new Templage('div')
render.$addAttr('do','isdo').$addEvent('save','doSave').addTag('span').addAttr('class','spanclass')
let vd=render.get()
return vd
}
}
</script>
<style>
</style>
src/views/hzcxbb/render/template.js 0 → 100644
View file @ 31d2ffd8
/* string 模板编写函数 */
export default class templage {
constructor(tag) {
let tagObg = {
tagName: tag,
children: [],
attr: [],
$attr: [],
event: [],
$event: []
}
this.getTagObg = function() {
return tagObg;
};
}
/* 静态属性*/
addAttr(name, value) {
let attr = {
name: name,
value: value
}
this.getTagObg().attr.push(attr)
return this
}
/* 动态属性*/
$addAttr(name, value) {
let attr = {
name: name,
value: value
}
this.getTagObg().$attr.push(attr)
return this
}
/* 非绑定函数*/
addEvent(name, value) {
let attr = {
name: name,
value: value
}
this.getTagObg().event.push(attr)
return this
}
/* 实例方法*/
$addEvent(name, value) {
let attr = {
name: name,
value: value
}
this.getTagObg().$event.push(attr)
return this
}
addTag(name) {
let tagobj = new templage(name)
this.getTagObg().children.push(tagobj)
return tagobj
}
getJs() {
return this.getTagObg()
}
get() {
let obj = this.getTagObg()
let template = '';
template += `<${obj.tagName}`;
// 渲染静态属性
if (obj.attr.length > 0) {
obj.attr.forEach(attr => {
template += ` ${attr.name}="${attr.value}"`;
});
}
// 渲染动态属性
if (obj.$attr.length > 0) {
obj.$attr.forEach(attr => {
template += ` :${attr.name}="${attr.value}"`;
});
}
if (obj.event.length > 0) {
obj.event.forEach(attr => {
template += ` @${attr.name}="${attr.value}"`;
});
}
if (obj.$event.length > 0) {
obj.$event.forEach(attr => {
template += ` @${attr.name}="${attr.value}"`;
});
}
template += '>';
// 渲染子节点
if (obj.children.length > 0) {
obj.children.forEach(child => {
template += child.get();
});
}
template += `</${obj.tagName}>`;
return template;
}
}
\ No newline at end of file
src/views/hzcxbb/szkb/dialog.vue
View file @ 31d2ffd8
...@@ -2,66 +2,6 @@ ...@@ -2,66 +2,6 @@
<DefaultDialog :appendToBody='false' :app='app'> <DefaultDialog :appendToBody='false' :app='app'>
<div slot="form" class="min_full" style="display: flex;height: 80vh;"> <div slot="form" class="min_full" style="display: flex;height: 80vh;">
<Detail ref="detail" :app='this' v-if="showDialog" /> <Detail ref="detail" :app='this' v-if="showDialog" />
<!-- <div class="search" v-condition>
<SearchButton :app='this'></SearchButton>
<el-row :gutter="20" class="search-row-1">
<el-col :span="5" class="search-col">
<div class="search-item">
<span class="search-span">开始日期:</span>
<el-date-picker :popper-append-to-body="false" value-format="timestamp" v-model='queryParams.start'></el-date-picker>
</div>
</el-col>
<el-col :span="5" class="search-col">
<div class="search-item">
<span class="search-span">截止日期:</span>
<el-date-picker :popper-append-to-body="false" value-format="timestamp" v-model='queryParams.end'></el-date-picker>
</div>
</el-col>
<el-col :span="5" class="search-col">
<div class="search-item">
<span class="search-span">预算任务:</span>
<RelSelect style="width: 100%;" src='hafms/ysfl/query' filterable clearable
:match="{value:'id',label:'name'}" v-model='queryParams.flid'></RelSelect>
</div>
</el-col>
<el-col :span="5" class="search-col">
<div class="search-item">
<span class="search-span">状态:</span>
<RelSelect style="width: 100%;" src='hafms/yssq/init/zt' filterable clearable
:match="{value:'id',label:'name'}" v-model='queryParams.zt'></RelSelect>
</div>
</el-col>
<el-col :span="4" class="search-col">
<el-checkbox @change="tzxx" true-label='Y' false-label='N' v-model="queryParams.xsystz">显示调整信息</el-checkbox>
</el-col>
</el-row>
<el-row :gutter="20" class="search-row-1">
<el-col :span="8" class="search-col">
<div class="search-item">
<span class="search-span">申请订单:</span>
<el-input v-model="queryParams.djid"></el-input>
</div>
</el-col>
<el-col :span="8" class="search-col">
<div class="search-item">
<span class="search-span">申请公司:</span>
<RelSelect collapse-tags multiple style="width: 100%;" src='hafms/common/sjbm/query' filterable clearable
:match="{value:'id',label:'bmmc'}" v-model='queryParams.sjbmids'></RelSelect>
</div>
</el-col>
<el-col :span="8" class="search-col">
<div class="search-item">
<span class="search-span">申请部门:</span>
<RelSelect linkage :linkParams="{sjbmids:queryParams.sjbmids}" :params="{
pids:queryParams.sjbmids.join()
}" collapse-tags multiple style="width: 100%;" src='hafms/common/bm/query' filterable clearable
:match="{value:'id',label:'bmmc'}" v-model='queryParams.chooseBmids'></RelSelect>
</div>
</el-col>
</el-row>
</div> -->
<!-- 按钮操作-->
<!-- 表格--> <!-- 表格-->
......
src/views/hzcxbb/szkb/index.vue
View file @ 31d2ffd8
<template> <template>
<div id="szkb"> <div v-loading='isLoading' element-loading-text="数据载入中..." id="szkb">
<Dialog :app='dialog' v-if="dialog.showDialog" /> <!-- <Dialog :app='dialog' v-if="dialog.showDialog" /> -->
<Yszx :app='dialog' v-if="dialog.showDialog" />
<!-- 弹框区域--> <!-- 弹框区域-->
<div class="title"> <div class="title">
大数据展示平台 大数据展示平台
...@@ -8,24 +9,39 @@ ...@@ -8,24 +9,39 @@
<div class="main"> <div class="main">
<div class="first"> <div class="first">
<div class="itemtitle itemtitlebg1"> <div class="itemtitle itemtitlebg1">
主题1 两区农电预算一览
</div> </div>
<div class="itemmain boxall itembg "> <div class="itemmain boxall itembg ">
<i class="i1"></i> <i class="i1"></i>
<i class="i2"></i> <i class="i2"></i>
<i class="i3"></i> <i class="i3"></i>
<i class="i4"></i> <i class="i4"></i>
<div class="full"> <div class="full" style="height: 50%;">
<span class="com-count-title"> <span class="com-count-title">
小标题 {{lqndylName1}}
</span> </span>
<div v-echartResize="()=>{
lg1.resize()
}" ref="lg1" class="com-count-body">
</div>
</div>
<div class="full" style="height: 50%;">
<span class="com-count-title">
{{lqndylName2}}
</span>
<div v-echartResize="()=>{
lg2.resize()
}" ref="lg2" class="com-count-body">
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="second"> <div class="second">
<div class="itemtitle maintitle " style=""> <div class="itemtitle maintitle " style="">
淮安总览 淮安公司预算执行进度全市排名：{{hapm}}
</div> </div>
<!-- 地图--> <!-- 地图-->
<div class="itemmain boxall "> <div class="itemmain boxall ">
...@@ -42,17 +58,32 @@ ...@@ -42,17 +58,32 @@
</div> </div>
<div class="third"> <div class="third">
<div class="itemtitle itemtitlebg2"> <div class="itemtitle itemtitlebg2">
主题3 淮安淮阴预算一览
</div> </div>
<div class="itemmain boxall itembg "> <div class="itemmain boxall itembg ">
<i class="i1"></i> <i class="i1"></i>
<i class="i2"></i> <i class="i2"></i>
<i class="i3"></i> <i class="i3"></i>
<i class="i4"></i> <i class="i4"></i>
<div class="full"> <div class="full" style="height: 50%;" >
<span class="com-count-title"> <span class="com-count-title">
小标题 {{lhName1}}
</span> </span>
<div v-echartResize="()=>{
lg3.resize()
}" ref="lg3" class="com-count-body">
</div>
</div>
<div class="full" style="height: 50%;" >
<span class="com-count-title">
{{lhName2}}
</span>
<div v-echartResize="()=>{
lg4.resize()
}" ref="lg4" class="com-count-body">
</div>
</div> </div>
</div> </div>
...@@ -68,7 +99,7 @@ ...@@ -68,7 +99,7 @@
<i class="i4"></i> <i class="i4"></i>
<div class="full itembg "> <div class="full itembg ">
<span class="com-count-title"> <span class="com-count-title">
小标题
</span> </span>
</div> </div>
...@@ -106,7 +137,7 @@ ...@@ -106,7 +137,7 @@
</div> </div>
</div> </div>
<vueSeamless :class-option="optionSingleHeight" :data="listData" class="lbbody" style="overflow: hidden;"> <vueSeamless :class-option="optionSingleHeight" :data="listData" class="lbbody" style="overflow: hidden;">
<div class="full lbtit" > <div class="full lbtit">
<div style="line-height: 25px;display: flex;" v-for="item in listData"> <div style="line-height: 25px;display: flex;" v-for="item in listData">
<div style="color: #fff ;" v-text="item.title"></div> <div style="color: #fff ;" v-text="item.title"></div>
<div style="color: #fff ;" v-text="item.title"></div> <div style="color: #fff ;" v-text="item.title"></div>
...@@ -136,7 +167,7 @@ ...@@ -136,7 +167,7 @@
</span> </span>
<div ref="sdt" v-echartResize="()=>{ <div ref="sdt" v-echartResize="()=>{
sdtCharts.resize() sdtCharts.resize()
}" class="com-count-body"> }" class="com-count-body">
</div> </div>
</div> </div>
...@@ -149,10 +180,16 @@ ...@@ -149,10 +180,16 @@
</template> </template>
<script> <script>
import vueSeamless from 'vue-seamless-scroll' import vueSeamless from 'vue-seamless-scroll'
import huaian from "common/src/assets/mapJson/huaian.json" import huaian from "common/src/assets/mapJson/huaian.json"
import Dialog from "./dialog.vue" import Dialog from "./dialog.vue"
import Yszx from './yszx.vue'
import {
doQuery,
doDelete,
doQueryDetail
} from '@/api/sbysjsp/yszxjd.js';
export default { export default {
computed: { computed: {
...@@ -164,31 +201,99 @@ ...@@ -164,31 +201,99 @@
}, },
components: { components: {
vueSeamless, vueSeamless,
Dialog Dialog,
Yszx
}, },
mounted() { mounted() {
this.initHuanai() /* 地图后端数据*/
this.$nextTick(() => { doQueryDetail({
document.getElementById("szkb").addEventListener('dblclick', function(e) { "sjlx": 'HJ'
fullScreen(document.getElementById("szkb")); }).then(res => {
}, false); if (res && res.success) {
/* 初始化地图*/
this.szkbmapCharts = this.initSzkbmapCharts() /* 获取数据后操作*/
this.sdtCharts=this.initsdt() let {
this.szkbmapCharts.on("click", (params)=>{ records
this.dialog.DialogTitle=params.name } = res.data
this.dialog.showDialog=true let haRecord = records.filter(item => {
console.log(`${params.name}`) return item.gsbz == 'Y'
}); })
if (haRecord.length != 0) {
/* 取第一条*/
this.hapm = haRecord[0].pm
}
/* 其他部门数据 目前按照部门名称进行过滤 */
let habbList = records.filter(item => {
return item.bmName == '淮安供电公司本部'
})
let jhxList = records.filter(item => {
return item.bmName == '金湖县供电公司'
})
let xyxList = records.filter(item => {
return item.bmName == '盱眙县供电公司'
})
let hzxList = records.filter(item => {
return item.bmName == '洪泽县供电公司'
})
let lsxList = records.filter(item => {
return item.bmName == '涟水县供电公司'
})
// 初始地图JSON数据
this.$nextTick(() => {
document.getElementById("szkb").addEventListener('dblclick', function(e) {
fullScreen(document.getElementById("szkb"));
}, false);
/* 初始化地图*/
this.szkbmapCharts = this.initSzkbmapCharts({
habbList: habbList,
jhxList: jhxList,
xyxList: xyxList,
hzxList: hzxList,
lsxList: lsxList
})
this.sdtCharts = this.initsdt()
this.szkbmapCharts.on("click", (params) => {
if (params.data) {
//获取到定义的数据
let info = params.data.data
/* 弹框传参查询*/
this.dialog.bmid = info.bmid
this.dialog.DialogTitle = info.bmName
this.dialog.showDialog = true
}
});
})
}
}) })
this.initLqnd()
this.initLqnd2()
this.isLoading = false
}, },
data() { data() {
return { return {
dialog:{ /* 两区农电预算一览 */
showDialog:false, lqndylName1: '',
DialogTitle:'测试', lqndylName2: '',
DialogWidth:'80vw' lhName1:'',
lhName2:'',
/* 两区农电预算一览*/
hapm: 1,
/* 加载蒙层*/
isLoading: true,
dialog: {
showDialog: false,
DialogTitle: '测试',
DialogWidth: '40vw'
}, },
listData: [{ listData: [{
data: 112, data: 112,
...@@ -238,167 +343,573 @@ ...@@ -238,167 +343,573 @@
} }
}, },
methods: { methods: {
initLqnd() {
this.$post('hafms/yszhcxlog/query', {
lx: 'A'
}).then(res => {
if (res && res.success && res.data.records && res.data.records.length > 0) {
let newData = res.data.records[0]
this.$post('hafms/yszhcxlog/queryDetail', {
mid: newData.id,
}).then(res => {
if (res.success && res.data.records) {
const {
records
} = res.data
if (records.length != 0) {
let lxh1 = records.filter(item => {
if (item.lxh == '1') {
this.lqndylName1 = item.gsname
return true
}
})
let lxh2 = records.filter(item => {
if (item.lxh == '2') {
this.lqndylName2 = item.gsname
return true
}
})
this.lg1= this.initlg1(lxh1[0])
this.lg2= this.initlg2(lxh2[0])
}
}
})
}
})
},
initLqnd2() {
this.$post('hafms/yszhcxlog/query', {
lx: 'B'
}).then(res => {
if (res && res.success && res.data.records && res.data.records.length > 0) {
let newData = res.data.records[0]
this.$post('hafms/yszhcxlog/queryDetail', {
mid: newData.id,
}).then(res => {
if (res.success && res.data.records) {
const {
records
} = res.data
if (records.length != 0) {
let lxh1 = records.filter(item => {
if (item.lxh == '1') {
this.lhName1 = item.gsname
return true
}
})
let lxh2 = records.filter(item => {
if (item.lxh == '2') {
this.lhName2 = item.gsname
return true
}
})
this.lg3= this.initlg3(lxh1[0])
this.lg4= this.initlg4(lxh2[0])
}
}
})
}
})
},
/* 地图标记 /* 地图标记
淮安供电公司本部,金湖县供电公司,盱眙县供电公司,洪泽县供电公司,涟水县供电公司 淮安供电公司本部,金湖县供电公司,盱眙县供电公司,洪泽县供电公司,涟水县供电公司
*/ */
initHuanai(){ initHuanai({
let huaian1=_.cloneDeep(huaian) habbList,
huaian1.features.forEach(item=>{ jhxList,
if(item.properties.name=='淮安区'){ xyxList,
item.properties.name='淮安供电公司本部' hzxList,
}else if(item.properties.name=='金湖县'){ lsxList
item.properties.name='金湖县供电公司' }) {
}else if(item.properties.name=='盱眙县'){ this.mapList = []
item.properties.name='盱眙县供电公司' let huaian1 = _.cloneDeep(huaian)
}else if(item.properties.name=='洪泽县'){ huaian1.features.forEach(item => {
item.properties.name='洪泽县供电公司' if (item.properties.name == '淮安区') {
}else if(item.properties.name=='涟水县'){ item.properties.name = '淮安供电公司本部'
item.properties.name='涟水县供电公司' if (habbList.length != 0) {
}else{ item.properties.apiData = habbList[0]
item.properties.name='' item.properties.name = `淮安供电公司本部
完成率:${habbList[0].wcl};排名:${habbList[0].pm}
`
this.mapList.push({
name: item.properties.name,
data: item.properties.apiData
})
}
} else if (item.properties.name == '金湖县') {
item.properties.name = '金湖县供电公司'
if (jhxList.length != 0) {
item.properties.apiData = jhxList[0]
item.properties.name =
`金湖县供电公司
完成率:${jhxList[0].wcl};排名:${jhxList[0].pm}
`
this.mapList.push({
name: item.properties.name,
data: item.properties.apiData
})
}
} else if (item.properties.name == '盱眙县') {
item.properties.name = '盱眙县供电公司'
if (xyxList.length != 0) {
item.properties.apiData = xyxList[0]
item.properties.name =
`盱眙县供电公司
完成率:${xyxList[0].wcl};排名:${xyxList[0].pm}
`
this.mapList.push({
name: item.properties.name,
data: item.properties.apiData
})
}
} else if (item.properties.name == '洪泽区') {
item.properties.name = '洪泽县供电公司'
if (hzxList.length != 0) {
item.properties.apiData = hzxList[0]
item.properties.name = `洪泽县供电公司
完成率:${hzxList[0].wcl};排名:${hzxList[0].pm}
`
this.mapList.push({
name: item.properties.name,
data: item.properties.apiData
})
}
} else if (item.properties.name == '涟水县') {
item.properties.name = '涟水县供电公司'
if (lsxList.length != 0) {
item.properties.apiData = lsxList[0]
item.properties.name = `涟水县供电公司
完成率:${lsxList[0].wcl};排名:${lsxList[0].pm}
`
this.mapList.push({
name: item.properties.name,
data: item.properties.apiData
})
}
} else {
item.properties.name = ''
} }
}) })
return huaian1 console.log('huaian1', huaian1)
}, return huaian1
initsdt(){ },
initsdt() {
const charts = this.$echarts.init(this.$refs["sdt"]); const charts = this.$echarts.init(this.$refs["sdt"]);
const option = { const option = {
legend: { legend: {
bottom: 10, bottom: 10,
textStyle: { textStyle: {
color: '#61d2f7' // 设置图例项字体颜色为红色 color: '#61d2f7' // 设置图例项字体颜色为红色
}, },
left:'center', left: 'center',
itemWidth:9, itemWidth: 9,
itemHeight:9, itemHeight: 9,
data: ['2018溢价率', '2019溢价率'] data: ['2018溢价率', '2019溢价率']
},
xAxis: {
axisLine: { // 改变x轴颜色
show: false,
lineStyle: {
color: '#26D9FF',
}
},
axisTick: {
show: false
},
axisLabel: { // 改变x轴字体颜色和大小
textStyle: {
color: "#333",
fontSize: 12
}, },
xAxis: { },
axisLine: { // 改变x轴颜色 splitLine: {
show:false, show: false,
lineStyle: { },
color: '#26D9FF', },
} yAxis: {
}, name: '%',
axisTick: { nameTextStyle: {
show: false color: '#61d2f7',
}, padding: [0, 25, 0, 0]
axisLabel: { // 改变x轴字体颜色和大小 },
textStyle: { axisLine: { // 改变y轴颜色
color: "#333", lineStyle: {
fontSize: 12 color: '#61d2f7'
}, }
}, },
splitLine: { axisTick: {
show:false, show: false
}, },
axisLabel: { // 改变y轴字体颜色和大小
//formatter: '{value} m³ ', // 给y轴添加单位
textStyle: {
color: "#61d2f7",
fontSize: 12
}, },
yAxis: { },
name:'%', splitLine: {
nameTextStyle: { lineStyle: {
color: '#61d2f7', color: "#61d2f7"
padding: [0, 25, 0, 0] }
}, },
axisLine: { // 改变y轴颜色 },
lineStyle: { series: [{
color: '#61d2f7' name: '2018溢价率',
} type: 'scatter',
}, itemStyle: {
axisTick: { color: "#3E9FFF",
show: false },
}, symbolSize: 12,
axisLabel: { // 改变y轴字体颜色和大小 data: [
//formatter: '{value} m³ ', // 给y轴添加单位 [10.0, 8.04],
textStyle: { [8.0, 6.95],
color: "#61d2f7", [13.0, 7.58],
fontSize: 12 [9.0, 8.81],
}, [11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
}, {
name: '2019溢价率',
type: 'scatter',
itemStyle: {
color: "#F7B500",
},
symbolSize: 12,
data: [
[9.0, 5.04],
[11.0, 7.95],
[12.0, 8.58],
[5.0, 11.81],
[7.0, 12.33],
[11.0, 7.96],
[7.0, 9.24],
[6.0, 8.26],
[10.0, 11.84],
[7.0, 3.82],
[6.0, 4.68]
],
}]
}
charts.setOption(option);
return charts
},
initlg1(apidata) {
const charts = this.$echarts.init(this.$refs["lg1"]);
var option = {
grid: {
left: '10%',
top: '23%',
right: '10%',
bottom: '15%',
},
xAxis: {
data: [
"预算目标值",
"平衡目标值",
"累计分解值",
"发生值",
],
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
},
yAxis: {
name: "（万元）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
},
},
series: [{
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: "#00aaff", // 设置柱状图的颜色
}, },
splitLine: { },
lineStyle: { label: {
color: "#61d2f7" show: true,
} position: 'top', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: [apidata.ndysmb||0, apidata.phmb||0, apidata.ljfj||0, apidata.fsz||0],
}, ],
};
charts.setOption(option);
return charts
},
initlg2(apidata) {
const charts = this.$echarts.init(this.$refs["lg2"]);
var option = {
grid: {
left: '10%',
top: '23%',
right: '10%',
bottom: '15%',
},
xAxis: {
data: [
"预算目标值",
"平衡目标值",
"累计分解值",
"发生值",
],
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
},
yAxis: {
name: "（万元）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
},
},
series: [{
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: "#00aaff", // 设置柱状图的颜色
}, },
},
label: {
show: true,
position: 'top', // 在柱子顶部显示数字
textStyle: {
color: "#fff",
fontSize: 10,
},
},
data: [apidata.ndysmb||0, apidata.phmb||0, apidata.ljfj||0, apidata.fsz||0],
}, ],
};
charts.setOption(option);
return charts
},
initlg3(apidata) {
const charts = this.$echarts.init(this.$refs["lg3"]);
var option = {
grid: {
left: '10%',
top: '23%',
right: '10%',
bottom: '15%',
},
xAxis: {
data: [
"预算目标值",
"平衡目标值",
"累计分解值",
"发生值",
],
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
},
yAxis: {
name: "（万元）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
}, },
series: [{ },
name: '2018溢价率', },
type: 'scatter', series: [{
itemStyle: { type: "bar",
color: "#3E9FFF", barWidth: 18,
itemStyle: {
normal: {
color: "#00aaff", // 设置柱状图的颜色
}, },
symbolSize: 12, },
data: [ label: {
[10.0, 8.04], show: true,
[8.0, 6.95], position: 'top', // 在柱子顶部显示数字
[13.0, 7.58], textStyle: {
[9.0, 8.81], color: "#fff",
[11.0, 8.33], fontSize: 10,
[14.0, 9.96], },
[6.0, 7.24], },
[4.0, 4.26], data: [apidata.ndysmb||0, apidata.phmb||0, apidata.ljfj||0, apidata.fsz||0],
[12.0, 10.84], }, ],
[7.0, 4.82], };
[5.0, 5.68]
], charts.setOption(option);
}, { return charts
name: '2019溢价率',
type: 'scatter', },
itemStyle: { initlg4(apidata) {
color: "#F7B500", const charts = this.$echarts.init(this.$refs["lg4"]);
var option = {
grid: {
left: '10%',
top: '23%',
right: '10%',
bottom: '15%',
},
xAxis: {
data: [
"预算目标值",
"平衡目标值",
"累计分解值",
"发生值",
],
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
},
yAxis: {
name: "（万元）",
nameTextStyle: {
color: "#fff",
fontSize: 10,
},
axisLine: {
lineStyle: {
color: "#0177d4",
},
},
axisLabel: {
color: "#fff",
fontSize: 10,
},
splitLine: {
show: false,
lineStyle: {
color: "#0177d4",
},
},
},
series: [{
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: "#00aaff", // 设置柱状图的颜色
}, },
symbolSize: 12, },
data: [ label: {
[9.0, 5.04], show: true,
[11.0, 7.95], position: 'top', // 在柱子顶部显示数字
[12.0, 8.58], textStyle: {
[5.0, 11.81], color: "#fff",
[7.0, 12.33], fontSize: 10,
[11.0, 7.96], },
[7.0, 9.24], },
[6.0, 8.26], data: [apidata.ndysmb||0, apidata.phmb||0, apidata.ljfj||0, apidata.fsz||0],
[10.0, 11.84], }, ],
[7.0, 3.82], };
[6.0, 4.68]
],
}]
}
charts.setOption(option); charts.setOption(option);
return charts return charts
}, },
initSzkbmapCharts() { initSzkbmapCharts(params) {
const mapData = this.initHuanai(params);
const charts = this.$echarts.init(this.$refs["szkbmap"]); const charts = this.$echarts.init(this.$refs["szkbmap"]);
const option = { const option = {
// 背景颜色 // 背景颜色
series: [ series: [{
{ name: "淮安",
name: "淮安", type: "map",
type: "map", geoIndex: 0,
geoIndex: 0, data: this.mapList,
data: this.dataList, }, ],
},
],
// 提示浮窗样式
tooltip: {
show: true,
trigger: "item",
alwaysShowContent: false,
hideDelay: 100,
triggerOn: "mousemove",
enterable: true,
textStyle: {
color: "#DADADA",
fontSize: "12",
width: 20,
height: 30,
overflow: "break",
},
formatter: function (params) {
// 格式化提示浮窗内容
// return params.name + ": " + (params.value||'未设置');
},
showDelay: 100,
},
// 地图配置 // 地图配置
geo: { geo: {
zoom: 1.2, zoom: 1.2,
...@@ -455,7 +966,7 @@ ...@@ -455,7 +966,7 @@
}, },
}; };
// 地图注册，第一个参数的名字必须和option.geo.map一致 // 地图注册，第一个参数的名字必须和option.geo.map一致
this.$echarts.registerMap("huaian", this.initHuanai()) this.$echarts.registerMap("huaian", mapData)
charts.setOption(option); charts.setOption(option);
return charts return charts
......
src/views/hzcxbb/szkb/yszx.vue 0 → 100644
View file @ 31d2ffd8
<template>
<DefaultDialog :appendToBody='false' :app='app'>
<div slot="form" class="min_full" style="display: flex;height: 80vh;">
<Detail ref="detail" :app='this' v-if="showDialog" />
<div class="tablePagers">
<!-- 多选数组转 -->
<TablePager :operateButtons="false" :ref="'TablePager'" :app='this' :query='query' @selectItem='selectItem' @getRow='getRow'>
</TablePager>
</div>
</div>
</DefaultDialog>
</template>
<script>
import Detail from './detail.vue'
import {
doQuery,
doDelete,
doQueryDetail
} from '@/api/sbysjsp/yszxjd.js';
import {
tableMixin_noapp
} from 'common'
import cycle from 'common/src/mixin/cycle.js'
export default {
mixins: [tableMixin_noapp, cycle],
props: {
app: {
type: Object,
default: ()=>{
return {}
}
}
},
mounted() {
this.$nextTick(()=>{
this.queryParams.bmid=this.app.bmid
this.$refs['TablePager'].pageQuery()
})
},
components: {
Detail
},
data() {
return {
/*需要的额外参数 */
showDialog: false,
DialogName: '',
type: '',
DialogTitle: '',
/* 基础url*/
baseUrl: 'hafms/yszxjdlog',
/* 查询参数*/
queryParams: {
bmid:''
},
/* 表格标题对应参数*/
tableTitle: [
{
title: "项目类别",
field: "xmflname",
fieldType: "ftString",
width: 150
},
{
title: "完成率",
field: "wcl",
fieldType: "ftString",
width: 200
},
{
title: "排名",
field: "pm",
}
]
}
},
methods: {
yssqsp() {
if (this.selectOne || this.clickOne) {
submit(this.singleItem).then(res => {
if (res.success) {
this.$success('操作成功');
this.$refs['TablePager'].pageQuery()
}
})
} else {
this.$warning('请选中一行操作');
}
},
/* 基础查询*/
query: doQueryDetail,
},
}
</script>
<style scoped>
/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;
}
</style>
src/views/sbysjsp/yszxjd/index.vue 0 → 100644
View file @ 31d2ffd8
<template>
<div class=" flex">
<el-tabs @tab-click="handleClick" v-model="activeName" :tab-position="'left'" >
<el-tab-pane style="font-size: 12px;" v-for="(item,index) in paneList" :key="item.id" :name="item.id"
:label="item.title"></el-tab-pane>
</el-tabs>
<div style="flex: 1;overflow: hidden;">
<div class="min_full" style="border-left: 0px;">
<!-- right-->
<el-row class="tool-bar">
<!-- <ToolButton :app='app'></ToolButton> -->
<ImportTempButton @success='success' url="hafms/yszxjdlog//excel/import" :params="{
sjlx: 'HJ'
}" />
<!-- 导入-->
<el-button @click="del" size="mini" type="danger">删除当前报表</el-button>
</el-row>
<!-- 表格-->
<div class="tablePagers">
<TablePager :operateButtons='false' disableQuery @getData='getData' :ref="'TablePager'" :app='app' :query='query'
@selectItem='selectItem' @getRow='getRow'>
</TablePager>
</div>
</div>
</div>
</div>
</template>
<script>
import {
doQuery,
doDelete,
doQueryDetail
} from '@/api/sbysjsp/yszxjd.js';
import {
tableMixin
} from 'common'
export default {
mixins: [tableMixin],
/* 初始额外赋值*/
async mounted() {
/* 查询数值*/
this.init()
// this.$refs['TablePager'].pageQuery()
},
data() {
return {
activeName: '',
paneList: [],
baseUrl: 'hafms/yszhcxlog',
/* 查询参数*/
queryParams: {
lx: 'B',
},
/* 表格标题对应参数*/
tableTitle: [
{
title: "项目类别",
field: "xmflname0",
fieldType: "ftString",
width: 160
},
{
title: "省平均完成率",
field: "spjwcl0",
fieldType: "ftString",
width: 160
},
{
title: "供电公司平均完成率",
field: "gdgswcl0",
fieldType: "ftString",
width: 160
},
{
title: "直属单位平均完成率",
field: "zsdwwcl0",
fieldType: "ftString",
width: 160
},
{
title: "淮安",
fieldType: "ftString",
field: "title",
width: 160,
subtitle: [
{
prop: "wcl0",
label: "完成率",
width: "120"
},
{
prop: "pm0",
label: "供电公司排名",
width: "120"
}
]
},
{
title: "淮安供电公司本部",
fieldType: "ftString",
field: "title",
width: 160,
subtitle: [
{
prop: "wcl",
label: "完成率",
width: "120"
},
{
prop: "pm",
label: "供电公司排名",
width: "120"
}
]
},
{
title: "金湖县供电公司",
fieldType: "ftString",
field: "title",
width: 160,
subtitle: [
{
prop: "wcl2",
label: "完成率",
width: "120"
},
{
prop: "pm2",
label: "供电公司排名",
width: "120"
}
]
},
{
title: "盱眙县供电公司",
fieldType: "ftString",
field: "title",
width: 160,
subtitle: [
{
prop: "wcl3",
label: "完成率",
width: "120"
},
{
prop: "pm3",
label: "供电公司排名",
width: "120"
}
]
},
{
title: "洪泽县供电公司",
fieldType: "ftString",
field: "title",
width: 160,
subtitle: [
{
prop: "wcl4",
label: "完成率",
width: "120"
},
{
prop: "pm4",
label: "供电公司排名",
width: "120"
}
]
},
{
title: "涟水县供电公司",
fieldType: "ftString",
field: "title",
width: 160,
subtitle: [
{
prop: "wcl5",
label: "完成率",
width: "120"
},
{
prop: "pm5",
label: "供电公司排名",
width: "120"
}
]
},
]
}
},
methods: {
del(){
if(this.paneList.length>0&&this.activeName){
this.$confirm('是否删除当前报表, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(res=>{
doDelete({
id:this.activeName
}).then(e=>{
if(e.success){
this.$success('操作成功')
/* 初始化list*/
this.init()
}
})
})
}else{
this.$warning('当前无数据，请刷新或者导入后进行操作')
}
},
init(){
doQuery({
lx: 'B'
}).then(res => {
if (res.success) {
if (res.data && res.data.records && res.data.records.length != 0) {
this.paneList = res.data.records || []
if (this.paneList[0]) {
this.activeName = this.paneList[0].id
this.showTabData(this.paneList[0].id)
/* 查询第一个list*/
}
}
}
})
},
/* 导入成功回调*/
success(){
this.init()
},
/*数据处理*/
showTabData(id) {
/* 控制查询loading */
this.$refs.TablePager.loading=true
doQueryDetail({
mid: id
}).then(res => {
if (res.success) {
let records = res.data.records || []
let lxh0 = records.filter(item => {
if (item.lxh == '0') {
return true
}
})
let lxh1 = records.filter(item => {
if (item.lxh == '1') {
return true
}
})
let lxh2 = records.filter(item => {
if (item.lxh == '2') {
return true
}
})
let lxh3 = records.filter(item => {
if (item.lxh == '3') {
return true
}
})
let lxh4 = records.filter(item => {
if (item.lxh == '4') {
return true
}
})
let lxh5 = records.filter(item => {
if (item.lxh == '5') {
return true
}
})
/* 根据xh合并*/
let newList = lxh1.map(item1 => {
let newItem = {}
lxh2.forEach(item2 => {
if (item1.xh == item2.xh) {
Object.keys(item2).forEach(key => {
let keyName = key + '2'
newItem[keyName] = item2[key]
})
}
})
lxh3.forEach(item3 => {
if (item1.xh == item3.xh) {
Object.keys(item3).forEach(key => {
let keyName = key + '3'
newItem[keyName] = item3[key]
})
}
})
lxh4.forEach(item4 => {
if (item1.xh == item4.xh) {
Object.keys(item4).forEach(key => {
let keyName = key + '4'
newItem[keyName] = item4[key]
})
}
})
lxh5.forEach(item5 => {
if (item1.xh == item5.xh) {
Object.keys(item5).forEach(key => {
let keyName = key + '5'
newItem[keyName] = item5[key]
})
}
})
lxh0.forEach(item0 => {
if (item1.xh == item0.xh) {
Object.keys(item0).forEach(key => {
let keyName = key + '0'
newItem[keyName] = item0[key]
})
}
})
/* 最终合并*/
newItem = {
...newItem,
...item1
}
return newItem
})
/* 手动操作表格*/
/* 替换数据*/
this.$refs.TablePager['tableData'] = newList
console.log(newList,'newlist')
}
}).finally(e=>{
this.$refs.TablePager.loading=false
})
},
handleClick(item) {
this.showTabData(item.name)
},
/* 基础查询*/
query: doQuery,
apiDelete: doDelete,
queryDetail: doQueryDetail
},
components: {
}
}
</script>
<style scoped>
</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