chengdandan
/
yanchengPowerSupply
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

大屏首页样式调整

This commit is contained in:
mazhehui 2023-07-21 16:55:35 +08:00
parent 565dbf56f3
commit 8cddbba5ad
3 changed files with 463 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

265
src/views/powerQualityControl.vue
View File

@ -49,6 +49,14 @@
</div> </div>
<div class="content"> <div class="content">
<div class="line"> <div class="line">
<div class="enselect">
<img src="../assets/05/dateXl.png" alt="" />
<span class="text"
>2023-04-08
<span style="color: orange">至</span>
2023-09-08</span
>
</div>
<div id="detailedTwo3"></div> <div id="detailedTwo3"></div>
</div> </div>
</div> </div>
@ -547,7 +555,7 @@ export default {
this.detailedTwo33(); this.detailedTwo33();
this.detailen(); this.detailen();
this.xianDuan(); this.xianDuan();
window.parent.getLoc(); window.parent.getLoc();
}, },
methods: { methods: {
//地图画线 //地图画线
@ -904,75 +912,202 @@ export default {
}); });
}, },
detailedTwo33() { detailedTwo33() {
var bg =
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII=";
var bar =
"image://data:image/png;base64,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";
var data = [20.3, 18.2, 11, 23.4, 29.1, 12, 16, 24];
var barWidth = 20;
var maxNum = 0;
for (var i = 0; i < data.length; i++) {
if (data[i] > maxNum) {
maxNum = data[i];
}
}
var myChart = this.$echarts.init(document.getElementById("detailedTwo3")); var myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
var honorData = [
{
name: "60天内掉电客户数",
data: [15.4, 14.1, 13.3, 12.6, 13.6, 14.4, 15.1, 16.3, 18.6],
},
{
name: "60天内掉电总数",
data: [9.4, 8.1, 7.3, 8.6, 6.6, 9.4, 8.1, 7.3, 8.6],
},
];
var honorXAxisData = [
"No.9",
"No.8",
"No.7",
"No.6",
"No.5",
"No.4",
"No.3",
"No.2",
"No.1",
];
var nameList = [
"东台市",
"滨海县",
"大丰区",
"射阳县",
"亭湖区",
"建湖县",
"阜宁县",
"响水县",
"盐都区",
];
var option = { var option = {
color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
},
legend: {
right: 5,
top: "5%",
itemWidth: 10,
itemHeight: 10,
itemGap: 25,
textStyle: {
color: "#fff",
fontSize: 18,
},
},
grid: { grid: {
top: "10%", top: "15%",
left: "10%", left: "14%",
right: "12%", right: "0%",
bottom: "0%", bottom: "0%",
}, },
xAxis: { xAxis: [
show: false, {
}, type: "value",
yAxis: {
data: data.map((item, index) => `No. ${index}`),
splitLine: {
show: false, show: false,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#6B9DD7",
fontSize: 16, // 文字大小
fontWeight: 400,
interval: 0,
formatter: function (value) {
return value + "(万元)";
},
},
splitLine: {
show: false,
},
}, },
axisLabel: { ],
textStyle: { fontSize: 18, color: "#02afff" }, yAxis: [
{
type: "category",
offset: 17,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 20, // 文字大小
fontWeight: 700,
interval: 0,
},
data: honorXAxisData,
}, },
axisLine: { {
show: false, //名称
type: "category",
offset: -10,
position: "left",
axisLine: {
show: false,
},
inverse: true,
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
color: "#fff",
align: "left",
verticalAlign: "bottom",
lineHeight: 40,
fontSize: 20,
},
data: nameList,
}, },
axisTick: false, ],
},
series: [ series: [
{ {
type: "pictorialBar", name: "线路停电",
barWidth: barWidth, type: "bar",
zlevel: 2, stack: "zongliang",
data: data.map(function (item) { barWidth: "25%",
return { barGap: 40, // 柱图之间的间距
value: item, itemStyle: {
symbol: bar, //自定义颜色
}; // normal: { color: "orange" },
}), color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
//代表渐变色从正上方开始
offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
color: "rgba(255,165,0,.4)",
}, //柱图渐变色
{
offset: 1, //指100%处的颜色
color: "rgb(255,165,0)",
},
]),
},
label: {
normal: {
show: true,
position: ["80%", "-130%"],
formatter: function (params) {
return params.value;
},
textStyle: {
color: "#fff",
fontSize: 18,
},
},
},
data: honorData[0].data,
}, },
{ {
type: "pictorialBar", name: "配变停电",
barWidth: barWidth, type: "bar",
data: data.map(function (item) { stack: "zongliang",
return { barWidth: "25%",
realValue: item, barGap: 40, // 柱图之间的间距
value: maxNum, itemStyle: {
symbol: bg, //自定义颜色
}; // normal: { color: "orange" },
}), color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
label: { {
show: true, //代表渐变色从正上方开始
position: "right", offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
distance: 80, color: "#005BEA",
align: "right", }, //柱图渐变色
formatter: function (params) { {
return params.data.realValue + " 万"; offset: 1, //指100%处的颜色
}, color: "#00C6FB",
color: "#02afff", },
fontSize: 18, ]),
}, },
label: {
normal: {
show: true,
position: ["80%", "-130%"],
formatter: function (params) {
return params.value;
},
textStyle: {
color: "#fff",
fontSize: 18,
},
},
},
data: honorData[1].data,
}, },
], ],
}; };
@ -1288,7 +1423,23 @@ export default {
justify-content: space-between; justify-content: space-between;
#detailedTwo3 { #detailedTwo3 {
width: 100%; width: 100%;
height: 500px; height: 70vh;
}
.enselect {
position: absolute;
// left: 30px;
img {
// position: relative;
float: left;
}
.text {
position: absolute;
top: 5px;
left: 20px;
// right: -10px;
font-size: 22px;
color: #fff;
}
} }
} }

233
src/views/thirtyFiveKV.vue
View File

@ -202,19 +202,19 @@
//引入echarts //引入echarts
import * as echarts from "echarts"; import * as echarts from "echarts";
// 工单统计弹窗组件 // 工单统计弹窗组件
// import workOrder from "../component/workOrder.vue"; import workOrder from "../component/workOrder.vue";
// import ringMainUnit from "./HomePop/ringMainUnit.vue"; import ringMainUnit from "./HomePop/ringMainUnit.vue";
// import routeDetail from "../component/routeDetail.vue"; import routeDetail from "../component/routeDetail.vue";
// 线路详情 // 线路详情
import lineDetail from "../component/lineDetail.vue"; import lineDetail from "../component/lineDetail.vue";
export default { export default {
name: "twentyKV", name: "twentyKV",
components: { components: {
// ringMainUnit, //环网柜弹窗 ringMainUnit, //环网柜弹窗
// workOrder, //工单统计弹窗 workOrder, //工单统计弹窗
// routeDetail, //线路故障跳闸明细 routeDetail, //线路故障跳闸明细
// lineDetail, //线路详情弹窗 lineDetail, //线路详情弹窗
}, },
data() { data() {
return { return {
@ -370,7 +370,6 @@ export default {
this.detailedTwo33(); this.detailedTwo33();
this.barCharts(); this.barCharts();
this.detailen(); this.detailen();
window.parent.getLoc();
}, },
methods: { methods: {
detailedTwo11() { detailedTwo11() {
@ -524,108 +523,54 @@ export default {
}); });
}, },
detailedTwo33() { detailedTwo33() {
var myChart = this.$echarts.init(document.getElementById("detailedTwo3")); var bg =
var honorData = [ "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII=";
{ var bar =
name: "60天内掉电客户数", "image://data:image/png;base64,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";
data: [15.4, 14.1, 13.3, 12.6, 13.6, 14.4, 15.1, 16.3, 18.6, 16.6], var data = [20.3, 18.2, 11, 23.4, 29.1, 12, 16, 24];
},
{
name: "60天内掉电总数",
data: [9.4, 8.1, 7.3, 8.6, 6.6, 9.4, 8.1, 7.3, 8.6, 6.6],
},
];
var honorXAxisData = [
"No.10",
"No.9",
"No.8",
"No.7",
"No.6",
"No.5",
"No.4",
"No.3",
"No.2",
"No.1",
];
var nameList = [ var nameList = [
"PMS_晨光满园9台区", "盐城运维检修部(检修分公司)",
"滨河华苑3台区", "国网响水县供电公司",
"PMS_晨光满园11台区", "国网滨海县供电公司",
"PMS_晨光满园7台区", "国网大丰县供电公司",
"PMS_碧桂园10#配变", "国网射阳县供电公司",
"PMS_碧桂园12#配变", "国网东台县供电公司",
"晨光满园16台区", "国网阜宁县供电公司",
"晨光满园14台区", "国网建湖县供电公司",
"滨河华苑7台区",
"PMS_中合六配变",
]; ];
var barWidth = 20;
var maxNum = 0;
for (var i = 0; i < data.length; i++) {
if (data[i] > maxNum) {
maxNum = data[i];
}
}
var myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
var option = { var option = {
color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
},
legend: {
right: 5,
top: "5%",
itemWidth: 10,
itemHeight: 10,
itemGap: 25,
textStyle: {
color: "#fff",
fontSize: 18,
},
},
grid: { grid: {
top: "15%", top: "10%",
left: "14%", left: "10%",
right: "0%", right: "12%",
bottom: "0%", bottom: "0%",
}, },
xAxis: [ xAxis: {
show: false,
},
yAxis: [
{ {
type: "value", data: data.map((item, index) => `No. ${index}`),
show: false,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#6B9DD7",
fontSize: 16, // 文字大小
fontWeight: 400,
interval: 0,
formatter: function (value) {
return value + "(万元)";
},
},
splitLine: { splitLine: {
show: false, show: false,
}, },
}, axisLabel: {
], textStyle: { fontSize: 18, color: "#30eee9" },
yAxis: [ },
{
type: "category",
offset: 17,
axisLine: { axisLine: {
show: false, show: false,
}, },
axisTick: { axisTick: false,
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 20, // 文字大小
fontWeight: 700,
interval: 0,
},
data: honorXAxisData,
}, },
{ {
//名称 //名称
type: "category", type: "category",
@ -640,7 +585,7 @@ export default {
}, },
axisLabel: { axisLabel: {
interval: 0, interval: 0,
color: "#fff", color: ["#fff"],
align: "left", align: "left",
verticalAlign: "bottom", verticalAlign: "bottom",
lineHeight: 40, lineHeight: 40,
@ -651,77 +596,37 @@ export default {
], ],
series: [ series: [
{ {
name: "60天内掉电客户数", type: "pictorialBar",
type: "bar", barWidth: barWidth,
stack: "zongliang", zlevel: 2,
barWidth: "25%", data: data.map(function (item) {
barGap: 40, // 柱图之间的间距 return {
itemStyle: { value: item,
//自定义颜色 symbol: bar,
// normal: { color: "orange" }, };
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ }),
{
//代表渐变色从正上方开始
offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
color: "rgba(255,165,0,.4)",
}, //柱图渐变色
{
offset: 1, //指100%处的颜色
color: "rgb(255,165,0)",
},
]),
},
label: {
normal: {
show: true,
position: ["80%", "-100%"],
formatter: function (params) {
return params.value;
},
textStyle: {
color: "#fff",
fontSize: 18,
},
},
},
data: honorData[0].data,
}, },
{ {
name: "60天内掉电总数", type: "pictorialBar",
type: "bar", barWidth: barWidth,
stack: "zongliang", data: data.map(function (item) {
barWidth: "25%", return {
barGap: 40, // 柱图之间的间距 realValue: item,
itemStyle: { value: maxNum,
//自定义颜色 symbol: bg,
// normal: { color: "orange" }, };
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ }),
{
//代表渐变色从正上方开始
offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
color: "#005BEA",
}, //柱图渐变色
{
offset: 1, //指100%处的颜色
color: "#00C6FB",
},
]),
},
label: { label: {
normal: { show: true,
show: true, position: "right",
position: ["80%", "-100%"], distance: 80,
formatter: function (params) { align: "right",
return params.value; formatter: function (params) {
}, return params.data.realValue + " 万";
textStyle: {
color: "#fff",
fontSize: 18,
},
}, },
color: "#30eee9",
fontSize: 18,
}, },
data: honorData[1].data,
}, },
], ],
}; };
@ -1163,7 +1068,7 @@ export default {
justify-content: space-between; justify-content: space-between;
#detailedTwo3 { #detailedTwo3 {
width: 100%; width: 100%;
height: 50vh; height: 70vh;
} }
} }

243
src/views/twentyKV.vue
View File

@ -570,75 +570,204 @@ export default {
}); });
}, },
detailedTwo33() { detailedTwo33() {
var bg =
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII=";
var bar =
"image://data:image/png;base64,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";
var data = [20.3, 18.2, 11, 23.4, 29.1, 12, 16, 24];
var barWidth = 20;
var maxNum = 0;
for (var i = 0; i < data.length; i++) {
if (data[i] > maxNum) {
maxNum = data[i];
}
}
var myChart = this.$echarts.init(document.getElementById("detailedTwo3")); var myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
var honorData = [
{
name: "60天内掉电客户数",
data: [15.4, 14.1, 13.3, 12.6, 13.6, 14.4, 15.1, 16.3, 18.6, 16.6],
},
{
name: "60天内掉电总数",
data: [9.4, 8.1, 7.3, 8.6, 6.6, 9.4, 8.1, 7.3, 8.6, 6.6],
},
];
var honorXAxisData = [
"No.10",
"No.9",
"No.8",
"No.7",
"No.6",
"No.5",
"No.4",
"No.3",
"No.2",
"No.1",
];
var nameList = [
"PMS_晨光满园9台区",
"滨河华苑3台区",
"PMS_晨光满园11台区",
"PMS_晨光满园7台区",
"PMS_碧桂园10#配变",
"PMS_碧桂园12#配变",
"晨光满园16台区",
"晨光满园14台区",
"滨河华苑7台区",
"PMS_中合六配变",
];
var option = { var option = {
color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
},
legend: {
right: 5,
top: "5%",
itemWidth: 10,
itemHeight: 10,
itemGap: 25,
textStyle: {
color: "#fff",
fontSize: 18,
},
},
grid: { grid: {
top: "10%", top: "15%",
left: "10%", left: "14%",
right: "12%", right: "1%",
bottom: "0%", bottom: "1%",
}, },
xAxis: { xAxis: [
show: false, {
}, type: "value",
yAxis: {
data: data.map((item, index) => `No. ${index}`),
splitLine: {
show: false, show: false,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#6B9DD7",
fontSize: 16, // 文字大小
fontWeight: 400,
interval: 0,
formatter: function (value) {
return value + "(万元)";
},
},
splitLine: {
show: false,
},
}, },
axisLabel: { ],
textStyle: { fontSize: 18, color: "#02afff" }, yAxis: [
{
type: "category",
offset: 17,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 20, // 文字大小
fontWeight: 700,
interval: 0,
},
data: honorXAxisData,
}, },
axisLine: { {
show: false, //名称
type: "category",
offset: -10,
position: "left",
axisLine: {
show: false,
},
inverse: true,
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
color: "#fff",
align: "left",
verticalAlign: "bottom",
lineHeight: 40,
fontSize: 20,
},
data: nameList,
}, },
axisTick: false, ],
},
series: [ series: [
{ {
type: "pictorialBar", name: "60天内掉电客户数",
barWidth: barWidth, type: "bar",
zlevel: 2, stack: "zongliang",
data: data.map(function (item) { barWidth: "25%",
return { barGap: 40, // 柱图之间的间距
value: item, itemStyle: {
symbol: bar, //自定义颜色
}; // normal: { color: "orange" },
}), color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
//代表渐变色从正上方开始
offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
color: "rgba(255,165,0,.4)",
}, //柱图渐变色
{
offset: 1, //指100%处的颜色
color: "rgb(255,165,0)",
},
]),
},
label: {
normal: {
show: true,
position: ["80%", "-150%"],
formatter: function (params) {
return params.value;
},
textStyle: {
color: "#fff",
fontSize: 18,
},
},
},
data: honorData[0].data,
}, },
{ {
type: "pictorialBar", name: "60天内掉电总数",
barWidth: barWidth, type: "bar",
data: data.map(function (item) { stack: "zongliang",
return { barWidth: "25%",
realValue: item, barGap: 40, // 柱图之间的间距
value: maxNum, itemStyle: {
symbol: bg, //自定义颜色
}; // normal: { color: "orange" },
}), color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
label: { {
show: true, //代表渐变色从正上方开始
position: "right", offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
distance: 80, color: "#005BEA",
align: "right", }, //柱图渐变色
formatter: function (params) { {
return params.data.realValue + " 万"; offset: 1, //指100%处的颜色
}, color: "#00C6FB",
color: "#02afff", },
fontSize: 18, ]),
}, },
label: {
normal: {
show: true,
position: ["80%", "-150%"],
formatter: function (params) {
return params.value;
},
textStyle: {
color: "#fff",
fontSize: 18,
},
},
},
data: honorData[1].data,
}, },
], ],
}; };
@ -1058,7 +1187,7 @@ export default {
justify-content: space-between; justify-content: space-between;
#detailedTwo3 { #detailedTwo3 {
width: 100%; width: 100%;
height: 500px; height: 70vh;
} }
} }