Skip to content

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

占位

parent 31d2ffd8
Hide whitespace changes
Inline Side-by-side
Showing with 321 additions and 98 deletions
src/views/hzcxbb/szkb/index.vue
View file @ c8340cbe
......@@ -20,7 +20,7 @@
<span class="com-count-title">
{{lqndylName1}}
</span>
<div v-echartResize="()=>{
<div v-echartResize="()=>{
lg1.resize()
}" ref="lg1" class="com-count-body">
......@@ -58,32 +58,32 @@
</div>
<div class="third">
<div class="itemtitle itemtitlebg2">
淮安淮阴预算一览
淮安淮阴预算一览
</div>
<div 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: 50%;">
<span class="com-count-title">
{{lhName1}}
{{lhName1}}
</span>
<div v-echartResize="()=>{
lg3.resize()
}" ref="lg3" class="com-count-body">
</div>
</div>
</div>
<div class="full" style="height: 50%;" >
<div class="full" style="height: 50%;">
<span class="com-count-title">
{{lhName2}}
{{lhName2}}
</span>
<div v-echartResize="()=>{
lg4.resize()
}" ref="lg4" class="com-count-body">
</div>
</div>
</div>
</div>
......@@ -91,7 +91,6 @@
</div>
<div class="bottom">
<div class="first">
<div class="itemmainb boxall itembg ">
<i class="i1"></i>
<i class="i2"></i>
......@@ -99,15 +98,14 @@
<i class="i4"></i>
<div class="full itembg ">
<span class="com-count-title">
示例图例
</span>
<div ref="slt" class="com-count-body">
</div>
</div>
</div>
</div>
<div class="second">
<div class="itemmainb boxall itembg ">
<i class="i1"></i>
<i class="i2"></i>
......@@ -146,16 +144,13 @@
<div style="color: #fff ;" v-text="item.title"></div>
</div>
</div>
</vueSeamless>
</ul>
</div>
</div>
</div>
</div>
<div class="third">
<div class="itemmainb boxall itembg ">
<i class="i1"></i>
<i class="i2"></i>
......@@ -168,17 +163,13 @@
<div ref="sdt" v-echartResize="()=>{
sdtCharts.resize()
}" class="com-count-body">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import vueSeamless from 'vue-seamless-scroll'
import huaian from "common/src/assets/mapJson/huaian.json"
......@@ -188,9 +179,7 @@
doQuery,
doDelete,
doQueryDetail
} from '@/api/sbysjsp/yszxjd.js';
export default {
computed: {
optionSingleHeight() {
......@@ -262,19 +251,14 @@
this.dialog.DialogTitle = info.bmName
this.dialog.showDialog = true
}
});
})
}
})
this.initLqnd()
this.initLqnd2()
this.initslt()
this.isLoading = false
......@@ -284,8 +268,8 @@
/* 两区农电预算一览 */
lqndylName1: '',
lqndylName2: '',
lhName1:'',
lhName2:'',
lhName1: '',
lhName2: '',
/* 两区农电预算一览*/
hapm: 1,
/* 加载蒙层*/
......@@ -369,13 +353,11 @@
return true
}
})
this.lg1= this.initlg1(lxh1[0])
this.lg2= this.initlg2(lxh2[0])
this.lg1 = this.initlg1(lxh1[0])
this.lg2 = this.initlg2(lxh2[0])
}
}
})
}
})
},
......@@ -405,10 +387,9 @@
return true
}
})
this.lg3= this.initlg3(lxh1[0])
this.lg4= this.initlg4(lxh2[0])
this.lg3 = this.initlg3(lxh1[0])
this.lg4 = this.initlg4(lxh2[0])
}
}
})
......@@ -455,7 +436,6 @@
name: item.properties.name,
data: item.properties.apiData
})
}
} else if (item.properties.name == '盱眙县') {
item.properties.name = '盱眙县供电公司'
......@@ -504,6 +484,249 @@
console.log('huaian1', huaian1)
return huaian1
},
initslt() {
const charts = this.$echarts.init(this.$refs["slt"]);
var num = 77.8
var color = new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgb(255,46,46)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgb(255,100,46)', // 100% 处的颜色
},
]);
let data1 = {
name:'',
value:num
}
let n = num;
let progress = (n * 0.01).toFixed(2);
var colorSet = [
[progress, color],
[1, 'rgba(0, 97, 226, 0.25)'],
];
let sizeC1 = 'rgb(255,215,37)';
let fontSize = 23;
var rich = {
white: {
height: 30,
fontSize: fontSize * 0.6,
color: 'rgba(255,255,255,0.5)',
},
bule: {
fontSize: fontSize * 2,
color: sizeC1,
},
radius: {
height: 35,
fontSize: 23,
color: sizeC1,
textAlign: 'center',
},
size: {
height: 400,
},
};
var option = {
title: [
{
text: '处理率',
x: 'center',
top: '32%',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: '100',
},
},
{
text: num + '%',
x: 'center',
top: '50%',
textStyle: {
fontSize: 13,
color: '#00f0ff',
foontWeight: '500',
},
},
],
tooltip: {
formatter: '{a} <br/>{b} : {c}%',
},
series: [
{
type: 'gauge',
center: ['50%', '60%'],
radius: '110%',
startAngle: '210',
endAngle: '-30',
pointer: {
show: false,
},
data: data1,
title: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: colorSet,
width: 10,
// shadowBlur: 15,
// shadowColor: '#fff',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
length: 12,
lineStyle: {
color: '#00377a',
width: 2,
type: 'solid',
},
},
axisLabel: {
show: false,
},
},
// 左边刻度线
{
type: 'gauge',
center: ['50%', '60%'],
radius: '120%',
startAngle: '210',
endAngle: '-30',
min: 0,
zlevel: 10,
max: 100,
splitNumber: 12,
// 展示当前进度
progress: {
show: false,
},
// 仪表盘指针
pointer: {
show: false,
},
// 仪表盘轴线相关配置
axisLine: {
show: false,
lineStyle: {
color: [[1, 'transparent']],
width: 20,
},
},
// 刻度样式
axisTick: {
show: false,
},
// 分隔线样式
splitLine: {
show: false,
},
// 刻度标签
axisLabel: {
show: true,
distance: -24,
formatter: function (value) {
if (value === 0) {
return '{white|' + value + '}';
}
return '';
},
rich: rich,
},
// 表盘中指针的固定点
anchor: {
show: false,
},
detail: {
show: false,
},
data: [
{
value: 20,
},
],
},
// // 又边刻度线
{
type: 'gauge',
center: ['50%', '60%'],
radius: '120%',
startAngle: '210',
endAngle: '-30',
min: 0,
zlevel: 10,
max: 100,
splitNumber: 12,
// 展示当前进度
progress: {
show: false,
},
// 仪表盘指针
pointer: {
show: false,
},
// 仪表盘轴线相关配置
axisLine: {
show: false,
lineStyle: {
color: [[1, 'transparent']],
width: 20,
},
},
// 刻度样式
axisTick: {
show: false,
},
// 分隔线样式
splitLine: {
show: false,
},
// 刻度标签
axisLabel: {
show: true,
distance: -30,
formatter: function (value) {
if (value === 100) {
return '{white|' + value + '}';
}
return '';
},
rich: rich,
color: 'rgba(255,255,255,.85)',
fontSize: 12,
},
// 表盘中指针的固定点
anchor: {
show: false,
},
detail: {
show: false,
},
data: [
{
value: 0,
},
],
},
],
};
charts.setOption(option);
return charts
},
initsdt() {
const charts = this.$echarts.init(this.$refs["sdt"]);
const option = {
......@@ -615,7 +838,7 @@
var option = {
grid: {
left: '10%',
top: '23%',
top: '23%',
right: '10%',
bottom: '15%',
},
......@@ -661,20 +884,20 @@
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],
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],
}, ],
};
......@@ -687,7 +910,7 @@
var option = {
grid: {
left: '10%',
top: '23%',
top: '23%',
right: '10%',
bottom: '15%',
},
......@@ -733,21 +956,21 @@
series: [{
type: "bar",
barWidth: 18,
itemStyle: {
normal: {
color: "#00aaff", // 设置柱状图的颜色
},
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],
},
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);
......@@ -759,7 +982,7 @@
var option = {
grid: {
left: '10%',
top: '23%',
top: '23%',
right: '10%',
bottom: '15%',
},
......@@ -805,20 +1028,20 @@
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],
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],
}, ],
};
......@@ -831,7 +1054,7 @@
var option = {
grid: {
left: '10%',
top: '23%',
top: '23%',
right: '10%',
bottom: '15%',
},
......@@ -877,20 +1100,20 @@
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],
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],
}, ],
};
......
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