master
“yu”
parent
7a89a54b28
commit
3dba29c85b
|
|
@ -0,0 +1,362 @@
|
|||
<template>
|
||||
<div id="gongqiPie"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import transformFontSize from "@/hooks/transFormSize.ts";
|
||||
import "echarts-gl";
|
||||
export default {
|
||||
name: "供气占比",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
this.renderBarChart();
|
||||
},
|
||||
methods: {
|
||||
renderBarChart() {
|
||||
let myChart = echarts.init(document.getElementById("gongqiPie"));
|
||||
let colorList = ["#00B3FF", "#abb0b3", "#FFCC26"];
|
||||
|
||||
function getParametricEquation(
|
||||
startRatio,
|
||||
endRatio,
|
||||
isSelected,
|
||||
isHovered,
|
||||
k,
|
||||
height
|
||||
) {
|
||||
// 计算
|
||||
let midRatio = (startRatio + endRatio) / 2;
|
||||
|
||||
let startRadian = startRatio * Math.PI * 2;
|
||||
let endRadian = endRatio * Math.PI * 2;
|
||||
let midRadian = midRatio * Math.PI * 2;
|
||||
|
||||
// 如果只有一个扇形，则不实现选中效果。
|
||||
if (startRatio === 0 && endRatio === 1) {
|
||||
isSelected = false;
|
||||
}
|
||||
|
||||
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||||
k = typeof k !== "undefined" ? k : 1 / 3;
|
||||
|
||||
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||||
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||||
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||||
|
||||
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||||
let hoverRate = isHovered ? 1.05 : 1;
|
||||
|
||||
// 返回曲面参数方程
|
||||
return {
|
||||
u: {
|
||||
min: -Math.PI,
|
||||
max: Math.PI * 3,
|
||||
step: Math.PI / 32,
|
||||
},
|
||||
|
||||
v: {
|
||||
min: 0,
|
||||
max: Math.PI * 2,
|
||||
step: Math.PI / 20,
|
||||
},
|
||||
|
||||
x: function (u, v) {
|
||||
if (u < startRadian) {
|
||||
return (
|
||||
offsetX +
|
||||
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
);
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return (
|
||||
offsetX +
|
||||
Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
);
|
||||
}
|
||||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
},
|
||||
|
||||
y: function (u, v) {
|
||||
if (u < startRadian) {
|
||||
return (
|
||||
offsetY +
|
||||
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
);
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return (
|
||||
offsetY +
|
||||
Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
);
|
||||
}
|
||||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
},
|
||||
|
||||
z: function (u, v) {
|
||||
if (u < -Math.PI * 0.5) {
|
||||
return Math.sin(u);
|
||||
}
|
||||
if (u > Math.PI * 2.5) {
|
||||
return Math.sin(u);
|
||||
}
|
||||
return Math.sin(v) > 0 ? 1 * height : -1;
|
||||
},
|
||||
};
|
||||
}
|
||||
// 生成模拟 3D 饼图的配置项
|
||||
function getPie3D(pieData, internalDiameterRatio) {
|
||||
let series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
let legendData = [];
|
||||
let k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i++) {
|
||||
sumValue += pieData[i].value;
|
||||
|
||||
let seriesItem = {
|
||||
name:
|
||||
typeof pieData[i].name === "undefined"
|
||||
? `series${i}`
|
||||
: pieData[i].name,
|
||||
type: "surface",
|
||||
parametric: true,
|
||||
wireframe: {
|
||||
show: false,
|
||||
},
|
||||
pieData: pieData[i],
|
||||
pieStatus: {
|
||||
selected: false,
|
||||
hovered: false,
|
||||
k: k,
|
||||
},
|
||||
};
|
||||
|
||||
if (typeof pieData[i].itemStyle != "undefined") {
|
||||
let itemStyle = {};
|
||||
|
||||
typeof pieData[i].itemStyle.color != "undefined"
|
||||
? (itemStyle.color = pieData[i].itemStyle.color)
|
||||
: null;
|
||||
typeof pieData[i].itemStyle.opacity != "undefined"
|
||||
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
|
||||
: null;
|
||||
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
// console.log(series[i]);
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
series[i].parametricEquation = getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
|
||||
startValue = endValue;
|
||||
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
}
|
||||
// 传入数据生成 option
|
||||
const optionsData = [
|
||||
{
|
||||
name: "充电桩",
|
||||
value: 4256,
|
||||
itemStyle: {
|
||||
// opacity: 0.5,
|
||||
color: "rgba(102, 235, 287, 1)",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "空调",
|
||||
value: 2356,
|
||||
itemStyle: {
|
||||
// opacity: 0.5,
|
||||
color: "rgba(250, 179, 109, 1)",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "微网",
|
||||
value: 2018,
|
||||
itemStyle: {
|
||||
// opacity: 0.5,
|
||||
color: "rgba(1, 164,242, 1)",
|
||||
},
|
||||
},
|
||||
];
|
||||
const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: transformFontSize(16),
|
||||
lineHeight: transformFontSize(20),
|
||||
textStyle: {
|
||||
fontSize: transformFontSize(18),
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
// 设置值域的那指向线
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false, //show设置线是否显示，默认为true，可选值：true ¦ false
|
||||
},
|
||||
length: transformFontSize(30),
|
||||
length2: transformFontSize(30),
|
||||
},
|
||||
// 设置值域的标签
|
||||
label: {
|
||||
normal: {
|
||||
position: "inner", // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
|
||||
// formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{b}
|
||||
// {a}指series.name {b}指series.data的name
|
||||
// {c}指series.data的value {d}%指这一部分占总数的百分比
|
||||
formatter: "{c}",
|
||||
},
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["40%", "60%"], //内环圆 外环圆的宽度
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
// 准备待返回的配置项，把准备好的 legendData、series 传入。
|
||||
let option = {
|
||||
legend: {
|
||||
show: false, //工具栏不展示
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
orient: "vertical",
|
||||
data: ["充电桩", "空调", "微网"],
|
||||
top: "center",
|
||||
itemGap: transformFontSize(14),
|
||||
itemHeight: transformFontSize(8),
|
||||
itemWidth: transformFontSize(17),
|
||||
right: "8%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: transformFontSize(12),
|
||||
},
|
||||
},
|
||||
animation: true,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
color: "red",
|
||||
},
|
||||
// backgroundColor: "rgba(250, 179, 109, 0.8)", //设置自定义背景
|
||||
// borderColor: "rgba(250, 179, 109, 0.8)",
|
||||
formatter: (params) => {
|
||||
if (
|
||||
params.seriesName !== "mouseoutSeries" &&
|
||||
params.seriesName !== "pie2d"
|
||||
) {
|
||||
return `${
|
||||
params.seriesName
|
||||
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
|
||||
params.color
|
||||
};"></span>${
|
||||
option.series[params.seriesIndex].pieData.value + "台"
|
||||
}`;
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: transformFontSize(14),
|
||||
},
|
||||
},
|
||||
title: {
|
||||
x: "center",
|
||||
top: "20",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: transformFontSize(22),
|
||||
},
|
||||
},
|
||||
// backgroundColor: "#0E3567",//背景颜色不展示
|
||||
labelLine: {
|
||||
//指示线条不展示
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
normal: {
|
||||
show: false,
|
||||
length: 10,
|
||||
length2: 10,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{d}%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "14px",
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 0.01,
|
||||
// top: '30%',
|
||||
bottom: "50%",
|
||||
// left:"-20%",
|
||||
// environment: "rgba(255,255,255,0)",
|
||||
viewControl: {
|
||||
distance: 180,
|
||||
alpha: 25,
|
||||
beta: 60,
|
||||
// autoRotate: true, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#gongqiPie {
|
||||
// width: 100%;
|
||||
// height: 300px;
|
||||
width: 150%;
|
||||
height: 150%;;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="homepage_container" :style="styleVar">
|
||||
<div class="content_center">
|
||||
<div class="tab">
|
||||
<div
|
||||
<!-- <div
|
||||
:class="[
|
||||
tabPageFlag === item.id ? 'tabPage_active' : '',
|
||||
'',
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
@click="handleTabPage(item.id)"
|
||||
>
|
||||
{{ item.pageName }}
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="sourcePage" v-if="tabPageFlag === 1">
|
||||
|
|
@ -38,6 +38,23 @@
|
|||
</div>
|
||||
<div class="content">
|
||||
<div class="title_info margin1">资源概况</div>
|
||||
<div class="source_load">
|
||||
<div class="total_load_key">
|
||||
<div class="area_kw">
|
||||
<span>{{ sumLoadrateds }}</span>
|
||||
<div class="r"> kW</div>
|
||||
</div>
|
||||
<p>可调负荷</p>
|
||||
</div>
|
||||
<div class="total_load_3dEchart">
|
||||
<div class="title_load fs40">负荷户数比例</div>
|
||||
<div class="echarts">
|
||||
<threeEchart2></threeEchart2>
|
||||
</div>
|
||||
|
||||
<!-- <threeDPie :threeDPieData="leftData.threeDPieData"></threeDPie> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_info">
|
||||
<div class="name">
|
||||
<div class="cen"><div class="namebg">光伏</div></div>
|
||||
|
|
@ -115,47 +132,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_info">
|
||||
<div class="name">
|
||||
<div class="cen">
|
||||
<div class="namebg">新能源厂站</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="name_box">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_newengery.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="new_energy">
|
||||
<div
|
||||
class="rowbox"
|
||||
v-for="(item, index) in SourcePvstation"
|
||||
:key="index"
|
||||
>
|
||||
<div class="photovoltaic_key1 long">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_lefti.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="r">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_righti.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="photovoltaic_value1 short">
|
||||
<div class="kw">
|
||||
{{ item.ratedS }} <span>kW</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 左展开箭头 -->
|
||||
|
|
@ -189,34 +165,41 @@
|
|||
<span>{{ sumLoadrateds }}</span>
|
||||
<div class="r"> kW</div>
|
||||
</div>
|
||||
<p>地区总额定负荷</p>
|
||||
<p>可调负荷</p>
|
||||
</div>
|
||||
<div class="total_load_3dEchart">
|
||||
<div class="title_load fs40">负荷户数比例</div>
|
||||
<div class="echarts">
|
||||
<threeEchart ></threeEchart>
|
||||
<threeEchart></threeEchart>
|
||||
</div>
|
||||
|
||||
<!-- <threeDPie :threeDPieData="leftData.threeDPieData"></threeDPie> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="posimg">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon2_chongdianzhuang.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="list_info">
|
||||
<div class="rowlist">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon2_chongdianzhuang.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="rbox">
|
||||
<div class="key bshadow">
|
||||
<div class="namebg">充电桩</div>
|
||||
<div class="namebg">居民充电桩</div>
|
||||
</div>
|
||||
<div class="danwei">
|
||||
<div class="danwei centerpos">
|
||||
<div class="v1">
|
||||
<div class="rkw">
|
||||
{{ loadchargingPileratedS }}
|
||||
</div>
|
||||
<div class="rnumber"> kW</div>
|
||||
<div class="rkw">{{ loadchargingPilecount }}</div>
|
||||
<div class="rnumber"> 台</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rbox">
|
||||
<div class="key bshadow">
|
||||
<div class="namebg">商业充电桩</div>
|
||||
</div>
|
||||
<div class="danwei centerpos">
|
||||
<div class="v1">
|
||||
<div class="rkw">{{ loadchargingPilecount }}</div>
|
||||
<div class="rnumber"> 台</div>
|
||||
|
|
@ -225,21 +208,24 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="rowlist">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon2_kongtiao.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="rbox">
|
||||
<div class="key bshadow">
|
||||
<div class="namebg">空调</div>
|
||||
<div class="namebg">V2G充电桩</div>
|
||||
</div>
|
||||
<div class="danwei">
|
||||
<div class="danwei centerpos">
|
||||
<div class="v1">
|
||||
<div class="rkw">
|
||||
{{ loadAirconditionerratedS }}
|
||||
{{ loadAirconditionercount }}
|
||||
</div>
|
||||
<div class="rnumber"> kW</div>
|
||||
<div class="rnumber"> 台</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rbox">
|
||||
<div class="key bshadow">
|
||||
<div class="namebg">在途充电桩</div>
|
||||
</div>
|
||||
<div class="danwei centerpos">
|
||||
<div class="v1">
|
||||
<div class="rkw">
|
||||
{{ loadAirconditionercount }}
|
||||
|
|
@ -249,27 +235,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="rowlist">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon2_weiwang.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="rbox">
|
||||
<div class="key bshadow">
|
||||
<div class="namebg">微网</div>
|
||||
</div>
|
||||
<div class="danwei">
|
||||
<div class="v1">
|
||||
<div class="rkw">{{ loadMicrogridrratedS }}</div>
|
||||
<div class="rnumber"> kW</div>
|
||||
</div>
|
||||
<div class="v1">
|
||||
<div class="rkw">{{ loadMicrogridcount }}</div>
|
||||
<div class="rnumber"> 台</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -283,8 +248,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -330,111 +293,147 @@
|
|||
</div>
|
||||
|
||||
<div class="content_info" v-if="networkFlag === '1'">
|
||||
<div class="name">
|
||||
<div class="cen"><div class="namebg">主网</div></div>
|
||||
</div>
|
||||
<div class="name_box">
|
||||
<img src="@/assets/images/mainPage/icon3_main.png" alt="" />
|
||||
<div class="photovoltaic">
|
||||
<div class="rowbox">
|
||||
<div class="photovoltaic_key1">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_lefti.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="r"><span>110kV</span></div>
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_righti.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="photovoltaic_value1">
|
||||
<div class="kw">
|
||||
{{ Number(networkLine110RatedS).toFixed(2) }}
|
||||
<span>km</span>
|
||||
</div>
|
||||
<div class="hu">
|
||||
{{ networkLine110Count }} <span>条</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="name">
|
||||
<div class="cen">
|
||||
<div class="namebg">
|
||||
配网（
|
||||
<div class="fs25">线路总数：111条</div>
|
||||
）
|
||||
</div>
|
||||
</div>
|
||||
<div class="rowbox">
|
||||
<div class="photovoltaic_key1">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_lefti.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="r"><span>35kV</span></div>
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_righti.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="photovoltaic_value1">
|
||||
<div class="kw">
|
||||
{{ Number(networkLine35RatedS).toFixed(2) }}
|
||||
<span>km</span>
|
||||
</div>
|
||||
<div class="name_box">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon3_feeder.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="photovoltaic">
|
||||
<div class="rowbox">
|
||||
<div class="photovoltaic_key1">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_lefti.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="r"><span>光伏负荷线路</span></div>
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_righti.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="hu">
|
||||
{{ networkLine35Count }} <span>条</span>
|
||||
<div class="photovoltaic_value1">
|
||||
<div class="hu">
|
||||
{{ networkFeer10Count }} <span>条</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rowbox">
|
||||
<div class="photovoltaic_key1">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_lefti.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="r"><span>充电桩负荷线路</span></div>
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_righti.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="photovoltaic_value1">
|
||||
<div class="hu">
|
||||
{{ networkFeer380Count }} <span>条</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rowbox">
|
||||
<div class="photovoltaic_key1">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_lefti.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="r"><span>储能负荷线路</span></div>
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_righti.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="photovoltaic_value1">
|
||||
<div class="hu">
|
||||
{{ networkFeer380Count }} <span>条</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_info" v-if="networkFlag === '1'">
|
||||
<div class="name">
|
||||
<div class="cen"><div class="namebg">配网</div></div>
|
||||
</div>
|
||||
<div class="name_box">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon3_feeder.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="photovoltaic">
|
||||
|
||||
<div class="rowbox">
|
||||
<div class="photovoltaic_key1">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_lefti.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="r"><span>10kV</span></div>
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_righti.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="photovoltaic_value1">
|
||||
<div class="kw">
|
||||
{{ Number(networkFeer10RatedS).toFixed(2) }}
|
||||
<span>km</span>
|
||||
</div>
|
||||
<div class="hu">
|
||||
{{ networkFeer10Count }} <span>条</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="name">
|
||||
<div class="cen">
|
||||
<div class="namebg">
|
||||
台区（
|
||||
<div class="fs25">线路总数：111条</div>
|
||||
）
|
||||
</div>
|
||||
</div>
|
||||
<div class="rowbox">
|
||||
<div class="photovoltaic_key1">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_lefti.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="r"><span>380V</span></div>
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_righti.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="photovoltaic_value1">
|
||||
<div class="kw">
|
||||
{{ Number(networkFeer380RatedS).toFixed(2) }}
|
||||
<span>km</span>
|
||||
</div>
|
||||
<div class="name_box">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon4_xixiao.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="photovoltaic">
|
||||
<div class="rowbox">
|
||||
<div class="photovoltaic_key1">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_lefti.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="r"><span>光伏负荷台区</span></div>
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_righti.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="hu">
|
||||
{{ networkFeer380Count }} <span>条</span>
|
||||
<div class="photovoltaic_value1">
|
||||
<div class="hu">
|
||||
{{ networkFeer10Count }} <span>条</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rowbox">
|
||||
<div class="photovoltaic_key1">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_lefti.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="r"><span>充电桩负荷台区</span></div>
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_righti.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="photovoltaic_value1">
|
||||
<div class="hu">
|
||||
{{ networkFeer380Count }} <span>条</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rowbox">
|
||||
<div class="photovoltaic_key1">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_lefti.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="r"><span>储能负荷台区</span></div>
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_righti.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="photovoltaic_value1">
|
||||
<div class="hu">
|
||||
{{ networkFeer380Count }} <span>条</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -506,72 +505,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="content_info" v-if="networkFlag === '2'">
|
||||
<div class="name">
|
||||
<div class="cen"><div class="namebg">津门湖</div></div>
|
||||
</div>
|
||||
<div class="name_box">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon3_weiwang.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="photovoltaic">
|
||||
<div class="rowbox">
|
||||
<div class="photovoltaic_key1">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_lefti.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="r"><span>光伏</span></div>
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_righti.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="photovoltaic_value1">
|
||||
<div class="kw">9999 <span>个</span></div>
|
||||
<div class="hu">1010 <span>kW</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rowbox">
|
||||
<div class="photovoltaic_key1">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_lefti.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="r"><span>充电桩</span></div>
|
||||
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_righti.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="photovoltaic_value1">
|
||||
<div class="kw">1010 <span>个</span></div>
|
||||
<div class="hu">9999 <span>kW</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rowbox">
|
||||
<div class="photovoltaic_key1">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_lefti.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="r"><span>储能</span></div>
|
||||
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon1_righti.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="photovoltaic_value1">
|
||||
<div class="kw">1010 <span>个</span></div>
|
||||
<div class="hu">9999 <span>kW</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="networkContent" v-else>
|
||||
|
|
@ -599,40 +532,26 @@
|
|||
<div class="title_info margin2">资源概况</div>
|
||||
<div class="content_info">
|
||||
<div class="rowlist">
|
||||
<img
|
||||
src="@/assets/images/mainPage/icon4_xixiao.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="@/assets/images/mainPage/icon4_user.png" alt="" />
|
||||
<div class="rbox">
|
||||
<div class="key bshadow">
|
||||
<div class="namebg">西小站</div>
|
||||
</div>
|
||||
<div class="danwei">
|
||||
<div class="colpos">
|
||||
<div class="v1">
|
||||
负荷功率
|
||||
<div class="r_chu">
|
||||
<div class="rkw">{{ storedUserPartAreaRatedS }}</div>
|
||||
<div class="rnumber"> kW</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="v1">
|
||||
数量
|
||||
<div class="r_chu">
|
||||
<div class="rkw">{{ storedUserPartAreaCount }}</div>
|
||||
<div class="rnumber"> 台</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rowlist">
|
||||
<img src="@/assets/images/mainPage/icon4_user.png" alt="" />
|
||||
<div class="rbox">
|
||||
<div class="key bshadow">
|
||||
<div class="namebg">用户侧</div>
|
||||
</div>
|
||||
<div class="danwei">
|
||||
<div class="v1">
|
||||
<div class="rkw">{{ storedUserPartuserRatedS }}</div>
|
||||
<div class="rnumber"> kW</div>
|
||||
</div>
|
||||
<div class="v1">
|
||||
<div class="rkw">{{ storedUserPartuserCount }}</div>
|
||||
<div class="rnumber"> 台</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -761,6 +680,8 @@ import source_factoryStation_echart from "./twoLine.vue";
|
|||
import load_echart from "./oneLine.vue";
|
||||
import storage_echart from "./oneLine.vue";
|
||||
import threeEchart from "./3Dechart.vue";
|
||||
import threeEchart2 from "./3Dechart2.vue";
|
||||
|
||||
import runListenPage from "./runListenPage.vue";
|
||||
|
||||
import { statInfo_api } from "@/api/homePage/SoureceApi.ts";
|
||||
|
|
@ -1378,23 +1299,18 @@ const hideRight = ref<boolean>(true); //默认页面显示 右边
|
|||
onUnmounted(() => {
|
||||
hideLeft.value = false;
|
||||
hideRight.value = false;
|
||||
handleThree_out(); //清楚边界线和字体
|
||||
});
|
||||
|
||||
// 跳转三维
|
||||
const handleThree = (val) => {
|
||||
const list = {
|
||||
location: "(X=18705617.163,Y=1826842.166,Z=4299675.505)",
|
||||
rotation: "Pitch=-89.9,Yaw=-90.542,Roll=0",
|
||||
const handleThree_out = () => {
|
||||
// 隐藏城南边界线
|
||||
const datadispaly = {
|
||||
CityID: "12010",
|
||||
status: "0", //0隐藏1显示
|
||||
};
|
||||
api_send("CameraMove", list, () => {
|
||||
console.log("CameraMove");
|
||||
});
|
||||
let _list = {
|
||||
CityID: val,
|
||||
status: "1",
|
||||
};
|
||||
api_send("ShowCityEdge", _list, () => {
|
||||
console.log("ShowCityEdge");
|
||||
api_send("ShowCityEdge", datadispaly, () => {
|
||||
console.log("ShowCityEdge隐藏城南边界线");
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -1525,6 +1441,10 @@ const styleVar = computed(() => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.centerpos {
|
||||
justify-content: center;
|
||||
}
|
||||
.infotitle_short {
|
||||
top: 6%;
|
||||
left: 4%;
|
||||
|
|
@ -1687,7 +1607,6 @@ const styleVar = computed(() => {
|
|||
}
|
||||
.source {
|
||||
position: relative;
|
||||
|
||||
height: changeHeight(807.84);
|
||||
.icon_panel_left_on {
|
||||
position: absolute;
|
||||
|
|
@ -1809,6 +1728,81 @@ const styleVar = computed(() => {
|
|||
}
|
||||
}
|
||||
}
|
||||
.source_load {
|
||||
margin-left: 10%;
|
||||
width: 80%;
|
||||
height: changeHeight(263);
|
||||
// background-color: pink;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.total_load_key {
|
||||
width: changeWidth(455.82);
|
||||
height: changeHeight(166.67);
|
||||
background: url("@/assets/images/mainPage/icon2_kwbg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: changeWidth(90);
|
||||
.area_kw {
|
||||
font-size: changeHeight(50);
|
||||
|
||||
font-weight: 600;
|
||||
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
|
||||
height: changeHeight(75);
|
||||
text-shadow: 0px 0px 10px rgba(65, 171, 168, 0.6);
|
||||
.r {
|
||||
font-size: changeHeight(40);
|
||||
color: #86fffc;
|
||||
font-weight: 400;
|
||||
line-height: changeHeight(78);
|
||||
}
|
||||
}
|
||||
p {
|
||||
display: flex;
|
||||
font-size: changeHeight(30);
|
||||
/* 文字 */
|
||||
|
||||
font-weight: 400;
|
||||
|
||||
color: #cccccc;
|
||||
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.total_load_3dEchart {
|
||||
box-sizing: border-box;
|
||||
// width: changeHeight(236.97);
|
||||
// height: changeHeight(135.41);
|
||||
|
||||
width: changeWidth(506.97);
|
||||
height: changeHeight(325.41);
|
||||
display: flex;
|
||||
margin-bottom: changeHeight(80);
|
||||
padding-left: changeWidth(120);
|
||||
// border: 1px solid red;
|
||||
position: relative;
|
||||
.title_load {
|
||||
position: absolute;
|
||||
top: changeHeight(160);
|
||||
right: changeWidth(75);
|
||||
font-weight: 600;
|
||||
z-index: 4;
|
||||
}
|
||||
.echarts {
|
||||
position: absolute;
|
||||
left: changeHeight(-100);
|
||||
top: changeHeight(-20);
|
||||
width: changeWidth(506.97);
|
||||
height: changeHeight(325.41);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.loadContent {
|
||||
margin-top: changeHeight(77.75);
|
||||
|
|
@ -1835,7 +1829,6 @@ const styleVar = computed(() => {
|
|||
}
|
||||
.load {
|
||||
position: relative;
|
||||
|
||||
margin-top: changeHeight(77.75);
|
||||
|
||||
height: changeHeight(1014.74);
|
||||
|
|
@ -1856,7 +1849,17 @@ const styleVar = computed(() => {
|
|||
flex-direction: column;
|
||||
width: 80%;
|
||||
margin-left: 10%;
|
||||
position: relative;
|
||||
.posimg {
|
||||
position: absolute;
|
||||
|
||||
top: 50%;
|
||||
left: 35%;
|
||||
img {
|
||||
width: changeWidth(270.97);
|
||||
height: changeHeight(239.38);
|
||||
}
|
||||
}
|
||||
.total_load {
|
||||
height: changeHeight(263);
|
||||
// background-color: pink;
|
||||
|
|
@ -1933,27 +1936,27 @@ const styleVar = computed(() => {
|
|||
.list_info {
|
||||
flex: 1;
|
||||
padding-right: 10%;
|
||||
margin-left: -10%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.rowlist {
|
||||
width: 100%;
|
||||
width: 120%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
align-items: center;
|
||||
img {
|
||||
width: changeWidth(170.97);
|
||||
height: changeHeight(139.38);
|
||||
}
|
||||
.rbox {
|
||||
width: 65%;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
height: changeHeight(200);
|
||||
// border: 1px solid red;
|
||||
|
||||
// padding: 0 changeHeight(10);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.key {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
|
@ -2047,8 +2050,8 @@ const styleVar = computed(() => {
|
|||
.content_info {
|
||||
// border: 1px saddlebrown solid;
|
||||
display: flex;
|
||||
|
||||
height: changeHeight(319);
|
||||
justify-content: space-evenly;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
// padding-left: changeHeight(20);
|
||||
|
|
@ -2106,7 +2109,7 @@ const styleVar = computed(() => {
|
|||
height: changeHeight(60);
|
||||
line-height: changeHeight(60);
|
||||
.photovoltaic_key1 {
|
||||
width: changeWidth(309.23);
|
||||
width: changeWidth(409.23);
|
||||
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
|
|
@ -2133,7 +2136,8 @@ const styleVar = computed(() => {
|
|||
// background-color: red;
|
||||
// margin-left: changeHeight(43.5);
|
||||
// border: 1px solid red;
|
||||
margin-left: changeWidth(25.5);
|
||||
|
||||
margin-left: changeWidth(125.5);
|
||||
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
|
@ -2212,13 +2216,17 @@ const styleVar = computed(() => {
|
|||
margin-left: changeWidth(60);
|
||||
.rowlist {
|
||||
width: 100%;
|
||||
height: changeHeight(400);
|
||||
display: flex;
|
||||
// border: 1px solid red;
|
||||
|
||||
justify-content: space-between;
|
||||
|
||||
align-items: center;
|
||||
img {
|
||||
width: changeWidth(227.77);
|
||||
// height: changeHeight(130.17);
|
||||
margin-top: 8%;
|
||||
}
|
||||
.rbox {
|
||||
width: 65%;
|
||||
|
|
@ -2247,6 +2255,34 @@ const styleVar = computed(() => {
|
|||
line-height: changeHeight(38);
|
||||
}
|
||||
}
|
||||
.colpos {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: changeHeight(300);
|
||||
justify-content: space-between;
|
||||
.v1 {
|
||||
justify-content: space-around;
|
||||
display: flex;
|
||||
font-size: changeHeight(35);
|
||||
font-weight: 600;
|
||||
// font-size: changeHeight(35);
|
||||
width: changeHeight(640.16);
|
||||
height: changeHeight(80.31);
|
||||
|
||||
background: url("@/assets/images/homePage/bgdanwei.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.r_chu{
|
||||
display: flex;
|
||||
}
|
||||
.rnumber {
|
||||
font-size: changeHeight(30);
|
||||
color: #86fffc;
|
||||
font-weight: 400;
|
||||
|
||||
line-height: changeHeight(50);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue