master
“yu”
parent
186bfb9a78
commit
3ed21681f0
|
|
@ -462,6 +462,79 @@
|
|||
"adeg_e": "-0.000012",
|
||||
"adeg_b": "0.000000"
|
||||
},
|
||||
{
|
||||
"sBeg": "PD102000011333527",
|
||||
"Time": "-",
|
||||
"Date": "-",
|
||||
"sec_id": "SBID000000C09851AC198043C9B008AB0ACA1DECF9",
|
||||
"Qci": "0.0",
|
||||
"Flow_Direction_Flag": "1",
|
||||
"Qi": "0.253131",
|
||||
"V_b": "10.550000",
|
||||
"Pi": "0.956303",
|
||||
"Qj": "-0.253131",
|
||||
"Qcj": "0.0",
|
||||
"Pj": "-0.956303",
|
||||
"sEnd": "PD102000001333526",
|
||||
"V_e": "10.499998",
|
||||
"adeg_e": "-0.000012",
|
||||
"adeg_b": "0.000000"
|
||||
},
|
||||
{
|
||||
"sBeg": "PD102000011333527",
|
||||
"Time": "-",
|
||||
"Date": "-",
|
||||
"sec_id": "SBID0000005D9109D2D9DC4CF0A019E5325DC690AB",
|
||||
"Qci": "0.0",
|
||||
"Flow_Direction_Flag": "1",
|
||||
"Qi": "0.283131",
|
||||
"V_b": "10.600000",
|
||||
"Pi": "0.966303",
|
||||
"Qj": "-0.283131",
|
||||
"Qcj": "0.0",
|
||||
"Pj": "-0.966303",
|
||||
"sEnd": "PD102000001333526",
|
||||
"V_e": "10.499998",
|
||||
"adeg_e": "-0.000012",
|
||||
"adeg_b": "0.000000"
|
||||
},
|
||||
{
|
||||
"sBeg": "PD102000011333527",
|
||||
"Time": "-",
|
||||
"Date": "-",
|
||||
"sec_id": "SBID000000F05BC542CC9242519159F33D0562C2AC",
|
||||
"Qci": "0.0",
|
||||
"Flow_Direction_Flag": "1",
|
||||
"Qi": "0.293131",
|
||||
"V_b": "10.600000",
|
||||
"Pi": "0.976303",
|
||||
"Qj": "-0.293131",
|
||||
"Qcj": "0.0",
|
||||
"Pj": "-0.976303",
|
||||
"sEnd": "PD102000001333526",
|
||||
"V_e": "10.499998",
|
||||
"adeg_e": "-0.000012",
|
||||
"adeg_b": "0.000000"
|
||||
},
|
||||
{
|
||||
"sBeg": "PD102000011333527",
|
||||
"Time": "-",
|
||||
"Date": "-",
|
||||
"sec_id": "SBID000000D87EE2A0923446238309C685B12CA67C",
|
||||
"Qci": "0.0",
|
||||
"Flow_Direction_Flag": "1",
|
||||
"Qi": "0.303131",
|
||||
"V_b": "10.600000",
|
||||
"Pi": "0.996303",
|
||||
"Qj": "-0.303131",
|
||||
"Qcj": "0.0",
|
||||
"Pj": "-0.986303",
|
||||
"sEnd": "PD102000001333526",
|
||||
"V_e": "10.499998",
|
||||
"adeg_e": "-0.000012",
|
||||
"adeg_b": "0.000000"
|
||||
},
|
||||
|
||||
{
|
||||
"sBeg": "PD102000001332807",
|
||||
"Time": "-",
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ let handelColumnEcharts = () => {
|
|||
},
|
||||
|
||||
//设置饼图在容器中的位置(目前没发现啥用)
|
||||
// center: ['50%', '100%']
|
||||
// center: ['20%', '100%']
|
||||
};
|
||||
|
||||
//曲面的颜色、不透明度等样式。
|
||||
|
|
@ -152,31 +152,31 @@ let handelColumnEcharts = () => {
|
|||
// });
|
||||
let option = {
|
||||
//图例组件
|
||||
legend: {
|
||||
//图例列表的布局朝向。
|
||||
orient: props.threeDPieData.legend.orient,
|
||||
right: props.threeDPieData.legend.right,
|
||||
top: props.threeDPieData.legend.top,
|
||||
//图例文字每项之间的间隔
|
||||
itemGap: props.threeDPieData.legend.itemGap,
|
||||
show: true,
|
||||
icon: "rect",
|
||||
itemHeight: 10,
|
||||
itemWidth: 10,
|
||||
textStyle: {
|
||||
//图例字体大小
|
||||
fontSize: transformFontSize(15),
|
||||
color: "#FFFFFF",
|
||||
lineHeight: 20,
|
||||
},
|
||||
formatter: function (params) {
|
||||
for (let i = 0; i < pieData.length; i++) {
|
||||
if (pieData[i].name === params) {
|
||||
return `${pieData[i].name} ${(pieData[i].value / props.threeDPieData.total*100).toFixed(0)}%`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// legend: {
|
||||
// //图例列表的布局朝向。
|
||||
// orient: props.threeDPieData.legend.orient,
|
||||
// right: props.threeDPieData.legend.right,
|
||||
// top: props.threeDPieData.legend.top,
|
||||
// //图例文字每项之间的间隔
|
||||
// itemGap: props.threeDPieData.legend.itemGap,
|
||||
// show: false,
|
||||
// icon: "rect",
|
||||
// itemHeight: 10,
|
||||
// itemWidth: 10,
|
||||
// textStyle: {
|
||||
// //图例字体大小
|
||||
// fontSize: transformFontSize(15),
|
||||
// color: "#FFFFFF",
|
||||
// lineHeight: 20,
|
||||
// },
|
||||
// formatter: function (params) {
|
||||
// for (let i = 0; i < pieData.length; i++) {
|
||||
// if (pieData[i].name === params) {
|
||||
// return `${pieData[i].name} ${(pieData[i].value / props.threeDPieData.total*100).toFixed(0)}%`
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
//移动上去提示的文本内容
|
||||
tooltip: {
|
||||
backgroundColor: "rgba(18, 55, 85, 0.8);",
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@
|
|||
</div>
|
||||
</div> -->
|
||||
<div class="info2_content">
|
||||
<div class="linepic"></div>
|
||||
<div class="linepic" @click="handleEnter2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -740,6 +740,20 @@ let handleEnter = () => {
|
|||
});
|
||||
});
|
||||
};
|
||||
// svg入口事件 打开一个svg图
|
||||
let handleEnter2 = () => {
|
||||
dialogVisible.value = true;
|
||||
loadingFlag.value = true;
|
||||
|
||||
nextTick(() => {
|
||||
SVGContainer.value.innerHTML = testSvg as any;
|
||||
draw = SVG(SVGContainer.value.getElementsByTagName("svg")[0]);
|
||||
let s = draw.panZoom({ zoomMin: 0.1, zoomMax: 30, zoomFactor: 0.5 });
|
||||
draw.size("100%", "100%");
|
||||
draw.zoom(0.6);
|
||||
|
||||
});
|
||||
};
|
||||
let handleShowSvg = async (svgIndex: string) => {
|
||||
// let setData = { id: svgIndex }
|
||||
// svgdApi(setData)
|
||||
|
|
@ -1100,7 +1114,7 @@ let handleCustomLine = (svgHtml, result) => {
|
|||
text = draw
|
||||
.text(
|
||||
`P: ${(parseFloat(data["Pi"]) * 100).toFixed(4)} kW \nQ: ${(
|
||||
parseFloat(data["Qi"]) * 100
|
||||
parseFloat(data["Qi"]) * 10
|
||||
).toFixed(4)} kVar \nV: ${parseFloat(data["V_b"]).toFixed(
|
||||
4
|
||||
)} kV \nI: ${(
|
||||
|
|
@ -1142,9 +1156,9 @@ let handleCustomLine = (svgHtml, result) => {
|
|||
// 文本
|
||||
draw
|
||||
.text(
|
||||
`P: ${(parseFloat(data["Pload/phase"]) * 100).toFixed(
|
||||
`P: ${(parseFloat(data["Pload/phase"]) * 8).toFixed(
|
||||
4
|
||||
)} kW\nQ: ${(parseFloat(data["i"]) * 100).toFixed(4)} kVar`
|
||||
)} kW\nQ: ${(parseFloat(data["i"]) * 8).toFixed(4)} kVar`
|
||||
)
|
||||
.attr({
|
||||
x: centerX - 100,
|
||||
|
|
@ -1424,7 +1438,7 @@ let handleAnimate = async (result: any) => {
|
|||
)} kV \nI: ${(
|
||||
(parseFloat(data["Pi"]) * 100) /
|
||||
(parseFloat(data["V_b"]) * 1.732)
|
||||
).toFixed(4)} kV`
|
||||
).toFixed(4)} A`
|
||||
)
|
||||
.attr({
|
||||
x: x - 10,
|
||||
|
|
@ -2541,6 +2555,7 @@ const styleVar = computed(() => {
|
|||
height: 100%;
|
||||
background: url("@/assets/images/osPage/rztp.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@ export default {
|
|||
const optionsData = [
|
||||
{
|
||||
name: "充电桩",
|
||||
value: 4256,
|
||||
value: 415,
|
||||
itemStyle: {
|
||||
// opacity: 0.5,
|
||||
color: "rgba(102, 235, 287, 1)",
|
||||
|
|
@ -189,7 +189,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: "空调",
|
||||
value: 2356,
|
||||
value: 4135,
|
||||
itemStyle: {
|
||||
// opacity: 0.5,
|
||||
color: "rgba(250, 179, 109, 1)",
|
||||
|
|
|
|||
|
|
@ -49,16 +49,22 @@
|
|||
<div class="total_load_3dEchart">
|
||||
<div class="title_load fs40">负荷户数比例</div>
|
||||
<div class="echarts">
|
||||
<!-- <Treepie ></Treepie> -->
|
||||
<Treepie v-if="show" :threeDPieData="leftData.threeDPieData"></Treepie>
|
||||
<!-- <Threepie
|
||||
v-if="show"
|
||||
:threeDPieData="leftData.threeDPieData"
|
||||
></Threepie> -->
|
||||
</div>
|
||||
|
||||
<!-- <threeDPie :threeDPieData="leftData.threeDPieData"></threeDPie> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_info">
|
||||
<div class="name">
|
||||
<div class="cen"><div class="namebg">光伏（<div class="fs35">总装机容量：149.39MW</div>）</div></div>
|
||||
<div class="cen">
|
||||
<div class="namebg">
|
||||
光伏（
|
||||
<div class="fs35">总装机容量：149.39MW</div>
|
||||
）
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name_box">
|
||||
<img
|
||||
|
|
@ -159,7 +165,10 @@
|
|||
<div class="total_load_3dEchart">
|
||||
<div class="title_load fs40">负荷户数比例</div>
|
||||
<div class="echarts">
|
||||
<threeEchart></threeEchart>
|
||||
<!-- <Threepie
|
||||
v-if="show"
|
||||
:threeDPieData="leftData.threeDPieData1"
|
||||
></Threepie> -->
|
||||
</div>
|
||||
|
||||
<!-- <threeDPie :threeDPieData="leftData.threeDPieData"></threeDPie> -->
|
||||
|
|
@ -537,7 +546,10 @@
|
|||
<div class="title_info margin2">资源概况</div>
|
||||
<div class="content_info">
|
||||
<div class="rowlist">
|
||||
<img src="@/assets/images/homePage/v2img/c-user.png" alt="" />
|
||||
<img
|
||||
src="@/assets/images/homePage/v2img/c-user.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="rbox">
|
||||
<div class="key bshadow">
|
||||
<div class="namebg">西小站</div>
|
||||
|
|
@ -686,8 +698,7 @@ import load_echart from "./oneLine.vue";
|
|||
import storage_echart from "./oneLine.vue";
|
||||
import threeEchart from "./3Dechart.vue";
|
||||
import threeEchart2 from "./3Dechart2.vue";
|
||||
import Treepie from "./Treepie.vue";
|
||||
|
||||
import Threepie from "./Treepie.vue";
|
||||
import runListenPage from "./runListenPage.vue";
|
||||
|
||||
import { statInfo_api } from "@/api/homePage/SoureceApi.ts";
|
||||
|
|
@ -1061,85 +1072,130 @@ const getStatInfo = async () => {
|
|||
};
|
||||
// 资源总览
|
||||
// 荷
|
||||
let leftData = reactive({
|
||||
PVGenerationData: [
|
||||
{
|
||||
name: "总发电量：",
|
||||
value: "10728.8",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "月发电量：",
|
||||
value: "1629.3",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "周发电量：",
|
||||
value: "409.2",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "日发电量：",
|
||||
value: "62.5",
|
||||
unit: "kWh",
|
||||
},
|
||||
],
|
||||
carbonEmissionData: [
|
||||
{
|
||||
name: "总碳排放：",
|
||||
value: "34071.2",
|
||||
unit: "kg",
|
||||
},
|
||||
{
|
||||
name: "月碳排放：",
|
||||
value: "5162.3",
|
||||
unit: "kg",
|
||||
},
|
||||
{
|
||||
name: "周碳排放：",
|
||||
value: "1304.1",
|
||||
unit: "kg",
|
||||
},
|
||||
{
|
||||
name: "日碳排放：",
|
||||
value: "183.5",
|
||||
unit: "kg",
|
||||
},
|
||||
],
|
||||
interface leftDataInfo {
|
||||
businessValue: string,
|
||||
residentValue: string,
|
||||
tableData: tableInfo1[][]
|
||||
tableData1: tableInfo1[][],
|
||||
threeDPieData: any
|
||||
threeDPieData1:any
|
||||
}
|
||||
interface tableInfo1 {
|
||||
index: string;
|
||||
name: string;
|
||||
platFromName: string;
|
||||
pileCount: string;
|
||||
sumP: string;
|
||||
}
|
||||
let show = ref(true);
|
||||
let leftData = reactive<leftDataInfo>({
|
||||
businessValue: '0',
|
||||
residentValue: '0',
|
||||
tableData: [],
|
||||
tableData1: [],
|
||||
// 3d饼图数据
|
||||
threeDPieData: {
|
||||
pieData: [
|
||||
{
|
||||
name: "可再生能源", //名称
|
||||
value: 78, //值
|
||||
name: "谷段", //名称
|
||||
value: 10, //值
|
||||
itemStyle: {
|
||||
color: "#6BFF82", //半透明
|
||||
color: "#EE5944",//半透明
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "其他能源",
|
||||
value: 22,
|
||||
name: "高峰",
|
||||
value: 20,
|
||||
itemStyle: {
|
||||
color: "#00AAF3",
|
||||
color: "#2E53F5",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "尖峰",
|
||||
value: 40,
|
||||
itemStyle: {
|
||||
color: "#F1BA50",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "平段",
|
||||
value: 40,
|
||||
itemStyle: {
|
||||
color: "#6FFBF7",
|
||||
},
|
||||
}
|
||||
],
|
||||
total: 100,
|
||||
center: 0,
|
||||
total: 108,
|
||||
center: 0.9, // 是否圆环
|
||||
legend: {
|
||||
orient: "horizontal",
|
||||
right: "center",
|
||||
top: "2%",
|
||||
itemGap: 30,
|
||||
show:false,
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
top: '-3%',
|
||||
itemGap: 20
|
||||
},
|
||||
grid3D: {
|
||||
viewControl: {
|
||||
distance: 500,
|
||||
alpha: 35,
|
||||
},
|
||||
distance: 350, // 缩放视角
|
||||
alpha: 45, // 角度
|
||||
}
|
||||
},
|
||||
getHeight3D: 60,
|
||||
// radius: ["40%", "40%"],
|
||||
// center: ["50%", "50%"],
|
||||
getHeight3D: 40, // 高度
|
||||
},
|
||||
});
|
||||
// 3d饼图数据1
|
||||
threeDPieData1: {
|
||||
pieData: [
|
||||
{
|
||||
name: "谷段", //名称
|
||||
value: 10, //值
|
||||
itemStyle: {
|
||||
color: "#EE5944",//半透明
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "高峰",
|
||||
value: 20,
|
||||
itemStyle: {
|
||||
color: "#2E53F5",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "尖峰",
|
||||
value: 40,
|
||||
itemStyle: {
|
||||
color: "#F1BA50",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "平段",
|
||||
value: 40,
|
||||
itemStyle: {
|
||||
color: "#6FFBF7",
|
||||
},
|
||||
}
|
||||
],
|
||||
total: 108,
|
||||
center: 0.9, // 是否圆环
|
||||
legend: {
|
||||
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
top: '-30%',
|
||||
itemGap: 20
|
||||
},
|
||||
grid3D: {
|
||||
viewControl: {
|
||||
distance: 350, // 缩放视角
|
||||
alpha: 45, // 角度
|
||||
}
|
||||
},
|
||||
// radius: ["40%", "40%"],
|
||||
// center: ["50%", "50%"],
|
||||
getHeight3D: 40, // 高度
|
||||
}
|
||||
})
|
||||
// 网
|
||||
// 网盒子得标识
|
||||
let networkContentFlag = ref(true);
|
||||
|
|
@ -1671,13 +1727,11 @@ const styleVar = computed(() => {
|
|||
display: flex;
|
||||
height: changeHeight(300);
|
||||
// align-items: center;
|
||||
|
||||
|
||||
img {
|
||||
|
||||
margin-top: 5%;
|
||||
width: changeWidth(228.25);
|
||||
height: changeHeight(201.6);
|
||||
|
||||
}
|
||||
.photovoltaic,
|
||||
.new_energy {
|
||||
|
|
@ -2247,7 +2301,7 @@ const styleVar = computed(() => {
|
|||
width: changeWidth(227.77);
|
||||
height: changeHeight(193.42);
|
||||
////----
|
||||
|
||||
|
||||
margin-top: 15%;
|
||||
}
|
||||
.rbox {
|
||||
|
|
|
|||
Loading…
Reference in New Issue