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 @@ ...@@ -20,7 +20,7 @@
<span class="com-count-title"> <span class="com-count-title">
{{lqndylName1}} {{lqndylName1}}
</span> </span>
<div v-echartResize="()=>{ <div v-echartResize="()=>{
lg1.resize() lg1.resize()
}" ref="lg1" class="com-count-body"> }" ref="lg1" class="com-count-body">
...@@ -58,32 +58,32 @@ ...@@ -58,32 +58,32 @@
</div> </div>
<div class="third"> <div class="third">
<div class="itemtitle itemtitlebg2"> <div class="itemtitle itemtitlebg2">
淮安淮阴预算一览 淮安淮阴预算一览
</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" style="height: 50%;" > <div class="full" style="height: 50%;">
<span class="com-count-title"> <span class="com-count-title">
{{lhName1}} {{lhName1}}
</span> </span>
<div v-echartResize="()=>{ <div v-echartResize="()=>{
lg3.resize() lg3.resize()
}" ref="lg3" class="com-count-body"> }" ref="lg3" class="com-count-body">
</div> </div>
</div> </div>
<div class="full" style="height: 50%;" > <div class="full" style="height: 50%;">
<span class="com-count-title"> <span class="com-count-title">
{{lhName2}} {{lhName2}}
</span> </span>
<div v-echartResize="()=>{ <div v-echartResize="()=>{
lg4.resize() lg4.resize()
}" ref="lg4" class="com-count-body"> }" ref="lg4" class="com-count-body">
</div> </div>
</div> </div>
</div> </div>
...@@ -91,7 +91,6 @@ ...@@ -91,7 +91,6 @@
</div> </div>
<div class="bottom"> <div class="bottom">
<div class="first"> <div class="first">
<div class="itemmainb boxall itembg "> <div class="itemmainb boxall itembg ">
<i class="i1"></i> <i class="i1"></i>
<i class="i2"></i> <i class="i2"></i>
...@@ -99,15 +98,14 @@ ...@@ -99,15 +98,14 @@
<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 ref="slt" class="com-count-body">
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="second"> <div class="second">
<div class="itemmainb boxall itembg "> <div class="itemmainb boxall itembg ">
<i class="i1"></i> <i class="i1"></i>
<i class="i2"></i> <i class="i2"></i>
...@@ -146,16 +144,13 @@ ...@@ -146,16 +144,13 @@
<div style="color: #fff ;" v-text="item.title"></div> <div style="color: #fff ;" v-text="item.title"></div>
</div> </div>
</div> </div>
</vueSeamless> </vueSeamless>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="third"> <div class="third">
<div class="itemmainb boxall itembg "> <div class="itemmainb boxall itembg ">
<i class="i1"></i> <i class="i1"></i>
<i class="i2"></i> <i class="i2"></i>
...@@ -168,17 +163,13 @@ ...@@ -168,17 +163,13 @@
<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>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</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"
...@@ -188,9 +179,7 @@ ...@@ -188,9 +179,7 @@
doQuery, doQuery,
doDelete, doDelete,
doQueryDetail doQueryDetail
} from '@/api/sbysjsp/yszxjd.js'; } from '@/api/sbysjsp/yszxjd.js';
export default { export default {
computed: { computed: {
optionSingleHeight() { optionSingleHeight() {
...@@ -262,19 +251,14 @@ ...@@ -262,19 +251,14 @@
this.dialog.DialogTitle = info.bmName this.dialog.DialogTitle = info.bmName
this.dialog.showDialog = true this.dialog.showDialog = true
} }
}); });
}) })
} }
}) })
this.initLqnd() this.initLqnd()
this.initLqnd2() this.initLqnd2()
this.initslt()
this.isLoading = false this.isLoading = false
...@@ -284,8 +268,8 @@ ...@@ -284,8 +268,8 @@
/* 两区农电预算一览 */ /* 两区农电预算一览 */
lqndylName1: '', lqndylName1: '',
lqndylName2: '', lqndylName2: '',
lhName1:'', lhName1: '',
lhName2:'', lhName2: '',
/* 两区农电预算一览*/ /* 两区农电预算一览*/
hapm: 1, hapm: 1,
/* 加载蒙层*/ /* 加载蒙层*/
...@@ -369,13 +353,11 @@ ...@@ -369,13 +353,11 @@
return true return true
} }
}) })
this.lg1= this.initlg1(lxh1[0]) this.lg1 = this.initlg1(lxh1[0])
this.lg2= this.initlg2(lxh2[0]) this.lg2 = this.initlg2(lxh2[0])
} }
} }
}) })
} }
}) })
}, },
...@@ -405,10 +387,9 @@ ...@@ -405,10 +387,9 @@
return true return true
} }
}) })
this.lg3= this.initlg3(lxh1[0]) this.lg3 = this.initlg3(lxh1[0])
this.lg4= this.initlg4(lxh2[0]) this.lg4 = this.initlg4(lxh2[0])
} }
} }
}) })
...@@ -455,7 +436,6 @@ ...@@ -455,7 +436,6 @@
name: item.properties.name, name: item.properties.name,
data: item.properties.apiData data: item.properties.apiData
}) })
} }
} else if (item.properties.name == '盱眙县') { } else if (item.properties.name == '盱眙县') {
item.properties.name = '盱眙县供电公司' item.properties.name = '盱眙县供电公司'
...@@ -504,6 +484,249 @@ ...@@ -504,6 +484,249 @@
console.log('huaian1', huaian1) console.log('huaian1', huaian1)
return 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() { initsdt() {
const charts = this.$echarts.init(this.$refs["sdt"]); const charts = this.$echarts.init(this.$refs["sdt"]);
const option = { const option = {
...@@ -615,7 +838,7 @@ ...@@ -615,7 +838,7 @@
var option = { var option = {
grid: { grid: {
left: '10%', left: '10%',
top: '23%', top: '23%',
right: '10%', right: '10%',
bottom: '15%', bottom: '15%',
}, },
...@@ -661,20 +884,20 @@ ...@@ -661,20 +884,20 @@
series: [{ series: [{
type: "bar", type: "bar",
barWidth: 18, barWidth: 18,
itemStyle: { itemStyle: {
normal: { normal: {
color: "#00aaff", // 设置柱状图的颜色 color: "#00aaff", // 设置柱状图的颜色
}, },
}, },
label: { label: {
show: true, show: true,
position: 'top', // 在柱子顶部显示数字 position: 'top', // 在柱子顶部显示数字
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
}, },
}, },
data: [apidata.ndysmb||0, apidata.phmb||0, apidata.ljfj||0, apidata.fsz||0], data: [apidata.ndysmb || 0, apidata.phmb || 0, apidata.ljfj || 0, apidata.fsz || 0],
}, ], }, ],
}; };
...@@ -687,7 +910,7 @@ ...@@ -687,7 +910,7 @@
var option = { var option = {
grid: { grid: {
left: '10%', left: '10%',
top: '23%', top: '23%',
right: '10%', right: '10%',
bottom: '15%', bottom: '15%',
}, },
...@@ -733,21 +956,21 @@ ...@@ -733,21 +956,21 @@
series: [{ series: [{
type: "bar", type: "bar",
barWidth: 18, barWidth: 18,
itemStyle: { itemStyle: {
normal: { normal: {
color: "#00aaff", // 设置柱状图的颜色 color: "#00aaff", // 设置柱状图的颜色
}, },
}, },
label: { label: {
show: true, show: true,
position: 'top', // 在柱子顶部显示数字 position: 'top', // 在柱子顶部显示数字
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
}, },
}, },
data: [apidata.ndysmb||0, apidata.phmb||0, apidata.ljfj||0, apidata.fsz||0], data: [apidata.ndysmb || 0, apidata.phmb || 0, apidata.ljfj || 0, apidata.fsz || 0],
}, ], }, ],
}; };
charts.setOption(option); charts.setOption(option);
...@@ -759,7 +982,7 @@ ...@@ -759,7 +982,7 @@
var option = { var option = {
grid: { grid: {
left: '10%', left: '10%',
top: '23%', top: '23%',
right: '10%', right: '10%',
bottom: '15%', bottom: '15%',
}, },
...@@ -805,20 +1028,20 @@ ...@@ -805,20 +1028,20 @@
series: [{ series: [{
type: "bar", type: "bar",
barWidth: 18, barWidth: 18,
itemStyle: { itemStyle: {
normal: { normal: {
color: "#00aaff", // 设置柱状图的颜色 color: "#00aaff", // 设置柱状图的颜色
}, },
}, },
label: { label: {
show: true, show: true,
position: 'top', // 在柱子顶部显示数字 position: 'top', // 在柱子顶部显示数字
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
}, },
}, },
data: [apidata.ndysmb||0, apidata.phmb||0, apidata.ljfj||0, apidata.fsz||0], data: [apidata.ndysmb || 0, apidata.phmb || 0, apidata.ljfj || 0, apidata.fsz || 0],
}, ], }, ],
}; };
...@@ -831,7 +1054,7 @@ ...@@ -831,7 +1054,7 @@
var option = { var option = {
grid: { grid: {
left: '10%', left: '10%',
top: '23%', top: '23%',
right: '10%', right: '10%',
bottom: '15%', bottom: '15%',
}, },
...@@ -877,20 +1100,20 @@ ...@@ -877,20 +1100,20 @@
series: [{ series: [{
type: "bar", type: "bar",
barWidth: 18, barWidth: 18,
itemStyle: { itemStyle: {
normal: { normal: {
color: "#00aaff", // 设置柱状图的颜色 color: "#00aaff", // 设置柱状图的颜色
}, },
}, },
label: { label: {
show: true, show: true,
position: 'top', // 在柱子顶部显示数字 position: 'top', // 在柱子顶部显示数字
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
}, },
}, },
data: [apidata.ndysmb||0, apidata.phmb||0, apidata.ljfj||0, apidata.fsz||0], 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