zhaoqiang
/
v3tianjin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

w

master
“yu” 2024-07-17 01:16:13 +08:00
parent 186bfb9a78
commit 3ed21681f0
5 changed files with 250 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/assets/json/ying31.json
View File

@ -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": "-",

52
src/views/commonPage/3DPie.vue
View File

@ -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);",

25
src/views/pages/OpticalStoragePage/index.vue
View File

@ -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;
}
}

4
src/views/pages/homePage/3Dechart.vue
View File

@ -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)",

198
src/views/pages/homePage/index.vue
View File

@ -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, // 角度
}
},
// radius: ["40%", "40%"],
// center: ["50%", "50%"],
getHeight3D: 40, // 高度
},
// 3d饼图数据1
threeDPieData1: {
pieData: [
{
name: "谷段", //名称
value: 10, //值
itemStyle: {
color: "#EE5944",//半透明
},
},
getHeight3D: 60,
{
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);
@ -1673,11 +1729,9 @@ const styleVar = computed(() => {
// align-items: center;
img {
margin-top: 5%;
width: changeWidth(228.25);
height: changeHeight(201.6);
}
.photovoltaic,
.new_energy {